[frontend] Accessibility updates

[tsmethurst]

Some pointers we should keep in mind when updating our html and css, from @Ryuno-Ki (following things are copy-pasted from fedi messages):

---

Colors + contrast

Just checked goblin.technology with WAVE, Nu Validator and Orca screenreader.

Looks about perfect.

HTML

Powerful and Dangerous Goblin Tech (GoToSocial semi-public instance).

still contains className (Ctrl-U to check server response)

Plus, there's an in the footer pointing to the git source.

WAVE tool lists several images missing alt attribute (decorative ones have alt="")

Plus, https://html5.validator.nu/?doc=https%3A%2F%2Fgts.superseriousbusiness.org%2F%40gotosocial&showimagereport=yes reports duplicated ID values.

Navigation

Those action icons aren't focusable with keyboard (tabindex="0" missing?).

I miss skip links to jump straight to the timeline:
https://webaim.org/techniques/skipnav/

Screenreaders

Listing to it with Orca screenreader makes me notice, that replies/boosts/favourites just read out the number. There is context missing about what the value is about.

You can utilise a technique such as https://webaim.org/techniques/css/invisiblecontent/ to provide text to screenreaders only.

Thinking about the narrative order (= DOM one) it might make sense to have the date (for toots) read out earlier?

If you turn .toot.expanded into a Flexbox, you can use the order property to push the .info down (but have it appear before .contentgrid in the DOM).

Be aware, that visual order differing from the DOM one is debated in the accessibility community.

[bremensaki]

All the project's web views are currently only presented in a light-on-dark theme, which is an accessibility problem I don't see mentioned here.

Is checking a client's prefers-color-scheme setting and switching to suit on the roadmap anywhere?

[tsmethurst]

Is checking a client's prefers-color-scheme setting and switching to suit on the roadmap anywhere?

Not yet, I'll make an issue for it

[tsmethurst]

I think the points in the original issue have now been addressed, especially since #2480