Assignment Information 3/23/24, 8:55 AM GRA 310 Module Four Activity Accessibility and SEO Guidelines and Rubric Overview An accessible website ensures inclusivity by catering to diverse user needs, which improves usability for all. An SEO-optimized website enhances the brand's online visibility, thus driving organic traffic and boosting the site's reach. Scenario You are a web designer who works at a small design firm. Your firm has been hired by a coffeehouse-Nebula Coffee-to design and build a functioning and compliant, service-based, responsive website. One of your peers has designed the homepage and has requested you to review the page for accessibility and search engine optimization capabilities. Directions Evaluate the accessibility and SEO capabilities of a provided webpage. Also, reflect on the purpose and importance of accessible and SEO-optimized websites. Step-by-step instructions and a video (in the Supporting Materials section of this activity and the Required Resources section of this module) have been provided to guide you through this assignment. Note: You will use Visual Studio Code to complete this assignment. If you haven't done so already, refer to the Start Here area of the course for download instructions and guidance on compressing (zipping) files. Specifically, you must address the following rubric criteria: Part 1: Accessibility Review the accessibility of the provided website's homepage (index.html). You will then edit the homepage (index.html) to fix its accessibility and search engine optimization issues. These fixes should align with the brand style guide. The website homepage (index.html) and the brand style guide have been provided in the client files, linked in the Supporting Materials section. Please note that the root folder contains some additional HTML files that are blank. These pages are meant to be placeholders for fixing navigation-related issues only. You do not need to add any content or edit anything within these blank HTML files. Use the WCAG accessibility checker (Test With WAVE) to identify the problematic areas. Refer to the module resources to learn how to use the WAVE tool. Then, open the index.html file in Visual Studio Code and fix the problematic areas. 1. Include the text alternatives for all images displayed on the webpage. Come up with two to three ideas before you decide on the text alternative that you want to use for each image. Include the following details in your work: A. The text alternative of each image should accurately describe the main element of the corresponding image. For example, if you are using an image of a waterfall, then the text alternative should be "waterfall." 2. Optimize the color contrast between design elements on the webpage. Include the following details in your work: A. The remediated color contrast ratio should meet the WCAG standards. 3. Refine the readability and legibility of the written content displayed on the webpage. The remediated typography should meet the WCAG standards. Consider the following questions to guide your work: • Can all users read the onscreen text without straining their eyes? ⋅ Are the typefaces easy to read? • Are the font sizes easy to read? • Are all letters and numbers easily recognized? For example, can users distinguish between zero (0) and the letter O? • Is there sufficient color contrast between text and background color? 4. Optimize the existing navigation structure of the webpage. Include the following details in your work: A. Ensure all the supporting webpages (blank HTML files provided in the Supporting Materials section) are correctly linked from the global navigation bar. B. Ensure all the supporting webpages (blank HTML files) are organized in a hierarchical manner. 5. Refine the visual hierarchy of the webpage. Include the following details in your work: A. Present important information in a larger font size than the supporting information. B. Ensure any call to action is presented in a way that grabs users' attention. It should be made the focal point of the page. C. Ensure related information is grouped together in a logical manner. https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...ity_and_SEO_Guidelines_and_Rubric.html?ou=1544961&d2l_body_type=3 Page 1 of 4 Assignment Information 3/23/24, 8:55 AM Part 2: SEO Evaluate the SEO capabilities of the provided webpage, linked in the Supporting Materials section. Then, open the website homepage (index.html) in Visual Studio Code and fix the problematic areas. 6. Modify the page titles to be more search engine friendly. Complete the following step: A. Edit the <title> tag to be descriptive of the page and its content. 7. Include SEO-optimized meta keywords and descriptions. Complete the following steps: A. In the <head> section of the homepage, edit the <meta> keyword tag's content. B. In the <head> section of the homepage, edit the <meta> description tag's content. 8. Optimize the image file names to be SEO-friendly. 9. Organize the provided client root folder as per industry standards. Complete the following steps: A. Ensure all file and folder names follow industry naming conventions. B. Ensure that all files are placed in the appropriate subfolders. 10. Submit the zipped root folder for grading. Before zipping, ensure the contents of the root folder are updated with the latest edits. Part 3: Written Response Describe how you addressed the accessibility and SEO challenges of the provided webpage. Then, reflect on the importance of optimizing websites in these areas. 11. Describe how the accessibility and SEO capabilities of the provided webpage were optimized. Include the following details in your response: A. Outline the problematic areas related to accessibility and SEO in the provided webpage. These areas were identified in the report generated by the WCAG accessibility checker in Part 1 of this assignment. B. Explain how you addressed these problematic areas in the optimized webpage. 12. Explain the importance of optimizing the accessibility and SEO capabilities of websites. Consider the following questions to guide your response: • Why is it important to make websites accessible? • What is the purpose of SEO optimization? What to Submit Submit the following deliverables: Part 1 and 2: Root Folder Submit the root folder created in Visual Studio Code as a zip file for grading. The zipped root folder should contain all the relevant subfolders and files edited in Part 1 and Part 2 of this assignment. Part 3: Written Response Submit your assignment as a 2-page Microsoft Word document with double spacing, 12-point Times New Roman font, and one-inch margins. If you reference any sources in your work, cite them according to MLA style. Supporting Materials The following resources support your work on the activity: GRA 310 Module Four Client Files Download and unzip this folder to access the required files needed for this assignment. Module Four: Accessibility and SEO This video from the Module Four Required Resources will help you complete this activity. Criteria Exemplary Part 1: Text Alternatives N/A Module Four Activity Accessibility and SEO Rubric Proficient Includes the text alternatives for all images displayed on the webpage (100%) Needs Improvement Not Evident Value Shows progress toward proficiency, but with errors or omissions; areas for improvement may include Does not attempt criterion (0%) 5 https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...ty_and_SEO_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 2 of 4 Assignment Information Part 1: Color Contrast N/A Part 1: Readability and Legibility N/A Optimizes the color contrast between design elements on the webpage (100%) Refines the readability and legibility of the written content displayed on the webpage (100%) Part 1: Navigation N/A Structure Optimizes the existing navigation structure of the webpage (100%) Part 1: Visual Hierarchy N/A Refines the visual hierarchy of the webpage (100%) ensuring that each text alternative accurately describes the corresponding image (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include ensuring the color contrast meets the standard defined by WCAG (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include ensuring that the typography styles, contrast, and size do not cause visual strain and are aligned with WCAG standards (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include ensuring all the supporting webpages are correctly linked from the webpage and are organized in a hierarchical manner (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include ensuring important information is presented in a larger font size than the supporting information, call to action is designed to grab users' attention, and related information is grouped together (55%) N/A Part 2: Page Titles N/A Part 2: Meta Keywords and Descriptions N/A Part 2: Image File Names N/A Modifies the page titles to be more search engine friendly (100%) Includes SEO-optimized meta keywords and descriptions (100%) Optimizes the image file names to be SEO friendly (100%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include adding meta keywords and descriptions in the <head> section of the homepage and ensuring these keywords and descriptions are relevant and describe the content of the webpage (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include 3/23/24, 8:55 AM Does not attempt criterion (0%) 5 Does not attempt criterion (0%) 5 Does not attempt criterion (0%) 10 Does not attempt criterion (0%) 10 Does not attempt criterion (0%) 5 Does not attempt criterion (0%) 10 Does not attempt criterion (0%) 10 https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...ty_and_SEO_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 3 of 4 Assignment Information Part 2: Organize N/A adding keywords that are Organizes the provided client root folder as per industry standards (100%) relevant and describe the content of the files (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include organizing all the files and subfolders inside the root folder accurately and as per industry naming conventions (55%) N/A 3/23/24, 8:55 AM Does not attempt criterion (0%) 10 10 Part 2: Zipped Root Folder N/A Part 3: Accessibility and SEO Capabilities Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Part 3: Importance Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Submits the zipped root folder for grading (100%) Describes how the accessibility and SEO capabilities of the provided webpage were optimized (85%) Explains the importance of optimizing the accessibility and SEO capabilities of websites (85%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include outlining the problematic areas accurately and explaining how these areas were addressed in a clear and logical manner (55%) Shows progress toward proficiency, but with errors or omissions; areas for improvement may include explaining the importance of optimizing websites for accessibility and SEO Articulation of Response Does not attempt criterion (0%) 5 capabilities in a clear and logical manner (55%) Does not attempt criterion (0%) 10 10 Does not attempt criterion (0%) 10 Exceeds proficiency in an exceptionally clear, insightful, sophisticated, or creative manner (100%) Clearly conveys meaning with correct grammar, sentence structure, and spelling, demonstrating an understanding of audience and purpose (85%) Shows progress toward proficiency, but with errors in grammar, sentence structure, and spelling, negatively impacting readability (55%) Submission has critical errors in grammar, sentence structure, and spelling, preventing understanding of ideas (0%) 5 Total: 100% https://learn.snhu.edu/content/enforced/1544961-GRA-310-X4728-OL-...ty_and_SEO_Guidelines_and_Rubric.html?ou=1544961&d21_body_type=3 Page 4 of 4