Web Accessibility Basics

What disabilities do you know of that affect website use? #

There are many types of disabilities that impact website use. Here, we’ve compiled a list of some of the more common disabilities and how they may impact your online experience.

Cognitive Impairment #

The cognitive impairment category is one of the most varied and least understood, but it is also one of the largest. It’s an umbrella term for people with everything from epilepsy to dyslexia, and each user requires different online accommodations.

Mobility Impairment #

Users with mobility impairments have limited or no use of one or more of their extremities. Making sure your website can be navigated can help these users to access your content.

Visual Impairment #

To make your website accessible to visually impaired users, make sure that your contrast is high, your fonts are simple and easy to read, you make sure your content is easy to enlarge, and your content is easy to understand for screen readers.

Hearing Impairments #

Users with hearing impairments are best served by content that is easy to access and understand. The text alternative should describe the purpose of the image or the Flash content, illustrate the structure of the image, or convey the content of the video.

What are some common accessibility issues when it comes to websites? #

Digital accessibility is important for all websites, even the smallest ones. Learn how digital accessibility can help you avoid issues that can cost you.

Screen Rotation #

The user needs the website to rotate in order to display properly. However, the site is only designed to be viewed in one device orientation.

Solution: Web accessibility is an important issue. It’s about making it easy for visitors to access your site. You can improve your website’s accessibility by using the right colors, fonts, and headings. Read more here to learn how.

Chaotic Structure #

A traveler with dyslexia is researching. However, he is not able to make his way effectively through the website’s cluttered graphics, text passages that are difficult to read, and clicking on advertising banners without consent.

Solution: By choosing readable fonts and making sure there is an appropriate amount of distance between lines of text, they can help visitors to find the information they need.

Poor Functionality #

A parent contacts her child’s school to report that the class website is nearly impossible for them to read. Since nothing they have tried has made it easier to read, they are forced to use their computer in 100% zoom mode and have to scroll up/down every line in order to be able to read the info they are seeking.

Solution: The school should ensure that their website reflows responsively and that their standard font is larger.

Low Contrast #

A retiree calls an online store to make a purchase. After attempting to submit his purchase form, he suspects something is wrong with it because he cannot see where exactly to type in his billing and shipping address. Customer Service helps him troubleshoot and discovers that text fields were just too faint for the user is a retiree to discern between them and the page’s background color.

Solution: The store needs to improve the visibility on its order page in order to satisfy their visual needs and provide a great experience. Otherwise, they will lose out on future revenue.

What are some common barriers to being accessible? #

When you’re faced with the challenge of making a website accessible for different types of people on different platforms at different times, it can be extremely stressful. Websites are usually made up of the following content and functionality components:

  • Navigation
  • Forms
  • Video
  • Audio
  • Text
  • Links
  • Images

Consider by way of example, a simple hyperlink. It’s among the most fundamental but significant varieties of interactive content on the web, yet it can feature many issues:

  • Colour combinations may make it difficult for some users to accurately determine the usability and purpose of an interface element if it is unclear that a link is in fact a link and not simply another form of text.
  • For people who are blind or visually impaired, it’s vital that the color of a hyperlink is visible and identifiable.
  • Both blind and mobility-impaired users will need link text that describes what will happen if they activate that link (not just stating, “click here”). This is so there’s no ambiguity or confusion when using assistive technologies or navigating the website. So you should state something like, “Click HERE to get a FREE glass of milk!”

Here’s another example: website contact form.

  • Users with low vision will need to make sure they can easily read all of the form controls in contrast to how easy it is to recognize the various visual cues – like text, color, and graphics.
  • Customers with color blindness might need visual indicators to help them identify the fields that are required for their obligations versus those which are simply optional.
  • People with mobility impairments may find navigating the form easier if fields are stacked on top of each other rather than side by side. This way, these people can easily scan their eyes across the page to where they want to go next.
  • Users with visual disabilities will need to clearly identify the purpose of every field, and in some cases, you’ll also go beyond that by giving clear step-by-step guidance that’s right inside your form instead of off to one side – so it can be read when people navigate through your fillable PDF.
  • Blind and mobility-impaired individuals will need easy keyboard navigation to move around the fields and operate them.

