Document Structure

Are you relying on your readers to understand what a heading is based on visual formatting, like bold and italic, or are you using Word’s built-in styles to identify what the components of your document actually are? Use correct heading levels in Word and check your document structure in Word’s Outline view to ensure that you can navigate through the document as expected. Will you be able to generate a functional table of contents based on the headings used? Or is the entire document just Normal text with visual formatting applied? Identify the elements of your content in terms of what they are, rather than in terms of what they look like.

Fig. 1

A document styled entirely as Normal.

Fig. 2

A document using Word’s built-in styles for headings and quotes.

Relying on visual formatting in Word to convey semantic meaning can make it harder to create useful and accessible XML, HTML, PDFs, EPUBs, and other formats. The more accessibility obstacles you can address in Word, the easier it will be to ensure your content is accessible to everyone later in your workflow.

If you aren’t already, make sure non-printing characters are visible! There are many ways for documents to become unreadable to a screen reader, and authors sometimes use line breaks and hard returns to force a visual style that isn’t actually appropriate for the content.

Special Characters

Authors also frequently end up with the wrong symbol or special character, so make sure all the special characters are actually supposed to be there. Many symbols and special characters can be visually indistinguishable from each other, depending on the font, but they mean very different things, and will be read very differently by a screen reader, or may appear completely different when the font changes at layout.

Some common errors involve selecting Greek beta β instead of a German Eszett ß, or vice versa, or using the masculine ordinal symbol º instead of the degree symbol ° (they are very close to each other on Word’s insert symbol menu).

Fig. 3

Venn diagram of overlapping letterforms between Latin, Greek, and Cyrillic alphabets.

Tables

Are your tables actually tables, or just tab-separated columns?

Is this content supposed to be in a table, or did someone just put it in a table because it looked nice to them that way? Tables should be used for data, not just visual formatting.

Is there cell shading? Is color used in fonts or cells to convey meaning, or because someone thought it looked nice that way? Using color and shading to indicate different types of data is useless if someone is using a screen-reader.

Are there graphics inside table cells, and do those graphics have alt-text? If you absolutely have to use graphics inside table cells, make sure a screen-reader will be able to convey the relevant information at the right time.

You may want to include an accessibility caption to summarize the data for long, complex tables.

Table 1

Pirate flag motifs and what not to do with table cell shading .

In the XML, table @header and @scope attributes make explicit the relationship between a table header cell and the cells(s) to which it applies. Table headers are not always in <th> elements at the top of a table; for example, the cells in the first row of a table may be “headers” that relate to the rest of the cells in the current row, and when table cells are read aloud by a screen reader this relationship needs to be explicitly declared. The @scope attribute specifies the cells for which the current cell acts as a header.

Figures

Do all your figures have accessibility captions? Alt text shouldn’t just repeat the figure caption, since it both describes the image audibly for anyone using a screen reader, and also replaces the figure for a sighted reader if the actual image fails to load. You may also need to use <long-desc>, a long description, to provide an extended description of an object, such as a textual summary of a pie chart that explains both the visual form of the chart and the significance of its findings.

What’s actually in your figures? Don’t use red and green as contrasting colors, since those can be indistinguishable to color-blind readers. Make sure there is sufficient contrast between colors in your graphics: light text on a light background or dark text on a dark background isn’t particularly readable to anyone.

Speaking of which, if you have text inside the image, does it need to be there, or can it be moved to the caption? Try to keep text inside a figure as minimal as possible.

Are you using high-resolution graphics? How do they scale at different sizes? Check your graphic files outside Word, as well, and use alternative versions of a graphic if necessary to keep your images looking as good as possible if a reader needs to zoom in.

Math

It’s always best to use real math, rather than a graphic. MathType equations can be turned into MathML, but an image is just an image. If MathML doesn’t work everywhere you publish your content, you can use <alternatives> to include an image, and <alt-text> to go with the image of the equation.

Either way, don’t just use tabs and spaces to format equations (yes, people have done this).

Fig. 4

Don’t do this.

Audio and Video

Include a transcript for audio and video whenever possible. Not everyone will be able to hear or understand your audio content, plus it makes it easier for everyone to share excerpts across other platforms. Videos might require too much bandwidth for readers with internet access problems. A plain-text alternative is always helpful, and can be collapsed or linked externally if you don’t want to display the full transcript as part of the main document.

Videos should also be captioned, especially if there’s no transcript. Even an imperfect transcript is better than nothing if a reader can’t hear, or if the audio or video won’t load.

Schematron

If you’re already running a tool like Schematron to check for editorial issues, you should leverage that tool to check for many of these accessibility obstacles. If you’re not already running a tool like Schematron, you might want to look into that. Some of the things you can check for with Schematron include:

• Every <fig> contains <alt-text>
  • <alt-text> meets length requirements
  • <alt-text> doesn’t just repeat the figure caption
  • <long-desc> is present and readable (avoid putting URLs in accessibility elements meant for screen readers)

Bad XML sample:

