Creating accessible content

Using the principles of Universal Design and best practices allows for the creation of content that is simple and intuitive for all users, flexible to accommodate assistive technology and provides accessible information.

Best Practices for All Documents

The following best practices can be applied to many different kinds of content and helps to create simple, structured documents that are easy to follow for all users.

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), 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, and 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 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 is directing 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.

Google Workspace

Grackle is a Google Workspace add-on available for use in Google Docs, Google Slides, and Google Sheets to ensure that your documents meet accessibility standards. Grackle offers ‘remediation at the point of creation’. Grackle can also be used to create tagged PDFs from Google Docs or Google Slides. The add-on is enabled on all Lafayette Google accounts and can be found in the “Add-ons” drop-down in Docs, Slides, and Sheets. For instructions on how to use Grackle, see Making Google Files Accessible with Grackle.

Office 365

Word Documents

Microsoft Word now has many built-in features to help you create accessible documents. For a full list of features and best practices, see Creating Accessible Word Documents.

To allow for easy navigation, especially of longer documents, you can create a table of contents from the headings. This allows all users to jump to specific sections of the content.
Keeping the layout simple and adding structure with headings creates easy-to-read and navigable documents.
When possible, use graphics or images that add meaningful content to the document and not just visual interest. Be sure to include alt text or descriptions of the content of the graphic or image for screen reader users.
Use “Outside Borders” as a way to separate and highlight text rather than using text boxes. Text boxes “float” on a document and are difficult to read by a screen reader.
Most versions of Word have an “Accessibility Checker” that can test a document for accessibility.

PowerPoint

For a full list of features and best practices, see Creating Accessible PowerPoint Presentations.

Pre-defined slide layouts allow for greater ease of use for screen reader users.
Like in Word, text boxes create issues for screen readers and should be avoided.

Excel

For a full list of features and best practices, see Creating Accessible Excel Documents.

Using Excel’s native formatting techniques allows for simple, readable documents.
Simple formatting will allow for better use by screen readers such as using row and column headers that are clear and self-explanatory.
Create regions in Excel to provide a description of the region. Creating these regions gives the content some context to those using screen readers.
Regions can be used to create documents that are easy to navigate by keyboard or screen reader.

PDF

While PDFs are popular because they provide a fixed layout and are slightly more difficult to modify than Word Documents, they generally provide a poor experience for those with accessibility needs. Inaccessible PDFs are nearly unusable for those using screen readers or relying on keyboard navigation. If your content must be in a PDF format, see the Creating Accessible PDFs webpage.

Moodle

Many of the best accessible practices in Moodle help to make your course more usable for all users.

Structuring content clearly with consistent labeling creates easy-to-navigate, intuitive content.
Predictable navigation such as organizing content in folders or using topic blocks helps those using keyboard commands or screen readers to navigate the course more effectively.
Time limits for completing tasks such as quizzes can be customized based on user needs and accommodations.
Setting documents to force download allows for greater ease of use for those with screen readers.
Set internal course links to open in the same window to allow for the use of the “back” button. Open external course links in a new window (including PDFs and other documents). This allows for greater ease of use by screen readers and those navigating with keyboards.
Make sure scanned documents are accessible to screen readers by scanning pages in their entirety, only saving one page of material per file, and aligning each page so the scanned item is straight.

WordPress and Web Design

Use standard page templates.
Skip links allow screen readers to skip reading things like headers and menu items when a new page is opened.
When possible, pages should be navigable by a keyboard.
Animated content is difficult for screen readers to interpret and should be avoided.
All publicly available audio and video content must have captioning.
Web content should be flexible with the ability to adapt to many screen sizes. See Testing my WordPress Site on Mobile for more information.
Apply the basic principles of design and layout covered above.
Departments and programs receive monthly Siteimprove reports flagging broken links, misspellings, and accessibility issues. See Improving Your Site with Siteimprove for more information.