Transcript of video:
(00:01) Introduction to Lists and Tables
We're going to cover two guidelines in this video. How to use lists and tables when creating accessible web content.
(00:02) Lists: What, How, and Why
So for list, what, how, and why, you want to use real lists in contextually appropriate ways. Of course, we love lists because they summarize information. They make more sense of information.
But we want to use numbered lists when the order is important.
(00:25) When to Use Numbered Lists
You don't need to use numbered lists unless the order is important. Be concise and limit nesting.
I know that every time you tab, you can get a different kind of bullet, but if you have too much nesting, it's confusing for somebody using a screen reader.
(00:25) Introducing the List
You want to introduce the list. Well, if it's in a Google doc, maybe you have a line above the list. In a Google Slides presentation, your title can be your your introduction.
(00:47) Use Built-In Tools for Lists
Use the built-in tools to create your bulleted list. Don't just put in dashes or asterisks or stars.
So, here's a screenshot of the um tools that you would use.
(01:10) List Tool Options
So, if I just wanted bullets, I could pick that. Of course, I can choose this drop down and change my bullet, but it's a built-in, so I can choose whatever's there.
Or if I want numbered, I can do that here as well, or ABCD, DD, those kinds of things.
(01:10–01:28) Non-Example: Dashes
Here's a non-example. This is not a good list. A screen reader won't announce it because it's just dashes. A screen reader doesn't know it's a list.
And I just typed in the one here. So, make sure I use the auto numbering features like showing here.
(01:28) What Not to Use for Bullets
And don't use emojis for your bullets or just asterisks or stars.
(01:28–01:54) Why Lists Matter
So, lists do help screen readers organize and make sense of the information. It also helps anybody else that's following information on a digital web site or Google doc or those kinds of things, even in an email.
Um, it helps you prioritize or make make sense of the steps. It also chunks information for you um as long as it's organized and well structured.
(01:54) Tables: Basic Guideline
So, tables, um basically the guideline for using tables is only use table for data. Don't use them for layout. I know that we want to use them for layout. I'm guilty of it as well.
(02:16) Why Tables for Layout Cause Problems
But um a screen reader thinks that there's data in that table and it if you are using it for layout and you're making it all fancy with merging different cells and things like that.
It's just too confusing for the user that's using a screen reader.
So um use it for data only, not layout.
(02:34) Table Best Practices
Don't merge cells. You want to keep it simple. You want to be sure and have a header row. You can also have a header head header column. And there's ways to indicate those.
Um, you can add alt text to your table if you need to add some more information, some context, captions, or brief summary if appropriate.
(02:52) Tables Used Well (Example)
Uh, we like to use tables for our creating our agendas, but um, it can get messy, but if you have it organized like it is data, then it's perfectly fine.
Finding the time, speaker, and room is data. So, it makes sense here.
(02:52) Table Non-Example and Why
This table does not make sense. Even for somebody not using a screen reader, it is pretty messy.
One reason is we have merged these cells. So I'm trying to make it like the title of the table, but that it's bad.
That's not a good way to um provide a title because a screen reader thinks that's your header row and it's not.
You have all those cells merged.
And then you can look down here in this particular column. We have a table within a table. That is a big no no. It's very confusing.
Then we have some empty cells. We just put dashes in there. That's not good practice, nor is it good practice to have all these cells merged either.
So, just keep it simple.
(03:31) Why This Matters for Everyone
This isn't a non-example again. Again, um a screen reader understands a table. it it's tagged behind the scenes and so it knows what to do with it.
But it also can help people who are viewing content of a Google doc or a website on different screen sizes because sometimes if it's a table and it doesn't really need to be a table it can spill over and it just gets disoriented and it's not very useful.
(03:50) Final Table Guideline
So where and how like ask yourself is it possible to lay out my content without a table? And if the answer to that is yes then don't use a table.
only use the table if you're providing information that is data and that it makes sense to put it in columns and cells.
(04:15) Tool Mention
Um, we have just purchased at EZU10 a tool called Grale Docs. It's Grale for Gralek Workspace and it works in Docs, Slides, and Sheets and it's a way to check your documents for accessibility.
(04:33–end) Closing Notes
So, we're going to have some training on that as well. But I recommend um looking into that if you use a lot of tables and you're not sure um you can use that tool to help you out and we'll be doing some training on that very soon.
Our office hours for accessibility with the edtech team are from 8 to 9 every Monday. You can contact us by email, give us a call. Um you can find that contact information at our website a11y.esu10.org. You can also find more videos and more information there as well.