Introduction to Code Examination and Repair

Code Examination

While you are testing with automated tools or other manual strategies, it is often helpful and sometimes necessary to look at the HTML markup to confirm, or investigate further, potential barriers tools or strategies have turned up. All browsers have a View Source feature (or something equivalent) to view the HTML underlying a web page. Though using View Source is one potential way to view the HTML markup, it can be time-consuming to find specific bits of HTML associated with potential barriers that have been identified.

A better strategy for examining code is to use the Inspect Element feature most browsers today provide. You can typically right click on the element you want to view (such as an image), then choose “Inspect Element” to look at the HTML and CSS used to display the image. Look at the markup of the image element to see whether the alt attribute is present and what its value is, as well as what other attributes it might contain (e.g., ARIA attributes that may be present to address a potential barrier a checker has identified).

A browser’s developer tools (e.g., Chrome’s DevTools or tools in Firefox Developer Edition) provide a whole variety of information about the markup of a page in addition to being able to examine specific elements in the HTML.

Examining the code with the built-in inspector or with a plugin is a good way to find colour codes in the style sheets associated with a web page when doing colour contrast evaluation.

We will look at code examination in more detail in the section Code Examination and Repair.

Code Repair

It is often necessary to adjust code manually while auditing, and to retest to come up with solutions to correct accessibility issues. Using the browser’s developer tools, it’s possible to dynamically adjust the HTML markup and CSS to test possible solutions, perhaps running potential fixes through a screen reader, before making recommendations. Firefox Quantum (Developer Edition), Chrome, Internet Explorer, Edge, and Safari all have tools that allow you to dynamically adjust code.

When writing web accessibility reports it can be helpful to provide small code snippets to demonstrate to developers what needs to be done to correct an issue, or at least describe the code changes in written words. Having good knowledge of HTML, CSS, and JavaScript is a prerequisite to providing solutions in your accessibility reports.

We will talk more about code repair in the section Code Examination and Repair. The video below provides an introduction to code examination and repair using a browser’s Inspect view.

Video: Code Examination and Repair