lists Archives - The Accessibility Guy

Introduction: Why Manually Tagging Lists in PDFs Matters for Accessibility

Ensuring the accessibility of documents is essential for creating inclusive digital experiences. In this blog post, we will guide you through the process of manually tagging lists in PDFs using Adobe Acrobat Pro, creating a well-structured and accessible document.

Want to learn more about PDF Accessibility?

List tag break down

List Parent Tag <L>
List Item Child Tag <LI>
Label <Lbl>
List Body child Tag <LBody>
Contents of First list item
List item content on page

List Parent Tag <L>

List Item Child Tag <LI>

Label <Lbl>

List Body child Tag <LBody>

Contents of First list item

List item content on page

Step 1: Prepare the PDF and Create a Blank List Tag

Get accessible Documents Now

Open your PDF document in Adobe Acrobat Pro.

Right-click in the Tags panel
Select “New Tag,”
Create a blank List tag (capital “L”).

Right-click in the Tags panel

Select "New Tag,"

Create a blank List tag (capital "L").

Step 2: Create List Item Tags and Nest Them

Manually create list item (LI) tags and nest them within the List tag. To do this, right-click the List tag, select “New Tag,” and type “LI” (capital “L” and “I”).

Step 3: Add Label and L Body Tags

For each LI tag, create Label (LBL) and L Body tags. Right-click each LI tag, select “New Tag,” and type “Lbl” for Label and “LBody” for LBody tags. Drag and drop these tags into their appropriate locations within the LI tags.

Step 4: Create Tags from Selections for List Items and Nested Lists

Select the appropriate tag in the Tags panel, highlight the corresponding content in the document, and use the “Create Tag from Selection” option from the Options menu in the Tags pane. Repeat this process for each list item and nested list.

Step 5: Create a Nested List Structure

For nested lists, create a new List tag structure within the L Body tag of the parent list item. Create new LI tags for each nested list item, then add Label and L Body tags as before.

Step 6: Review the Tag Structure and Run the Accessibility Checker

Review the tag structure to ensure all list items and nested lists are properly tagged. Run the Accessibility Checker to identify any missing content or issues.

Step 7: Fix Missing Content and Rerun the Accessibility Checker

If the Accessibility Checker identifies missing content, use the Reading Order tool or the Tags panel to correct the issue. Rerun the Accessibility Checker to confirm that the document is now accessible.

Conclusion: Enhancing Accessibility through Manually Tagging Lists in PDFs

Manually tagging lists in PDFs using Adobe Acrobat Pro ensures your documents are well-structured and accessible for all users. By following these steps, you can create an inclusive digital experience that adheres to accessibility standards. Stay tuned to the Accessibility Guy channel for more tips and tricks on enhancing document accessibility, and don’t forget to like and subscribe!

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