Web Developers & Designers

[masukomi@connectified.com]

Web Developers & Designers

This is your friendly reminder that low vision users exist. We need font sizes that are dramatically larger than yours.

Many of us use the “minimum font size" NOT zoom, because we need bigger text, not bigger images.

I'm on the very low end of low vision needs, but my 20pt minimum font size breaks SO MANY web sites.

This pic shows how big fonts are on my screen (thumb & ruler for context).
#accessibility #webdesign

[morgant@mastodon.social]

@masukomi I've preferred #CSS text sizing with ems, since @Richr wrote about it in 2004:

https://clagnut.com/blog/348/

Quoting:

"Like it or not, your readers **will** want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes."

This was all pre-"responsive" web design, but it makes for much more scalable designs across text sizes. The calculations were tedious back then, but now easily computed.

[oblomov@sociale.network]

@masukomi hi, is there a way for me to check if my website follows such accessibility requirements other than asking you to check what happens when you visit it? Any setting I can try on my browser or devtool or anything else?

[masukomi@connectified.com]

@oblomov

In your browser (chrome, firefox, whatever) go to the advance preferences for font settings find "minimum size" and set it to 20 (or larger). Then view your site.

When designing things NEVER use pixel sizing. ALWAYS use em & rem & percentages. Never make a box that can't expand.

20 is what I use but some people need MUCH larger fonts.

1/2

[masukomi@connectified.com]

@oblomov the two other things for helping folks with low / no vision is to learn how to use aria attributes (really easy i swear) especially using them to tell voiceover NOT to read 💩 that's not worth reading.

Then turn on VoiceOver or your OS's equivalent and "listen" to a web page. macOS has a spectacular built-in tutorial (comes up as an option when you enable VoiceOver) for teaching you how to navigate & use VoiceOver.

[oblomov@sociale.network]

@masukomi thank you very much.

[david42@mastodon.online]

@oblomov @masukomi @tunafishtiger

This is an area where there are best practice standards to follow, and there are a variety of tools for both building and checking sites against those standards.

E.g.,
https://www.ada.gov/resources/web-guidance/
https://www.w3.org/WAI/standards-guidelines/wcag/

You can try out some of these tools for automatically checking the accessibility of your websites. Some of these specifically check against specific standards, others don't. Some are free, others paid.

https://www.w3.org/WAI/test-evaluate/tools/list/

[oblomov@sociale.network]

@david42 @masukomi @tunafishtiger

Thanks for the links!

(Even though wow, those w3.org WAI pages appear completely broken on my browser …)