Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Workshop accessibility category: Operable #8

Open
wes-brooks opened this issue Jan 24, 2025 · 4 comments
Open

Workshop accessibility category: Operable #8

wes-brooks opened this issue Jan 24, 2025 · 4 comments

Comments

@wes-brooks
Copy link
Member

WCAG guidelines in this category:

@wes-brooks
Copy link
Member Author

This category is about ensuring a smooth interface between the user and the page. I don't think we are in danger of ausing any seizures and there are no timed elements on the page. So this will boil down to making sure that the worshop reader works with keyboard navigation, screenreaders, etc. And making sure that site is well-organized.

The macOS built-in reader (VoiceOver) can navigate the page by these categories:

  • Links
  • Headings
  • Form controls
  • Landmarks
  • Window spots

They are often cluttered with duplicate "navigation" sections, Links with repetitive name like "Anchor" (Every section header) or "copy text" (one for every code chunk). There are plenty of other inconsistent elements

@wes-brooks
Copy link
Member Author

wes-brooks commented Jan 24, 2025

The "multiple navigation sections in the Landmarks Rotor" issue is due to there being multiple uses of <nav> elements on the page. Without changing the page layout, these could be clarified in the Landmarks Rotor by adding ARIA labels (e.g., aria-label="Main Navigation"), which will then be used as the landmark in the rotor.

@wes-brooks
Copy link
Member Author

The "Anchor" links are at the section headers because there is a link hidden there that is made visible when the mouse is hovered over the header. It has the aria-label "Anchor", so this is what the rotor shows. It has the class anchorjs-link, suggesting that it is provided by some library called AnchorJS.

@wes-brooks
Copy link
Member Author

Disabling Javascript turns off the anchors and the section links still work, so I thin we could do without the AnchorJS library.

The links rotor is still full of links where the text of the link isn't very informative (like "here"). That is the text that is shown by default in the rotor, and we sh

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant