Website Accessibility Best Practices and Standards

In recent years, there have been a number of lawsuits and court cases regarding web accessibility. While physical venues have clearly defined regulations to adhere by, there has been no such official guides for websites. Seven years ago, the Department of Justice (DOJ) began laying down the foundations for just such a document, a process which was expected to come to fruition in 2018.

However, thanks to a January 30th Executive Order signed by President Trump, it is highly unlikely that the DOJ’s adoption of the Web Content Accessibility Guidelines (WCAG) will still be able to take place. In the meantime, accessibility lawsuits are expected to increase in number as website owners have a lack of official, governmental regulation on recommended practices.

Which is why we’ve decided to research what the best accessibility practices are, and provide you with the guidance being withheld from you.

What is Accessibility?

Accessibility means that no one is at a disadvantage when trying to make use of your facilities, whether these are your brick and mortar business venue (such as a store) or your website. This means that nobody is discriminated against when attempting to access these facilities. For the purpose of our discussion, we are focusing especially on discrimination against customers or users who have any disability. To do so is strictly prohibited, as per Title III of the Americans with Disabilities Act (ADA).

As explained in our recent article, Web Accessibility Lawsuits Expected to Increase Under Trump, accessibility with regards to websites refers to creating digital resources that people with disabilities are able to use. If you haven’t already read the article, we recommend that you take a moment to do so in order to understand the full implications of the EO mentioned in this post’s introduction.

Having an accessible website that does not put persons with disabilities at a disadvantage includes making allowances for vision, hearing, cognitive, physical, speech, and neurological impairments.

Users with and without any disabilities benefit from having a fully accessible web. Regardless of your target market, all web users and developers have diverse needs and preferences and have equal rights to accessing the resources that cater to these needs. By hosting an accessible online platform, you contribute to the creation of a truly accessible web, giving all users the ability to make use of online and digital resources in whichever way they want or need to.

There are many assistive technologies available on the market today, but if your website design inhibits or prohibits their use, then the users reliant on these tools are excluded from accessing your site.

Although there are no official, government-supported guidelines for the translation of ADA’s regulations from physical venue to online websites; there are a number of elementary things that all site owners and managers can do to improve the accessibility of your site. We’ve set out to create an accessible resource for all websites to use, so that we can all do our part in promoting web accessibility.

Universal Design

Universal design refers to a website standard that aims to combine accessibility standards with usability principles. A primary focus of universal design is to promote the user’s ability to learn, communicate, and share information online. The intent is to do make resources accessible regardless of a user’s personal learning and processing styles, as well as their physical characteristics (which includes any and all disabilities).

Universal design recognizes that users have a diverse set of needs when it comes to the initial design of your product or service. Eliminating barriers and improving the level of access for all users are fundamental values in universal design.

A website or web product/service that respects and adheres to these principles are:

• Respectful of the diversity of users’ needs and preferences by being flexible and adaptable to these requirements;

• Accessible via a range of technologies, including the platform being used—such as mobile versus desktop—and without excluding assistive technologies like screen readers;

• Designed cost-effectively. After all, redesigning a website to be more accessible is an expensive process.

The Gestalt Principles

Gestalt principles are widely revered as being highly translatable into accessibility standards. The German psychologists Kurt Koffka, Wolfgang Kohler, and Max Wertheimer developed the Gestalt theory in the early twentieth century. It is in opposition to the structuralist concepts, which separate wholes into their component parts. Gestalt is a complete structure in and of itself, and its components should be understood in relation to each other rather than in separation.

By having a basic understanding of the Gestalt components as they relate to document and website design will certainly aid the developers of such platforms to identify and create an effective, accessible resource.

The Gestalt Principles are as follows:

• Figure-Ground Segregation

• Closure

• Proximity

• Continuity

• Similarity

• Past Experience

• Symmetry (or Equilibrium)

Understanding the interconnectivity of these principles can be greatly enhanced by considering them in relation to the W3C guidelines. These recommendations have become the emerging legal standard with regards to website accessibility. In our recent post , we explained how the DOJ had been halted by President Trump’s January 30 EO in their attempt to establish the W3C regulations as a fully legal standard.

Principles of an Accessible Website

To help you get a true translation of the Gestalt principles as they pertain to website accessibility, we explore the principles of an accessible web in this section by breaking these principles down into seven similar categories.

