Menu

Tag: section 508

How do I make tables accessible in Canvas?

Making tables accessible in Canvas can be easy if you set them up correctly! Using tables for layout purposes should be avoided. Use tables for displaying data only and use Headers and Scope. This is because assistive technology uses specialized controls when in a table.

Data tables should always include table headers (the <th> element). For short tables and for tables whose data are self-explanatory, column headers are sufficient. For long tables or tables where data may be confusing, it is best to include row and column headers. <th> elements should always have a scope attribute. Column headers should include scope=”col”, and row headers should include scope=”row”. Including scope attributes allow assistive technology to better understand the logical relationships presented in the table.

Use Table Captions

Tables can be given an accessible name with the <caption> element. Screen readers allow users to view a list of tables on the page. If the table has an accessible name, a screen reader will provide that name to the user. If not, the screen reader may only read the number of rows and columns. Thus, a <caption> provides substantial usability benefits, especially if there is more than one table on the page. <caption> elements are visible to sighted users as well.

Avoid Complex Tables

We recommend avoiding tables with multiple levels of row or column headers and headers that span multiple rows or columns. Such tables may be difficult to implement with the correct markup and scope attributes, and even if implemented correctly, may be difficult for users to understand. In most cases, some other presentation of the data, including presenting multiple tables, may be an equally effective alternative to a single, complex table.

Avoid Empty Cells for Formatting

Table authors may choose to use empty cells to visually format the table, such as to indicate a division in various sections of the table. While this practice may make sense for sighted users, it may not work for blind users. We recommend avoiding blank table cells, especially when those table cells are used for formatting.

Things to consider when making tables accessible in Canvas

  • Avoid using tables for layout purposes
  • Use simple tables
  • Set table headers for both columns and rows
  • Pay attention to the scope of headers
  • Add a clear caption using the accessibility checker

Video Overview of how to make tables accessible in Canvas

Instructional Guide – How to make tables accessible in Canvas

Step 1: Ensure you are in edit mode

ensure you are in edit mode

Step 2: Select inside the cell you want to make a heading

You can set both an individual cell or an entire row as a header at once

Step 3a – Setting an entire row: Select Table button in the rich content editor > Row > Row Properties

Step 3a – Setting an entire row: Select Table button in the rich content editor > Row > Row Properties

Step 4a – Change the row type from body to header

Step 4a – Change the row type from body to header

Step 3b – Setting an individual cell as a header cell: Select Table > Cell > Cell Properties

Step 3b – Setting an individual cell as a header cell: Select Table > Cell > Cell Properties

Step 4b – Change the cell type to Header Cell and set the scope to what is appropriate

Step 4b – Change the cell type to Header Cell and set the scope to what is appropriate

Step 5: Run the accessibility checker found in the bottom right corner of the page

Step 5: Run the accessibility checker found in the bottom right corner of the page

Step 6: Add the caption through the pop-up window

Step 6: Add the caption through the pop up window
Canvas LMS
How do I make my Canvas page accessible?

Subscribe to The Accessibility Guy posts

* indicates required

How do I apply accessible hyperlinks in Canvas?

While screen readers can read a full page to a user, screen reader users may prefer to instead listen to a list of links. In that case, a screen reader may only read the link text and not the surrounding text. Accessible hyperlinks in Canvas assist with navigation.

Speech recognition software allows a user to avoid using a mouse. Users can speak the text of the link that they would like to follow.

Keyboard-only users may not be able to use a mouse to click links. They use a keyboard’s tab button to navigate through a page’s links, buttons, and form inputs. For such users, it is very important for them to see which item has a focus on at all times.

Colorblind users may not be able to perceive color cues. Typically, pages present links as a different color than their surrounding text. Adding underlines or other non-color indicators help users who may not see color. Users who are not comfortable with technology may also appreciate having links underlined.

Links should be clear and easy to understand.

The below image has two separate sites pulled up using JAWS while searching for links. The image on the left indicated the incorrect way to use links and includes link text for the full HTML URL and several wrong examples like “click here”. The image on the right represents a correct link list that uses correct link text that is descriptive and clear.

