Okay, so right now we have just – I just started sharing my screen. We are looking at my um the accessibility website for  College of Engineering. This is my site, the site that I have complete control over, and I have open right now a test page that I just use to try out different things and test different things. And this is the Kadence sandbox.

So with Kadence – let me scroll down – I was as you can see some accessibility issues came up with our most recent sort of banner changes and stuff, so that's what I was playing around with here. But let me first show the different options that are available for Kadence blocks. So if we browse all here. Let me scroll down a little bit and here are some of the very often used blocks that I see on on the different sites. Lots of sections and row layouts and text blocks image blocks uh lists. People use all sorts of options here, and what I'll start with is the section block because I see this issue come up a lot.

So the section block is used when you want to sort of design a part of a page. So you create a section block and then you can fill the section block with any of these other blocks. Really so if you create a section block and let me just put in there a... Let's just put in some text. Okay, here we go. Test link label. So here we have.... 

Let's pretend I just landed on my I decided to edit this page I've landed on this page and I want to work with this piece of content right here. First thing is a little shortcut. Right now we are in the advanced text block, which is actually inside a section block. If you want to work on the section then you just have to select this. Click that icon, and that'll take you to the section block and you can tell you're on the section block because in the right hand side panel, it'll say section. It'll tell you which block you're in.

Okay, so the biggest, one of the biggest accessibility issues I see with Section blocks is if you scroll down all the way to the bottom overlay link. So Kadence blocks allows you to create sections of content on your page, and it allows you to create, to link that entire section to something: a URL, a page, whatever. Don't use this. Don't use this overlay link feature to hyperlink your cont content.

What it does uh the the reason why is because the overlay link – it'll create a link and it'll functionally work, but in terms of accessibility screen readers, it doesn't tie in your code to any kind of text alternative. So it'll be hyperlinked but there's no uh in this case, it won't grab this actual text to use to to name that link. So if someone's using a screen reader and they encounter this link it's just going to say link, and the person will have no idea where it's going.

So instead of using the overlay link section here, what you want to do instead is actually go to the text block and then this is a little strange in the text block here we are this is telling us we're in the text block it defaults to showing you the style pane you want to select the general pane and under at the last setting of the general pane has link settings, and this is where you want to put in your hyperlink. And then in terms of Link style um depending on what you need, it gives you several options and sometimes I use none if it if I have it just depends on what you're trying to achieve design-wise, but you have some uh options here. So that's one issue that I found with the section block. Remember just the the the main thing is do not use this overlay link section to hyperlink it.

So the most recent fixes that I did for the engineering site um there were a bunch of pages that had this banner down at the bottom. It linked to the different centers and and departments that we have. And originally these were created the section and the overlay link section is where for example this would link to Jacobs institute. berkeley.edu. That was here.

So what I had to do to fix this was go in, grab that URL, delete it from um sorry delete it from the section area (it switched on me) so it deleted from this overlay link area, and then I went back into the text block went to General and put the link here instead. So in terms of functionality it's going to behave exactly the same as what you know you want it to do what you did or um when it was linked in the overlay link section, but in terms of accessibility what will happen now is that when someone's using a screen reader it'll announce the link and it'll actually have some text to associate with it.

Over here, this is an image and again one thing that people often do is they go they use a section they put the image in it and then they go to the section's overlay link, and you can see it's that's what's happening here. Right now we are in the section block, and in the overlay link, this is where the URL is. So what you want to do is grab that URL, delete it from this overlay link section, and then if you select the block block and now we're in the image block, you can go down to the link settings area and enter that URL here instead. And then what will happen is that the screen reader will see this linked image and it will use the alternative text for that image as the link label.

In this case we're missing the alt text you'll see here it's blank. And here's one thing with image blocks that you have to remember: um there's an A lot of times you'll have this option here Dynamic alt text. If you toggle this on, if this image has alt text in the media library in wordpress's Media Library, if you have put alt text in there, it'll grab that alt text and put it here. Looks like this does not have the um alt text in the media library, so you will have to enter it here manually, or you can go back to the media library and enter it there.

um oh my gosh this is a very long name. um and I'll just put logo there. Uh so make sure that if you are linking images, you do have alt text either by manually putting it into this field or toggling this button on and making sure it does have text there. And that's how you fix or that's the thing you have to be careful about with Section blocks. So now again section overlay link empty but the thing that's embedded in it that's where the link is placed. Any questions on this section linking uh text and image linking thing that I just went over. That was just, I think I started with the most complicated one.

Oh, I see a hand yes please go ahead.

– I guess I had a question mostly about the difference between section and row layout. So is there, what's like the primary difference between those two? When would you use one and the other, and does row layout have the overlay link issue as well?
 
– So row layout, let me go to it right now. When you use row layout, it'll automatically use sections within it. But sections can exist outside of rows. You don't have to have a row in order to have a section. But if you have a row, it will include sections. So when you when I first click selected row layout, it says here it tells you well, select your layout. What do you want this row to look like? So I'll just do the two column one. So notice when I selected that, it created two sections here. So this is a section, and that's a section, and it's asking you to basically you know fill it with some kind of content.

