Section 2 - Accessibility in practice


What are the fundamentals of web accessibility?

Scroll down icon

Scroll down

Accessibility standards, such as WCAG, can seem daunting as they are technical in nature and can seem complex to accessibility newcomers. Fortunately, some of the most important inclusive web practices are simple to implement through your CMS. Address these areas and you can enhance the usability of your website and provide a solid framework to build additional accessibility improvements upon:

Icon with a big letter T and text lines

Page titles

Icon with H1 written

Headings

Icon representing a graphic

Graphics

Icon of a link

Links

Icon of a table

Tables and forms

Icon of a semantic markup

Semantic (defined markup)

It can be difficult to know where to start if you have not implemented web accessibility before. Where do you begin and what do you prioritize first? To get started, we recommend you implement these six website accessibility best practices.

1. Give your web pages meaningful titles

The first thing a screen reader encounters on a web page is the page title. The title is an important element on a page for screen reader users because it informs them of the content they can expect to find on the page. By giving your web pages meaningful titles, you are in conformance with WCAG success criterion 2.4.2.

As an added benefit, descriptive page titles improve your page’s SEO. Use an automated tool that quickly identifies pages with titles that are either missing, too long, or too short.

2. Provide support for users who cannot use a computer mouse

Create a "skip to" link or “bypass block” on all your web pages as the first element on the page. It will allow users to skip over areas of content that repeat on every page, such as a header or global menu. By using “skip to” links, keyboard users can jump directly to specific areas of content on the page, such as the navigation, main content, or footer. Otherwise, keyboard users must navigate sequentially through the page, left to right, touching upon each element as they move forward and backward. This can be tedious and frustrating, causing them to leave your site quickly and affecting your site’s bounce rate negatively. You can hide the skip-to link visually on the page if you like, as long as it’s still visible when it receives focus. (e.g. highlighted when a user presses the “Tab” button). By helping users who cannot use a computer mouse, you are in conformance with WCAG success criterion 2.4.1.

3. Add alt text to relevant images

Go through your main page and template pages and assess whether your images should have a description, known as alternative text, or more commonly as alt text. The code for adding alternative text (alt=””) must always be present for any image. However, if the image is decorative, then the alt text description within the quotation marks can be left empty. If the image conveys information that you would not know without seeing the image, then this information should be written in the alt text description. If the image is a link, then describe the destination where the link takes you. By adding alternative texts to your images, you are conforming with an essential part of WCAG success criterion 1.1.1.

4. Ensure accessible website multimedia

Multimedia content on your website such as videos, PDF files, audio, and infographics are engaging and shareable, but can quickly become a barrier to people with disabilities if you do not offer equal access to the content. According to the WCAG standard, movies, audio clips, and animations must come with accessible options, like transcripts, captions, or audio descriptions, readily available. Another thing to watch for is that your multimedia content does not become a keyboard trap, meaning that those who use the keyboard to navigate your website are unable to navigate away from your video, for example. By doing these things you conform with WCAG success criteria 1.2, 1.2.1, 1.2.2, and 1.2.4.

5. Ensure adequate color contrast

It may feel that choices for color, branding, and visual elements are challenging when it comes to digital accessibility. However, it is possible to have a beautiful, colorful website that is accessible to a range of different types of vision conditions. A good starting point is to use a color contrast checker to ensure there is adequate color contrast between the text and background of your website. Integrate this into your brand and style guidelines and you are conforming with WCAG success criterion 1.4.3.

6. Don’t neglect the mobile web experience

One of the main principles of accessibility optimization is to ensure your website is platform compatible but also technology-agnostic, which means that it is operable and usable on multiple platforms. For example, make sure your website is responsive, so it adapts to different devices and size while maintaining a good user experience. By ensuring an adaptable website that does not lose information or structure on mobile devices, you are conforming with WCAG success criterion 1.3.

Addressing cognitive web accessibility

By following good design, content, and coding practices, you can improve the user experience for many people with diverse cognitive abilities and disabilities. When considering visual styles as well as content organization, for example, you improve the user experience for people with cognitive disabilities by:

  • Using proper formatting for headings and lists, for example, using H1 for a header rather than just making it bold
  • Adding more white space into your design
  • “Chunking” content into shorter, more manageable sections to enable skimming
  • Simplify forms by breaking them into separate, sequential steps
  • Providing a logical reading order for web pages and documents
  • Being consistent with the locations of page elements and the use of fonts and colors
  • Offering keyboard-only access for people navigating web pages and documents without a mouse
  • Offering content in multiple formats, such as written transcripts for a podcast