Buttons - Level 09
Buttons
Instructions
Buttons with SVG icons as labels are commonly used on modern websites. For example, to open a hamburger menu or to close a modal. Sighted users can usually recognise the icon and its meaning. For unusual icons, you should add a tooltip or textual description.
Visually impaired users need the icon buttons to be accessible to screen readers. To achieve this, set the SVG's aria-hidden attribute to true. In addition, add an aria-label attribute to the button element, containing a textual representation of the icon (a so-called accessible name).
Make the close icon button accessible by hiding the SVG from screen readers and adding a visually hidden accessible name to the button.
index.html
On your computer: Press + m to use the tab key for site navigation.
The editor is loading...