Check out our comprehensive guide to digital accessibility. Dive deep into the world of WCAG guidelines, accessibility tools, and strategies to make your digital products universally inclusive and compliant. Learn how enhancing accessibility can open up vast business opportunities.

Mastering Web Accessibility: Strategies, Tools, and WCAG Guidelines Unveiled

Optimizing Digital Accessibility Through Strategic Application of WCAG Guidelines

<p>Today, technology is meant for everyone to use it. If your digital product is not accessibility compliant, you risk that more than one billion people cannot use it. Hundreds of billions are big business opportunity. The common misconception is that accessibility is just for people with disability. Even people without disabilities will benefit if our digital product is accessibility compliant. Accessibility has become a key value in creating a digital product.</p>
<p>According to the World Health Organization* more than one billion people worldwide live with a disability. It&rsquo;s estimated that around 20% of the population has some sort of disability. While the umbrella of accessibility concerns the 20% it also includes pretty much everyone else as shown in the next section.</p>
<p>Accessibility is defined as a "word used to describe whether a product can be used by people of all abilities." There is accessibility of building and physical space with ramps, power door openers, and more. Digital accessibility is about rendering websites, software, and games to be accessible and inclusive for people with disabilities. Digital accessibility is the practice of making digital product usable for the widest range of people possible.</p>
<p>Before we dive into accessibility optimization, let&rsquo;s make sure that we understand major challenges and standards that we need to follow in order to make sure that our digital product can be used by all people.</p>
<h2>Getting familiar with disabilities</h2>
<p>Disability is defined as "a mismatch in interaction between the features of a person's body and the features of the environment in which they live."</p>
<p><strong>It&rsquo;s about everyone.</strong> <br />If you don't wear glasses or contacts, consider how many people you know that do. The fact is that most of us will develop vision impairments as we age. We also develop arthritis, carpal tunnel, or similar disorders that prevent us from using a mouse or keyboard. We don't know the circumstances that will inhibit the way people access the web and mobile. For example, those are that have:</p>
<ul>
<li>Vision disabilities (blindness, low vision, color blindness)</li>
<li>Hearing disabilities (deafness, hard-of-hearing)</li>
<li>Physical disabilities (lack of motor control, speech troubles, other issues)</li>
<li>Cognitive disabilities (learning disabilities, distractibility, inability to remember or focus)</li>
<li>Technical issues (slow connection, screen size, old technology)</li>
<li>Changing abilities (changing abilities duo to age)</li>
<li>Temporary disabilities (broken bones, recovery, using site while holding a baby)</li>
</ul>
<p><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/5765b3f7483d44289a728b26700c33f2.jpg" alt="table" /></p>
<p style="text-align: center;">Image: Persona Spectrum</p>
<blockquote class="quote-container">
<p class="title">&ldquo;We use a Persona Spectrum to understand related limitations across a spectrum of permanent, temporary, and situational disabilities. It&rsquo;s a quick tool to help foster empathy and to show how a solution can scale to a broader audience.&rdquo;<br /><a href="https://www.microsoft.com/design" target="_blank" rel="noopener noreferrer">A Microsoft Design Toolkit</a></p>
</blockquote>
<p>We need to consider these scenarios and make it easy as possible for this wide range of people to access the software that we build.</p>
<h2>The WCAG Guidelines</h2>
<p>WCAG stands for Web Content Accessibility Guidelines. <br />It's set of international standards for <a href="https://en.wikipedia.org/wiki/Web_accessibility">web accessibility</a>&nbsp;guidelines published by the&nbsp;<a href="https://en.wikipedia.org/wiki/Web_Accessibility_Initiative">Web Accessibility Initiative</a>&nbsp;(WAI) of the&nbsp;<a href="https://en.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a>&nbsp;(W3C). The main goal is to provide a detailed set of guidelines for making web content more accessible to many people as possible. There are multiple versions of guidelines as listed below.</p>
<h3>WCAG 1.0</h3>
<p>First version 1.0 was published in May 1999 and it was first international standard for digital accessibility. It contained a set of 14 guidelines to evaluate the accessibility of the web pages.</p>
<p>Web and assistive technologies evolved over next decade the guidelines were updated to the next version.</p>
<h3>WCAG 2.0</h3>
<p>It provides 12 guidelines that are organized into four principal categories. Major things that web content&nbsp;<strong>must be</strong>&nbsp;to be considered accessible (see&nbsp;<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Understanding the Four Principles of Accessibility&nbsp;</a>for the WCAG definitions). It stands for acronym &ldquo;P.O.U.R&rdquo;:</p>
<ul>
<li><strong>Perceivable</strong>: Information and user interface components must be able to perceive the information being presented.</li>
<li><strong>Operable</strong>: User interface components must be operable. Users must be able to control UI elements (e.g., buttons must be clickable in some way &mdash; mouse, keyboard, voice command, etc.).</li>
<li><strong>Understandable</strong>: Information and the operation of user interface must be understandable.</li>
<li><strong>Robust:</strong> The content must be developed using well-adopted web standards that will work across different browsers and assistive technologies, now and in the future.</li>
</ul>
<h3>WCAG 2.1</h3>
<p>As we can assume this version extends 2.0. It was published in June of 2018 and become the official recommendation of W3C.&nbsp;</p>
<h2>Understanding WCAG 2.0 and 2.1</h2>
<p>As mentioned above this provides 12 guidelines that are organized into four principal categories.</p>
<h3>1. Perceivable: Guidelines 1.1-1.4</h3>
<p>Information and user interface components must be able to perceive the information being presented.</p>
<table border="0">
<tbody>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/afcdab6bda7a4d658f7356b9c1b12488.svg" alt="null" /></td>
<td>1.1</td>
<td>Text alternatives for non-text content like images must be presented.</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/13f8e14d277b488b8ee30627ad847e92.svg" alt="null" /></td>
<td>1.2</td>
<td>Alternative methods for time-based media like captions and transcript must be presented.</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/ec4af7f602d944b8acdbd8a704cf70e8.svg" alt="null" /></td>
<td>1.3</td>
<td>Provide ability to present content in different ways, allow for customization without breaking the site.</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/1599eac255c048b5b60462f12f9bc679.svg" alt="null" /></td>
<td>1.4</td>
<td>Make it easier to see and hear content.</td>
</tr>
</tbody>
</table>
<h3>2. Operable: Guidelines 2.1-2.4</h3>
<p>User&rsquo;s interface components must be operable.</p>
<table border="0">
<tbody>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/713460c819a849a090b709a7e6080a60.svg" alt="null" /></td>
<td>2.1</td>
<td>All functionality must to be available via the keyboard</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/7ededca752d64a1db7bc11b7d7b18c0a.svg" alt="null" /></td>
<td>2.2</td>
<td>Provide enough time to read the content and interact with interface</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/7fedce50684545739f3605b1619ac288.svg" alt="null" /></td>
<td>2.3</td>
<td>Avoid designing/developing contact that cause seizures</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/d895f40ce3bb495db29e844d26272f87.svg" alt="null" /></td>
<td>2.4</td>
<td>Help user to navigate, find content and determine where they are focused</td>
</tr>
</tbody>
</table>
<h3>3. Understandable: Guidelines 3.1-3.3</h3>
<p>User&rsquo;s interface components must be operable.</p>
<table border="0">
<tbody>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/b7de887e79034663a49eb8202426790b.svg" alt="null" /></td>
<td>3.1</td>
<td>Text content should be readable and understandable</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/5182fa0ea8d6424ebaff476acb8dab45.svg" alt="null" /></td>
<td>3.2</td>
<td>Content and interface should be consistent and predictable</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/905d2f78598c458aaa7aee17827be2a0.svg" alt="null" /></td>
<td>3.3</td>
<td>Input assistance to help users fix mistakes when interacting</td>
</tr>
</tbody>
</table>
<h3>4. Robust: Guidelines 4.1</h3>
<p>The content must be developed using well-adopted web standards that will work across different browsers and assistive technologies, now and in the future.</p>
<table border="0">
<tbody>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/ca482326a7bc44929041df1a8171f237.svg" alt="null" /></td>
<td>4.1</td>
<td>Address the needs to maximize compatibility of current user agents and assistive technologies</td>
</tr>
</tbody>
</table>
<h2>WCAG Criteria and Conformance in Action</h2>
<p>In section above we have seen that WCAG consist of 13 guidelines. Each guiltiness contained several success criteria. Each of success criteria meet a certain level of accessibility conformance according to standard.<br />Level of conformance range from single A to triple A like below:</p>
<ul>
<li>A &ndash; Lowest level</li>
<li>AA &ndash; Mid-range level</li>
<li>AAA &ndash; Highest level</li>
</ul>
<p>Each is a subset of the next level up. For example, if a web page meets double of conformance level it also meets a single A conformance level. It&rsquo;s important to note that meeting the success criteria and conformance level only works on a full page. If part of the page doesn&rsquo;t meet a double level, then the whole page doesn&rsquo;t meet a double level.</p>
<h2>What are Screen Readers?</h2>
<p><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/f9702b5ae7714f2c8bbee4beca3f54e0.jpg" alt="a person playing a guitar" /></p>
<p>A screen reader is a form of assistive technology (AT) that renders text and image content as speech or braille output. Screen readers are essential to people who are blind, and are useful to people who are visually impaired, illiterate, or have a learning disability. They allow the user to interact with the computer, navigating around and entering data on forms using the keyboard. They have a wide array of keyboard shortcuts to make interactions simple. Some of the popular screen readers are Voiceover (Bundled into MacOS), JAWS, Window-Eyes, NVDA, and so on.</p>
<h3>Nonvisual desktop access - NVDA</h3>
<p>NVDA, Nonvisual desktop access is open-source solution that is completely free and one the best option for developers to test their application. You can download app and configure on windows on the following link: <a href="https://www.nvaccess.org/download/" target="_blank" rel="noopener noreferrer">https://www.nvaccess.org/download/</a></p>
<p>It&rsquo;s important to note that during the testing you should just use the keyboard and not the mouse. Good way to test is to turn off monitor and see what typical user would experience. <br />NVDA has two modes:</p>
<ol>
<li>Browse is primary for reading content</li>
<li>Focus is for entering data on forms</li>
</ol>
<p>Primary commands:</p>
<ul>
<li>Space (enter focus mode for control)</li>
<li>Tab (Jump focus to next control)</li>
<li>Shift + tab (Jump focus to previous control)</li>
</ul>
<p>Quick Key Commands:</p>
<ul>
<li>H- Heading</li>
<li>K &ndash; Links</li>
<li>B &ndash; Buttons</li>
<li>L &ndash; Lists</li>
<li>D &ndash; Landmarks</li>
</ul>
<h2>Testing WCAG compliance</h2>
<p>To make digital product accessible and WCAG compliant, we should have a good testing plan and strategy. The following strategy can help you to meet that goal:</p>
<ul>
<li><em><strong>Manual keyboard testing</strong></em>. Using keyboard to ensure we can get and interact with everything.</li>
<li><em><strong>Screen reader testing</strong></em> to make sure it works as expected. Readers like NVDA, JAWS, etc.</li>
<li>Use <em><strong>&ldquo;semi-automated&rdquo; testing</strong></em> with tools like WAWE or Accessibility Insights for Web</li>
<li><em><strong>Automated testing</strong></em> with tools like AXE Core which run against our code and catch basic errors. It can be part of CI/CD process.</li>
<li><strong><em>Ask people with disabilities</em></strong> and get their feedback.</li>
</ul>
<h3>&ldquo;Semi-automated&rdquo; testing</h3>
<p>One of the best tools for &ldquo;semi-automated&rdquo; testing are <a href="https://accessibilityinsights.io/docs/en/web/overview/" target="_blank" rel="noopener noreferrer">Accessibility Insights for Web</a>&nbsp;and <a href="https://wave.webaim.org/" target="_blank" rel="noopener noreferrer">WAWE web accessibility evaluation</a>&nbsp;created by webbing. WAWE can be used by:</p>
<ul>
<li>Navigating to the webpage and pasting URL to the page and running the tool<br /><a href="https://wave.webaim.org/">https://wave.webaim.org/</a></li>
<li>Browser extension for Chrome and Firefox. It&rsquo;s much more useful for local testing and development. Once you install plugin you can start testing immediately.<br /><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/8db0b5f83b2a40c488c8a6ee34312714.jpg" alt="graphical user interface, text, application, email" /></li>
</ul>
<p>It&rsquo;s important to understand the main categories before you start the testing:</p>
<table border="0">
<tbody>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/755710133c6e4861a9c426cffba23a0b.svg" alt="null" /></td>
<td>Errors</td>
<td>If you have errors that means you have problems that need to be fixed</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/2bb9b0c3c0364169a12305876ff5771d.svg" alt="null" /></td>
<td>Alerts</td>
<td>Those alerts are not critical, but we need to look into and try to improve behavior. Varying like: form label issues, skipped heading levels, redundant links etc.</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/43ed7edbcf7946e49f4966db84e3de63.svg" alt="null" /></td>
<td>Accessibility features</td>
<td>Alternative text, form labels, skip links etc</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/fc3cf8414b034cc3b4613c54f82808c5.svg" alt="null" /></td>
<td>Structure</td>
<td>Elements like heading, list, navigation. They need to be used properly in order help accessibility.</td>
</tr>
<tr>
<td><img src="https://pnzdemostorageaccount.blob.core.windows.net/cappy/86fb9ec2fdce48a6be7c0542b4c24073.svg" alt="null" /></td>
<td>Aria</td>
<td>Additional features for HTML elements to give more information&rsquo;s to assistive technologies about our content.</td>
</tr>
</tbody>
</table>
<h3>Automated testing</h3>
<p>In order to make the process easier the best way to go is automated.&nbsp; Automated testing can save time during the development phase and educate developers with error that they introduce. Our favorite automated tool is <a href="https://github.com/dequelabs/axe-core" target="_blank" rel="noopener noreferrer">AXE Core</a>&nbsp;created by Deque Labs. It&rsquo;s testing engine created for HTML that is built to integrate with existing test environment for automated accessibility testing. This testing can be part of our unit and integration testing or CI/CD process.</p>
<p>It&rsquo;s important to highlight that some criteria cannot be automated. For example: criteria related to mobile device interactions has to be done manually on a device. Automation testing is not a replacement for human but it helps catch some of the low-level issues and it&rsquo;s far from perfect.</p>
<h2>Conclusion</h2>
<p>In this article, we realized that around 20% of the population has some sort of disability, and the importance for our business to keep digital product accessibility compliant. Companies who continue to ignore accessibility are already losing customers and will end up losing even more in the coming years.</p>
<p>We got familiar with WCAG standards as well as testing strategy and most popular tools that we should consider for our product.</p>
<p>In the next article, I will demonstrate some of the techniques and the most important implementation that your digital product should have.</p>

Today, technology is meant for everyone to use it. If your digital product is not accessibility compliant, you risk that more than one billion people cannot use it. Hundreds of billions are big business opportunity. Accessibility has become a key value in creating a digital product.

Optimizing Digital Accessibility Through Strategic Application of WCAG Guidelines

Digital Assets Management

Content Hub

Resources

Company