uchicago-library / library_website

The University of Chicago Library Website
5 stars 5 forks source link

Search tabs structure #681

Closed bbusenius closed 1 year ago

bbusenius commented 1 year ago

LIB20230113-13. Heading structure throughout page (Best practice)

Issue: Check the heading structure throughout. There are multiple H1s at the top of the page in the search tabs. There should only be one <h1> per page, and that should correspond to the page title. Main section headings on the page should then be marked up with <h2>s, and then within those sections, additional subheadings marked up with correctly ordered <h3><h6> tags as appropriate.

The Explore Research Guides, Ask an Expert, and News sections have well-structured headings. The main headings in the right column sidebar section are marked up with <h3>s, instead of <h2>s.

Who is excluded? Screen reader users can use keyboard shortcuts to announce the page headings to get a sense for how the content is structured, or navigate directly to specific headings. If there are multiple <h1>s or headings out of order, screen reader users must listen to more of the web page to understand its structure, wasting valuable time.

LIB20230113-07. Search tabs not marked us as an ARIA tab widget (Major)

Issue: The search tabs section is not marked up as a proper tab widget so the collapsed/expanded state of each tab isn’t conveyed to screen readers.

Who is excluded? ARIA widget roles require additional attributes that describe the state of the widget. When required state and property attributes for specific roles are not present, screen readers may not be able to convey the element's purpose or current state to users.

More information