LEARN

Consistent structure

An easy way to ensure that things such as emails and documents are accessible is to make sure that the structure of each document is clearly labeled for assistive technologies to navigate them. This means using preset structures like document headings, tables, lists and slide templates as they are built so that computer tools can read these structures. These features have been tested with a variety of assistive technologies and are integrated into the application to cut down on the amount of accessibility work required of you.

Use headings

Headings help to organize a document, provide consistency of information and improve navigability. For users of screen reader tools, headings are an important method of identifying which blocks of text are headings and what level each heading occupies in the hierarchy of the document. This provides better navigation and allows screen reader users to skim the page by jumping from heading to heading. Headings can also be customized to ensure that your entire document is in the same style.

Example

This book is formatted using headings. In this chapter, “LEARN” is written in “Heading 1” style, and “Use headings” is a “Heading 2”, while “Example” is “Heading 3”. We always want to use headings in order, without skipping any, in order for the structuring to be consistent. If we wanted one of the headings to display a different way, we can choose that text and modify the formatting without changing the fact that it’s labelled as a heading!

Use lists

Lists are used to contextualize and organize items for easier usability and understanding. They provide a way for linear content to appear in a structured manner and are more accessible than using simple tables to convey similar information. Ordered (numbered) and unordered (bulleted) lists also enable screen reader tools to provide more context to users.

Example

• Lists break up long blocks of text
• This list is unordered
  • It’s still capable of complex structure though!

Use meaningful hyperlinks

Meaningful and descriptive hyperlinks provide context and clarity to otherwise messy URLs. By including language that conveys relevant information about the link’s destination, users will have a clear understanding behind the meaning and intention of the hyperlink.

Example

Perhaps we want to direct people to this book. Here are a few ways we could do that:

• We could tell people to read the online ebook Quick Tips for Accessibility
  • In this case, it is clear what the link is leading to, and we also used some additional text to tell people what kind of link it was (to an ebook). It is especially important to let people know what kind of link it is if it’s an automatic download, so they know to expect that!
• We could include the full URL: https://uw.pressbooks.pub/quicktips/
  • In this case, most of the relevant information is communicated by the URL (the fact it’s a Pressbook, it’s from the UW, and a brief overview of the title) but it’s still a somewhat messy way to include the information. However, sometimes it is not possible to include a hyperlink (such as for a plain text email, or a printed out piece of paper), in which case including a short and descriptive URL (either by editing the URL or generating one) is necessary.
• We could tell people to click here
  • In this case, people have to assume what the link is leading to, and if someone were to make a list of all links (as screenreader software often does!) then they wouldn’t have the context to make a reasonable assumption!

Include alt text

Alternative text (alt text) provides non-sighted users an opportunity to understand the context of an image and the message it is trying to convey. It also provides additional description when images break and do not appear as intended. More information about alternative text can be found at WebAIM: Alternative Text

Example

There are infinite ways that one could describe this picture in the alt text. Here are some options:

• A black and white tuxedo cat wears a red garment, and is perched on a couch looking off to the side.
• My cat wearing a hoodie I knit for her!
• A red couch with a gold and red patterned pillow, in front of which is a black and white cat wearing a red item of clothing.

The exact alt text you should use depends on what the purpose of the image in your work is. If this image was being put on a personal crafting website, for example, it would make sense to include the information that I knit the hoodie and perhaps the pattern name. For the purposes of this book, a brief and more objective summary makes more sense!

Check color contrast

If our colors are too similar, or don’t take color blindness into consideration, people may not be able to actually read the information presented. We can use tools such as WebAIM’s Contrast Checker to see if materials meet accessibility guidelines. We do not want to use color as the only method for distinguishing information. Consider pairing color with another visual indicator (like boldface type or increasing the font size).

Example

This text is accessible. The font is a dark blue that with a white background, providing enough contrast for readability.

This text is not accessible. The font is a dark blue, but with a dark green background, and two colors are too similar for easy readability.

Consider your layout

Keep lots of white space in the document to aid readability. Use consistent fonts, and stick to readable sans serif options such as Veranda, Ariel or Helvetica. Ensure font size large enough to be readable, with at least 10 points for documents and at least 24 font for presentations. Use lists, either bulleted or numbered.

Example

This book uses the standard layouts of Pressbooks, with some choices about when to use capitalization. What aspects of this formatting make it more readable to you? What might you change?

A note about tables

If we have data that needs to be displayed via a table, there are a couple of important things to consider in ensuring that the table will be navigable by accessibility software. First, we should be sure to designate a header row and column so that each cell is clearly labeled as to what the data is correlated with. We should also try to keep it to one bit of data per cell, and not merge cells or otherwise disrupt the table structure in such a way that makes it unclear about where the header and column are assigned.

Example

APPLY

Knowledge check