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.
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.
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
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.
Open index.html in your favorite code editor.
Add ARIA button roles to all elements that function as buttons that are not button elements. (Lesson 2.2)
Add ARIA navigation and main roles to the appropriate elements. (Lesson 2.3)
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.
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.
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)