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