The Quest for the Website Accessibility Grail
How I tried to make my website accessible to everyone.
Tagged with: accessibility, programming, web
Published on and last updated on
One of the key requirements that I set for the redesign of my website is accessibility. For me, accessibility means to enable as many people as possible to use my website without any additional effort for them. Information that I provide should be available to everyone. I don’t want to erect any barriers that could prevent people from accessing my content.
But how can a website be made accessible for people with and without disabilities, mobile users, or people with slow internet connections? In the following, I will explain how I tried to make my website accessible to everyone.
Without structure we are barbarians
Using the right HTML elements provides a good base for an accessible website. The markup language HTML offers a multitude of elements or tags that can be used to express the meaning of the content of a website, but the right elements must be used in the right context. Often HTML elements are misused. For example, a web application could use <a> elements to trigger JavaScript handlers. Which would be wrong because the meaning of an <a> element is it to introduce a hyperlink. The element that should be used instead is a <button> element.
Not only does HTML give meaning to the content it also structures the page. The following code block shows a simplified version of the markup of the <body> element of this page.
<body>
<header></header>
<main></main>
<footer></footer>
</body>Can you guess where the sections of this page are in the markup? The <header> element contains the main navigation of the page wrapped in <nav> tags. Inside of the <main> element is the article you are currently reading. This element contains the primary content of a page and an HTML document may only contain one <main> element that is not hidden. The <footer> contains some links to additional information about me and the website. If you look inside the <main> element you will find that it is structured similarly to the <body> element. In the following code block, you find a simplified structure of the <main> element.
<main>
<article>
<header></header>
<div></div>
<footer></footer>
</article>
</main>Here it is visible that the <main> content contains an <article> element. An <article> element is used for self-contained content that can be reused on its own. An <article> element can have a <header> and a <footer> just like the <body> element. The difference is that these elements have to be related to the enclosing <article> element. Assistive technologies like screen readers can make use of those elements to allow visitors easier navigation on the site.
Those points only scratch the surface of what has to be thought of when structuring the HTML of an accessible website. An excellent source of information is this MDN article about accessible HTML.
Paint me a picture with words
Another important practice is it to provide textual descriptions of images. This can be done by setting alt attributes on <img> elements.
For example, the image above is represented in the HTML with the following code.
<img src="./src/images/rooster.jpg" alt="Johann the rooster" />There is an alt attribute that describes what can be seen in the image. This description can be used by assistive technology so that information provided by images is not lost. But alt attributes can also be useful for people with slow network connections that have disabled the loading of images. Useful tips about the usage of the alt attribute can be found in this article about the alternate text attribute from The A11Y Project.
Grow into your design
A practical approach to designing a website is to start from mobile screen sizes and to work your way up. This so-called mobile-first approach ensures that a website works on the device with the most limitations in terms of screen size and network bandwidth first. As the development continues and the screen size grows features can be added if necessary. This design process feels more natural than going form big screen sizes to small screens and often leads to better results than other approaches.
In terms of accessibility this means that the page uses an appropriate font size for smaller displays, links or buttons are big enough to be tapped on a touchscreen, and the site is also usable with a slow network connection.
Be fast
It is a privilege to have access to a fast network connection and a website should not be built in a way that renders it useless when accessed via a slower connection.
In my quest to make my website small I abstained from using big CSS frameworks or custom fonts. Additionally, I decided to generate this website statically which reduces the response time of the server.
Look at the colors
A website without colors can look pretty dull. But colors should not be chosen carelessly. There are many forms of color blindness and colors should be chosen to still be distinguishable from each other for people with such disabilities. Another requirement for colors is their contrast. The contrast between background and foreground must be high enough so the can be distinguished from each other.
Question everything
Because there are a lot of things to consider it is important to test if there are no errors that negatively influence the accessibility of the website. To do so there are automatic tools that can identify accessibility problems like WAVE, the Accessibility Inspector built into the Firefox developer tools, or Google Lighthouse. Unfortunately, not everything can be tested automatically and it is a good practice to do some additional manual testing. For example try to navigate the website with the keyboard only, use a screen reader to explore the website, surf around with a throttled network connection, and check if everything works on an older smartphone.
So in the spirit of questioning everything please let me know if you find any accessibility issues or other problems with the redesign of my website. Hopefully this article helped you to lear a bit more about web accessibility and don’t forget to apply the things you learned to websites you build yourself.