Aral Balkan
Just fixed a bunch of little accessibility issues and the Kitten web site now conforms to WCAG 2.1 AA.
I also added a feature to Kitten whereby it automatically adds tabindex='0' to code blocks so they can be focused and thus scrolled by people using assistive technologies.
(It was also my first time trying out the axe accessibility tools – available as a browser extension – and that really helped: https://www.deque.com/axe/)
nulll
@aral hi, it is a kind of joke?
Aral Balkan
@nulll I’m not sure I follow.
Aral Balkan
Folks, I’m aware I broke dark mode; will fix, just finishing up lunch :)
Aral Balkan
Right, I just fixed the dark mode colour contrast regressions I introduced this morning and the Kitten web site now conforms to WCAG 2.1 AA in both light mode and dark mode.
Let this be a lesson to you: remember to test both your light and dark mode styles for accessibility.
(PS. TIL that overriding CSS variables in :root {} also overrides :root nested in @media blocks. I’d have thought those would have greater specificity. See https://codeberg.org/kitten/site/commit/a8983f9e0c52b2ea5c8e05368c09f73a649ce546)
Aral Balkan
PS. Thank you to everyone who reported the issue – I appreciate it.
:kitten: 💕
Aral Balkan
@nulll Yeah, I messed up dark mode then fixed it :)
nulll
@aral when I wrote my comment on Firefox Android, your website looked vonpletly unreadable, due to black text on dark background. So I was thinking was a kind of joke, but I see that now works fine!
Aral Balkan
@aardrian Thank you, your post was an enlightening read.
The role is easy enough but I’m not sure how to implement accessible names for code blocks that would aid in actual use vs checking a checkbox. Any ideas? :)
Adrian Roselli
@aral FYI that without an appropriate role and accessible name, you might be at risk of failing 4.1.2. depending who’s checking.
Ref: https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html
Adrian Roselli
@aral When possible, you can use `aria-labelledby` to point to an existing span of text that already tells the reader what it is.
But yes, it can be a box-ticking exercise. At least until Safari shows interest in supporting keyboard users and Chrome actually deploys the feature.
Aral Balkan
@aardrian Thanks, Adrian, good to know. Appreciate your insight.
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.