Website Accessibility

The US Census found that, in 2010, 56.7 million – or 19 percent of the population – had a disability (US Census Bureau). That is a significant group that needs additional accommodations to use your business’ website in order to purchase your products or services. Making your website disability-friendly can expand your customer base and mitigate the possibility of expensive litigation. Website accessibility is a legitimate legal issue and the lack thereof could have consequences for businesses large and small.

Eleventh Circuit Decision

In a recent decision by the Eleventh Circuit Court of Appeals, websites must make the same accommodations for groups covered under Title III of the Americans with Disabilities Act (ADA). Several similar legal cases have been working through the appeals process with mixed outcomes, so this August 3rd decision is significant. It holds that

“[i]t appears that the website is a service that facilitates the use of Dunkin’ Donuts’ shops” and “the ADA is clear that whatever goods and services Dunkin’ Donuts offers as a part of its place of public accommodation, it cannot discriminate against people on the basis of a disability, even if those goods and services are intangible.” – Ogletree Deakins

This decision is significant for any business that has places of public accommodation because the risk of a website accessibility suite have increased. It is less likely that similar cases will be dismissed and may lead to an increase in the number of cases filed on this topic.

What can you do to protect your business?

The first thing you need to do is talk with your web designer about what they have done to make your website disability-friendly. This should be part of the scope of any web development process since it is becoming just as important as calls-to-action or SEO. If you design or maintain your website, then here are some helpful tips and tricks to make your website compliant with Title III.

  • Know the Audience – While you may not know anyone with a sensory, physical, or cognitive disability you can still anticipate their needs. Guides like this one, and others available on the web, can provide you with key insight into how someone with disabilities uses a website. Small businesses often lack the financial resources to launch a full-scale research project into web design for disabilities and it is nearly impossible to accommodate every disability, but by thinking about design in a way that maximizes the experience for those with disabilities you will probably find that you’ve made your website easier to use for everyone.
  • “Alt Text” – When you hover over an image on a website you may see words appear near your cursor. These are called “tags”. Screen Readers for individuals with a visual impairment read these tags out loud so the user knows what the image is. This website’s logo is a great example of something a screen reader would not be able to read without an alt tag.

  • Detailed Links – “Click Here” won’t translate with a screen reader without a more detailed description of where that link goes. Don’t say “Click Here to learn more about Office 365”, instead, say “Dato Technologies Blog has more information on Office 365″. Be sure to label links that open PDF files or other non-browser locations.
  • Underlined Links – Many websites have forgone the unerlined link in favor of color-differentiated links. It is recommended that you keep the underline as it helps color blind individuals clearly see links.
  • Buttons and CTAs – A practice that is discouraged – for SEO and accessibility purposes – but widely used are images as buttons or calls to action (CTA). It is best to create buttons with traditional text and not an image. CSS can style your buttons in just about any way that you want using <span> or <div> tags, so the use of button images is extraneous and depreciated. If you insist on using an image for a button or CTA you need to have a clear alt tag that says “Click Here to…”, otherwise screen readers will not recognize the very thing you want the user to click on.
  • Font Size and Style – Google Fonts has provided designers with an amazing array of fonts to choose from. While curvy and script-like fonts can be tempting, it is best to stick with the classics like Times New Roman and Helvetica. These are easy-to-read and should provide the most disability-friendly experience. Font size is also important and should be large enough to be easily readable. While you may be enticed by a sleek design with less than 12pt. font, it is advisable to keep fonts larger – even as large as 16pt. for paragraph text. This makes it easier for seniors and the disabled to read the content of your site. The same is true for links and subtitles. If you are concerned that your mobile experience may be hurt by larger fonts, then simply adjust your font size when users are browsing on smaller screens. This is done through the CSS with an @media tag.
  • Color Choice – Black text on a white background may seem mundane but it has worked for quite a while and continues to be the easiest format in which to read the text on a website. This does not mean that you cannot use expressive and eye-catching colors, but rather a container with a white background should encapsulate text. Red-green color deficiency is the most common form of color deficiency so using that font color can cause that content to be unreadable to 8% of the population. Below is an example of good color choice (white on black) and some less than optimal choices for a disability-friendly design.
Good & Bad Text Examples
Good & Bad Text Examples
  • Color Choice (cont.) – Using yellow, green, and blue close together can cause your content to be unreadable for color blind individuals.  Berkeley Web Access has a list of tools for determining the accessibility of your color choices.
  • Accessibility GuidesThe BBC website has a great example of what an accessibility guide should look like. Rather than forcing the design to accommodate every potential disability, this guide helps individuals cater the website to their needs through tools like text-enlargers and screen readers. If your website demands a certain look, then you could create a similar guide that still provides individuals with disabilities a great experience without infringing on the design.
  • Video – 87% of online marketers utilize video content and it is considered one of the best types of content when considering ROI (WordStream). Having a video on your website can increase your conversion rates so it is an excellent investment. In order to make your videos reach a wider audience and comply with Title III, content creators need to take a few simple steps to make their video content disability-friendly. The first is to take the time to add subtitles (Go to YouTube Help to learn how) and provide a transcript of your video.
  • Content Management System (CMS) – There are thousands of CMS tools available, including WordPress, Joomla, and Drupal. Many available themes will have notes on the accessibility of their theme. Choosing the right foundation can make a disability-friendly design much easier. If you are using a web designer and forgoing the CMS, then advanced planning should take place in order to design a website that is strategically positioned to be accessible.
  • Headings – When using WordPress’ text editor there is a drop down that allows you to format text as headings. This tool inserts the <h1> and <h2> tags into your content. Screen readers then use these tags when conveying your content verbally. These are also a critical element for Search Engine Optimization (SEO).
  • Forms, Inputs, and Labels – When designing forms you need to keep in mind how a screen reader interprets that information. Fields should be large enough to be easily clicked. Labels should be well-positioned, easy-to-read, and utilize the “for=” attribute. Avoid duplicate field labels. Ensure that the TAB button allows users to logically move through the form. Grouping similar fields (i.e. “Personal Information”) can help screen readers keep track of progress.
  • Avoid Tables – Tables used to be the gold standard in web design until CSS allowed designers to make <div> and <span> element design far more robust. Screen readers will read the number of columns and rows and work through the information in a non-visual way. If your content is in sequential order, then this can be confusing and undesirable.
  • Make dynamic content accessible – There are quite a few ways that dynamic content can add “umph” to your design. You have probably gone to a website that has a “Join our mailing list” pop up. Some screen readers will not “notice” when this content appears after the page has loaded. In addition, site visitors that only use keyboards may not be able to close the popup, essentially trapping them. ARIA (Accessible Rich Internet Applications) roles and alerts can be designed to accommodate these elements. ARIA is a set of attributes that define ways to make Web content and Web applications (especially those developed with Ajax, JavaScript and more recent web technologies like Bootstrap) more accessible to people with disabilities. With that being said, the first rule of ARIA is “Don’t use ARIA”. MDN Web Docs provides more information on ARIA, including tutorials and scripted widgets. The best practice is to ensure that dynamic content can be controlled by a keyboard, has subtitles or captions, and does not auto-play.

 

There are many