Buttons.
Yes, buttons. Have you ever noticed how often you click one? It probably seems effortless — after all, you can see the button, use a mouse, or tap a screen. But have you ever stopped to think about what it takes to make a simple button usable for everyone?

When I began writing this article, my goal was to explore accessibility testing for forms. I was full of motivation — until I realized it wouldn’t take 500 words, but more like 50,000.

So let’s start with one of the most common interactive elements on any website or app: the button.

At first glance, it seems simple. To be accessible, a button must:

• be recognizable as a button,
• clearly convey its purpose
• and work for users navigating with a keyboard or screen reader

The tools used for testing are as usual, free for everyone without registration.

WAVE, IBM Equal Accessibility Checker, Lighthouse, Joomla’s built-in checker Jooa11y, Web Developer Tools.

Buttons should be Buttons

Let us start with a very poor example and see, what automatic testing tools can tell us when we use images as buttons.

<div role="button"><img src="/images/buttons/green-balloon.jpg" alt=""></div>
<div role="button"><img src="/images/buttons/red-balloon.jpg" alt=""></div>

There are several violations against accessibility, the worst is the usage of <div role=”button” instead of the correct <button> and the usage of images with an empty alt-text.

Praise and glory for our Jooa11y plugin. It is the single tool that detects dubious alt-texts.

Jooa11y and IBM Accessibility Checker find the error “button is missing an accessible name”.

No tool detects the errors: 

• Colourblind users cannot see which button is red or green.
• Keyboard users cannot reach the buttons.
• The scrrenreader NVDA ignores these buttons completely due to alt=””

Button Size should be at least 44px x 44px

Try to click a very small 8px x8px button if you have thick fingers or have tremor and cannot keep your hand quiet.
 
WCAG recommends a minimum size of 44px x44px for buttons. If for example the icon in a button is smaller, the clickable area can be expanded with a padding.

In this example, we have a standard Bootstrap button with a height of 44px, alongside a very small red button. Of course, no one would actually use such a tiny button on a website,  it's just for demonstration purposes.
No automated tool checks for button size, so identifying this issue is entirely up to the human tester.

Focus Ring

In this article about the focus some issues are alreadey mentioned. Here is another one: The dark button in the image above shows a focus ring on hover. But it is not visible. The focus ring has the same colour as the button itself. This is a common issue on many sites. No chance for test tools to see this issues. 

Meaningful and correct description

Every button must have a text which is unique on a page. If there is no visible text, the aria-label can be used by assistive technologies. 

In this example, no testing tool flags the issue: there are two buttons with identical text. Imagine a user navigating by voice and saying, "Click the 'Click me' button" — which one gets triggered?

There is also no information what happens when the button is clicked - goes it to another page? Or sends money to your papal account? Calls the ambulance? This is not only for accessibilty, it is user experience and important for everyone. 

Also here the summary is:
Determining whether a button’s text and ARIA label are meaningful and appropriate is solely the responsibility of the human tester.   

Happy testing! As mentioned above, in these articles we use only free tools. There are countless other free and paid tools out there, and probably have other results. If you are using other testing tools, tell about your experience in comments!