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.
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
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.
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: Structured Headings
Headings are also very easy to add to your content. Review the following video for an example. Closed captions are available and a text transcript is provided following the video.
Video Transcript: Structured Headings
Every web page requires a single heading one. This is applied by adding a title to your web page. Just like a house address helps you find a specific home, a web page title helps users and search engines find a specific page on the internet. A clear and descriptive page title tells both humans and search engines what the page is about. It’s like a signpost that guides users in the right direction. To your page, add a clear descriptive page title. For this example we are going to call this page structured headings. When adding headings to your web page, you have both headings and subheadings. Headings are like big signs that tell you what the main topic of a section is. For example after you arrive at the house you walk in and you have different rooms. You have a living room, a dining room, a kitchen, a bedroom, a bathroom. Those tell the user something about what is in that specific section. To add headings to your page, you can type your text and then transform it to a heading, or you can add a heading block by selecting the add block button. After selecting add block select the heading block. You can also choose the toggle block inserter button and select heading from the available lists. Once you have a heading block selected you can type your heading text. If you have text added to your page that you want to make a heading select the block where the text is located, select the paragraph icon, and then transform to heading. And repeat this process as often as needed. If you choose to use any of the theme blocks on your page content, you will add headings using the title field. Select one of the theme blocks either by selecting add block or select the toggle block inserter button and locate the theme block that you want to add to your page, In this example I am going to add an image and text theme block to my page. When I select the edit button switch to edit there is now a title field. This title field will display as a heading on my page. Make all of the edits to your theme block as needed and then switch to preview to view the content on the page. If needed you can add subheadings to your page content. Subheadings are smaller signs that tell you more specific details about what’s in that section so for example after you walk into the house and you are in the living room a subheading might explain what’s in that room. So you might have a couch, a coffee table, a rug, an entertainment center. Things like that. Those tell you information about what is in that specific section. To add subheadings to your page insert another heading block, however you choose to do that, in this instance I’m going to select add block and select Heading. By default the Heading block always is a heading level two. That is our main section heading. We want to change this to be a subheading which is the next heading level or heading level three. After you’ve changed the block to heading level three you can type your text and repeat this process as often is needed. If you have text already written and you need to make it a heading you can select the paragraph option and transform to heading and then change the heading level. Another great feature available in WordPress to check your headings for accessibility is the document overview. Select the document overview button to open the list view. This gives you a list view of all of the content and the structured content on your page. If you toggle to the outline view you will see a list of the headings and it should follow a semantic order. So your heading twos are all your main section headings, followed by your subheadings and if there were subheadings of those subheadings they would be the next level and so on. So this is a great way to check your work as you are building your content. When you are all done save your content and publish your web page.
Video Underlined Text
It’s sometimes tempting to use text formats like bold, italics, or underlines to emphasize a point on the page. However, this isn’t the most effective way to help users understand your content. In the following video, learn two tips to make your important information stand out. Closed captions are provided and you can access a transcript at the provided link
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: List Block
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: List Block
Lists provide a number of benefits for your content including improved readability, enhanced organization, and better user experience. All lists fall into one of these two categories. They are either unordered or ordered. And to use lists effectively you should keep them concise, use consistent formatting, use them sparingly, and also check them for accessibility. To add lists to your content you will use the list block. And you can either access this block by selecting the toggle block inserter button and selecting list from the available options or by adding a list block to your content or transforming your text to a list. If you already have text on your page you can highlight your content select the paragraph button and transform to a list. By default an unordered list is selected. If you need to change it to an ordered list you would simply select ordered list. To continue to add list items to this list select enter and the list block will automatically be selected and you can type your list items. To exit the list block simply enter twice to access a blank block. Repeat this process as often as needed to structure your content as list items.
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:
- A
- AA
- 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.
1. 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
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
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
- 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
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?
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: Adding 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: Adding Hyperlinks
Adding hyperlinks to your content is easy when you use the insert link button or the keyboard shortcut control+ K. Within your text content select the text you want to make a hyperlink and highlight it. You can either select the link button or use the keyboard shortcut control+ K . Paste your URL in the dialogue box that opens and select apply. If you select the hyperlink that’s been added to your content, you can access additional options using the edit link. Advanced options include open in a new tab, search engines should not follow this link mark as no follow or this is a sponsored link or advert mark as sponsored. Select which options you need and select save. You can also add a stylized link that looks like a button using the button block. To add a button block select the add block button and search for button. Add your text to the button that appears on the page and select the text, and then select the link button from the toolbar. You can also use the keyboard shortcut control+ K. Paste your hyperlink into the dialogue box and hit apply. You can also access the advanced options using the edit link button to open in a new tab or to mark as no follow. If you are using a theme block you have the option to add call to action links to those fields as well. Select add block or the toggle block inserter button and locate the theme block you want to add. For this example I’m going to select image and text. After I select the edit option, I have the ability to ‘select a link.’ Anywhere in the theme blocks that this select link option is available you can add a URL and Link text to create a stylized link in your theme block and it will appear as a stylized button on the page. Make sure you follow all recommendations for the theme blocks as listed on Webguide.
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.
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:
- A
- AA
- 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
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
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
- 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
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?
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.
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.
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 Acquia Optimize instead of Siteimprove.
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.
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.
Respect the Boise State Web Theme
To ensure consistency and accessibility across the Boise State WordPress sites, please do not use inline CSS, HTML tags, or make any changes to color, typography, shadows, or width settings to style text.
The Boise State WordPress Theme manages theme styles in accordance with Brand standards and University Policy 10000.
The WordPress Support Team reserves the right to make content changes on any web page to ensure policy compliance.
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
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!
To learn even more about Accessibility at Boise State, visit the new dedicated Accessibility site: BoiseState.edu/Accessibility.
