Workshop: Introduction to Web Accessibility

In this workshop you’ll learn more about the following topics:

Web Accessibility
Common Barriers
Legal Obligations
Structuring Content
Checking Your Work

While the focus of this workshop is Boise State’s WordPress environment, the principles can be applied to other environments and content management systems.

Estimated Time to Complete

The time estimate to read and review the content in this workshop is 1 to 2 hours. We recommend completing the workshop in one session.

At the end of the workshop is a reflection form for you to assess your awareness and ask any questions.

Introduction

1. Web Accessibility

Web accessibility is the inclusive practice of removing barriers preventing interaction with, or access to websites by people with varying abilities and technology.

When we design for accessibility, we lower barriers to access and make digital content easier to navigate for everyone.

2. Common Barriers

Barriers in digital content come in a variety of ways including functional and situational barriers, and also are created by users preferences for accessing content.

Functional

Functional limitations includes both permanent and temporary limitations:

Blindness or low vision
Cognitive impairment
Deaf or hard of hearing
Mobility limitation
Illness or temporary disability

Situational

person working in distracting environment icon

Situational constraints are typically tied to the environment:

Poor lighting or small display
Distracting environment
Noisy room
No mouse available

Preferences

User Preferences are when a user wants to interact with content in a certain way:

Listening to a video with closed captions on
Increasing the font size on a certain webpage
Using the keyboard for improved efficiency
Filling out a form electronically

3. Legal Obligations

Aside from making your content easier to use by the widest possible audience, creating accessible content is also required by law and university policy.

Federal Law includes:

Section 504 and 508 of Rehabilitation Act
Americans with Disabilities Act

University policy includes:

Policy 8040 on University Web Pages and Electronic Publications
Policy 8140 on IT Accessibility
Policy 1075 on Nondiscrimination on the Basis of a Disability

4. Structuring Content for Accessibility

Since not every user accesses or navigates your content in the same way, you can make your content accessible to the widest possible audience by adding structure to your content.

Like signs on a road that help motorists find their way easily, or signs in a building that help occupants navigate successfully, your web content requires structure to help users access and understand your content.

Consider the following paragraph of text. There are nearly a thousand words and no structure to help guide the reader through the content.

Paragraph without structure

What are the Web Content Accessibility Guidelines? The Web Content Accessibility Guidelines, or WCAG, are a set of measurable standards you can follow to make your content accessible to the widest possible audience. The Guidelines are divided into three levels of compliance: A, AA, and AAA. Since most organizations aim for AA compliance, that’s where we’ll focus for this course. By following the WCAG, you can ensure everyone can use your digital content regardless of ability. Four Main Principles These standards are organized into four main principles: Perceivable Operable Understandable Robust Many of these standards are added by software developers directly to the platforms and tools used to create content. Other standards are added to the content directly by you, the content creator. Even though you might not interact with all the standards, it’s good to be aware of them and understand how they work together. Perceivable The first principle in the Web Content Accessibility Guidelines (WCAG) is Perceivable. Content must be presented to users in ways they can perceive often using one or more of their senses including sight, sound, and touch. Examples of Perceivable Content For example, a user can perceive an image with their sense of sight, or they can perceive an image through the image description with their sense of hearing. A user can perceive a video with their sense of sight and sound, or with sense of touch by accessing a text transcript through a refreshable Braille display. Other characteristics of perceivable content include the following: Alternatives for non-text content, such as alt text descriptions for images or long descriptions for complex objects Alternatives for time-based media, like captions, audio description, or text transcripts Content can be presented in different ways without losing information or structure, such as perceiving content in a table in a linear fashion Easy to distinguish foreground and background elements (colors and sounds), this includes good color contrast ratios and background sounds in videos Content Creator Role in Perceivable Content As a content creator, your role in creating perceivable content includes: Adding short, meaningful alternative text descriptions to any images, charts, or graphs uploaded to your webpage Adding long text descriptions of complex graphics either on the same page or as a link to an additional resource Describing important visual information conveyed in a media file in the audio track Providing accurate captions of any relevant sounds or dialogue in a media file Providing a text transcript of a media file that includes both relevant visual and audio information Using tables to present tabular data, and not merging cells, rows, or columns to convey visual information Ensuring the color contrast of content, particularly text, is readable Adding accurate labels to form fields Adding structure tags, like headings, to content to convey the same information presented visually Operable The second principle in the Web Content Accessibility Guidelines (WCAG) is Operable. Content must have an operable user interface and navigation to assist users in using and navigating content. Examples of Operable Content For example, a user can operate a webpage using touch to swipe the screen or they can navigate using a keyboard. A user can utilize a mouse or a screen reader to navigate content. Other characteristics of operable content include the following: Make all functionality available from a keyboard Give users enough time to read and use content Do not use content that causes seizures or physical reactions Help users navigate and find content Make it easier to use inputs other than a keyboard Content Creator Role in Operable Content As a content creator, your role in creating operable content includes: Review interactive elements, like forms and embedded iFrames, added to the page for keyboard compatibility Avoid time limits on forms or other content that might make users feel rushed Avoid content that moves rapidly and flashes, strobes, or blinks. Provide clear paths to navigate the content on the page and on the site overall Understandable The third principle in the Web Content Accessibility Guidelines (WCAG) is Understandable. Both the information contained in and the operation of the user interface must be understandable for users. Examples of Understandable Content Understandable content is easy to use and take action on. For example, users can easily understand where they are on the page whether they are navigating with a keyboard, or other assistive technology. Other characteristics of understandable content include the following: Text is readable and understandable Content appears and operates in predictable ways Help users avoid and correct mistakes Content Creator Role in Understandable Content As a content creator, your role in creating understandable content includes: Setting the language of a webpage, or indicating where there is a change in language Creating a consistent navigation experience Structuring lists, tables, and headings correctly Adding labels to all form fields Clearly marking required form field content as required Providing clear instructions for completing processes Robust The fourth principle in the Web Content Accessibility Guidelines (WCAG) is Robust. Content must be robust enough that it can be interpreted by a wide variety of devices, browsers, and assistive technologies. Examples of Robust Content Robust content is compatible with the widest variety of devices, browsers, and assistive technologies. For example, users can access your content in a browser or on a mobile device. They can use text to speech tools to listen to your content or they can view your content at different levels of magnification. This means your content is maximizing compatibility with current and future user tools. Content Creator Role in Robust Content As a content creator, your role in creating robust content includes: Reviewing id attributes (or the names given to elements on a page) are unique Reviewing content provided in alternative formats (like documents or media) are compatible with assistive technology.

