2

Hopefully this is not too broad, I am currently developing a website for my university project and part of the criteria is to implement some considerations to accessibility and also responsive design. Which got me thinking about the user experience for people with visual impairment, now with the current front-end frameworks when the user zooms using the browser it will begin to use the media queries and break down the site which includes reducing the font size to accommodate the restricted width, which really rejects the users desire to enlarge the content.

Now looking on various resources, including w3c guidelines this issue is not really addressed and I am wanting to know, is this because it is not a problem? and would it help to put all media queries in a separate CSS file that the user can disable from being used?

Improve this question
2
  • It shouldn't be an issue if you specify the font size in ems instead of pixels. That way the site will still scale the font based on individual user's browser's preferences. Also, I'm not so sure its a good idea to be shrinking the font for smaller screens in the first place.
    – Graham Herrli
    Nov 1, 2014 at 19:48
  • I am using Skeleton framework, and the default is in pixels out of the box. But maybe I should be looking to change that. But I just wonder whether having a site that has all folded down, like the navigation hinders more than it helps if your visually impaired.
    – Stacker-flow
    Nov 1, 2014 at 19:55

3 Answers 3

Reset to default
3

I think you may have a misconception of who mobile zoom works with media queries, correct me if I am wrong.

To indicate that a site is mobile friendly and responsive, there is usually a tag something like this included in the <head> of the html:

<meta name="viewport" content="width=device-width, initial-scale=1">

This essentially says that the content of this page is made to fit the width of the screen, so use the media queries. When your page renders on a 320px screen, it'll use the styles in your media query for this width. When the user zooms on this page, the device-width does not change. This means that smaller media queries will not be selected and applied on different zoom levels.

Improve this answer
1

I think you've been looking at the wrong frameworks because a well-conceived framework should improve accessibility not hinder it.

Any framework that uses media-queries to target smaller devices is doing it wrong.

Any framework that reduces font-size on small screens is doing it wrong.

The default font-size on any browser is exactly that, and should be respected because the default font-size on a mobile browser is the best default for that browser. Set font-size to 100% and never go below that if you care about accessibility.

Current best practice is to develop mobile-first, with the baseline (font-size: 100%) being set for small screens and the design being progressively enhanced with media-queries as screen size increases.

Improve this answer
0

Accessibility and responsive design can totally coexist in a well-designed website. Some people advocate for media query units in ems so that if the screen is zoomed, the font baseline will remain proportional. Using ems for font-size will also help with this, as other people mentioned.

A couple random things:

Leaving zooming enabled in your meta viewport tag is a good idea if possible, because then you put the power in the user's hands–but horizontal scrolling can be a bitch to avoid.

If you use media queries specific to mobile devices (screen and landscape/portrait etc.), you can prevent zoom on larger monitors from triggering a mobile layout.

Here is more good info from SSB Bart on responsive design & accessibility.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.