feat: use semantic HTML tags and aria attributes #415
Conversation
This allows focusing these elements via the keyboard or other accessibility tools, which was previously impossible with generic div tags
This improves accessibility further by providing semantics to elements that can't easily be defined just through the tags
This ensures tab-navigability through links by adding anchor tags where previously unpresent, and adding href attributes to those that didn't previously have them.
|
Looks awesome so far! |
This makes the element focusable for accessibility
This provides an accessible alternative to the self-baked data-active attribute, that can be used by assistive technology
This provides an accessible alternative to the self-baked data-active attribute, that can be used by assistive technology
Using buttons enables tab/keyboard navigation for accessibility
As both anchor tags (with a href attribute) and buttons are focusable, trying to focus the buttons with a wrapping <a> tag (Source Code and Donate) would result in being able to focus both elements, which is both inconvienent and confusing for users using keyboard navigation, not knowing which element is correct, and slowing down navigation.
This wraps the user icon in an anchor tag with an aria-label that describes what it's for
|
This may be an uphill battle as components are changed so it may be worth doing this across several PRs. |
Fair enough, this has been open for far longer than I intended, I'm happy to have this merged right now if it all looks good to you (and the others). |
Rexogamer
added
tech debt
|
Conflicting again 😭 New client is using semantic HTML where possible Closing due to rewrite, marking as potential issue in future by linking to revoltchat/frontend#64. |
This introduces the use of semantic HTML tags throughout the frontend, as well as the use of various ARIA attributes to improve accessibility (see https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML).
Semantic section-related HTML tags are used (
main,nav,article, etc), as well as more component based-tags (button).Generic
divtags were previously used in many parts throughout the codebase, hindering the use of accessibility tools such as screen readers1, and preventing keyboard navigation (tab focus) on clickable elements as they were not semantically focusable elements (buttons and links).ARIA attributes are used in elements for which their semantics/purpose cannot be easily represented specifically enough simply through choice of HTML tags.
In a couple of the settings pages, some of the links were also defined using
onClickattributes with aswitchPagefunction. While some of these were anchor tags, they were still not focusable due to not havinghrefattributes, so the browser sees it as having no location. Usingreact-router-dom's<Link>element resolves this.In addition to improving accessibility, as a side-effect, these changes also enable an alternative solution to #149, as we can now make relatively specific selectors using these semantic tags and attributes. As a demonstration of this, I have rewritten a large portion of the Discord theme that was previous broken due to non-persistent class names, using this method.
Note that there are still some parts of the frontend that have not yet been changed to use semantic tags, hence the draft status of this PR.
Footnotes
Disclaimer: I have never personally used a screen reader or other assistive technologies and so my understanding of them may not be accurate ↩