Missing These Ten Areas Puts Your Website at Risk
Inaccessible websites and applications not only reduce your opportunity to reach a growing segment of the population—they put your organization at legal risk.
We’ve written this accessibility checklist to help you better understand the fundamental categories that make online content easier to navigate, use, and understand by individuals with disabilities. Many of these categories are often overlooked when developing online content.
A full-scale web accessibility audit that uses both automated and manual testing is still the best way to gauge accessibility of already built sites, but if you’re building from the ground up, or want to instill accessibility practices across your organization, this is a good place to start.
If any of these areas are neglected, portions of your client and stakeholder communities will be unable to perceive or easily interact with your articles and blogs, forms, transaction platforms, multimedia, menus, and more—essentially discriminating against that population.
However, when your organization addresses these areas during website development, not only do you help reduce your exposure to litigation, you make significant strides in creating an environment that individuals with visual, hearing, mobility, and cognitive disabilities can navigate and use.
Digital Accessibility Checklist: 10 Critical Elements to Evaluate for Website Accessibility
Download the checklist for easy reference (PDF Document)
Digital accessibility enables those who are blind or have low vision, are deaf or hard of hearing, or have mobility or cognitive challenges to access online or network content, including websites, online training, electronic documents, audio and video, and software or mobile applications. Accessible content works with assistive devices (such as alternative keyboards, screen readers, trackballs and joysticks, mouth sticks, and sip-and-puff systems) used by many with impairments. It also allows these devices, web browsers, and operating systems to interpret and describe content and page structure.
Just as curb cuts, aisle widths, and other physical elements provide equal access in a physical environment, digital accessibility elements empower users with disabilities to independently navigate, browse, use, and otherwise interact with content in digital formats and environments. This accessibility checklist is a plain language outline of ten critical website elements that should be carefully evaluated when determining whether or not your digital content is accessible.
1. Navigation
Page and site navigation can get complex. However, here are two key elements of accessible pages.
- Logical, tab-through reading order – Many people with disabilities navigate using only a keyboard, often using the tab key to move through a page. In a properly structured site, tabbing proceeds in a logical order from the address bar, to menus, across form fields and links, and to other content areas in a predictable, understandable manner. This enables keyboard-only users to move through a page and a site in a logical, intuitive way, regardless of whether or not they can see the screen, and allows screen reader users to receive content that is intended for them in a sequence that preserves meaning.
- Finding content – When a website contains multiple pages, a feature or mechanism to find and navigate to these pages should be provided. Examples of this are site maps or search functionalities. This will give users multiple ways to find the content they are looking for in a way that best suits their needs.
- Landmarks — Special labels included in a site’s code provide indicators for moving around a page, just as physical landmarks provide indicators on how to orient within a physical space. For example, a label for a page’s navigation menu allows screen readers to identify and call out that landmark. With this information, screen reader users can access the menu quickly without having to listen to all page text on the site. Without it, users may struggle to understand how to access information and otherwise move around the site.
2. Content Structure
Like an outline, a well-structured page conveys relationships between different content areas. While a visual assessment may interpret larger, bolder text to be more important or more overarching than smaller, regular text, properly structured websites and documents use logically named “levels” of text to show relationships between different areas of content. Sighted users often scan headings for either navigation or a quick summary; properly structured pages provide similar information to screen readers, without vision-dependent cues.
- Titles – Each page has a clear title, and no two pages share the same title. A title will appear in the page’s “tab” within the browser, above the web address bar.
- Headings – Headings proceed in a logical order. Sections containing content are formatted by using heading style designations (e.g., “Heading 1” or “H1”) rather than simply affecting the visual appearance of the text (e.g., Arial 18 pt bold). Secondary and subsequent sections, by logically ordered subheading (“Heading 2” or “H2” styles, then “Heading 3” or “H3” styles, etc.). Headings should meaningfully describe the content that they head. Heading elements should not be used to style text.
- Lists – Bulleted and numbered lists are identified as such rather than as simply indented text with a decorative symbol or typed number. This helps identify the list as a whole with individual list items, conveying to the user the number of items in the list.
- Tables – Tables typically come in two forms: data tables and layout tables. Data tables should be marked up in a way that defines column and/or row headers. Layout tables are generally discouraged, as advances in web design have provided improved ways to render content, but are not forbidden. If using a table to layout content, it is important that content makes sense when linearized (that is, cells read from left to right, up to down).
3. Hyperlinks
Hyperlinks are one of the most fundamental elements of web design and one of the most critical elements to present clearly. Sighted users will often “scan” hyperlinks throughout a page to see what other related information is available. Users of assistive devices commonly “scan” for or extract identifiable hyperlinks as a list rather than read them exclusively within context.
- Readability — Hyperlink addresses, sometimes made up of long strings of numbers and symbols, can be arduous to listen to when read aloud. For this reason, hyperlinks should be identified using common language rather than only listing the web address.
- Clarity — Screen readers often navigate from link to link, or otherwise read hyperlinks pulled out of context, so multiple “click here” or “read more” links on a page do little to inform the user of where he or she will end up if they click the link.
- Distinctiveness – When placed within a paragraph or other body of text (as opposed to a menu), links should be clearly and visibly identifiable. This means that they need to clearly contrast with surrounding text and use some attribute other than color (underline, bold or italics, etc.) to distinguish them from non-linking text.
4. Text
Visual impairments can range from various forms of color blindness (affecting 8% of the US male population and .5% of the US female population), near sightedness, contrast issues, or other visual deficiencies, to complete loss of vision. Text that is too small, too faint, or otherwise too hard to see prevents users with limited vision from reading the text that is in front of them.
- Font size – Users should be able to enlarge or diminish, and respace text size. Text should also translate well on various devices (mobile, tablet, desktop).
- Color contrast – Proper color contrast between text and its background can help alleviate visual challenges caused by aging eyes, color blindness, and other low-vision conditions. Internationally recognized Web Content Accessibility Guidelines (WCAG 2.0) specify color contrast ratios for both small and large text. These ratios apply to text on a page and to graphics with text elements.
- Color not used exclusively to convey meaning – If a color is used to convey something meaningful, another option must be provided to convey that same information. Otherwise, someone with color blindness or color contrast challenges may not pick up on the distinction between, for instance, highlighted and unhighlighted text (e.g., highlighted text was imperceivable to blind law students in one case against BarBri, a legal exam prep course developer), or text that is in a different color (e.g., “the text in red indicates a violation.”).
5. Images
Graphics are non-text elements and are therefore, unreadable by default. This is true even if the image contains text. For instance, a “Home” button is essentially just an image file of a certain width and height at a certain location. Its relevancy or intention is indistinguishable from a company logo, a photo, a graph, or a decorative border.
- Alternative text for images – Alternative text (“alt text”) or a long description of images provides equal access to information provided graphically. This can be critical for explanatory images and flowcharts, schematics or graphs, maps, menu buttons, or illustrative presentations like infographics, comic strips, or slide images. The lack of alternative text was a key element cited in the landmark class action lawsuit against Target: CNET, August 28, 2008, “Target Settles With Blind Patrons Over Site Accessibility,”
- Decorative images — Conversely, non-informative or redundant images need not be conveyed, and in fact, should be skipped out of courtesy.
- Color not used exclusively to convey meaning – As with text, if a color is used to convey something meaningful (e.g., “The green location marker indicates the starting point, while the red one marks the finish line.”), another option must be provided to convey that same information. Otherwise, someone with color blindness or color contrast challenges may not pick up on the distinctions.
- Color Contrast – Non-text content (such as icons, graphs, images, and even form fields) should provide sufficient color contrast with its background, just as text should. This will help low vision users to clearly see and understand the image, and know where the boundaries of actionable objects are. The requirement per WCAG 2.1 AA is a contrast ratio of no less than 3:1.
- Images of text – Images of text should be avoided, as the text within the image cannot be resized with the rest of the text on the page, and may appear blurry or distorted when using zoom techniques. There are exceptions to this: if the image of text is part of a logo, screenshot or photograph, or presented with other information (such as being part of a chart or graph).
6. Forms
Forms, whether online or within documents, incorporate many, and sometimes all, the elements above. Inaccessible forms were one of the elements mentioned in a 2015 class action complaint against Reebok and its online store: “These barriers are pervasive and include, but are not limited to: the lack of alt-text on graphics, inaccessible forms, the lack of adequate prompting and labeling; the denial of keyboard access; and the requirement that transactions be performed solely with a mouse.”
- Navigation – A user should be able to intuitively and logically tab through the document, generally from input field to input field.
- Accessible instructions – All form fields and controls (e.g., checkboxes or drop-down menus) should be clearly labeled, indicating what information or action is appropriate. Many document forms are often “locked” to prevent editing of non-field content. This can mean that instructions related to the form fields are inaccessible to a screen reader, leaving the user to wonder what information is being requested. Instructions should not rely on color, shapes, or spatial information (for example: “Answer the questions to the right”).
- Timing – Some online forms may include a time-out feature (for instance, for security purposes). Some individuals may require more time than has been allotted, and will need to be able to extend their time with the form.
7. Documents and Other Files
The elements of navigation, content structure, hyperlinks, text, images, and forms ALL apply to the various files that may also be posted online.
In National Federation of the Blind, et al. v. Scribd, Inc., the settlement required that then-currently uploaded files would be made accessible upon request, allowing for certain limitations. However, all new documents uploaded to the Scribd website would be made accessible before posting. Bank of America also addressed accessibility in its many online documents.
Common file types are listed below, though this list is not exhaustive. NOTE: Microsoft Office products and Adobe Acrobat Professional have built-in accessibility checkers to help determine and remediate accessibility, though some files may still require manual checking of some elements.
- Word processing documents (e.g., WordPerfect, Word) – Word processing documents most closely mimic web pages, but presentations and spreadsheets should also be logically navigated with proper headings and clear hyperlinks. Form fields should be properly labeled, and images should have alternative text as appropriate.
- Portable Document Format (PDF) – Printed text files are often scanned into a PDF file format. In this case, text within a file needs to be verified as actual text, possibly undergoing conversion by optical character recognition (OCR) software. Otherwise, a screen reader may see the content as an image instead of something readable. Documents should also be properly structured and tagged to facilitate navigation throughout the document. In Andres Gomez v. Hugo Boss Retail Inc., one of the barriers mentioned to using the Hugo Boss website was improperly coded PDF attachments.
- Presentations (e.g., PowerPoint, Prezi) – Presentations often combine elements similar to those used in web pages and word processing documents. Presentations often include multimedia elements such as audio, video, and animations. These are discussed in more depth in the next section.
- Spreadsheets (e.g., Excel) – Often containing merged cells, calculations, and graphs, spreadsheets require diligent attention to labeling of table headers and rows. While basic principles apply, the level of effort required to produce an accessible spreadsheet varies with the complexity of the spreadsheet.
8. Multimedia
Alternatives should be provided to provide equal access to those who may not easily perceive one or another facet of multimedia content. An example of an agreement addressing the lack of alternatives for video content is available from the National Association of the Deaf: “NAD and VUDU Reach Agreement To Caption 100%.”
Special care may be needed in choosing what multimedia software is used to provide content. This is because compatibility with screen readers and other assistive devices can vary.
- Video – For those in the Deaf community or who have some level of hearing loss, captioning and transcripts can provide content, either synchronized with the video delivery or as a separate text file to be read separately. There may also be times when conveying video content by text also means describing sound effects or other audio within the video in addition to relaying the actual text spoken. For visually impaired or blind individuals, an audio description of what is happening on screen may also be helpful or needed. Videos should also contain an audio description (when synchronized with audio) to provide the visual information of the video to users who may not be able to see the video itself.
- Audio – A text version of any audio file or alert should be provided.
- Movement – Animations, alerts, and other on-screen movement can cause problematic distraction for those with some cognitive disabilities. For this reason, a non-animated version or options for pausing or negating the animation should be provided.
9. Adaptability
Accessible design enables any needed personalization, such as changes to color schemes, screen contrast, delivery speed, or font sizes. This is possible by adhering to web design best practices. Additional considerations may be needed for creating content and environments that translate well and that are operable on different devices, such as among desktops, laptops, tablets, and smartphones.
10. Policies, Processes, and Maintenance
Once an accessible digital environment, such as a website or mobile app has been released, organizations will need to establish practices that ensure that accessibility is ongoing. Many times, this commitment is articulated in a readily available accessibility statement. Accessibility statements may be required in response to an accessibility settlement.
Publicly Available Content Should Provide Equal Access to All
The Americans with Disabilities Act states that “No individual shall be discriminated against on the basis of disability in the full and equal enjoyment of the goods, services, facilities, privileges, advantages, or accommodations of any place of public accommodation.” With technology so heavily integrated into daily living, online environments are increasingly being perceived or interpreted as places of public accommodation.
Organizations that do not incorporate accessibility best practices within their websites, documents, and other digital media—whether knowingly or unknowingly—exclude people with disabilities from independently using that organization’s products and services. It follows that owners of digital content such as websites, software, mobile apps, or documents may want to consider evaluating their materials and products and weigh the risks of potential litigation.
Covering the items in this digital accessibility checklist above can be a great start.
Editor’s Acknowledgements: A previous version of this article was originally published in the July 2016 issue of Mealey’s™ Litigation Report: Cyber Tech & E-Commerce as “Digital Accessibility And Unlawful Discrimination Checklist: Common Pitfalls That Expose Website Owners To ADA Equal Access Litigation” and has been updated here with some modifications. Contributions made by Vivian Cullipher and Soheil Varamini. Mealey’s is a subscription-based information provider and a division of LexisNexis. ©2016
Why is This Digital Accessibility Checklist Needed?
One in four people in the United States has a disability (CDC: Disability Impacts All of Us, Infographic).
Even though modern lifestyles have become more and more dependent on access to digital content, much of today’s internet- and network-hosted content can be difficult or virtually impossible for many in the disabled community to understand, use, or enjoy:
- Image details are often hidden from the blind or visually impaired.
- Navigation can be difficult or impossible for those who can’t view menu architecture or button text, or who struggle with fine motor movement and mobility.
- Multi-media impact may be diminished or absent for those who can enjoy only portions of a presentation because of visual, auditory, mobility, or cognitive limitations.
- Web and document forms and controls are often unusable impacting the ability to purchase products, apply for employment, or otherwise submit information.
- Motion, timeouts, and other dynamics can startle, distract, or in some cases, trigger seizures for those with cognitive impairments, or alienate anyone who may need more time to read and understand the content.
The need for website accessibility impacts practically anyone with an online presence, whether within education, corporations or government agencies. Even those in the legal field have had complaints filed against them.
While businesses are familiar with Americans with Disabilities Act (ADA) Title III requirements that enable those with disabilities to access and navigate brick-and-mortar stores and offices, many are getting caught off guard with how the expectations of access are being applied to websites. After all, internet dependence is growing as daily functions—scheduling appointments, making purchases, banking, applying for jobs, and more—increasingly move online and to mobile apps.
Organizations can follow widely recognized standards to make their content accessible to and usable by everyone, including individuals with visual, auditory, mobility, or cognitive disabilities. But for teams which are completely new to accessibility, a simple accessibility checklist that lays out some of the most common elements affected by these standards can be a great starting point.
Accessibility for the disabled is clearly an area of regulatory and legal focus. The digital accessibility checklist below gives a high-level introduction to what your legal counsel, IT teams, and accessibility auditors should look for in determining litigation vulnerability. Many, if not all, of these principles apply to not only public websites, but internal employee websites, digital documents, and software applications, including mobile apps.
Need Help? Contact Us to Make Sure Your Websites and Applications Comply with Accessibility Standards
Accessible design empowers users with disabilities to independently navigate, browse, use, and otherwise interact with your digital content. Microassist can work with you to develop new website and apps, remediate your current online content, and make sure all related files (documents, PDFs, multimedia) are also accessible.
Contact our accessibility team to learn more.
Accessibility in the News Newsletter (Free)
Stay on top of developments in website, elearning, and application accessibility with our free weekly newsletter, Accessibility in the News. View archives here, and subscribe below!
Subscribe to Accessibility in the News
Stay informed! Get your weekly update on digital accessibility standards, private and public sector trends, litigation, events, and more.