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.
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.