The below image has two separate sites pulled up using JAWS while searching for links. The image on the left indicated the incorrect way to use links and includes link text for the full HTML url and several wrong examples like “click here”. The image on the right represents a correct link list that uses correct link text that is descriptive and clear.

In general, content editors should avoid using images as links. If an image functions as a link, the image must have alt text that conveys the location and purpose of the link. The alt text should not describe the image. Treat image links as links, not as images.

  • Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context.
  • Avoid using full html address: www.shawnjordison.com and instead use Check out Shawn Jordisons guide
  • Non-hypertext elements should refrain from using underlines as they can confuse sighted students who expect underlined text to be a link
  • Use judgment when linking full URLs. When linking a URL, consider users who must speak it out loud and who must listen to a screen reader announce it.

Video overview of how to apply accessible hyperlinks in Canvas

Step 1: Ensure you are in edit mode

ensure you are in edit mode

Step 2: Select the text or link you would like to edit and select link options

Step 2: Select the text or link you would like to edit and select link options

Step 3: Ensure the on screen text is clear and descriptive and that the link is set to a valid destination

Canvas LMS
How do I make my Canvas page accessible?

Subscribe to The Accessibility Guy posts

* indicates required

How do I make lists in Canvas accessible?

Lists in Canvas are great from an accessibility standpoint because they provide structured order to content in a linear fashion. Lists are recommended as potential replacements for simple tables, as tables can be more difficult to navigate, and sometimes, we provide info in tables that really would be better suited to lists.

You can use lists inside of lists, or nested lists, just check to make sure they are coded properly. Lists should always be checked to make sure that the list items are really contained within one list, check to make sure that spacing does not break a list into multiple individual points, and use the proper techniques described below to create lists. You should never rely on indentation to provide a visual list, use the proper structure instead.

Bulleted lists are for lists where the order is unimportant

Items that can be used for a bulleted list are for when the order does not matter. The example I like to use is that of grocery items, here is an example:

  • Milk
  • Bread
  • Eggs

Lettered lists are primarily for unordered lists where referring to a specific item may be important. 

Numbered lists are for lists where the order is important

Use numbered lists for when order is important. Here is an example:

Directions to Store

  1. Turn left at Walnut Ave
  2. Travel for 1 mile
  3. Turn right at College Street
  4. Travel for .3 miles
  5. Turn right into parking lot

Things to consider with Lists in Canvas

  • Avoid using non rich content editor symbols like dashes or x’s to indicate a list
  • Use the proper numbered or bulleted list for the items

Video Overview of how to apply lists in Canvas

Instructional Guide – How to apply List items in Canvas

Step 1: Ensure you are in edit mode

Ensure you are in edit mode

Step 2: Select the text you would like to make a list

Step 2: Select the text you would like to make a list

Step 3: Select the type of list to apply from the rich content editor

Step 3: Select the type of list to apply from the rich content editor
Canvas LMS
How do I make my Canvas page accessible?

How do I apply headings in Canvas?

Headings are often used as the sole method for navigation for those using a screen reader or other assistive technology. It allows technology to navigate more effectively and serves as a method for jumping around text to get to the exact spot needed.

The screen reader allows you to drill down from higher heading to lower heading. This means you can list all heading level 3s under a specific heading level 2 for more precision. One suggestion is if you provide an action item in the text page, provide a heading over that, so the student can skim directly to the homework, additional reading, etc. A well-aligned page should have headings with an appropriate level of complexity:

  1. Heading Level 1 is the title of the page, placed by Canvas, you will always have this. If the page is noticeably short, less than 100 words, it can be left with no additional headings.
  2. Heading Level 2 is the highest-level separations within the canvas shell and should be used to chunk major topics in material. 
  3. Heading Level 3 and lower should be used for text-heavy pages and should be used to give additional structure to the document. 
  4. The Heading levels should form a tree, where each heading is preceded by the level one above it.

What do headings look like using JAWS?

The heading structure in the image below is clear and easy to navigate. Each heading is descriptive and is in the proper order. For those who use JAWS, they are able to navigate this content with ease.

Sample of heading structure when using JAWS

Example Canvas page with and without headings