As you can see, there’s a lot to take into account when it comes to accessibility. But we want you to feel encouraged and not intimidated by it – because what you need to understand is that all the small improvements you learn about and start implementing will help your users the minute they go live.

Who makes and breaks accessibility standards on the internet? #

When it comes to digital accessibility, you might wonder where all of these rules and regulations come from. There are many valid reasons but the most important one would be that the web can change rapidly at any moment which is why it’s vital that accessibility guidelines always keep up with the times. Over time various governmental organizations, associations, and even big businesses have been involved in making sure that digital innovations will continue to stay accessible for all. And while there are a wide variety of sources out there that take care of this kind of thing (see appendix B) what we’re going to focus on today is the standard guideline created by World Wide Web Consortium which is commonly known as WCAG.


The World Wide Web Consortium is an international body that has published the official standards for HTML, CSS, and several other web technologies since 1999. The latest version of the W3C’s accessibility guidelines is the WCAG 2.1.The guidelines are broken down into three levels:

  • Level A — This is the lowest level and includes relatively easy enhancements to make. This level represents the bare minimum of accessibility.
  • Level AA — This is the intermediate level and contains enhancements that are more difficult to implement but also increase accessibility.
  • Level AAA — This is the highest level of standards, and they are the most difficult to meet. However, they do yield the greatest accessibility for end-users.

A word of caution for newcomers to WCAG: the language may be a little off-putting at first, but you’ll find that it’s not as deep or complex as you might fear. Once you’ve gotten a feel for the main points and looked into the longer descriptions, the pages are clearer and more inclusive. Checklists and tutorials from other accessibility authorities can be a lot better at explaining accessibility as well, with plain language meant to welcome those who don’t have as much experience with these issues as you do. For those looking for a shorter version of all this, check out Appendix A!

Section 508 #

In addition to WCAG guidelines that are based on law, Section 508 guidelines are also often used within state and local governments, the private sector, nonprofits, and education. Not only are these guidelines based on law, but they also have a trickle-down effect, so they will often influence other organizations.Historically, however, the Section 508 guidelines suffer from two problems:

  • They are not as comprehensive as WCAG.
  • They have often lagged well behind WCAG in getting updated and, thus, even further behind the ever-evolving web itself.

Any developer or site creator who adheres to WCAG standards will automatically follow Section 508 as well.

What are some common misconceptions about accessibility standards? #

With regards to Section 508 and WCAG, there are a few things that should be cleared up in order to adopt a healthy and realistic mindset about accessibility. Some of the most common misconceptions will be addressed below:

First, “meeting standards” and “achieving compliance” sometimes implies that designing and developing accessible web pages is a finite process. It’s not.Accessibility is an ongoing process that requires permanent changes to your web. As new functionalities are added to any website, they need to be made accessible before going live. Although many companies face an initial learning curve when it comes to their workflow when implementing accessibility in their products, the adoption of it will eventually require little change to your existing workflow with a little adjustment on usability.

Second, compliance is “a line in the sand that we have to get across.” No, it isn’t.

Accessibility is a spectrum, and every site sits somewhere along with it. When every website has become truly accessible, we will move higher on that spectrum and be even closer to reach the goal of accessible digital content for all.Too often engineers and developers see accessibility as discouraging because it takes so long to fully comply with WCAG level A (let alone AAA). But we don’t need to think about it this way. Instead of seeing accessibility as discouraging, we should approach it from another angle: if we make any accessibility enhancement to our website or app today, our users will benefit by using it immediately. Tomorrow, when we add another accessibility enhancement, the user will also begin to enjoy quick benefits without any further delay.

Third, if we achieve “full compliance,” then we’ll be on even stronger legal ground. Perhaps…or perhaps not.

It is often assumed that compliance with accessibility guidelines is not enforced by any authoritative body. Therefore, organizations usually do not provide their users or customers with enough breaks between the content on their website. Organizations also fail to consider whether they have included color contrast in their website so that people can read their text properly.

Do you think accessibility lawsuits are a real risk? #

