Buttons

Importance of Alternative Texts for Buttons

Buttons serve various functions on websites. Well-designed alternative texts (also known as accessible names) are crucial for users of screen readers. These texts act as substitutes for the visual representation of the button and convey its function. Here are some important aspects to consider:

Short and Concise Description

The alternative text should briefly and precisely describe the button’s function. Avoid excessive details and focus on the essential information the button conveys. A short text improves usability and prevents information overload. It is recommended to limit the text to a maximum of 80 characters.

Avoiding Redundancy

Do not repeat information already present in the context of the button. For instance, the information “button” does not need to be in the alternative text, as screen readers automatically provide this information.

Simple and Understandable Language

Use simple and understandable language. Avoid complicated or technical terms to ensure usability for all users. For example, instead of “Send your request,” “Send request” suffices.

Relevance and Function

The description should clearly and explicitly convey the button’s function. Users must immediately understand what will happen when they press the button. For example, a “Next” button should be described as “Go to the next page” to clarify the action.

Examples of Alternative Texts

1. Simple Submit Button:

   • HTML: <button type="submit" aria-label="Submit form">Submit</button>
   • Alternative Text: “Submit form”

2. Download Button:

   • HTML: <button aria-label="Download the brochure">Download</button>
   • Alternative Text: “Download the brochure”

3. Navigation Button:

   • HTML: <button aria-label="Go to the next page">Next</button>
   • Alternative Text: “Go to the next page”

Complementary Techniques for Accessibility

In addition to alternative texts, there are other techniques to make buttons accessible:

1. ARIA-Label: Can be used to provide additional information.

   • Example: <button aria-label="Go to the homepage">Home</button>

2. ARIA-DescribedBy: Points to an element containing a more detailed description.

   • Example: <button aria-describedby="buttonDesc">More info</button> <span id="buttonDesc">This button leads to further information.</span>

3. Title Attribute: Can be used as a supplementary description but should not replace ARIA-Label. The title attribute is displayed as a tooltip when hovered over with the mouse.

   • Example: <button title="Download the file">Download</button>

Output Economy as a Principle of Alternative Texts

The length and detail of alternative texts should always follow the principle of output economy. Blind users often need to filter a lot of information, so alternative texts should only contain the essential information to avoid overwhelming users and distracting them from the actual content.

Conclusion

Well-designed alternative texts for buttons are crucial for the accessibility of websites. They should briefly, concisely, and functionally describe what the button does. Avoid redundancies and complex language to maximize usability. Use complementary techniques like ARIA-Label and ARIA-DescribedBy to provide additional information when necessary.