The following image represents a canvas page that has both headings applied and not applied. Option 2 shows the correct version and clearly shows the benefits of applying headings to a page.

Sample heading structure

Things to consider with headings

  • Avoid using all capital letters, underlining, or bolding as the only means of emphasis.
  • Using a larger font or different color does not automatically indicate to a user that a page has headings. You must still mark headers using the rich content editor.
  • Headings must be in order.

Video overview on how to apply headings in Canvas

Instructional Guide – How to apply headings to a Canvas page

Step 1: Ensure you are in edit mode

Ensure you are in edit mode

Step 2: Select the text you would like to make a heading

Click and drag your mouse or click into the line

Selecting text before applying a aheading

Step 3: Choose the heading level from the drop-down menu or the format tab. Option 1 as indicated below is the easiest.

Step 3: Choose the heading level from the drop-down menu or the format tab. Option 1 as indicated below is the easiest.

Need to learn about other accessibility elements within Canvas?

How to add columns to Microsoft Word document – Video post

Video

Text Transcript

This video is going to look at applying columns to a document in Microsoft Word. Let’s apply some columns to our text in Microsoft Word. The first thing I’m going to do is select all of the texts that I want to put into a column. Under the layout ribbon. Under the Page Setup options, we have the word columns. This is where we can select however many columns we want to add to the page. This is perfect for ensuring reading order for a screen reader. As this content will be read in the correct order. If you enjoyed this video at all, please drop me a like on the video and subscribe. It really helps me out thank you

Subscribe to The Accessibility Guy posts

* indicates required

PowerPoint Accessibility Practice

Do you need some hands-on PowerPoint accessibility practice? Below you will find a practice file and an answer key file. There is an introduction video and an answer key video to follow along with.

Practice Files and Introduction

Download the practice file and watch the introduction video.

Practice01Download

Answer Key

Download the Answer Key file and watch the video.

Answer01Download

Edit

Order 508 documents

Subscribe to The Accessibility Guy posts

* indicates required

How do I make a Canvas page accessible? Video post

This video will walk users through how to make a canvas page accessible. Ive got a even more content for Canvas Accessibility.

Transcript

Hi there, my name is Shawn Jordison. And this is going to be a video walkthrough for Canvas accessibility. The goal of this video is to walk you through the most commonly found accessibility elements that may exist on your pages. So I have a sample page here that has many accessibility errors in it. And what we’re going to do is simply walk through them and fix them. So to begin, let’s select the Edit button.

I like to design my accessibility starting from the very top of the page.

Going all the way down. I also like to start my content below h2. So I’m going to add in some text here, that’s called overview. I’m going to select this text, use the drop down arrow to make this a header to.

Now from here,

this paragraph looks fine. There’s no accessibility elements to address. I do have another area here that says where do I begin designing. This is also a paragraph. So what I’m going to do is make this content a Heading Two.

But we also want to turn off bolding and I actually want it to be lowercase.

So I’m just going to retype that and delete this text file. The reason we want it to be lowercase is because screen readers will often read acronyms letter by letter. And when it sees all capital letters, it could sometimes interpret that word to be an acronym.

Next up, we have a couple of dashes here. These should be built in bulleted list, because the order is not important. So I’m going to select these two items and select bullet lists from the rich content editor.

I’m going to come back through here and delete the dashes out

and move on to my next heading. The next heading is Is there enough time for my students. First I want to retype it.

To make sure we get rid of all that capitalization. Next, I want to remove the bolding on this text. So I’m going to select the text and select bold. I’m going to make this text a header three, as it relates to this heading to have Where do I begin designing.

And so let’s keep going here it looks like we have a little bit of misspellings.

Is there enough time. This is a part of this header down here. So this is also going to be a Heading Three. I’m then going to remove the bolding.

And then under design and develop, I’m also going to remove bolding and it’s actually already marked as a header for which is perfect. So let’s keep going. It looks like this was supposed to be a couple of list items that we tried to designate with axes.

But let’s make this an actual bulleted list, we can come back through, delete the text.

And then we have a new area that doesn’t really relate to any of our current heading structures. So I’m going to select the text and make it a heading to.

Now from here we have a built in list. And if you’re not used to doing this,

