by John Durance
The alt
attribute is set on the img
element; it specifies alternative information for users who cannot see an image. All images should have one. If an image is missing this attribute, the screen reader will read out the file name of the image – very annoying for the user, if the file name is a long string of random characters and numbers. For decorative images the alt
attribute should be set to an empty string. This tells a screen reader to skip over it. For all other images, provide a concise informative desciption of the image. For use cases where you need to provide a long description, add a longdesc
attribute as well.
Form elements should also be given a description. Without a description screen readers will not announce what the user is supposed to enter into a form field. Use the label
element to solve this problem, like this:
<label for="user">Username:</label>
<input type="text" id="user" />
<label for="pass">Password:</label>
<input type="password" id="pass" />
Related Blog posts
- Accessibility 1: Why Create Accessible Websites?
- Accessibility 2: Aural Interaction and Screen Readers
- Accessibility 3: Keyboard Interaction, Special Keys and Shortcuts
- Accessibility 4: Creating a Logical Dom
- Accessibility 5: Adding Key Handlers
- Accessibility 6: Managing Focus
- Accessibility 7: Describing Images and Forms
- Accessibility 8: Adding Semantics
- Accessibility 9: Aria Attributes