Names and labels

Enhance your application’s usability for visitors using screen readers by following these recommendations:

1. Buttons have an accessible name: When a button doesn’t have an accessible name, screen readers announce it as “button”, making it unusable for users who rely on screen readers.

2. Document has a <title> element: The title gives screen reader users an overview of the page, and search engine users rely on it heavily to determine if a page is relevant to their search.

3. No form fields have multiple labels: Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels.

4. <frame> or <iframe> elements have a title: Screen reader users rely on frame titles to describe the contents of frames.

5. Image elements have [alt] attributes: Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

6. Image elements do not have [alt] attributes that are redundant text: Informative elements should aim for short, descriptive alternative text. Alternative text that is exactly the same as the text adjacent to the link or image is potentially confusing for screen reader users, because the text will be read twice.

7. Input buttons have discernible text: Adding discernable and accessible text to input buttons may help screen reader users understand the purpose of the input button.

8. <input type="image"> elements have [alt] text: When an image is being used as an <input> button, providing alternative text can help screen reader users understand the purpose of the button.

9. Form elements have associated labels: Labels ensure that form controls are announced properly by assistive technologies, like screen readers.

10. Links have a discernible name: Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.

11. <object> elements have alternate text: Screen readers cannot translate non-text content. Adding alternate text to <object> elements helps screen readers convey meaning to users.

12. Select elements have associated label elements: Form elements without effective labels can create frustrating experiences for screen reader users.

13. Skip links are focusable: Including a skip link can help users skip to the main content to save time.

Links href="#links"

• About skip links
• About the select element
• About alt text for object elements
• How to make links accessible
• About form element labels Learn about input image alt text
• About input buttons
• About the alt attribute
• How to make buttons more accessible
• About document titles
• How to use form labels
• About frame titles
• About the alt attribute