So the difference between them, I guess, is that rows are you know it's going to create a row on your page, but it's going to automatically create sections depending on the design you choose, but sections can exist on their own. Like if I you know just click outside on this page, and I have a whole new choose your block type. You can just do a section oops without having a row there, and it'll just create this section. And then within this you can put any number of things.

– I see that makes sense thank you.

– All right. Another popular – uh let me delete this one – block to use is the image overlay block. So let me delete these guys, and let's go to the image overlay. So this is really popular. This is where you essentially have this block where you select an image. I'm just going to choose the cat uh and then it appears on your page. It's this nice image when someone hovers over it, you get this little effect, and then you can put in a title for you know let's say you know cat page uh and it'll take you there. You can hyperlink it all that stuff.

So the the accessibility issue that comes up with this particular block is that so now notice we have an option to write a title and a subtitle. So a lot of times people just put a title in they're like I don't have a subtitle, I just want one line on there. It's totally fine and when you when you save this page, what will appear visually is just that title, but in the back end in the code, the subtitle field is still there. It's just empty and that causes accessibility issues.

So what you want to do is sorry let's see under style, so now we're verifying we're in the image overlay block. We're in the style panel. Notice we have all these collapsed settings here, so here we have title setting, and if you open that up, first of all you don't have to use a title. You don't have to have any text in there. You can just have a linked image if you wanted to, or an image. So if you toggle that off, it goes away, and that's what you want to do. So that's title. I put in cat page. I do want that visible.

Another thing you have to pay attention to is what do you want this to be in terms of the HTML tag. It's it's not a heading one. It's not the title of the page. What is it? Is it is it a second level heading? Is it the third level? You want to make sure that you select the proper heading level for this title that you're using. I've seen a lot of image overlay errors come up as incorrect heading level, because for whatever reason, this was you know somebody chose this to be an H6, for example, and the previous heading was an H2. So it just jumped in levels there, which is a no no. So you want make sure you choose the appropriate heading tag. I'll just choose H3. Just pretend that that's what the uh correct one is here, and then you can you know mess mess around with the font size, all this other stuff.

And then here's the other important part. So remember there's an option to put a subtitle. We don't want a subtitle. We just left it blank initially, but it caused an accessibility issue because it was an empty heading. That's that's the error that comes up: empty heading, because because if you look under subtitle settings, you get the same options: use subtitle. I don't want to use a subtitle, so I'm going to turn that off. If you turn it off, that will uh get rid of the accessibility error. If you do want a subtitle, again make sure you choose the correct HTML tag.

Maybe your title and subtitle or subtitle either one maybe it's not even a heading. Maybe it should just be a paragraph or just a label it's it's like a caption or something, then select this select paragraph. Don't make it a heading. Headings should, headings are organizational things. You use headings to group content to help your users understand um the information on your page. You're organizing it for them. So if it's not a heading, don't call it a heading. Any questions about this part?

One of the things that you'll find as you use Kadence more and WordPress page builders more, there's a lot of stuff happening in this right hand pane. So take some time and explore you know when you're whatever, even if you're not using Kadence if you're using Elementor or whatever you're using, explore your options. So you have your page, these are page options and information and then go to block and and ex just you know there's often submenus here. Go through and explore. Get to know what's going on. There's always collapsed you know things that hide other features. Yeah just taking a few minutes and getting to know uh these settings over here is really helpful. Any questions about this one?

Okay so just as a little review for image overlays, make sure you pay attention to the style pane, titles and subtitles, the tag that's used, um also color contrast. Pay attention to that. It has a whole bunch of default things that are going on, but you've got to make sure that you're um if you are using text, that it has sufficient contrast to to pass those tests. Oops didn't mean to do that. Okay so those are the um main things with the uh image overlay block.

Let's take a look at the gallery. Gallery is always an interesting one, too. So do this Gallery, you can select images. Okay I just choose some random ones. My site does not have a lot of images. Just play around with things, so we'll just do that. Let's see what happens here. So here's the little image gallery you can again on this right hand block verify which block you're working with. Under the general um pane here, there's the link settings, caption settings. You can change the look of this gallery, and then under style you have those things as well.

The only thing with Gallery is it does bring up some accessibility issues. uh There's one that has to do with these little buttons down here in terms of their size. These are things that you can't really fix yourself. This is part of the the page builder like backend code. So in terms of uh Gallery using the gallery, it's a nice feature to have. Use sparingly I would say, and make sure you have alt text associated with each individual image. That would be the the the most important um advice I can give in terms of accessibility.

Are there any other blocks that anyone is curious about? Let me just bring up the list here. Just feel free to just um say.

– I've got a pretty different um installation on the flagship CITRIS and The Banatao Institute site, but we use the accordion plugin.

– The accordion
 
– Yeah that guy right there um, and I've done a little bit of searching and found uh specifically regarding the Kadence accordion block that um the labels that are used as the collapsable headers um aren't coded as headers, so best practice is to repeat your H2 or H3 or whatever it is inside content block.

