Accessibility is essential for developers and businesses who want to make a high-quality website and reach as many people as possible. It is often being referred to as A11y, which is an abbreviation of the word accessibility itself.

A is the beginning of the word,

11 represents letters in the middle, and

y at the end of the word.

When you work with accessibility in mind, it will improve the experience of everyone who uses your website.

A great website should be accessible to as many people as possible, regardless of their hardware, software, language, location, or ability. Many companies and developers are not sure why they should invest their time to make their website and digital content accessible. But, it is important and actually can be seen as a competitive advantage for their business. Here are some of the reasons:

1. Leads to good practices
   
   Resulting in semantic and better mark-up for SEO.
2. Helps to avoid legal concerns
   
   In the year 2000, The Sydney Organizing Committee for the Olympic Games has to paid AUD 20,000 because the official website failed to supply adequate accessibility to the blind user. Read the full story here.
3. Enhance your brand
   
   Implementing accessibility will increase the positive image of a company with their diversity and inclusion efforts.
4. Extend market reach
   
   1.3 billion people (15% of the world’s population) with a disability and people with low bandwidth connections, older technologies, and temporary disability (like losing their glasses) will be able to use your website.

Disabilities can affect people in different ways. In this article, we will discuss web accessibility for three types of disability: vision disability, hearing impairment, and mobility and cognition disability.

Vision disability

Most of the web content and navigation are designed for visual interaction. So, I believe your website already has a beautiful and functional design. However, to offer accessibility for people with various types of visual disabilities, you need to take a couple of things into considerations.

1. Color blindness
   
   The most common example is the blindness of red and green. There is also a case of monochrome vision. Check the contrast of your website when designing by desaturating it.
2. Poor eyesight
   
   Maybe you often see people with poor eyesight squinting their eyes when reading an article on their phone or computer. So, to make a better experience for them, avoid using fixed size for text, adjust the size according to the screen size. Give users the option to resize the text as well.
3. Low vision
   
   Low vision conditions like cataracts and glaucoma can cause a blurry-vision. Make sure your website works with the screen-reader app. For instance, by using captions or alternate attribute (alt) for your HTML image element. To simulate the low vision situation, you can add a blur filter to your website content. At this point, you won’t be able to see the content of your website. Now, try to use the screen-reader app to navigate your site by hitting cmd f5 to enable the built-in VoiceOver tool for Mac or download the NVDA VoiceOver tool for Windows.

Other things you can do to improve the visual accessibility of your website are using regular text instead of an image as text, and not using scrolling/running and flashing text.

Hearing impairment

If you have audio-visual contents on your website, try to add a visual aid. Considers the following:

• For podcast content, you can add a transcript.
• For video content, you can add both subtitles and a transcript.
• You should also consider setting the audio levels carefully and consistently.
• Allow for mono audio, if possible, to support users with a hearing aid device.

Mobility and cognition disability

There are several types of mobility and cognition disabilities, such as Cerebral Palsy, Stroke, and Parkinson. To make your website accessible to people with these disabilities, you should:

• Provide a keyboard-friendly content. Make sure your user can access the entire content of your websites using a keyboard. If possible, support an alternative to handle drag-and-drop or any gestural input.
• Provide enough time for users to complete the action (read or click) for slider/carousel type content.
• Minimize the number of steps to accomplished a task by adding keyboard shortcuts, simplifying the UI.
• Provide a large clickable area.

Depending on the target audiences of your website and where you live, there will be a couple of different guidelines you can adopt.

1. WCAG (Web Content Accessibility Guidelines)
   
   WCAG is the international accessibility guidelines from W3C WAI (Web Accessibility Initiative).
2. US Rule Section 508 standards
   
   If you work with the US federal agency, you should follow these standards as well.

WCAG 2.0 has been gaining traction globally as the go-to web accessibility requirements. Most likely because it was created by the world’s experts, the documents are well organized, and it covers a wide range of disabilities.

Note: There is a newer version which is WCAG 2.1 that was published on 5 June 2018. It will extends WCAG 2.0 to 13 guidelines and 78 success criteria. I will update the list to WCAG 2.1 later. Please wait for the update.

WCAG 2.0 was published on 11 December 2008. It has four principles as the foundation for web accessibility:

1. Perceivable
   
   Users must be able to perceive the information being presented.
2. Operable
   
   Users must be able to operate the interface.
3. Understandable
   
   Users must be able to understand the information as well as the operation of the user interface.
4. Robust
   
   Users must be able to access the content as technologies advance.

Across these principles, there are 12 guidelines and 61 testable success criteria provided to allow WCAG 2.0 to be used where requirements and conformance testing are necessary, such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined:

1. Level A
   
   Most basic web accessibility features
2. Level AA
   
   Biggest and most basic common barriers
3. Level AAA
   
   The highest level of accessibility

My recommendation for the conformance level you should meet on your website is Level AA, which satisfies all the Level A and Level AA success criteria. The checklist below is designed to fulfill this level.

You can see the checklist here.

If you already have a Notion account, you can duplicate the page to check the list and adjust it to your needs.

For the official list of WCAG 2.0 requirements, click here.