In the last twenty years, there have been many disability discrimination lawsuits. In fact, one could argue that there has been a lot of litigation going on in the past year specifically! Recently, the pace of litigation has increased and impacted prominent brands including Target, Amazon, Bank of America, and Five Guys.The Americans with Disabilities Act (1990) is intended not only to prohibit discrimination against individuals with disabilities but also to ensure that they have the same rights and opportunities as everyone else. While legal action often ensures those rights, we think it’s important for website owners and designers to bake accessibility into their projects from the beginning to prevent possibly devastating consequences down the line.

Why is having an accessibility statement important? #

Accessibility is an important aspect of any site. It is important for your business to be accessible to everyone. An Accessibility Statement can explain how accessible the website is, what areas are lacking in terms of accessibility and what plans are made to improve those spots.Although it may seem counter-intuitive, advertising certain accessibility weaknesses that are still present on a given site can be a powerful gesture of transparency. Moreover, when you talk about your commitment to inclusivity, the information serves as a good example of where you are in terms of implementing accessible technologies.

What is the future of a website in a world with great accessibility? #

Technology evolves at a fast pace. Each year brings about new advances that are able to solve certain problems, but for others, it creates even more problems to consider. Hence, the need to revisit the guidelines of WCAG 2.1 every so often in order to ensure that we’re not leaving out any information that will be relevant in addressing problems related to mobile devices such as tablets and smartphones. Accessibility challenges will include:

  • Sequencing content so that important elements appear without needing to scroll.
  • Supporting both landscape and portrait orientations.
  • Clearly indicating which elements are interactive.
  • Changing interactive elements to activate on ‘mouse up’ and ‘touch end’ events (rather than ‘mouse down’ and ‘touch start’ events).

Technology presents many new accessibility challenges and will continue to do so. The Web Content Accessibility Guidelines (WCAG) 3.0 is currently under development and adds standards for handling the Internet of Things (IoT), which includes devices such as:

  • Appliances
  • Small screens
  • 3D Touch & Pressure
  • Cars
  • TVs
  • Wearables

With the heightened awareness, ongoing education, and the use of helpful innovations such as the ADAWidgetPro, we can create a web that works for everyone! The most important step is the first step. If you already pursue accessibility, keep going. If you’re just getting started, well, just get started. We can get there together, one step at a time, and with your help and support and through everything we all can do I believe anything we put our minds to we could eliminate negativity in our lives altogether because we already got so many positives things to share and be aware of so I’m so excited for this future ahead of us.

Appendix A: Brief overview of WCAG #

1.1 Provide text alternatives #

Provide equivalent alternative text for all non-text content (images, etc.).

1.2 Provide alternatives to audio and video. #

At the lower level (A), provide transcripts or captions as alternatives to audio content for hearing impaired users.At higher levels (AAA), provide captioning for live audio and sign language interpretation for prerecorded audio for hearing-impaired users.At the lower level (A), provide text or audio descriptions of visual content within the video for visually impaired users.At higher levels (AA, AAA), provide an alternative soundtrack with extended audio description for visually-impaired users.

1.3 Provide adaptable content and functionality #

At the lower level (A), help visually-impaired users by providing alternative means of communicating important information conveyed by visual formatting (bold, color, bullets, etc.). Also, sequence information carefully for those who take it in linearly.At higher levels (AA and AAA), program form fields to clearly identify purpose and program regions, buttons, and links with supplementary instructions or descriptions to communicate their purpose.

1.4 Make content easily distinguishable regardless of ability or disability #

At the lower levels (A and AA), do not rely on color alone to convey important information. Do not automatically play audio without providing an easy means to pause or reduce volume. Set adequate contrast between text and background colors (4.5:1) and adequate contrast between other adjacent colors (3:1). Use adequate text spacing for easy reading. Avoid relying on mouse hover for displaying or hiding important content like menus. Employ responsive design or other techniques to allow zooming into 200% without loss of functionality and without requiring scrolling. Avoid using graphics of text (or, at least, providing equivalent alternative text).At the highest level (AAA), use higher contrast between text and background (7:1). Avoid background audio altogether (or leave it at a very low volume). Avoid long lines of text and full justification (alignment). Completely avoid using images of text.Note: The UserWay widget can be installed on any site to enable many of these solutions such that users can control them and without requiring permanent code changes to the site.

