1/35

The 7 Core Skills of Digital Accessibility

Christina Goodland and Karen Shapiro

February 27, 2020

Download these slides at z.umn.edu/7-core-skills

2/35

Their relatives might be better known. . .

3/35

. . . but the 7 core skills of digital accessibility should really be more famous.

They address the most common types of digital content.
They impact the largest number of people.
They are the most transferable from tool to tool.

Karen

...that the 7 Core Skills of Digital Accessibility are the real stars here. They should be the most famous! Here’s why we call them the 7 Core Skills:�They address the most common types of digital content, the ones you find in nearly every kind of digital product.

Therefore, when we get them right it affects the largest number of people.

Also, once you learn these core skills, you can transfer your knowledge from tool to tool - for example, when you understand the concept of headings, you can apply it when creating Slides or Documents or PDFs or a website.

For those reasons, the 7 skills we will present to you today are called the 7 Core Skills of Digital Accessibility.

Our goal today is to review these 7 skills and also to show you some of the new University of Minnesota resources where you - and your colleagues, students, and friends - can learn more about them. So many of you have been instrumental in creating the resources we are going to show you today; THANK YOU, from the bottom of our hearts, for all of the time and knowledge you have so generously shared with us.

4/35

What are the skills?

Alternative Text

Contrast

Headings

Links

Lists

Tables

Video and Audio

1

4

2

3

5

6

7

5/35

Where can you learn more?

Accessible U site

Refreshed by April 2020: accessibility.umn.edu

Digital Accessibility Badging Program

z.umn.edu/�digital-accessibility-badging

Christina

More than a dozen volunteers from the U system have been working to coordinate content on the Accessible U site with the new Digital Accessibility Badging Program course content and other U sites since this summer.

This is an outcome of the Digital Accessibility charge by Bernie Gulachek (VP and CIO) and Julie Showers (Interim Associate VP for Compliance) and a collaboration between the Digital Accessibility Stakeholders Group, the Disability Resource Center, and OIT.

Badging Program:

Self-paced online workshops and digital badge opportunity for anyone in the U community about how to create emails, slide decks, documents, and other digital content in an accessible way without using code.

Other Accessible U Goals:

Move the site to Drupal 8
Update the navigation and layout with Folwell design system components
Update and coordinate content with other U sites

Accessible U Content: Promote awareness and provide review of skills that cut across tools

Why
Who
Skills/Good Practices that cut across tools and badging program participants can use to review what they learned
Later a place where people can share knowledge
Inclusive by Design site content

Information Technology Site Content:

Tool-specific how-to accessibility information included in existing knowledge articles with links back to Accessible U

Folwell Design System Site:

Accessibility criteria, testing results, and best practices for Folwell components, reviewed to keep in sync with Accessible U

University Relations Internal Communications Tools Page:

Pointers to and coordination with Accessible U content

6/35

Alternative Text

7/35

Alternative text describes image content.

Impact

It can benefit:

People who use screen readers
People whose browsers are not displaying images
People learning English

Good Practices

Provide alternative text for meaningful images
Include an empty alt attribute for decorative or contextualized images
Provide a description for charts and graphs

8/35

Learn More About Alternative Text

Accessible U

Alternative Text
Image Tags and Styles
Links to how-to instructions

Badging Program

9/35

Example Alternative Text from Accessible U

10/35

Contrast

11/35

Contrast is the difference in brightness between foreground and background.

Impact

It can impact people with low vision or color blindness.

Good Practices

Use color with another cue to show emphasis or difference

There also are different contrast requirements for:

Text
Images
Interface elements

12/35

Learn More About Contrast

Accessible U

Contrast
Images
Links to how-to instructions

Badging Program

13/35

Contrast Example from Badging Program

Context

Tool-specific directions

Activities, examples, and resources

14/35

Headings

15/35

Headings organize content.

Impact

They help all users understand the structure of the content.

They always impact people using screen readers.

Good Practices

Use heading styles
Match heading levels to content structure
Create tables of content in long documents

Chris

I am so eager to help our website contributors use headings well because they are essential to helping all users understand and navigate the content.

If you are sighted, headings help you understand written content. We are so used to this that we don’t realize they are a writing and printing convention that has developed over hundreds of years.

