Background

The Reading List UI has been getting some updates and some of those updates haven't used semantic html or have been fully accessible. We need to make sure that all aspects of the Reading List work with Assistive Technology (AT) and meet WCAG AA standards.

The list of items in a reading list and the list of Readinglists within collections are not accessible and are in violation of WCAG SC1.3.1 level A since there is no semantic meaning about the relationship of the list of items. Currently, each item is an <a> element which are all children of a <div>, this does not semantically communicate the relationship of these elements and users lacking visual affordances will never know that a list is present. Instead, these should be <li> within an <ul> so that AT reads out that it is a list, how many items are in the list, and if applicable, which list item the user is on.

User story

As a user of AT, I would like to be able to know that there is a list on the page and if I am on a list item. I would also like to be able to navigate easily to the list via the rotor.

Requirements

• Each item within Collections and a Reading List are <li> within a parent <ul>.
• The list (<ul>) has an aria-label that matches whichever view is selected, "All items" or "Collections".
• Any default native styles are removed so that no visual UI changes occur.

Acceptance criteria

• The list items are read and navigable via assistive technology.

QA strategy

For VoiceOver, test while in the list using VO (control + option) + Left/Right arrow.

Rollback plan

This should be low risk but we can roll back if needed.

This task was created by Version 1.1.0 of the Reader Experience team task template using phabulous.