The Keys to Access: How to Make Your Website More Accessible

Updated: Mar 30th 2021

As web accessibility becomes increasingly more important and scrutinized, it’s more essential than ever for website owners to get in compliance. Violating accessibility standards can potentially lead to legal problems, with website accessibility lawsuits increasing 177% from 2017 to 2018 and holding steady ever since. Even Beyonce isn’t immune from the dangers of non-compliance. 

But the threat of legal issues isn’t the only reason to adopt a more accessible website. The World Health Organization estimates that about 1 billion people worldwide experience some sort of disability, from chronic arthritis to vision problems, leaving one-sixth of the global audience shut out if a website is inaccessible. That’s a lot of potential revenue left on the table.

Accessibility now also plays a major role for a website’s SEO strategy. Many aspects of an accessible website dovetail with best design practices, things you should be doing anyway. Implementing best accessibility standards improves the user experience, making all visitors (and Google) more willing to place their trust in the website, and the business.

What is Accessibility?

In general terms, website accessibility simply means providing access to the most users possible. Typically the term refers to using design or functionality to enable those with disabilities to access your site. 

Accessibility involves multiple sensory channels, such as sight and sound, in addition to physical impairments. Web-specific accessibility standards are set by the Web Content Accessibility Guidelines (WCAG 2.1), published by the World Wide Web Consortium (W3C), the primary organization for setting internet-based standards. 

According to the WCAG, accessible sites need to be:

  • Operable – Site can be navigated using a keyboard, as well as a mouse
  • Perceivable – Site allows all users to easily find information
  • Dynamic – Site works with screen readers and other adaptive technologies for those with disabilities
  • Understandable – Site presents information clearly to all users

WebAIM’s WAVE Web Accessibility Evaluation Tool analyzes websites for accessibility standards and identifies areas of the site that can be improved. Here are some of the most common accessibility concerns that may arise.

Alt Text

Images help make your site more engaging and increase the overall user experience. However, images must be optimized so they can be accessed by those with disabilities, such as vision problems.

Alt-text, also known as alt-attributes, provide the visually impaired with words or phrases that describe an image on a website. For example, an image of the Parthenon might contain alt-text like: 

<img src = “Parthenon.png” alt = “Parthenon”>

Alt-text is used in conjunction with screen readers like JAWS and NVDA, which use alt-text to describe images as it scans a web page. You can, and should, download the NVDA screen reader for free in order to test functionality. WebAIM offers a handy guide for testing with NVDA.

Besides making your site more accessible to those with vision problems, alt text can also be helpful for search engines. Alt text provides better context for search engines to crawl your images, making it more likely your site shows up in an image search. Google’s Webmaster Guidelines even advises making sure that “title and alt tags are descriptive and accurate.” 

For decorative images with no specific purpose, you can use what’s called NULL alt-text or empty alt-text, which involves inputting an empty pair of quotation marks like this:

<img alt = “”>

Finally, images that link to another page should use alt text that describes where the visitor will be led. For example, if the site features an image of your logo that links to your home page, the alt text may look like this:

<img src = “digitaltrust.png” alt = “getdigitaltrust home”

Pro Tip: WebAIM’s WAVE Web Accessibility Evaluation Tool allows websites to perform an alt text audit. But be aware that WAVE only checks for the presence of alt text, not the quality of the attribute. Therefore, alt text still needs to be checked for descriptiveness and accuracy. 

Color Contrast

Many of us have been forced to escape websites because they were so hard to look at (remember Geocities?). Whether it’s blindingly bright colors or text that blends in with the background, these are all examples of bad color contrast.

Color contrast refers to the difference between the color in the foreground and the background. Aside from being an eyesore, sites with poor color contrast may also violate accessibility standards. 

The WCAG provides a comprehensive list of color contrast standards that includes the following contrast guidelines for basic text:

  • Normal Text – Normal text requires a contrast ratio of at least 4:5:1
  • Large Text – Large text with an 18-point or larger font requires a contrast ratio of 3:1
  • Bold Text – Bolded text 14-point or larger font requires a contrast ratio of 3:1

Pro Tip: Use WebAIM’s color contrast checker to input your foreground and background colors along with text. The tool calculates the site’s color contrast ratio, which can be checked against WCAG standards.