<fig>
   <label>Figure 1</label>
   <caption><p>Blackbeard’s pirate flag</p></caption>
   <alt-text>Blackbeard’s pirate flag</alt-text>
   <long-desc>A picture of a pirate flag, https://en.wikipedia.org/wiki/Flag_of_Blackbeard</long-desc>
</fig>
					

Good XML sample:

<fig>
   <label>Figure 1</label>
   <caption><p>Blackbeard’s pirate flag</p></caption>
   <alt-text>A black flag with a skeleton and a heart</alt-text>
   <long-desc>A black flag with a white horned skeleton using a spear to pierce a bleeding red heart</long-desc>
</fig>
					

Fig. 5

Blackbeard’s pirate flag.

• Check xml:lang attribute value on translated abstracts against the Abstract Title word
  • If your content is in multiple languages, identify each language

Sample XML where the title word matches the language code:

<trans-abstract xml:lang="fr">
   <title>Résumé</title>
   <p>Ceci est le résumé traduit en français</p>
</trans-abstract>
					

• Heading levels and overall document structure
• Abstract length, presence of short abstract
• List structure and labels (the bullet should not be part of the list item text)

Sample XML (don’t do this):

<list list-type="bullet">
   <list-item>
   <p>• A list item with a run-in bullet</p>
</list-item>
					

• Tables
  • structure
  • scope attributes
  • presence of cell shading
• mml:math or tex-math is present for <disp-formula> and <inline-formula>, not just a graphic pointer
  • <alternatives> if needed
• Length of text inside <xref> for clickability ( Figure 1 versus Figure 1 )

Sample XML (less clickable):

See figure <xref ref-type="fig">1</fig>
					

Sample XML (more clickable):

See <xref ref-type="fig">figure 1</fig>
					

• Transcript for audio and video
• URL text versus URL link
  • Text isn’t just “Click here”
  • If link and text are the same, will a screen reader be able to convey where the link goes?

Sample XML (this will be very annoying to hear out loud):

<ext-link xlink:href="https://www.ReadingThisLinkOutLoudSoundsBad">https://www.ReadingThisLinkOutLoudSoundsBad</ext-link>
					

Sample XML (this provides more context for the link):

<ext-link xlink:href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt text decision tree</ext-link>
					

Schematron can’t check everything! It can’t inspect your figures or check that your videos have captions. Remember to look at your graphics as early as possible, and again at layout. Schematron can’t tell you if your content is using visual formatting and face markup where it really needs to use semantically meaningful tags, or if a special character was used incorrectly in most contexts. Schematron can’t tell you if your content will be rendered incorrectly at layout, or in any given platform further downstream.

Every stage of your document’s lifecycle is another chance to check for accessibility obstacles. Automate as many accessibility checks as you can, but automation can’t do everything.

JATS Accessibility Tagging

While XML is theoretically inherently accessible as a text format, JATS (and BITS and STS) has several elements and attributes that can help with accessibility tagging. This section contains excerpts from the JATS accessibility tagging documentation , which contains more information on the following elements and attributes:

• @alt attribute for pronunciation
  • Sometimes an <abbrev>, <label>, or <xref> should be pronounced in a way that is not reflected in its content or tagging (i.e., “Fig.” vs “figure”)
  • @alt can be used to record the pronunciation for screen readers
• Pronouncing Abstract
  • a very short synopsis abstract to make it easier for a screen-reader to tell someone what the document is about: <abstract> can have @abstract-type value “meta-description”, “description”, or “dc:description”
• <alt-text>
  • Cannot contain face markup (no bold, no italic, etc)
  • Don’t put a URL in there, either
• <alternatives>
  • a container for collecting multiple versions of a single object, for example, to provide a textual alternative to a graphic or media object or to provide an additional enlarged graphic for accessibility
• Table @header and @scope attributes
  • make explicit the relationship between a table header cell and the cells(s) to which it applies
  • Table headers are not always in <th> elements at the top of a table; for example, the cells in the first row of a table may be “headers” that relate to the rest of the cells in the current row, and when table cells are read aloud by a screen reader this relationship needs to be explicitly declared
  • @scope specifies the cells for which the current cell acts as a header, specified not as individual cells but as a group by keyword
    The @scope attribute applies to both <td> and <th> since a table cell in the first column may act as a label (header) for the other cells in the same row. The values for @scope are keywords, which provide an alternative to describing the header by naming header elements explicitly (using @headers on a <th> or <td> element).

Fig. 6

Scope of a column and scope of a row.

Competing Access Needs: Tech Version

Sometimes what’s required to make content accessible in one browser or platform makes it break in another one. One solution is to create different EPUB files for different environments and give them different ISBNs. Is that a pain for publishers? Yes . Does it make the work accessible to the maximum number of readers? Also yes .

Automate and adjust where you can to make it as easy as possible to create multiple versions of a document from a single source.

Check Your Website

When was the last time you did an accessibility audit of your website? If you want to build an accessible website, you have to start with accessible content. A hosting vendor can’t add meaningful alt-text to your graphics. While some platforms do run some checks for certain accessibility tags, they are not comprehensive, and they can’t fix your accessibility problems for you.