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

Applicability

This technique is applicable to Cascading Style Sheet / HTML technologies.

This technique relates to 1.4.10: Reflow (Sufficient).

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:

  • "-" Hyphen
  • " " Space
  • "?" Question (IE, Chrome, Safari)
  • "&" Ampersand (Firefox only)

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, 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;}

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.

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.