Multi-Function Button
January 3, 2021; 2 Comments
Table of Contents
- Example
- The HTML
- Live Region
- Button
- Decoration
- Accessible Name
- The Styles
- Hide the Live Region
- Color and Contrast
- Active
- Animations
- Text Resize and Reflow
- Windows High Contrast Mode
- The Script
- The Click Event
- Manipulate Outcomes
- Screen Reader Output
- WCAG Success Criteria
- What This Does Not Do
- Wrap-up
- Samples
In my post Be Careful with Dynamic Accessible Names I talk about cases where a developer wants to change the name of a control on the fly so it can act as its own trigger, message container, and method of conveying the status of a process.
Scenarios where I have seen this control proposed:
- Download, downloading, download failed, try again, downloaded;
- Send message, message sending, message failed, try again, sent;
- Reserve, reservation in progress, reservation failed, try again, reserved;
This post shows how you can make one of those multi-function buttons (that also safely changes its accessible name).
This may be a viable alternative to a case where everything other than the first step is conveyed via toast messages — unless you have ensured those toasts are accessible and users find them.
Example
My example is a sandwich-making button. It hooks into the SandwichAPI, which triggers the Hammer service. Every time you press the button it attempts to make a sandwich (it is still unclear where the sandwich goes). Sometimes the process runs [...]