Keyboard Navigation

According to census data, 19.9 million people, or over 8% of the US population experience “difficulties lifting or grasping,” which may prohibit the use of a mouse. Keyboard navigation provides those nearly 20 million people with an alternative method to access web pages. 

Typically, users navigate with a keyboard using the Tab key to move from one element to another and the Enter key to click an interactive element. Therefore, every link and clickable element needs to be accessible through a keyboard.

Additionally, the current element in focus must be clearly highlighted, including drop-down menus and form submissions. Typically, most browsers include focus indicators, but you can customize the thickness of the border if necessary.

Pro Tip: To test your keyboard functionality, press Ctrl+Home to navigate to the top of the screen. Next, tab your way through the page to make sure the focus hits every interactive element. If you find that the site experiences difficulty with navigation, you may need to change your site’s source code to correct the problem. Visit WebAIM’s guide to keyboard navigation to learn more about particular issues.

ARIA

For some HTML elements, such as pop-up menus and check boxes, no native solution exists to allow keyboard support or other assistive technologies (AT). In these cases, Accessible Rich Internet Applications (ARIA) provides a set of attributes that serve as a bridge for those unable to access these particular areas of a website.

Some of the most common uses of ARIA include allowing assistive technologies to read alerts, check boxes, menu bars, and even drag-and-drop elements. ARIA can also provide additional descriptions for content like buttons and links. 

ARIA attributes are defined through roles, which can carry out a variety of functions based on their type. Types of roles include:

  • Abstract Roles – Function as the foundation for all additional roles and do not change. (Ex. Role = “Role Name”)
  • Document Structure Roles – Provide additional description for content sections within a page, typically used for buttons, toolbars, and links. (Ex. Role = “Toolbar”)
  • Landmark Roles – Identifies each section of content in a page in order to provide easier navigation. (Ex. Role = “Form”)

Pro Tip: Employing ARIA can be a somewhat complicated process and can backfire if not used correctly. In fact, W3, the organization that sets ARIA guidelines, states that, “No ARIA is better than bad ARIA.” But don’t let that scare you away, as ARIA remains an important way to allow the maximum number of users to access your site. The WAI-ARIA Authoring Practices guide breaks down each aspect of ARIA and provides examples and standards for each element. Refer to this guide frequently as you begin to use ARIA on your site. 

Captions For Audio and Video

By 2022, videos are expected to make up over 82% of all consumer internet traffic, according to Cisco. With video becoming a ubiquitous part of the web experience, captions have become a must. 

Captions provide a textual alternative for those who have trouble hearing or seeing. But the benefits extend beyond this need. Facebook reports that 85% of all videos are viewed without sound, while 80% of Americans who use captions do not have a hearing problem. 

Furthermore, captions can provide an SEO boost since search engines have more information to work with. While search engines can determine the general topic of a video or audio recording, it’s difficult to parse specific details if there’s no transcript. It pays off to make it as easy as possible for search engines to analyze the content of your site.

The Web Video Text Tracks Format (WebVTT) is the most common format for creating captions. In addition to generating captions and subtitles, WebTVV allows you to add descriptions and chapters for easy navigation. 

Pro Tip: Along with caption creation tools such as Amara, Facebook and Youtube also provide their own caption creators. However, these tools can be far from perfect, with WGAC stating that automatically generated captions fall outside of their standards. To bring your captions within WGAC standards, upload an accurate TXT file of your captions to Facebook and Youtube. After uploading your file, review your video to make sure sound cues line up accordingly. Be sure to also include sound effects and other additional elements that enhance the experience.

Accessible Trust

While staying up on accessibility standards protects websites from potential legal issues down the road, the practice also creates additional benefits for users and businesses. Accessible websites organically provide a better user experience, which naturally builds more trust among its visitors. After all, would you trust a website that you couldn’t properly access?
Due to outsize importance, accessibility plays a key factor in calculating your DigitalTrust trust score, which analyzes safety, transparency, usability, and reputation, the values important to internet users. Creating an accessible website already ensures that users can confidently navigate your site, thus promoting a feeling of trust in your services. Remember, trust is gained, not given, and it’s up to you to create the conditions for maximum digital trust.