2.1 Allow keyboard navigation and operation #

At the lower level (A), make basic and critical functionality operable using only a keyboard with no keyboard traps (where users are unable to escape a given situation without using a mouse or touchscreen).At a higher level (AAA), make all functionality operable using only a keyboard.

2.2 Provide adequate time #

At the lower level (A), if time limits are an issue, make them reasonable. If timeouts are an issue, warn users beforehand. Allow pausing, hiding, and stopping any blinking, scrolling, or auto-updating content.At the highest level (AAA), allow users should stop interruptions, retain data entered after re-authenticating in a security timeout situation, and warn users about any data loss in the case of timeout.

2.3 Avoid blinking content and allow user control of motion content #

At low levels (A), avoid rapidly blinking content (or avoid blinking content altogether) for users with photo epilepsy or other seizure disorders.At higher levels (AAA), allow users to initiate and stop all motion content (video, animations, etc.).

2.4 Provide ways to help users navigate, find content and determine where they are #

At the lowest level (A), provide high-quality page titles and link text for visually impaired users. Ensure that tabbing through a page follows a logical and meaningful sequence for keyboard users. For keyboard and visually-impaired users, provide a means (like skip links) to skip over repetitive content on each page like banners, menus, etc.At the middle level (AA), provide a visual indication of where the focus is located for keyboard users who tab through pages. For visually impaired users, provide high-quality headings. Provide an accessible search mechanism or a site map so that users have multiple options for finding a given page within a site in addition to the main navigation (menu, typically).At the highest level (AAA), provide breadcrumbs so that users can retain their bearings within the site. Also, provide high-quality section headings.

2.5 Allow multiple input and operation methods #

For some users, using a mouse or touchscreen is not possible. At the lower level (A), provide alternate means of performing functions in addition to mouse- or touchscreen-oriented gestures like clicking, dragging, pinching, two-finger swipe, etc. Program controls to operate on ‘mouse up’ and ‘touch end’ events (rather than ‘mouse down’ and ‘touch start’ events) and offer alternative mechanisms for motion-actuated processes.At the highest level (AAA), offer target sizes of adequate size and allow all functionality to be performed via non-mouse and non-touchscreen methods like external keyboards with tablets.

2.6 Make web pages appear and operate in predictable ways #

At the lowest level (A), avoid actions that automatically trigger when an element receives focus, like submitting a form or launching a new window (among others) and instead forewarn users and allow them to initiate such actions. Make interactive content predictable by forewarning users if entering data will trigger changes to the content (e.g., typing a phone number area code will automatically advance focus to the next field).At the medium level (AA), make navigation that occurs on multiple (or all) pages consistent and identify elements that share the same functionality consistently.At the highest level (AAA), all actions like submitting forms, launching windows, advancing to the next field, etc., are initiated by the user (or automatic behavior can be turned off).

2.7 Input Assistance: Help users avoid and correct mistakes #

At the lowest level (A), identify errors in forms and other interactive content and describe the error in the text. Provide labels or instructions when user input is required.At the higher levels (AA, AAA), if suggestions to remedy errors are available to any users, provide them in text for all users. Offer context-sensitive help. Take extra care to prevent errors before non-reversible actions, especially if legal or financial consequences are involved — offering “review and submit” confirmations before final submission serves as one powerful example.

2.8 Compatible: Maximize compatibility with current and future user agents, including assistive technologies #

At the lowest level (A), use standards-based markup with complete tags, correct nesting, no duplicate attributes, and unique IDs. Give interactive components correct names and roles; states, properties, and roles can be changed by the user and such changes are reported to assistive technologies.At a higher level (AA), status messages are made available to assistive technologies.Compatible: Maximize compatibility with current and future user agents, including assistive technologiesAt the lowest level (A), use standards-based markup with complete tags, correct nesting, no duplicate attributes, and unique IDs. Give interactive components correct names and roles; states, properties, and roles can be changed by the user and such changes are reported to assistive technologies.At a higher level (AA), status messages are made available to assistive technologies.