This section delineates content guidelines that address the basic details of building accessible content in the District/Colleges websites, documents, and course materials.
1. Provide Titles for All Pages and Documents
Screen readers can read the title property associated with any given document, providing a brief description of the document’s content. The document title may be the only means that a person can determine the content of a document from a directory structure. Some content management systems, such as SharePoint, display this title property in their directories and can search for words within the title. Always provide a document title in the properties section of the document creation tool.
2. Provide Structure Using Headings
Headings are used to give documents and web pages structure and provide a visual indication of areas that are important on the page. They are typically formatted to stand out, so readers can visually understand the structure of the document or web page and navigate through all sections. For example, headings may use a larger, bold font and may be formatted with a larger-than-normal vertical space between paragraphs.
For purposes of accessibility, headings enable a reader to navigate the web page or document using a keyboard only, jumping from heading to heading, if desired. Headings also allow screen readers to function properly for an individual with vision limitations. In order to be usable, the text of headings must be defined with the Heading property, not just formatted to look like a heading.
3. Describe All Non- Textual Material
If non-textual objects are used to convey meaning in a document, those objects will not be understandable to a person who is blind unless the author provides a complete description that can be read by a screen reader application. As a rule, all pictures, images, shapes, charts, SmartArt, etc. must be described in the surrounding text or via Alt text (alternative text) that can be read by screen readers.
4. Use Accessible Fonts and Font Sizes
There are hundreds of different fonts to choose, but some can be very difficult to read for people with vision problems and should consequently be avoided.
Some examples to avoid (from Microsoft Office) include:
- Bauhaus 93
- Bodini MT Poster Compressed
- Brush Script MT
- Showcard Gothic
- Snap ITC
Part of the process of selecting an appropriate font should consider whether the font contains serifs or not. Serifs are the small extra embellishments that appear at the ends of some letter components. Fonts without such embellishments are referred to as sans serif fonts.
Early research in typography indicated that serif fonts, when printed on a high-quality offset press, were easier to read and enabled better retention and comprehension of the content than sans serif fonts. Theoretically, this is due to the extra information in the font face that makes it easier for the eye to quickly recognize letters and avoid the ambiguity between certain sans serif letters such as lower case “L” versus upper case “I” (for example, in the sans serif Candara font, “l” versus “I”). As low-resolution computer screens and printers came into play, the simpler sans serif fonts seemed to be superior. With today’s high-resolution screens, the equation has changed again.
Los Rios websites use serif fonts for body text and mainly sans serif fonts for headings. It is best to select a simple, easy-to-read serif font, at least 12 points in size for the main text in a document.
5. Ensure Sufficient Contrast Between Text and Background
For text to be accessible to people with low vision, there must be sufficient contrast between the text and the background. The WCAG 2.0 level AA standard requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14-point bold or larger, or 18-point regular or larger. As an example, the following table indicates the color contrast ratio for black text on grey backgrounds.
| Contrast Level | Ratio | Description |
|---|---|---|
| Great Contrast | 21.00 to 1 | Black on white provides excellent contrast |
| Good Contrast | 10.24 to 1 | Black on light grey provides reasonable contrast |
| Borderline Contrast | 5.10 to 1 | Black on medium grey provides marginal contrast |
| Failed Contrast | 3.00 to 1 | Black on dark grey provides poor contrast |
To check the contrast ratio of a given pair of colors, determine the Hex value of the foreground and background colors and input their values into a contrast calculator such as WebAIM’s Color Contrast Checker.
If color is used as the only means to convey information, that information may not be available to a person with color blindness. It is important, therefore, to provide an alternate means of understanding the content.
It is also important to avoid the use of vibrating colors. These are highly saturated bold colors that seem to vibrate when placed in close proximity to one another. Some colors may cause an after image and be bothersome to some readers.
6. Set and Confirm Reading Order
When you insert an image or other non-text object into your document, you have options to control its placement. These options include placing the object in line with text, so it appears like a single large character. A second option is to anchor the image to a location on the page and wrap text around it. Anchored images may create complications in reading order for screen readers. Whenever possible, place images inline with text and format the paragraph containing the image with a centered paragraph style. Otherwise, you must explicitly set the reading order within your application. Check that the document’s reading order is logical and consistent with the document’s intent and structure.
7. Caption All Images, Figures, Charts, and Tables
Captions on images, figures, charts, and tables provide useful information to users of screen readers about the content of the captioned object.
In most applications, to insert a caption, right-click the object, select the Insert Caption… option from the list, and complete the caption dialog box. To invoke this option for a table in Microsoft Word, visit the Table Properties dialog box.
8. Format Lists Using List Attributes
Lists often provide the reader with a welcome relief to a solid block of text and can be effective in conveying related information. Lists can be either ordered or unordered. When creating lists, it is important to use the built-in features of your application rather than creating the list by manually inserting bullet-like characters or numbers before each line.
For example, in Microsoft Word, use the Bullet function on the Home tab of the ribbon to apply bullets to text. In HTML, use the unordered list (<ul>) and ordered list (<ol>) tags to designate lists and the list item (<li>) tags to designate each item in the lists. Screen readers can interpret this formatting as a list and read the content appropriately.
9. Format Tables Using Table Attributes
To enable a screen reader to correctly interpret and read data in tables, always include a header row defining the data in each column. In web pages, this requires the use of the table header (TH) and table data (TD) HTML elements.
In documents, the header row should be formatted to reappear on top of the table if it is split across pages. In Microsoft Word, this can be done by first selecting the top header row, then right-clicking and selecting Table Properties, and checking the Repeat as header row at the top of each page option under the Rows tab.