By Jennie Delisi, Accessibility Analyst

When it comes to starting your digital accessibility learning journey, we all need some help to take control and just start. This article will help you when you feel:

• Lost, because you don’t know where to start.
• Fear of self-judgment, for not having a clear plan.
• Overwhelmed because of the size of the topic.

Start here!

1. Commit to 15 minutes per week (you can do more if you have time). Starting small will feel manageable. Make a recurring calendar appointment for yourself.
2. Bookmark this article. Add it to your calendar appointment. Use this as your learning plan, or on those days when you do not have another learning activity already identified.
3. Track your progress. Document 2 items from each study session:
   1. What did you do? This will help you review your progress over time. Sometimes we forget where we started. Demonstrating progress will keep you working on your goal.
   2. What questions do you have after completing the activity? These will help you decide what to focus on during future study sessions.

Ready to start? This month we have simple and fun activities that will help you begin to learn more about digital accessibility.

Spot the Auto-Captions Game - Videos

“Auto-captions” means machine generated.

And, the accuracy of auto-captions can vary based on the tool.

Why does this matter?

Check out these videos and see for yourself. Yep, you get to watch videos at work this week. You're welcome!

Humorous Example of the Dangers of Auto-Captions

This video has  3 important visuals that aren’t described in the audio. Because there is no audio description I am including them here before you view the video.

1. Before the actors go through the script the first time, onscreen is the text “Round One: Original Script.”
2. After the punch sound, and you hear “let’s do that again,” onscreen text is “Round Two: Computer’s Interpretation of Original Script.” This version has the actors speaking what had been in the auto-captions during Round One.
3. After the phrase “You wanna get” – instead of punching the man, this time the other man grabs his face around the mouth and looks like he is typing on his face. The man whose face he is typing on says “does it again.” Then, the text onscreen is “Round Three: Computer’s Interpretation of Round Two.” This version has the actors speaking what had been in the auto-captions during Round Two.

Caption Fail: Jamaican Vacation Hoax (video).

Good Captions Example

This video has a lot of visual jokes, so the company made 2 versions. Disclaimer: Minnesota IT Services does not own or promote the contents of the videos linked in this article.

• Version with captions: Meet Carnival’s New CFO: Shaquille O’Neal (video).
• Version with captions and extended audio description: Meet Carnival’s New CFO: Shaquille O’Neal (audio described video).

Understand the Impact of Visible Focus – Interactive Game

This in-browser game is fall and Halloween themed. Use your tab key to participate. Sometimes you see the visible focus, and other times you do not. 

Check it out – use the TAB key to select the pumpkin. Then follow instructions: 

Hocus :focus

Screenshots and Text Alternative – Thinking Activity

You have a broken monitor – just for images. You are only receiving text (for some strange fictional reason). The text is all you get from documents, web pages, and emails.

You receive instructions to complete a task, and with it, a screenshot you can't use. Now what?

The alternative text someone completed for the screenshot tells you what you need, right?

• Does it describe what is in the screenshot - the important details?
• Does it tell you if there are arrows pointing to specific buttons or areas of the screenshot?
• Does it tell you the name of the location of the item you are to find (example: in the ribbon) or does it say the direction like, “on the right” (not helpful if you cannot see the image)?

What would you use as alt text for this image? 

Note: if you check the alt text for this image, it includes everything, which is not the correct answer. Reason: too much detail. But I provided it for an important reason. If you cannot see this image and want to participate, I need to provide everything that people with vision get from this example.

For your alt text, focus on the purpose you are including the screenshot. For this image, you want the reader to follow Minnesota IT Services on Twitter. What does the reader need the image to show / tell them?

Keyboard Testing Challenge – Learn, Try

Everyone should have some basic keyboard accessibility testing basics.

There are HTML keyboard shortcuts, and there are software keyboard shortcuts, like for applications like Microsoft Teams.

This challenge is to learn one thing you can do using only your keyboard for Microsoft Teams or another application you use every day.

One example:

• For Microsoft Teams: navigate to the chat interface, open an already started chat, get to the text box to reply, use the send button. (CTRL + 2, arrow to a chat then ENTER to open it, TAB to text field if not already there, type your message, TAB to the send button, ENTER)

3 supports for this task:

• WebAIM's keyboard testing table - lists common commands and expected behaviors for HTML
• Microsoft Teams keyboard shortcuts
• Downloadable PDF of common keyboard shortcuts

Page Titles – Learn, Try

What are they?

• Open a webpage.
• Hover with your mouse over the browser tab (or look at the code, or listen with a screen reader to the tab).
• Page title: the text that displays in the browser tab.

Example:

Without knowing the URL, the page title/ text of each of these tabs shows that I have 3 tabs open: Twitter notifications, The Office of Accessibility page on the MNIT website, and Yammer.

Who uses it?

• People using screen readers hear this when they load a page, and when they navigate between open tabs. (Who has just one tab open at a time, right?)
• People who keep multiple tabs open. Sometimes you have multiple tabs open within the same site. Using the example of a conference, it can be helpful to know which page is for registration, which page is the schedule, etc. 

• Use the title element. Here's an article to help: Providing a title using the title element.

Want more information?

• Understanding Success Criterion 2.4.2: Page Titled

Next: review some of the page titles of web pages you visit throughout the day. Are they accurate?

An Introduction to Headings – Learn, Testing Tool

For everyone:

Learn about why headings matter and how and when to use them. This applies to those making all types of content.

• Headings Create the Page Outline
• Semantic Structure: Regions, Headings, and Lists

A great resource for ongoing learning is the W3C's Web Accessibility Tutorials. And, they have a page called Page Structure Tutorial. I like this page because it is easy to quickly review a concept or learn a small amount of information.

For document creators, check out the Module 2: Working with Styles. This is from the State of Minnesota’s online, self-paced Accessible Word Document Training (note for state employees: this is also available in your Enterprise Learning Management tool).

Tool to try: Paul J. Adam’s Headings Bookmarklet for Accessibility Testing

To use it:

• Go to the Paul J. Adam’s Headings Bookmarklet for Accessibility Testing page.
• Add to your bookmarks option 1: go to the Headings Bookmarklet link, drag to your bookmarks bar.
• Add to your bookmarks option 2: tab to the Headings Bookmarklet link, copy the link, go to your bookmarks manager and create a new bookmark using this link.
• Ready to check headings on a webpage? Select that bookmarklet.
• Note: this tool does not tell you if there are mistakes. It identifies what has heading code, and the level.
• Review the results:
  • Yellow highlights, <> with heading level or WAI-ARIA role and level become available on the page for each text that has them.
  • Which text on the page should be a heading and does not have one?
  • Which text on the page has a heading but should not?
  • Are there any skipped headings? Note: slightly more complicated testing tools like WAVE can identify skipped heading levels.

Next Steps

Congratulations! You have completed the activities. Now you can:

• Begin to find answers to the questions you recorded.
• Find a study partner! This can be so helpful. This provides another person to help find answers, and someone to work with on similar goals.
• Be sure you have subscribed to the Office of Accessibility newsletter. We will have webinars, tech tips, and articles to help you learn more.