Accessibility

I have a microblog that I’m using to train HTML/CSS, and I’m trying to learn how to create accessibility features - and I made buttons to turn them on. I read that sans serif fonts, increased line height, and character spacing are better for readability for people with dyslexia, but I don’t know if I’m using values that are too high, too low, or if they are fine. So if someone with dyslexia could give me tips and tell me if the changes make it more comfortable to read I’d appreciate it :)

https://pxhc.neocities.org/

cross-posted from: https://lemmy.world/post/45484461

Only found them by coincidence ;)

1️⃣ In "/settings/preferences/appearance" under "Advanced settings" you can find the option to "Warn me before posting media without alt text"

You can see the error message I see whenever I forget alttext in the second image hehe

2️⃣ When you post an image with text in it, you can simply use the magic AI feature "Add text from image". It usually works very well!

Alt text: "Screenshot of the warning you get with the warning for missing alt enabled. "Add alt text? Your post contains media without alt text. Adding descriptions helps make your content accessible to more people." Below it are 3 buttons "Cancel" "Post anyway" and "Add alt text"

Alt text: "Screenshot of the alt text window, the option "Add text from image" is circled in red.

This is how that "AI" option described the text of the image I posted: "Describe this for people with visual impairments. 1500 Add text from image"

cross-posted from: https://lemmy.world/post/45437770

I've been thinking a lot about the Fediverse ALT issue.

Some people are annoyed by posts without Alttext, & others get reminded¹ to add it.

The core question is: How can we improve accessibility?

Proposal: ☑️ Add a user filter to hide media posts without AltTag ☑️ Reduced engagement on hidden posts would encourage adding Alt text ☑️ People who need accessibility wouldn't have to encounter unlabeled media

If this gets traction, I'll open a Mastodon GitHub issue (maybe on others too?).

¹ https://mastodon.social/@madeindex/113996311493021102

I have a creepy site I'm using just to learn better HTML and CSS practices, and now I'm trying to learn and apply accessibility to it (just practicing, I'm not really expecting any person with a visual impairment to visit it), but using online screenreaders... well, I thought I was following the guides correctly but nothing is working as I expected...

The site is designed to look like entry logs on a terminal, all starting with // and I have a typing animation changing stuff written on the first line. I created a generic inline element called sr just for screenreader-related stuff, and in here: <h3 class="msg1"><sr aria-hidden="true">//</sr> You are the first here.</h3><h3 class="msg2"><sr aria-hidden="true">//</sr> Have you been kind to yourself?</h3> where I tested it seemed to work to remove the "slash slash" from every sentence, since the // is merely a visual element, however... well...

main content are entries following this pattern: "// 202603221035 : text text", and these are time stamps, I tried to add aria-label so it doesn't read as "slash slash two zero two six ... colon", so first I tried:

<p><time datetime="2026-03-22T10:35-03:00" aria-label="March 22, 2026 at 10:35">// 202603221035 :</time> text text </p>

Didn't work, aria-label was ignored and it read the "slash slash two zero two...". I asked an LLM and it suggested because it was a semantic element it would have tried to read datetime but it also didn't, but I tried removing it from the semantic element anyway:

<p><time datetime="2026-03-22T10:35-03:00"><sr aria-label="March 22, 2026 at 10:35">// 202603221035 :</sr></time> text text </p>
<p><sr aria-label="March 22, 2026 at 10:35"><time datetime="2026-03-22T10:35-03:00" aria-label="March 22, 2026 at 10:35">// 202603221035 :</time></sr> text text </p>

also got ignored, and LLM suggested it was because it was a custom/non-semantic generic element, but same reader (from https://www.screenreadersimulator.com/) respected the aria-hidden before on the same element so it wasn't the case... anyway, what would be the best accessibility practice for this case? Thanks.

cross-posted from: https://lemmy.bestiver.se/post/974331

Comments

A11yShape lets blind coders design and verify models on their own