Digital Accessibility Best Practices

There are many aspects to digital accessibility—and your actions must address both text and visual elements. While no web product can cater equally well to all users, by taking the basic image- and business listing-related steps below, derived from the Web Content Accessibility Guidelines (WCAG) created by the World Wide Web Consortium (W3C), you will improve the communication value of your website pages and the information in your business profiles for many users. Please note, however, it is vital that you evaluate WCAG guidelines in the context of your site’s purpose and content, and confirm that the digital accessibility measures you implement to meet the guidelines actually solve the problems of the disability audiences you target.

Be wary of any service or consulting firm that promises a quick and easy solution to digital accessibility. Implementing code in accordance with a technical accessibility check list to enable the site to pass an automated scanner test should never be your goal. The only way to truly ensure that your website is accessible is to conduct user testing—have users with disabilities review and comment on their site experience.

Best Practices for Text

Although it is not possible to remove all barriers for all users, by taking the text-related steps below, derived from the Web Content Accessibility Guidelines (WCAG) created by the World Wide Web Consortium (W3C), you will improve the usability of your web pages or applications for many users, especially those utilizing accessibility technology, such as a screen reader or screen magnifier.

Help Headlines Communicate in Digital Content

Be descriptive but use as few words as possible to convey the nature of the content that follows.

Employ a headline to introduce any new page section, content topic and layout.

Starting with the H1 headline, subsequent headlines in the same content piece should follow a continuous descending size formatting hierarchy.

Use the same headline to name like sections of content.

Make sure that the headline stands out from the background (run the text through a contrast checker to confirm that there is enough color contrast between the two).

Make Anchor Text for Links Meaningful

Users of assistive technology frequently use it to pull a list of the links on a web page, which removes them from their context. It is vital that any linked text still be able to communicate its purpose after being pulled—anchor words like ‘Learn More,’ for example, will have no significance.

Make sure the linked words communicate the nature of the information that the linked URL leads to.

Anchor text for different URLs should be unique. Do not reuse the copy for one URL for a different one on the same page.

Anchor text for any link this is referenced more than once on a page should remain the same.

Check the color contrast between linked words and the surrounding text.

In cases where there is no visible text for a linked graphic item, for example a button, use an aria-label attribute for it. This can be read by assistive technology so the user will know what it is and its purpose.

Choose Your Words Carefully

It’s vitally important that the text on your site be formulated to cater to a limited attention span—most users have a short one and those with disabilities likely face additional challenges. Writing for the web is different than writing for print, so it may feel like you are loosing some of your creative choices. The following practices accommodate short attention spans and deficits:

The number of words that appear on a page, the length of the sentences that compose the text and the number of syllables in the words used should all be at a 9th-grade reading level. In general, use as few words as possible to effectively communicate the information or message. Use graphics, highlighted sections or headlines to break up text passages.

Avoid jargon—all words should be understandable by someone who is not familiar with the page topic or terminology used in your industry.

Minimize word repetition from sentence to sentence.

Consistently use the same terms for site categories (make sure to synchronize navigation terms with URLs and page titles), products, places, professional titles and organizations, practices, key transactions, etc. If there are multiple content contributors to your site or app, create a user-centric lexicon to help them maintain term consistency.

While accessibility can appear as complicated and highly technical, just keep in mind that you may be helping someone become a new customer who wouldn’t have otherwise been able to access your information online. It might even be a competitive advantage.

Best Practices for Images

Web images are either used to convey information or for visual decoration, and the way they are handled to support accessibility depends on their purpose and context.  Key principles to keep in mind: Computers and screen readers are not able to analyze an image and determine what it presents, so it is essential to provide text that presents the content and function of the image—either as alt text using the alt attribute or as text placed near the image.

Decorative images include background and other photos, illustrations, icons or patterns that are added to enhance and balance the visual impact of a page. To make each accessible:

Add succinct and descriptive alt text that precisely conveys what the image depicts.

Use code to identify the image as decorative.

For any text that overlays a photo, make the text to background color contrast a minimum of 3.5:1 and base the contrast on the brightest part of the image.

Non-decorative images are graphs that communicate data and mood images that convey an impression or strike an atmosphere relating to the goal of the page.

For a mood image, write descriptive alt text that clearly expresses the impression it creates and the context of its use.

For a data visualization:

Write alt text that describes what the chart is in one sentence, including the type of chart used since users with limited vision may only see part of it. It should also include a link to a CSV or other machine-readable data format so those with a screen can tab through the data.

Give the chart a title that states the purpose of the graph and describes the information relationships in it.

Label the data directly alongside it rather than using a separate legend that a user has to match up with the data.

Adhere to WCAG readability guidelines specifying text sizes and contrast ratios between the text and the background.

Use white space between sections of a chart to increase legibility and help users distinguish between distinct parts.

PDFs

The best solution for a PDF is to extract the content and place it in a webpage. Learn more about how to make the content and function of various types of images be accessible to those with visual or certain cognitive disabilities.

While digital accessibility can seem like a challenging topic to understand, keep in mind that the effort is rooted in helping other people easily find information about your business, which should be a benefit to both of you.

In Part 3 of the series, you can learn more about how to describe the elements of your physical space online in order to make sure the details you’re providing are helpful to people with different needs.

Describe Physical Spaces & Public Accommodations

One thing many businesses fail to consider is how the information they share about their physical space might be useful to people who require specific accommodations. When considering how you describe your business online, whether it’s on your website, or in a business profile contained on a Destination Marketing Organization website, or a third-party platform like TripAdvisor or Yelp, there are some important details that can help people with different levels of ability.

Communicating Information About Your Physical Space

Businesses that operate a physical space should include clear, detailed communication about its attributes and accessibility in their digital business listings. Using your business profile that appears on a destination marketing organization website as well as features on your Google Business Profile to provide photos (taken from multiple perspectives) as well as brief descriptions of your property’s physical features and dimensions can go a long way toward helping users know about and plan for what they will confront during an in-person visit. Be sure to go beyond any pre-set accessibility checklist in your profiles—those do not typically provide users with enough detail to make proper decisions.

What Physical Space Features to Describe in a Digital Profile

While many buildings are legally required to abide by American Disability Act standards, designating a building as ADA compliant leaves many specifics undefined. To maximize the ability of users to evaluate conditions per their personal circumstances and prepare for an in-person visit, provide images taken from multiple perspectives as well as building specifications.

Details and specifications to consider documenting include but are not limited to step-free access; flat path to entrance; wide doorway; wide doorway and turn radius within bathroom; fixed grab bars for toilet; step-free outdoor seating; and accessible parking. It’s important to note the details precisely as they are. If, for example, a hallway is 6 feet wide but there is a bench obstructing a foot and a half of it, the measurement of that hallway should not be marked ‘6 feet’ but rather ‘4.5 feet.’

A hotel can help guests by providing the following structural amenities, and text and images that describe them in their listings (note that terms like ‘wide,’ ‘flat’ or ‘accessible’ do not go far enough—provide exact specifications and measurements to give the user information that can best help them): step-free access; wide doorway to the building; well-lit path to entrance; flat path to front door; hallways at least 36” wide and clear of obstructions; elevator dimensions; wide doorway to bedroom; accessible-height bed in bedroom; wide clearance to bed; step-free access to in-room bathroom; wide doorway to bathroom; bathtub with shower chair; roll-in shower with chair; wide clearance to shower and toilet; fixed grab bars for shower and toilet; and handheld shower head.