- Welcome everyone. This is the Accessibility Fix-it Clinic for July. We're going to be talking about headings today. Welcome, I, I heard someone joining us. This session is being recorded unless anyone has an objection. If you do, please put it in the chat and I will stop the recording, but it is being recorded now. All right, so we'll be talking about headings today. I'm Jane Lee, I'm the Digital Accessibility Specialist for the College of Engineering.

And let me just jump right in to talk about what headings are. A heading is basically a brief title. It describes what's on a page or a section of a page, and they're really important because they help users find and understand the information that you're, you're wanting to convey to them. It breaks things up, especially with long, long pages of information. It really, really is essential. Headings are hierarchical. So you basically want to organize your information and structure it. Think of an outline. So in HTML there are six levels of headings. They go from H1 through H6. Those are the the HTML tags that are used. You can also use headings in Microsoft Word that is very important to do using styles in Microsoft Word. There are actually nine heading levels there. On a webpage - just to jump back real quick - the H1 heading is the top level heading and that's reserved for the title of the page. And it's really important to include that if you're creating webpages.

So there's this organization called WebAIM and they do a screen reader user survey basically every year for the past, I don't know, I think they've done 10 surveys in like 11 years or 12 years, something like that. So the latest one was conducted December of 2023 to January of 2024. So this is very recent information and they received over 1500 valid responses. And I just want to point out two findings from that survey. The survey asked when trying to find information on a lengthy webpage, which of the following are you most likely to do first and 70, almost 72% of respondents reported that they navigate the headings on the webpage. Second, I think, what is that, they use find command or CTRL-F, but the overwhelming majority use headings to navigate.

And then with heading use, they - almost 90% of the respondents found heading levels very or somewhat useful. So the question asked, "When navigating a webpage by headings, how useful are the heading levels to you?" So using headings, any headings at all is very important. If you can organize them and use the various levels, that's even better for webpages. I think you have H1 through H6, but I would say probably H1, H2, H3, sometimes you get into H4s. It depends on the information you're trying to convey. But yeah, I, I've rarely seen H6's in use H5s as well.

Are there any questions so far about headings? Nope. Okay. Alright.

So what I want to show you now, oh, let me just check in real quick. Does everyone have, or has any, has everyone gone into Siteimprove or know what Siteimprove is? Yes. So we have a, yes. Okay, great. So Siteimprove is the tool that UC is using to monitor and evaluate accessibility of websites automatically. So these are the issues that pop up, that concern headings. Headings are not structured, content is missing after a heading, page doesn't start with a level one heading, empty headings, the page is missing headings, and the page is missing a title. So these are all pretty easy to fix.

So let's go in to actually see how we might do this. So I'm going to have to change, let's see my screen share one second please. All right. I think this'll work if I do that. Can everyone see my site improve screen here? Yes, I think so. Yeah. Okay, great. Sorry, my windows are Zoom likes to sort of hide or place its controls, like right over where I want to look. Okay, so here we go. Right now I'm looking at a dashboard that I have set up for myself. Let me scroll up a little bit. It's called cross site issues. And it basically looks at all the websites that I am monitoring and pulls out all the issues. And then I have sorted these, actually, I've filtered these so that they're only showing headings type issues and I've sorted them by conformance so that it shows the WCAG issues first.

This little icon here represents sort of a best practices as opposed to a WCAG sort of standard. So let's start with page missing a title. And what I'm going to do is I'll just pull up, let's see who, what, which sites are affected here. Takes a little bit of time to load, so, okay. Oh, I have some EECS people here. Here we have some Leks pages. So why don't I just jump into it. I'll just go to the top one.

So notice that, that the issue is page missing a title. And in the title field, all of them have no title. So if I click that page, it goes to the page report. Here's the issue here on the left page, missing a title. If I click it will say, oh, we're missing a title tags and how to fix it. Pretty basic. You add a title tag to the page, the head section. So let me go to HTML view and I'll show you. So here's the HTML code for the page. Here's the head section. And if I expand that, if we look in here, there's, you know, all this, you know, meta tags, but the title tag notice is empty, it's blank, it's like there, there's a space character in there probably, but that is not what we want.

So what we would need to do, whoever is responsible for these pages, would need to go into the code and add the title of the page. If you're using a content management system, usually this is not an issue because the content management system like WordPress usually grabs the first heading or you know, major text that's on the page and just fills that in. But in this case, I, this looks like it was not coded using a content management system. So that one was the no page title issue.

Let me go back to our main list. Empty headings are another common issue. Notice there are 115 sites among the College of Engineering's, 330 odd sites that have this issue. There are 4,000 pages that are affected. And this one actually empty headings is one of the issues that commonly pop up when you have, when you're using a content management system like WordPress. So let's go, I'll just choose the first one again, let's see if this one's a good example. I, so if you go into the page report, let me find that empty headings issue, click that and notice that this apparently is an H2. It's telling us, but there's nothing there content wise.

