From a1da654f3045fac0d727a40fd404313bc3d3ea4d Mon Sep 17 00:00:00 2001
From: Ngô Ngọc Đức Huy <huyngo@disroot.org>
Date: Sat, 1 May 2021 21:20:13 +0700
Subject: Add post

---
 content/posts/2021-05-01-accessible-web.md | 118 +++++++++++++++++++++++++++++
 content/works.md                           |   4 +-
 2 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 content/posts/2021-05-01-accessible-web.md

(limited to 'content')

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:
-- 
cgit 1.4.1