ahandrewh teaches IAT-339web design & development

Introduction

To practice understanding JavaScript (JS) and accessibility you will be exploring a common accessibility error.

Instructions

For this exercise you will be working with a checkbox dropdown and a JavaScript dropdown to explore how the code works and where there may be accessibility concerns.

What does the dropdown do?

1. Open up the a checkbox dropdown. Explore how the dropdown works (or does not) by interacting it with both mouse and keyboard.
2. Open up the JS dropdown. Explore what JS has added to the page by disabling JavaScript and seeing what no longer works. Make sure to re-enable JavaScript and to keep the developer tools console open and available for this exercise.

Write a brief summary for each dropdown of what is working and not when:

• Using the mouse to interact
• Using the keyboard to interact
• JavaScript is disabled

Where might there be accessibility concerns?

1. Get set up with either the NVDA screen reader (for Windows) or the VoiceOver screen reader (for Mac).
2. Try using both the dropdowns while using the screen reader and use the keyboard to navigate.

Write a brief summary for each dropdown of what is working and not when using a screen reader and keyboard to interact with the dropdowns.

Once done summarizing

Submit a copy of the HTML files or a PDF summary to the Canvas assignment.

Your submission is due before 8:30am on October 24.

Grading rubric

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

• 0.5 points for completing the exercise.
• 0.5 points for identifying all the issues.

Recommended resources

• Getting started with NVDA: An introduction to setting up NVDA in Windows.
• Getting started with VoiceOver: An introduction to setting up VoiceOver in Mac OS.
• The A11y Project: Articles on accessibility.
• Inclusive Components: Breakdowns of how to make common web components accessible.

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.