[Presenter] Welcome to Making the Future Accessible: Using built-in list styling. Before we get started today, I wanted to give an image description for the artwork that I'm using on the cover of this presentation. It is a digital drawing of a woman dressed as a pirate captain with a feather in her hat. She has brown skin and curly black hair and is standing with her black lab service dog and holding a sword. The background has books in the upper corners. There are loose bits of paper with writing in it as if she were revising notes. The background's arches appear to be made of iron and metal and there are notebooks with feather quills in a circle behind her. She herself is blind, so her eyes are unfocused, But being a dangerous pirate and fencer, all others had better beware of her deadly skill. This art piece is created by Ogrefairy at ogrefairy.com. She does a lot of work on portraits of disability rights advocates and painting disability as beautiful. Again, that's ogrefairy.com.

So today we are going to be talking about lists and the reason I used the art piece I did today, the digital drawing done by Ogrefairy, is that the blind pirate in it is making revisions and we want to make sure that blind users are not reaching out to us because our content is inaccessible. And lists convey -- ordered lists can convey a sequence of events. And if I was a pirate, I would need to know that sequence of events and how many steps I need to take so that I can reach my treasure. And so that is the reason I use that piece -- because it aligns well with what we are talking about today: Ordered and unordered lists.

So what are lists and what do I mean by ordered and unordered lists?

It is a collection of items. And so an ordered list is intended to be read in a particular sequence, such as a job aid, instructions on a map or recipe steps. Ordered lists are typically presented as numbered or lettered items. Unordered list are used when the order of the items is not relevant. List items in unordered lists are marked with a bullet. A great example of this is a grocery list. We have a list of items we have to get. We cannot leave the store without them, but the order in which we get them does not matter.

Both ordered and unordered lists can have nested items as shown in this PowerPoint slide with the ordered and unordered list items that are nested below the main bullet, which the main bullet is "Lists can be either," and then the sub-bullets are the ordered list and unordered list definitions.

Who benefits from built-in list styling? The blind, deaf-blind, and neurodivergent communities. The way in which built-in styling is read to assistive technology provides them with meaningful context. So when I am using it -- when I am navigating those built-in lists with a screen reader, text-to-speech, or braille display, there is information being conveyed to the assistive technology. That information is how many list items there are is first presented to the user so when they land on the list it says, 4 items, for example and then when they actually drill down into those items, it gives them the information, 1 of 4, 2 of 4, 3 of 4, so they know where they are in the list. And this is important for the blind and deaf-blind community because it is conveying what we can visually see to a non-visual user.

Why should we stay away from emojis and symbols? So, emojis, what I mean by that is upside down smile face. You often see light bulbs, etc, used in place of bullets within social media. And that is conveying now content on top of content, so instead of it saying, "Bullet. All content should be accessible," it is saying, "Happy smile face. All content should be accessible." And so it is not only creating cognitive confusion, it is just created unneeded content to go along with the content and it is not conveying how many list items there are. Now social media itself does not even provide us with ability to actually provide bulleted lists. That is a weakness of social media, but when we are writing emails, when we are writing slack posts, when we are writing word documents, we want to stick to built in lists and when we are using social media, we want to stick to something as simple as possible, such as just a numbered list so that we are not conveying content that will disrupt the experience.

So what we are going to look at today when we look at our demo is we are going to look at how asterisks are conveyed if we just manually add them in to an email or to a Word document instead of using built-in ordered and unordered lists. What happens if I manually add numbers to the beginning of sentences instead of using built-in lists? It is still going to read the number and we will go over that in our demo. But it is not going to read the important information at the beginning, which is how many steps there are and it is not going to read where you are in the process, such as 5 of 20.

So the important part we are going to walk through today is actually hearing what it would be like using a screen reader if I use good lists and if I use bad lists. So I am going to get out of the PowerPoint presentation, and I am going to switch over to Safari. I am going to go ahead and I am going to enable VoiceOver on my Mac. So I am going to the Apple up top. I am going to System Settings. I am going to Accessibility. And I am going to activate VoiceOver.

[Screen Reader] VoiceOver on. System Settings. Voiceover window. Table. Accessibility, selected, has -- Visited link, skip to main content. You are currently on a link inside of Web Content. To click this link, press Control-Option-Space. To exit this web area, press Control-Option-Shift-Up-Arrow.

[Presenter] So I am using a screen reader. In this case, I might be a blind user who is navigating and needs to hear all of the content on the page.

[Screen Reader] List 2 items. Slash, end of list. Main article. Heading level 2. Unordered list that uses built in styles. You are currently on a heading level 2.

