< Show all Articles

Accessibility Compliance

This article assumes you have basic working knowledge of how websites are built and run.

Accessibility is about empathy. Individuals with impairments, disabilities or limitations deserve to experience the web, like those without disabilities.

Ensuring a site is accessible takes more work, but the benefit is long term. Business are able to open shop to a whole new segment of users and ingrain the process of accessibility into the fabric of its business.

What is Accessibility?

Well, in a nutshell, accessibility is adhering to a set of recommendations outlined by the Americans with Disabilities Act (ADA). In 2018, the law was refreshed to consider new guidelines that use the Web Content Accessibility Guidelines (WCAG) 2.0 standard. In this standard exist numerous points such as:

  • Providing alternate text for images
  • Ensuring a minimum contrast of color for readability
  • Minimum font sizes
  • Using semantic markup (that is, writing HTML that is structured and logical…more on this later)
  • Navigating with a keyboard
  • Lots more

Let’s consider individuals with age-related limitations. These are officially known as “Age-Related Functional Limitations.” According to a study completed in 2008 by the United Nations titled An Ageing World, the population of individuals over the age of 60 by 2050 will be 20 percent. When the report was created, the population was around 7 percent, so that’s a pretty large increase.

Older individuals encounter these age-related functional limitations in the form of:

  1. Vision Decline
  2. Hearing Loss
  3. Motor Skill Diminishment
  4. Cognition Effects

For the sake of brevity, let’s take one of these limitations and expand on what it is, how to identify it in your own website, and what to do about it.

Looking at Vision Decline

The aspect of vision decline is a lot more complicated than would initially seem. There are many reasons that can contribute to vision decline including, but not limited to:

Causes of sight problems in older people

As you can see, AMD is the most common form of vision impairment in older people. To understand how to empathize with this condition, we should do some research into AMD. 

Causes of sight problems in older people [RNIB 2008a]

Cause Percentage of population (for binocular Visual Acuity < 6/18)
Age-related Macular Degeneration (AMD) 36.2%
Refractive error 31.6%
Cataract 24.5%
Glaucoma 7.9%
Myopic degeneration 2.9%
Diabetic eye disease 2.3%

“Age related macular degeneration (AMD) is an eye condition which affects the central part of your retina which is called the macula. It causes changes to your central vision which can make some everyday tasks difficult. “ according to the Royal National Institute of Blind People

Knowing the what is a great first start, but how does this translate to someone using your website with this condition? Reading further down the page gives us some insight into the symptoms of this condition, which tell us exactly what we need to consider.

  1. Difficulty reading small text
  2. Straight lines become distorted
  3. Blurry vision

     

Luckily, there are tons of free tools out there to assist you in automating the process of identifying these problem areas. A great tool I’ve come across in my travels is called Tenon. It’s free (though it will ask you to register a free account after a few uses). It will generate a report for you of all the issues it finds.

Running a report will produce (likely) tons of issues. Some of them have higher priority than others. For example, an error of Insufficient Line Height has a priority of 44 percent, while This link has a ‘title’ attribute that is the same as the text inside the link has a priority of 100 percent. The great thing about this tool is it also gives you a link to the recommended fix for every issue!

An example line height error produced using the Tenon tool

Since line height is an issue for our users with AMD, we need to take steps to fix this. If you click on the Recommended Fix link at the bottom of the issue, it will direct you to a dedicated page outlining best practices for this specific issue.

Tenon recommends “us[ing] a `line-height` value of 1.5 or higher. Using a unitless value ensures that the line-height will scale if the user zooms the browser window.”

The fix is technically very simple by adjusting the line-height to at least 1.5. In practice, however, it can be a little tricky as that small change might have larger impacts on the design of your website.

Adopting Accessibility in Your Team

The U.S government created an excellent resource to assist in adopting accessibility into your teams, broken down into roles. There are separate resources for product, content, UX, visual design and front-end teams. The guides provide overviews of how:

Now that you have an idea of what you should be looking for (small text, small line height, low contrast), it’s time to identify these problem areas on your website.

  • “An overview of how each team member can contribute to a product’s accessibility”
  • “A framework for thinking about accessibility and inclusive design in your role”
  • “An understanding of the human need behind accessibility practices”

Conclusion

Accessibility can be a difficult methodology to adopt, employ and maintain, but it’s important work. Humans tend to think about things when they are directly affected in some way. If you’ve never encountered someone with an impairment frustratingly trying to use a website, you may not put much thought into the matter. Hopefully this article has made you realize that this should be of importance to you and your business objectives.

Share