A Brief Introduction of Accessibility for Web Development

Blog Barista: Tony Whalen | Oct 15, 2018 | Development Practices | Brew time: 5 min

Accessibility is an extremely important component of the development and creation of web content. As defined by the World Wide Web Consortium (W3C), web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Learn more about W3C at: https://www.w3.org.

This essentially means that we should be focusing on delivering content that is usable for all people. This way, content isn’t unreachable to a portion of users.

A common issue with developing an accessible website or application is understanding the needs of a wide variety of users with potential disabilities. Therefore, in order to achieve accessibility, developers need to first understand the different types of disabilities and what forms the foundation of accessible web content.  

Types of Barriers

WebAIM identifies visual, hearing, motor, and cognitive disability types as being the four major categories that need to be considered when designing a website or web application for accessibility.

Visual

Visual disabilities include blindness, low vision, and color blindness.

As a developer, you need to ensure that all of your web content is available to a user regardless of whether or not they can physically see it. This means developing websites and applications that are screen-reader friendly and incorporate designs that contain adequate color contrast.

An excellent exercise is to download a screen reader and run through your application. But, do this with your eyes closed or without looking at the monitor. How was it? Was it easy to navigate? Was the content easy to understand?

Hearing

Hearing disabilities include deafness or hearing impairment.

Any audible information presented on your website needs to be available in a visible format as well. If a video is provided on your website, then it should include captions so that users with hearing impairments can also access the information.

Motor

Motor disabilities include difficulty with motor functions (such as using a mouse).

An accessible application should be navigable by only a keyboard. Items like skip navigation and proper header usage for content organization are very helpful in this regard. Screen readers use headers to determine the order of narration.

Cognitive

Cognitive disabilities include learning disabilities or other conditions that prevent the understanding of information.

The most effective way to break down this barrier is by implementing clean and intuitive designs. Information needs to be presented to users in a logical and structured formation. It needs to be as straightforward as possible. This will assist users with this type of disability by remaining focused and understanding the usage of the application and interpretation of information.

As a developer, it’s important to recognize each of these categories as being potential barriers to accessibility. When designing a website or web application, you should go through and analyze it based on each of those categories, one at a time. It is often easier to assess each of them on an individual basis, rather than all of them at once.

You can learn more about WebAIM and each of the four disability types at: https://webaim.org/intro/.

Standards for Accessibility

The standards for accessibility compliance are developed by the W3C based on four principles commonly referred to as POUR—perceivable, operable, understandable, and robust.

Perceivable

Users must be able to consume the information from a website. If the user is unable to see, can they hear the information instead (i.e. using a screen reader)? If they’re unable to hear, do they have a means of reading the information presented through captions or transcripts? Users with disabilities need to be able to take in all the information presented on a website.

Operable

A website’s content and navigation should be operable to all users. A common issue is websites that are not fully functional when using only a keyboard. Many users with disabilities have to solely rely on keyboard navigation when accessing the web. Content that is only operable by mouse hinders their ability to access presented information.

Understandable

This is very similar to usability, as it places an emphasis on making the understanding and operation as easy as possible. So, take a step back and look at your website. Is the content presented in a sensible way? Is the operation of the interface intuitive? If there’s any doubt, it’s possible it could be a barrier for certain users.

Robust

Content must be developed so that it can be accessed by users using a wide variety of technologies, including those that are old and new. Users with disabilities will have different screen readers, devices, browsers, etc. Therefore, it’s important to remain accessible from as many technologies as possible.   

Within these principles there are levels of conformance to the Web Content Accessibility Guidelines (WCAG) 2.0 standards:

Level A Conformance–the minimum level of conformance for a website

Level AA Conformance–a typical standard of accessibility conformance

Level AAA Conformance–the highest WCAG 2.0 standard of compliance

Criteria throughout the WCAG 2.0 guidelines are labeled with what level of conformance they correspond to (Level A, Level AA, or Level AAA). To achieve conformance, each criterion within that level needs to be fulfilled. More information about each level can be found at: https://www.w3.org/TR/WCAG20/.

Making the User Experience Easy for Everyone

A website or web application that conforms to the standards will then be within reach of everyone. Reviewing your application or website to remove specific barriers to accessibility will help ensure that the content and features can be consumed by the widest possible audience.

Evaluating and developing a website or application for accessibility can be a bit of an art form. Therefore, the intent of this post was not to overwhelm you with information, but rather provide you with a solid jumping off point on what accessibility is and how to accomplish developing content for all users.

Considering the vast nature of accessible development, I plan to dive deeper into individual topics in future blog posts. But for now, I’ll leave you with some helpful tools and resources for accessible development.

Helpful Tools for Accessible Development

• Color Contrast Checker (http://webaim.org/resources/contrastchecker)
• Color Contrast Analyzer (https://developer.paciellogroup.com/resources/contrastanalyser/)
• AXE (https://www.deque.com/axe/)
• Chrome WAVE (http://wave.webaim.org/extension)
• JAWS Screen Reader (https://www.freedomscientific.com/Downloads/JAWS)
• NVDA Screen Reader (https://www.nvaccess.org/download/)
• Chrome Lighthouse (https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en)

Helpful Articles and Resources for Accessible Development

• Easy Checks – A First Review of Web Accessibility (http://www.w3.org/WAI/eval/preliminary)
• WebAIM’s WCAG 2.0 Checklist (http://webaim.org/standards/wcag/checklist)
• Mobile Accessibility Guidelines 2.0 (http://www.w3.org/TR/mobile-accessibility-mapping)
• Introduction to Web Accessibility (https://webaim.org/intro/)
• 10 Easy Accessibility Tips Anyone Can Use (https://webaim.org/blog/10-easy-accessibility-tips/)
• 18F Accessibility Guide (https://accessibility.18f.gov/index.html)
• Alternative Text (http://webaim.org/techniques/alttext)
• Captions, Transcripts, and Audio Descriptions (http://webaim.org/techniques/captions)
• Keyboard Accessibility (http://webaim.org/techniques/keyboard/)
• “Skip Navigation” Links (http://webaim.org/techniques/skipnav)
• Creating Accessible Forms (http://webaim.org/techniques/forms/controls)
• Creating Accessible Tables (http://webaim.org/techniques/tables)
• Fonts (http://webaim.org/techniques/fonts)
• Seizure Disorders (http://webaim.org/articles/seizure)
• Accessibility of Rich Internet Applications (http://webaim.org/techniques/aria)

Other recent posts: