Blogs
Jason Smith
Chief User Experience Officer

Website Accessibility Checklist: 10 Steps Towards Website Compliance

Mar 11, 2018
By: Jason Smith

Delivering an engaging, speedy, and omnichannel customer experience is the goal of every ambitious brand. But too often, the dimension of accessibility is left out.

Not only is this a problem from an ethical perspective — after all, one in five Americans have a disability — but also, a lax approach to website accessibility is a potentially costly legal transgression.

What Is Website Compliance?

According to the World Wide Web Consortium (W3C), “the Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability...When websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.”

An accessible website or application gives your audience the power to consume your content, use your services, or purchase your products, no matter their device or disability.

It means that your website can conform to the needs of the disadvantaged, leaving nobody excluded from experiencing your digital offering. Examples of the accessibility challenges that a web user might face include: visually impaired, hearing impaired, color blindness, fine motor skill challenges, and reading difficulties.

Website Accessibility: Legislations That May Apply To You

There is no unified web accessibility law in the United States. However, in 1994, the World Wide Web Consortium (W3C) developed the Web Accessibility Initiative (WAI), which created a code of conduct for making web content accessible to those with disabilities or impairments. Shortly thereafter, a set of guidelines known as the Web Content Accessibility Guidelines (WCAG) was developed, which would go on to serve as the foundation for future legislation supporting improved access to web properties for individuals with disabilities.

The following legislations make up the bulk of the United States’ approach to accessibility on the web.

Section 508 (1998)

Section 508 applies to federal agencies and state or local entities that receive funding from the federal government. The law dictates that organizations under the purview of Section 508 must give any employees or members of the public who have recognized disabilities access to online information that is equal to that which other visitors, who are unaffected by disabilities, currently have.

Americans With Disabilities Act (1990)

The Americans with Disabilities Act (ADA) is a civil rights law that prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public.

It requires that organizations covered under its jurisdiction must provide “reasonable accommodations” to employees with disabilities. Accessibility requirements on a variety of publicly accessible properties such as transportation resources, commercial facilities, and knowledge sources have also been enacted, and are most relevant when discussing compliance with accessibility case law. It’s therefore worth noting that the ADA has also been cited in lawsuits taken against companies from customers, not just employees.

HIPAA: (1996)

HIPAA compliance is an industry buzzword that is used liberally, but often misunderstood when it comes to the true implications for corporate entities. The HIPAA act is often referred to in case law as the standard for fair and equitable treatment in the private sector.

The W3C’s Web Content Accessibility Guidelines (WCAG)

With legislations like Section 508, ADA, and HIPAA in play, it may be difficult to ascertain where the W3C’s web content accessibility guidelines fit in. But upon closer inspection, the link between the law and the WCAG becomes clear.

For example, when a lawsuit was brought against the University of California Berkeley1 in August 2016, the Department of Justice decided that university was in violation of the ADA because their YouTube channel’s videos didn’t include captions for hearing impaired visitors. To point the institution in the right direction, the Department of Justice urged the university to seek out and follow the guidelines set out by the W3C’s WCAG guidelines2.

With that ruling in mind, organizations should pay close attention to the information laid out by the W3C, and follow their guidance when it comes to website accessibility.

Website Compliance Checklist

The W3C has extensive guidelines on how to attain basic (and recommended) web content accessibility. We’ve taken out some of the most actionable fundamentals below, so if your website can comply with the checklist below, you’re well on your way to delivering an accessible customer experience.

1. Screen-reader Compatible Web Pages

Web pages must be readable by electronic “screen readers” — which are devices commonly used by the visually impaired to surf the internet.

2. Alt-tagged Images

Images must have “alt tags” (a type of metadata) which will help visually-impaired users to identify the image via text or via a screen reader. Search engine optimizers will know of alt-tags as a way to optimize images for ranking high in ‘Google Images’.

3. Alt-tagged Tables

If you’re using tables on any web pages, they must also have alt-tags — similar to those used with images — to help explain each column via text. The user’s screen-reader will then read that text aloud, describing the contents of the table.   

4. Automatic Scripting

Any scripted display usage of image mapping should be accompanied by textual alternatives.

5. Style Sheet Independence

Your web pages shouldn’t need a stylesheet to display in a way that is understandable. They should be readable to screen readers, most of which cannot load style sheets.

6. Accessible Forms

Web forms should be usable even without a mouse, and each field should be labeled.

7. Text Links to Plugins

If your website requires a specific plugin to work correctly, you should present the link to that plugin in text form.  

8. Inclusive Color Schemes

Your website should not contain any colors or color combinations that are either integral to the correct usage of your website, or which may confuse those with color blindness in any way pertaining to your website, products or services.

9. Keyboard-friendly Browsing

Your website shouldn’t be reliant on the usage of a mouse or touchpad. Users who wish to navigate using only keyboard keys should be able to do so.