How did you access the paragraph without structure?

Did you read the paragraph in the previous section? Or did you scroll or skip past it?

Since the paragraph contained no visual or programmatic structure to help guide users through, the only way to access the content is to read every single word. While technically accessible, it’s also not very usable. The mental effort required to read and comprehend everything is pretty high.

Video: Paragraph with No Structure – Read by NVDA at 60% speech rate

Curious about how that paragraph reads for a screen reader user? You can review for yourself! The following video demonstrates how the screen reader NVDA read the paragraph at 60% speech rate.

Paragraph with no structure – Read with NVDA at 60% speech rate

Notice it took nearly six minutes to go through the entire section of content with zero breaks or pauses. Did you play the entire video, or stop after a few seconds?

Structure Your Content to Improve Accessibility

Structuring your content to provide both visual and programmatic structure lowers the mental effort required to read complex content.

For the remainder of this workshop, you’ll learn how to structure your content with:

Headings
Lists
Hyperlinks
Images and Media
Tables
Documents

If you currently have access to a WordPress site, you may follow along by creating your own draft page. We suggest copy and pasting the paragraph without structure provided in the previous section.

Structure with Headings

One of the most important ways to add structure to your content is with headings.

Headings:

Make your content scannable
Provide navigation points
Communicate content organization
Reduce the mental energy required to read

Video: Structure Your Content with Headings

Headings are also very easy to add to your content. Review the following video for an example. Closed captions and a text transcript are provided.

Video Placeholder Image — Play Structure Your Content with Headings

Video Transcript: Structure Your Content with Headings

To add headings to your content you will use the heading styles available in the WordPress editor. These are available from the toolbar or by using one of the approved keyboard shortcuts.

To add headings to your content within the text editor, first you identify what content needs to be a heading, and you highlight that content and then select the appropriate heading. And you can repeat this for all of your content until you have an outline with your headings.

Additionally, if you use panels, some of the panels provide built-in heading styles. For example I am going to add a new panel with a card grid. The title on the card grid corresponds to a heading on the page. And then each of the card titles also correspond to a heading on the page.

So as you are adding panels to your content, pay attention to the panel title fields. Those will add headings to your content and help structure your text.

Additional Resources for Structuring Content with Headings

The following resources are also available to learn more about structuring your content with headings. You can either review them now or bookmark them for future reference. Links will open in a new window.

Let's review the paragraph again with headings added

What are the Web Content Accessibility Guidelines?

The Web Content Accessibility Guidelines, or WCAG, are a set of measurable standards you can follow to make your content accessible to the widest possible audience. The Guidelines are divided into three levels of compliance: A, AA, and AAA. Since most organizations aim for AA compliance, that’s where we’ll focus for this course. By following the WCAG, you can ensure everyone can use your digital content regardless of ability.

Four Main Principles

These standards are organized into four main principles: Perceivable Operable Understandable Robust. Many of these standards are added by software developers directly to the platforms and tools used to create content. Other standards are added to the content directly by you, the content creator. Even though you might not interact with all the standards, it’s good to be aware of them and understand how they work together.

Perceivable

