Overview
Accessible LibGuides benefit everyone.
Text
- For best results, use the default typeface used by our LibGuides website. Our custom JS/CSS code uses a Sans Serif font family (Arial, Helvetica, Verdana) set at 14px. Please do not mix different font types.
- Use ALL CAPITAL LETTERS sparingly. The more uniform box shape OF TEXT IN CAPS (of text in all caps) reduces the perceptible differences between letters, making it harder to read.
- Avoid underlining. Many users associate it with hyperlinks, leading to confusion.
- Provide a text-only equivalent for text information presented in graphics or images. This improves accessibility for people who use screen readers.
- Use left-aligned (left justified) text. Having a consistent margin makes text easier to read. Centered text requires the reader's eyes to jump around too much to find the starting place of each line. Centered text should be used very sparingly or - preferably - not at all.
- Linked text should make sense out of context. Screen reader users may choose to read only the links on a web page. Avoid phrases like “click here” and “more.”
- Headings convey the hierarchy of information to screen readers. This makes page navigation more effective.
Heading 1 is reserved for the page title in LibGuides
Heading 2 is reserved for content box titles in LibGuides
Heading 3 should be the first choice for guide owners who want to use Heading tags in their rich text / HTML content.
- Do not use color as the sole way to communicate meaning or importance. Color choices can impact accessibility for both people with color-blindness and people who rely on screen readers. If you are using a color to convey meaning, add additional cues (e.g., boldness, position, contrast)
- Write clearly. Although slang and idioms can be a colorful way to connect with students, be mindful of the impact on people whose first language is not English.
Images and Graphics
- When inserting images and non-text content into your LibGuides, provide a description in the Alternative Text (also known as alt text) field of the Image Properties pop-up. This allows screen reader users to have the content read to them. If the page fails to load properly, the alt text allows the user to know what is missing.
- If the image is a diagram, chart, flyer, or other kind of infographic, determine how to convey its meaning with alt text and a link to a text-only version.
- Some accessibility experts say that purely decorative images (like the cartoon man shown in this content box) don't necessarily need alt text. While a simple "decorative" alt tag might suffice, consider how a few additional words might enhance the user's experience.
Media & Other Non-HTML Content
- Add captions and/or transcripts for media (e.g., YouTube, Canva, and ScreenPal videos). Proofread the captions and transcripts, especially if automatically generated.
- Add running time to videos.
- If you cannot make non-HTML content such as PDFs or Word documents accessible, consider using HTML instead.