Accessibility and Universal Design
Texas A&M is required by ADA Title II to provide access to all digital content. The best way to meet this requirement is to design with everyone in mind from the start. People often use these terms interchangeably, but they have different goals:
- Accessibility focuses on removing barriers for people with disabilities. It often involves making specific changes — like adding alt text or captions — so that everyone can use a product.
- Universal design is the goal of creating one solution that works for everyone right away. Instead of making a special version for some users, you design a single version that is easy for everyone to use regardless of their background or ability.
By following universal design principles, you create digital materials that are better for all students, staff and visitors.
Provide Alternatives for Graphics and Images
Texas A&M must provide meaningful alternatives for visuals to stay compliant with digital accessibility laws. This ensures that people who are blind or have low vision can understand your visual information.
Simple Alt Text
Every image that carries meaning must have "Alt Text." This is a short description that a screen reader reads aloud.
- Be concise: Keep descriptions under 125 characters.
- Skip the obvious: Do not use phrases like "image of" or "graphic of" because screen readers already tell the user it is an image.
Complex Graphics and Data
For charts, maps and infographics, a short description is not enough. You must provide an equivalent text alternative through one of the following:
- In-page summary: Place a text explanation directly above or below the graphic. If the information conveyed in the graphic is present in the surrounding text content, it counts as a text alternative.
- Linked descriptions: Provide a link to a separate page that contains the full data table or explanation.
Whichever method you choose, the text alternative should include the main trends, the purpose of the graphic and the important data points.
For example, you could pair a bar chart with the alt text “Bar chart showing student population growth from 2014 to 2024” on a page with a table with the same data points. You could even add a caption to the bar chart that highlights a key observation from the chart (e.g., “Student population has grown by at least 1,000 students each year except for the years 2017-2019.”).
Decorative Images
If an image is only there for "looks" and does not provide information (like a background flourish or a line), mark it as decorative. This tells screen readers to skip the image entirely.
- On the web: Use an empty alt tag (alt="").
- In Office 365: Right-click the image, select "Edit Alt Text" and check the box "Mark as decorative."
Captions
Using captions in combination with alt text can also increase the understanding of images, charts, graphs and tables.
Captions give context to a piece of content. Captions often include information you wouldn’t be able to infer from simply looking at the image. Information in a caption is available to sighted users and screen readers.
Alt Text describes what you can visually see in an image or the purpose the image is trying to convey. Alt text is typically only interacted with by screen readers, but it also displays when an image doesn't load on a page.
Color and Contrast
Color is an essential component of visual design. When choosing colors, it’s important to remember that not everyone perceives colors the same way. For this reason, it’s important to never use color alone to convey information.
It’s also essential to consider contrast — the difference in luminosity between the foreground and background. For text and graphic elements important for understanding and interacting with a design must meet a contrast ratio of at least 4.5:1.
Typography
Good design makes it easy to identify characters and track lines of text. Your typography styles should promote legibility.
Tips for Increasing Legibility
- Line height (leading) should be at least 1.5x the font size
- Line lengths of < 80 characters are usually easiest to read
- Default to left-aligned text, especially for paragraphs
- Avoid justified text
- Consider color AND font weight when evaluating contrast
- Avoid busy backgrounds behind text
- Be consistent with spacing/alignment
Heading Styles
Digital content uses hierarchical headings to communicate the structure of a document to those using assistive technology.
When creating web pages or digital documents, use the built in heading features. Use the heading styles feature to create a semantic heading instead of simply changing the way text looks.
Design the levels of headings so that their prominence relative to each other matches their hierarchical level. Generally speaking, higher level headings should be bigger, bolder or a more eye-catching color than lower level headings.
Document Structure and Reading Order
Screen reader users hear content in the set reading order. When making digital documents or web pages, you must put content in a logical order. This should match the visible order as much as possible.
Create Visually Distinct Links
Links are the main way users move through digital content. In addition to writing descriptive link text, your links should be easy to visually identify and use.
Follow these rules to make sure your links are easy to find and use:
- Keep them visible: Underline your links so they stand out from regular text. If your design does not use underlines for links, you must provide two other ways to show the text is clickable.
- Use high contrast: Make sure the link color is easy to see against the background and distinguish from surrounding text.
- Show interaction: Ensure that links look different when a user hovers over them with a mouse or tabs to them with a keyboard.