Best Practices for All Documents
Font Style and Size
- Fonts: Simple, standard fonts such as Sans Serif, Arial, and Verdana are recommended for their readability and availability.
- Font Size: 12 points or larger is recommended for readability.
Color
- Do not solely rely on color as a way to differentiate items or create emphasis in text.
- Good contrast is necessary for users with low-vision and color-blindness to view content clearly.
- Use bold text or styles in place of color for emphasis so that it is “visible” to screen readers, which does not differentiate between different colors of text.
Images
Alternative text and captions allow users with screen readers to “read” the content of images, graphics, and tables.
Alternative Text
- When creating alternative text, try to keep it simple and descriptive by asking yourself:
- Why is this image being used?
- What message is it conveying?
- It is not necessary to include “Photo/Image of…” in the alternative text since screen readers will discern it is an image.
- In most software applications (i.e., Microsoft, Google, etc.), right-clicking an image will bring up the option to add Alt Text or the option will be given when originally embedding the image.
- If you leave the alternative text blank in WordPress, the image will be marked decorative.
Image captions
- Captions should include factual information (information that solely deals with facts).
- When using captions, you should also include alternative text.
Considerations
- Avoid using images of text (where text is part of an image), as this is problematic for those using mobile phones/tablets and for those with low vision or using screen readers. (This does not apply to logos.)
- When using images, graphics, and tables, be sure they provide meaningful context and not just visual interest to your document.
- Screen readers work better with images formatted to display in-line with text rather than wrapping or floating text around the image.
- Include an accessible name when using an image link.
- If an image link is missing an accessible name, screen reader users will not know what the link is supposed to do. In this case, many screen readers will read the URL of the link instead.
Video Content
- To make video content accessible for users with cognitive and hearing impairments, all media hosted in Panopto via media.lafayette.edu will be automatically captioned. Additionally, users can edit captions and upload/edit transcript files associated with media in Panopto.
- Web conferencing tools such as Google Meet and Zoom have built-in captioning tools that can either be turned on by the user in Google Meet or by the host of the meeting in Zoom.
Headings (Built-in Formatting Styles)
Headings allow for navigation of documents, the creation of a Table of Contents, and allow users to jump to individual headings (sections). They also provide a structure to the document that improves usability for all users while creating a more visual style for the document.
Heading order is vital and should be sequential and relational, meaning that it operates hierarchically. Headings allow content to be relatable within sections and sub-sections, making it discernible to those using screen readers. Avoid using ‘fake’ headings by making text bold or resizing it, instead use the pre-formatted headings in the platform you are using to create the content.
- Heading 1 is usually a page title or a main content heading. It is the most important heading, and generally, there is just one.
- Heading 2 is usually a major section heading.
- Heading 3 is usually a sub-section of Heading 2.
- Heading 4 is usually a sub-section of Heading 3, and so on, ending with Heading 6.
- Sequential headings should never be more than one level apart from one another: Heading 2 could be followed by Heading 1 or 3, but not Heading 4
Example of Heading Structure:
Heading 1
Heading 2
Heading 3
Heading 3
Heading 2
Heading 3
Heading 4
Heading 5
Lists
To provide structure and readability by screen readers, use bulleted or numbered lists from the editing toolbar. This way, these lists will be automatically ordered rather than through a manual means. Screen readers will recognize the list and present it that way to the user. This also creates a document that is more clearly structured for all users.
Columns
To provide structure and readability by screen readers, use columns from the editing toolbar and not use tabs or spaces. Be sure to allow for adequate spacing between columns to allow for easier viewing for those with vision problems.
Meaningful Links
When creating links, hyperlink action-oriented text to provide a meaningful description of where the link directs the user. Link text should only be used once on a page and not repeated (i.e., do not use “Learn more” multiple times).
For example:
- Do this: Learn more about Lafayette College.
- Not this: Click here to learn more about Lafayette College.
Include an accessible name when using an image link.
- If an image link is missing an accessible name, screen reader users will not know what the link is supposed to do. In this case, many screen readers will read the URL of the link instead.
Tables
Tables should be used to convey tabular data and should never be used simply for page layout. The following are good practices when creating tables so they are easy to read by all users, including those with screen readers:
- Label each column with a header.
- Use only one header row.
- Never merge or split cells.
- Try not to leave cells, rows, or columns blank.
- Provide a table summary to describe the purpose of the data table.