Maintaining structure and visual representation of text.
Visual headings divide sections of information and need to be marked up in order for users using only a keyboard or screen reader to be able to navigate. Headings should have a meaningful and clearly outlined hierarchy.
What to check
- Each page should have at least one level one (h1) heading.
- All text that looks like a heading is marked up as a heading.
- The heading hierarchy is meaningful, beginning with an <h1> tag (generally similar to the page title) and does not skip levels.
- Easy Checks – A First Review of Web Accessibility: Headings
- Chrome Extension headingsMap
- Chrome Extension Accessibility Insights for Web
Some users need to enlarge web content or alter other aspects of the display including font and line spacing in order to read it clearly. Most browsers allow users to change the text size through settings, text-only zoom, or page zoom. If the page was not designed properly these alterations might render the page unusable; columns and sections could overlap, line spacing could reduce, and text could disappear.
Long lines of text make for poor legibility. WCAG 2.0 recommends a width of no more than 80 characters.
What to check
- Text can be made larger. It is best to avoid images containing text; they are unreadable by screen readers and difficult to resize.
- Text doesn’t disappear or get cut off when it is made larger.
- Text, images, and other content does not overlap when made larger.
- All buttons, form fields, and other controls continue to be visible and usable when made larger.
- Horizontal scrolling is not required to read the full line of text.
- It is best practice to make sure all text is visible on the screen with only vertical scrolling required. Set the text to “wrap” and fit the screen size when the size is increased.
- Easy Checks – A First Review of Web Accessibility: Resize
- Quick Test: Resize Text
- Readability: The Optimal Line Length
Some users cannot read text without a high contrast between the background and text colours, or without low luminance on the page if the colours are too bright. Accessible web browsers should allow users to change the colours of the text and background while still functioning.
The minimum contrast ratio is 4.5:1 for normal-size text (12px). For larger text (at least 24px and normal weight, or 19px and bold) the contrast ratio must be at least 3:1.
What to check
- Ensure any text on a light background is a dark colour and any text on a dark background is a light colour.
- Easy Checks – A First Review of Web Accessibility: Contrast Ratio (“colour contrast”)
- Contrast Checker
- Contrast Checker by Acart Communications