Accessibility is one of the key components for creating a truly inclusive website. This means creating an environment in which any user can freely and easily access the content on your site, irrespective of the severity and nature of their disability. As content providers, not only do we need to be aware of the current standards on the market, but also how to implement them in our everyday work.

When designing and creating content, it is worth remembering there is an entire spectrum of accessibility needs. According to Web Content Accessibility Guidelines (WCAG) 2.0, which is recommended by the World Wide Web Consortium (W3C), there are four main areas of concern when designing websites: perceivability, operability, understandability, and robustness. Each of these comes with numerous solutions ranging from providing alternatives to facilitating actions, to sustaining good practices. Let’s take a closer look at some of them and see how they pan out in practice.

Perceivability

The first two guidelines ensure that any assistive tools designed to transform text into large print, braille, speech, symbols or simpler language work effectively. The first guideline of perceivability centers on the presentation of content. All content, which includes images, videos, audio files, interactive elements and any other objects the user can perceive should come in a variety of formats.

To achieve this, you can provide alternative text for your images or captions for audio and video files. You should also include links that explain the information contained in your non-text content. Elements specifically designed for one particular sense must be adequately described in another. Don’t forget to label elements of your content which only serve as decoration, help with formatting, or are invisible or used only as alternatives to text. Most mark-up languages offer the appropriate tags that allow such labeling. You can also use the Accessible Rich Internet Applications (ARIA) specification to label your content. Making sections of your content distinguishable doesn’t have to be limited to tags – you can use colour, contrast, and graphics in a way that improves readability, and clearly separates the foreground from the background.

An image from a 3di blog article with the alternative text feature also showing as the description of the image to make it more accessible.

The alternative text feature, here shown also as the description of the image, increases the accessibility and usability of the site.

Operability

This is making sure that user interface components are operable and that navigating the content is intuitive. You can increase the operability of your content by extending the number of input devices that users can choose to navigate between its sections. Moreover, a meaningful design behind the structure of your content helps your readers find their way around its various elements.

One sure way of increasing operability is integrating keyboard use. There are a number of pitfalls you should avoid when making your content keyboard accessible. Often, when navigating a page with just the keyboard, users can get stuck between two selected objects, such as a table and image. If that happens, they are unable to progress through the content. You must always allow users to easily select the desired object, and when the user moves onto the next element, it should proceed in a logical sequence. If your website contains interactive and time-sensitive components, provide a means of controlling them and make sure there is enough time for the user to react.

Finding content and determining where you are when progressing through it is equally as important. Titles and headings should always directly relate to the information they precede. When you repeat information, it’s a good idea to offer ways of skipping these sections. Descriptive links and references, site maps and a table of contents are also crucial for easy navigation. Breadcrumbs showing the reader their current location within the larger structure of the content are also useful.

In the work that 3di has done for Vodafone, some of the core features at the forefront of our design were all about easy and clear navigation that facilitates the findability of all information. Take a look at a simplified snapshot taken from the Vodafone information portal. You can clearly identify the breadcrumbs which show users where they are and the easily navigable side menu. Both of these are great for increasing your site’s accessibility.

An image from an information portal showing examples of breadcrumbs and a navigable side menu to increase accessibility.

1. Breadcrumbs showing where you currently are on the entire site. 2. A navigable side menu, helping to jump between closely related topics.

You can learn more about our solution to the challenges of creating a comprehensive portal for Vodafone right here.

3di’s Jakub Wiśniewski also sheds more light on the importance of the ease with which you can find information throughout your content in one of his articles. Read more about it in 3 things your product documentation says about your company.

In all of your designs, never include intensive flashing images or text. Not only can flashing images or text distract the user, but in the most extreme cases, they can induce seizures or other adverse physical reactions.

Understandability

The third guideline focuses on making information and the operation of the user interface understandable. Designing your content with readability, predictability, and input assistance in mind is a good way to achieve this.

So, what does “readability” specifically mean for your website? First of all, the easiest thing you can do is find out whether the default language is identified for the page. Next, make sure to tag any instances of content in other languages to separate them. Secondly, one of the possibilities to consider under this guideline is implementing definitions for unusual words (e.g. idioms or jargon) and abbreviations. Thirdly, you can also work on your content to be appropriate for people with different levels of reading ability. You can do this by providing simplified language versions or choosing to replace the text with other media. Finally, you can also help your audience by adding pronunciation mechanisms if a given word’s meaning depends on its pronunciation.

An image showing Wikipedia's simple English statement - using plain English makes your content more accessible!

The concept of Simple English as demonstrated by Wikipedia.

What helps with making your content more readable? Designing your content! Delve deep into user experiences and writing proper technical documentation thanks to our own Barbara Kujawska’s (UX) writing the docs.

The second factor, “predictability,” means your site should appear and operate in predictable ways. Make sure that focusing on one particular element doesn’t trigger any huge changes. These may include pop-up windows, switching focus to another item, or form submission. What’s more, the standard elements should not surprise the users with any extra features, and the site should have consistent navigation and identification of its elements. Any changes should happen when users consciously make them happen, or at least when a notice tells the users about them beforehand.

“Input Assistance,” is the last of the sub-guidelines of understandability. It deals with helping users avoid and correct mistakes. This means your website needs to clearly identify any mistakes and communicate them to the user. You can also help your users by including labels, instructions, or even examples within the forms they fill in. Spell-checking and extra-information mechanisms are always welcome. Another facet of input assistance concerns the user’s legal commitments or financial transactions. In these cases, the user needs to be certain they can undo, review, confirm, and correct their information before they finally send it.

Robustness

The last guideline is the shortest and turns the attention of content creators to make their site compatible on different devices. You should never force your users into a position where they can’t use their default browser or device. Making sure any assisting technologies can read and adapt the content is especially important. To prevent such a situation, the website needs to be constantly updated to the latest web standards. Additionally, any new components need to be as accessible as links, buttons, checkboxes, or any other standard HTML elements. Websites requiring JavaScript to work properly are examples of content with decreased accessibility.

An image showing a broken website layout with JavaScript turned on off, which decreases of accessibility.

This page has JavaScript turned off, which breaks the layout of the website…

The correctly displayed layout of the same page when JavaScript is back on.

…whereas this page displays it correctly. Only browsers and devices with JavaScript functionality will show this, making the site less accessible.

Never stop making your content ever more accessible

WCAG 2.0 may be intimidating at first glance but you can always start by focusing on its easier aspects. Even small changes can greatly enhance the accessibility of your website, Don’t be afraid of simplifying content – this can make your site more accessible for all users. The quicker and easier it is to read and comprehend your content, the better for all of your users. Make sure you also inform your audience about all the solutions you’ve already implemented. This makes them feel safe and catered for in your digital channels, which can be key to fostering good customer relationships.

Remember that your work is never done, and you need to constantly check and update your website. There is no such thing as perfect accessibility, which on its own is good news, as you don’t have to strive for it! Instead, think of ways in which you can increase the accessibility of your website now and in the future.