Post An6fXMoXYdP5v78ey8 by aral@mastodon.ar.al
 (DIR) More posts by aral@mastodon.ar.al
 (DIR) Post #An60qDjfRJZB92jNFg by aral@mastodon.ar.al
       2024-10-17T11:32:53Z
       
       0 likes, 0 repeats
       
       Just fixed a bunch of little accessibility issues and the Kitten web site now conforms to WCAG 2.1 AA.https://kitten.small-web.orgI 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/)#Kitten #SmallWeb #accessibility #a11y
       
 (DIR) Post #An63ct7Z4YPDJ9F7E8 by aral@mastodon.ar.al
       2024-10-17T12:04:07Z
       
       0 likes, 0 repeats
       
       @lnkr Ah, carp, dark mode? Which browser/platform. Will have a look after lunch - thanks! :)
       
 (DIR) Post #An65OX0sfiJOb0Olbk by nulll@mastodon.social
       2024-10-17T12:23:42Z
       
       0 likes, 0 repeats
       
       @aral hi, it is a kind of joke?
       
 (DIR) Post #An68iFioyBfCcd2wnQ by pieceofthepie@social.n8e.dev
       2024-10-17T12:40:21Z
       
       0 likes, 0 repeats
       
       @lnkr @aral I'm seeing the same on MacOS Firefox with a system dark mode.
       
 (DIR) Post #An68iHak1COAQ9HWTo by aral@mastodon.ar.al
       2024-10-17T13:01:04Z
       
       0 likes, 0 repeats
       
       @pieceofthepie @lnkr Thanks, lunch almost done; will look into this first thing.
       
 (DIR) Post #An68lIhyK6Hikj6RDE by aral@mastodon.ar.al
       2024-10-17T13:01:34Z
       
       0 likes, 0 repeats
       
       @pieceofthepie @lnkr Actually, I also know why it’s happening :) Shouldn’t be a hard fix.
       
 (DIR) Post #An695mD2Lg9S2YOfJY by aral@mastodon.ar.al
       2024-10-17T13:05:23Z
       
       0 likes, 0 repeats
       
       @nickcolley Thanks, will fix :)
       
 (DIR) Post #An698ZmT0wHmMXIu3c by aral@mastodon.ar.al
       2024-10-17T13:05:52Z
       
       0 likes, 0 repeats
       
       @nulll I’m not sure I follow.
       
 (DIR) Post #An69ECjLcyA0bvWq9I by aral@mastodon.ar.al
       2024-10-17T13:06:51Z
       
       0 likes, 0 repeats
       
       Folks, I’m aware I broke dark mode; will fix, just finishing up lunch :)
       
 (DIR) Post #An6PksDkV9IZp9Lf4S by aral@mastodon.ar.al
       2024-10-17T16:12:05Z
       
       0 likes, 0 repeats
       
       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)#Kitten #SmallWeb #accessibility #a11y
       
 (DIR) Post #An6PuOq6ayY1axpclk by aral@mastodon.ar.al
       2024-10-17T16:13:35Z
       
       0 likes, 0 repeats
       
       PS. Thank you to everyone who reported the issue – I appreciate it.:kitten: 💕
       
 (DIR) Post #An6TYq8ynUNDixdQn2 by aral@mastodon.ar.al
       2024-10-17T16:54:42Z
       
       0 likes, 0 repeats
       
       @lnkr Thanks + do let me know how you get on 💕
       
 (DIR) Post #An6f5qdZ5CwuJ2so0e by nulll@mastodon.social
       2024-10-17T19:02:48Z
       
       0 likes, 0 repeats
       
       @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!
       
 (DIR) Post #An6fXMoXYdP5v78ey8 by aral@mastodon.ar.al
       2024-10-17T19:08:28Z
       
       0 likes, 0 repeats
       
       @nulll Yeah, I messed up dark mode then fixed it :)
       
 (DIR) Post #An6ozo5Mejk8CFdzaS by aardrian@toot.cafe
       2024-10-17T20:54:45Z
       
       0 likes, 0 repeats
       
       @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
       
 (DIR) Post #An7bfhYy5nJhvhX9TE by aral@mastodon.ar.al
       2024-10-18T06:00:22Z
       
       0 likes, 0 repeats
       
       @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? :)
       
 (DIR) Post #An7uzlSZDE4Yw5ot8q by aardrian@toot.cafe
       2024-10-18T09:36:49Z
       
       0 likes, 0 repeats
       
       @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.
       
 (DIR) Post #An7vcONOyA0Ydcp56G by aral@mastodon.ar.al
       2024-10-18T09:43:53Z
       
       0 likes, 0 repeats
       
       @aardrian Thanks, Adrian, good to know. Appreciate your insight.