-
-
Notifications
You must be signed in to change notification settings - Fork 9.8k
Closed
Description
Symfony version affected: master
Description
Here is the currently used markup of "Show toolbar" link.
<a href="#" title="Show Symfony toolbar" tabindex="-1" id="sfToolbarMiniToggler-95d68f" accesskey="D">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<!-- SVG image -->
</svg>
</a>I think it has a few semantic and accessibility issues.
- First of all, using
<a href="#"/>here is not semantically correct, because it is not a link but button. It needs to be rendered with<button/>tag or at least haverole="button". tabindex=-1. Why? It makes the toggler not reachable through keyboard. Note thataccesskeycannot be considered as a replacement fortabindexbecause it may conflict with a system or browser keyboard shortcut. That's what is happening on my local machine. See accessibility concerns.aria-expandedattribute is missing. Also we may consider addingaria-controlsandaria-haspopupattributes.- SVG images need
aria-hidden=trueandfocusable=falseattributes.
sstoksstok