Let me look at the HTML and you'll notice that, oh yeah, look, there's nothing there. The tag is there, but there's no content, there's no reason for this tag to be there. And if we go back to content view, if you go into your WordPress CMS or Drupal, whatever CMS you're using, sometimes as you're editing a page, it's really easy to sort of click and add a, in WordPress a block, a heading block or just, you know, maybe you, you were thinking that you were going to add more text to the page and added some kind of block there, but then there was no actual content to put in. So you then save, publish. And what happens is, you know, visually you go to the page and it looks fine. Because this is just going to be blank. Let's actually, let me go to this page, let's see what it looks like. So yeah, you, you know, scroll down looks fine, it's blank, everything's good. But actually there is that H2 tag that's there.

So all you need to do in this case is to go into your CMS, find the page and find that block that's just empty and then delete it from Siteimprove. If you set up what's called CMS deep linking, you'll have this icon here. And this, because this website has set up CMS deep linking, I could click this and it would automatically take me to the page in the CMS that has this issue present. If you don't have the deep, deep linking set up, then you would have to actually open another tab or window and log in and do all the fixes from there. Any questions so far?

- How do we set it up?

- Good question. So let me go, let me close this page out. That was the page report and go back to my Siteimprove. So with CMS deep linking, let me see if I can remember this. Because there's a few different ways to do it. Actually, it's a good opportunity for me to show you something else. I'm going to go to the accessibility, the digital accessibility website for engineering. Sometimes it takes a little time. There we go. And on this page, there's, you know, some different information under guides. I'll just give you a little mini tour real quick. Under guides, there's different topics that are covered. And then if you look on the right hand side here, there are more specific pages for some bigger topics.

But on the guides page, if you scroll a little bit, there is this little five minute video, how to set up CMS deep linking in Siteimprove, or you can just go read the instructions if you're more of a reader. And so it's under integrate. Well, it says it's under Integrations. I didn't see it at the time, but hold on. Oh no, I was in settings.

Let's go to Integrations. So under Integrations in the main menu, you go to CMS Deeplinks here, and then you have to fill out a request form. And let me just show you what the request form requires. It requires the name of CMS version is optional. And then what you need to do on your website is to find two example pages and put the URL for the page. And then this CMS URL is the URL that shows up when you're in editing mode for that page. So they want two sets, they want the first page here and the second page here. You hit confirm. And then Siteimprove will take your request, set up the deep linking, and then send you a message that they've done. So probably like a day or two after. And then if once you do set that up, it will allow you to get from an issues page to your content management system, that particular webpage with fewer clicks than you'd have to do otherwise.

All right, let me go back to my dashboard and it's going to reload. So I have to choose this again. So I'm looking just at headings and let me make this 10 items, okay? And I'll sort, so we have our WCAG issues at the top. Okay, so we've done page missing a title, empty headings. Headings are not structured. Basically that is when you use headings, they should be, they're hierarchical, so they should be in order. So if you, H1 is reserved for the title. So your next major heading should be an H2. And within H2s, if you need subheadings under that, the next one should be H3s. So when you hit this kind of error where it says headings are not structured, most likely what has happened is that the webpage starts with an H3 or it goes from an H2 to an H6 instead of going in order. So let me just bring up, let's see what this page is showing for that error headings are not structured. So open that up and it's saying, okay, so this account's heading is an H4. The previous heading, if you look over here on the left side, it tells you the previous heading was the H1 and it jumped all the way from H1 to H4. And that you don't want to do that, you want to go in order. So this, you would probably want to go in and change to H2s. And then same thing for this error here rates, this is under, this additional information should probably be an H2. So the rates would probably be an H3. Just depends on, oh look, here it is right here. Yes, the previous heading is an H2. So this heading is an H4.

Probably what happened, this is, I'm just guessing here, is that whoever created this webpage wanted this kind of font styling for the rates and chose the H4. Like the H4 matched visually what they were imagining. So they chose that instead of the H3, the better thing to do is to use the proper heading level H3 and then style that heading the way you want it to look, which you can usually do in your, in your CMS. All right, let me close that up.

The next one page, missing headings. That's one you just don't have any headings at all.

Page does not start with a level one heading. Every webpage should start with level one. You don't want to start with level two, because H1 remember is your title, whether or not you show the title. Some, you know, some CMSs will give you the option of not showing the H1. It'll still be in the code, but it won't be visible. Some people do that because they like the way that looks better and the title is, you know, evident elsewhere. Content missing after heading. That can also happen if you make, let's say an H2 or an H3, but then you don't have any like regular text following the heading. That's a little strange. So that sort of points to, well, did the, did the thing you made a heading. Does that, is that really a heading?