The first principle in the Web Content Accessibility Guidelines (WCAG) is Perceivable. Content must be presented to users in ways they can perceive often using one or more of their senses including sight, sound, and touch.

Examples of Perceivable Content

For example, a user can perceive an image with their sense of sight, or they can perceive an image through the image description with their sense of hearing. A user can perceive a video with their sense of sight and sound, or with sense of touch by accessing a text transcript through a refreshable Braille display. Other characteristics of perceivable content include the following: Alternatives for non-text content, such as alt text descriptions for images or long descriptions for complex objects Alternatives for time-based media, like captions, audio description, or text transcripts Content can be presented in different ways without losing information or structure, such as perceiving content in a table in a linear fashion Easy to distinguish foreground and background elements (colors and sounds), this includes good color contrast ratios and background sounds in videos

Content Creator Role in Perceivable Content

As a content creator, your role in creating perceivable content includes: Adding short, meaningful alternative text descriptions to any images, charts, or graphs uploaded to your webpage Adding long text descriptions of complex graphics either on the same page or as a link to an additional resource Describing important visual information conveyed in a media file in the audio track Providing accurate captions of any relevant sounds or dialogue in a media file Providing a text transcript of a media file that includes both relevant visual and audio information Using tables to present tabular data, and not merging cells, rows, or columns to convey visual information Ensuring the color contrast of content, particularly text, is readable Adding accurate labels to form fields Adding structure tags, like headings, to content to convey the same information presented visually

Operable

The second principle in the Web Content Accessibility Guidelines (WCAG) is Operable. Content must have an operable user interface and navigation to assist users in using and navigating content.

Examples of Operable Content

For example, a user can operate a webpage using touch to swipe the screen or they can navigate using a keyboard. A user can utilize a mouse or a screen reader to navigate content. Other characteristics of operable content include the following: Make all functionality available from a keyboard Give users enough time to read and use content Do not use content that causes seizures or physical reactions Help users navigate and find content Make it easier to use inputs other than a keyboard

Content Creator Role in Operable Content

As a content creator, your role in creating operable content includes: Review interactive elements, like forms and embedded iFrames, added to the page for keyboard compatibility Avoid time limits on forms or other content that might make users feel rushed Avoid content that moves rapidly and flashes, strobes, or blinks. Provide clear paths to navigate the content on the page and on the site overall

Understandable

The third principle in the Web Content Accessibility Guidelines (WCAG) is Understandable. Both the information contained in and the operation of the user interface must be understandable for users.

Examples of Understandable Content

Understandable content is easy to use and take action on. For example, users can easily understand where they are on the page whether they are navigating with a keyboard, or other assistive technology. Other characteristics of understandable content include the following: Text is readable and understandable Content appears and operates in predictable ways Help users avoid and correct mistakes

Content Creator Role in Understandable Content

As a content creator, your role in creating understandable content includes: Setting the language of a webpage, or indicating where there is a change in language Creating a consistent navigation experience Structuring lists, tables, and headings correctly Adding labels to all form fields Clearly marking required form field content as required Providing clear instructions for completing processes

Robust

The fourth principle in the Web Content Accessibility Guidelines (WCAG) is Robust. Content must be robust enough that it can be interpreted by a wide variety of devices, browsers, and assistive technologies.

Examples of Robust Content

Robust content is compatible with the widest variety of devices, browsers, and assistive technologies. For example, users can access your content in a browser or on a mobile device. They can use text to speech tools to listen to your content or they can view your content at different levels of magnification. This means your content is maximizing compatibility with current and future user tools.

Content Creator Role in Robust Content

As a content creator, your role in creating robust content includes: Reviewing id attributes (or the names given to elements on a page) are unique Reviewing content provided in alternative formats (like documents or media) are compatible with assistive technology.

What did you notice?

First, the content was probably much easier to scan. You could quickly review the headings and get a sense of how the content was organized and what the main topics were.

Video: Paragraph with Structured Headings -Read by NVDA at 60% speech rate

Curious about how that paragraph reads for a screen reader user? You can review for yourself! The following video demonstrates how the screen reader NVDA reads through the headings in the section at 60% speech rate. Closed captions are provided.

Notice it took less than a minute to read through all the headings and return to the beginning of the section. Not only were the headings read, but their order was also read to the user. The headings provided navigation points to allow the screen reader user to quickly skim through the page to get a sense for the structure and organization. Was the video easier to listen to with the addition of the headings?

Headings add Structure and Organization

With the addition of the headings we can quickly learn the content is about:

The web content accessibility guidelines
The four main principles
Principles are perceivable, operable, understandable, and robust
Examples of the principles
Content creator roles in meeting the principles

This is much easier to understand than the paragraph without structure. However, there are still several pretty long paragraphs that may be difficult to read quickly. One way to improve the structure of these paragraphs is with lists and spacing.

Structure with Lists

