Digital Accessibility Essentials
Follow these accessibility essentials every time you create online content to help ensure equal access to information and services for everyone in our community.
1. COLOR AND CONTRAST
Some individuals have difficulty reading or understanding information when we use certain colors. We recommend using a white background with black text whenever possible. If you want to use colors, ensure sufficient color contrast using a tool so text remains readable.
Color Contrast Tool:
Poor color contrast example:
UTEP orange #ff8200 with white #ffffff
Accessibility Accessibility
Good color contrast example:
UTEP blue #041e42 with white #ffffff
Accessibility Accessibility
Do not rely on color alone to communicate meaning. Use information in addition to color, such as shape, icon or text. Not everyone sees colors or sees them the same way.
2. IMAGES AND ALTERNATIVE TEXT
Using images is a great way to enhance and illustrate content. However, they present an issue for individuals who are unable to access visual information. When images are used — including photographs, illustrations, charts, or graphics be sure to provide clear and concise alternative text (Alt Text) that describes the purpose and content of the image. Effective alt text ensures that users who rely on screen readers receive the same essential information conveyed visually.
3. LINKS
Writing Accessible Links:
- Use Descriptive Link Text: Ensure the link text clearly describes the purpose or destination of the link. Avoid vague phrases such as “click here” or “read more."
- Example: Use “Download the Annual Report” instead of “Click here.
- Contextual clarity: Links should make sense even when read out of context. Screen reader users often navigate by jumping from link to link, so each link should stand on its own
- Example: “Learn more about UTEP’s Mission” provides meaningful context.
- Avoid Using URLs as Link Text: Long web addresses are difficult to read and confusing for assistive technology
users. Instead, create a hyperlink and use descriptive text that explains where the link leads. - Maintain Consistent Link Styling: Hyperlinks should be visually distinguishable from regular text. Typically, this means using underlined text and a contrasting color. Avoid relying on color alone to identify links.
- Use ARIA Roles Appropriately: When possible, rely on native HTML elements instead of adding ARIA roles. Use ARIA attributes only when necessary and avoid overuse.
4. HEADINGS
Use correct heading formats to organize web pages and documents, creating a clear, logical structure. Headings allow users to quickly scan content and are essential for individuals who rely on screen readers for navigation.
- Use headings in sequential order (H1, H2, H3, H4).
- Do not skip heading levels.
When presenting grouped information, always use built-in bulleted or numbered list tools.
5. TABLES
Using tables is a useful way to organize information. However, they can be difficult for users of assistive technologies to
navigate. We recommend using tables only when the information cannot be presented in other format like a list.
If a table is essential:
- Provide a clear table title and an overview caption to describe the content and purpose of the table for learners.
- Avoid blank or merged cells, which can confuse screen readers.
- Include a header row to define the meaning of each column.
6. AUDIO & VIDEO
Ensure that audio and video content is accessible to all users by doing the following:
- Add captions to your videos so that spoken content is available visually.
- Edit and correct machine-generated captions to ensure accuracy.
- Provide transcripts for audio files so users can access the information in text form.