CODEWITHSUNDEEP
htmlcssaccessibilitywcag
Joel Alvarez Myrrie
Joel Alvarez Myrrie

Reputation: 416

Accessibility and Text Resizing, how?

One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.

So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?

Upvotes: 1

Views: 1295

Answers (3)

Tsundoku
Tsundoku

Reputation: 2707

The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)

So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.

Upvotes: 1

Nave Hazan
Nave Hazan

Reputation: 351

You should try use "rem" (support most of the browsers). Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;

Upvotes: 0

Maor Bachar
Maor Bachar

Reputation: 81

You should try using em instead of px..

For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.

If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).

Upvotes: 0

Related Questions