Session 3 WCAG 1.4.4 through 1.4.13

Overview

• Training topic and success criteria
• Prep work and Session Recording
• WCAG 1.4 continued
• Homework

Training Topic and Success Criteria

The WCAG criteria that will be covered in this session include:

• 1.4 Distinguishable

There are six criteria left to cover in 1.4. They cover the following topics:

• Color contrast for form fields and other interactable controls
• Mobile access such as reflow and text resizing
• Content that appears on hover such as tooltips

Prep Work and Session Recording

Recording

What You Need for this Session

For this part of the audit, you will need to:

• Download the Survey Spreadsheet
• Download the WAVE extension
• Become familiar with Chrome inspector tools
• Install the Bookmarklet for 1.4.12

Session 3 Audit: WCAG 1.4.4 through 1.4.13

The remaining criteria in WCAG 1.4 includes color contrast for interactable elements, images of text, text resizing, reflow, and tooltips. Below is each criterion, a brief explanation of it, how to test for it, and how to score it in your survey spreadsheet.

Success Criterion 1.4.4 – Resize Text

Text can be resized up to 200% without the use of assistive technology and without loss of content or functionality.

When to Test

On all pages.

WCAG Guidelines

Understanding Success criterion 1.4.4

Testing for SC 1.4.4

Use your browsers zoom feature to zoom in to 200%.

• Windows: Control and Plus (+) to zoom in.
• Mac: Command and Plus (+) to zoom in.

Scroll through the page content at 200% and make sure nothing is getting cut off or disappearing.

Scoring for SC 1.4.4

• Score 1 = When zoomed in to 200%, there is no loss of content.
• Score .5 = When zoomed in to 200%, there is loss of some content that is not the main content of the page. Examples include information in the header or footer. This does not include navigation links.
• Score 0 = When zoomed in to 200%, some of the main content is lost. This includes navigation links.

Success Criterion 1.4.5 – Images of Text

There should be no images of text if the same presentation can be provided using text and formatting alone. Logos with custom fonts can be contained in images without failing this criterion.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.4.5

Example

The example below uses a custom font. However, the same presentation can be made using a similar font.
GreeNYC

Testing SC 1.4.5

Search for images of text on the page. If the image of text is used because it has a custom font, this criterion fails. If the image of text cannot be replicated because of the limitations of the platform, it passes. The hero on NYC.gov passes because it doesn’t allow users to customize or format their stories.

To find out if text is an image or not, try to select individual letters from the text. If you cannot, then it is most likely an image.

Exemptions include:

• Images of text in the hero
• Logos
• Graphics that contain text such as info graphics, book covers, etc.

Scoring for SC 1.4.5

• Score 1 = There are no images of text, or if there are, it is because the platform is limited to presenting the info in this specific way.
• Score 0 = Images of text are present and are not logos. There are custom fonts requiring the use of an image to present it, or the text can be easily replicated using common HTML/CSS formatting.

Success Criterion 1.4.10 – Reflow

Content is presented in a single column so that only vertical scrolling is required. The point of this criterion is to enable users to magnify the content and not need to scroll left and right to read it. The text should wrap to the edge of the browser window.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.4.10

Examples

• MOPD website
• Office of Workforce Development

Testing SC 1.4.10

On desktop, set the browser’s zoom feature to 400%. Content should be in one column so that scrolling is vertical only.

• Windows: Control and Plus (+) to zoom in.
• Mac: Command and Plus (+) to zoom in.

Note

Exceptions for this criterion include maps, data visualizations, and other content that requires a spatial layout (such as tabular data).

Scoring for SC 1.4.10

• Score 1 = When zoomed in to 400% on desktop, scrolling is only required in one direction and the text wraps to the viewport.
• Score 0 = When zoomed in to 400% on desktop, scrolling left and right is required to read all the content, or the content may be cut off to the right with no ability to scroll.

 

Success Criterion 1.4.11 – Non-Text Contrast

User interface controls and images have contrast ratio of 3:1. For example, buttons and edit fields need to be distinguishable.

Note

Text links are considered text and fall under 1.4.3, but if underlined, the underline would be evaluated under this criterion. Also, image links are tested as part of this criterion.

When to Test

On pages with form fields, image links, images (or parts of images) required to understand the content, and interactable content that is not text based.

WCAG Guidelines

Understanding Success Criterion 1.4.11

Testing SC 1.4.11

Measure contrast for user elements manually. This includes buttons and other form fields as well as images that are important to the content. Begin by opening the WebAIM Color Contrast Checker in a new tab.

Chrome Inspector Instructions

Coming soon

Scoring for SC 1.4.11

• Score 1 = User interface components such as form fields and important images all have contrast ratio of 3:1 or they have borders around them that have a ratio of 3:1.
• Score .5 = A few images or form fields do not pass the minimum contrast ratio, but they are not part of the main content of the page.
• Score 0 = At least one important image or form field in the main content does not have 3:1 contrast ratio.
• N/A: Put N/A in the score field if there are no form fields, image links, important images required to understand the content, or interactable controls that are not text based.

Success Criterion 1.4.12 – Text Spacing

Users should be able to adjust line height, letter and word spacing, and paragraph spacing without loss of content.

When to Test

On all pages.

WCAG Guidelines

Understanding Success Criterion 1.4.12

Testing SC 1.4.12

Change spacing and make sure there is no loss of content.

Option 1: Change browser text settings to: line height of 1.5 em, spacing between paragraphs of 2 em, letter spacing tracking to 0.12 em, and word spacing to 1.6 em. Make sure there is no loss of content.

Option 2: Use the following bookmarklet to change spacing settings in your browser.
https://dylanb.github.io/bookmarklets.html

Note

Some areas of the template such as programs and initiatives don’t do well when spacing is changed. Inside pages tend to do better with this criterion.

Scoring for SC 1.4.12

• Score 1 = Line height and spacing adjustments are made with no loss of content.
• Score .5 = Line height and spacing adjustments cause some loss of content without creating a frustrating experience.
• Score 0 = Line height or spacing adjustments cause loss of content and result in a frustrating experience.

Success Criterion 1.4.13 – Content on Hover or Focus

Custom tooltips and other pop ups have a mechanism to dismiss or allow users to continue viewing while hovering over the new content. Content that appears upon hovering should be dismissible, hoverable and persistent.

When to Test

On pages with custom tooltips or content that appears on hover.

WCAG Guidelines

Understanding Success Criterion 1.4.13

Testing SC 1.4.13

Check the page for content that appears when the mouse hovers over an item. This excludes the content that appears by default from your browser because of a title tag. Examples of content on hover include custom tooltips that are specific to your website and help tips for filling out a form that appear when the mouse hovers over a question mark or help icon.

For custom tooltips and similar functionality, the content must be hoverable, dismissible, and persistent.

• Hoverable: New content should not disappear if the user moves the mouse from the target area over to the new content itself.
• Dismissible: New content does not cover any other content that is important. It can also be dismissed using the keyboard.
• Persistent: Once new content has appeared, it should not disappear until the mouse moves away from target or the content, the new content is dismissed, or the new content is no longer relevant (i.e., a loading message).

Note

There are not a lot of places on nyc.gov where custom tooltips are used.

Scoring for SC 1.4.13

• Score 1 = Custom tooltips are hoverable, dismissible, and persistent.
• Score 0 = One or more custom tooltip is not hoverable, dismissible, or persistent.
• N/A: Put N/A in the score field if there are no custom tooltips on the page.

Homework

Continue testing and fill in WCAG 1.1.1 through 1.4.13 by the next session. For assistance, email Walei at wsabry@doitt.nyc.gov.