ahandrewh teaches IAT-339web design & development

Introduction

To improve the accessibility of your current project, you will be making use of a couple of tools to assist you in finding accessibility concerns or general errors in your website.

Instructions

For this exercise you will be making use of the Lighthouse tool available as part of Chrome Devtools. Select one of your more complex or important site URLs to test.

Run an automated audit

1. Open Chrome Devtools.
2. Locate the the Lighthouse tool either under the 'Audit' or 'Lighthouse' tab.
3. Generate a report using the Performance, Best practices, and Accessibility categories for a mobile device.
4. Write down two issues that you believe are most important to address. If no issues arise, note that.

Write a brief summary of why you believe the two issues you selected are most important to address. If you are unsure what they mean check-in with your TA or lecturer.

Run a manual audit

Please follow the instructions below to test accessibility manually. Make a list of issues as you find them.

1. As you use the 'tab' key to move through your site:
   • Does it move through the links in a logical order?
   • Does it indicate which element is selected?
   • Can you move through and fill out forms with just the keyboard?
2. Can you tell apart interactive elements (i.e. buttons, links) from non-interactive elements (i.e. text, images)?
   • Can you tell when hovering over an item?
   • Can you tell when using the keyboard (tab) to select an item?
3. Are there any concerns with your content?
   • Does link text always explain where the link goes, or what the button does?
   • Do you have any 'click here' or 'read more' links?
   • Is there only one <h1> for the page?
   • Is colour ever used as the only means of communicating a message (i.e. red/green buttons with no text)?
4. Do your images:
   • Have alt attributes if they are important content?
   • If an image inside a link, does the alt attribute describe where it goes?
   • If an image (not as part of a link), does the alt attribute effectively describe the image as if we did not see it?
5. Using a screen reader (setup covered in the previous exercise):
   • Navigate through your website using the links on the page.
   • Try to complete the process of purchasing a product.

Select two issues that you believe are most important to address. Write a brief summary of why you believe the two issues you selected are most important to address.

Write a summary

Type up summary of the issues you found. Please include:

• The URL for the page tested.
• The two issues you see as most important to address from the automated audit, and why.
• The list of issues from the manual audit.
• The two issues you see as most important to address from the manual audit, and why.

You can submit the summary as text or a file to Canvas. Your submission is due before 8:30am on October 31.

Grading rubric

This code exercise is worth 1% (1 point) of your final grade.

• 0.5 points for completing the exercise steps.
• 0.5 points for clear writing and document structure.

Recommended resources

• Accessibility Checklist (The A11Y Project): A more complete overview of items to test for accessibility.
• Inclusive Design Principles: Broader principles for thinking about web accessibility and building inclusive and accessible digital products.

Exercise rules reminder

Please remember that the exercise rules still apply:

1. You can use online resources, course materials, your TA, and lab-mates for support. This being said, others are not allowed to do your work for you. Also, if you are drawing from online resources, course materials, your TA or peers, you must;
2. Cite any knowledge that is not yours in a comment in the code. The internet is a huge repository of information and you are welcome to use it, but you must let us know when something does not originate from your own knowledge.
3. If work has been copied without citation the exercise grade will be zero. Please make sure to include comments indicating where you had assistance or learned.