Digital Content and Document Accessibility Fundamentals Training

​

Presented by Ally Bartley (she/her)

bit.ly/content-a11y-summer

Ally Bartley

• Digital Accessibility Training and Outreach Manager
• Started my career in Digital Accessibility in 2015 at California State University, Chico
• Started at CU Boulder in 2022
• Currently live in Sacramento, CA, enjoying hiking through Yosemite!

Agenda

Each practice will be followed by a demonstration of how to apply it in Microsoft Word.

1. Alt text
2. Visual style
3. Color contrast
4. Heading structure
5. Link text
6. Lists
7. Tables

How to Approach Digital Accessibility Work

Proactive and Reactive approach:​

• Reactive: Waiting for a person with a disability to ask for an accommodation.
• Proactive: Anticipating access needs and making content accessible in advance.
• NOTE: Zero accommodations is not the goal!
• Take time to learn accessibility skills and implement them into your workflow one or two practices at a time.

Digital Content Accessibility Practices

1. Alt text (current topic)
2. Visual style
3. Color contrast
4. Heading structure
5. Link text
6. Lists
7. Tables

What is Alt Text?

• Text that conveys meaningful content of an image concisely to someone who may not be able to see it.
• Not visible on your document or website but read by assistive technology.
• If you do not add alt text to images, the file name or “blank” is read via assistive technology.

User Experience Example

Screenshots from Apple’s built-in screen reader, VoiceOver

How to Write Alt Text

• Should be short (approximately 150 characters).
• Prioritize accuracy over character limit.
• Should only describe what can be seen in the image.
• Start with the most important information; don’t start with “image of.”
• Alt text may vary depending on the context in which an image is being used.

• Should always be a neutral tone; no commentary or opinions.
• Avoid using automated tools to generate alt text.
• To practice, ask yourself, “how would I describe this image to a friend over the phone?”

Identity in Alt Text

• If people are the subject of your image, is their race, gender, disability, skin color. Ethnicity, age, etc. essential to understanding the image in its context?
• If the subject is a known individual, ask them to write their own alt text.
• Identity in Alt Text Resource​

Alt text example: “A group of activists with varying disabilities, racial identities, genders, and age demographics holding a sign that reads ‘Injustice anywhere is a threat to justice everywhere. Martin Luther King Jr.’”​

How to Write Alt Text (2)

• Some images have no meaningful content.
• Mark as decorative, if possible.
• Will not be read by assistive technology.
• Some platforms don’t allow for decorative images (Google Docs limitations)

Applying Alt Text in Your Work

How to add alt text to specific platforms:​

• Microsoft Office alt text​
• Google Suite alt text​
• Outlook alt text​
• Canvas alt text

Now let’s practice!

Practice Document

Inaccessible practice Word document

1. Open the document link
2. Open the "File" menu
3. Download
4. Select "Microsoft Word (.docx)
5. Open the downloaded document in MS Word

Digital Content Accessibility Practices (2)

1. Alt text
2. Visual style (current topic)
3. Color contrast
4. Heading structure
5. Link text
6. Lists
7. Tables

What is Visual Style?

• Visual style refers to any visual formatting of content, such as the use of color, italics, bolding, underlining, and punctuation.
• Style can be helpful for some people to access content!
• Style should never be used as the only way to convey meaning.

Visual Style as Meaning Example

Inaccessible example:

​

Can I touch that plant?

• Aloe vera
• Poison ivy
• Poison oak
• Violets

Accessible example:

​

Can I touch that plant?

• Aloe vera (yes)
• Poison ivy (no)
• Poison oak (no)
• Violets (yes)

Avoiding Visual Style Alone in Your Work

• Supplement color-coded information with text explanations
• Reserve underlining for links only
• Avoid cluttered or scattered content. Utilize whitespace around sections of text or objects to help visual grouping.

​

Let's practice!

Digital Content Accessibility Practices (3)

1. Alt text
2. Visual style
3. Color contrast (current topic)
4. Heading structure
5. Link text
6. Lists
7. Tables

Color Contrast

