Creating accessible digital content

From the way you describe images using alt text to how you write calls to action, there is a lot you can do to ensure all users have excellent experiences on our digital channels.

Top resources

News and updates

The College of Engineering Digital Accessibility Plan - February, 2025

The Department of Justice (DOJ) published a new rule regarding digital accessibility under Title II of the Americans with Disabilities Act (ADA) in April 2024. This rule mandates that all of the University’s web content, including academic course material, must be accessible starting April 24, 2026. This includes external and internal websites and applications.

The College of Engineering is collaborating with Central UW leadership as part of a website and app task force to develop new guidance and resources to help our community achieve these goals on time. Other accessibility task forces will focus on academic course content, procurement, research, and more.

OUR PLAN OF ACTION (PDF)

Guidelines for commonly used content on College websites

Using page structure and markup

Drupal (and most other modern content management systems) does much of the heavy lifting to create accessible content if you use the editor as intended. Elements such as headings, lists and paragraphs are all set up in a format screen readers can use. When creating new content in Drupal, it’s essential to keep in mind:

• Headings help to make your content more scannable and are critical to creating accessible content. Your page title is automatically designated as an H1, so don't use H1 headings in the body of the page. Headings can also serve as anchor links, should you need them. 
• Lists: Properly marked-up lists allow screen readers to provide context by announcing it's a list; users can skip it if they wish. Avoid creating lists by using manual methods.
• Color: It's critical to use color in an accessible way. If you are ever in doubt, use a color contrast analyzer, such as WebAIM: Contrast Checker.
• Remove unnecessary styling by using the  “paste as plain text” option. Then, use the Drupal editor to add styles such as headings, links, etc. Following those steps will ensure your content is accessible. If you used appropriate formatting in Microsoft Word or Google Doc, the correct styles may carry over when pasting content into Drupal, but you always want to double-check to confirm. 
• Follow best practices when using pre-formatted elements. Using a heading to make content larger within body copy or adding sentence breaks instead of creating a new paragraph will cause issues for screen readers. 

Links and calls to action

Consider these guidelines when writing CTAs and links:

• Avoid CTA text like “Click Here,” “More,” and “Read More.” These CTAs can be confusing when a screen reader reads them out of context.
  • You may be interested in reviewing: “Calls to action and link text inspiration”
• Use unique CTA/link text wherever possible. Speech recognition software users may have a negative experience with duplicated link text. (this happens a lot in landing pages where we may have multiple CTAs)
• If you need multiple "Read more" links on one page, you can use "aria-label" to help screen readers understand what you are linking to. For example: <a href="about/climate-change-action" aria-label="Read more about Climate change action">Read more</a>
• When using contextual text links, linking a complete sentence is OK, but avoiding longer.
• Use judgment when linking complete URLs. When linking a URL, consider users who must listen to a screen reader announce it.
• Just like in regular writing, showing is better than telling. Avoid linking "Click here for" and simply link what your users should expect when clicking the link.

CTA and link styles

We use buttons as calls to action on our pages (filling out a form, subscribing to something, accessing an application, playing a video, etc)

1. Use a "Default" button style for the main call to action and a "secondary" button style for a second call to action.
2. We suggest limiting button text to two to four words at most.
3. Avoid calls to action that result in a button breaking out into two lines.

We use anchor links on a page that has a lot of content. The anchors should follow the heading structure which we use to break up the page into smaller, scannable text sections.

We use text links to take users to a different page (or a different location within the page). We suggest having at most one link per paragraph (remember, screen readers may read every link you include in your content).

Calls to action (CTAs) and link text inspiration

CTAs can be powerful when used strategically. Consider a call to action as content driving your users to accomplish a goal. You can also consider it a step in a set of directions. If someone gave you directions to a location, wouldn't you expect more context than "Go there"?

1. Use action verbs to start your call to action (Read, Explore, Learn, Support, Give, Participate, Join, Attend, Sign up, Register, Subscribe, Experience, Tour)
2. Instead of using an ambiguous next step ("Read more"; "Explore more"), specify where your user is going in your journey: "Read the article"; "Read the story"; "Explore our strategic plan"

Link text is far more flexible, as you can link more than just a couple of words. Draw inspiration from the content you are linking to and create more powerful, relevant links.

Image text alternatives (commonly known as “alt text”)

To write good alt text, focus on explaining the “why” of the image as it relates to the content you are displaying. While writing descriptive text is essential, describing the context of the image is even more critical. 

You can read more about writing helpful alt text at Harvard’s Accessibility website. The recommended limit for alt text is 140 characters or less. For decorative images, include null alt text (alt=”null”) so assistive technologies ignore the images.

New AI tools also help generate alt text when an image and context are provided. As always, please spend some time editing the content before publishing it. The Online Comms team recommends Arizona State University's Image Accessibility Creator.

Describing headshots or photos of people

Our websites include a myriad of photos, including headshots. While the UW and the COE do not have a standard practice of describing individuals’ physical features or attire in alt text, you may wonder whether it’s a practice you should adopt. 

If you want to make this information readily available to screen readers, follow these guidelines: 

• Avoid making assumptions about individuals because of their appearance; instead, request that information from the individual specifically. 
• You may also want to devise a formulaic method for describing individuals so everyone in your photos is described using similar attributes.

More accessibility resources

We encourage users to review the resources and tools provided by UW-IT on their Accessible Technology webpage. There, you will find more information, learning opportunities, webinars, and content about accessibility in websites, documents, social media, and more.

---

This content was written with the needs of the College of Engineering web community in mind, with gratitude to the authors of:

Accessible Technology at UW: Links and buttons on websites

Yale University: Usability & Web Accessibility