– Yeah let's see if there's any kind okay I guess I'll just choose the first one. Oh I'm going to have to use all of them. I'm just going to take a look over here and see if there's any kind of setting as we saw in the image overlay where it lets you choose. So it has like font size, but you're right, I don't see an option to select the HTML tag unfortunately. That is sad. That is something that I wonder if they have on their um sort of road map uh for improvements.

I'm just looking a little bit more here. Yeah I mean I don't see. Oh title tag settings under advanced. Perhaps that's affecting the title of each little expandable panel. Not sure exactly what this is referring to. I'd have to build this out I think to to test each little thing, but this might this might be it actually.

– Yeah and it looks like our installation locks us out of customization. Yeah under my Advanced tab, all I've got is an HTML anchor and additional CSS class.

– Okay we do I think we, is there a pro level or something of Kadence there? There might be a a um like a paid level that that unlocks all of these things. So in you're saying that in your accordion block, your Advanced panel does not have all of these options. Okay.

– Correct, and this was also a site that I inherited that was built by outside developers in 2019 2020, so it could be that whoever built the site is just like we're going to lock down options so people don't go rogue and mess things up.

– Okay I wonder, I wonder if you can unlock that somehow.

– I personally am not familiar enough with WordPress at the code end and I'm not a coder so that would probably be somewhere where I tap a developer back in.

– Yeah or just you know it would take some investigation but um but yeah I think that this is where this this looks like it's it's the the control for that. But if you don't have this then then yes, um it could be helpful. So are you saying that what you're doing is repeating the actual

– Yeah literally where it says add title and that's your collapsable title field, just bring it back in with that same text as an H2 H3.
 
– Okay yeah I mean if you if you can't do it this way, then I or just you know hardcode it -- oh you can't no I wouldn't do that -- then yeah I think that's a good workaround. I want to point out another little thing. This is not Kadence though, but if you I don't know if anybody noticed down here this little Accessibility Checker um that I have on my page. So what this is I use a plugin called Accessibility Checker and what it does is it scans your page and tries to detect errors and it's going against um they call it they give it a Passed Tests rating. And let me go to the details over here, and what this shows me is you know on save so if I save this page -- I'll save the draft right now --
what this Accessibility Checker plugin will do is is scan this page on Save, and it's says oh there's five errors. Let's go check it out.

So I go to the details. The color contrast, this one has a lot of false positives, but um here we have a linked image empty alternative text error. If I expand that, it'll tell me let me view on the page. So it's this it's that linked image. It's missing alternative text, so I would need to go in there and fix it. There's all these things, and then if I want to go to the next error, it will tell me you know step by step. But I want to go back to the list so let me just go down whoops

– In Kadence and on the back end of uh WordPress, I guess Gutenberg um and I've seen this in other uh sites as well Drupal etc. that the field for alt text sometimes um displays um or it says that if an image is purely decorative, you would leave that field blank. But that seems to uh contradict a lot of the accessibility um I have the same Accessibility Checker plugin at at your recommendation. So I do notice that it does flag that. I'm just curious that like what would be the best in in your opinion? Should we just continue to add alt text if an image, despite an image being purely decorative?

– No, if it's if it's purely decorative then um you want it to basically. WordPress says leave it blank, and it if it is purely decorative and then like the idea is that when they, when you publish the page, it'll have the null alt text, the alt text you know equals empty quotation marks. If it's purely decorative, leave it purely decorative, but you know make sure that it is purely decorative and it doesn't contribute to the understanding of the information on the page. Yeah.

– Okay.

– Jane, I would almost recommend that we do a separate session at some point diving more into that decorative non-decorative question because uh I hear contradictory sort of definitions like you've got a stock image at the top of your news piece. Like is that purely decorative or does it set a tone for your content? That sort of thing.

– Yeah no I mean I think that's a good... maybe next month's um Fix-it Clinic could just be about images and ALT text. that would be a good, it would be a good discussion because actually writing good alt text you know there are are definite best practices and guidelines. But there's a certain element of sort of just creativity and subjectivity with alt text, so yeah that sounds like a great idea actually. That's what next month's Fix-it Clinic will be. It will be on alt text and images.

But yeah uh, Matthew, yeah if it's if it's decorative, leave it and you know the the accessibility, the automated checkers you know it's automated, it's algorithmic you know. It's not going to be able to make those kinds of judgments. So take that as a you know it's just doing its due diligence, but it's throwing a false positive there in terms of like alt text.

This is why in terms of accessibility, it's so important to also do manual testing and not just rely on automated testing uh tools, because you will need to to make you know to you'll be a a person will be able to make those kinds of judgments and also find other um issues. Let's see here but that yeah that's a good question.

I think oh it's, I am slightly over time. If anyone has additional uh questions right now, like I'm happy to stay on, but I don't want to keep anyone from um anywhere they need to be. I'm again I'm happy to stay on stay on to discuss any other questions, but um I want to thank you all for joining today, and if you have additional questions about accessibility or you just your website in general, you know design stuff, usability, whatever, feel free to email me or um uh send me a chat through Google. I'm I am available to help. But thank you.

– Thank you, Jane.

– Thanks so much, Jane.