And then this last one here, improper use of pre-formatted text. That's basically like if, if you use the HTML tag pre pre PRE, it's, you should only be using that for code. If you want to display code where formatting of it with the, you know, number of tab stops or you know, spaces is really important or figures, if you use it for anything else, it will flag this error. I'll bring up one of the pages so we can see. So just go to this first one and let's see, where is it Improper use of pre-formatted text. So, so this uses the PRE tag. If I go look at the HTML view, you'll see that it has this HTML tag here, probably, yeah, it's not straight code, so I don't think it needs to have that kind of setup. So you'd go in and change this to a paragraph tag unless it were really important.

And the reason why it's important not to use the pre tag for non code is because it prevents your users from manipulating the view. So you know, in this explanation over here it mentions it will impact users with dyslexia or low vision. There are programs that allow users to change the spacing between letters or the colors, things like that. And if you have the pret tag, users can't manipulate the way they need to back out of that one. So those were the main headings issues.

That was all I wanted to share for today. Let me just go back. And so if you go to the digital accessibility website after this session, I'll put up the recording for this clinic on the Fix-it Clinics page. Adding to the rest of the ones that I've done the previous last month's session, we talked about Siteimprove first steps. There's one on alt text, which is very important to provide for users of screen readers. Anytime you put up an image on your webpage, you need to have a text alternative that describes what the purpose of that image is. Color tools, because color contrast is also an important accessibility issue to address. There's the five minute video on deep linking again, and then the very first Fix-it clinic covered Canva. Just a couple of tips if you use Canva.

Oh, I see something in the chat. Let me see here. Regarding heading order, can you go backwards from an H4 to an H2? Oh, okay. So you know, let's say think of an outline where you have your title and then you go into an H2, and then you, within that section, you're breaking down your information to H3 and then H4, and then the next H3. That's totally okay. And then when you're done with that section, if you need another section, start it with an H2. Yes, that's totally, totally. Okay.

Are there any other questions? And it can be on headings or it can be on anything general. Or if you want me to look at your particular Siteimprove, I'm happy to to do that as well. This is you basically open Q and A for accessibility.

- I had a question about breadcrumbs.

- Sure.

- Another question. Our site has breadcrumbs above the main H1 heading, and that's been being flagged as like an issue. What do you recommend in terms of like labeling for those situations?

- Oh, interesting. Let's see here. Do you mind?

- Oh yeah

- if we looked at the site?

- Yeah, absolutely. I can give you the link.

- Oh yeah, that'd be great. Okay. All right. Let's go back to that site. Go to, let's go to issues, actually. All right. And now? Yep, there it is. Yay. All right, let's, let's investigate this element type. Oops. Oh, no filter. Sometimes this interface is a little confounding to me too. All right, here we go. Oh, sorry, you, you weren't asking about headings, you were asking about breadcrumbs.

- Well, yeah, but it is being flagged as a headings

- Issue.

- Oh it is? Okay.

- Yeah. because it, it basically doesn't start

- With,

- oh, here it is. Okay.

- Level one heading. Yeah.

- Got it, got it, got it. Let's go to the page report and see what it says on the side here. Oh, interesting. Oh, it's because you, okay, yeah, I see what's going on here. So basically you just have to not use an H - a heading tag for this. This just, oh, just needs to be like a paragraph. Okay. Or, yeah, yeah. Got it. One other thing, I'm not sure if it flagged it, I would check the color contrast of this too. Oh, was that also flagged? Oh, absolutely. Oh,

- Okay. Yeah, we know it's a, it's a problem with every Okay thing.

- Okay. Nope. Yeah. But yeah, just don't use a heading tag for the the breadcrumb and you should be fine.

- Oh, okay. Thank you.

- Does anyone else have a question or want me to go to their site? You don't have to.

- I have a lot of questions, but I

- That's okay. Let me just, if you want to ask one now, please feel free. I'll just say like, I am happy, I have spots blocked out on my calendar for drop in. If you wanted to meet for, you know, half an hour at a time, you know, to talk about your site and fix things together, that I am available.

- Okay.

- But if you have anything you want to look at right now, please.

- Still trying to navigate something.

- Mm, yeah, it's it.

- If we want to meet with you, Jane, do we just email you to reach out and schedule for a time?

- You can either email me or, oh, that's okay. If you go to that webpage on here, if you, it says schedule consultation.

- Oh, okay.

- And if none of these times and days work for you, then by all means email me and we can set up something. I just, chose random days to [meet].

- This is great. Okay, thank you. Yeah.

- Alright, well we're almost at the end of time. Does anyone have any other questions? Otherwise I'd say we can just wrap up and I guess we have half an hour to go.

- That's it. Thank you.

- Alright, well thank you. Thank you for joining.

- Thank you, Jane.

- All right, bye. Have a good 4th of July.