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, [...]