Skip to content

Technique C33:Allowing for Reflow with Long URLs and Strings of Text

About this Technique

This technique relates to 1.4.10: Reflow (Sufficient).

This technique applies to CSS and HTML.

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:

  • "&" Ampersand
  • "/" Forward Slash
  • "-" Hyphen
  • "?" Question Mark

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

Examples

Example 1: Breaking long URLs

Using the following CSS will cause long URLs to break at appropriate places (hyphens, forward slashes, 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.
a {
  overflow-wrap: break-word;
  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

#3 and #4 are true.

Back to Top