General Accessibility
For R4, the Avalon team worked with Indiana University's UITS Assistive Technology and Accessibility Centers to identify work we could do to improve Avalon's accessibility. More information about the report can be found here.
Some things we did to make Avalon more generally accessible include:
- The default language (English) is declared on each page.
- The search field uses an associated label element to enhance screen reader support.
- Search terms are included at the beginning of the page titles for search result pages.
- Selected facet labels are included at the beginning of the page titles for browse pages.
- The URL provided to share (link to) specific content includes an appropriate title attribute.
- The "more >>" links leading to additional facet options on browse pages includes the appropriate facet label for screen readers, e.g. "more Collection >>", "more Language >>".
Keyboard Access
Users can navigate the Avalon Media System by using the keyboard.
Using the TAB
key allows users to move forward through each interactive element on the page (links, text fields, search, buttons, etc.). Using the SHIFT
+TAB
keys allows the user to move backward through the same elements. As each element is focused it will be surrounded by an outline, in order to enhance its visibility from other elements on the page.
The user can trigger an element's behavior by pressing the ENTER
key, e.g. once a link is focused, pressing ENTER
will open the link in the browser.
Skip to main content
The first element on each page - when using the TAB
key - is a "Skip to main content" link. This link moves the browser focus to the main content of the page, minimizing the number of times a user has to press the TAB
key to get to the most prominent part of the page. When viewing an audio or video page, the "Skip to main content" link moves focus directly to the Play button.
Player Accessibility
Keyboard Access
Using the TAB
key allows users to move forward through each button on the player: Play/Pause, Mute Toggle, Stream Quality, Create Thumbnail, and Fullscreen. As each element is focused it will be surrounded by an outline, in order to enhance its visibility from other elements on the page.
Each button can be triggered by pressing the ENTER
key.
The Stream Quality selector will allow the user to use the TAB
button to choose between the available stream qualities (defaults: High, Medium, Low for video and High, Medium for audio) by pressing the TAB
key to highlight the appropriate button and then pressing the ENTER
key to select the button.
When the player controls have focus the user can toggle between Play and Pause by pressing the SPACEBAR
.
When the player controls have focus the user can scrub through the timeline by pressing the RIGHT
arrow key (4 seconds forward) or the LEFT
arrow key (2 seconds back).
When the player controls have focus the user can adjust the volume of the player by pressing the UP
arrow key (increase volume) or the DOWN
arrow key (decrease volume).
Headers and Footers:
Since often people customize Avalon by adding their own header and footer, it's important to keep the following in mind: