# 2022 Week 1 — Accessibility Design, CSS Styles and Accessibility, Interactive Animated Background Library, console.assert()

By [Makzan](https://paragraph.com/@makzan-2) · 2022-01-09

---

_Original post from_ [_makzan.substack.com_](https://makzan.substack.com/p/2022-week-1-accessibility-design), repost here.

Hi there,

It’s the first week of 2022. Yes, according to [ISO8601](https://en.wikipedia.org/wiki/ISO_8601), this is the first week of 2022.

Here are the links worth sharing this week:

**→ UI Design /** [**The good, the bad and the toggle**](https://www.alexbuenodesign.com/blog/the_good_the_bad_and_the_toogle)

> _If the toggle is an action (Play/Pause) the label/title should show what will happen. If the toggle is an option (On/Off) then it should show the current state._

![](https://storage.googleapis.com/papyrus_images/956bb54b43ba15897b52f01dae3b094715e5868a302fa56a8ddfb0b563c57646.png)

**→ Accessibility /** [**Why We Need More Accessibility Designers by Anna E. Cook**](https://www.youtube.com/watch?v=dQVrfS74xyM)

You don’t have to have the title of “accessibility designer” to make your designs more accessible.

![](https://storage.googleapis.com/papyrus_images/15a7fe5c43023ebff861e63149ded32ed1ac1b186223b25ffb569b21af217d5e.jpg)

**→ Accessibility /** [**Twitter needs manual language selection**](https://hiddedevries.nl/en/blog/2021-12-30-twitter-needs-manual-language-selection)

Setting the language is important for end users, like:

*   people who use a screenreader to read out content on a page
    
*   people who use a braille display
    
*   people who end up seeing a default font (browsers can select these based on language)
    
*   people who use software to translate content
    
*   people who want to right click a word in our content to look it up in a dictionary
    
*   people who use user stylesheets
    

For non-English tweets to meet WCAG, they need to have their language declared with a lang attribute. Twitter currently guesses languages, which is a great step in the right direction, but is likely of little help to speakers of minority languages. A manual selector would be a great way to complement the automation.

![](https://storage.googleapis.com/papyrus_images/7d7a5df2392654a4b27eb303576c4632971b9eae5955d3794b298056d0206db4.jpg)

**→ CSS and Accessibility /** [**CSS Underlines Are Too Thin and Too Low in Chrome**](https://css-tricks.com/css-underlines-are-too-thin-and-too-low-in-chrome/)

Default underlines are inconsistent

![](https://storage.googleapis.com/papyrus_images/039d92521644a5a5a3c05c3d2073f066afb5321e6cec13d604b344e09d9c8d95.jpg)

**→ CSS, Accessibility /** [**Should CSS Override Default Browser Styles?**](https://css-tricks.com/should-css-override-default-styles/)

The lines are relatively fuzzy, but I’d say there is nothing in CSS that should be outright banned from use — it’s more about the styling choices you make. So when you do choose to style something, it remains usable and accessible. Heck, background-color can be terribly abused making for inaccessible and unusable areas of a site, but nobody raises pitchforks over that.

**→ JS Lib /** [**VantaJS**](https://www.vantajs.com/)

Animated and Interactive background via WebGL. Each effect can be further customized to fit the website’s style.

![](https://storage.googleapis.com/papyrus_images/cc9e43c6f67a04efc3168824b79feb773ce61807b0165bb68defd9bf381f1d79.jpg)

**→ Product Development /** [**Hard Edges, Soft Middle**](https://www.colemanm.org/post/hard-edges-soft-middle/)

![](https://storage.googleapis.com/papyrus_images/635ea8736d44c70b3bf7fc1e96b66493f9a87cc90b327f09ea082d6bca0ca4e3.jpg)

By defining a hard boundary within 6 weeks, we trust the developers to come up with solutions.

> _This requires trust in the product team to choose approach trade-offs wisely. If you encounter a library in use for the feature that’s heavily out of date, but the version update requires sweeping changes throughout the app, you’ll need to pick your battles. A team with fixations on particular steps (the “hard middle”) might decide too early that an adjacent feature needs rework. Before pulling up to a higher altitude to look at the entire forest, the team’s already hitched to a particular step._

![](https://storage.googleapis.com/papyrus_images/6f86e57ea2c27b171205b4d6cf4c0d017c95bce3f6cb388b0944d165363733f2.jpg)

**→ JS /** [**console.assert**](https://twitter.com/wesbos/status/1478439959543656454)

[https://twitter.com/wesbos/status/1478439959543656454](https://twitter.com/wesbos/status/1478439959543656454)

> 🔥 You can use console.assert() as a cheap-n-easy test function

![](https://storage.googleapis.com/papyrus_images/53a69ec0144ec325826a1a943c8582390beb3ba066494f0a4762fd0dd12d6f5d.png)

Quote of the week
-----------------

> _“if an explanation can help that person start to care, the rest is much easier.”_ 

![](https://storage.googleapis.com/papyrus_images/01d13a173c2899841f1a8a478387d55b77767c6a1818c086827658f104500e86.png)

Until next week,  
Makzan

* * *

**About Makzan’s Weekly Newsletter**

I collect web development and accessibility posts every week.

---

*Originally published on [Makzan](https://paragraph.com/@makzan-2/2022-week-1-accessibility-design-css-styles-and-accessibility-interactive-animated-background-library-console-assert)*