Elements of an Accessible User Interface

Accessibility has been in the spotlight this week as the global community recognized Global Accessibility Awareness Day, a call to action to make digital experiences that work for everyone. Mabl has supported this important movement with a series of articles designed to help quality engineering teams integrate accessibility testing into their software testing strategies, making it easier for development teams to proactively build accessible apps and websites:

• Who Owns Accessibility in DevOps?

• Data-Driven Empathy with Accessibility Testing

• Designing Processes and Partnerships for Accessibility Testing

• ​​How SmugMug Embedded Accessibility into their End-to-End Tests

Designing (and Testing) Accessible User Interfaces

Accessibility requirements and guidelines vary widely around the world. In mabl, applications are checked against the Web Content Accessibility Guidelines (WCAG) - versions 2.0 and 2.1, an international standard that meets or exceeds requirements in a large number of countries. The standards have 12-13 guidelines, each with three levels of success criteria: A, AA, and AAA. These criteria determine how well a website or application conforms to the WCAG guidelines:

• Level A, the minimum level of conformance, means that an app or website meets all A success criteria.
• Level AA indicates that every AA and A requirement is met. 
• Level AAA, the highest level of adherence, demonstrates that all success criteria (A, AA, and AAA) are met. 

It’s worth noting that AAA conformance is not recommended as a general policy since it’s not possible to meet it for some web content. Many organizations may find themselves between levels, especially as they start their accessibility improvements. To help quality engineering teams get started, let’s look at the most common issues uncovered by automated accessibility tests and what can be done to resolve them quickly in a DevOps pipeline. 

Labeling Form Elements

One of the most common - and most serious - web accessibility issues is the lack of labels on form elements, particularly those that are necessary to interact with the web page, such as buttons. Clear labels that can be easily read by screen readers are essential for those living with vision loss, a population estimated to be 2.2 billion worldwide. Considering that the majority of people with vision impairment and blindness are over the age of 50, that already massive number will continue to rise as the global population ages. If a website fails to correctly label buttons necessary to complete a transaction, that translates to a growing number of possible missed customers. An example of clearer labels from mabl’s own effort to improve the accessibility of our site can be seen below. 

When accessibility checks are added to automated end-to-end tests in mabl, quality engineers teams will find labeling issues grouped together in their accessibility dashboard. As more tests are run over time, trends in labeling issues will help quality, development, and compliance teams understand how the user experience is improved for those using screen readers.  

Improved Color Contrast and Starker Text

For the millions of people with vision issues that don’t require a screen reader, improving the contrast of text, buttons, and other visual elements can make their experience with an app or website significantly easier. Considered an AA level criteria by the WCAG, adopting crisp, high-contrast color schemes are an excellent example of how accessibility guidelines help improve the online world for everyone, regardless of access need. 

As mabl considered how to make our website more accessible, we made subtle adjustments to our own website color palette to make text easier to read and images easier to understand.

Looking at the top half of the above image, the text is a lighter shade of gray and the “Start Free Trial” button is a slightly lighter magenta. Though the changes are almost indiscernible, they make the entire mabl site a more delightful experience for all users, especially those with vision impairment. 

Accessibility Made Easy with Low-Code Test Automation 

It’s important to note that many accessibility issues on the frontend are ultimately connected to backend development practices. In other words, messy code equals inaccessible digital experiences. Embedding automated accessibility checks into development early and often ensures that quality and accessibility are proactively managed at all stages of the software development lifecycle. 

For quality engineers already managing growing software testing strategies, adding accessibility testing may seem like an overwhelming task. But new low-code test automation platforms are making it easier than ever to embed accessibility checks into existing end-to-end tests, drastically reducing the time to value and impact. Perhaps even more importantly, these new test automation solutions transform test data into shareable trend reports that simplify the collaboration process across the organization.