Accessible PDF Forms Part 2 - Tagging Forms

hello and welcome back to the accessible pdf forms video series this is the second video in this series in the previous video i showed you how to create a fillable form in adobe acrobat using the prepare form tool i left that video off with the form all set up except it still needed to be tagged so that's what i'm going to cover in this video now i'm not going to cover everything about tagging i talk about tagging in general terms elsewhere i'm going to focus specifically on adding tags to forms because there's a couple nuances uh regarding tags and and pdf forms so to start off let's look at our tags we don't have any which is not a surprise because in the previous video i deleted all of them so to add tags we're going to use the accessibility tool if you don't have accessibility in your sidebar you can search for it in the search tools box under accessibility choose auto tag document it runs in just a second and it spits out a report which honestly i never read all i'm interested in is the tag tree right so this is auto tagging and any kind of automated tool is going to be imperfect there'll be a lot of things that we need to revise uh yeah just for example i can see right off the bat the document title is is an h3 which doesn't make sense it is the primary title this document so it should be an h1 but i'm not going to worry about that right now i'm only focusing on forms okay and i think the easiest way to demonstrate how this should look is to point you to the already fixed document so here i have a the same pdf form that i have already corrected and you can see what the tag structure is supposed to look like so for each input field on this form the tag structure should look exactly the same each input field that is its visible label and the input field itself should be wrapped in a p tag a paragraph tag the very first child of that p tag should be the visible text label the next tag under under that at a at the same level of hierarchy the sibling tag should be a form tag and then a child of the form tag is a special type of tag called an object reference an objr and that is just a reference to the the fillable field so again each each set of both visible label and and fillable field should be wrapped in its own p paragraph tag first child is the visible text label as a sibling of the visible text label as a form tag as a child of the form tag is the object reference that corresponds to the visible label and this applies to all of the form fields on this document both like text fields radios they all they all behave exactly the same so we've got name date of birth street phone number even if you look at like uh specific options under these radio lists so still paragraph tag visible text label form object reference so with that in mind let's go ahead and do the same thing for our working document and i'm actually not going to do it for every single field because it is exactly the same for every single field i'll let's do it for uh for a handful of them so you get a feel for how it's supposed to work so the first thing i want to do is create a whole bunch of p tags let's do it for all these plain text fields so let me count here one two three four five six seven eight so i have eight plain text fields so i'll create eight new paragraph tags and if you recall how tagging works it will add tags immediately beneath the item that you currently have highlighted so i want them to appear here in the tag tree so i'm going to select this paragraph right click choose new tag and i want to add a paragraph one two i already forgot how many i was going to add eight we'll go with eight it's always easy to create and delete later so there's four seven and eight okay and the next step is going to be to add the visible text label to each hp tag so to do that you select one of the p tags and you should do this in order right i have the first p tags i'm going to choose the first visible label highlight it with your mouse and then on the p tag right click and create tag from selection there we go and so now we have the visible text label under the p tag we're going to do that for all of them again highlight the p tag with your cursor select the visible text right click on the p tag create tag from selection i am a strong advocate for using web forms instead of pdf forms whenever possible and once you do this 100 times i bet you will be too and then we're going to create a tag for email address okay so the next thing if you refer back to this document we want to have form tags as a sibling as a child of the p tag and as a sibling at the same level of hierarchy as our visible text label so this is even easier choosing the visible label tag because you want to be a sibling and beneath it new tag and form and i will be the first to acknowledge that tagging in pdf there's a lot of of uh kind of silly arbitrary rules that you just kind of have to do a whole bunch of times to get a hang of it so frustration unfortunately is part of the process now we need to hunt down all of these object reference object references um okay so you can click on the um different elements in the tree and it'll highlight what uh what is contained within that tag right so that can be an easy way to find the object references so here they are for name and date of birth so name is going to be a child of the form tag which is a sibling of the visible name field date of birth is going under this form tag and if you recall from an earlier video on tagging if the if when you're dragging and dropping there is a wider white line it's going to put it beneath the selected element if it is a shorter y line it's going to be a child of the selected element and we want the object references to be children of the form tags i don't think yeah i don't think there's any more object references up here they're probably all further down the tree if you ever see path in the tag tree that's just something that acrobat doesn't really know how to handle street address phone zip state city i think the only one left is email which i bet is here and there it is okay so now all of these text input fields have correct tag structure they have the parent p they have the visible text label they have the sibling form tag and then each child of the form is the associated object reference tag now we have some empty tags which we can just go ahead and delete and you might be wondering what is going on with these lines so if you recall before i added these interactive form fields there were this placeholder like a lot of underscores that so the user would know you know where they're supposed to fill out a format if they were writing it on a printed document but when i actually selected the text to tag it i only selected the actual like letters not the underscore so now this is actually broken out into two separate tags street address is a tag and the underscore associated with street address is is one of these things so i can actually um just go ahead and tag these as artifacts i talk about artifacts in a in a another video that's just something that acrobat is told to ignore and the reason we want to flag these artifacts is so it doesn't clutter up our tag tree if we simply deleted this then the next time we run the accessibility check acrobat would say hey wait a minute you have untagged stuff it's not really important but i like the accessibility check to come back clean and plus if you've got a bunch of noise in your accessibility check it can distract you from real errors so if you have stuff like this go ahead and just flag it as an artifact and then it will essentially go away so uh that's all you have to do you handle radio buttons you handle check boxes with the exact same format as any other text input and when you're done you mean you need to make sure the other content is tagged correctly right so make sure your headings are correct make sure any figures you have are correct and when you're done with all that you can run the accessibility check tool make sure things like the document title is set language is set if you have any figures that they're not missing any alt text so it is a multi-step process but it is a requirement so thank you so much for watching this video for slogging through it i know this is a bit trickier of a of a topic if you have any questions i am glad to walk through any of this in more detail please email me my email address is ict access at uoregon.edu and again thank you for watching i will see you in other tutorials

Channel: University of Oregon ICT

Views: 4,333

Keywords:

Id: umoMYDIcEfg

Length: 12min 13sec (733 seconds)

Published: Mon Nov 09 2020