Web Content Accessibility Guidelines (WCAG) offer a wide range of recommendations for making web content more accessible. Following these guidelines will make content more accessible to a broader group of people with disabilities and, in general, improves usability for all users. WCAG success criteria are written as testable statements that are not technology-specific, although we will explore testing them with an example written with Squish for Web.
aria-label Attribute
There are many accessibility features one could test. We will focus on testing the WAI-ARIA aria-label property. This attribute is commonly used to make page regions of the same type distinguishable, for example if there are multiple navigation landmarks on the same page.
We’ll use a simple HTML website to make the point clear without adding too much mental overhead:
<html>
<body>
<div id="topnav" role="navigaton" aria-label="Top navigation">Top navigation</div>
<div id="bottomnav" role="navigaton" aria-label="Bottom navigation">Bottom navigation</div>
</body>
</html>
In a web browser, the above HTML renders as:
Using Squish for Web, we make sure our website conforms to WCAG by:
- Starting the browser.
- Waiting for the top nav div to become available and verifying the presence and value of the aria-label.
- Waiting for the bottom nav div to become available and verifying the presence and value of the aria-label.
The property function in use for verification is HTML_Object.property. More details on this function are located in our documentation.
And our test script reads:
# -*- coding: utf-8 -*-
def main():
startBrowser("https://download.froglogic.com/support/aria-label.html")
topNav = waitForObject( {"id": "topnav", "tagName": "DIV", "visible": True} )
test.verify( topNav.property( "aria-label" ) == "Top navigation", "Top navigation is WCAG conforming" )
bottomNav = waitForObject( {"id": "bottomnav", "tagName": "DIV", "visible": True} )
test.verify( bottomNav.property( "aria-label" ) == "Bottom navigation", "Bottom navigation is WCAG conforming" )
The test script above could be extended to employ a reusable, utility function for use across multiple pages. And to note, a typical navigation landmark would contain hyperlinks, while we’ve used a simpler, plain text example.
Summary
Squish’s introspection capabilities allow you to increase automation coverage in the context of accessibility testing. Accessibility testing, like in the example shown here, helps assistive technology users more easily navigate a web page, and it improves site usability for all end-users.
The post Testing Web Content Accessibility Guidelines appeared first on froglogic.