Accessibility - Web Standards: Mastering HTML5, CSS3, and XML - page 359

More complex Ruby annotations can specify not only the default display and fallback mechanism shown earlier
but also positioning offsets, alignment, spacing, and overhang. The Ruby annotation was introduced as an XHTML 1.1
module and can also be used in HTML5. The Ruby annotations can also be styled using CSS3, which provides precise
positioning and line breaking, defines the Ruby box model, and supports the vertical-ideographic layout mode [34].
The most accessible documents apply standard diacritical marks that can be turned on and off.
Properly selected positioning and units should be applied that support the zooming and text resizing features of
browsers.
Accessible web sites have controls that allow users to incrementally change the size of all text (up to 200 percent).
Loss of content or functionality is not acceptable when the text is resized, and the proportions of the text containers
must remain the same.

User Interface
Content must be accessible through alternate user interfaces. Properly written markup must be provided that allows
assistive technology to understand the content, expose information such as form control IDs, and control certain
elements through an API (for example, the DOM).
Standard DOM functions must be applied to dynamically add content to web pages instead of scripting as
script-generated contents are often inaccessible by screen readers.

■ screen readers may not automatically read dynamically added content. reading of dynamically added new
content can be ensured by setting the focus to the new element or adding it below the current location where it will be
encountered as the user continues browsing.

Note

Liquid layout should be used on all web sites to present content without introducing unnecessary horizontal
scroll bars. Page content should adapt to the available horizontal space. Layout regions should be resized with text
and reflow as needed to display the page section. Highly accessible web sites eliminate horizontal scrolling even if
the user resizes the browser window. One of the options to achieve such a foolproof layout is to specify proportional
text containers through Responsive Web Design. If it is not feasible on the default screen, an alternate layout may be
provided that does not require horizontal scrolling.
Content positioning should be based on structural markup. The appearance can be enhanced with CSS, but the
content structure must also remain meaningful without style sheets.
If the content of the default version of a web page is not accessible but an alternate, WCAG-conforming version is,
that web page must be linked at the beginning of the nonconforming page. If inaccessible objects cannot be eliminated
from the content, a link must be added adjacent to or associated with these objects that link to an alternate, WCAG-
compliant version. User preference must be saved in a cookie. The accessibility of the alternate version must always be
ensured with .htaccess or the HTTP referrer header. A style switcher must be provided to ensure an alternate version
with WCAG-compliant styles. 2 Three different types of style sheets are required to create a style switcher:

1.

Persistent CSS file: The base styles that are used to share common styles throughout the site.
The rel attribute is set to stylesheet , while the title attribute is omitted (Listing 10-6).

Listing 10-6. A Persistent CSS File

<link rel="stylesheet" type="text/css" href="styles/main.css" />

2 Since not all functionalities can be provided through CSS, a conforming alternate version of a web site cannot always be
provided by simply creating additional style sheets.