diff options
| -rw-r--r-- | content/posts/2021-05-01-accessible-web.md | 118 | ||||
| -rw-r--r-- | content/works.md | 4 |
2 files changed, 120 insertions, 2 deletions
diff --git a/content/posts/2021-05-01-accessible-web.md b/content/posts/2021-05-01-accessible-web.md new file mode 100644 index 0000000..aa173c9 --- /dev/null +++ b/content/posts/2021-05-01-accessible-web.md @@ -0,0 +1,118 @@ +--- +category: blog +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! diff --git a/content/works.md b/content/works.md index 8f0959e..c00890a 100644 --- a/content/works.md +++ b/content/works.md @@ -1,7 +1,7 @@ --- -title: Work +title: Works language: en -ref: works +translationKey: works slug: /about/works/ disable_feed: true menu: |