Lists can add structure to your content by breaking up large chunks of text. Lists also help with organization, because you can group like items together either in an unordered list, or an ordered lists.

Unordered Lists

Unordered lists, or bullet lists, link similar groups of items that are not necessarily listed in any particular order. For example, ingredients in a recipe must be gathered before cooking, but the order doesn’t matter.

Ordered Lists

Ordered lists, or numbered lists, link similar groups of items and may convey a specific order. For example, steps in a recipe must be completed in a specific order.

Review the following video to learn how to add lists to your content.

Video: Structure Your Content with Lists

Like headings, lists are also very easy to add to your content. Review the following video for an example. Closed captions and a text transcript are provided.

Video Transcript: Structure Your Content with Lists

To add lists to your content you will use the bullet list and numbered list icons from the WordPress text editor. To add lists to your content, find the content that needs to be structured into a list, add each list item onto its own line, highlight the content, and then select bullet list or numbered list. This will add the necessary structure to identify each list item as an item within the list. You can repeat this as many times as needed until your content is structured in the lists that you want.

Additional Resources for Using Lists Effectively

Lists can be both good and bad for accessibility. If everything is a list, then there is no clear relationship. If only one thing is in a list, it’s not a list.

Follow these guidelines for using lists effectively in our content.

Avoid multiple indents in bullet lists
Do not create a list for one item
Use a list to group three or more items
Use bullet lists (unordered lists) when order is unimportant
Use numbered lists (ordered lists) when order is important

Let's review the paragraph again with lists added

What are the Web Content Accessibility Guidelines?

The Web Content Accessibility Guidelines, or WCAG, are a set of measurable standards you can follow to make your content accessible to the widest possible audience.

The Guidelines are divided into three levels of compliance:

Since most organizations aim for AA compliance, that’s where we’ll focus for this course. By following the WCAG, you can ensure everyone can use your digital content regardless of ability.

Four Main Principles

These standards are organized into four main principles:

Perceivable
Operable
Understandable
Robust

Many of these standards are added by software developers directly to the platforms and tools used to create content. Other standards are added to the content directly by you, the content creator. Even though you might not interact with all the standards, it’s good to be aware of them and understand how they work together.

1. Perceivable

Examples of Perceivable Content

Other characteristics of perceivable content include the following:

Alternatives for non-text content, such as alt text descriptions for images or long descriptions for complex objects
Alternatives for time-based media, like captions, audio description, or text transcripts
Content can be presented in different ways without losing information or structure, such as perceiving content in a table in a linear fashion
Easy to distinguish foreground and background elements (colors and sounds), this includes good color contrast ratios and background sounds in videos

Content Creator Role in Perceivable Content

As a content creator, your role in creating perceivable content includes:

Adding short, meaningful alternative text descriptions to any images, charts, or graphs uploaded to your webpage
Adding long text descriptions of complex graphics either on the same page or as a link to an additional resource
Describing important visual information conveyed in a media file in the audio track
Providing accurate captions of any relevant sounds or dialogue in a media file
Providing a text transcript of a media file that includes both relevant visual and audio information
Using tables to present tabular data, and not merging cells, rows, or columns to convey visual information
Ensuring the color contrast of content, particularly text, is readable
Adding accurate labels to form fields
Adding structure tags, like headings, to content to convey the same information presented visually

2. Operable

The second principle in the Web Content Accessibility Guidelines (WCAG) is Operable. Content must have an operable user interface and navigation to assist users in using and navigating content.

Examples of Operable Content

For example, a user can operate a webpage using touch to swipe the screen or they can navigate using a keyboard. A user can utilize a mouse or a screen reader to navigate content.

Other characteristics of operable content include the following:

Make all functionality available from a keyboard
Give users enough time to read and use content
Do not use content that causes seizures or physical reactions
Help users navigate and find content
Make it easier to use inputs other than a keyboard

Content Creator Role in Operable Content

As a content creator, your role in creating operable content includes:

Review interactive elements, like forms and embedded iFrames, added to the page for keyboard compatibility
Avoid time limits on forms or other content that might make users feel rushed
Avoid content that moves rapidly and flashes, strobes, or blinks
Provide clear paths to navigate the content on the page and on the site overall

3. Understandable

The third principle in the Web Content Accessibility Guidelines (WCAG) is Understandable. Both the information contained in and the operation of the user interface must be understandable for users.

Examples of Understandable Content

Other characteristics of understandable content include the following:

Text is readable and understandable
Content appears and operates in predictable ways
Helps users avoid and correct mistakes

Content Creator Role in Understandable Content

As a content creator, your role in creating understandable content includes:

Setting the language of a webpage, or indicating where there is a change in language
Creating a consistent navigation experience
Structuring lists, tables, and headings correctly
Adding labels to all form fields
Clearly marking required form field content as required
Providing clear instructions for completing processes

4. Robust

Examples of Robust Content