Coordination and/or Harmonization: All of the activities in your business and on your website should be well-harmonized in order to guarantee accessibility. Your staff (including developers, content managers, support agents, et cetera) need to be empowered to create guidance, regulations, drafting and monitoring your website’s accessibility requirements as well as enforcing them, conducting research and usability testing, and supporting accessibility innovations. By educating and including all members of your community, you ensure that you are meeting your own standards for accessibility as well as those recommended by ADA and the W3C. When you include your users and affiliates in this process, you promote the creation of an accessible web across organizations.

Monitoring and Enforcement: Never expect users who have disabilities to be the ones to hold your website accountable for a design that is inaccessible to them. This often leads to lawsuits, as explained in our recent article. Instead, you should hold yourself and your team responsible for ensuring that your site is fully accessible to all users. If you have the capacity as a business to do so, delegate an enforcement department. It should be this team who are directly responsible for measuring your design against the recommended standards and to perform usability tests whenever a new design or section is integrated.

Leadership and Guidance: While every member of your team—from developers to online support staff—ought to be well educated in this regard, it is imperative that your departmental leaders are fully aware of all standards. Any and all issues with the accessibility of your site should be immediately brought to their attention, and efforts made to rectify them as quickly and efficiently as possible. Having a cross-departmental body that can stand as the leadership required in the form of an enforcement department (mentioned in the previous point) allows for better management and implementation. These are your accessibility champions and should be representational of every area of your business and website.

Considerations of Access: Don’t only rely on the ADA, W3C, and other online resources to develop your accessibility requirements. Make an effort to incorporate direct input from actual users and customers who have disabilities. Contact disabilities organizations in your area, whether they represent only one disability type or a wider spectrum. In the absence of official regulations, your company’s website accessibility standards should find their foundation in the experience, insight, and communication of those they are designed to assist. Remember to consider their needs, rather than solely on the assistive technologies available and any performance issues your site currently has. By performing usability tests that include users with various disabilities, you can learn how to avoid potential or arising issues rather than having to fix them later.

Technical Dimensions: Your website design should be developed and maintained according to clear technical standards. These should provide specific information on how elements are to be incorporated, as well as explain why these dimensions are being put into place (i.e. “who benefits”). By placing technical standards in place, you make it easier to set up and monitor a system for creating, testing, and maintaining accessibility. For example, if you introduce a new online software or resource, the design must not discriminate against users with any disability by making it more difficult for them to access and/or make use of this software or resource. In terms of accessibility, these technical dimensions should encompass all the elements of your website’s data, communication, and interaction.

Education and Research: As far as possible, you should strive to invest in opportunities to conduct research for a continual improvement of accessibility standards and technologies. Whether this means providing funding for firms and organizations concerned with developing new assistive technologies, sponsoring staff for usability training, or providing the resources required for usability testing is largely dependent on your company profile. Don’t feel you need to limit yourself to these three examples either: you should constantly be looking out for ways to improve accessibility in whatever way possible. For example, if you are unable to sponsor UX training for all relevant staff members, then make an effort to provide resources on best practice guides, textbooks, and any other instructional information. As you promote awareness within your organization, your staff will become more mindful of equal-opportunity accessibility’s importance not only to users with disabilities but for society as a whole—and themselves and part of the company.

Social Inclusion: For people with disabilities to truly be guaranteed an equal standing online, there should be no restrictions in place—including coding that prevents assistive technologies from functioning. Furthermore, we should all take every available opportunity to better educate not only ourselves but all of society on accessibility issues. In time, creating a more welcoming, less prohibitive environment for users with disabilities online has the potential to vastly improve the way they are seen, treated, and included not only online, but in the physical world as well.

Technical Standards for Accessibility Best Practices

WebAIM’s Principles of Accessible Design has laid out a thorough guide for technical standards in terms of defining the best accessibility practices. We’ve taken what we feel to be the twelve fundamental elements and listed them in this section.

While this is by no means an exhaustive list, it is a solid foundation that will vastly improve your website accessibility—even if you only stick to these twelve points. Almost all of them are incredibly simple to implement, and won’t impact your site’s overall look or feel in any major way. However, the difference these technical standards will make for your users who have disabilities will be huge, and in the right way.

Alternative Text

Also known as alt tags, alternative text gives users an understanding of what visual content (images in particular) are showing when they fail to load. Not only is this good for SEO, as they give website crawlers context, but they are hugely beneficial to accessibility for users who are blind or otherwise severely visually impaired. Such visitors typically rely on a screen reader to experience your online content. Make sure you have short, descriptive alt tags for all of your visual content. 

Appropriate Document Structure

