Measuring Web Accessibility with DevTools
There are 7.8 billion people in the world, and they come with different abilities. According to the World Bank, 1 billion people or 15% of the world’s population experience some form of disability. Though someone may be good at reading a road sign from far away, someone may not. Another person will find reading small text easier than another person. So, accessibility is not either true or false, rather it is a measurement.
COVID-19 pandemic has brought concepts such as online transactions, working from home, e-education, and real-time communication platforms into the limelight. Many people adapting to the situation find themselves using new software they may not have used before.
These tools and technologies may not cater to everyone’s needs equally as many of these people will be differently-abled from each other. Thus, these software applications which facilitate services need to be accessible to all the users to cater to the broadest audience possible.
We, as software testers, have the responsibility to make sure that our products can be used by ‘everyone’. It is a good practice to implement accessibility techniques in the initial stage of the project. Both testing and fixing in-accessible software products requires additional effort. Most importantly, there are recommended certain laws and guidelines to follow to come up with an accessibility rich product.
Accessibility of the web can be measured with the help of web accessibility standards created by the Web Content Accessibility Guidelines (WCAG).
WCAG recommends building POUR websites. Simply it means, a website should have the following characteristics to make it accessible.
Perceivable: Presentation of the web site should be perceivable. Content should make sense from all the perspectives of all the users.
Operable: One can say that the site is operable if a user is able to navigate the site easily.
Understandable: Everything present on the website must be understood by any type of user. In short, the language should be convenient and not a complex one.
Robust: Regardless of the changing technology and the type of users, the content should be robust.
Example techniques:
Perceivable: Image text alternatives (“alt text”), Contrast ratio (“color contrast”)
Operable: Keyboard access, Current focus indication
Understandable: Verification of page title, Language metadata
Robust: Run markup and code through linters, Code review
Many tools are available in the market for accessibility testing, still, we can apply manual testing as well. Below I have mentioned a few ways to test website accessibility with developer tools.
1) Color contrast
One of the most important techniques of making accessible websites is ensuring readable text. The readable text means making sure adequate color contrast has been used between the text colors and background colors. If the text has a low contrast ratio, then the low vision users may literally experience the web site as a blank screen.
1. Open Chrome DevTools.
2. Click the Elements tab.
3. Click on the Element Finder
4. Focus on the element that you want to inspect and let the CSS properties popup open.
According to the above Image (a), a contrast ratio score of 17.65 has given for the text element. The green tick next to the score signifies this contrast ratio is within the accepted parameters for accessibility.
For the element given in Image (b), the contrast ratio is 2.48 and, the yellow warning sign next to the score indicates it is below the accepted parameters for accessibility. This means we need to integrate the new colors for the element given in Image (b)
2) Page title
Page titles help people know where they are and move between pages open in their browser. The title should be different from other pages on the website, and effectively distinguishes the page from other web pages.
If you have trouble finding the page title from the title bar, use the find function available in ‘page source’. The webpage Title is everything between <title> and </title>.
1. Open Chrome DevTools.
2. Click the Elements tab.
3. Select Ctrl + F and then type “title” to quickly find the Title.
4. The webpage Title is everything between <title> and </title>.
3. Text alternatives (“alt text”)
The text alternative is about conveying the purpose of an image. “alt text” should be applied if an image carries information beneficial for interacting with or understanding the web page content. These are used by the people who do not see the image such as people who are blind. They use screen readers which reads out the alt text.
The text must be functional and provide a corresponding user experience. For example, an appropriate text alternative for a notification icon would be “notifications”, not “bell”.
To verify “alt text”,
1. Open Chrome DevTools.
2. Click the Elements tab.
3. Click on the Element Finder.
4. Focus on the particular image element.
5. Verify the alt in the markup.
When the image is just decorative, then it should have a null alt.
Lighthouse
Lighthouse is an open-source, automated tool that can improve the quality of web pages. It can be run on any web page, public, or requiring authentication. This is available in Chrome DevTools. When a URL is given, Lighthouse runs a series of audits against the page, and then it generates a report on how well the page did. A “Good” score is above 80 and “bad end-user experience” is a score lower than 80. The report indicates on how to improve the page.
Accessibility test with the lighthouse
1. Open Chrome DevTools.
2. Click the Lighthouse tab.
3. Select ‘Accessibility’ as the category and ‘Desktop’ as the device
4. Click on the Generate Report button
Then we will get an accessibility score as shown below:
The score is 64, which is somewhat low. And the report suggests how to improve the accessibility score. Let us review the suggestions given.
The suggestions to increase the score are :
1.To have values for the attributes which is a desirable feature for screen readers.
2. Image not having the alt attribute. This is highly useful for users with vision difficulty.
3. Form elements are not having labels
By adding these suggestions, web page accessibility can be improved. To increase the quality of our software products, we can maintain a separate accessibility test suite. Else, for each backlog item, we can add a test case to capture these accessibility parameters.
So, with this simple process, we can enhance the quality and bring more crowd to our web applications. Happy testing!
