bedrocss
bedrocss copied to clipboard
Are clamped headings a good idea in terms of accessibility and zooming?
In typography: https://github.com/AustinGil/bedrocss/blob/master/src/typography.css
we're using clamp
. According to https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/#accessibility-concerns so I'm wondering if this belongs in a reset-like script? Thoughts?
Yeah, this is a tricky one because although it's mostly a reset, I also wanted to treat it somewhat like a classless library. Something I can use on any project that can get me very far without much work.
I really like the fluid typography for that reason and would love to keep it, but would drop it if it introduced an accessibility concern.
That said, I followed up with Adrian's post and was not able to reproduce any accessibility issues. The text will scale with user defined preferences as well as zoom and can reach the 200% scale size as far as I can tell. It's also worth mentioning that his post was written in 2019 and he mentioned that his test was done with Firefox. At the time of writing, apparently, FF had a max zoom of 300%, but in my tests it could go up to 500% (although I did not need to go that large).
Also worth mentioning is that the fluid typography styles are only applied to the largest headings, and the make the fonts larger than the browser defaults styles. So practically speaking, I think the concern is text being too small to read, but we're only impacting the largest text on the page, and we're only making them even larger.
I reserve the right to be wrong, but I think this is not an issue.
Thanks for the context Austin 👍🏽