The Complete Guide to Achieving Web Accessible Design

According to recent research by the CDC, 26% of individuals within the United States alone have some form of disability. This amounts to approximately 61 million Americans or one in four individuals. With numbers like these, it’s hard to understand how web accessible design isn’t at the forefront of everyone’s mind.

Disabilities vary greatly in terms of type and can range from those related to hearing, seeing, cognition, mobility and more. So, the question begs to be asked – how does your website stack up in terms of accessibility? If you’re interested in learning more about web accessible design, what it is and the steps you can take to make sure your website stays compliant with international standards, then look no further than these next few lines.

What is Web Accessibility?

Web accessibility as defined by the World Wide Web Consortium (W3C) is when a website is designed so that it is made accessible to a wide range of individuals regardless of ability. This means that in order to remain compliant with web accessibility standards and guidelines, you must take into consideration individuals with varying disabilities. These disabilities include but are not limited to the following:

• Blindness/low vision
• Deafness/hearing loss
• Learning disabilities
• Limited movement
• Speech disabilities
• Photosensitivity
• Cognitive limitations

When individuals of all backgrounds and abilities are taken into consideration, your user experience and the quality of your search engine optimization are also improved. These are two immediate advantages to be had from web accessible design which all companies can benefit from.

So, how does one go about implementing web accessible design? There are four basic principles to compliance as laid out by W3C which you can use to guide yourself through the transition.

‍

Source

The Four Principles of Web Accessible Design

The World Wide Web Consortium has laid out four basic principles of web accessibility for those looking to become compliant with international standards and guidelines. These four principles each include a number of specific guidelines which can essentially be implemented as tactics in order to achieve compliance.

Principle #1: Perceivable

The Perceivable Principle says that information presented on a website must be perceivable to a wide range of users regardless of their abilities. This means that individuals, regardless of ability must be able to perceive your content in some way, shape or form so that it is not invisible to all of their senses.

Non-Text Content

For all non-text content that is listed on your website, you must also have a text alternative that essentially serves as the equivalent of the content. There are a number of exceptions to this guideline which include controls, time-based media, tests, sensory content and CAPTCHA. However, many of these exceptions still require a degree of compliance and as a result, it's essential to review W3C guidelines in order to ensure you're following in the right steps.

Time-Based Media

Time-based media is defined within the boundaries of this article as either audio-only or video-only media that is either live or prerecorded. Essentially, the guideline stipulates that you must provide some form of equivalent alternative for these forms of media in order to remain compliant unless the time-based media is explicitly being used as an alternative media for text and is "clearly labeled as such".

For example, captions must be provided for prerecorded and live audio content and audio descriptions must be provided for prerecorded and live video content. Sign language interpretation must also be provided for prerecorded audio content as well as extended audio descriptions  in some scenarios for video content.

Adaptability

Adaptability deals with creating content that is adaptable in nature and thus can be displayed and presented in a variety of ways "without losing information or structure". For example, you may want to provide an alternative, simpler layout option for the purpose of enhancing an individual's ability to perceive content.

Distinguishability

The distinguishability guideline essentially means that you're making your content easy to see and hear by separating the foreground from the background with a variety of techniques. Color for instance cannot be the only method used to convey information or to for instance distinguish a visual element.

If audio plays automatically on your website for more than three seconds you must also include some control mechanism which makes it easy for the user to stop the audio or control the volume.

There is additionally a rule which requires text to have a contrast ratio of at least 4.5:1 with the exception of large text, incidental or logotypes. You must furthermore provide the ability to resize text up to 200% "without loss of content or functionality".

For further information on how to comply with this guideline, you may visit the following link.

Principle #2: Operable

The Operable Principle as its name implies deals with the operability of your website. It essentially means that various interfaces, components and navigation must be operable in a variety of ways so that individuals of varying abilities are able to use your website effectively and efficiently.

Keyboard Accessibility

This guideline essentially states that all aspects of your website must be functional via the use of a keyboard interface without requiring specific timings for individual keystrokes.

Time            

The time guideline is set to ensure that all users regardless of ability are able to read your content without being constrained by certain time limits. If there are time limits that are set, the website must provide the ability to turn these off, adjust them or extend them. There are also specific requirements for "moving, blinking, scrolling or auto-updating information" which help to ensure all users of all abilities have sufficient time to experience the content.

Seizures

Content must also be designed in a way that is known not to cause seizures. For instance, web pages may not contain anything which flashes more than three times within a one second period and the flash must be below the "general flash and red flash thresholds".

Navigation

Websites must be easily navigable and sectioned off appropriately in order to enhance the user experience. For instance, websites must have page titles, section headings and labels where applicable and the purpose of in-text links must be able to be determined from the link text alone. Websites must also include more than one way to locate a web page and information about the user's location within a set of web pages.

Principle #3: Understandable

The Understandable Principle essentially means that the information, content, interfaces and navigation of your website must be understandable to a wide range of audiences regardless of impairments or disabilities (i.e. cognitive).

Readability

This guideline essentially states that text content within a website must be made both readable and understandable to the user regardless of ability. For instance, the language of each web page, passage and phrase must be "programatically determined". Furthermore, a mechanism must be available in order to help identify abbreviations, words or phrases which are used in an unsual way (i.e. idioms). Furthermore, if the reading level of the text is more advanced than a "lower secondary education level", then a version must be made available which does not require this level of reading ability.

Predictability

The predictability guideline essentially is set to ensure that websites "appear and operate" in a predictable manner. This means that certain things such has setting changes should not automatically cause a change of context unless the user has been notified that this will happen beforehand. Navigation must also be consistent as well as the components within each set of webpages.

Assistance

This guideline essentially states that your website should include assistance for users to help avoid and correct any mistakes that may be made when it comes to inputting data. For example, errors should be automatically detected and described to the user in text. Furthermore, labels and instructions should be present when user input is required. Submissions must also be made reversible and data entered by the user should be checked for input errors with the ability to correct such errors if correction is needed. There must also be a mechanism in place to review, confirm and correct information before any user submissions are finalized.

Principle #4: Robust

The Robust Principle states that the content of your website must be robust enough so that it is able to be “interpreted reliably by a wide variety of user agents, including assistive technologies”. This means that as these technologies continue to evolve, your content should remain reliably accessible.

Conclusion

There are countless factors that we must take into consideration when it comes to crafting the perfect website. Is my content informative enough? Is it fresh? Is my website user-friendly? Is it well-optimized? The truth of the matter is that web accessibility all too often gets thrown to the wayside. In fact, many individuals aren't even aware of such standards, guidelines and protocols.

If you're just beginning to learn about web accessible design, feel free to use this article as a tool to help guide you through your website's transition. Get yourself started on the right path today to making your website content more accessible to all individuals regardless of background or ability.

‍Is your content accessible to individuals of all backgrounds and abilities? What strategies have you used to get it there? Let us know in the comments below! We'd love to hear from you!