Designing web for accessibility

Accessibility means as many people as possible can easily read the content. In a narrower sense, this is specifically for people with some disabilities, such as blindness or deafness. In this post I mainly discuss the wider sense, which also includes the narrower sense, but as I don’t usually use technologies specifically for them, I can’t affirm how effective my approach can be.

Why is it important?

If you are a content creator, certainly you would want your content to reach as many people as possible. From an ethical point of view, it is unfair to people who cannot access your content because you have, to put it lightly, shitty design.

It is not only disabled people who benefits from accessibility. These people also benefit from it:

• people with poor internet access
• people who use old systems that don’t support newer browsers or is not powerful enough to handle your load
• people who use text browser like lynx or elinks
• people who cannot use mouse or keyboard for some reason
• people who use mobile devices (the most common case)

I have personally experienced difficulties in all the above five cases.

How to do it

Semantic HTML

Semantic HTML is HTML elements used with its intended purpose. Don’t use <div> for paragraphs. Don’t use <button> for links. Don’t use <links> for buttons.

That helps both screen readers and text browsers to render contents correctly.

Semantic HTML also helps SEO, which makes your content more findable¹.

Less is more

Less unnecessary media

Can this logo be done as a simple vector image instead of a full HD 8K png?² Can it be simply just text?³

Do you really need that image background? Large images are not only heavy, but it’s also distracting from the actual content.

Do you really need a cover image for each [blog] post? (I hate the fact that most WP themes promote this)

Of course, images and videos have their place, just don’t spam it and keep it mind that it prevents someone from loading your website.

Less JavaScript

Making your website dependent on JS is a big no-no. There is a reason “JS bad” is a thing.

There are people who block JS – text browsers and screen reader clearly don’t support it. There are a larger number of people who intentionally block JS, because of privacy concerns – JS can do nasty things fyi. Nonstandard JS API not supported by browser is even a more commonplace.

Less options in the navigation bar

Too much navigation is bad navigation. I have a terrible experience (two, actually) using only my keyboard for browsing the web with too much navigation at the top of the page. The first time because I was plugging a USB Drive and my desktop only have 2 slots, and the second time because I didn’t install a graphical interface and use a text browser on terminal instead.

Try it: search something on Google (the only time I recommend it, for science 😀), using a graphical browser. Now use only your keyboard to get to the first result (use arrow keys and Tab). Count how many time you have to tab until you finally reach it. You would even find out navigations you didn’t know existed!

But at least Google in text browser is not that bad. GitHub is much worse: It has more than two pages for just navigation! Compare that to SourceHut, on which the main content already appears in the first page.

Don’t put ads!

Privacy concerns aside, ads is terrible for accessibility:

• It distracts and interrupts readers from the main content.
• It puts extra data to load for users with slow internet.
• It discourages people from reading your content.

There are some websites that block adblockers. I don’t have enough words to describe how immoral that decision is. That sometimes not only block people using adblockers, but also people who don’t use JS (see above). I would recommend everyone to put such websites on block list so they won’t waste any more bandwith with them.

Further reading

There are too much bad practices nowadays I can’t cover within a post. I found these websites helpful to learn to avoid these bad practices:

• HTMHell: a collection of bad HTML practices that are detrimental to accessibility) and how you can improve it.
• MDN - Accessibility