Website Accessibility 101

What is website compliance?

A website that is compliant follows the Web Content Accessibility Guidelines or WCAG for short. There are 3 major levels of compliance: A, AA, and AAA. We recommend consulting a legal advisor to determine what level of accessibility is required for your business but if you are unsure, AA is generally a safe bet. These guidelines are built around 4 main core principles:

• Perceivable: so people can see or hear the content
• Operable: so people can use the computer by typing or by voice
• Understandable: so people get clear and simple language
• Robust: so people can use different assistive technologies

How do I make a website accessible?

In order to ensure your website is inclusive for people with disabilities, you must start at the beginning of your website planning process. It will be easier, more effective, and a less expensive undertaking than applying website accessibility after the fact or as a separate project.

Step 1: Planning Your Website

Website accessibility really starts at the design phase. It is necessary to think about it from many perspectives and understand what needs you are designing for. Here are a few questions that will help you define the accessibility impact your website will have:

• What is the purpose of my website and what am I trying to communicate?
• Who are my target audiences and what is their technology preference? Am I being inclusive with these audiences?
• What are the target platforms, browsers, or operating systems that need to be considered?
• Consider information flow and hierarchy. How are people going to ultimately use the website and what information is most important?
• What level of ADA compliance does my website need to be?
• What assistive technologies need to be built into my website?
• Is there complex content that needs to be translated into a more universal language?

Having answers to these questions will be imperative as your team gets to work on website layout, design, and development. Which leads to the next step.

Step 2: Content and Design

When planning the content and design of your website, there are four main disability categories to consider: Visual (Blindness, low vision, color-blindness), Auditory (Deafness and hard of hearing), Motor (Inability to use a mouse or keyboard, limited motor control) and Cognitive (Learning disabilities, inability to process or focus on large amounts of information, language barriers.) Regardless of the level of compliance that your website needs to attain, there are some basic principles to follow in order to achieve an accessible and inclusive website.

Here is a list of some key principles for accessible design: (courtesy of webaim.org & WCAG)

• Color Contrast:
  • Text or buttons whose color is too close to the background color will be hard to read. All of us struggle with low-contrast text, so be sure there is enough contrast for all the text to be visible and easy to read.
  • All foreground and background elements, text, icons, and buttons should use a contrast ratio of 4.5:1. If you are unsure, here is a helpful color contrast checker.
• Writing:
  • In addition to correct spelling, grammar, and punctuation, it’s important to have content that is concise and simple such as short, easy-to-read sentences and well-structured page content.
• Hierarchy and Structure:
  • Make sure that your headings, paragraphs, lists, and other elements all provide meaning and structure.
  • Break up lots of text with headings and bulleted lists. Longer lines of text are also harder to read.
  • Proper heading format and starting off each web page with the most important information will help readers understand the order of the content.
• Font/Text:
  • The font choice needs to be readable with a 16 pt font or larger, depending on the font. Try to choose a simple font and consider thickness as well.
  • Font family, line height, and line length can also play a role.
• Alternative Text (Alt Text) for images and links:
  • Alt text allows you to label and describe your images so that screen-readers can read the description of the image(s) to sight-impaired users. Also, if browsers block those images, users can still get the gist.
• Links:
  • For the purpose of screen readers, links should make sense when read by themselves. Certain phrases such as, “Click here” should be avoided. Instead, use descriptive linking such as, “To get in contact with us, click here.”
• Caption and Transcribe Video/Audio:
  • Videos and audio files should have captions and a transcript so that people with auditory disabilities can understand your media content.
• Animations and Movement:
  • Yes, animations are very cool and there are ways to use them without being harmful to some viewers. However, be mindful that the use of flashes (more than 3 times a second) or intense motion effects can cause seizures, epilepsy, or dizziness for those with photo and motion-sensitivity.

Step 3: Accessible First Development

This step is to ensure the underlying code of your website is built to the WCAG guidelines. Good authoring tools such as code editors and content management systems help create accessible code. This is where you ensure that your site is coded so that a variety of assistive tools can be used, such as screen readers, on-screen keyboards, and screen magnifiers.

Spoiler alert! I am not a web developer so this is where my knowledge on this topic stops but it helps to have a good development team who understands accessible coding. Fortunately for me, Paradigm has a great in-house development team that I can rely on!

Step 4: Testing

This last step is arguably the most important. If you don’t test your accessibility efforts, how will you know it’s working? This includes device and browser testing, keyboard navigation tests, and if wanting to go the extra mile, usability testing with your target audience.

There are a variety of testing tools available online:

• WAVE - A website accessibility evaluation tool
• W3C - HTML validation, color contrast, and a lot of other stuff!
• WebAim - Color Contrast Checker
• Ax - Web accessibility Chrome plugin

Interested in learning more about website accessibility? Here are some additional sources:

• Accessibility for Everyone (Book) - This book is really useful and not only goes over the rules of accessibility but also how to think about Universal and Inclusive Design.
• WebAIM - Web Accessibility in Mind - This website offers training, tutorials, reporting tools, and other great resources.
• Web Content Accessibility Guidelines - (Currently on version 2.1)This is the most popular guidelines that people turn to. Here you will find the requirements for all 3 compliance levels (A, AA, AAA). It is not the law, but very helpful!
• Bureau of Internet Accessibility - Another source for audits, services, and tools.