Make use of headings and subheadings, and take advantage of the <h1>, <h2>, and <h3> (et cetera) tags to clearly define them. This is highly important for UX (usability experience) in general, as it allows readers to scan your content to catch the main points in a glance, as well as clearly defining and dividing separate sections of the page. In the same way, lists and other structural elements, such as tables, help to break up larger bodies of text, making them easier to read for users in general. This is especially important for users who have cognitive or learning disabilities, as it breaks text into “bite-sized” chunks that are much easier to read and understand. Furthermore, using proper document structure on your site assists with keyboard navigation, an important factor for the visually impaired who are unable to use a mouse.

Tables

Tables do fall under document structure, but warrant a separate point as well. Avoid confusing users by limiting your use of tables to display tabular data rather than for layout purposes. When using tables in your documents and online posts, make sure that the rows and columns have proper headings, as well as summary tags. Once again, these make comprehending the data provided easier for the visually impaired. Table headers are defined by the HTML tag <th>.

All Forms Should be Easy to Complete and Submit 

This is something that a lot of sites overlook. You should limit the number of fields required (especially for contact forms), as this immediately makes them easier to complete. Furthermore, visitors to your site are more likely to submit a completed form when they aren’t expected to fill out too many fields. So limiting the amount of information you want your users to submit doesn’t only make them immediately more accessible, but such forms are better optimized for SEO and have a higher capture rate.

When you do need to provide an online form, make sure the <label> tag is in use so that elements such as the text field, checkboxes, a dropdown list, and so on, can be recognized by users working with a screen reader. (Bonus tip: it isn’t only the visually impaired who make use of assistive technology like a screen reader. Users with dyslexia often use them too, as it makes receiving and processing the text much easier for them.) As far as possible, ensure that there are measures in place to make submission easier and to allow users to quickly recover from any errors.

iFrames

You may not have heard of them before, but iFrames are used to embed elements such as YouTube videos, Google Calendar, and so on. iFrame coding should always include a title, using the tag title=“Your Title”. 

Links

When you add links (internal or external) to your content, you should always strive to have the link text make sense when read by itself by using proper anchor text. For example, a link to the previous article should read “Previous Article” and have the hyperlink embedded. Never use phrases such as “click here” or “more” unless it’s absolutely unavoidable. If a link opens the new page in a new window, you should also indicate so by adding something like “(link opens a new window)” so that readers relying on a screen reader are fully aware of what is happening.

Caption and/or Transcript Media

If your page has an audio file or video embedded, then these elements should include a caption and/or (preferably “and”) a transcript. This allows for users with hearing impairments (being hard of hearing or fully deaf) to access information contained in the audio file or video.

Non-HTML Content

This includes PDF files, Adobe Flash content, Microsoft Word documents, and PowerPoint presentations. To make such content accessible, you can add a series of tags, which won’t affect the visual effect on-screen but will allow screen reader users to access the data contained. If you’re unable to make the content accessible, either provide an accessible alternative (clearly captioned as “screen reader friendly” or something similar) or consider using an HTML format instead.

Repetitive Elements

While you generally want to avoid including these in the first place, it is sometimes necessary to include repetitive elements such as a navigation section at the top of the page. If you do need to make use of such elements, you’ll need to give users a link that allows them to “skip to main content” (you can phrase it differently, of course, so long as the meaning is clear). Otherwise, screen readers will automatically render the repetitive elements as audio, which can be frustrating and time-consuming for users reliant on the assistive technology.

Don’t Rely on Color Alone

While color can be a wonderful means of visually conveying meaning, it automatically excludes the visually impaired (and this can include colorblind users) from fully experiencing the intention of your content. To make sure all visitors on your site are able to access the content properly, don’t rely on color alone when you want or need to convey meaning.

Clear Writing Style

Don’t use unnecessarily complex words or sentence structures when creating content. Your writing style should also include making use of proper document structure. Favor clear, easy to read fonts over decorative alternatives.

JavaScript

Any and all JavaScript event handlers that appear on your site are device independent, so that keyboard navigation is possible. You should also ensure that your pages are not JavaScript reliant.

Final Words

Web accessibility has become an important issue for website owners, site managers, designers, developers, and SEOs of late, and rightly so.

Using this article as a guide while we wait for an official regulations standard to be set will cover just about all your bases, but be sure to keep an eye out for updates in the future! Ensuring that your website is fully accessible for all users, and especially for those with any disabilities, will not only minimize your bounce rate but also provide a better environment for previously disadvantaged users to fully interact with others online.

Need some more help improving your site’s accessibility? We have an article on Accessibility Resources coming soon!