Content Creator Role in Robust Content

As a content creator, your role in creating robust content includes:

Reviewing id attributes (or the names given to elements on a page) are unique
Reviewing content provided in alternative formats (like documents or media) are compatible with assistive technology

What did you notice?

It was probably a bit easier to scan the content in the paragraphs and get a sense for the content. The lists broke up the content a bit more and helped group like items together. We even added numbers to the headings to help guide users through the four sections.

You might have noticed the content had a bit more white space as well. Visual and structural space provide some much needed pauses as you’re reading or listening to content on a screen. This space helps users understand the content a bit more easily.

Like headings, structured lists also help screen reader users skip over long lists using keyboard shortcuts.

Video: Paragraph with Structured Headings and Lists – Read by NVDA at 60% speech rate

Curious about how that paragraph reads for a screen reader user? You can review for yourself! The following video demonstrates how the screen reader NVDA read through the content with headings and lists in the section at 60% speech rate.

Notice that the time was slightly longer than listening to the paragraph without structure, just over six minutes. However, was it much easier to follow along since the paragraph had structural elements like headings, lists, and paragraph spaces?

Use Lists and Paragraph Breaks to Improve Readability

As you are thinking about your content, consider the size of your paragraphs and look for ways to break up the text either by adding a paragraph break or by breaking some of the content into a list to add some space for your readers to breathe.

So far we’ve reviewed how to structure text, but digital content often contains hyperlinks to additional resources. Let’s review how to make your hyperlinks accessible.

Structure with Hyperlinks

Hyperlinks are an essential element in digital content. They link pages together and help users access additional resources. However, if they are not structured appropriately, hyperlinks can create a barrier for users.

For hyperlinks to be accessible they must:

Be styled as a link
Make sense out of context
Be descriptive and unique

The web theme styles links as links, so all you need to pay attention to is how you are describing your hyperlinks. Review the following video to learn how to add hyperlinks to your content.

Video: Structure Your Content with Hyperlinks

Insert descriptive hyperlinks using the insert link option in the text editor. Review the following video for an example. Closed captions and a text transcript are provided.

Video Transcript: Structure Your Content with Hyperlinks

Adding hyperlinks to your content is easy when you use the insert edit link function or the shortcut key Control plus K.

Within your text content, select the text that you want to make a hyperlink and highlight it. You can either select the insert edit link button or use the keyboard shortcut Ctrl K.

Paste your URL into the dialog box that opens, and select apply. You can also open link options and select open link in new tab if you are linking to an outside resource. There are also two styling options available for links within the text editor.

To add these styles, select the text you want to make a link, insert your link using the insert edit link button, and then when your hyperlink is highlighted select formats. And you can choose text CTA to change the text to a Sans serif font or you can choose a button style and choose large standard, large ghost, small standard, or small ghost, and that will give your link an appearance like a button.

If you are using panels there are some options to add in pre-formatted text. So I’m going to add the image and text panel. Anytime you see a “call to action link” within the panel that’s an option to add a URL, so paste your URL into the URL field, and add a descriptive label, and this will display as a stylized link on your page.

Video: Generic Links

In the following video, learn two tips to write better link descriptions. Closed captions are provided and you can access a transcript at the provided link.

Video Transcript: Generic Links

Additional Resources for Using Hyperlinks Effectively

For more tips on using hyperlinks effectively, review the following resources. You can either review them now or bookmark them for future reference. Links will open in a new window.

Let's Review the paragraph again with hyperlinks added

What are the Web Content Accessibility Guidelines?

The Web Content Accessibility Guidelines, or WCAG, are a set of measurable standards you can follow to make your content accessible to the widest possible audience.

The Guidelines are divided into three levels of compliance:

Since most organizations aim for AA compliance, that’s where we’ll focus for this course. By following the WCAG, you can ensure everyone can use your digital content regardless of ability.

Four Main Principles

These standards are organized into four main principles:

Perceivable
Operable
Understandable
Robust

Perceivable

Examples of Perceivable Content

Other characteristics of perceivable content include the following:

Alternatives for non-text content, such as alt text descriptions for images or long descriptions for complex objects
Alternatives for time-based media, like captions, audio description, or text transcripts
Content can be presented in different ways without losing information or structure, such as perceiving content in a table in a linear fashion
Easy to distinguish foreground and background elements (colors and sounds), this includes good color contrast ratios and background sounds in videos

Content Creator Role in Perceivable Content

As a content creator, your role in creating perceivable content includes:

Adding short, meaningful alternative text descriptions to any images, charts, or graphs uploaded to your webpage
Adding long text descriptions of complex graphics either on the same page or as a link to an additional resource
Describing important visual information conveyed in a media file in the audio track
Providing accurate captions of any relevant sounds or dialogue in a media file
Providing a text transcript of a media file that includes both relevant visual and audio information
Using tables to present tabular data, and not merging cells, rows, or columns to convey visual information
Ensuring the color contrast of content, particularly text, is readable
Adding accurate labels to form fields
Adding structure tags, like headings, to content to convey the same information presented visually

