Web Accessibility Testing Tools Part III: HTML Code Inspectors

Laptop with coding data on the screen

Welcome back to the final blog of this Web Accessibility blog series. Today’s featured accessibility testing tool might be familiar to you, depending on your exposure to HTML code. Here are a couple hints: every day, this tool is leveraged by both Web developers and Web testers, as well as an abundance of people who have access to the internet and a Web browser…this tool also helps solve far more sophisticated issues than its animated counterpart, “Inspector” Gadget…Do you think you know the tool?


If you guessed HTML Code Inspector, you are correct! Prior to modern and interactive HTML code inspectors, sifting through HTML code was typically left to Web developers and similarly-skilled technical resources. Now, however, if there is a general awareness about what to look for in the code, anyone can access HTML code!


This is especially critical for accessibility testing since so much of what makes Web elements accessible relies on the content of the HTML code. What’s more, interactive HTML code inspectors allow users to point-and-click on any Web element within a given Web page and immediately analyze that element’s corresponding HTML code. This is particularly beneficial for users with limited exposure to HTML code as they do not have to manually search through the code to find the particular element they are viewing on the front end of the Web page. For example, in order to verify that an image on a Web page has alternate text for people with low or no vision, a user can merely click that image and read through the corresponding lines of HTML code for an “alt = <insert alt. text>” statement.


There are two free interactive HTML inspectors worth noting: Firebug (Mozilla Firefox add-on) and the built-in “Inspect” tool in Google Chrome.  Both HTML inspectors feature point-and-click interactivity and have analogous functions. I recommend using the browser you are more comfortable with. Considering how crucial verifying components of HTML code is to accessibility testing, it is imperative that users feel comfortable navigating the HTML in the browser window of their preference.  In figure 1 below, the “Firebug HTML Code Inspector” confirms clear, descriptive alternate text is defined for an image of Web inventor Sir Tim Berners-Lee (source: https://www.w3.org/).  Alternate text is especially helpful for Web users navigating via screen readers since the alt text is verbally recited when an image receives focus.


Firebug HTML Code Inspector

Figure 1 – “Firebug HTML Code Inspector” leveraged to confirm Web page images contain clear, descriptive alternate (alt) text.  Web inventor Sir Tim Berners-Lee has pictured above and the alt text for his image is clearly defined in the highlighted HTML code below (e.g. – screen reader would recite “picture of Tim Berners-Lee”).  Source: https://www.w3.org/


As seen through Part I of this blog series, some basic, manual accessibility testing can be performed without touching the HTML code. Nonetheless, many of the components that make Web pages accessible are deeply embedded in the HTML code. Hence it is vital for accessibility testers to employ the handy services of an interactive HTML inspector. HTML inspectors: making accessibility testing, accessible.


Thank you for joining me throughout this Web Accessibility blog series, if you have any questions or other topics on web accessibility testing that you would like to discuss, please reach out to me through my LinkedIn profile or submit a question through Olenick’s contact us page.


Author: Steve Woods

Related Content: Accessibility Toolkit, Compliance Management, Digital Accessibility