1.1 Text Alternatives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Please keep in mind that this page is still a work in progress.

1.1.1 Non-text Content

TODO: Just list eslint tooling that helps with this rule and give some examples of components (radix). Don't try to explain everything.

(Level A)

To meet this rule you have to make sure that all relevant non-text content on your page has a text alternative. An example would be an image that is not just decorative, but has content relevant to the user. Another example is a button that does not contain text, but an icon.

TODO: Navigate to headings

• Images
• Icons
• Libraries

Images

For an image it can be as simple as adding an alt attribute with a text describing the image. Try to imagine what is relevant for your users to know about the image. When nothing is really relevant and you've figured that the image is more decorative make sure that you still add an empty alt attribute:

<img src="a-decorative-scene.jpg" alt="">

When you omit the alt tag alltogether, assistive tools like screenreaders might read the file name instead.

TODO: More complex images explained with aria-describedby.

Icons

Icons are usually relevant to your users. Make sure your visually impaired users know what to expect too. You can do this by using the aria-label attribute:

TODO: Radix has a great explanation about svg's and that they're focusable. Add that.

<button aria-label="Open menu">
  <svg xmlns="http://www.w3.org/2000/svg">
    <path></path>
  </svg>
</button>

TODO: Aria label isn't the only way to do this (visibly hidden)

Keep in mind that when you use both an aria-label and text inside a button, the aria-label will be read by the screenreader.

Libraries

The Radix UI Accessible Icon is a great component to wrap around your icons to make them accessible.

Official WCAG 2.1 Non-text Content criterion