Find Answer

Question

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