Screen reader users also use them to understand content structure this way, as well as to navigate digital content.

“On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.”

How Little Do Users Read? from Nielsen Norman Group

Organize your paragraphs under descriptive headings, and apply "styles" to these headings.

Heading tags should never be used to control font characteristics alone. They should reflect the semantic structure of the content.

Do

Use level 1 headings to indicate the title, topic, or purpose of each page.
Repeat all or part of the level 1 heading in the browser page title of webpages.
Use level 2 headings to indicate each main section of the document.
Use level 3 headings to indicate sub-sections.
Use level 4, 5, and 6 headings to indicate sub-sub-sections.

Don't

Don't use heading styles out of order just because you like the way a particular heading level looks, such as using a heading 4 style after a heading 2 style.

16/35

Learn More About Headings

Accessible U

Headings
HTML and CSS
Links to how-to instructions

Badging Program

17/35

Headings Example from Badging Program

18/35

Headings

19/35

Links connect content on the internet.

Impact

They help all users navigate.

They can impact:

People using screen readers
People navigating via keyboard
People with dyslexia or visual processing disorders
People with attention disorders

Good Practices

Link meaningful text
Be descriptive and concise
Avoid repetitious links

Chris

Well-written and well-placed links help all users.

As we already learned, sighted users typically scan pages for links as well as headings.
People using screen readers can do something similar and hear a list of all the links on a page.

Links should provide enough context to help all users make an informed decision about which links they want to follow.

Embed most links in other text: Write as you normally would, and link a few words that give an indication of what the link leads to.
Don’t link URLs, but do write out email addresses and link them so people know it is an email link.
Avoid linking “click here, read more, listen to a sample, etc. Listening to or scanning through a list of such links won’t help anyone decide if the links are worth clicking.
Don’t link the same thing multiple times. User may wonder if it links to the same resource, and screen reader users have to listen to them over and over.

20/35

Learn More About Links

Accessible U

Links
Link Tags and Styles
Links to how-to instructions

Badging Program

21/35

Links Example from Badging Program

22/35

Lists

23/35

Lists are structured ways of organizing items.

Impact

They can help all users scan a page.

They can impact:

People using screen readers
People with dyslexia or visual processing disorders
People with attention disorders

Good Practices

Use numbers when the order is important
Use bullets when the order doesn’t matter
Always use built-in list tools
Structure long lists
Use standard bullets

24/35

Learn More About Lists

Accessible U

Lists
Links to how-to instructions

Badging Program

25/35

Example Lists from Accessible U

26/35

Tables

27/35

Tables organize data relationships in grids.

Impact

They can help all users understand the data.

They can impact:

People using screen readers
People with dyslexia or visual processing disorders
People with attention disorders

Good Practices

Use tables for data, not layout
Always indicate header rows and columns
Avoid or simplify complex tables
Provide contextual information
Include content in all cells

Chris

When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.

On the other hand, a screen reader can only read aloud each cell one by one from left to right and top to bottom.

If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.

Don't use tables to make your webpage look a particular way.
Designate at least one row and/or column header, but no more than one each, using the table formatting tools in your web content management system or document creation software.
Don’t merge cells or include a table within a table.
Associate descriptive text about a table with its respective table by including a <caption> element in HTML or alt text in Microsoft Word.
Include text such as "N/A" to indicate that there is no data in empty cells.

28/35

Learn More About Tables

Accessible U

Tables
Table Tags and Styles
Spreadsheets
Links to how-to instructions

Badging Program

29/35

Example Tables from Accessible U

30/35

Audio and Vidoe

31/35

Captions, transcripts, and descriptions provide alternative access to video and audio content.

Impact

Captions are synchronized text versions of the audio content that help people who are deaf or hard of hearing.
Audio descriptions provide more information about what is happening on-screen for people with low or no vision.

Good Practices

Review, edit, or create video captions
Review and/or integrate audio descriptions
Include video or audio transcripts
Choose accessible playback tools

32/35

Learn More About Video and Audio

Accessible U

Video and Audio
Links to how-to instructions

Badging Program

Training is being developed.

Ensuring Accessible Video self-help guide:

33/35

Audio Description Example from Badging Program

34/35

What’s Next?

Spread the word
Give us feedback
Watch for communications

35/35

Thank You