Learn more about Perceivable Content

Operable

The second principle in the Web Content Accessibility Guidelines (WCAG) is Operable. Content must have an operable user interface and navigation to assist users in using and navigating content.

Examples of Operable Content

For example, a user can operate a webpage using touch to swipe the screen or they can navigate using a keyboard. A user can utilize a mouse or a screen reader to navigate content.

Other characteristics of operable content include the following:

Make all functionality available from a keyboard
Give users enough time to read and use content
Do not use content that causes seizures or physical reactions
Help users navigate and find content
Make it easier to use inputs other than a keyboard

Content Creator Role in Operable Content

As a content creator, your role in creating operable content includes:

Review interactive elements, like forms and embedded iFrames, added to the page for keyboard compatibility
Avoid time limits on forms or other content that might make users feel rushed
Avoid content that moves rapidly and flashes, strobes, or blinks
Provide clear paths to navigate the content on the page and on the site overall

Learn more about Operable Content

Understandable

The third principle in the Web Content Accessibility Guidelines (WCAG) is Understandable. Both the information contained in and the operation of the user interface must be understandable for users.

Examples of Understandable Content

Other characteristics of understandable content include the following:

Text is readable and understandable
Content appears and operates in predictable ways
Helps users avoid and correct mistakes

Content Creator Role in Understandable Content

As a content creator, your role in creating understandable content includes:

Setting the language of a webpage, or indicating where there is a change in language
Creating a consistent navigation experience
Structuring lists, tables, and headings correctly
Adding labels to all form fields
Clearly marking required form field content as required
Providing clear instructions for completing processes

Learn more about Understandable Content

Robust

Examples of Robust Content

Content Creator Role in Robust Content

As a content creator, your role in creating robust content includes:

Reviewing id attributes (or the names given to elements on a page) are unique
Reviewing content provided in alternative formats (like documents or media) are compatible with assistive technology

Learn more about Robust Content

What did you notice?

Were the links clearly labeled and easy to read? Were they styled as links and easy to distinguish from the rest of the text? Could you tell where the link was taking you without too much effort? These are all characteristics of accessible hyperlinks.

Video: Paragraph with Hyperlinks – Read by NVDA at 60% speech rate

Curious about how that paragraph reads for a screen reader user? You can review for yourself! The following video demonstrates how the screen reader NVDA reads through hyperlinks at 60% speech rate. The first half of the video demonstrates how a user can skip through links to quickly navigate the content. The second half of the video demonstrates a link read within a paragraph of text.

You may have noticed the reader announced that content was a link, even though the text description didn’t say link. This is because the structure of a link, let’s the screen reader know that it is a link. When you are writing your link descriptions, you don’t need to tell users it’s a link. They’ll know from the structure.

Most of what we’ve reviewed so far has been text. But what about images and media? They make up a large part of the web, so how can we make them accessible?

Structure with Images and Media

Images and media are visual in nature. Therefore the best way to make them accessible is to provide a text description.

You may have noticed we are using images and media in this workshop.

All the images used in this workshop have alternative text descriptions that are accessible by a screen reader. All the media shared in this workshop have important visual information described in the audio, captions provided for the dialogue, and a text transcript near the video.

These are all ways to convey visual information in a textual way so it’s accessible to the widest possible audience. If you didn’t need one of these alternatives, like the text transcript, it was easy to skip over because we identified it using a heading.

Video: Describing Images

While it seems simple enough, describing images can be the most challenging aspect of creating accessible content. In the following video, learn three tips to write better image descriptions. Closed captions are provided and you can access a transcript at the provided link.

Video Transcript: Describing Images

Artificial Intelligence and Image Descriptions

Technology is changing everyday and artificial intelligence is getting better at interpreting the content in images.

Consider the following three examples.

One is the description written by the content creator using the “object + action + context” method of description. The second and third descriptions are created using different AI tools.

What do you notice about the three? When might more detailed descriptions be helpful? When might they be more “noisy?”

After reviewing the text descriptions, you can open the image to see the scene described.

Content Creator Description

Young boy wearing Paw Patrol pajamas jumping in the air onto a pile of pillows

Pros: short, concise, describes relevant details
Cons: does not include every detail in the image, users may want to know more

Seeing AI Description

Child jumping on bed, person: 7 year old girl with blond hair

Pros: short, includes actions and some characteristics
Cons: not accurate, some of the descriptions aren’t helpful or really describe what’s happening in the image

Be My AI Description

A young boy is captured mid-jump above a couch, his right arm raised triumphantly. He’s wearing pajamas with a pattern of cartoon characters. The room appears to be a cozy basement with a laid-back vibe, featuring a large TV, storage shelves, and a sign with inspirational words like kind, brave, and honest. There are also baskets labeled pillows and a blue child’s chair. The scene is full of life and energy, suggesting a moment of carefree play.

