1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
categories: [blog, dev]
title: "Designing web for accessibility"
date: 2021-05-01T19:16:41+07:00
tags: [web, 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[^1].
### Less is more
#### Less unnecessary media
Can this logo be done as a simple vector image instead of a full HD 8K png?[^2]
Can it be simply just text?[^3]
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](https://www.htmhell.dev/): a collection of bad HTML practices that
are detrimental to accessibility) and how you can improve it.
- [MDN - Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
[^1]: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility
[^2]: Vector images are not necessarily lighter than pixel images, but if the
image consists of simple shapes like circle or ellipse, it's likely that it
is lighter.
[^3]: That makes your logo visible from text browser as well!
|
