What is website accessibility?
Tags: a11y, ux, beginners
Published: 2022-08-08 21:38:00

<h1><span style="font-weight: 400;">What is website accessibility?</span></h1>
<p><span style="font-weight: 400;">Most people think of website accessibility in terms of how it affects people with disabilities. That's certainly an important consideration, but accessibility is about much more than that.&nbsp;</span></p>
<p><span style="font-weight: 400;">Making your website accessible enables people with a wide range of abilities to use it, including those who are blind or visually impaired, deaf or hard of hearing, or have limited mobility.&nbsp;</span></p>
<p><span style="font-weight: 400;"></span></p>
<p><span style="font-weight: 400;">This post covers</span></p>
<p></p>
<ul>
<li><span style="font-weight: 400;"><a href="#id1">What does &ldquo;accessible&rdquo; mean?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id2">What is web accessibility?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id3">WCAG standards</a></span></li>
<li><span style="font-weight: 400;"><a href="#id4">What makes accessibility so important?</a></span></li>
<li><span style="font-weight: 400;"><a href="#id5">Most common accessibility problems</a></span></li>
<li><span style="font-weight: 400;"><a href="#id6">Accessibility best practices</a></span></li>
<li><span style="font-weight: 400;"><a href="#id7">Best Accessibility tools</a></span></li>
</ul>
<p><span style="font-weight: 400;">In other words, making your site accessible opens it up to a larger audience, which can be great for business. But what does 'accessibility' mean in practice? And what do you need to do to make your website more accessible? We'll explore these questions in this post.</span></p>
<h2 id="id1"><span style="font-weight: 400;">What does &ldquo;accessible&rdquo; mean?</span></h2>
<p><span style="font-weight: 400;">You probably have an idea of what &ldquo;accessible&rdquo; means. For example, you can walk upstairs to enter a building. Certainly, the building is accessible. But for the millions upon billions of people internationally who are disabled, impaired, or just getting older, what &ldquo;accessible&rdquo; means shifts.&nbsp;</span></p>
<p><span style="font-weight: 400;">Think about how wheelchair users are generally unable to use stairs. In many places, they can access buildings through a ramp instead. A ramp is obviously a different way to access the building. Something being accessible is just that- different ways that allow something to be used.</span></p>
<p><span style="font-weight: 400;">Web advocate at Google, Rob Dodson, sums it up. He </span><a href="https://www.youtube.com/watch?v=z8xUCzToff8&amp;feature=youtu.be"><span style="font-weight: 400;">says</span></a><span style="font-weight: 400;"> accessible means &ldquo;giving users with disabilities or impairments alternative ways to use your products.&rdquo;</span></p>
<h2 id="id2"><span style="font-weight: 400;">What is web accessibility?</span></h2>
<p><span style="font-weight: 400;"><img src="https://cdn.aglty.io/bwql7jyk/web accessibility.png?w=800" alt="a diagram of web accessbility with icons" /></span></p>
<p><span style="font-weight: 400;">Like the ramp example, digital accessibility is when websites, tools, and other digital applications are designed so people with disabilities and impairments can use them.&nbsp;</span></p>
<p><span style="font-weight: 400;">For example, people with motor impairments may use a keyboard to navigate sites. If your site not only has keyboard navigation setup but has good organization as well, your site is accessible to those users.</span></p>
<p><span style="font-weight: 400;">Along with motor impairments, web accessibility involves anything that hinders web access. This can include visual, auditory, and neurological disabilities as well as limitations like:&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Mobile users&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Elderly individuals with changing abilities</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Temporary impairments (i.e., broken arms)</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Limitations due to the environment (i.e., bright sunlight)&nbsp;&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Slow Internet connection or low bandwidth</span></li>
</ul>
<p><span style="font-weight: 400;">With this definition in mind, let&rsquo;s look at the internationally accepted guidelines for web accessibility.</span></p>
<h3 id="id3"><span style="font-weight: 400;">WCAG Standards</span></h3>
<p><span style="font-weight: 400;">WCAG, or the Web Content Accessibility Guidelines, was started by the World Wide Web Consortium in May of 1999 as a web accessibility initiative and accessibility standard. It defines the technical specifications for sites to be accessible. In it, you can find specifications from color contrast to text size.</span></p>
<p><span style="font-weight: 400;">A quick overview is that their current standards, </span><a href="https://www.w3.org/TR/WCAG21/#conformance"><span style="font-weight: 400;">WCAG 2.1</span></a><span style="font-weight: 400;">, and older guidelines state the importance of a website being POUR:</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><b>Perceivable: </b><span style="font-weight: 400;">All content needs to be presented clearly.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Operable:</b><span style="font-weight: 400;"> All elements, components, and navigation must be usable.</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Understandable:</b><span style="font-weight: 400;"> Content needs to be readable and easily understood.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Robust: </b><span style="font-weight: 400;">Content needs to be understood by various users and assistive technologies (i.e., screen readers).&nbsp;</span></li>
</ul>
<h2 id="id4"><span style="font-weight: 400;">What makes accessibility so important?</span></h2>
<p><span style="font-weight: 400;">The big deal about web accessibility is that it brings a better experience for everyone. When you design your site to be accessible, you're allowing more users to obtain information, content, and more regardless of individual need.&nbsp;</span></p>
<p><span style="font-weight: 400;">Plus, countries internationally are putting web accessibility into law. This is aided by the web being defined as a basic human right by the </span><a href="https://www.brookings.edu/blog/techtank/2016/11/07/the-internet-as-a-human-right/"><span style="font-weight: 400;">United Nations</span></a><span style="font-weight: 400;"> in 2016.&nbsp;</span></p>
<p><span style="font-weight: 400;">Beyond that, there is a business case. According to the World Health Organization, 15% of the population, or one billion people internationally, are disabled or impaired (</span><a href="https://www.who.int/news-room/fact-sheets/detail/disability-and-health"><span style="font-weight: 400;">WHO</span></a><span style="font-weight: 400;">). That&rsquo;s a good amount of people who have accessibility needs. The number would rapidly increase if we were to add other accessibility needs like older people or those in developing nations.&nbsp;</span></p>
<p><span style="font-weight: 400;">Having an accessible site helps those users access it. In addition, it helps improve your user experience across different situations and devices, allowing you to provide a personalized and useful website for everyone regardless of who they are.&nbsp;</span></p>
<h2 id="id5"><span style="font-weight: 400;">5 Most common accessibility problems</span></h2>
<p><span style="font-weight: 400;">With the importance of web accessibility in mind, we&rsquo;ll discuss the most common accessibility problems on the web.&nbsp;</span></p>
<p><span style="font-weight: 400;">We decided on these issues by using a study by </span><a href="https://webaim.org/projects/million/"><span style="font-weight: 400;">WebAIM</span></a><span style="font-weight: 400;"> that looked at the accessibility problems in the home pages of the top one million sites in February 2022.</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Low Contrast</span></h3>
</li>
</ol>
<p><span style="font-weight: 400;">Color contrast may be </span><i><span style="font-weight: 400;">the </span></i><span style="font-weight: 400;">most common web accessibility issue. That&rsquo;s because colors are often used for organization and to show errors (i.e., &ldquo;required fields are in red&rdquo;). But if there isn&rsquo;t a high enough difference between the colors used, it can be difficult for people with visual disabilities and impairments to navigate the site.</span></p>
<p><span style="font-weight: 400;">In addition, </span><a href="https://webaim.org/projects/million/#wcag"><span style="font-weight: 400;">WebAIM</span></a><span style="font-weight: 400;"> found that 83.9% of the sample had low contrast on their home pages. Clearly, color contrast is an issue that needs to be addressed.</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Images Not Having Alternative Text&nbsp;</span></h3>
</li>
</ol>
<p><a href="https://webaim.org/projects/million/#wcag"><span style="font-weight: 400;">WebAIM</span></a><span style="font-weight: 400;"> found that 55.4% of home pages did not have alt text on images in February 2022.&nbsp;</span></p>
<p><span style="font-weight: 400;">Now, alt text does more than just organize images. It describes the function of an image to users with visual impairments. Screen readers read aloud, allowing users to understand the content. Plus, alt texts help users with slow internet connection. Often, it will load before an image does. That allows users to understand what an image is even without it loading.&nbsp;</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Empty Links</span></h3>
</li>
</ol>
<p><a href="https://webaim.org/projects/million/#wcag"><span style="font-weight: 400;">WebAIM</span></a><span style="font-weight: 400;"> found that 50.1% of sites studied had empty links.</span></p>
<p><span style="font-weight: 400;">Basically, empty links are links except that they have a descriptive text element. This element is what screen readers use to show where the link leads. Without it, users won&rsquo;t know where a link will take them.</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">No Input labels for Missing Forms&nbsp;</span></h3>
</li>
</ol>
<p><span style="font-weight: 400;">WCAG discusses in detail about </span><a href="https://www.w3.org/WAI/tutorials/forms/labels/"><span style="font-weight: 400;">labels</span></a><span style="font-weight: 400;"> being required on all forms. Yet, </span><a href="https://webaim.org/projects/million/#wcag"><span style="font-weight: 400;">WebAIM</span></a><span style="font-weight: 400;"> found that 46.1% of home pages featured forms with improper labeling. With this, there are two main issues:&nbsp;</span><b></b></p>
<ul>
<li aria-level="1"><b>Appropriate Labels: </b><span style="font-weight: 400;">Many online forms don&rsquo;t have clear labels that portray a form&rsquo;s function to screen readers. This presents an issue for users with visual impairments.&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Highlighted Labels</b><span style="font-weight: 400;">: Generally, filled forms highlight incorrect fields in red. This does not properly communicate the incorrect fields for users with colorblindness or visual impairments.&nbsp;</span></li>
</ul>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Organization&nbsp;</span></h3>
</li>
</ol>
<p><span style="font-weight: 400;">The last two accessibility issues that WebAIM discusses are empty buttons and missing document language. However, we want to emphasize organization above these. Without it, a site can be challenging to navigate for not just people with disabilities. WCAG even emphasizes the importance of content being operable. That means all users alike can navigate it.</span></p>
<p><span style="font-weight: 400;">If there isn't a logical, easy organization to go through a site, users may become disoriented if they:</span></p>
<ul>
<li><span style="font-weight: 400;">Depend on a joystick</span><span style="font-weight: 400;"></span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Depend on a keyboard</span><span style="font-weight: 400;"></span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Have a language barrier</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Have visual impairments&nbsp;</span></li>
<li><span style="font-weight: 400;">Have neurological disabilities</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Have a slow internet connection</span></li>
</ul>
<h2 id="id6"><span style="font-weight: 400;">Accessibility best practices</span></h2>
<p><span style="font-weight: 400;">When building accessible websites, you want to ensure that your design is universal. A universal design seeks to allow any consumer to use your site. Let&rsquo;s break down the three most important things to make this happen.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Ensure your site is easy to understand&nbsp;</span></h3>
<p><span style="font-weight: 400;">Having a universal design means anyone can understand your site.</span></p>
<p><span style="font-weight: 400;">That doesn&rsquo;t mean just having great content, though that&rsquo;s a factor. It means having content that is clear and simple to read. That includes non-convoluted and plain text.&nbsp;</span></p>
<p><span style="font-weight: 400;">It refers to how the content appears. Sites that are easy to understand use fonts and font sizes that provide an easy reading experience. Referring to color contrast, the color of your text matters as well. You&rsquo;ll need to choose a font color that has a high contrast to the background page.&nbsp;</span></p>
<h3><span style="font-weight: 400;">Make sure that your site is navigable&nbsp;</span></h3>
<p><span style="font-weight: 400;">Do you remember a site that had a confusing design? It was probably hard to navigate, making you disoriented and unable to use the site.&nbsp;</span></p>
<p><span style="font-weight: 400;">It is an annoying problem that will bother many users. For users with disabilities, a confusing design makes it extremely difficult to navigate a site. This only becomes harder if they are using assistive technologies or depend on the keyboard to navigate.&nbsp;</span></p>
<p><span style="font-weight: 400;">WCAG has very helpful </span><a href="https://www.w3.org/WAI/WCAG21/Understanding/navigable"><span style="font-weight: 400;">suggestions</span></a><span style="font-weight: 400;"> to improve your site&rsquo;s navigation. They recommend:</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Highlighting any search terms&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Providing easy ways to get to each section on a web page&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Decreasing link usage&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Ensuring all links appear different from the rest of the content on each page</span></li>
</ul>
<h3><span style="font-weight: 400;">Ensure your site is adaptable&nbsp;</span></h3>
<p><span style="font-weight: 400;">Many different people with many different accessibility accommodations need to understand your site. That alone sounds daunting, but it is easier than you think. There are three main ways to ensure your site has options for accessibility.&nbsp;</span></p>
<p><span style="font-weight: 400;">Firstly, make sure that all videos have closed captions. This is a good practice not just for allowing users with auditory impairments to understand them. It helps users with migraines in areas where they need to be quiet or experience sensory overload.&nbsp;</span></p>
<p><span style="font-weight: 400;">Secondly, make sure that all images have alt text. This helpful tool will read your website to the user, typically if they have a visual impairment or other disability that makes reading a web page difficult.</span></p>
<p><span style="font-weight: 400;">Third, ensure your website is set up for keyboard-only navigation. Users with visual or motor disabilities, or even just growing older, may use a tab key to navigate your site.&nbsp;</span></p>
<h2 id="id7"><span style="font-weight: 400;">Best Accessibility tools</span></h2>
<p><span style="font-weight: 400;">The web offers several applications that make it easy to ensure you have an accessible site. Let&rsquo;s take a look at some of the best options.&nbsp;</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Stark&nbsp;</span></h3>
</li>
</ol>
<p><a href="https://www.getstark.co/"><span style="font-weight: 400;">Stark</span></a><span style="font-weight: 400;"> is a plugin that can be incorporated into any web-building software. It runs a check over visual elements like contrasts, color saturation, and hues. That helps ensure accessibility for people with color blindness or visual impairments.&nbsp;</span></p>
<p><span style="font-weight: 400;">Plus, since it's embedded in the software, you can make adjustments easily from the start of a project.</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><b>Good For: </b><span style="font-weight: 400;">Ensuring your website is color accessible</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Price:</b><span style="font-weight: 400;"> Their subscription plans start at free, $60 a year, and a custom amount for teams</span></li>
</ul>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Wave AIM</span></h3>
</li>
</ol>
<p><a href="https://wave.webaim.org/aim/"><span style="font-weight: 400;">Wave AIM</span></a><span style="font-weight: 400;"> is a powerful testing tool that provides a detailed report about your site&rsquo;s accessibility. With it, you&rsquo;ll receive an automated and manual Accessibility IMpact (AIM)) score. This includes data on how your site stands according to WCAG, a recommendation from an expert tester, and a detailed report of all accessibility issues detected.&nbsp;</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><b>Good For: </b><span style="font-weight: 400;">Having a detailed check of your sites&rsquo; accessibility and ensuring your stay within WCAG guidelines&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Price:</b><span style="font-weight: 400;"> It starts at $500 for up to 20,000 pages</span></li>
</ul>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Funkify</span></h3>
</li>
</ol>
<p><a href="https://www.funkify.org/"><span style="font-weight: 400;">Funkify</span></a><span style="font-weight: 400;"> is a chrome extension that allows you to look at your site through the eyes of users with disabilities and impairments. Through it, you experience what users with visual and motor impairments, dyslexia, keyboard-only control, and more experience. This allows you to understand where you can make meaningful improvements.&nbsp;</span><b></b></p>
<ul>
<li aria-level="1"><b>Good For:</b><span style="font-weight: 400;"> Having a hands-on experience how accessible your site is and checking for keyboard navigation functions&nbsp;</span></li>
<li aria-level="1"><b>Price: </b><span style="font-weight: 400;">Free and 4.99 monthly plans&nbsp;</span></li>
</ul>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">Google Lighthouse&nbsp;</span></h3>
</li>
</ol>
<p><a href="https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en"><span style="font-weight: 400;">Google Lighthouse</span></a><span style="font-weight: 400;"> is an automated, open-source tool in Chrome DevTools. It runs many different tests against pages to help improve their quality.&nbsp; These tests will report how accessible your page&rsquo;s buttons, forms, images, and even headers are.&nbsp;</span></p>
<p><span style="font-weight: 400;">In addition, Lighthouse is only one group of checks you can do using Chrome DevTools.</span><b></b></p>
<ul>
<li aria-level="1"><b>Good For: </b><span style="font-weight: 400;">Chrome users who want to check the accessibility of different buttons and forms</span></li>
<li aria-level="1"><b>Price: </b><span style="font-weight: 400;">Free on the Chrome Store</span></li>
</ul>
<ol>
<li style="font-weight: 400;" aria-level="1">
<h3><span style="font-weight: 400;">ARIA DevTools&nbsp;</span></h3>
</li>
</ol>
<p><a href="https://chrome.google.com/webstore/detail/aria-devtools/dneemiigcbbgbdjlcdjjnianlikimpck?hl=en"><span style="font-weight: 400;">ARIA DevTools</span></a><span style="font-weight: 400;"> is a chrome extension that helps you understand screen readers such as Jaws, NVDA, and Voiceover. Specifically, it helps with ARIA or Accessible Rich Internet Applications. These attributes help describe each element on a page, letting users with visual impairments better navigate.&nbsp;</span></p>
<p><span style="font-weight: 400;">ARIA allows you to understand how screen readers present it to blind users. You&rsquo;ll be able to see all elements in their ARIA roles, allowing you to spot missing labels and keyboard support.&nbsp;</span><b></b></p>
<ul>
<li aria-level="1"><b>Good For: </b><span style="font-weight: 400;">Testing your site&rsquo;s screen reader accessibility&nbsp;</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Price</b><span style="font-weight: 400;">: Free on the Chrome Web Store</span></li>
</ul>
<h2><span style="font-weight: 400;">Build an accessible website with Ikius</span></h2>
<p><span style="font-weight: 400;">Whether you need us for an immediate accessibility issue or are building a </span><a href="https://ikius.com/blog/what-is-jamstack"><span style="font-weight: 400;">Jamstack website</span></a><span style="font-weight: 400;"> with modern technologies, we have the skillset to get it done. Our team is well versed in WCAG standards as they also happen provide guidance on how best approach accessibility for users in Europe and the US. </span></p>