Pros: extremely detailed, including actions and emotions
Cons: length, may have inaccurate or extra information that’s not necessary

Ways to use AI to help with Images

There are several ways that AI can assist you with creating more accessible images.

Describe

You can ask AI to describe an image for you. This can help you determine what is an appropriate alternative text description for your content.

Transcribe

If you have a complex image, you can ask AI to transcribe the text. You can then use that text to add a caption to long description to your content.

Suggest

If you’re not sure what image may work well with your text, you can ask AI to suggest an image to support a certain passage of text. Then you can either create or find an image that is appropriate for your content.

Additional Resources for Using Images and Media Effectively

The main thing to remember when it comes to images is to be intentional about how you are describing. If you don’t describe your image, the user may need to rely on unhelpful AI generated descriptions or not know an image exists at all. Don’t leave them wondering. Be intentional.

For more tips on using images and media effectively, review the following resources. You can either review them now or bookmark them for future reference. Links will open in a new window.

Social Media Accessibility

The majority of social media is based on visual content like images and media. Therefore it’s crucial you plan ahead for accessibility before publishing any content. Check out the Social Media Content Accessibility Checklist for details.

Structure with Tables

Tables are another way to organize content, however too often they are used to convey visual relationships instead of tabular data. Using tables for design purposes causes the responsive nature of the page to break, and hurts user accessibility.

Boise State uses TablePress to display tabular data on WordPress web pages. TablePress is a WordPress plugin that enables you to create and manage tables on your site.

The benefit of using TablePress is that no HTML knowledge is required to create a table. TablePress provides a user-friendly interface allows you to easily manage and edit table data. However, you should follow accessibility best practices to ensure your table is accessible.

Accessibility Best Practices and Table Examples

Accessibility Best Practices for Tables

Accessibility best practices for tables include:

Only use a table when necessary
Never merge columns or rows
Keep tables simple
Always include a header row
Break up large groups of data into multiple smaller tables
Review all accessibility recommendations for table settings

When designed with accessibility in mind, tables are a great option for displaying tabular data. Review Using WordPress: TablePress for complete list of recommendations. For examples of inaccessible and accessible tables, review the tabs within this section.

Example of Inaccessible Table

In this example, the first row contains bold text, but is not a true header row. And there are combined or merged cells to imply a visual relationship. Relying solely on visuals to make the relationship can make understanding the table more challenging for some users.

Inaccessible Table

Image location	Image width x height
People List Panel	200px x 250px
Card Grid Panel	664px x 664px
Image + Text Panel
Post Featured Image
Video + Text Panel	900px x 600px
Section Main Page Header	1300px x 687px
Content outside of panels	1300px x 687px
Interstitial Panel	1600px x 826px

What does this table sound like with a screen reader?

The following table is an example of what the table sounds like with NVDA at 60% speech rate. Closed captions are provided. You can speed up for slow down the video by adjusting the playback speed in the video settings. A transcript is also provided.

Inaccessible Table – Read with NVDA at 60% speech rate

Transcript

[NVDA] table with nine rows and two columns

Row one column one; image location
Column two; image width x height

Row two column one; people list panel
Column two; 200pxx 250px

Row three column one; card grid panel
Row three through five column two; 664 pxx 664px

Row four column one; image plus text panel

Row five; post featured image

Row six; video plus text panel
Column two; 900pxx 600px

Row seven column one; section main page header

Row seven through eight column two; 1300 pxx 687px

Row eight column one; content outside of panels

Row nine interstitial panel column two; 1600 pxx 826px

out of table

Example of Accessible Table

In this example, the first row is tagged as a header row and is styled to look like a header row. There are no combined or merged cells, and each cell contains a single piece of data.

Accessible Table

Image Location	Image Width (pixels)	Image Height (pixels)
Card Grid Panel	664	664
Section Main Page Header	1300	687
Image + Text Panel	664	664
Interstitial Panel	1600	826
People List Panel	200	250
Post Featured Image	664	664
Video + Text Panel	900	600
Content outside of panels	No larger than 1300	No larger than 687

What does this table sound like with a screen reader?

Accessible Table – Read with NVDA at 60% speech rate

Transcript

[NVDA] table with nine rows and three columns

Row one image location column one; image location
Image width pixels column two; image width pixels
Image height pixels column three; image height pixels

Row two image location column one; card grid panel
Image width pixels column two; 664
Image height pixels column three; 664

Row three image location column one; section main page header
Image width pixels column two; 1,300
Image height pixels column three; 687

Row four image location column one; image plus text panel
Image width pixels column two; 664
Image height pixels column three; 664

Row five image location column one; interstitial panel
Image width pixels column two; 1,600
Image height pixels column three; 826