10. Harmless Website Design

Your website should not serve images or videos that can cause seizures.

5 Simple Ways to Make Your Website More Accessible

If you’re on your way to building a more accessible website, here are some steps you can take to make your website more accessible.

Step 1:  Use Heading Tags

Users who are visually impaired, have low literacy skills or have another form of disability may have difficulties scrolling through websites. These users typically employ screen readers or other tools to read the website content for them.

Screen readers use heading tags (<h1>, <h2>, etc.) to navigate and prioritize the content. The strategic use of heading tags will not only make the site more easily manageable by screen readers but it will also make it more optimized for search engines.

The strategic use of heading tags means that the tags should be applied by the structure of the content. For instance, the <h1> tag should only be used on the page’s main header and <h2> should be used for subheaders.

Step 2: Use ALT Text for Images

Screen readers can also read the text in the <ALT> tags in embedded image files. These tags usually contain a description of any images, infographics, or other non-text information on the page. The more descriptive the image, the better for the user.

For instance, if an online clothing store has an image of a dress, a descriptive ALT tag text should contain the dress size, color, pattern, design, the name of designer and fabric used.

Without the text in the ALT tag, the screen reader would just read the image’s file name letter-by-letter, which can distract the listener and provide a poor experience.

If the image is embedded in the middle of the text, the ALT text should be written in a way where it does not interrupt the flow of the rest of the content.

The ALT tag can benefit your SEO rankings as well, so the benefits of this step is two-fold.

Step 3: Use Proper HTML Structure

While some features can add some visual variety to websites, they could potentially compromise any attempts to make the site more accessible. For instance, removing the underline from hyperlinks can confuse users with visual impairments as to whether the link text is intended to be a link, or just more content text.

Another example is the use of HTML tables. For decades, developers have used tables as a layout tool, allowing them to place content in specific areas on the page. Screen readers often can’t tell the difference between a table used for layout purposes and a table used to display tabular data. Developers who work with accessibility in mind should use standard HTML tables as data organizing tools, rather than as layout grids.

Step 4: Make Forms Accessible

The typical objective of a business website is to convert visitors into customers. This conversion can be as simple as receiving a request for additional information, or as extensive as receiving and fulfilling an order, complete with payment information. In order for a business website to be effective at converting a visitor with special needs into a customer, the forms that enable those conversions should be designed for those visitors in mind.

Methods such as grouping each type of information, labeling each form field, and keeping the required number of fields to a minimum can all help users navigate the submission forms and ensure that they enter accurate information, while the recipient gets the data they need to assist the customer.

Step 5: Choose a CMS That Supports Accessibility

Some firms may not have the resources to custom-tailor their websites for a wider audience. These firms may lack either a full-time development team, or the funds to hire professional developers to create their websites. In these instances, the firm could select a content management system (CMS) software, like dotCMS, to help them develop and maintain their content.

The Enterprise Edition of dotCMS—an open source Java CMS—customers get a Java implementation of Achecker. AChecker is a PHP open source Web accessibility evaluation tool used to review the accessibility of Web pages based on a variety of international accessibility guidelines. This implementation is available in the WYSIWYG and can be run as part of the content editing process.

When editing or creating content, dotCMS users can click on the Accessibility Checkmark to run the checker. This will produce a report of all accessibility problems for your selected guidelines. The report identifies 3 types of problems

  1. Known problems: These are problems that have been identified with certainty as accessibility barriers. You must modify your page to fix these problems;
  2. Likely problems: These are problems that have been identified as probable barriers, but require a human to make a decision. You will likely need to modify your page to fix these problems;

Potential problems: These are problems that A Checker cannot identify, that require a human decision. You may have to modify your page for these problems, but in many cases, you will just need to confirm that the problem described is not present.

There Is No One-Size-Fits-All Policy

While most websites are made up of similar elements and customer journeys, every website and application is unique. That means you can’t just apply a one-size-fits-all accessibility campaign to your web presence and expect to comply with the legislations that apply to your organization.  

But with that being said, the 10 steps listed above will certainly help you on your way to a establishing a holistic website accessibility campaign.

----

1ADA (2016), Case Against University of Berkeley
2SearchEngineJournal (2017), ADA Compliance

Filed Under:

webinar

Digital Accessibility Beyond Pure Compliance

Join our webinar to learn how new technologies and smart UI design can improve digital experiences for everyone.

Watch On-Demand

Recommended Reading

Headless CMS vs Hybrid CMS: How dotCMS Goes Beyond Headless

What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?

Exploring TimeMachine: How dotCMS Handles Content Versioning

With dotCMS, tools like TimeMachine and Workflow Management help enterprises control content versioning, content edits, user permissions, workflows and more.

Digital Ambition Requires Ambitious Technology

When it comes to the content foundation of a digital experience platform, critical capabilities are reasonably straightforward. There are only four, really - since security, scalability and containeri...