• Color contrast is the difference in brightness between foreground and background colors.
• You can’t always tell what has sufficient contrast with your eyes alone.
• The Colour Contrast Analyser software is a free application (Mac and PC) you can use to check for sufficient color contrast.
• The WebAIM Contrast Checker is a free web-based application you can use to check for sufficient color contrast.

Colour Contrast Analyzer (CCA)

Digital Content Accessibility Practices (4)

• Alt text
• Visual style
• Color contrast
• Heading structure (current topic)
• Link text
• Lists
• Tables

What are Headings?

• Organize and structure your content hierarchically.
• Must be programmatically applied as a style or “tagged” in your editing program.
• Do not mimic a heading by using visual style such as text size, bold, or underline.
• Use familiar heading designs.

Heading Level Breakdown

• Heading 1: H1 is broadest topic or document/website title. Generally only have one H1 in a document.
• Heading 2: H2 is used to introduce the main topics of your doc/website. You can have multiple H2s through H6s.
• Heading 3: H3s are subtopics related to your H2 used to help further breakdown your content.
• Heading 4: H4s are subtopics related to your H3.
• Heading 5 & 6: Subtopics related to your H4/H5. Do not exceed H6 in your content as screen readers cannot read further than H6.

Heading Levels Example

• Only increase by +1 heading levels at a time as you increase specificity of headings/subtopics.
• You can decrease by more than one heading level at a time.

Applying Headings in Your Work

How to add headings on specific content editing platforms:

• Headings in Microsoft Word
• Headings in Google Docs
• Headings in Canvas Pages
• Headings in HTML

​

Let's practice!

Digital Content Accessibility Practices (5)

• Alt text
• Visual style
• Color contrast
• Heading structure
• Link text (current topic)
• Lists
• Tables

What is Link Text?

• Link text is using words in place of a URL to make it easier to determine where a link is taking someone.
• Screen readers can jump from link to link to navigate quickly through a page.
• Links should make sense outside of their context in the document.

Link Text Guidance

• Describe the destination concisely in link text; avoid “click here”.
• Identify the destination file type in the link text if it’s not a web page.
• Example: CU Boulder Digital Accessibility Standards (PDF).
• Avoid duplicate link names unless they go to the same destination.
• Don’t write out full URLs unless they’re meant to be memorized.

Describe the Destination

Click here to camp on the lake

Click here to camp with a bear

Describe the Destination (2)

Click here

Click here

Describe the Destination (3)

Camp at the lake

Camp with a bear

Digital Content Accessibility Practices (6)

• Alt text
• Visual style
• Color contrast
• Heading structure
• Link text
• Lists (current topic)
• Tables

Lists

• Use the List creation button!
• When you press the Enter key, if it automatically indents and creates the next list item, you're doing it right!
• Avoid too many levels of indentation in one list.

Let's practice!

Digital Content Accessibility Practices (7)

• Alt text
• Visual style
• Color contrast
• Heading structure
• Link text
• Lists
• Tables (current topic)

Tables

• Avoid using tables for layout purposes.
• Tables should only contain tabular data.
• Avoid merged data cells
• Ask yourself: could this data be displayed in a simple list?

Data table example

Layout table example

Table Headers

• Table headers are cells that describe the data in its column or row.
• Column header describes its column.
• Row header describes its row.
• Tagging a header means indicating that a cell is a header in your content editor.

Column headers (top row)

Row headers (left column)

User Experience Example

• If you read the second row of the accessible table below with a screen reader, navigating from cell to cell, the screen reader will read: � "Jeremiah, Monday 78, Tuesday 56, Wednesday 42, Thursday 23"
• If headers are not tagged appropriately, a screen reader will read:  "Jeremiah, 78, 56, 42, 23"

Number of minutes at the gym, by day of week

Questions?�

Submit Your Questions

Use the link or QR Code to submit questions to the CU Boulder Digital Accessibility Office (DAO)!

We will use your questions to guide us through Friday’s Q&A from 10 to 10:50 AM

bit.ly/camp-questions2026