Row six image location column one; list panel
Image width pixels column two; 200
Image height pixels column three; 250

Row seven image location column one; Post featured image
Image width pixels column two; 664
Image height pixels column three; 664

Row eight image location column one; video plus text panel
Image width pixels column two; 900
Image height pixels column three; 600

Row nine image location column one; content outside of panels
Image width pixels column two; no larger than 1,300
Image height pixels column three; no larger than 687

out of table

What did you notice?

Did you notice that the inaccessible table was a little more difficult to follow? You had to work a bit harder to understand where you were in the table, and if you didn’t have the visual to follow along with, you might easily get lost.

The accessible table was more regular. There was one piece of data in each cell, the header cell helped announce what column the content contained, and it read in a logical order. These characteristics are essential to help users navigate tables effectively.

Accessible Web Content

By now, you should have a pretty good idea of what accessible web content is and what it is not. You’ve reviewed inaccessible and accessible examples. You’ve also reviewed examples of what content sounds like with a screen readers.

Accessible web content contains the structure necessary to help users:

Navigate the content quickly and efficiently
Understand the content without lots of effort
Access the content in multiple ways through text descriptions

Without this structure, your content may as well be a wall of text like that first example in the paragraph without structure. So far, we’ve covered the majority of structural elements that you can add to a webpage. These include:

Headings
Lists
Hyperlinks
Images and Media
Tables

However, there is another element that is commonly shared online and is often an accessibility barrier for users: Documents.

Structure with Documents

Documents require the same structure as a webpage for users to navigate effectively. Unlike a webpage, which contains a web theme to handle most of the design elements, you personally have to create your document structure from scratch every single time you open a document.

This means paying attention to document’s content, design, structure as well as accessibility and brand standard requirements for every single document you create.

Another barrier to documents is that they require a reader independent of the browser. This means that even if your document is fully accessible, if the user is using an inaccessible reader tool, your document isn’t accessible.

This creates an inequitable user experience before your document is even opened by your readers. Since the potential for barriers with documents is so high, like tables, you should only use documents when absolutely necessary.

Shifting from Print to Digital

Before sharing a document ask yourself:

Can the entire document be shared as web content?
Can a portion of the document be shared as web content?

If your content can be shared as web content, even a portion of it, that is a more accessible alternative to a document. Review the video for tips on how you can shift your mindset from a print document to a digital resource. Closed captions are available and a transcript is provided. Note: Boise State now uses Monsido instead of Siteimprove.

Access Shifting from Print to Digital Transcript and Learn more Tips

Using Documents Effectively

Inaccessible Content Notice

All efforts must be made to ensure all content is accessible at the time you publish it. If you don’t take the time to ensure your document is accessible, you risk it being taken down from the site for violation of university policy.

The Office of Information Technology will remove any inaccessible documents or web content uploaded or published after October 1, 2021. Site administrators and department staff are responsible for ensuring all web content is accessible on university websites per university policies including Policy 8140 Information Technology Accessibility and Policy 8040 University Webpages and Electronic Publications.

Requesting an Accessibility Review

We understand that some content does require a document format. And that sometimes, you may need assistance making this content accessible. Before you publish a document on WordPress, you can request a Document Accessibility Review by the accessibility team.

Additional Resources for Accessible Documents

For more tips on creating and publishing accessible documents, review the following resources. You can either review them now or bookmark them for future reference. Links will open in a new window.

Wrapping Up

5. Checking Your Work

We’ve covered a lot of topics today. You may be feeling a bit overwhelmed or unsure how you can remember all of this the next time you want to publish web content.

Thankfully, there are a variety of tools available to help you stay on track!

Review the checklists and resources available on Webguide to review your content while you are creating and after publishing.

Webguide: Accessibility Checklists

Final Reflection

Please complete this short reflection to:

Assess your current confidence level about creating accessible content
List your main takeaways from the workshop
Identify steps you plan to take to ensure your content is accessible
Ask any final questions

Reflection Form

Name(Required)

First Last

Email(Required)

Enter your Boise State Email Address

Before today's workshop, how would you rate your knowledge of digital accessibility?

No knowledge or awareness of digital accessibility

Some knowledge or awareness of digital accessibility

A lot of knowledge or awareness of digital accessibility

After completing this workshop, how confident do you feel about creating accessible digital content?

No way! I don't think I can create accessible digital content

Maybe? But there's a lot to review and remember

Yes, but I still have questions about what to do

I'm ready to try it out on my own

100% yes!

Name one thing, idea, or tip you are taking away from this workshop.

What is one step you can take today to create more accessible digital content?

Questions?

If you have any questions for the Web Accessibility Team, please list them here and someone will be in touch with you.

Going Further

Web Tools and Remediation Micro-Certification

Want to take your accessibility skills to the next level? Consider registering for the self-paced online micro-certification course! You’ll learn how to craft web content that works for all. Don’t delay, register today!