a11y issues discovered by SODA during May 2024 review of lib website

[saseestone]

SODA completed a review of the website, in May 2024.

We're exposing the sul-directory on the library website at https://library.stanford.edu/staff-directory
Issues found on the page were categorized as "major".

SODA image for reference:

SODA feedback:

• The visible table has table structure that is overridden by role="grid" being used incorrectly. The ARIA role="grid" should only be used when the position of each cell is significant and can be focused using keyboard input.

• Cells in the first column are highlighted as headers, but not structured as headers. This means the name will not be announced when screen reader users navigate the rows.

• Although the columns are sortable, there is no visual affordance provided of being sortable. Users with cognitive issues might not be aware the columns can be sorted.

SODA recommended solution: The following steps should be taken.

• Remove role="grid" from the <table> element.

• In the first column, each element needs to be changed to <th scope="row>.

• Include a visual label, such as a chevron, that indicates that the columns are sortable and the current sort.

• The added visual component, such as the recommended chevron, should be a button that is keyboard focusable within the <th> column cell that controls the sorting.

See our Accessible Data Tables guidance and Sortable Table Columns - Adrian Roselli.

ALSO
Form field missing label. The <select> field that allows a user to select a department is missing an accessible label.

SODA image:

SODA solution:

• A visible label can be added that is explicitly associated with the <select> field through a <label> element that has a for attribute with an id value that matches an id value added to the <select> field.

See : The Label element – MDN Web Docs. Alternately, an invisible label can be added through an aria-label attribute.