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.
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:
<label> elements for all fields associates a field with a label programmatically, which allows screen readers to read out the form properly.
By using appropriate input types the browser automatically provides some basic validation and custom controls when filling out the form with a mobile device, e.g. for email adresses.
Form field validation can be added by using HTML attributes such as required or minlength, which automatically validates the form on submission and points out errors.
Indicating the currently focused element is displayed by default by major browsers, but sometimes the styling for this gets turned off by developers because it is seen as ugly and not fitting with the design of the website. By using the relatively new :focus-visible pseudo class the browser uses some heuristics to determine if focus indication is needed (e.g. when mouse clicking on a button it is not needed, but when keyboard navigating to that button it is).
