Accessibility Recipes/Title Pages

From DPWiki
Jump to navigation Jump to search

There are two traps we can fall into with title pages, namely using heading markup inappropriately, and breaking up phrases that belong together.

What to do and how?

Use an <h1> for the title of the book (the whole title, not just the largest part). Use <p>s for the other parts of the title page, being careful not to break up phrases that belong together. Use CSS, linebreaks <br />, and the <big> and <small> elements, to style these the way you want. Here is an example:

Titlepg-example.png

This could be handled as follows. In the CSS:

h1 {    text-align:center; line-height:1.5; }
p.title { text-align:center; text-indent:0;
        font-weight:bold; font-variant:small-caps;
        line-height:1.4; margin-bottom:3em; }
small { font-size:60%; }
big {   font-size:140%; }

and in the HTML:

 <h1>
 <big>YOUNG CAPTAIN JACK</big><br />
 <small>OR</small><br />
 <i>THE SON OF A SOLDIER</i>
 </h1>
 
 <p class="title">
 BY<br />
 <big>HORATIO ALGER, Jr.</big><br />
 AUTHOR OF "OUT FOR BUSINESS," "FALLING IN WITH FORTUNE,"<br />
 "ADRIFT IN NEW YORK," "TATTERED TOM,"<br />
 "RAGGED DICK," ETC.
 </p>
 
 <p class="title">
 COMPLETED BY<br />
 <big>ARTHUR M. WINFIELD</big><br />
 AUTHOR OF "THE ROVER BOYS SERIES," ETC.
 </p>
 
 <p class="title" style="margin-top:5em;">
 NEW YORK<br />
 THE MERSHON COMPANY<br />
 PUBLISHERS
 </p>

This is only one of many possible ways of doing it. The important features are firstly that complete phrases are kept together (rather than, say, putting the words "completed by" in a <p> of their own). Secondly, the styles are done using appropriate elements and CSS (rather than inappropriately using <h2> and <h3> say—headings are meant to be a title for a section of content that follows them).

Why?

W3C:

  • WCAG 1, Checkpoints 3.3, 3.5 Use style sheets to control layout and presentation. Use header elements to convey document structure and use them according to specification. Do not use headers for font effects. (Priority 2)
  • Draft WCAG 2, Success criterion 1.3 Information and relationships conveyed through presentation can be programmatically determined (Level A)

See especially Failure Example 2!

Note: Purists might even argue against the use of the presentational HTML elements <big>, <small> and <i>, preferring that all formatting should be done with CSS. If you agree, replace them with something like <span class="big"> etc.

Who benefits?

Screenreader users (blind people, people of low vision, dyslexics, anyone who likes having the book read to them). This is because the screenreader will announce headings, and will pause at ends of <p> elements because it thinks they are ends of paragraphs.

I tried using Guiguts autogenerated markup for the above title page, and then listened to it in FireVox. This is how it sounded (imagine a slightly robotic voice, and pause at all the full-stops!)

Heading level 1: Young Captain Jack. Or. The son of a soldier. Heading level 3: By. Heading level 2: Horatio Alger ...

People who orient and navigate by headings (people with motor problems, possibly people with learning disabilities). This is because many assistive technologies allow you to call up a list of all the heading elements on the page, and jump to them. Here's how it looks in FireVox:

Firevox level2headings.jpg
Firevox level3headings.jpg

(I added a few dummy chapters and sections.) Better screenreaders might display it more like an outline, with the level 3 headings below their respective level 2 headings.

See the peculiar headings for "HORATIO ALGER, Jr." and "BY"? The latter is merely amusing; the former rather suggests you can jump to a section that will tell you all about him!

Additionally, Project Gutenberg now generates EPUB and Mobi formats from the HTML, and uses the headings to generate the Table of Contents.

Drawbacks

None, other than the effort involved, since it isn't what Guiguts generates.

Testing

  • When you validate your document, go to the Validator's Extended Interface (linked from the main validator page, and available for URL, upload, or text box validation). Choose the Show Outline option.
  • Install a screenreader, and listen to parts of your document.

Further Reading