[Presenter]: So I am going to go down to the list, which visually is displaying as lettuce, tomatoes, bacon, bread, and mayo, with bullets to the left of them. And again, this is a built-in list, so it has coding behind the scenes.

[Screen Reader] List 5 items. You are currently in a list.

[Presenter] So it identifies as a list. And it says there is going to be a list of 5 items. So I know in total I have 5 items to get through.

[Screen Reader] Bullet, Lettuce. 1 of 5. You are currently on a text element.

[Presenter] And as we hear from the first item, we have lettuce, 1 of 5, and it read as "Bullet, lettuce, 1 of 5," so we know it is an unordered list and we know we have gotten into the first item.

[Screen Reader] Bullet, tomatoes, 2 of... Bullet, Bacon, 3 or 5. Bullet, Bread, 4 or 5. Bullet, Mayo, 5 of 5. You are currently on a text element. End of list. You are currently on a list. To move between items in this list, press control-option-right arrow or control-option-left arrow.

[Presenter] And when we reach the end of the list, it tells us we have reached the end of the list. So again, that -- using the built-in list styling -- super important because it's providing a lot of structure to assistive technology users. And so that is the unordered list. Let's go to the ordered list.

[Screen Reader] Heading level 2. Ordered list that uses built-in styles. You are curr -- List 7 items. You are currently in a list.

[Presenter] Again, it has indicated that we have entered a list and that there is a list of 7 items.

[Screen Reader] 1. Fry the bacon in a frying pan until it it cooks to the crispiness you prefer. One of 7. You are currently on a text element.

[Presenter] Again, it is doing the same thing as the unordered list -- except it is numbering at the beginning. So we will go ahead and keep going. Where you go right through this one -- we want to get you --

[Screen Reader] End of list. Heading level 2. Unordered list that does not use built-in styles. You are currently on heading level 2.

[Presenter] An example that does not use built-in styles. In this case, we are using asterisks.

[Screen Reader] Star, Lettuce. You are currently on a text element.

[Presenter] Star, Lettuce. So the first thing we missed is it did not alert us that we are in a list. So we do not know we are in a list. We know, "Star, lettuce." But we also do not know how many items there are going to be so we have lost the notification that we are in the list and we have lost a notification of how many items are going to be in that list.

[Screen Reader] Star, tomatoes. You are currently on a text element.

[Presenter] And again, "Star, tomatoes." So we do not know how many list items we have to go. And so that is not providing us with any helpful information.

[Screen Reader] Star, Bacon. Star, Bread. Star, Mayo. You are currently on heading level 2.

[Presenter] So now we are also going to just look at if I manually add the numbers instead of using an ordered list, what happens?

[Screen Reader] 1. Fry the bacon in a frying pan until it cooks to the crispiness you prefer. You are currently on a text element.

[Presenter] And again, the same thing is going to happen with the unordered list. It is not going to provide me with -- that this is a list, what the total number of list items will be, and as I am navigating through, even though it provided me that 1, 2, 3, it is not going to provide me with where I am on the list, so I do not know -- I do not know I am in 2 of 7 items. So again, all of that context is lost. So that is the demo of built-in styles and basically built-in styles, and when you do not use built-in styles with a screen reader.

[Screen Reader] Voice over off.

[Presenter] So I am going to shut off VoiceOver. I am going switch over to the presentation. Play from current slide. And the last part we are going to talk about is how do I use built-in lists? And the thing is, it is a little different in every product. I am going to show you quickly what it looks like in Drupal if I am editing with a web content management system. But when you are editing in Word and you are editing in Outlook, there are going to be resources right on the site that provide you with how to go about using styled lists, but let's escape the presentation quickly. And I am going to go over to Chrome, because I have it open here. And I have that same page that we were looking at as a screen reader user. I am now in as a content editor. And what I have is I have a body field. In that body field, I have a style ribbon. In the style ribbon, similar to Word or Outlook, it gives me style options. I have the bold button. I have the italics button. I have the table button. And I have the link button. What follows those is the insert/remove bulleted list button, and the insert/remove numbered list button. And those are the ones you want to look for because that is going to have that coding behind the scenes. As soon as you apply it to a list of items, it is going to read that context that is needed for assistive technology. So that is really it. Look for those items, apply that to your list and it is going to provide that important information to assistive technology users.

So let's quickly switch back over. And go to the thank you slide. So again, I would like to thank you for attending this training. I would like to remind you to make semantic lists so that you can provide information that is vital for our pirate right here on our last slide so that our blind pirate can find her treasure. Thank you very much and have a great day.

[End Transcript]