search

rancher / dashboard

The Rancher UI
https://rancher.com
Apache License 2.0
459 stars 260 forks source link

Accessibility: order headers into a meaningful sequence #4379

Open gaktive opened 3 years ago

gaktive commented 3 years ago

From the accessibility audit cited in rancher/dashboard#4324, we should ensure that the order of headings should always descend from H1 to H2 to H3, etc. We should not jump from H1 to H4, for example.

Suggested Solution: Often we find ourselves choosing between UI and a11y when it comes to selecting headings. A practice that we suggest is to always use the H tags in the appropriate order and, for aesthetic reasons, use classes to adjust text size. Having classes of type .h1, .h2, .h3, etc would allow to have a semantic HTML. It is important, however, that this trick is not overused as we should still consider the user experience for users without limited vision.

Example: /dashboard/account/create-key

kwwii commented 1 year ago

Not sure what the status of this is, so I am taking it out of Review and moving it into the Backlog list.

kwwii commented 1 year ago

1) Ensure that all pages follow a properly semantic Header ordering (H1, H2, H3, etc.) and that nothing is missing (H1 and then H3 without an H2)

2) Document and ensure we follow proper semantic development when creating components and pages

gaktive commented 1 week ago

Accessibility has had a few tickets redone so need to check if this is now a duplicate of a more recent ticket.