Multi-Function Button | Adrian Roselli

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

Read article at adrianroselli.com

Article Taxonomies

Categories: