1.4.4 Resize Text Level AA

[View on W3C.org]

Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Testing & Remediation

How to test: Does the page zoom to 200% effectively?
  1. Confirm your browser is not set to text-only resizing
  2. Reset the zoom level so you start at the normal 100%
  3. Set your browser window size to approximately 1024 x 768
  4. Zoom in to 200%. This can be accomplished by pressing the Command or Control and the + (plus) key a few times.
  5. Check to see if any content overlaps, gets cut off, shifts in an awkward way or becomes unreadable. Specifically look for elements that were set with absolute positions as they may overlap with other content.
Does the viewport meta element allow for pinch to zoom?
  1. View the source code of your page
  2. Search for the "viewport meta" element
  3. If it is present, confirm that "maximum-scale", "minimum-scale", "user-scalable=no" and "user-scalable=0" are not contained in the HTML.
How to remediate: There are a number of techniques that can be used to meet this Success Criteria. We recommend reviewing the options listed on the W3C page linked above.

Questions and Answers

How is CSS pseudo content treated by screen readers?

Generally speaking, web content should be included in HTML files, in a database or coming from an API. It should not be in CSS. However, sometimes CSS is used to add non-text content such as font icons or special characters. This content WILL be read by screen readers and can cause confusion with AT (assistive technology) users. If the content that the CSS is generating is purely presentational, you must make sure to hide it from assistive technology. This can be completed by using the aria-hidden property.

Minimum font size?

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller, and headers will be larger, but for the main body text (like what you're reading right now) is usually 16px. That said, it is officially stated that visitors must be able to resize all text on the page up to 200% of its original size.

Browser zoom vs text zoom. Which is better?

The criteria stated in 1.4.4 says that the text must be resized without the use of assistive technology. This means that there needs to be a button on the screen somewhere that allows users to click on it or tab to it.

Do logos need to follow the accessibility guidelines?

No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.

What are the best accessible wordpress sliders?

Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content,  so keep these things in mind when building content:
  • Do the headers flow from h1 down without skipping a level?
  • Do embedded images have adequate alt tags?
  • Do the links open have descriptive titles or link text?
Below are sliders that are accessible:
  • Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.