Want to make interactive content? It’s easy in Genially!

Over 30 million people build interactive content in Genially.

Check out what others have designed:

Transcript

Accessibility in Digital content

Start

Objectives

You will be able to

  1. identify the purpose and importance of making digital content usable for diverse groups of people.
  2. identify common accessibility issues that arise in digital content.
  3. utilise tools and techniques to evaluate and improve the accessibility of digital content.

The Importance of Digital Accessibility

View More

24%

In the United Kingdom, about 24% of adults identify as having a disability or long term condition. The true figure is likely to be much higher.

97%

of the world's top 1 million websites fail to comply with WCAG 2.0 (accessibility standards.)

Data

Data from Bureau of Internet Accessibility, Inc.

Data from Family Resources Survey 2021/2022

Table of Contents

Microsoft Files

05

Hyperlinks

04

Colour and Contrast

03

Alternative Text

02

01

Adobe PDFs

06

Closed Captions

Alternative Text

IntroductionAlt-text is useful because it can be read by screen readers to make images accessible to people with visual impairments or learning difficulties. It can be displayed in browsers if an image does not load properly, and it provides a meaningful description of images that can be read by search engines.Select the icons below for more info.

How to write alt text?

Module 1

What about complex images?

Colour and Contrast

Module 2

Accessibility goes beyond screen readers for individuals with complete blindness; it also addresses various visual impairments, including low vision, peripheral or central vision loss, blurred vision, light sensitivity, and colour blindness.

Colour Contrast Examples

HyperlinksSince hyperlinks are widely used among web design, it is best practice to make sure that links are accessible to everyone, read by a screen reader, or allow for keyboard navigation.

Module 3

View More

View More

View More

View More

Do not use the word "link" in your links.

Use meaningful link text and keep it concise.

Do not capitalise links.

Avoid using URLs, punctuation or typographic symbols as link text.

Module 4

Closed Captions

Closed captions (which can be toggled on and off) provide content to people who are deaf or cannot otherwise hear audio. They are also used by people who process written information better than audio, whose first language is different than what is spoken in the audio, or those who do not have the proper technology to play audio. Closed captions can benefit many users.

Are automatic captions sufficient?

Select the link at the right for more info.

Making Documents Accessible

Module 5

Microsoft Office applications offer built-in Accessibility Checkers, whicih can help you to identify and fix potential accessibility issues, ensuring your materials reach everyone.The accessibility principles discussed in this training apply to Microsoft products as well. But, to make the most of these tools, there are specific best practices and resources to consider.Click the links below to access detailed best practices for each tool. Bookmark them for easy reference as you create your accessible documents and presentations.

Making Excel Accessible

Making PowerPoints Accessible

Portable Document Format (PDF) files can be created from scanned documents, converted Microsoft Office documents or Google documents, and/or Adobe InDesign. In terms of accessibility in PDFs, we are talking about features such as, document properties, structured tags, navigational aids, tables, and forms that allow for access of screen readers. Select each card below to learn about the different components of PDFs.

Accessibility Checker

Module 6

Document Properties

Structured Tags

Headings

Tables

Forms

Knowledge Check

start

Now that you have completed the training, it is time to take an assessment! It will take you 5 minutes to complete the four questions and one hands-on activity.Select Start to begin.

What is NOT best practice for writing alt text?

01

Be accurate and equivalent.

Be succinct and not redundant.

Include a short alt text and indicate where to find the long description of a complex image.

Use the phrases “image of …” or “graphic of …” to describe the image.

Quiz

The colour contrast ratio between text and its background is at least 4:1.

Quiz

02

True

False

When creating hyperlinks, we should use meaningful link text, not the whole URL.

Quiz

03

True

False

Scenario: You are creating a video and will post it online for all people to view. What are you expected to do?

Quiz

04

There is nothing else that I need to do.

Use automatic captions, like those in YouTube and Zoom.

