Versions Compared

Old Version 21

changes.mady.by.user mschnaar

Saved on

compared with

New Version 22

changes.mady.by.user Jon Cameron

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

General Accessibility

For R4* 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 result pages.
* The URL(s) provided to share specific media objects 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 use the keyboard to navigate the Avalon Media System interface.

* `TAB`: move forward through each interactive element on the page (links, text fields, buttons, etc.).
* `SHIFT+TAB`: move backward through each interactive element.
* `ENTER`: trigger an element's behavior (e.g. pressing `ENTER` on a link will open the link in the browser).

When an element is focused it will be surrounded by an outline to enhance its visibility.

Skip to Main Content

When using `TAB`, the first element of each page is a link titled "Skip to main content". This link immediately shifts the browser focus to the main content of the page, minimizing the number of times a user needs to press `TAB` to reach a page's most prominent elements. When viewing an audio or video page, the "Skip to main content" link shifts the browser focus directly to the `Play` button.

Player Accessibility

Keyboard Access

* `TAB`: move forward through each button/element on the player:
* Play/Pause
* Track Scrubber
* Magnify/Minimize Scrubber
* Volume
* Stream Quality
* Create Thumbnail (collection staff only)
* Add to Playlist (logged-in users only)
* Fullscreen
* `SHIFT+TAB`: move backward through each button/element on the player.
* `ENTER`: trigger a button/element's behavior.
* `SPACEBAR`: when any of the player controls are focused, toggle between Play and Pause.
* `LEFT/RIGHT ARROW`: when any of the player controls are focused, scrub forward or backward through the track timeline.
* `UP/DOWN ARROW`: when any of the player controls are focused, increase or decrease volume.

The Stream Quality selector allows the user to `TAB` between available stream qualities and pressing `ENTER` to enable the desired quality.

Prior Accessibility Review

For release 4, 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.

...

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.

...

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