Text Customization in UAAG 2.0

Reflow Text in UAAG

1.8.x. Reflow Text: The user can specify that text content in a graphical viewport reflows so that blocks of text fit within the width of the viewport in a single column. (Level A)

Note: Reflow applies to rescaled or zoomed text.

[internal notes: 1.8.12 from the 23 August draft said: "Reflowing Zoom: The user can request that when reflowable content in a graphical viewport is rescaled..." In the 16 September draft, the important aspect of zoom got lost -- although it is good to be more broad that text should be reflowable whether or not zoomed, I think it would be good to note that it especially applies to rescaled/zoomed content. Also "Reduce Horizontal Scrolling" does not cover reflowing from multiple columns to a single column, which is a primarily use for reflow. The importance of not having to scroll horizontally OR from the bottom of one column to the top of the next column is addressed at http://www.tader.info/scrolling.html ]

Reflow Text in Implementing

Current text in Intent: ... Content is not easily usable if the user has to scroll back and forth to see a single line of text. ...
Suggested edit: ... Content is not easily usable if the user has to scroll back and forth horizontally to see a single line of text, or has to scroll to get from the bottom of a column to the top of the next column to read a block of text. It is especially important that users can blocks of text reflow when zoomed.

Current text in Examples: Maggie has cognitive issues that make it difficult for her to reorient when the computer screen changes. Finding and activating scrollbars, then finding the next words in the sentence requires more effort and causes Maggie to lose her orientation which degrades her reading flow and comprehension. She finds it easier to reorient after zooming when at least one dimension of the content fits within the height or width of the viewport.
Suggested edit to last sentence: Maggie has cognitive issues that make it difficult for her to reorient when the computer screen changes. Finding and activating scrollbars, then finding the next words in the sentence requires more effort and causes Maggie to lose her orientation which degrades her reading flow and comprehension. When text is reflowed so it is in one column that doesn't require horizontal scrolling or vertical scrolling to get to another column, she can read and understand it.

Additional example:

• Ansgard has low vision and physical disabilities that makes it difficult to use the mouse. He zooms text to read it. When reading PDF documents, he uses a special viewer that lets him zoom and reflow the content into a single column that fits the window. This is especially useful for scientific papers and newsletters that are in that are multiple columns.

Additional related SC:

• 1.4.4. Printing reflowed, zoomed, and configured text

Allow Zoom in Implementing

Current text in Examples: Tanya has low vision. She opens a web application that uses small text fonts, mixed with graphical elements. She tries increasing the text size alone, but the graphical elements remain at their original sizes. She can't interpret the small graphical elements and the text flows improperly. However, when Tanya uses the zoom feature, the graphical elements are legible, and the page flows correctly.

Suggested edit: Tanya has low vision and needs large text. On web pages with only decorative graphics, she increases the text size and leaves the graphics small. However, she is using a web application with important graphics. Since she wants both the graphics and the text to be bigger, she uses the zoom page feature.

[internal note: Especially delete "She can't interpret the small graphical elements and the text flows improperly." because the text should flow properly! :-]

Allow Viewport Resize in Implementing

Current text in intent: This benefits keyboard users who may find it difficult to scroll content, and users with cognitive or learning disabilities whose understanding of the content is aided by viewing the complete image.
Suggested edit to last sentence: This benefits keyboard users who may find it difficult to scroll content, and users with cognitive or learning disabilities whose understanding of the content is aided by viewing the complete image, or by shortening the line length.

Additional example:

• Vaalu has tunnel vision and can only see a few words at a time. If blocks of text are in long lines, it is difficult for him to get from the end of one line to the beginning of the next line. He often makes the viewport narrower and rewraps the text so the text is in shorter lines.

Glossary addition

blocks of text

more than one sentence of text

[internal note: based on WCAG definition of blocks of text]

Text Configuration in Implementing document

Implementing Guideline 1.4 - Provide text configuration

Guideline 1.4 addresses text configuration, and the success criteria specify text characteristics that users need to be able to configure.

Note: All of the success criteria under guideline 1.4 allow users to override the text characteristics specified by authors, and override user agent defaults.

The text characteristics are separated into levels based on user needs. Therefore, some text characteristics are in two success criteria — with less configuration at a higher level (A or AA), and more configuration at a lower level (AA or AAA), as explained below.

Global and element level:

• Success criteria 1.4.1, 1.4.3, and 1.4.6 address configuration at a global level, that is, it changes all of the text.
• Success criteria 1.4.2 and 1.4.5 are at an element level, such as configuring just the heading text.

The difference between global and element-level configuration is why some characteristics are in two success criteria; for example, text scale globally is Level A (1.4.1), and text scale at the element-level is Level AA (1.4.2).

Settings:

For some text characteristics, the settings for configuration are at different level success criteria. For example, users need to be able to configure line spacing; however, it may be difficult for some platforms to provide granular configuration settings. Therefore, four line spacing options are at Level AA (1.4.3) and granular line spacing is at Level AAA (1.4.6). This allows platforms where such granularity would by difficult to provide basic line spacing settings at Level AA, and for other platforms to provide more line spacing settings.

Levels A, AA, AAA and user interface

In many platforms, it is technically easy to provide all of the text configuration in the success criteria of guideline 1.4, including the level AAA success criteria. However, all of the options maybe too overwhelming for many users. The levels may be useful for user agent developers in deciding which text configuration to provide in the basic user interface, and which to provide through progressive disclosure to advanced users.

Ideally, at least the level A and AA text configuration is provided through the user agent's main user interface. However, the success criteria in guideline 1.4 can be met through user stylesheets. For platforms without user stylesheets, text configuration needs to be provide to users another way.

Intent of Guideline 1.4

Some users with low vision, dyslexia, and related conditions and situations cannot read "normally-formatted" text. However, they can read text that is formatted differently, for example, with larger letters, different font, more spacing, etc. [@@ need to say more here...]

Examples of Guideline 1.4

• Text scale: Lee has low vision from albinism and has difficulty seeing small fonts. The browser on her mobile phone provides 3 font sizes: small, medium, and large. However, the large isn't big enough. The mobile phone settings provide an option to override the 3 font sizes with the operating system font range, so that Lee can select the specific font size she needs. [internal note: this is based on an existing example. that large isn't big enough seems more compelling, and realistic. is it accurate that phones provide such functionality?]
• Color: Lee has low vision from albinism and when the background is white, it is hard for her to read and hurts her eyes. She changes the colors in her operating system to white text on a black background. Some websites pick up the system colors and some do not, so she also changed the colors through her browser settings.
• Font family: Mike has a reading disability. Sometimes websites use fancy script fonts, especially for headings, that he cannot understand. He used his browser's font settings to select plain fonts that he can read.
• Element-level customization, borders: Wade has low vision and needs large text, extra line spacing, a muted background color, and other text customization in order to read. If all the text was increased proportionally, the headings would be very big, navigation links would break across lines more, less text would be visible at a time, and the page would require much more scrolling. If all text was increased to be the same size, headings can become indistinguishable. To make web pages readable, Wade uses a user stylesheet to change the way the headings are displayed (among other things). He makes the headings a little smaller than the main text, uses a different font and color, has little space before and after, and adds borders. By changing the heading elements differently than that main text, Wade can easily distinguish headings without the drawbacks of having them too large. [internal note: illustrations of each option]
• Line-spacing: Suzanne's vision has deteriorated due to aging and she has had cataract surgery. When reading blocks of text, they become a gray mass and she cannot skim or track from the end of one line to the next if the line spacing is "normal". In one browser she uses a toolbar that increases the line spacing. For another browser, a friend coded a bookmarklet that she uses to increase line spacing. [internal note: this is documented in an rdwg list e-mail]
• Character spacing, word spacing, style: Abdullah has dyslexia and low vision, and has trouble telling letters and words apart. When he increases the character spacing and word spacing he can better distinguish each letter and understand the words. When text is underlined, such as links, it makes it hard for him to read, so he turns off underlining.
• Justification, printing: Jamee has dyslexia that makes it hard for her to keep her focus on words. When text is fully justified, there are sometimes lots of space between words and in long paragraphs of text, these create "rives of white". She sees the spaces and has trouble focusing on the words. When Jamee changes from full justification to left justification, there is normal space between words and she can read much better. If she tries to read much online, she loses her place. Therefore, she often prints text then uses a blank piece of paper to cover up the line below where she is reading. [internal note: some about justification]
• Printing: Ansgard has multiple sclerosis that causes low vision, fatigue, and muscle spasticity. He cannot sit and read from his computer for very long at a time, so for long articles, he prints them and reads them in a more comfortable position. He configures the text to be readable and to use as little paper as possible; for example, he sets large text overall, making headings the same size; he makes headings bold and underlined to stand out; he sets overall margins narrow to get more text on a printed page. [internal note: the importance of printing is explained with supporting data at http://www.tader.info/printing.html ]

Related Resources for Guideline 1.4

Many users who need to configure text also need to zoom, reflow, and change the viewport.

• Success Criteria x.x.x Allow Zoom
• Success Criteria x.x.x Reflow Text
• Success Criteria x.x.x Resize Viewport
• Guideline 1.7 Enable Configuration of User Stylesheets addresses the management of user sylesheets (rather than the text configuration aspects of style sheets).

Text Configuration in UAAG doc

Guideline 1.4 - Provide text configuration

Note: All of the success criteria under guideline 1.4 allow users to override the text characteristics specified by authors, and override user agent defaults.

Summary: The user can set text scale, color, and font family globally (1.4.1, Level A); set text scale, color, and font family for elements (1.4.3, Level AA); set line spacing, character spacing, word spacing, text style, and undo full justification globally (1.4.3, Level AA); set text style, margins, and borders for elements (1.4.5, Level AAA); set line spacing, justification, capitalization, hyphenation, margins, and borders globally (1.4.6, Level AAA); and print configured and reflowed text (1.4.4 Level AA).

(Level A)

1.4.1 Configure text globally (A): The user can globally set all of the following characteristics of visually rendered text content: (Level A)

• Text scale (the general size of text)
• Text color and background color, choosing from all platform color options
• Font family, choosing from all platform fonts

(Level AA)

1.4.2. Configure text elements (AA): The user can set all of the following characteristics of visually rendered text content for headings, main text, and other elements: (Level AA)

• Text scale (the general size of text)
• Text color and background color, choosing from all platform color options
• Font family, choosing from all platform fonts

1.4.3. Configure text globally (AA): The user can globally set all of the following characteristics of visually rendered blocks of text: (Level AA)

• Line spacing of at least 1.0, 1.3, 1.5, and 2.0
  
• Character spacing of at least 0.01, 0.03, 0.06, 0.09
• Word spacing of at least 0.01, 0.03, 0.06, 0.09
• Text style (underline, italic, bold)
• Justification - undo full justification

1.4.4. Printing configured and reflowed text: The user can print blocks of text that is configured according to the success criteria of guideline 1.4 and/or reflowed according to success criteria 1.8.x, including text that is zoomed. (Level AA)

(Level AAA)

1.4.5 Configure text elements (AAA): The user can set all of the following characteristics of visually rendered text content for headings, main text, and other elements: (Level AAA)

• Text style (underline, italic, bold)
• Margins (for example, space above headings, indentation of lists)
• Borders

1.4.6 Configure text globally (AAA): The user can globally set all of the following characteristics of visually rendered blocks of text: (Level AAA)

• Line spacing between 0.7 and 3.0, at increments of 0.10.
• Justification (setting left, right, or full)
• Capitalization (undoing all caps)
• Hyphenation
• Margins (to clear clutter away from blocks of text)
• Borders

[Internal Note: In thinking about short handles for these, I looked at what WCAG did with aspects in different SC, e.g.: 1.4.3 Contrast (Minimum) (Level AA), 1.4.6 Contrast (Enhanced) (Level AAA) and some other things, but none that cover 3 levels. Above has (A, AA, AAA) for simplicity. I can help come up with words if you would prefer.]