An “empty” button is a web-based button that does not contain text to indicate its purpose to the user. The can harm navigation in all users but is especially problematic for users with disabilities who are reliant on additional technology (screen readers, speech recognition software, screen magnifiers) to assist them, as they’ll have additional difficulties in operating said button.
Empty Buttons, or “Name, Role, Value”, As Defined by WCAG 2.2.
According to the WebAIM Million Report, 2024, over 28% of Home Pages failed a Web Content Accessibility Guidelines (WCAG) 2.2 audit due to Empty Buttons or a lack of Link Name, Role, or Value.
WCAG 2.2 is a standard accessibility framework published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
The success criterion can be found here and is outlined as follows:
Level: A
4.1.2 Name, Role, Value:
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
Why Does It Matter?
Buttons with a clear text-based purpose that can be accessed by (e.g. screen readers) make their purpose clear to users reliant on such technologies. If that labelling is absent, then a user with disabilities may struggle to understand the meaning of the button and be less able to properly interact with it.
Users who are reliant on-screen readers, speech recognition software, or screen magnifiers, will experience frustration (at best) and (at worst) be unable to properly interact with the website!
Businesses and organizations must avoid critical oversight and ensure all user interface components are properly labelled to assist navigation.
How Do I Fix It?
Ensure the purpose of buttons and similar user interface components is clear by adding discernable text, as illustrated below:
<button> Cancel </button>
Further examples of passed and failed test cases can be found on the W3C website.
Why Is This Important?
It’s estimated that 16% of the world’s population – 1 in 6 of us – have a significant disability. In a world where technology continues to play a critical role in our daily lives, our work, our learning, and many of the businesses and services we need, it’s vital to ensure that everyone’s needs are catered for wherever possible. For any individual business, these statistics and the importance of what they represent cannot be overstated.
Thursday, 16th May 2024, marks Global Accessibility Awareness Day, an annual event for institutions and technology companies to draw attention to the vital goal of ensuring digital assets—from websites to photos, video, audio, and social media—are accessible to everyone, including people with disabilities that may impair their sight, hearing, or mobility.
As a specialist in application modernization and development, gravity9 is committed to this inclusivity. Here, we’re looking at some key findings of the annual WebAIM (Web Accessibility in Mind) report, which studies 1,000,000 home pages to assess their accessibility and highlight any shortfalls. We’ll be examining why they matter and what you can do to ensure that you’re not letting your customers or your business down by failing to address these vital areas.
More in This Series
Here’s the full set of articles in this series: Common Accessibility Failures and How to Avoid Them.
- Low Contrast Text
- Missing Alt Text
- Missing Form Labels
- Empty Links
- Empty Buttons
- Missing Document Language