ITS Services and Applications
Page tree

ITS Accessibility logo

 

 


Module 1 - Accessible Web Content

In this module, you will learn the basics of creating accessible web content.

 


WordPress - Formatting Using Styles

This tutorial focuses on using styles (headings and automatic bulleted or numbered lists) to make content more accessible to individuals using screen readers.

Please note that while this tutorial focuses on content in WordPress, the basic concepts are also applicable to web content created using other content management systems or coded manually, as well as to content in Microsoft Word documents.

Required tools and background knowledge:

  • Administrative access to an SU Expressions site (or other WordPress site)
  • Basic knowledge of how to create and edit a page in WordPress
  • A device capable of accessing, editing, and updating WordPress pages

Objectives:

By the end of this tutorial, learners should be able to:

  • Identify why and how styles improve accessibility for screen reader users
  • Identify why pages set up without headings may be difficult for screen reader users to access
  • Create a new page in WordPress and set it up using headings and bulleted or numbered lists
  • Remediate existing WordPress pages by adding headings and bulleted or numbered lists

Instructions:

Note - If closed captions do not display automatically, select the "CC" button in the video player.

Access the WordPress - Formatting Using Styles video natively in YouTube here if you experience any access difficulties with the embedded version below.


This tutorial focuses on understanding descriptive hyperlinks and why to create them, and provides basic instructional information on how to do so.

Objectives:

By the end of this tutorial, learners should be able to:

  • Identify what makes a link descriptive or non-descriptive
  • Identify usability and accessibility issues with links that are non-descriptive or overly long
  • Create hyperlinks that are descriptive and usable
  • Convert existing non-descriptive, or poorly written, hyperlinks to be descriptive and usable

Instructions:

  • Watch the Creating Descriptive Hyperlinks video tutorial, below.
  • (Optional) In a WordPress page, other webpage, or Word document, practice writing link descriptions.

Note - If closed captions do not display automatically, select the "CC" button in the video player.

Access the Creating Descriptive Hyperlinks video natively in YouTube here if you experience any access difficulties with the embedded version below.


Creating and Understanding Alternative Text

This tutorial helps users to understand how why creating alternative text ("alt text") is important (in most cases), and gives information about "good" and "bad" practice in creating alt text.

Objectives:

By the end of this tutorial, learners should be able to:

  • Define alt text and its purpose
  • Identify at least two examples of "bad practice" in creating alt text
  • Add alt text to an existing image in WordPress

Instructions:

  • Watch the Creating and Understanding Alternative Text video, below.
  • Log in to your own Expressions site, or another WordPress site, upload an image of your choosing, and add your own alt text.

Note - If closed captions do not display automatically, select the "CC" button in the video player.

(Image of pug puppies used in this video is in the public domain.)

Access the Understanding and Creating Alternative Text video natively in YouTube here if you experience any access difficulties with the embedded version below.

 


Keyboard Access Part 1- Tab Focus

This tutorial provides information on the basics of keyboard access, and gives a demonstration of what tab focus is and why "good" tab focus is important for accessibility.

Objectives:

By the end of this tutorial, learners should be able to:

  • Identify why some individuals may use the keyboard to navigate web content, instead of the mouse
  • Demonstrate how to navigate between hyperlinks on a webpage using the keyboard
  • Define "tab focus" in the context of web content
  • Identify "good" and "bad" tab focus on any given webpage, and explain their reasoning

Instructions:

  • Watch the Keyboard Access, Part 1- Tab Focus video, below.
  • Open up your web browser and follow the directions in the video for checking tab focus on any website you would like.
  • Try this out with different web browsers!

Note - If closed captions do not display automatically, select the "CC" button in the video player.

Access the Keyboard Access Part 1 - Tab Focus video natively in YouTube here if you experience any access difficulties with the embedded version below.


Keyboard Access Part 2 - Skip to Content

This tutorial provides information on what skip to content links are, and how they help keyboard users navigate through content with greater efficiency.

Objectives:

By the end of this tutorial, learners should be able to:

  • Identify what a skip to content link is, and what options it provides the user with
  • Identify how having a skip to content link makes page navigation easier for keyboard users
  • Identify where the skip to content link should be placed on a page

Instructions

  • Watch the Keyboard Access Part 2- Skip to Content video, below
  • Open up your web browser and use the Tab key to navigate through a website of your choice and check if the site has a skip to content/skip navigation/skip to main content link

Note - If closed captions do not display automatically, select the "CC" button in the video player.

Access the Keyboard Access Part 2 - Skip to Content video natively in YouTube here if you experience any access difficulties with the embedded version below.

*Design of the "visual focus square" in the Skip to Content video (as shown between the 1:03 and 1:17 marks) was inspired by "soda straw approach" demonstration shown at approximately the 3 minute mark in this UW Madison video on screen readers.