Thoughts on accessibility in personal web

This month’s IndieWeb Carnival is hosted by orchids on the topic of accessibility in small web:

Learning everything about accessibility is not a realistic goal, but making a consistent effort to make your Websites more inclusive is. Regardless of whether you're working on a personal Website with flashing gifs and numerous graphics, or a sterile professional Website, each project might have its own unique usability problems that need to be solved, and the first step in addressing those is understanding that you don't know everything, while taking your best crack at learning about your users' disabilities.

Accessibility is a topic close to my heart and I’ve been learning about it over the past few years. I’m still a long way from being an expert and this website has its own issues but I aim to improve things a little by little as I learn more.

Here is a collection of thoughts that the theme sparked in me when I was thinking of the small web sites that I’ve been building.

Offering multiple ways to read my content

On a desktop, the view on an individual blog post is quite busy. There’s the post itself but also a sidebar with links to various other posts in my blog and other people’s blogs. I like that interconnectedness and helping readers find other things to read as well. But I realise it can be bit much for some. There are a few options available.

Most mainstream browsers offer a reading mode that offers a distraction free way to enjoy my blog posts. If you’re browsing this on a Firefox, you should see a reading mode icon at the end of the URL bar. This hides all the extra elements on the page and only shows the main content of the blog post and uses only browser’s own stylesheet. This is a great option for when you want or need a more focused experience.

Alternatively, one can subscribe to my blog via RSS and use tools that work best for them in reading my writing. I share the entire post in the RSS feed so one can read my blog without ever entering my website after they have subscribed to the feed.

If someone wants to read my blog posts on paper while enjoying a hot cocoa, sitting in their favourite reading nook, they can print out my blog posts. I have done custom CSS styling for blog post prints. I hide all the excess (header, footer, sidebar, hero image, newsletter promotion), make the URLs visible inside parenthesis after each link.

The UX of HTML

For a developer of small web sites, the easiest way to have a good, solid starting point for accessibility is to use semantic HTML - or follow the UX of HTML as Vasilis van Gemert framed it in his great blog post.

Semantic HTML means using the correct HTML elements/tags for the right use cases. The native elements are best supported by browsers and assistive technology tools and they work in a way the users are familiar with.

As The Rule of Least Power suggests, I think it’s a good aim to build things with the least powerful technology that can achieve it.

When designing computer systems, one is often faced with a choice between using a more or less powerful language for publishing information, for expressing constraints, or for solving some problem. This finding explores tradeoffs relating the choice of language to reusability of information. The "Rule of Least Power" suggests choosing the least powerful language suitable for a given purpose.

Relying on standards does a lot of heavy lifting here in the personal web. Using the correct HTML elements leads to less work trying to patch the accessibility back in with Javascript for example.

A pet peeve of mine is using the right heading levels. I don’t know if it’s HTML/CSS or Microsoft Word that got us into the habit of using a heading level that looks the way that matches what we want to see rather than styling it separately but it’s very common.

People browsing the website with assistive technologies like a screen reader will end up confused with inconsistent heading levels.

Respecting user preferences

Browsers offer users a few ways to communicate their preferences that websites can then respect or not.

A user can tell their browser they prefer a dark mode of the website and this can be read programmatically with prefers-color-scheme in Javascript and CSS. So if your site has both light and dark themes, you can make it so that the user is automatically provided the version they prefer.

Another one, that orchirds also talks a bit in their blog post, is prefers-reduced-motion which communicates if the user prefers (or in many cases, needs) to have an experience where there’s not fast moving animations and other moving pieces on the site to have a decent browsing experience. To accomdate their needs, the website can turn off animations when the user has selected that preference.

This way, you don’t have to completely turn everything off but you can be mindful of your readers’ needs.

Alternative texts on images

I strive to have a good alt text on the images I have on this site and whenever I share images in social media.

One tech hack that I have to help make sure I don’t forget writing them is to have a custom CSS rule (using Stylus browser extension) that is active on localhost addresses and adds an orange outline on any element that is missing an alt text:

img:not([alt]), img[alt=""] {
  outline: 2px solid orange;
}

This way, when I’m previewing my blog posts or new pages in the site in development mode, I see all the missing ones. This does not guarantee that they are good but at least it helps me spot the ones that are completely missing.

It also highlights those that have an empty alt text. An empty alt text can be a valid one so they are not all incorrect but since I rely on tooling to render my HTML for blog posts, I want the safeguard to notice them if that starts accidentally happening. I can then ignore the ones that I know should have an empty alt text.

Personal site as a platform for learning

For a lot of us, personal websites are a great enabler in learning. Matthias Ott writes about the topic in a way that I agree on:

Building things for your own site is so worthwhile because you are allowed to make mistakes and learn without pressure. If it doesn’t work today, well, maybe it’ll work tomorrow. It doesn’t matter.

Another aspect is that there’s nobody else prioritizing your work. You get to choose what new features or improvements you work on in your own platform. If you learned about a new web API or accessibility feature, you can implement it on your site and keep learning.

Accessibility is never done and finished. So I keep an open mind towards learning new things and making small improvements to make web more accessible to everyone.