these list items might look correct. They are numbers, they clearly are meant to be in a list. But here’s the deal. It’s not actually a list within the structure of the HTML. So we need to select all of our texts, and then select numbered list.

And it puts in an actual list which we must come in here and actually remove these extra numbers.

And we can keep going.

So the essay writing process, this looks like it should be a heading. We’re gonna go ahead and make that a heading two.

And then again, we have another list. That should be a bulleted, excuse me, this should be a numbered list as it represents a sequence of steps.

All right, next up, we have a link. So here’s the Canvas guide for viewing my feedback in the gradebook. So first thing I’m going to do, I’m going to copy the hyperlink

with Ctrl C,

and I’m going to select feedback in the gradebook.

Then select Link to URL

and paste our link with Ctrl V.

Then we’re going to select Insert link, which now puts the link on these words. So I can enter this with a period, and delete the rest of this content. So using the Delete key on my keyboard, I’m removing this extra text

as we do not want extra hyperlinks, or for URLs on the page. Additionally, we want to avoid vague language, like the words here, so we need to fix these two links. First, let’s take a look at the sentence read about the role and structure of US courts and US supreme court procedures here in here.

So I’m going to add the word procedures.

And to get this link out, I’m going to select in the link with my mouse, I’m going to select the link to URL button. And from here, I’m going to copy the link out so I just did a ctrl c.

Now I’m going to select my text where I want to put the link, select the link to URL button Ctrl V to paste and select Insert link. Now we have one more to fix. I’m going to put my cursor in this link, select Link to URL, I’m going to simply copy the link out,

close the window

and add my link to this text on the page. By selecting the text select Link to URL pace.

And then insert link. Now I can delete all of this extra text.

And we have another link.

But the sentence doesn’t really support it. So we’re going to say

additional resources

about language and culture.

I’m going to select in this link. Select the link to URL button to copy my link out Ctrl C to copy this out.

And then I’m going to paste it on my newly created text and then select in certainly.

Now I could delete this extra text. All right, let’s see what else we have in this area. So we have a table that will need to address I’m going to leave the table.

And we’re going to use the check accessibility tool to fix this table.

With our image though, let’s select the image, select Embed Image. And this is where we can add alternate text

and select Update.

We have another table here. I’m also going to use the check accessibility tool. So let’s let’s go ahead and run that we’re going to run the check accessibility tool.

Adjacent links with the same URL should be a single link. Okay, that looks like

an actual error that can be fixed. So we’ll select Apply, we need to add a caption.

Oops.

I apparently cannot type today.

Oh my goodness. All right, we’re gonna put sample data. And then let’s select header row for our headers, select Apply.

And we have one more sample data for a caption and select Apply. Now what’s interesting, it didn’t catch these all caps. So I’m going to come in here and fix these.

And it’s a good reminder

that the accessibility checker is automated, and it doesn’t catch every error.

And all capitalization should be avoided if possible, unless you were working with an acronym.

Let’s go ahead and run that check accessibility tool once more. Perfect, no issues were found. Select Save.

We can quickly review and this page looks a lot better. We have clean links. We have clear tables. We have an image with alternate text. And this page is fully accessible. So you just learned how to make a Canvas page accessible. I hope this video walkthrough was useful for you

Hi thank you for watching

Transcribed by https://otter.ai

How to make Pie Charts Accessible in PowerPoint

This post will guide users through how to create an accessible pie chart in PowerPoint. Pie charts and bar graphs are inherently inaccessible when built within PowerPoint. There are additional steps that must be completed in order to make a pie chart accessible.

Need more PowerPoint accessibility guides?

Creating an accessible pie chart video overview

This video will provide a detailed walkthrough of how to make an accessible Pie Chart in PowerPoint.

An accessible pie chart includes the following elements:

  • Labels
  • Patterns
  • Do not rely on color alone
  • Alternate text
  • Data table is available

Example of accessible pie chart (image)

This image represents an accessible pie chart that includes labels and patterns.

This is an accessible pie chart which includes labels, patterns, and alternate text.

Add labels to a pie chart

