How to make a page both scale with viewport size and also be accessible for people zooming in.
Making a page responsive, I've once resorted to sizing elements with vw/vh, however that can make it difficult to zoom in on text so it's bad for accessibility. What's a good general approach?
29 Replies
use rem and vw in a clamp
in #front-end there are posts with good examples
and don't use pixels for font sizes, even in the body or html elements
by the way, the rem + vw value goes in the middle
So it's accessible based on the default font size the user has set for themselves?
exactly
Alright, I'll keep this approach in mind, thanks a lot.
when you say html elements, I should avoid using pixels for even basic divs?
*element
not elements
for everything else, you already have the clamp and rem + vw size
Are they just added with calc?
I don't fully get that, but I'm seeing that approach on MDN now
no, clamp accepts math stuff
I don't get the idea behind it yet
no need for calc
the idea is that you set a maximum and minimum size for the text
then you have a size in the middle, which will be calculated with viewport units
that size will go as low as the minimum, but as high as the maximum
and is still zoomable
I get that, but when we do rem + vw, how much vw is being added? I understand that vw basically should be a factor here
you can try 5vw
but play around with it
I see
just don't go overboard
or it goes from the minimum size to the maximum size in no time
Yeah that makes sense
I can "close the post" if my question is answered right?
just add the "solved" tag
This is the first time I'm using this part of Discord to ask questions
you have to edit the post to add it, all the way at the top
Yeah I've done so, thanks again for answering my questions
you're welcome
@ἔρως so I've written something like this to make a "decorative" header look more responsive. I like how it looks, but are there issues with this approach?
I'm basically just sizing things proportionate to how they look on the design as the width of the screen changes.
I use this for other elements too if I just want something to keep looking the same as the screen stretches.
I don't intend to make this a forever thread, this should be the last thing.
yes: your font size is in pixels
that's very bad for accessibility
if the user has set a larget font size by default, this will ignore it
convert the pixel values to rems
I'm doing this with text that looks decorative, otherwise, user settings can just ruin the design
let the user ruin the design
if i want to make a style that makes your site pink neon with sparkles, i should be allowed to
I'm planning to also make the minimum and maximum clamp values based on
rem in some cases while the middle point takes on pixel values in between, that should work right?
Problem is, the header won't look the same with remsnot quite, as 1rem isn't always 16px
what you can do is to use viewport units
like how you are doing now
yeah didn't cross my mind
that always throws a wrench on stuff
Issue right now is, I want to keep the design looking as it is, but also make things accessible
I think I'll just leave the paragraphs at 1rem kindaa basically, but just size all decorative text (including fancy headers) in pixels. I just worry that my approach is odd cause I never saw it before but does exactly what I want.
it isn't odd
using px isn't accessible, but there is nothing odd about it
the .6px is weird, but well