Some accessibility issues on the site
As discovered by Marloes Bosch:
- "Skip to main content" doesn't direct to the main-content. (You can never skip the repeating menu)
- The "main-logo" anchor: The SVG needs a "aria-hidden" and inside the another span with a visually hidden "home of Compony.io"
- The hamburger button doesn't have a suitable button text. The SVG needs a aria-hidden . a with visually hidden "menu" is already better. If possible even a state that shows aria expanded-true/false.
- The menu items can receive focus when the (hamburger) menu is collapsed.
- If the menu is expanded, the links in de main content can receive focus. A focus trap is wished here.
- /component => I would expect the anchor tag to be inside the h3. Now that the tag is in the whole element, all of the text is being read. If you want to make the entire container clickable, have a look here: https://inclusive-components.design/cards/
- I would check the heading structure on all the pages. On many of them it doesn't make sense, as on /components and /user/1.
- On /component/form-item-textarea you are using a to define label (machinename). But a tag you have to use in a form to make a connection to an input. I would expect this structure of a page:
- <h1> Textarea
- <p> info text
- <h2 visually hidden> Specifications
- <h3> machine name / perks / stats etc
- <div> or <ul> (depending on the number of items)
- <h2> supported by
- All icons need a aria-hidden, Because they are pure decoration.
Unclear issue:
- "More button" is somewhat unclear => Why not show it all?
Edited by Mathieu Spillebeen