4

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/

you are viewing a single comment's thread
view the rest of the comments
[-] PiraHxCx@lemmy.dbzer0.com 1 points 4 weeks ago* (last edited 4 weeks ago)

Hi, thanks for checking it out, but did you try the buttons at the top? When you load the page it says what they are for, the one on the right turns on the "dyslexia-friendly" mode (there is no italics on it)

- Unless you are on mobile, I didn't work much on the mobile version yet.

[-] southsamurai@sh.itjust.works 2 points 4 weeks ago

Ahhh, I'm on mobile. Lemme try to load it as desktop

[-] southsamurai@sh.itjust.works 2 points 4 weeks ago

Ouch. Desktop version on mobile is bad, but not because of the font. The color scheme along with the background makes it rough to see the letters at all. The buttons are also hard to use. I don't have my laptop available right now, but ima send a note to myself to check it tomorrow

For real, someone putting in effort for accessibility is a really cool thing to see. If I brain fart and don't respond again tomorrow, feel free to dm me as reminder.

[-] PiraHxCx@lemmy.dbzer0.com 2 points 3 weeks ago* (last edited 3 weeks ago)

I made some changes to the mobile version and added the button there too... the numbers are probably confusing to read for everyone, I don't intend people to actually read them, although they are time stamps - I'm also testing accessibility for screenreaders so in the code the numbers, slashs and colons are ignored and the screenreader reads "// 202604212244 :" as "April 21, 2026 at 22:44" (I'm not actually expecting any blind person to find this site, I'm just practicing how to code a site with accessibility, thanks for the help!)

[-] southsamurai@sh.itjust.works 2 points 3 weeks ago

Oh! That worked much better on mobile via requesting desktop.

The readability definitely improved when using the buttons. I still ran into my usual difficulty parsing l and I, but the dbpqg part was almost non existent. So I think you got the spacing down right. As weird as it may seem, the font of the regular version has enough difference between i and l that those show clearer for me than in the dyslexic assist version, though the other letters are better in the assist.

Looking at it on my laptop is solid. The only thing I might suggest is labelling buttons instead of mouseover, or increasing the size so that they're a bit more obvious as buttons for us old farts that need reading glasses lol.

The colorblind contrast setting actually improved readability of the text for me as well. There's something about the background that ever so slightly distorts the lettering, though I have no clue why that is.

But, on the laptop, the letter readability was roughly the same, with the difference in screen quality making way more of a difference than anything about the fonts or spacing

Honestly, It's way better readability on either device (tablet and latop) than most sites.

It's fucking brilliant to see someone putting in the time to work on this :)

this post was submitted on 21 Apr 2026
4 points (100.0% liked)

Accessibility

1512 readers
1 users here now

!a11y@programming.dev is a community for discussing digital accessibility, sharing techniques and best practices, and talking about accessibility experiences; both good and bad.

Lemmy

Guidelines

What is Digital Accessibility?

Digital accessibility is the practice of removing barriers that prevent interaction with, or access to, digital systems by people with disabilities. This involves designing and developing websites, mobile applications, software, hardware, and other digital platforms in a way that they can be used by individuals with a range of abilities, including those with visual, auditory, physical, speech, cognitive, and neurological disabilities.

Digital accessibility not only benefits those with disabilities but also enhances the overall user experience, making digital content more usable and understandable for all. In many jurisdictions, it's a legal requirement under disability discrimination laws.

How does one improve digital accessibility in their products?

Key components of digital accessibility include accessible website design, multimedia with features like captions or transcripts, properly formatted digital documents, and accessible software and apps. It also extends to hardware design.

Other Accessibility Related communities:

Useful Resources

founded 2 years ago
MODERATORS