There is no reason to hide or confuse data in a pie chart. Be specific and direct and add data labels to all data points in any chart!

  1. Right-click the pie chart
  2. Select Format Data levels
  3. Select the best options for the data labels
Right click the pie chart Select Format Data levels Select the best options for the data labels

Add patterns to a pie chart

Patterns are more accessible to a wider array of people with disabilities. Instead of relying on color alone (which is an accessibility failure) – use a pattern and a color.

  1. Right-click the Pie Chart
  2. Select Format Data Series
  3. Choose the appropriate pattern and color
Right click the Pie Chart Select format Data Series Choose the appropriate pattern and color

Add alternate text

  1. Right-click the entire chart object
  2. Select alternate text
  3. Enter a detailed alternate text

Right click the entire chart object Select alternate text Enter a detailed alternate text

Do you plan on converting the PowerPoint to another file type like PDF?

You might consider inserting the Pie Chart as a flattened image and providing alternate text instead. Screen readers can have difficulty reading the contents of a pie chart within the PPT itself.

Subscribe to The Accessibility Guy posts

* indicates required
Order 508 documents

Does my PDF have tags?

The majority of accessibility occurs in the tags panel but how do you know if your PDF has tags in it?

Important Note: You will need Adobe Acrobat Pro to determine if your document has tags in it. Tags provide the foundation for accessibility and PDFs. If your document is not tagged, it will not be read properly by screen readers and assistive technology.

Does my PDF have tags Video Overview

How to check if your PDF has tags?

There are a couple of ways to view if your PDF has tags in it.

Option 1

  1. Open a document in adobe acrobat pro
  2. Right click the far left side of the menu
  3. Select tag
Open a document in adobe acrobat pro Right click the far left side of the menu Select tag

Option 2

  1. Select View
  2. Select Show / Hide
  3. Select Navigational Panels
  4. Select Tags
Select View Select Show / Hide Select Navigational Panels Select Tags

Your document will either say No Tags or you will see a list of tags available.

Document with no tags

This means that the document is not going to be read properly by assistive technology.

Sample PDF with no tags available

Document with tags

This example provides a tagged PDF with information that is passed onto assistive technology.

sample document with tags

Subscribe to The Accessibility Guy posts

* indicates required

Table Accessibility in PowerPoint

Table accessibility is an important aspect of creating accessible PowerPoint files. Be sure to follow all basic table accessibility features. Unsure of what those are? Keep reading.

Accessible tables should include the following elements:

  • Ensure the table has a header row or header column selected
  • Apply a table style
  • Avoid complex tables or merged cells
  • Avoid layout tables
  • Add alternate text

Did you know?

In MS Word you can make your tables even more accessible by applying alternate text, and repeating header rows within the properties menu! Each Microsoft product has different abilities when it comes to accessibility in general. Its all about the authoring program features. What you can do in word, is not the same as what you can do in PowerPoint, excel, or even PDF for that matter.

Table Accessibility Video Overview for PowerPoint

This video will walk users through how to create accessible tables in PowerPoint.

Text overview

The next section will provide a text-based method for making tables accessible in PowerPoint.

Add a heading row or column to the table

  1. Select the table
  2. Select Table Design
  3. Select the appropriate header row or first column selection based on the data

This will change the visual look of the table but not any of the data.

Select the table Select Table Design Select the appropriate header row or first column selection based on the data. Table accessibility

Apply a Style to the table

  1. Select the table
  2. Select Table Design
  3. Choose a Table Style
Select the table Select Table Design Choose a Table Style table accessibility

Add alternate text

  1. Select the Accessibility Tab
  2. Select Alt Text
  3. Enter the Alt Text
Select the Accessibility Tab Select Alt Text Enter the Alt Text

Avoid merged cells and complex tables

Merged cells and nested tables cause nothing but problems for screen readers and other forms of assistive technology. Keep your tables simple and direct. If you have nested tables, consider creating multiple tables instead.

Layout Options

Do not use tables to move content around on a page. There are accessible methods to format and lay out content on a slide. Keep tables for their designated purpose – which is to display data. You can edit the slide design theme as one example.

Order 508 documents

Subscribe to The Accessibility Guy posts

* indicates required