An accessible internet for everyone

As founder of the World Wide Web and big name behind the very first Web site (info.cern.ch), Sir Tim Berners-Lee is considered the figurehead of the Internet.

Now, more than 30 years later, Berners-Lee is still involved in the development of the Internet as director of the World Wide Web Consortium (W3C). When he speaks, people listen. This makes the following quote extra strong: "The web is for everyone and collectively we hold the power to change it. It won't be easy. But if we dream a little and work a lot, we can get the web we want." A quote like that hits home, because just like him, we find that Web accessibility is not a given.

Disabilities, big or small, cause all of us to use the World Wide Web differently. People with visual impairments rely on a screen reader to access Web pages. Many Web sites are not built to deal with such a tool, making information inaccessible to some.

Temporary disabilities also have heavy consequences, by the way: With a broken wrist, your mouse becomes useless. If your light is broken, text may be less readable. Accessibility is consequently both indispensable for many visitors and useful for everyone.

To make digital channels accessible and usable for everyone, the W3C has created a set of guidelines: the Web Content Accessibility Guidelines (WCAG). By applying these guidelines and by considering all users, we contribute to an inclusive Internet. But first we need to get to know them thoroughly. With a group of experienced developers, we attended the digital accessibility training, given by AnySurfer, to refresh our knowledge.

Links spin the World Wide Web. Without links, every page is an island. Therefore, it is important to make them meaningful and to distinguish them visually from plain text. A meaningful link describes the purpose of the link. For example, screen reader users navigate through a link list. And a list that consists of: 'click here', 'download' or 'read more' does not help the user. In contrast, 'download our white paper' or 'read more about Drupal 10' does.

Keyboard usage

Put your mouse aside for a moment and try navigating the Internet. You'll quickly find that you can't control every Web site with the keyboard. Where you can, use the tab key to move through the Web site and see which element is selected. Any element that can be operated with the mouse should also work with a keyboard. Menus and navigation usually require extra attention. To make those as accessible as possible, we as developers use native HTML elements as much as possible, include clear focus styles and we pay attention to making sure the tab order is logical.

Semantics

Building a page with descriptive HTML elements and proper hierarchy in header levels is crucial for assistive technologies such as screen readers. Use semantic elements only as intented: mark headings  as <H1>, <H2> etc. Use <ul> for lists and only put main naviation blocks in <nav>. <span> en <div> elements have no structural or semantic roles to play. HTML5 landmarks such as <header>, <footer> and <main> then again give structure and added value to the page.

Accessibility tree

Each browser builds an accessibility tree for itself from the code. Supporting technologies retrieve it to pre-read and announce information. In the accessibility tree, each component has a role, a name, a state and properties. Semantic HTML elements fill out the accessibility tree, but as developers, we can add or adjust missing semantics with Accessible Rich Internet Applications attributes (ARIA). For example, we can assign a label to the navigation or provide the status of a button. ARIA attributes only belong on components with a semantic role. Wrong or redundant ARIA attributes do not help accessibility.

Color and contrast

Many people are color blind. They sometimes have a hard time distinguishing between letters and background. Therefore, as Web devs, we need to make sure we have enough contrast in interactive elements and especially in text. We should also  be mindful not to rely solely on color to convey information. A typical example: a calendar where only color is used to indicate when an amusement park is busy. Here a combination of color and text is a better choice.

Forms

A form is one of the key elements for interacting with your visitor. A clear descriptive label above each field, providing as much autocomplete as possible, and correct, descriptive error messages can already go a long way toward making forms accessible. Of course, forms should also be fully keyboard-accessible, and color contrast in form fields is important.

Images and icons

You can divide images and icons into two groups: do they play a role in understanding the broader context or are they merely decorative? If the former, images should have an alt text describing what is seen in the image. Decorative images can be added via CSS or may have an empty alt text. Images in a teaser or large hero images on a detail page are usually purely decorative and thus should always have an empty alt tag. This way, they do not communicate unnecessary information to users of assistive tools such as screen readers.

We also learned that it is best for an icon to have a text label. Each icon should either have a clear label or be taken out of the accessibility tree by housing the icon in an element with the ARIA attribute aria-hidden="true". In turn, we can very easily hide the label visually in Drupal by giving that element the class "visually-hidden". This gives icons the context they need.

Distractions and movement

It is very important not to build content that may cause sensory overstimulation or concentration problems. Lots of flickering or videos that start playing automatically are best avoided.

Control should always be given to the user. A user should be able to turn off animations. Videos should have a play or pause button. We also handle pop-ups with care and moderation. With the exception of a cookie banner, we better not show a pop-up when the page loads. A pop-up can be shown after an action by the visitor, but should not just pop up unexpectedly.

Accessibility is an iterative process. Through research, empathy and good old fashioned experience, we learn more about inclusivity and accessible communication. That's why WCAG training is indispensable from time to time. This is how we always build modern and accessible websites for our clients.

• WCAG requirements (success criteria) and techniques
• Richtlijnen voor Toegankelijkheid van Webcontent (Dutch translation)
• ARIA Authoring Practices Guide (APG)
• Inclusive Components (Accessible web interfaces)