Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Are clamped headings a good idea in terms of accessibility and zooming? #11

Open
roblevintennis opened this issue Mar 13, 2022 · 2 comments

Comments

@roblevintennis
Copy link

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?

@roblevintennis roblevintennis changed the title Are clamped headings a good idea of accessibility Are clamped headings a good idea in terms of accessibility and zooming? Mar 13, 2022
@AustinGil
Copy link
Owner

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.

@roblevintennis
Copy link
Author

Thanks for the context Austin 👍🏽

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants