Instructions

The following instructions guide you through the final project and provide guidance about how to edit the appropriate files to improve the overall accessibility of the web application.

Step 1: Download and extract the project files

To get started, click the following link to download a zip file of the web application.

FinalProject.zip

1. Use an archive utility to extract the HTML, CSS, JavaScript, and image files to a location where you can edit and save them. Do not change the location of any of the files within the FinalProject folder.
2. Open index.html in your browser to verify that it looks similar to the screenshot below, that you can click the buttons, and that the autocomplete shows Pluto when you type P in the search box.

Image 1. Final Project


3. Use ChromeVox to navigate through the page and run the Accessibility Developer Tools. Try to identify the regions that need accessibility modifications. Remember that in order to run the accessibility audit on a local file like index.html you will have to go to chrome://extensions and place a checkmark in the "Allow access to file URLs" box next to the Accessibility Developer Tools extension.

Step 2: Edit index.html

Now you are ready to make changes to the file.

Note: It is not necessary to add additional HTML elements or JavaScript functions to index.html. Use the existing elements and functions to add accessibility attributes.

1. Open index.html in your favorite code editor.
2. Add ARIA button roles to all elements that function as buttons that are not button elements. (Lesson 2.2)
3. Add ARIA navigation and main roles to the appropriate elements. (Lesson 2.3)
4. Modify the modal dialog displayed after Purchase Button is clicked: (Lesson 2.4)
• Add the appropriate ARIA label.
• Add disable=true the Purchase button to disable it.
• Switch focus to the modal dialog when it is displayed.
5. Edit the “Upcoming events” collapse and expand widget: (Lesson 2.5)
• Add the appropriate ARIA attribute to the button element and set its initial state.
• Add the appropriate ARIA attribute to the accordion body div and set its initial state.
• Dynamically toggle the aria-hidden attribute when the widget expands and collapses.
• Dynamically toggle the aria-expanded attribute when the widget expands and collapses.
6. Edit the autocompletion Destination Input box to set the aria-activedescendant attribute of the input element to the active element id (acItemElem.id) in the setActiveAutocompleteItem Javascript handler. (Lesson 2.6)
7. Modify the tri-state checkbox: (Lesson 2.7)
• Dynamically adjust the aria-checked attribute if the checkbox has checked and unchecked children.
• Dynamically adjust the aria-checked attribute if the checkbox does not have any checked children.
8. Remove the live region that causes the advertisement to notify the user each time it changes. (Lesson 3.2)
9. Add the appropriate ARIA role to the element that updates the total when the user updates their destination and add-on experiences. (Lesson 3.2)

Step 3: Check your changes with ChromeVox

Now that you have made changes to index.html, you want to ensure that it is indeed more accessible.

1. Use ChromeVox to navigate through the updated index.html. How does this experience compare to your first time?
2. Use the Accessibility Developer Tool to audit index.html. Here are some of the tests that should pass:
• Controls and media elements should have labels
• Elements with ARIA roles must use a valid, non-abstract ARIA role
• Elements with ARIA roles must have all required attributes for that role
• ARIA state and property values must be valid

Step 4: Check your answer