Allowing for Reflow with Long URLs and Strings of Text

Important Information about Techniques

See Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.1 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.1.

Applicability

Content using technologies that support Cascading Style Sheets (CSS).

This technique is not referenced from any Understanding document.

Description

Long sets of characters without a space, such as URLs shown as content, can break reflow when the page is zoomed. The objective of this technique is to present URLs without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels or a vertical scroll bar at a height equivalent to 256 CSS pixels. This is done by using CSS techniques that adapt to the available viewport space. Note: Using a human readable text link, rather than a long URL, is better for usability and accessibility.

By default most browsers will wrap long URLs at the following characters:

Sometimes these are not enough to ensure that long URLs will not overflow the viewport.

Examples

Example 1: Example: Breaking long URLs

Using the following CSS will cause long URLs to break at appropriate places (hyphens, spaces, etc.) and within words without causing reflow.

List of CSS declarations used and why they are used:

  • overflow-wrap: break-word: Allows words to be broken and wrapped within words.
  • word-wrap: break-word: Allows words to be broken and wrapped within. (Microsoft only) 
    a {overflow-wrap: break-word;}

Note: IE and Edge only support this declaration when used with the * (wildcard) selector 

    * { word-wrap: break-word;}

Working Example

Tests

Procedure

For strings of text that are wider than 320px check:

  1. Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.
  2. Zoom in by 400%.
  3. For content read horizontally, check that all content and functionality is available without horizontal scrolling.
  4. For content read vertically, check that all content and functionality is available without vertical scrolling.
Note

If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.

Expected Results

Checks #3 and #4 are true.