Use a captioning tool to transcribe the content and upload the closed captions along with the video after reviewing it.

Practice: I want to use the Adobe Accessibility checker, how should I activate it?

Quiz

05

start Practice

You got this!

Now the last step is?

Whoop!

Now you have added the accessibility tool to your right-hand side menu!

Now you have added the accessibility tool to your right-hand side menu!

Bibliography Write a title here

Resources

01

02

03

Leonard Cheshire Training and Consultancy

W3C’s Web Content Accessibility Guidelines

Microsoft Accessibility Videos

Thanks!

Alternative Text

IntroductionAlt-text is useful because it can be read by screen readers to make images accessible to people with visual impairments or learning difficulties. It can be displayed in browsers if an image does not load properly, and it provides a meaningful description of images that can be read by search engines.Select the icons below for more info.

How to write alt text?

Module 1

Review the content & Try Again

Back to Quiz

What about complex images?

Colour and Contrast

Module 2

Accessibility goes beyond screen readers for individuals with complete blindness; it also addresses various visual impairments, including low vision, peripheral or central vision loss, blurred vision, light sensitivity, and colour blindness.

Colour Contrast Examples

Back to Quiz

Review the content & Try Again

HyperlinksSince hyperlinks are widely used among courses and web design, it is best practice to make sure that links are accessible to everyone, read by a screen reader, or allow for keyboard navigation.

Module 3

View More

View More

View More

View More

Back to Quiz

Review the content & Try Again

Do not use the word "link" in your links.

Use meaningful link text and keep it concise.

Do not capitalize links.

Avoid using URLs, punctuation or typographic symbols as link text.

Module 4

Closed Captions

Closed captions (which can be toggled on and off) provide content to people who are deaf or cannot otherwise hear audio. They are also used by people who process written information better than audio, whose first language is different than what is spoken in the audio, or those who do not have the proper technology to play audio.

Are automatic captions sufficient?

Select the link at the right for more info.

Review the content & Try Again

Back to Quiz

Some screen readers read capitalised text letter by letter, and people find it difficult to read capitalised text - especially people with reading disabilities.

LEONARD CHESHIRE

Leonard Cheshire

Website accessibility is not just a nice to have. In the UK – it’s a legal requirement for both public and private sector organisations. While countries have different laws for accessibility, many – including the UK – base their legislation on the international golden standard for web accessibility, the Web Content Accessibility Guidelines (WCAG). WCAG explains how to make your website more accessible to disabled people.

Click on the left icon to access the Web Content Accessibility Guidelines (WCAG)

Some screen readers read capitalized text letter by letter, and people find it difficult to read capitalized text - especially people with reading disabilities.

TEXAS A&M AGRILIFE

Texas A&M AgriLife

To meet accessibility requirements, the color contrast ratio between text and its background is at least 4.5:1.

Go to next question

Correct!

Colour should NOT be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. To avoid this, ensure that information conveyed by colour differences is also conveyed in text.

Appropriate colour contrast also makes it easier to read content in low light or extremely sunny conditions. Make sure there is a contrast ratio of at least 4.5:1 between text and its background, and at least 3:1 for large-scale text, incidental text, or logos. To ensure sufficient colour contrast, you can use the

WebAIM Contrast Checker.

Be accurate and equivalent.

Be succinct and not redundant.

Do NOT use the phrases “image of …” or “graphic of …” to describe the image.

Do not use the phrases “image of …” or “graphic of …” to describe the image, as screen readers will identify the item as image before reading the alt text.

Go to next question

Correct!

  • Do not use “Click here” or “Read more” as link text.
  • Restricting the length to a maximum of 100 characters, as screen readers must read the entirety of a link.

Click here

Leonard Cheshire

Screen readers are going to read the URL letter by letter OR might not be able to identify punctuation and typographic symbols. Therefore, use meaningful text as links instead.

www.leonardcheshire.org

Leonard Cheshire

Imagine reading a newspaper with no headlines? How would you choose which story to read? PDFs with correctly tagged headings and subheadings provide a blueprint to the document content.

Headings

To meet accessibility requirements, automatic captions need to be reviewed to ensure they are fully accurate. Normally, automatic captions are only 60-70% accurate.

Go to next question

Correct!

What about complex images?

Complex images typically include graphs and charts (like flow charts and organizational charts), diagrams and illustrations, and maps showing locations or other information.

It is best practice to include a short alt text of the image and indicate where to find the long description of the image. This could include putting a link to the long description near the image, OR describing where the long description is in the alt attribute.

Screen readers will tell people when they encounter a link. Thus, there is no need to use the words “link,” “links to,” or “goes to” in the link text.

Texas A&M AgriLife Link

Texas A&M AgriLife

Color should NOT be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. To avoid this, ensure that information conveyed by color differences is also conveyed in text.

Appropriate color contrast also makes it easier to read content in low light or extremely sunny conditions. Make sure there is a contrast ratio of at least 4.5:1 between text and its background, and at least 3:1 for large-scale text, incidental text, or logos. To ensure sufficient color contrast, you can use the

WebAIM Contrast Checker.

You would want to find and click on the tab that could take you to locate the accessibility tool.

What about complex images?

Complex images typically include graphs and charts (like flow charts and organisational charts), diagrams and illustrations, and maps showing locations or other information.

It is best practice to include a short alt text of the image and indicate where to find the long description of the image. This could include putting a link to the long description near the image, OR describing where the long description is in the alt attribute.

You would want to click the add button for the accessibility tool.

Screen readers are going to read the URL letter by letter OR might not be able to identify punctuation and typographic symbols. Therefore, use meaningful text as links instead.

https://agrilife.tamu.edu/

Texas A&M AgriLife

  • Do not use “Click here” or “Read more” as link text.
  • Restricting the length to a maximum of 100 characters, as screen readers must read the entirety of a link.

Click here

Texas A&M AgriLife

Be accurate and equivalent.

Be succinct and not redundant.

Do NOT use the phrases “image of …” or “graphic of …” to describe the image.

Many of the programs such as YouTube or Zoom, offer options for automatic captions. Automatic captions do not meet accessibility requirements until after they have been reviewed to ensure they are fully accurate, which usually requires significant editing. Think of automatic captions as a starting point for your video caption needs, not the final product. Strive for 100% in terms of caption accuracy, completeness, and timing.

While the most accessible forms are built using native HTML or third-party services, if you need to create a fillable form in a digital document format, PDF forms are the best choice for accessibility.

Forms

This is a tool that performs a thorough check of a PDF file. If you do not see this tool on your right-hand side menu after opening Acrobat, you can locate it under the “Tools” tab.

Adobe Accessibility Checker

We should not use URL as the link text, because screen readers will read the link letter by letter, which makes no sense.

Go to next question

Correct!

Screen readers will tell people when they encounter a link. Thus, there is no need to use the words “link,” “links to,” or “goes to” in the link text.

Leonard Cheshire Link

Leonard Cheshire

Many of the programs such as YouTube or Zoom, offer options for automatic captions. Automatic captions do not meet accessibility requirements until after they have been reviewed to ensure they are fully accurate, which usually requires significant editing. Think of automatic captions as a starting point for your video caption needs, not the final product. Strive for 100% in terms of caption accuracy, completeness, and timing.

PDF tags are the key to accessing a PDF document’s content with screen readers. Each tag identifies the type of content and arrange the document content into a hierarchical architecture (or a “tag tree”).

Structured Tags

This Shows basic information about the document. For instances, the title, author, subject, and keywords. Choose the "File" tab > Document Properties.

Document Properties

Every table in a PDF file should have a proper table tag structure - it is important to identify the number of rows and columns as well as column (or row) headers, and which heading each data entry corresponds to.

Tables