5. Interactive WAI-ARIA (Intermediate)

Activity 11: Accessible Carousel

Accessible Carousel

Based on the Carousel details on the previous page, apply what you have learned to the associated activity files to make the carousel there accessible.

Files for this activity include:

Use the surroundings of the highlighted code on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the carousel by applying the highlighted code to the /assets/ik_carousel.js file.

Note: While we suggest using the highlighted code we’ve provided, you are free to come up with your own solutions provided they produce the expected results listed in the marking rubric below.

Test your updated carousel with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.

Requirements

When you have applied your changes and tested to ensure your carousel functions as described, submit the URL to your carousel.html file on your GitHub Pages site, to the file on the web server you are using to host your copy of the activity files, or a GitHack URL.

Grading Rubric

Criteria Points
Instructions Provided
Screen reader instructions are provided when carousel receives focus.
1.0 pts
Carousel Focusable
Carousel panels are keyboard focusable.
1.0 pts
Carousel Navigation
Navigate between panels with the Left and Right Arrow keys.
3.0 pts
Panels Read Aloud
While the carousel has focus, each panel reads aloud when it comes into view.
2.0 pts
Manual while in Focus
When in focus, or while a mouse pointer is hovering over the carousel, panels rotate manually only.
2.0 pts
Rotate when No Focus
When the carousel is not in focus, panels rotate automatically.
1.0 pts
Total Points: 10.0

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Web Accessibility for Developers Copyright © 2019 by The Chang School, Toronto Metropolitan University is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book