0

If you're developing a web page containing all kinds of elements (text, image, charts etc), what is the zoom range that you have to support to make sure that your page is accessible according to WCAG standards ?

This page talks about the upper limit being 200% https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up to twice the width and height.

However I'm confused about the lower limit.

I find this part a bit vague:

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible.

  • ...

  • Scaling text down to 50% (future link)

What if the page "breaks" (the layout gets messed up or some element becomes hidden) at zoom 50% but is fine above 50% ? Does that mean that my page is WCAG AA compliant ?

jimousse
  • 37
  • 1
  • 8

2 Answers2

5

The zoom range you need to accommodate for comformance is between 100% - 200%.

If your visitors will all be using modern browsers that are capable of zooming text, then you don't need to provide a control to zoom. You can allow the user-agent (i.e. the browser) to handle the actual zooming.

What you do need to worry about is ensuring that the layout doesn't break and make the content un-readable when it is zoomed to 200%.

WGAC 2.1 is now the current standard, so you should refer to that specification, rather than WCAG 2.0.

https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

In the updated version, the references to scaling down text have been removed. This is not a requirement, and you don't need to accomodate for negative zooming (anything under 100%) to achieve comformance.

Josh
  • 3,872
  • 1
  • 12
  • 13
1

The accepted answer is a great answer for text and most websites that use responsive design.

However as the original question was about browser zoom and items other than text I thought I would add this for completeness.

WCAG 2.1 - 1.4.10 Reflow

You must have a site that functions correctly at 400% zoom.

Luckily using media queries to make your site mobile friendly will normally satisfy this by default (as it is equivalent of a 320px wide site) but it should still be tested for.

The reason to test this is that 400% zoom on a desktop may be equivalent of 320px width but it is also equivalent of 256px high (using their 1280px by 1024px), which can break a lot of websites that use 'sticky' headers and footers as they take up too much vertical space to make the site usable.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64