+```
+
+Instead of relying on `display: block`, write something like this:
+
+```html
+
+
+ bla
+ hello
+ more related stuff
+
+
+```
+
+The structure stays the same, but the elements change. The end result is exactly the same in your conventional browser, but it's easier to crawl by search engines - and especially software for people with disabilities.
+
+Other things to keep in mind:
+
+- Use `` when it's a button, not a link. `aria-label` is there for hidden labels such as the sandwich nav-button for mobile browsers on this site.
+- Use labels in forms. Avoid use of placeholder values to label or explain input.
+- etc...
+
+### 2. Respect headings and paragraphs
+
+Also easy to achieve! Just like I promised: making your website accessible for everyone is just a matter of keeping a few extra rules in mind. Just like a Word or LaTeX document, when writing an article or paper, you start with your header. That's a `` tag. Subheader? ``, and so on. Do not skip a number! Wrap paragraph text in a simple `` tag.
+
+My templates contained a lot of header tags just to get the font size right. Obviously, that is _wrong_: use the `font-size` CSS property if you really need to. That meant I regularly jumped from `` to `` just for styling purposes.
+
+### 3. Think about contrast
+
+Style a link as a link: with `text-decoration: underline`! Remember that it will otherwise be hard to tell the difference between a link and just text, even if the color is (slightly) different or if it's in bold. Not everyone will see the difference. Of course you can make exceptions in the navigation bar.
+
+Chrome Dev Tools makes it very easy to check whether the color you've employed has enough contrast. It will take background colors, font size, and font weight into account. In the Elements tab, inspect an element and filter the Styles tab to the right on 'color'. Click on the color to inspect the calculated contrast:
+
+
+
+Furthermore, also deliberately think about your font styling and sizing. Fonts should have a `font-display: swap` CSS attribute to avoid flickering (or not rendering if a `.woff2` file fails to load). Since monitor resolutions are higher than ever, why should you be stuck with `font-size: 12px`? Don't use hard-coded `px` or `pt` but use relative `em` and `rem`, and keep "14pt" as a reference for desktop browsers. I detest websites that still have this incredibly small hard-to-read font that hurts even my eyes.
+
+### 4. About images... Use ``
+
+I guess it's unnecessary to emphasize the use of the `alt` attribute in case anyone cannot see the images or they do not get loaded. This does not have anything to do with accessibility, but is almost never filled in (at least by me, whoops). HTML5 comes with a `` tag that finally makes it easy to include a caption - like we're so used to do in LaTeX - using the `` tag.
+
+However, in my article source, which is in Markdown `.md` files, the standard way of including an image is:
+
+```md
+
+```
+
+And since I did not want to pollute the files with Hugo shortcodes, I came up with an alternative, thanks to [this blog post from godo.dev](https://www.godo.dev/tutorials/hugo-image-figure-wrap/):
+
+```html
+
+ {{ $reAltIn := "
" }}
+ {{ $reAltTitleOut := "$3" }}
+ {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
+
+ {{ $finalContent }}
+
+```
+
+It effectively replaces any generated `` tags with `` wrappers, also including a link and a class that helps my lightbox script function the way it should. You can see the result for yourself in the image above, with caption. If you use a `title` attribute, the `alt` attribute can be skipped.
+
+### 5. Inspect your site - without CSS and JS.
+
+The Opera plug-ins ".no { CSS }" and "JavaScript toggle On and Off" make it easy to do that with two button clicks. The result - after modifications, of course - is this:
+
+
+
+I'm getting this sudden 1995 retro vibe, don't you? Now why on earth would you go back to this look? Because if you don't, you won't know how it looks like for special browsers that help people with disabilities navigating the Internet. For example, my `` icons did not contain native `height` and `width` attributes, and their `viewBox` said "make it big!" but my CSS said "no no, keep things small". Without CSS, things get ugly pretty fast...
+
+Also, what doesn't get loaded without JavaScript? Cookies broke? Form submission gone to hell? In my case, article comments served from Commento will not load, and for the moment I think that's unavoidable, unless I come up with a form of static caching that is currently not provided.
+
+### 6. Don't know what to alter? Use analysis tools.
+
+Besides the websites [www.webaccessibility.com](www.webaccessibility.com) and the [WAVE web accessibility evaluation tool](https://wave.webaim.org), there's actually something better, and it's again built-in into DevTools: it's called **Lighthouse**, and can be booted up in the "Audits" tab. Lighthouse will also tell you what to alter to speed up things, so it's not an "accessibility-only" tool.
+
+
+
+Sadly, scoring more than `65%` on accessibility is proving to be difficult, since most issues come from Commento's lack of form labeling and usage of `alt` in avatar images. At least I'm no longer flunked!
diff --git a/content/post/2020/06/tracking-and-privacy-on-websites.md b/content/post/2020/06/tracking-and-privacy-on-websites.md
index 34c18c63..154612ea 100644
--- a/content/post/2020/06/tracking-and-privacy-on-websites.md
+++ b/content/post/2020/06/tracking-and-privacy-on-websites.md
@@ -83,7 +83,7 @@ There are so many things to take into consideration. I've never given them much
7. **Privacy**. Don't track visitors, track traffic instead!
8. **Licence**s. Which copyright system are you applying? Did you attribute your sources correctly?
9. **SEO**. If your site is not found, tumbleweeds instead of readers start appearing...
-10. **Accessibility**. Use contrasting colors, write `alt` tags, ...
+10. **[Accessibility](/post/2020/06/designing-with-accessibility-in-mind)**. Use contrasting colors, write `alt` tags, ...
-I haven't looked at that last part yet - _accessibility_. To be continued!
+I haven't looked at that last part yet - _accessibility_. To be continued! (Edit: [continued here](/post/2020/06/designing-with-accessibility-in-mind))
diff --git a/static/post/2020/06/contrast.jpg b/static/post/2020/06/contrast.jpg
new file mode 100644
index 00000000..b552ee0d
Binary files /dev/null and b/static/post/2020/06/contrast.jpg differ
diff --git a/static/post/2020/06/lighthouse.jpg b/static/post/2020/06/lighthouse.jpg
new file mode 100644
index 00000000..fe4bc3bd
Binary files /dev/null and b/static/post/2020/06/lighthouse.jpg differ
diff --git a/static/post/2020/06/nocss.jpg b/static/post/2020/06/nocss.jpg
new file mode 100644
index 00000000..fa6dfa92
Binary files /dev/null and b/static/post/2020/06/nocss.jpg differ
diff --git a/themes/brainbaking-minimal/assets/sass/_figures.sass b/themes/brainbaking-minimal/assets/sass/_figures.sass
index 91ba7d07..a70d8a82 100644
--- a/themes/brainbaking-minimal/assets/sass/_figures.sass
+++ b/themes/brainbaking-minimal/assets/sass/_figures.sass
@@ -23,7 +23,7 @@ figure
text-align: center
font-style: italic
font-weight: normal
- color: #aaa
+ color: #777676
/** Hugo's figure shortcode seems to render h4s sometimes **/
h4
diff --git a/themes/brainbaking-minimal/layouts/_default/single.html b/themes/brainbaking-minimal/layouts/_default/single.html
index ffd358a4..10cbe4a4 100644
--- a/themes/brainbaking-minimal/layouts/_default/single.html
+++ b/themes/brainbaking-minimal/layouts/_default/single.html
@@ -12,7 +12,7 @@
{{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
{{ $reAltTitleIn := "