Web Accessibility Showcase

This page demonstrates and explains some basic accessibility concepts that are important when developing websites with accessibility in mind. However, it is important to keep in mind that many of the more complex accessibility issues arise when working with JavaScript-heavy sites, like single page applications. This page is pretty simple, with no framework, static HTML and only a little bit of Javascript. A future evolution of this page will also include a React application in which more complex accessibility concepts, such as focus management during client side routing, tab trapping, live regions and storing the active element during page transitions, can be demonstrated.

Accessibility with HTML markup

Creating an accessible web page with only pure HTML is not very hard, as HTML is pretty accessible out of the gate. Still, there are some things to be aware of to ensure a good experience for different users. First, use semantic HTML elements. A semantic HTML element is one that communicates some kind of meaning. Using semantic HTML elements helps assistive technologies to interpret the site. For example, heading elements, like h1, h2, h3 and so on, provide a clear hierarchy of the page's contents. Using headings over something more generic like a div communicates the purpose of the element directly in the HTML, instead of relying on its visual appearance through styling, which is something that e.g. screen reader tools ignore.

Street crossing with cut curbs
Photo by Timur M on Unsplash

Another important thing is to add alternative text for images that describes them. This way, people with poor or no vision or other users of screen reader tools do not miss any information or context that images may convey. To illustrate this, let's talk about the Curb Cut Effect. What it means is that when you make something accessible for people with disabilities, it often also improves the experience for many other people. The name comes from when sidewalks were modified to include ramps down to the street level, which was initially done to accomodate wheelchair users but was then found to improve passage for all pedestrians. This article includes an image showing a street crossing with this kind of curb cut, with appropriate alternative text to clarify the content and purpose of the image.

Accessible forms

Let's have a look at how accessibility can be considered when working with forms.

The form above has been created in order to showcase a number of accessibility aspects with HTML forms. For a simple form like this one, as long as you use HTML5 elements properly, you will reach a decent level of accessibility, without even the need for specific accessibility attributes or added JavaScript.

These are some things to point out about the form: