• Skip to main content
  • Skip to footer
Equalize Digital Home

Equalize Digital

Website Accessibility Consulting, Training, and Development

  • My Account
  • Swag Shop
  • Checkout
  • Services
    • Accessibility Audits
    • User Testing
    • Accessibility Remediation
    • VPAT & ACR Preparation
    • Accessibility Monitoring
    • Web Accessibility Training
    • Accessibility for Agencies
  • Accessibility Checker
    • Overview
    • Features
    • Pricing
    • Documentation
    • Support
    • Buy Now
  • Company
    • About Us
    • Our Team
    • Industry Expertise
    • Accessibility Statement
    • Contact Sales
    • Become An Affiliate
  • Learn
    • Online Courses
    • Accessibility Meetup
    • Articles & Resources
    • Accessibility Craft Podcast
    • Upcoming Events
    • Office Hours
    • Custom Accessibility Training
    • Global Accessibility Awareness Day
  • Contact Sales
  • My Account
  • Checkout
Home / Learning Center / Cookie Banner Accessibility Testing: Alex Stine

Cookie Banner Accessibility Testing: Alex Stine

Article PublishedOctober 22, 2025Last UpdatedOctober 22, 2025 Written byEqualize Digital

Cookie Banner Accessibility Testing Alex Stine

In this session, Alex Stine tested popular cookie consent solutions for accessibility with his screen reader and provided real-time feedback. If you need an accessible cookie banner, watch this recap to see which WordPress plugins provide the best starting point.

Thanks to Our Sponsor

GoDaddy‘s mission is to empower a worldwide community of entrepreneurs by giving them all the help and tools they need to grow online — including a simpler, safer WordPress experience.

GoDaddy provides a Managed WordPress experience that is as easy as it is effective. The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly, with automated backups, updates, and malware removal so our Pros can spend less time on monotonous maintenance and more time building their businesses.

Watch the Recording

If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.

Read the Transcript

Read the Meetup Video Transcript

>> AMBER HINDS: Welcome to WordPress Accessibility Meetup, Cookie Banner Accessibility Testing, with Alex Stine, who is a Site Reliability Engineer at Waystar. A few announcements before we get started. If you are not familiar, we do have a Facebook group which is a great way to connect in between meetups. You can find it if you go to Facebook and just search WordPress Accessibility, or the URL is facebook.com/groups/wordpress.accessibility. Everyone always asks, is this being recorded? Yes, it is being recorded. It takes us about two weeks to get corrected captions and a transcript and the edited video, and then it will be up on our blog. You can find upcoming events and past recordings in one place, if you go to equalizedigital.com/meetup. The other way to get notified when the recording is available is to join our email list. If you join that, you will get news. We send once a week a newsletter that has links to the recordings, and our podcast, and news articles related to web accessibility from all around the web, not just our content, and we also send out event announcements. You can find that subscription form at equalizedigital.com/focus-state.

If you want to find just the podcast, which Alex was recently a guest on and also did some screen reader demos for a couple of different page builder components, you can go find that episode and more if you go to accessibilitycraft.com. We are seeking additional sponsors for the meetup. This is part of the official WordPress meetup program, but the community team told us that they do not have the funds to help cover the cost of captioning or transcription or anything else to help make it accessible. If you are interested in helping to support the meetup, please reach out to us. You can contact myself, or my co-organizer, Paula, if you email meetup@equalizedigital.com.

Who am I? I’ve been talking. I haven’t introduced myself. If you have not been here before, my name is Amber Hinds, I am the CEO of Equalize Digital. We are the lead organizers for this meetup. Equalize Digital is a mission-driven organization. We are a corporate member of the IAAP, and we are focused on WordPress Accessibility. It is what we love, and everything we do is all about accessibility. We have a WordPress plugin called Accessibility Checker that helps you find and fix problems on your website. We also have two different online courses on using screen readers for accessibility testing.

If you have ever wanted to learn to use NVDA, which is the screen reader you’ll be hearing tonight, or VoiceOver, which is a screen reader for Mac computers, we have courses that teach you how to do that. Then we also do accessibility audits, remediation, and consulting. We do have a sponsor that I want to thank this evening for covering the cost of live captioning, and that is GoDaddy. GoDaddy’s mission is to empower a worldwide community of entrepreneurs by giving them all the help and tools they need to grow online, including a simpler, safer WordPress experience.

GoDaddy provides a managed WordPress experience that is as easy as it is effective. The latest version of WordPress comes pre-installed with exclusive themes, plugins, and tools to get you up and running quickly, with automated backups, updates, and malware removal, so that GoDaddy Pros can spend less time on monotonous maintenance and more time building their businesses. You can learn more about GoDaddy if you go to godaddy.com.

The other thing that we always ask people, if you are willing, go on whatever your favorite social media platform it is and find GoDaddy. They’re a big company, so they’re almost guaranteed to be there, and just send them a quick message that says thank you for sponsoring captions for WordPress Accessibility Meetup. It helps to tell them that their sponsorship matters and makes this meetup great for a lot of people. If you are willing to shout them out for that, we would very much appreciate it.

Two upcoming events to be aware of. The first one will be our meetup for October will be Thursday, October 2nd at 10:00 AM Central Time. That meetup will be called, Convincing Your Clients of Accessibility, Arguments and Business Cases. We have a wonderful speaker from the Netherlands who will be presenting that meetup. Then, the exciting, exciting event of the year is WordPress Accessibility Day, which is a free 24-hour livestream that is going to take place this year via Zoom Events. It’s going to be October 15 through 16. Again, it will run for 24 hours, and there are going to be talks that you can tune into for all of those 24 hours.

The other thing that is really cool this year is that because we’re using Zoom Events, you will be able to watch an instant replay of any talk right after it ends. You won’t necessarily have to wait for us to get them fully edited and up. So please go register for WordPress Accessibility Day if you have not done so. Again, it’s free. You can register at 2025.wpaccessibility.day. I am going to stop sharing my screen, and I am going to let my friend, Alex, take over sharing. Alex has been a speaker for us a couple of other times. He is a phenomenal person who has contributed a lot to the WordPress community.

Even though now his day job is outside of WordPress, he still shares his thoughts and expertise with us and others in the community, and we very much appreciate that. Thank you, again, for coming, Alex, and being willing to test some cookie banners for us.

>> ALEX STINE: Absolutely. Thank you for having me.

>> AMBER: Before we dive in, I’m curious, can you tell us just a little bit about when you go to a website with your screen reader, what would you want a cookie banner to do? How would you know that it was a good cookie banner versus a bad one? Give us any sort of background that you can give about what you’re going to be testing for when we start looking at the cookie banners.

>> ALEX: This is well-debated in the accessibility industry, but I actually kind of prefer a banner that has focus trap. This should definitely throw you into motor-like environment, so that way it’s in your face, “Hello, you can’t ignore me.” The very same experience that people with sight often get, except couple other rules we’re breaking with that since focus jumps can be a little strange for people using the keyboard and the screen readers to navigate.

If you’re not a fan of that approach, the second best thing you could do is at least make the cookie banner available as the first item in the HTML. That way, when a user lands on your website, they actually know that there is a cookie banner to interact with. Otherwise, it is highly likely that cookie banner will be missed.

>> AMBER: That’s a good point. You want to, first of all, know that there is a banner there. I think it’s interesting, the modal thing. I will say, for everyone, we’re not going to get into, are these actually doing what they’re supposed to do? We’re not going to check and see if they’re actually blocking cookies, [laughs] or any of those things. We’re also can’t tell you legally what your cookie banner is supposed to do, but I will say, as a non-expert, I do think that if you are legally required to get consent from people, that includes all people, including people with disabilities, not just typical users. Do you have anything else that you want to add before you start sharing, Alex?

>> ALEX: Just don’t make it over annoying. I think that’s the other rule. There are some cookie banners, I saw one once on one website, it wanted a consent every time there is the page load.

>> AMBER: Oh, that does sound annoying.

>> ALEX: Yes, it was quite awful. With great power comes with great responsibility.

>> AMBER: Yes. Well, I’m excited for you to share your screen. While you’re getting that up, I am going to share for everyone the website that we’re going to be testing on. Now, this is an inter WP website, it’s going to disappear in like five or six days, [laughs] but it is here now, you can look at it.

>> SCREEN READER: Press F6 to switch between open Zoom Windows alert. Screen share–

>> AMBER: What I’ve done, just for some background for everyone, is this is a WordPress multisite, and each subsite has a different cookie banner on it, and they’re sorted by the number of active installs that they have and also by the ones at the top have made some sort of statement saying that they are accessible, which I have put a quote on the page when we click to it. That’s some background. Do you want to go to the first one, Alex? That is compliance?

>> ALEX: Absolutely.

>> SCREEN READER: Subsites. O. Busy. Document. About, colon, blank. Compslianz document busy. Same page link. Skip to content. Manage consent dialog to provide the best experiences. We use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on the site. Not consenting or withdrawing consent may adversely affect certain features and functions. Close dialog button.  Manage consent dialog to provide the best–

>> ALEX: Okay. So far we’re not off to a bad start. It announces that this is a dialog. It read the content, as you could hear. It appears that focus is inside of it, so it’s pretty in your face, like I talked about, at the top. At least you can’t miss it.

>> SCREEN READER: Manage consent. Manage consent.

>> AMBER: Do you want it to read the whole content, or just like a dialog and a title?

>> ALEX: It depends on how this is coded, because if you code it to spec, it probably will read everything.

>> AMBER: Okay.

>> ALEX: I don’t always tend to agree with the web standards in accessibility, because I don’t personally believe there’s enough people with disabilities included in those decisions, but speaking strictly by the rules, this is correct.

>> SCREEN READER: Button close dialog. 

>> AMBER: Okay.

>> SCREEN READER: To provide the best experiences, we use technologies like cookies to store and/or access device. Information. Consent. Behavior or unique IDs on this– Certain features and button accept. Button deny. Button view preferences. Link cookie policy. Link sample page. 

>> ALEX: I would really prefer that cookie policy and-

>> SCREEN READER: Link sample page. 

>> ALEX: -the sample page link is above these buttons to either except, deny, or view other preferences. That way, you can actually get to these first, because one might actually want to read the full cookie policy before accepting this and losing the banner.

>> AMBER: I did notice that the close button seemed like it had a label, and then accept, deny, and view preferences, all said that they were buttons. Does that seem right to you?

>> ALEX: That seems correct.

>> SCREEN READER: Accept button. Deny button. View preference. Cookie policy link. Sample page link. Same page link. Skip to content. Skip to content. Same page. Banner landmark. Complianz link. Current. 

>> ALEX: Oh, I was trying to test focus inside the dialog, not leave it.

[beep]

>> ALEX: That’s a problem.

>> SCREEN READER: Dialog manage consent. 

>> ALEX: If you’re going to put people inside a dialog, you should trap their tap focus so they can’t accidentally leave it, like I just did.

>> SCREEN READER: Manage consent. 

>> AMBER: Okay.

>> SCREEN READER: Manage consent dialog. To provide the– Manage consent. Button close dialog. 

>> ALEX: Okay.

>> SCREEN READER: Accept button. Deny button. 

>> ALEX: Go ahead.

>> AMBER: Do you want to try the preferences before we accept or deny?

>> ALEX: I was going for that right now.

>> AMBER: [chuckles] Awesome.

>> SCREEN READER: Always active. Statistics. Statistics. Certain features and function. Behavior or unique IDs on this site. Not con– Certain features and function. Button collapsed. Functional. Button collapsed. Always active. Button collapsed. Statistics. Button collapsed. Checkbox not checked. Button collapsed. Statistics. Button collapsed. Marketing. 

>> ALEX: Okay. There’s a lot going on here. Buttons, checkboxes within buttons.s

>> SCREEN READER: Button collapsed. Statistics. Button collapsed. Checkbox not checked. 

>> ALEX: This needs a lot of work.

>> SCREEN READER: Button collapsed. Marketing. Button collapsed. Checkbox not checked. Button collapsed. Marketing. Button accept. Button deny. Button save preferences. 

>> AMBER: So, it’s not correct to have a interactive component nested inside of another interactive component.

>> ALEX: Definitely not.

>> AMBER: Like a button inside of a button. Yes. Okay.

>> ALEX: Let’s just watch what happens with this. Let’s try this again.

>> SCREEN READER: Same page link. Same page. Banner landmark. Same page link. Banner landmark. Navigation landmark. List. Out of list. Out of list. Link current page. Complianz. Same. Same page.  

>> ALEX: Oh, okay. Well, that’s unexpected. I was going–

>> AMBER: What did you think you were doing?

>> ALEX: I thought I was going to click on save preferences. So that way I could go back to view preferences and try to reproduce the focusing on the wrapper to read all those options all at once, which I also consider to be an anti-pattern, but what actually happened is it saved all the preferences for the cookie banner and exited. I was thinking, save and accept, but it’s not the case.

>> AMBER: Okay. Do you think that that is a accessibility problem, or is that a– like more of a UI confusion kind of problem?

>> ALEX: I would actually list that as both, because I think it is unreasonable that– well, I mean, I guess everyone gets the same experience, so you can’t call it an accessibility problem unless you say it is for all, but it’s definitely confusing, because you shouldn’t have two differently labeled buttons that do pretty much the same things. That’s a hard concept to explain, because I was expecting that they closed the exposed content, not the whole banner.

>> AMBER: Yes, I think that makes sense.

>> ALEX: Let’s see if we can get it back.

>> AMBER: Are you able to find the banner and get it back? [chuckles]

>> SCREEN READER: Same page links. Button manage consent. Content info landmark. Button manage consent. 

>> ALEX: Oh, of course. There is a button all the way at the end of the DOM.

>> SCREEN READER: Consent.

>> ALEX: We get used to these.

>> AMBER: You knew that it might be at the end and you just jumped the end. Is that what you did?

>> ALEX: Straight to the end.

>> AMBER: Is that an okay position?

>> ALEX: I would prefer, depending on site owner preference, some people might even want to see this on the top of the page.

>> SCREEN READER: The host has spotlighted your video for everyone. Alert.  

>> ALEX: That way it’s more easily accessible, but I don’t know. I mean, chat windows float down on the bottom of websites these days. It’s such a bad pattern, but I think it’s become an expected one.

>> AMBER: Okay.

>> SCREEN READER: Manage consent dialog. To provide–

>> ALEX: Okay, let’s try this again.

>> SCREEN READER: Mange consent. Close dialog. Statistics. Statistics. Checkbox not checked button. Statistics. Statistics. Checkbox not checked. Statistics button. 

>> ALEX: Okay. So we don’t actually get the ex-closure anymore. Just everything’s here.

>> SCREEN READER: Close dialog. Statistics. Statistics. Checkbox not checked. Statistics. Button collapsed. 

>> AMBER: Are you able to expand?

>> SCREEN READER: Checkbox not checked. Button collapsed. Marketing. Marketing. Check. Statistics. The technical storage or access that is used exclusively for statistical purposes. Expanded. 

>> ALEX: Yes, you have to click on the button, which is also announces checkbox, but it will expand.

>> AMBER: Okay.

>> SCREEN READER: Statistics. Checkbox not checked. Button expanded. 

>> ALEX: That’s the actual checkbox, I take it?

>> SCREEN READER: Checked. Marketing. Marketing. Checkbox not check. Marketing. Button collapsed. 

>> ALEX: Yes, these should be two different elements. Not nested elements. If this was fixed, it would be almost definitely passed most audits, I think.

>> SCREEN READER: Marketing. Accept button. Deny button. Save preferences button. 

>> ALEX: Again, this accept and this save preferences. This is so confusing. I don’t understand why this choice was made. I mean, even here, I’ve got these options checked. So if I hit accept, does that just accept the defaults?

>> AMBER: I’m guessing that save and accept do the exact same thing. Whereas it would– I think accept would save whatever you’ve checked.

>> ALEX: Yes, I’m not so clear on that, to be honest. I would be interested to see if this is revised in the future.

>> SCREEN READER: Cookie policy link. 

>> AMBER: If you accept or deny, where does it put you, and are you happy with what you-

>> SCREEN READER: Save preference. Deny. Accept button. Selected. Content info landmark. Navigation landmark. List with four items. Themes. Same page link.

>> ALEX: Oh, definitely not happy with the accept and then focus lost on the page.

>> SCREEN READER: Same page link. Patterns. Same. Same. Out of link. Same page link. FAQs. Out of list button. Manage. 

>> ALEX: Probably demo this again.

>> SCREEN READER: Manage consent. Manage. Button close. To provide the best– Functional. Always. Statistics. Marketing. Marketing. Accept button. Deny. Save preferences button. Blank.  

>> ALEX: Yes, just the total focus loss.

>> AMBER: So, when you closed it, where did you want to go?

>> ALEX: Preferably, it would focus the first element on the site, unless you’re coming from-

>> SCREEN READER: Button manage consent. 

>> ALEX: -manage consent, I would expect focus to land back on the trigger.

>> AMBER: Something else that I’ve just noticed, that you’ve revisited that manage consent button is, it didn’t tell you that it would open a dialog.

>> ALEX: Yes. I mean, that attribute has never had a ton of great support, so there is some people that have never used it. You can definitely add it. I would recommend adding it, because coding to accessibility spec is kind of what I think all of the accessibility experts and developers should be doing, regardless whether or not the screen readers actually use it properly.

>> AMBER: For people who are watching, we’re talking about ARIA has pop-up equals dialog, and then you’d also have an ARIA controls attribute that reference the ID of the dialog.

>> ALEX: These probably will not work on certain screen readers, because the ARIA spec comes before the screen reader implementation. So we could see some interesting things with that.

>> AMBER: Is there anything else on the compliance one that you think we should look at?

>> ALEX: I do not think so. It is definitely– someone can use this. There’s no issue here that would prevent someone from using this cookie banner.

>> AMBER: Okay. So, not 100% conformant, but definitely accessible. The statement that I put on the page, from their plugin page on wordpress.org says, “We aim to follow WCAG 2.1 AA guidelines and ADA best practices in the design of our cookie banners and legal documents to support accessibility.” Do you generally feel like this supports that statement?

>> ALEX: No. Definitely not. I think that’s a rather bold statement for a company to list when you’re putting checkboxes inside buttons and vice versa.

>> AMBER: Okay. Do you want to go back and we’ll take a look at the next one?

>> SCREEN READER: Main site document. Link. Cookie yes. 1M. Opens a–

>> AMBER: Everyone, if you have any questions, I’m going to try and watch the chat and Q&A. So if you want Alex to clarify anything, I will definitely pass those along to him. I do see Donata, who is actually an attorney, a privacy attorney, she wrote in the chat that, “Usually, on cookie consent banners, accept would save all cookies in all categories. Save preferences would accept only the items you have checked. E.g., if you’ve accepted marketing, but not statistics.”

We’re not actually looking right now to see what it’s saving, and for all we know, I just didn’t set these up right, because this is a fake website, so I don’t think it’s fair to judge them on, did they actually [chuckles] clear stuff or not? In case that’s helpful. I don’t know, Alex.

>> ALEX: I mean that was my assumption, but nice to hear what the standard is.

>> SCREEN READER: Link complianz. Link cookie yes. O. Busy. Document. About, colon, blank. Cookie yes. Document busy. Same page link. Skip to content. We value your privacy. Region button. Accept all. 

>> AMBER: All right.

>> SCREEN READER: Out of region. Same page link. 

>> AMBER: Can you tell me, when that opened, what happened? It didn’t seem like it read the banner in the same way that the other one did.

>> ALEX: Oh, no, it didn’t. Focus lands where the highlight currently is. Right now on skip to main content. There, so I mistakenly found, is a cookie banner that is currently above my current focus position, which if you want users to never find anything, that is a really great way to start.

>> AMBER: So, they’ve done what you said, which is make it the first thing on the page, but they’ve made it actually higher on the page than the skip links?

>> ALEX: Correct.

>> AMBER: Oh, interesting.

>> ALEX: If you’re going to have some type of progressive loading, which is probably what this is, it loads after the page, so it doesn’t block the page load. You have to manage focus, because– I guess that should have been the other part of my statement earlier. Yes, it is the first thing on the page, but it loaded after the first part of the page that precedes screen reader focus. So, to me, it’s not the first thing on the page. At least not without an accidental discovery.

>> AMBER: Yes, because most people aren’t going to navigate backwards from skipped content.

>> ALEX: Correct.

>> AMBER: So it would be better to just, in this case, put focus into the banner.

>> ALEX: Definitely.

>> AMBER: Okay.

>> SCREEN READER: We value your privacy region. Heading Level 1. We value your privacy. We use cookies to enhance your browsing experience. serve personalized ads or content and analyze our traffic. By clicking “Accept All”, you consent to our use of cookies. Button customize. 

>> ALEX: Okay. This has a region landmark-

>> SCREEN READER: We value your privacy. Heading Level 1. 

>> ALEX: -with a Heading Level 1, which works for me, even though there is a fair amount of debate there, which I’m not going into.

>> AMBER: Meaning, some people think you should never have more than one H1 on a page.

>> ALEX: Which is absolutely ridiculous.

>> SCREEN READER: Customize button. Reject all button. Accept all button. Skip to content. Reject all button. 

>> ALEX: Now, because this is not in the dialog-

>> SCREEN READER: Customize button. 

>> ALEX: -I would like to have more specific labels for customize-

>> SCREEN READER: Reject All button. 

>> ALEX: -Reject All-

>> SCREEN READER: Accept All button. 

>> ALEX: -and Accept All. The reason being is-

>> AMBER: What do you mean?

>> ALEX: -because the context-

>> SCREEN READER: Skip to content. Same page. 

>> ALEX: -would be a little weird. Let’s demonstrate like this.

[beep]

>> ALEX: Let’s say I wanted to navigate backwards by button.

>> SCREEN READER: We value your privacy. Region. Accept All button. 

>> ALEX: You hear we value your privacy, accept all. Users are probably smart enough to figure out accept all cookies, reject all cookies, customize cookies, but why can we just say that? It clears up confusion if there ever was going to be any. 

>> AMBER: Should this– I find this really interesting, because visually, it looks like a dialog. Now, maybe because it’s not trapping focus, they’ve decided not to give it a role of dialog, but do you think– the role region flags for me as not correct.

>> ALEX: Role region is another method of discovery. For this case, it more or less works.

>> AMBER: Okay.

>> ALEX: I think my pick would definitely be a dialog, especially if you want to trap focus, and you want to make it really clear that a user needs to make a selection, but this is kind of the opposite end of the spectrum. This is kind of what you would implement if you don’t want to trap focus. When you’re not trapping focus in the modal dialog, you need to make it really clear what this content is about, because it can flow with the rest of the page content. You’re not setting one context. This can be access for many more on this side.

>> AMBER: Yes, that makes sense.

>> SCREEN READER: Reject. Customize button. 

>> AMBER: This one also doesn’t have a close button or anything, like the other one did.

>> ALEX: Does not. It forces you into making an option.

>> AMBER: Which maybe, I’ve wondered about those close buttons, because I’m always like, “If I just click a close button, what does it do?” [laughs] Does it accept or does it reject? Right? Probably from– who knows? From a legal standpoint, the close button without an ambiguous, “This is what it will do,” might not stand up.

>> ALEX: I would expect the close button to accept.

>> AMBER: Oh, you think so?

>> ALEX: I suspect that’s-

>> AMBER: Oh, Donata says-

>> ALEX: -probably the case.

>> AMBER: Donata says, “If you click close, it’s supposed to reject all cookies.” I will say, I noticed on some of these, that there’s the settings where you could choose what you want it to do. So, maybe ask your friendly privacy attorney [chuckles] what your choice is, or just go with what she said. [chuckles]

>> SCREEN READER: Customize consent preferences dialog. Close button. Customize consent preferences. s

>> ALEX: Now, that’s a dialog, interestingly enough.

>> AMBER: It got focus when you opened it?

>> ALEX: It did. Now, the button didn’t say that you’re opening a dialog, so that could always be added.

>> SCREEN READER: Heading Level 1. Customize consent preferences. Heading Level 1. Button close. 

>> ALEX: Hey, look, another Heading Level 1.

>> SCREEN READER: Heading. Button close. We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below. The cookies that are categorized as “Necessary” are stored on your– For enabling the basic– Button collapsed. Necessary. Always active. Necessary cookies are required to enable the basic features of this site such– Login or adjusting your consent preferences. These cookies do not– Identifiable– Button collapsed. Functional. Necessary button collapsed. Always active. Necessary. Cookies. Always. Button. For enabling. Show more button. Necessary button collapsed. 

>> ALEX: This is interesting. If you use the tab key in this alone, it’s not going to read the descriptions. That’s easily fixed. With the aria-described by, you can point to the id of this associated text below. Not a big issue. It’s still discoverable with other means of navigation, but my opinion, you try to account for as many possible ways of navigating as possible.

>> SCREEN READER: Functional  button collapsed. 

>> AMBER: You’re talking about like that, like the functional button collapsed, which has extra text below it, but it’s not telling you that extra text.

>> ALEX: Correct.

>> AMBER: Got you.

>> SCREEN READER: Expanded. Enable functional. Checkbox not checked. Analytics button collapsed. 

>> ALEX: I don’t actually understand why we built an accordion with single check box inside.

>> AMBER: Oh, so when it expanded, it did visually display more content. Could you not find it?

>> ALEX: Yes.

>> SCREEN READER: Enable. Functional button expanded. 

>> ALEX: You’re not going to be able to with the tab key, so.

>> SCREEN READER: Checkbox not checked. Enable functional. Functional cookies help perform certain functionalities like share– Social media platform. List with three items. Cookie. Secure rollout token. Duration. Six months. Description. Description is currently not available. Out of list. List with three items. Cookie. Visitor info1 live. Duration, six months. Description. A cookie set– Player interface. Out of list button collapsed. Analytics. 

>> AMBER: Yes, this is slightly weird, but none of this it’s discoverable, so I don’t think there’s any violations here.

>> SCREEN READER: Checkbox not checked. Enable analytics. Analytical cookie help providing that. 

>> AMBER: You’re using the arrow keys, right?

>> ALEX: Correct

>> SCREEN READER: Help. Button collapsed. Performance. Checkbox not checked. Enable performance. Performance cookie which helps. Button collapsed. Advertisement. Checkbox not checked. Enable advertisement. Advertisement. Pages you visited. Button collapsed. Uncategorized. Other uncategorized cookies are those that are being category as yet. Button reject all. Button save my preference. Button accept all. Button save my preferences. 

>> ALEX: Now, see, this one’s more clear. Save My Preferences.

>> AMBER: Over Reject All or Accept All.

>> ALEX: Yes. Suspect maybe? Well, I don’t know. Let’s see what happens with this.

>> SCREEN READER: Button save my–

>> ALEX: if I click Save, will all this save and go away? Let’s see.

>> SCREEN READER: Cookie yes. Mozilla Fire. 5 out of 5 stars. Link 3. Out of Frame. Out of Figure button. Consent preferences. 

>> ALEX: Yes, it did. Then it threw focus to the middle of the website. Not good. They even have a cookie–

>> SCREEN READER: Button consent preferences. 

>> ALEX: Cookie Consent Preferences button at the top of the website, which they could have focused on.

>> AMBER: Wait, it did not put your focus on that button?

>> ALEX: No, it didn’t.

>> AMBER: Visually looks like it is.

>> SCREEN READER: Customize consent preferences dialog. Close. We use cookies. Detailed. The cookies that are–

>> ALEX: I moved too fast. Let’s see.

>> SCREEN READER: Show More Necessary button. Functional button. Analytics button. Performance button. Advertisement. Uncategorized. Reject All button. Save My Preferences button. 

>> ALEX: Back to Save Preferences.

>> SCREEN READER: Same page link. Skip to content. 

>> ALEX: Okay, now we’re on skip to main content, so did two different things.

>> AMBER: That preferences button is above the Skip to Content?

>> ALEX: We’ll move backwards one–

>> SCREEN READER: Consent Preferences button. 

>> ALEX: There’s your Consent Preferences.

>> AMBER: This one also doesn’t tell you it opens a dialog.

>> ALEX: That is correct.

>> AMBER: I’m curious about that Show More button that was in that dialog.

>> SCREEN READER: Customize consent preferences dialog. Close button. We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below. The cookies that are categorized as necessary are stored on your browser as they are essential for enabling the basic functionalities of the site. Show More button. Necessary button. Collapsed all was active. Necessary. Cookies are required to enable the basic features of this site, such as providing secure login or adjusting your consent preferences. These cookies–

>> ALEX: What in the world did they do with that? That’s something I didn’t discover. Ain’t right. That wrap a tab index in that. This whole dialog, it’s very weird why it started reading like that.

>> AMBER: You don’t know why it did?

>> ALEX: No. I pressed tab to see if I could find the Show More and it just started reading everything. There’s got to be an invisible tab index somewhere that made that happen.

>> AMBER: That’s interesting.

>> SCREEN READER: More button. 

>> ALEX: That’s really annoying. All right. Show More.

>> SCREEN READER: Same page link. Skip to content. 

>> ALEX: Not sure that was supposed to happen.

>> AMBER: Yes, so you lost focus.

>> ALEX: Yes. Just focus loss in the entire dialog. That’s not great.

>> SCREEN READER: Customize consent. Heading Level 1. Customize. Button close. We use cookies. Detailed info. The cookies that are– Enabling. We also use preferences and provide– Will only be– You can choose to enable– Affect your browsing– Button. Show Less. Button collapsed. Necessary. 

>> AMBER: You know why I think that was? It’s because when you click the Show More button and the Show Less button are different buttons, which is correct because you shouldn’t change the name of buttons. When you click the Show More button and you’re focused on it, they completely remove it from the DOM and they haven’t managed focus to put you on the new text that was added. That’s why you get lost because you’re focused on something that no longer exists.

>> ALEX: Important lesson for every developer who uses too much JavaScript to accomplish simple jobs.

>> AMBER: How would you do a Show More?

>> ALEX: I mean, if you’re just showing like more text, I don’t know why you don’t just put it in a basic disclosure widget or something.

>> AMBER: Yes, so that the control stays visible. Like your Show More/Show Less is the exact same control, basically, so it doesn’t get removed when someone clicks it.

>> ALEX: I mean that I’m not like someone who promotes changing the text of buttons, but in the accessibility industry, I also don’t see why it’s such a bad thing to do, especially considering the alternatives can be much worse.

>> AMBER: What else do we want to look at on this one? I guess you were able to check different options and they read out as checked or unchecked, right?

>> ALEX: Correct.

>> AMBER: How are you feeling? Is this fair? You can tell me if you don’t want to. As we go through these, do you want to say like better or worse?

>> ALEX: I put this one slightly better than the last.

>> AMBER: Even without the focus on the initial dialog?

>> ALEX: I mean it’s still discoverable. It’s not as discoverable. They both have issues that really equal out at a certain level. If you’re going to have a dialog, you better test your focus.

>> AMBER: Yes, I think that’s everything that we would want to look at in this one, unless there’s anything else you’re aware of.

>> SCREEN READER: Button consent preference. 

>> ALEX: What do their accessibility statements say?

>> AMBER: They had a very short thing and on their product page or plugin page on wordpress.org, it says accessibility colon. The banner is WCAG/ADA compliant for accessibility. True or false?

>> ALEX: The current state today say focus loss would make it false.

>> AMBER: I think the thing I’ll say about some of these, they’re close, right?

>> ALEX: Very close.

>> AMBER: If they did a little bit, then they would get better. Our next one is Usercentrics. What I’ll flag about this one before you go there is we actually have– there’s two Usercentrics, one we might look at a little bit later. The one that we’re going to look at now is not their Usercentric’s cookie bot plugin because they explicitly say that one is not accessible. This is the Usercentrics from their website that you pay for which has a very strong– they say it is WCAG 2.2 certified, which isn’t a thing. I have a whole blog post about this, but that’s the next one is Usercentrics.

>> ALEX: I’m just going to throw it out there for privacy lawyer who may or may not still be on this call, but maybe don’t make a practice of admitting the fact that you’re inaccessible. Maybe not the best call.

>> SCREEN READER: Main site doc. Link. Usercentrics. 6S. 

>> AMBER: [laughs] Well, luckily, she’s not from Usercentric, so.

>> SCREEN READER: Link consent management platform po.

>> ALEX: Fair enough. Just a statement of fact, nothing else.

>> SCREEN READER: Link consent management. Banner landmark. Heading Level 2. Privacy settings. 

>> AMBER: Sorry, I missed. When you loaded the page, it landed on the dialog and started reading the dialog?

>> SCREEN READER: Link consent management platform po. 

>> ALEX: It landed on something that is probably a close button but is not labeled as such.

>> AMBER: Oh, can you refresh the page so I can pay more attention? Do you mind?

>> SCREEN READER: Usercentrics document. Banner landmark. Link. Current page. Usercentrics. Privacy settings dialog. This site uses third-pary website tracking. 

>> ALEX: NVDA focus changed. I guess it’s not going to focus the same place twice.

>> SCREEN READER: Link consent management platform po. 

>> ALEX: That’s the top of the dialog, so.

>> AMBER: Okay.

>> SCREEN READER: Banner landmark. Heading. Level 2. Privacy settings. This site uses third-party website tracking technologies to provide sand continually improve our services and to display advertisements according to users’ interests. I agree and may revoke or change my consent at any time with effect for the future. Marketing. Switch off Marketing. Functional. Switch off Functional. Button Details. Button Accept All. Button Save Settings. Button Deny. Button Deny.

>> ALEX: All right, so.

>> SCREEN READER: Button Save Settings. 

>> AMBER: Oh. Wait a minute. There was an essential button switch. Did you get that or did it skip Focus?

>> SCREEN READER: Button detail. Switch off functional. Functional. Switch off marketing. Marketing. Banner landmark services, and to display advertisements–

>> ALEX: It skipped it.

>> AMBER: It skipped it. I wonder if it’s disabled because you’re not allowed to turn it off. Yes, it looks like it might have ARIA disabled equals true on it.

>> ALEX: Yes. Well, if you can see it visually and they don’t present to screen readers, that’s a problem.

>> SCREEN READER: This site uses– Heading Level 2. Privacy.  

>> AMBER: What would be a better solution for that?

>> ALEX: I’m not sure because I’m not super familiar with the coding that goes behind these newer toggles that people are starting to use. I always thought that ARIA disabled would still make it available in the DOM though, so I’m not sure what’s going on with that.

>> AMBER: It also has a disable attribute, too, it looks like.

>> ALEX: That might do it. Disabled will probably do it on these.

>> AMBER: Oh, David saw it. I’m looking. It also has ARIA hidden equals true.

>> ALEX: That one definitely do it.

>> AMBER: This seems like a failure because it is setting cookies. Again, this is me not being a lawyer, but guessing. If you’re supposed to tell people that you’re setting cookies and you’ve literally hidden it, it seems wrong.

>> SCREEN READER: Link consent management platform.  

>> ALEX: Seems a little counterintuitive at the worst.

>> AMBER: Yes.

>> SCREEN READER: Link. 

>> ALEX: All right, let’s see how we do on Tab Focus.

>> SCREEN READER: Marketing switch off. 

>> ALEX: Right past it.

>> SCREEN READER: Functional switch off. Details button. 

>> ALEX: Details for what? Guess we’ll find out.

>> SCREEN READER: Dialog. Banner landmark link powered by Usercentrics. Consent management.  

>> ALEX: Hmm.

>> AMBER: Why’d you say “hmm”?

>> ALEX: We have power by text and nothing else, so I hope that’s not all the details I’m going to get.

>> AMBER: There’s a lot more in this dialog.

>> SCREEN READER: Link powered by Usercentrics. Consent management. Button close layer. Tab selected categories. Tab services. Tab about. Region collapsed. Button collapsed. Marketing 3. Marketing 3. These technologies are used by advertisers to serve ads that are relevant. Switch off Marketing 3.  Out of Region. Region collapsed. Button collapsed. Functional 8. 

>> ALEX: This is a mess. I don’t even know where to begin on this.

>> SCREEN READER: Functional 8. 

>> AMBER: Why do you say that?

>> ALEX: It’s announcing that we’re going in and out of regions.

>> AMBER: Every accordion, that’s what these visually look like to me, has been tagged as a region.

>> ALEX: Pretty sure the region content that happens is supposed to be inside the accordion, not every accordion.

>> SCREEN READER: Button Collapsed. Functional 8. Expanded. Functional 8. These technologies enable us to analyze usage behavior in order to measure and improve performance. Switch off Functional 8. Cloudflare Region. Cloudflare. View Service Details button. Google AJAX region. View Service Details button. Google fonts. Region. View Service Details button. Google Play region. View Service Details button. Google Tag Manager region. Vimeo region. View Service. YouTube. Video recapture region. View Service Details button. Essential to content info landmark. Accept All button. Category. YouTube video region. Vimeo. Google AJAX. Cloudflare. Functional 8. Functional 8 button. >> AMBER:>> SCREEN READER:

>> AMBER: You should–

>> SCREEN READER: Marketing 3 region. Marketing 3 switch off. These technologies are used by adver–

>> ALEX: Oh, wait, hold on. Hold on. Let’s see. Did I just find the prob– Let’s see.

>> SCREEN READER: Out of region. Functional 8. Region. Expanded. Button. Out of region. Region collapsed. Switch off Marketing 3. These technologies are– Marketing 3. Button collapsed. These technologies are used by advertisers to serve ads that are relevant to your interests. Market. Button collapsed. Marketing 3. Out of region. Tab About. 

>> ALEX: Okay, so let’s start here again.

>> SCREEN READER: Tab and section. Categories property page. Marketing 3 region collapsed. These technologies are used by advertisers to serve ads that are relevant to your interests. Marketing 3 button collapsed. These technologies are used by advertisers to serve ads that are relevant to your interests. 

>> ALEX: That makes sense. No, these, this is bad, this is way too cluttered for one of this.

>> AMBER: Yes, so what I’m saying is there’s a div that has a role of region. There’s a button that can expand it. That one does seem like it’s using ARIA described by to reference the subtext, which is maybe good.

>> ALEX: It is. That’s a good thing.

>> AMBER: Yes, I think the region rule on every single one of these is just noisy. Like excessively noisy.

>> ALEX: You can have the region for the content within an accordion if you want to, but not everything should be a region.

>> SCREEN READER: Expanded. Expanded. Marketing 3 switch off. These technologies are used by advertisers to serve ads that are relevant to your interests. Double click. Add region collapsed. Views. Google Ads region collapsed. View Service Details button.  

>> ALEX: Let’s see what this does.

>> AMBER: Who’s one of those?

>> SCREEN READER: Current page. Usercentrics. Complimentary landmark. Close Layer button. Description of service. This is an advertising service. This service can be used to show advertisement to users. Processing company. Google Ireland Limited. Gordon House. 4. Data protection officer. Below you can find https. Data purposes. This list represent– List with 4. Analytics. Providing statis– Out of list. This list or list with 2. Tracking. Out of list. This list represent– List with 12– Cookie ID. Date and time of– Device info. Geographic. IP Address. Search term. Impressions. Online identifier. Browser. Referral URL. Interaction. Out of list. Legal basis. In the following, the required– List with 1. Out of list. Location of process. The primary processing. Out of list with 1. Out of list. Retention. The retention period. Data needs. List with 1. Data is anonym. Out of list. Transfer to third. 

>> ALEX: Lot of information.

Screen Reader: This service may– might trans– Find a list of countries. List with 4 items. 

>> AMBER: Yes. Do you know where you are?

>> ALEX: I assume I’m in a description modal for this service.

>> AMBER: Okay, yes, so it is another modal. I noticed this one didn’t tell you also that it was going to open a dialog and then the close button said something like close layer, which I thought was a little weird. I guess it’s because it’s a dialog layered over another dialog.

>> ALEX: I’m interested to see what happens once we do that.

>> SCREEN READER: Close Layer button. Dialog. Categories property page. Google Ads region collapsed. View Service Details button. 

>> ALEX: Well, focus return work, so.

>> AMBER: That was good.

>> ALEX: Rather surprised, but that is exactly what should happen.

>> AMBER: Yes.

>> SCREEN READER: Out of region. Content info landmark button. Deny. Button Save Settings. 

>> ALEX: All right. I want to try save settings. Let’s see what happens.

>> SCREEN READER: Unknown. Dialog. Privacy Settings. 

>> ALEX: Focus loss.

>> AMBER: Where are you?

>> ALEX: Nice.

>> SCREEN READER: Privacy settings. Content info. Complimentary. Privacy settings dialog. 

>> ALEX: All right. Reactivate the dialog.

>> SCREEN READER: Button privacy. Button privacy settings. Button privacy settings. Button. Button. Browser tabs toolbar. Privacy settings. Content info landmark. Privacy settings dialog. Button privacy settings. 

>> ALEX:>> SCREEN READER:Alex: Privacy Settings with a Privacy Settings button inside of it. Yes, don’t do this at home.

>> SCREEN READER: Dialog. Banner landmark link powered by Usercentrics. Link powered by User. Button close layer. Tab Selected Categories. Tab Services. Tab About. Region collapsed. Button collapsed. Marketing 3. 

>> AMBER: This one. Can I say something about that that I’ve noticed?

>> ALEX: Go ahead.

>> AMBER: I think part of why that one was especially weird and why the focus got lost when you closed it is this, I think, is an iframe, or there is an iframe that it puts with it with the way it’s– and then there’s like an aside tag. I don’t know. There’s just a lot of extra landmarks, which is maybe them trying to be more accessible. All of these regions and all that stuff and overthinking it.

>> ALEX: Yes, that’s a common problem. The thing about ARIA  is it’s a great thing, but it’s also really, really bad when you overuse it. I would much rather see people under use it than overuse it, especially they don’t know what they’re doing, which I think here is definitely not an untrue claim to make.

>> AMBER: The other thing, and of course we can’t talk about legally what you need or not, but I’ve noticed this one, it has those accordions. It also has tabs. I don’t know if you’ve noticed that, but there’s tab. This dialog has three tabs. There’s accordions inside the tabs and a whole bunch of extra text and a lot going on in it.

>> ALEX: Yes, it’s definitely overly engineered in my opinion.

>> AMBER: It was maybe created by an attorney. [laughs] We’ll give you as much information as you need.

>> SCREEN READER: Out of region. Content info landmark button. Deny. 

>> ALEX: But then–

>> SCREEN READER: Button Save Settings. Button Accept All. 

>> ALEX: Let’s just do an Accept All here.

>> SCREEN READER: Usercentrics. Mozilla Firefox private browsing. Usercentrics document. Design with link WordPress. 

>> ALEX: Then your focus gets dropped at the bottom of the website, so that’s so nice.

>> AMBER: So it should go to the top is where you would want to go?

>> ALEX: That would be worse.

>> AMBER: [crosstalk] first came? Yes.

>> SCREEN READER: Same page link. Skip to content. 

>> AMBER: I’m looking. I think that mostly covers stuff on this dialog. I inspected the code for the Tabs and they have what looks like appropriate ARIA 4 tabs.

>> ALEX: Yes, those seem good.

>> AMBER: Okay. All right, so that was Usercentrics, not the plugin, but the service. Then the next one up is called GDPR cookie compliance.

>> SCREEN READER: Main site document. Link GDPR cookie compliance. Document busy. About, colon, blank. Move GDPR cookie compliance. Document busy. Same page link. Skip to content. 

>> ALEX: All right, focus stays on skipped main content.

>> SCREEN READER: Same page link. Skip to content. 

>> ALEX: There’s nothing above it.

>> SCREEN READER: Banner landmark link. Current page. Move GD. Navigation land. Link. Sample. Out of list. Out of list. Main landmark. Heading Level 1 Home. Heading Level 2 plugin on the figure GDP link Moove agency. 4.5 out 5. 

>> ALEX: There’s nothing in the main content. Let’s just go ahead and jump to the bottom.

>> SCREEN READER: Out of frame. Out of figure. GDPR cookie. Banner complimentary landmark button. Close GDPR cookie banner. 

>> ALEX: And there it is.

>> AMBER: This one is a problem because it didn’t tell you there was a cookie notice and didn’t give you the opportunity to accept it.

>> ALEX: That is correct.

>> SCREEN READER: Content info landmark Moove GDPR cookie compliant link. Current page. Heading Level 2. Navigation landmark. List with 4 items. 

>> ALEX: Oh, there’s no heading in this banner either.

>> SCREEN READER: Navigation landmark. List with 4 items. GDPR cookie banner complimentary landmark. We are using cookies to give you the best–

>> ALEX: There is a complementary landmark though.

>> SCREEN READER: Content info landmark. GDPR cookie. 

>> AMBER: Do you want there to be a heading?

>> ALEX: It just helps with discoverability. Because right now, I would put the discoverability on this at 10%.

>> AMBER: Okay.

>> ALEX: This is so undiscoverable.

>> AMBER: A lot of people might miss it. Is the landmark labeled? Let me see. It does have an ARIA label for the landmark of GDPR cookie banner.

>> ALEX: Yes, so–

>> AMBER: That’s probably the only way you would find it.

>> ALEX: Probably. I doubt most people would really look down this far for a cookie banner anyway.

>> SCREEN READER: We are using– You can find out more about which cookies we are using or switch them off in. Setting, setting, setting. Button Accept. Button Reject. Menu button. Submenu settings. Button, button. Settings, settings, settings. 

>> AMBER: That setting, setting, settings is, I guess I didn’t fix some short code typo that they have or something. That’s just text that’s written settings three times.

>> SCREEN READER: Button Accept. Button Reject. Menu button. Submenu settings. Button Close GDPR cookie. Button close G. Menu button. Submenu settings. 

>> ALEX: Okay, so menu settings. Let’s see what we have.

>> SCREEN READER: Dialog window. Press Escape to close. Dialog. Document. GDPR. 

>> ALEX: Yep, this is why we got to be careful with our ARIA, has pop up. Somebody passed the wrong value into it in calm  of the submenu.

>> AMBER: Instead of dialog.

>> ALEX: Correct.

>> SCREEN READER: Button close GD. Button Close GDPR cookie settings. Graphic Moove GDPR cookie compliance. List with 5 items button privacy overview. Button Strictly Necessary Cookies. Button Analytics. Button Marketing. Button Cookie Policy. Out of list link powered by GDPR cookie compliance. Privacy over. Link powered. Privacy overview. This website uses cookies and provide you with the best user experience possible. Cookie. Information is stored in your browser and performs or return to our website and helping. Most interesting and useful. Button Enable All. Most and return to our website and helping our team to understand which sections of the website you find most interesting and useful. Button Enable All. Button Reject All. Button Save Changes. Button Save Changes.  Button. Button. Most interesting. List with 5 items. Cookie Policy button. Out of list link. Powered. Cookie policy. 

>> AMBER: Can I tell you something about that real quick? Oh, maybe you figured it out.

>> ALEX: Yes.

>> AMBER: Did you figure out what all those buttons on the– well, visually they’re on the left for me, but earlier in the dialog for you are doing and what they are?

>> ALEX: Yes, they should be tabs, tabs or some form of the disclosure widget, because these are just– I thought I knew what they did and then I figured it out as just more– over the years, you just get used to bad accessibility and this is kind of what this is.

>> AMBER: Yes, so they’re missing all of the tab markup that you would need.

>> ALEX: This is very, overall, just really badly done structure.

>> AMBER: Inside, not the tab that you’re in, but in the other tabs, there are toggle– Well, I’m going to say they visually look like toggle buttons.

>> SCREEN READER: List with 5 item. Marketing button. 

>> AMBER: I’m not sure what they’ll sound like.

>> SCREEN READER: Button Cookie. Out of list link. Powered by GDPR cookie compliance. Marketing. This website uses the following additional cookies. List the cookies that you are using on the website here. Enable or disable cookies. Enabled. Button Enable All. Button Reject All. Button Save Changes.

>> ALEX: Got to love how we can’t use proper form controls.

>> SCREEN READER: Button Enabled. 

>> AMBER: Yes, so what is that reading as to you?

>> ALEX: Nothing.

>> AMBER: Are you able to toggle it?

>> SCREEN READER: Enable Disabled. 

>> ALEX: Yes, I wouldn’t be surprised if that’s just some span or something.

>> AMBER: Yes, it looks like it’s a checkbox, but they put display none. Well, they put display none on the actual input and then they’ve used CSS to try and style it. When you’re actioning it, are you using the space bar on the label?

>> SCREEN READER: Enable Enabled. 

>> ALEX: Yes, so that’ll still work. It’s just the actual input itself. Let’s see. Can this–

>> SCREEN READER: This website uses privacy overview. This web information return to– Most interesting. Button Enable All. Enable. Enable All button. Reject All button. Save. Close GD. 

>> ALEX: You can’t even tab inside this. Like none of the tab stats are red.

>> AMBER: It’s because when they put the display none on a checkbox– I’ve seen people do this with filters when they’re trying to make the filters look fancy. When you put a display none on the input, now it’s no longer in tab order, so you can only get to it with the arrow keys.

>> ALEX: This is the worst one we’ve seen tonight so far.

>> AMBER: Yes, I also noticed none of those headings, which visually look like headings, they’re not reading out for you as headings.

>> ALEX: Oh, they’re not headings.

>> AMBER: Yes, they’re just spans that have been styled to look like a heading, but they aren’t using a heading tag.

>> SCREEN READER: Button Save Changes. 

>> ALEX: Yes. There’s a lot of work that needs to be done on this one, that’s for sure.

>> SCREEN READER: Button Reject All. Button Save Changes. 

>> ALEX: All right, let’s see what happens. Save.

>> SCREEN READER: Menu button. Submenu change. Cookie settings. Content. Menu button. Submenu change. Cookies.  

>> ALEX: One thing, make it right. Focus goes back to the change settings button.

>> AMBER: To that button at the bottom?

>> ALEX: Yes. That’s incredible.

>> SCREEN READER: Menu button. Submenu change. Cookies. Content and menu button. 

>> ALEX: I wonder if that’s actually what they planned or if it’s just luck of the draw since the rest of the DOM’s been removed.

>> AMBER: Yes. I don’t know if it was just putting you at the bottom.

>> ALEX: I know. That’s kind of what I was saying.

>> AMBER: Really, it’s weird, though, because you got that from the banner, so I feel like when the banner– Tell me if I’m wrong. I think when the banner is first there, if you had locked on it, right? You then were like, okay, I have to interact with this before I can reach the website, the first time it should return you to the top, it should only return you to this button at the bottom if you’ve used that button to open it.

>> ALEX: Correct.

>> AMBER: Because now you’d have to jump back to the top to be able to actually use the website.

>> ALEX: Correct.

>> AMBER: This one says it is optimized for WCAG and ADA accessibility guidelines on its bullion page.

>> ALEX: Oh, that might be the worst lie we’ve heard tonight. Wow. There’s not even a world where that’s a little bit true.

>> AMBER: Yes. I think the thing that’s so hard for me about that stuff just, in general, is it always makes me frustrated because I’m like, but how, explain how you tested it or what you did? I like it a little better when a plugin has a whole page where they talk about it. If they just have one sentence, then I’m like, “I don’t know if this is true or not.” [chuckles]

>> ALEX: That and the fact that– what is it? Something like 40% of accessibility issues can be caught with automated tools. The accessibility on this would have been much better if an automated tool was actually used, which it clearly wasn’t.

>> AMBER: Yes, I mean, I don’t know. That’s a good question. I don’t think automated tools like you can ask and Axe says they catch so much and we use Axe rules in our plugin. It wouldn’t tell you, “Hey, you styled these things visually like tabs. You need to add tab markup.” I don’t think we’re there yet to be able to say-

>> ALEX: Probably would not.

>> AMBER: -“We think this is that.” A lot of that kind of stuff would probably still be missed even with an automated tool.

>> ALEX: Surely, it would have caught the display none on the input, at least I would hope so.

>> AMBER: Yes, I would hope so, too. Think people don’t always realize that when you display none something, it hides it from a screen reader too. They think they’re just visually like probably that should have been positioned off the screen or something, and then you still would be able to get to it. Although, I don’t know, because if you’re a keyboard user, it would have to come into focus when you tab down to it, like skip link or something.

>> ALEX: Yes, something like that. Just why, why do all that?

>> SCREEN READER: Main site docu. 

>> AMBER: All right, so our next one is real cookie banner.

>> SCREEN READER: Link real cookie banner. E. Document busy. About, colon, blank. Real cookie banner. Document busy. Same page link. Skip to content. 

>> ALEX: All right, skip, the main content link is where we land.

>> SCREEN READER: Dialog privacy preferences. 

>> ALEX: We have a privacy preferences dialog. It does not gain initial focus.

>> SCREEN READER: Privacy preferences. 

>> AMBER: How did you get to it or find it?

>> ALEX: I moved up one element. Again, we have another situation here where content is loading after the page loads. Developer’s job to manage focus here.

>> AMBER: Yes, I would know that on these fake websites there’s no performance plugins or anything. It’s not, oh, the fault of performance plugin that is delaying JavaScript or anything. There’s literally nothing doing that.

>> SCREEN READER: Navigate. Skip to consent. 

>> ALEX: Let’s just get out of this dialog so we can hear it read again.

>> SCREEN READER: Link skip to consent choice. Link skip to consent. Heading Level 2. 

>> ALEX: Oh wow. They actually trap focus in this. Let’s refresh.

>> SCREEN READER: Busy. 

>> AMBER: That’s good.

>> SCREEN READER: No cookie banner document busy. Same page. Dialog privacy preferences. 

>> ALEX: All right. Here we go.

>> SCREEN READER: Privacy preferences dialog. We use cookies and similar technologies on our website and process your personal data, e.g., IP address, for example, to personalize content and ads to integrate media from third-party providers or to analyze traffic on our website. Data processing may also happen as a result of cookies being set. We share this data with third parties that we name in the privacy settings. The data processing may take place with your consent of on the basis of a legitimate interest, which you can object to in the privacy settings. You have the right not to consent and to change or revoke your consent at a later time. This revocation takes effect immediately but does not affect data already processed. For more information on the use of your data, please visit our privacy policy. Privacy preferences dialog. We use cookies and similar technology–

>> ALEX: Okay, it reads.

>> SCREEN READER: Link skip to consent choices. Heading Level 2. Privacy preferences. We use cookies and similar technologies on our website and — IP address, for example, providers or cookies being set. Blank. The data processing which you can revoke your consent, data already processed. Link policy. Some services process personal data in unsafe third countries. By consenting, you also– Data processing of labeled services per Art. 49 (1) (a) GDPR, with risks like inadequate legal remedies, unauthorized access by authorities with unauthorized transfer. You are under 16 years old? Then you cannot consent. Guardians to agree to these service. By accepting all services, you– functional, data– Vimeo. Functional. Data processing in unsafe third countries. Vimeo. Functional. Gravatar. Functional. Data processing in unsafe third countries. Google Analytics. Statistics.  And Hotjar. Marketing. Data processing in unsafe third countries to be loaded. These services are divided into groups according to their– Button. Set privacy settings individually. Button continue without consent. Button Accept All. Link privacy policy. Link privacy policy. 

>> ALEX: Okay, same note here. I would like to see Privacy policy linked above these buttons. That way it’s more discoverable.

>> AMBER: I have a question for you about that, because it was linked in a paragraph of text. This one has probably the longest default. I didn’t change the text. This is whatever the default was. This one has the longest default. It’s like three or four different paragraphs, and it was linked in one of those paragraphs. Is that sufficient?

>> ALEX: Yes, probably is. If someone ever takes the time to listen to all this.

>> SCREEN READER: Skip to consent choices link. Privacy policy. Revoke data already processed. For more information on the use of your data, please visit our link privacy, link policy. 

>> ALEX: Yes, I mean it’s there. It’s discoverable. Guess I really can’t call that an issue.

>> AMBER: Okay.

>> SCREEN READER: Privacy settings individually button. 

>> ALEX: All right, let’s go to set privacy settings.

>> SCREEN READER: Individual privacy preferences. Individual privacy preferences dialog will use cookies and similar technologies on Heading Level 2 individual privacy link. Skip to consent. Heading Level Button. Continue without consent. Heading Level 2. Individual Privacy Preferences button. Button Accept All. Button Save Custom Choices. We use cookies and similar to address for providers or cookies being– Blank. The data process which you can revoke data link po– Blank. Below you will find information some serve– data process remedies, unauthorized, you are– guardian– grouping– and essential– technical– button– out of functional, out of grouping and button collapsed. Just technically necessary services. These services cannot be objected to. Button collapsed. Show essential services are required for the basic functional– 

>> ALEX: Sorry, this is really long and hard to navigate through.

>> SCREEN READER: Individual privacy preferences. Essential. 

>> AMBER: It’s because of how much text there is?

>> ALEX: Yes, that’s not broken up in any way, so there’s no way to– Let’s see if the skip link up here works.

>> SCREEN READER: Out of grouping. Link skip to consent choices. 

>> ALEX: Skip the consent choices.

>> SCREEN READER: K. Accept All button. 

>> ALEX: Oh. Yes, I don’t think they plan this very well.

>> SCREEN READER: Button Save Custom Choices. We uses cookies–

>> AMBER: Oh. Where did you think the skip link would take you?

>> ALEX: In this context, I was hoping it was going to take me to the actions below where I could customize what I wanted, but–

>> AMBER: It just took you to the buttons that already existed.

>> ALEX: Yes, and there’s no headings or ways to easily navigate this, so.

>> SCREEN READER: Address. Providers. Cookies. Blank. 

>> ALEX: People are getting to see right now what it’s like to not have vision and skim for what you’re looking for.

>> SCREEN READER: The data processing which you can revoke your data already link policy. Blank. Below you will find information about each some services process, data processing of remedies. Unauthorized. You are under 16. Guardians. Grouping. And individual privacy preferences. Essential. Essential services are required for the basic functionality of the website. They only contain technically necessary services. These services cannot be objected to. Button collapsed. Technically necessary services. These services cannot be objected to. Button collapsed. Show service information. Show service information. Essential button collapsed. Hide service information. Essential expanded. Expanded. 

>> AMBER: Hold on. Essential, that would be an example of something that should be a heading because you were trying to find headings.

>> ALEX: I would like it to be a heading. Now, WCAG doesn’t tell you you must have headings, so not technically a failure, just a structural improvement.

>> SCREEN READER: Button expanded essential. Checkbox unavailable checked. Real cookie banner. Purpose. Real cookie banner asks website visitors for consent to set cookies and process personal data. For this purpose, a UUID, pseudonymous identification of the user, is assigned to each website visitor, which is valid until the cookie expires to store the consent. Cookies are used to test whether cookies from which service transparency purposes– the collected consent is fully– groups to which the visitor has consented, and if consent standard settings at the time, area at the time of consent, use on legal provision of terminal equipment of the user provider. Real email. Link. wpadmin@instawp.com. Privacy policy. Link. Blank. Button collapsed. Show more details. Technical cookie definitions. Real cookie banner. Out of grouping, grouping individual privacy preferences. Functional. Functional services are necessary to provide features beyond the essential functionality such as prettier fonts, video playback or interactive web 2.0 features. Content from, e.g., video platforms and social media platforms are blocked by– agreed to, this content– Button collapsed. Information functional. Out of grouping, grouping. Individual privacy preferences. Out of grouping, grouping. Button collapsed .Hide service information. Functional expanded. Expanded. YouTube. Checkbox not checked. Purpose. YouTube. Enables the embedding. Hide service–

>> AMBER: Can I ask you a couple questions?

>> ALEX: Sure.

>> AMBER: One thing I noticed on this this one that was a little different from the one before– What was it? Oh, Usercentrics where they had something that was just disabled and they ARIA, they made it ARIA hidden so you couldn’t find it. It seemed like on the Essential where there was a checkbox that you cannot uncheck, you were still able to reach it. Was that just with the arrow keys that you were able to reach it?

>> ALEX: Yes. We can test this though real quick.

>> SCREEN READER: Individual privacy preferences. Essential grouping. Show more details. Technical cookie definitions. Real cookie banner button collapsed, https [ybt 02:09:19] link. Hide service information. Essential button expanded. Privacy policy link. 

>> ALEX: Yes, you still can’t get that checkbox with tab alone.

>> AMBER: But that would be expected though, right? As long as you can reach it with the arrow keys. I think the problem with Usercentrics was it was totally removed because they put ARIA hidden equals true on it, so you couldn’t even get it with the arrow keys.

>> ALEX: Although that’s annoying to me, that’s what I don’t like about the HTML5 disabled attribute, because sometimes there’s still meaningful context and the tab key just messes it. You’re essentially trapping the user into one way of navigating. It’s a specification I would love to see change, but probably won’t change anytime soon.

>> AMBER: Okay.

>> SCREEN READER: Individual admin instawp http. Show more details. Technical cookie definitions. Real cookie banner button collapsed. Individual privacy preferences. Functional grouping. Individual privacy preferences. Functional. Functional services are necessary to provide features beyond the essential functionalities such as prettier fonts, video playback or interactive web 2.0 features, content from, e.g., video platforms and social media platforms are blocked by default, and can be consented to. If the service is agreed to, this content is loaded automatically without further manual consent. Hide service information. Functional button expanded. YouTube. Checkbox not checked. Purpose. YouTube. Enables the embedding of content published on youtube.com into websites to– Hide service information. Functional button expanded. YouTube. Checkbox not checked. Purpose. 

>> AMBER: Was it reading all of that as the description for the functional input?

>> ALEX: Yes, it was. It sounded like the entire section is wrapped in something, almost like some type of legend.

>> AMBER: This is a field set and there is a legend, although I can’t visually see that. It looks like it’s positioned off screen, and then the input, I don’t see it having ARIA described by on it, but not 100% certain why it read everything out. [crosstalk] Do you think that’s the problem or do you think it’s okay?

>> ALEX: I mean if you want to make absolutely sure that nobody misses content, that’s the way I do it. If you lose context in this than you’re trying to.

>> AMBER: Is it ever overwhelming to have that much read out or is that okay?

>> ALEX: Yes, like if you have the expanding button inside of a legend, fills it like this, then you don’t have to associate ARIA describe by or label or add even more specific information like you already know what section you’re in. I mean, like I said, no. This is so much information in so many different ways, means of navigating this. This is for sure the closest to ARIA spec we’ve seen denied, except for the not focusing initially.

>> AMBER: Oh, so this one seems like the best so far.

>> ALEX: I would definitely say that it has the least issues overall.

>> AMBER: Awesome. Do you want to try toggling some of these on and make sure that they announce?

>> SCREEN READER: +1 650 253. YouTube. Checkbox not checked. Purpose. YouTube. Enable. Checked. +1 650 253 0000 link. dpo-google@google.com link, https://support.google.com link, https://business.safety.google/privacy. Show more details. Data processing in third countries. Safety mechanisms for data transmission and technical cookie definitions. YouTube button collapsed. 

>> ALEX: Yes. Tell me that doesn’t give you enough context. That’s a little crazy.

>> AMBER: If you were to expand that, you get even more– I will say-

>> SCREEN READER: Hide more details. Data processing in third countries. 

>> AMBER: -this plugin is made by a team out of Germany, and my understanding is Germany has some of the strictest enforcement on GDPR, like even Google fonts and stuff are illegal there. [chuckles] Maybe that’s why there’s so much verbose language.

>> ALEX: You definitely won’t miss anything.

>> SCREEN READER: Hide more details. Show more details. Vimeo. Checkbox not checked. Purpose. Vimeo enables the embedding of content published on vim–

>> ALEX: All right, let’s see what happens once we save.

>> SCREEN READER: Out of grouping link. Privacy policy. Grouping. Button collapsed. Information. Market. Advertisements across multiple page. Marketing. Serve individual privacy. Out of grouping, grouping. Button collapsed. Statistics. 

>> ALEX: Okay, so this is a problem. I hate when people do this. It’s a personal thing of mine. It doesn’t fail anything, I don’t think, but when you have a save button on the top after you’ve made it through all this content, that is one of the most annoying things in the world. Don’t do it.

>> AMBER: Could they put one at the top and at the bottom?

>> ALEX: Yes, but do not put one at the top. You just asked me to read through all of this and now I have to navigate all the way back through this for a Save button. Not acceptable.

>> SCREEN READER: Out of grouping link. Skip to consent choices. Accept All button. Continue Without Consent button. Save Custom Choices button. 

>> ALEX: All right. Save custom choices. It’s very clear.

>> SCREEN READER: Same page link. Skip to content. 

>> ALEX: Focus goes to skip to main content.

>> SCREEN READER: Same page link. Skip to content. Banner landmark link. Current page. Real cookie. 

>> ALEX: There’s nothing else above it, so.

>> SCREEN READER: Navigate link sample page. 

>> ALEX: Won’t you save? Is that it?

>> AMBER: Yes, this one didn’t have at least that I could see some sort of floating button to change. I could have missed the setting now, [chuckles] but I didn’t see that. This one doesn’t have a floating you can go change it now that you’ve closed it.

>> ALEX: Yes, I definitely feel like that that’s something that if doesn’t exist today would be useful to add. Just. I mean, there’s a lot of people doing too many things these days and they get distracted and everyone needs a way to revisit.

>> AMBER: Yes, well, or as we saw on some of the other ones, you didn’t realize it was going to close, and so there are situations where you might accidentally close it without realizing, and you want to go back and change because it didn’t do what you wanted it to do.

>> SCREEN READER: Out of list. Out of list. Content info land. 2025 Navigation. 

>> ALEX: There’s no-

>> AMBER: Again–

>> ALEX: -for screen readers either, so just ruling that out.

>> SCREEN READER: Out of list. Same page. 

>> AMBER: Again, I might have missed a setting on that, but I did not see one. They have a whole accessibility page, and they said that they are working to provide an inclusive user experience by complying with European Accessibility Act and WCAG 2.2 Level AA standards supported by an accessibility score feature to ensure all design settings meet legal and user-friendly requirements. I did notice in there in the customizer, that’s what you use for them, it does have some sort of accessibility checking like color contrast checking because people can choose their own colors and things like that.

>> ALEX: Definitely not bad. I mean just get a couple structural issues fixed and the focus issue fixed. It’s not a bad solution.

>> AMBER: The next one is cookie admin.

>> SCREEN READER: Main site link. Cookie admin. Cookie consent banner. 100K. Opens a new window. Document. About, colon, blank. Cookie admin. Document busy. Same page link. Skip to content. 

>> ALEX: Skip to main content is initial focus.

>> SCREEN READER: Same page link. Skip to content. Banner landmark link. Current page. Cookie admin. 

>> ALEX: Let’s go to the bottom of the page.

>> SCREEN READER: Link powered by. Button Accept All. 

>> ALEX: And there it is.

>> SCREEN READER: Content info landmark. Cookie admin link. Current page. Heading Level 2. Navigation landmark. 

>> ALEX: There is no heading.

>> SCREEN READER: Navigation landmark list with no next landmark. 

>> ALEX: There is no landmark to find this. Okay,  so we found one really bad now.

>> SCREEN READER: Same page link. 

>> AMBER: This one in the GDPR compliance, hard to find.

>> ALEX: Oh, this. This one takes the cake. There’s not even a landmark. I mean you would have to be really looking for this to find it.

>> AMBER: Yes, they have something that looks like a heading but it’s not, it’s just a paragraph.

>> ALEX: In my professional opinion, I’d say 5% chance of finding this, maybe.

>> SCREEN READER: Same. Same. Out of. Design with link. We respect your privacy. Cookies help us improve your experience, deliver personalized content and analyzed traffic. You can choose which cookies to allow by clicking Customize. Click Accept All to consent or Reject All to decline non-essential cookies. Button customize. 

>> ALEX: Let’s try customize.

>> SCREEN READER: Button Reject. Button Accept All. Link powered by. Link powered by.

>> ALEX: They can’t even make their own Power By link accessible unless that’s all it says.

>> AMBER: Oh, no. There is a image there for their logo that I’m guessing is an SVG without a title attribute.

>> ALEX: I’m not going to lie, this is pretty embarrassing. I mean if you can make your own Power By link not accessible, that takes talent. [laughs]

>> SCREEN READER: Button customize. Cookie admin. Mozilla Firefox private browsing. Cookie admin document. Region. Functional cookies support features like– Blank.  

>> ALEX: And yet we get a region. Okay.

>> SCREEN READER: Filled right-pointing pointer. Functional cookies. Out of region. Region adjustments. 

>> AMBER: Instead of a dialog.

>> SCREEN READER: Necessary cookie. Blank. Filled right-pointing pointer. 

>> ALEX: I’m not sure what’s going on here. Focus landed in the middle of this, so this is not good.

>> SCREEN READER: Out of. Button. Personalized your cookie. Content info landmark. Personalized your cookie preferences. 

>> ALEX: This is the top.

>> SCREEN READER: Button multiply. 

>> ALEX: Multiply’s got to be the Close button.

>> AMBER: It’s just a Dev.

>> SCREEN READER: Dialog cookie. 

>> AMBER: Oh, yes, the Close button.

>> ALEX: A dialog.

>> SCREEN READER: Button Mult– Dialog. Cookie Preferences. O. C. O. 

>> ALEX: What is this?

>> SCREEN READER: Region. Field right point. Out of region. Dialog. Cookie preferences. Cookie preferences dialog. Cookie preference. The experience or disable these cookies. We use cookies to ensure smooth nav– Detail cookies, more functional. We also– relevant– or disable these. Experience. Button Show More. Button Show more. Button Show more. Experience. 

>> ALEX: I’m so confused. I don’t even know what this is.

>> AMBER: This one also has a Show More button. What does it do?

>> SCREEN READER: Button Show More. Cookie preferences dialog. 

>> ALEX: Oh, the dialog lose focus.

>> SCREEN READER: Cookie preference experience. Button Show More. Button Show more. Experience or this relevant. We also– Cookies. Detailed. We used cookies. We used cookies. We used cookies.

>> ALEX: Apparently nothing.

>> AMBER: I do see that the Show More button visually hit, but I don’t think it actually got removed-

>> SCREEN READER: Button show more. Button show. Experience. 

>> AMBER: -like the other one. Oh no, this one changed. You can’t trigger that?

>> SCREEN READER: Button Show More.  Out of button. Dot, dot, space, button, S, H. Experience. Button Show More. Experience. Show More Button. Show Less. 

>> SCREEN READER:>> ALEX: Okay.

>> AMBER: What happened?

>> ALEX: The button wasn’t in line, so I selected the dialog text which made the dialog lose focus, instead the button get activated.

>> AMBER: Oh. Okay.

>> SCREEN READER: Button Show Less. Button Show Less.

>> ALEX: Still, the guess of text appeared above the button because I don’t know what happened other than now I’ve got Show Less.

>> AMBER: Yes, so the text appeared above the button and it changed the label on the button which we talked about. Maybe in some scenarios that’s okay, but it didn’t shift your focus to the new text. You’d have to go find it.

>> ALEX: This is also okay. I mean you can actually just make the text show below the button and that’s acceptable, but definitely not this.

>> SCREEN READER: We use cookies. Detailed. Cookies. More functionality. We also use relevant. Or disable this experience. Button Show Less. Button Show Less.

>> ALEX: Okay, so it’s just a text expander. I mean talk about overly engineered.

>> AMBER: I think they do this when they’re trying to not make– like they’re worried that it’s gonna be too tall for the window. Although I noticed that in your browser the modal still has a scroll bar on it even with the text collapsed because there’s just so much in this dialog.

>> ALEX: Overly engineered.

>> SCREEN READER: Experience. Button Show. Show Less button. The experience. Show cookie preferences. Reject All button. Region effect. Advertisement. Cookie content info landmark. Same. Same. Same. Navigation. Same. Page. Same. Same, same. Out of. Design with. Personalize your cookie. Button Multiply. Dialog Cookie Preferences. Region. Filled right-pointing pointer. Necessary cookie standard. Blank. Necessary cookies enable essential site features like secure logins and consent. Adjustments. Out of region. Region. Filled right-pointing pointer. Functional cookies. Blank. Functional cookies support features like content sharing on social media collecting feedback. 

>> AMBER: Wait, wait, go back.

>> SCREEN READER: Blank. Filled right-pointing pointer. 

>> AMBER: Did you–

>> SCREEN READER: Functional cookies.

>> ALEX: Oh, yes. I mean, it’s just another day in icon world.

>> AMBER: [laughs] Obviously, I’m guessing those should be hidden and you don’t need to hear about those.

>> ALEX: Probably so.

>> AMBER: Is it telling you anything about– it’s not telling you that it is a functional element?

>> ALEX: Oh, no, it isn’t. I just assumed it was because that’s generally where you get those strange icons.

>> AMBER: It also didn’t tell you that it’s currently collapsed? That button is a control, except it’s not a button.

>> ALEX: Yes. I’m not surprised.

>> SCREEN READER: Enabling out of region. Region. Filled right-pointing pointer. Analytical cookies. 

>> ALEX: Let’s see.

>> SCREEN READER: Blank. Analytical cookies track. Blank. Filled right. Space. A. N. A. Blank. Analytical. Bounce rate. Out of region. Region. Filled right-pointing pointer. Advertisement cookies. 

>> ALEX: It did open.

>> SCREEN READER: Out of region. Blank. Filled right-pointing pointer. Analytical cookies. 

>> AMBER: No.

>> ALEX: Analytical cookies.

>> SCREEN READER: Filled right-pointing pointer. Blank. Analytical cookies track visitor interaction. 

>> AMBER: Oh, there we go. It did open. What did you do?

>> ALEX: I had to focus on the icon and get it to open.

>> SCREEN READER: Bounce rate and traffic source. Duration. Session. UTM Medium. Duration. Session. UTM Term. Duration. Session. UTM Content. Duration. Session. UTM Campaign. 

>> ALEX: If these are controls, they’re totally inaccessible.

>> SCREEN READER: Duration. Session. GCLID. Duration. Session. Handle Original Ref. Duration. Session.  Handle Original Ref. 

>> AMBER: Oh, let me look. Is it saying there button? It’s not saying a button, right?

>> ALEX: No, it isn’t. It’s just confusing.

>> SCREEN READER: Duration. Handle Landing Page. Duration. Session. 

>> ALEX: Nothing in here is accessible, so you start to wonder, but it’s also not accessible.

>> AMBER: I think it’s telling you what the cookies are that it’s going to set and how long they’re going to last.

>> SCREEN READER: Handle Landing Page. 

>> ALEX: Yes, that makes sense.

>> SCREEN READER: Duration. Handle IP. 

>> AMBER: You know what I think? Tell me what you think about this. Wouldn’t this be better as a table? Like with a header of cookie name and then another column header of duration?

>> ALEX: Definitely.

>> AMBER: Yes, versus it’s the Devs.

>> ALEX: It would add structure to the data.

>> SCREEN READER: Duration. Handle Ref. Duration. Handle URL. Duration. Out of region. Blank. Filled right-pointing pointer. Advertisement cookies. Blank. Advertisement cookies deliver. Effectiveness. Out of region. Button Reject All. Button Save. Preference region. Advert. Filled right-pointing pointer. Advertisement cookies. Filled right-pointing space. A. D. A. Space. Filled right. Blank. Advertisement. Effective. None. Out of region. Button Region. Effectiveness of ad camp. None. Out of region. Button Reject All. Button Save Preferences. Button Accept All. Save. Accept All button. 

>> ALEX: Don’t actually know how to toggle any of these preferences since nothing’s interactive, but–

>> AMBER: Oh, you weren’t able to get to the toggles?

>> ALEX: No.

>> AMBER: Let me see. Oh, same deal. These toggles also have a display none on the input and there’s no label. It’s an implicit label with the label tag wrapped around the input, and the input is hidden but there’s nothing in the label, so that’s why you can’t accept them.

>> ALEX: That is just bad. I mean if we manage to get something worse than this tonight, I will be very sad.

>> SCREEN READER: Accept All button. Powered by Link. Accept. Save Preference button. Cookie Admin document. 

>> ALEX: And page loses focus as I thought it would.

>> AMBER: Instead of going to the skip link.

>> ALEX: Going anywhere would have been nice. This is just total focus loss.

>> SCREEN READER: Content info landmark. Designed with link. 2025. 

>> AMBER: All right, so cookie admin tell us it is ADA, EAA, so European Accessibility Act and WCAG compliant.

>> ALEX: Oh, it is most certainly none of those things.

>> AMBER: [laughs] All right. Do you have a little bit of time to go past 7:30, Alex?

>> ALEX: Sure.

>> AMBER: Okay, because I do think we have our captioner until 8:00 tonight. If you’re good with that, we have a couple more that we can do. There are two more that have said something about accessibility, and then I have three that haven’t.

>> ALEX: Oh, I always want to look at the ones that have said something about accessibility.

>> AMBER: Okay, so the next one then is Cookie Notice.

>> SCREEN READER: Link. Termly. G. Link. Cookie Notice, Compliance for GDPR/CCPA. Document busy. About, colon, blank. Cookie Notice Compliance for GDPRC/CCPA. Document busy. Same page link. Skip to content. 

>> ALEX: Skip to Main Content, Initial Focus.

>> SCREEN READER: Same page link. Skip to content. Banner landmark link. Current page. Cookie navigation landmark. List with– 

>> ALEX: Let’s go to the bottom of the page.

>> SCREEN READER: Out of list. Out of list. Dialog. Level to decide for which purposes we may use and share your– The best– Your data, your content info. 2025. Design. Dialog. Your data is your property and we support your right to privacy. 

>> ALEX: All right, we have a dialog here that did not gain focus and then the see last element in the DOM, not a great start.

>> SCREEN READER: Your data is your property and we support your instawp.xyz. Button Expand Toggle. Button Unavailable Download Consent. Button Protection Status On. Button Close Cookie Compliance. Your data is your property and we support your right to privacy and transparency. To provide you with the best experience on our website, we use cookies or data access level. Private. Data access level to decide for which purposes we may use and share your data. Private. Balanced. Personalized. Highest level of privacy. Parties to ensure highest level of privacy. Data access for necessary basic operations only. Data sharing with third parties to ensure the site is secure and works on your device. Button Save my Preferences. List with 1 item. Button Customized. Out of list. List with 2 items. Button Privacy Policy. Button Do Not Sell. Button Privacy Policy. Button Do Not Sell. 

>> ALEX: Okay. Don’t know what to think about this.

>> AMBER: What do you mean?

>> SCREEN READER: Out of. Out of. Parties. Highest level of privacy. Data access for necessary basic operation. Personalized. Balanced. Private. Data Access Level to decide for– Private. 

>> ALEX: I can’t tell if these are-

>> SCREEN READER: P. 

>> ALEX: -telling you about categories or if you can select these as presets.

>> AMBER: Okay, so I struggled a little bit with this one. Weirdly, they visually look like tabs to me. When you click one, they change content below them. I think, functionally, they are tabs except for I think when you select one, it is actually saving something as if it were an input and it’s coded as an input. Does not have display none, it has different styles on it. The labels I think are weird. Private balance personalized? I can’t remember what the other options. Oh, there was one where it was like-

>> SCREEN READER: Highest level of privacy. Data access for necessary basic operations only. 

>> AMBER: -Gold, Silver, Bronze-

>> SCREEN READER: Data sharing with third parties. Button Save my Preferences. 

>> AMBER: -like very ambiguous labels.

>> SCREEN READER: List with one item. Button Customize. New. 

>> ALEX: Then what is customized? I don’t–

>> SCREEN READER: Out of– Parties. High. Personalized. 

>> ALEX: This is–

>> SCREEN READER: E. High. Personalized. Radio button checked, 3 of 3. 

>> ALEX: Oh, these are hidden radio buttons. What did they do to make it inaccessible?

>> AMBER: Did you get the extra information explaining what personalized means?

>> SCREEN READER: Blank. Highest level of personalization. Data access to make ads and media more relevant. Data shared.  

>> ALEX: I have to go find it. I didn’t announce.

>> SCREEN READER: Third parties may– Button Save my Preferences. 

>> AMBER: Yes, because there’s no ARIA described by.

>> SCREEN READER: No previous radio. List with one item. Customized. List with two. List with one item. Customized button. 

>> ALEX: Customize.

>> SCREEN READER: Out of list. Button Save my Preferences. 

>> AMBER: See how confusing this gets?

>> SCREEN READER: List with– Out of list. Button Private. Button Privacy. Out of list. Instawp.xyx. Button Expand Toggle. Unavailable. Download. Button Protect. Button Closed. Private. Blank. Balanced. Personal. Blank. Highest level of personalization. Data accessed to make ads with third party. Consent preference. Use the toggles. Basic operation. This type of sharing is necessary. Secure and working. Data accessed. List with two items. Anonymous data like browser name and version. Pseudonymous data like authentic. Out of list. Content Personalization. When enabled you allow us to.–

>> ALEX: Well, it said these were toggles and the text before it which these are definitely not least a screen reader user, so.

>> SCREEN READER: Deliver personalized. Data accessed. List with three items. Anonymous. 

>> AMBER: They’re not announcing as toggles. Are you able to change them? Could you turn off content personalization?

>> SCREEN READER: N. Your data is your property and we support your right to privacy and– Content. Dialog. Your data is your–

>> ALEX: Dialog lost focus. That’s cool.

>> SCREEN READER: Your data is your property. Instawp.xyz.

>> AMBER: You did turn it off. [laughs] 

>> SCREEN READER: Button Expand. 

>> AMBER: It didn’t tell you you turned it off.

>> SCREEN READER: Button Unavailable. 

>> ALEX: It was too busy losing focus.

>> SCREEN READER: Button Protection Status On. Button Closed Cookie Compliance. 

>> ALEX: Yes, this is not great either. I would put it may be slightly better than the last one. That’s not a complaint.

>> AMBER: I was wrong. Now that we’re on this page and I see it, they did not say anything about accessibility, so they did not promise accessibility.

>> ALEX: I’m glad.

>> AMBER: Yes. What else should we look at on this one? Oh, I guess when you close it, where does your focus go?

>> SCREEN READER: Save my Preferences button. Dialog. 

>> ALEX: Back to the dialog.

>> AMBER: Back to what dialog?

>> SCREEN READER: Dialog. Blank. Content info landmark. Designed. Dialog. 

>> ALEX: The dialog that you probably can’t see, but it synapses the dialog.

>> SCREEN READER: Dialog. Dialog. [crosstalk] 

>> AMBER: The button that opens and closes it-

>> SCREEN READER: Button Revoke Icon. 

>> AMBER: -is inside something with a role of dialog, which is not really correct.

>> ALEX: That’s wonderful.

>> AMBER: Gotcha. I noticed the ARIA label on that button is revoke icon as opposed to change privacy preferences or something, like it’s visually describing what the icon is, I guess.

>> ALEX: Definitely misleading.

>> AMBER: Yes. Alicia put in the comment it’s confusing for people who can see, and I totally agree. That one, just like the labeling of the columns and the text and stuff, was confusing. On all the other ones, at least, it was like I’m accepting Google or YouTube or whatever, but this one didn’t do that. All right, so these are ones that don’t say anything.

The next one is Iubenda which has a WordPress plugin that only has 200,000 installs, but actual Iubenda can be added in different ways, and so I expect it is much more in that over-a-million category. What’s interesting about Iubenda, I’ll pre frame this before you open it, is I thought for sure they’re going to have accessibility information on their website because it’s used by so many people all around the world.

Well, they have an accessibility statement and they have a European version of an accessibility conformance report. Not for their software, for their website, because I think they legally have to comply with European Accessibility Act on their website. You can download all of this about how accessible their website is, but I could not find any information where they have said whether or not their product is accessible. This will be an interesting exploration.

>> ALEX: Which in my opinion, before looking at this, is probably intentional.

>> SCREEN READER: Link iUbenda. U. Document busy. About, colon, blank. iUbenda. 

>> AMBER: Are you worried about getting in trouble?

>> SCREEN READER: Document busy. Same page link. Skip to content.  

>> ALEX: All right. Focus, it skip to main content.

>> SCREEN READER: Dialog. Notice. Notice. 

>> ALEX: Dialog notice.

>> AMBER: How did you get to the dialog?

>> ALEX: I moved to it.

>> AMBER: How? Is it at the bottom?

>> ALEX: No, it is right above the skip to main content link.

>> AMBER: Okay.

>> SCREEN READER: Notice dialog We, Equalize Digital, Inc. and selected third parties, 12, collect personal information as specified in the button privacy policy and use cookies or similar technologies for technical purposes and with your consent for experience, measurement and marketing personalized ads as specified in the Button Cookie Policy. You can freely give, deny, or withdraw your consent at any time by accessing the preferences panel. Denying consent may make related features unavailable. Use the Accept button to consent. Use the Reject button to continue without accepting. Not for US consumers, you can give or deny your consent to the processing of your precise geolocation data at any time via the Accept and Reject buttons or inside the button Privacy Choices. button Panel, button Learn More and Customize. 

>> AMBER: Can I ask you a question real quick?

>> ALEX: Yes.

>> AMBER: I don’t know if I very frequently hear buttons in line in sentences. Is that okay?

>> ALEX: This is extremely annoying. I really dislike it. Most these buttons should probably not be buttons anyway since it sounds like they’re external going to other pages.

>> AMBER: Yes, I was wondering if they are– and you could open one and see like does it actually go somewhere versus

>> SCREEN READER: Privacy. Cookie Policy button. Dialog. Back button. Dialog. Button Back. 

>> AMBER: -opening in modal? My first thought was–

>> ALEX: Oh no, it sure doesn’t. I guess that’s why they have to do it that way.

>> AMBER: Here’s my guess on this. It was originally coded as a link and then someone’s links go somewhere, buttons do things like open modals, and so they remediate it with a row of button. I haven’t opened this one so I don’t know, but that’s what I–

>> ALEX: No, it’s in–

>> AMBER: When I hear stuff like that, that’s what I think.

>> SCREEN READER: This document informs users– Described below– 

>> SCREEN READER:>> ALEX: They wrap this in an iframe.

>> SCREEN READER: Using a cookie. Interact with– For simplicity. Is a reason to differentiate. For example, while cookie–

>> ALEX: Just why?

>> SCREEN READER: Talk about cookies. List with two items. Stripe. Stripe, Inc. Cloudflare. Cloudflare. List with two items. Button collapsed. Heading Level 3. Vimeo video. Vimeo, L– Button. Out of list. Heading Level 4. Trackers managed by third–

>> ALEX: I don’t understand.

>> SCREEN READER: Out of frame. Button Back. 

>> AMBER: This is one that they load policies off their website and it’s a service, right? Then they continually update to try and keep you in compliance with all the laws all around the world. I think that’s why it loads in an iframe.

>> ALEX: Okay, that makes a bit more sense then.

>> SCREEN READER: Hos this website uses trackers. Heading Level 2. 

>> AMBER: Is that a problem?

>> ALEX: Just not preferred. Even today, you have some really, really crazy things that can come out of iframes and accessibility. Everyone’s seen the stripe checkout Everyone who knows anything about accessibility knows how well it works or lack thereof.

>> SCREEN READER: Out of frame. Button Back. Notice dialog We, Equalize Digital Inc. You can freely give, deny. Button Cookie Policy. You can freely give, deny, or withdraw your consent at any time by accessing the preferences panel. Denying consent may make related features unavailable. Use the Accept button to consent. Use the Reject button to continue without accepting. 

>> ALEX: Focus management work still, so good on them for that.

>> SCREEN READER: Note for US consumers, you can give or deny your consent to the processing of your precise. Geolocation data at any time via the Accept and Reject buttons or inside the button Privacy Choices, button Panel, button Learn More and Customize. Button Reject. Button Accept. Button Accept. Button Learn More and Customize. 

>> ALEX: Learn more and customize.

>> SCREEN READER: Your privacy choices dialog. Back button. Your privacy choices dialog. Button back. Button See all Privacy Policy. Heading Level 2. Your Privacy Choices. In this panel you can– Information. You may review and change link. To deny your cons– Link. You may review and change expressed choices at any time by resurfacing this panel via the provided. Link. I. 

>> ALEX: You know what, tell you, you can find this via link, but it’s not a link, so it should fix that.

>> SCREEN READER: To deny your consent to, or where applicable opt out of, the specific– Described below, switch  the toggles to off or use the Reject All button and confirm you want to save your choices. 

>> ALEX: You have to be careful with the language. Tell somebody they’re looking for something they’re never going to find.

>> AMBER: Yes, because they might use like the rotor or the all elements list or something and go look at links and then not be able to find it because it’s not actually linked.

>> SCREEN READER: Button Reject All. Button Accept All. Heading Level 3. Your privacy rights under US state privacy laws. The options provided in this section unify and sim– as a user residing– to learn more about your– sale of my personal– Checkbox unavailable not checked. Your opt-out preference signal, GPC, has been honored. Use your device settings– sharing of my personal information. Checkbox unavailable not checked. Your opt-out preference signal, GPC, has been honored. Use your processing of my personal information tar– Checkbox checked. USPR purposes SD9. Checkbox not checked. Heading Level 3. Your consent preferences for tracking technologies. The options provided in this section allow you to customize your consent tracking technology used for the purposes described– USPR purposes SD9. Checkbox not checked. Necessary checkbox unavailable checked. Experience checkbox not checked. Measurement checkbox not checked. Marketing. Button collapsed. Marketing. See. Checkbox not checked. Button collapsed. Marketing. See description. Marketing. Checkbox not checked. These trackers help us to– their performance. Marketing checkbox not checked. No next checkbox. Measurement checkbox not checked. Marketing. These trackers help. Their performance. 

>> ALEX: These subscriptions aren’t very well-associated, but all of this is usable.

>> SCREEN READER: Button Save and Continue. 

>> ALEX: A little tricky to navigate, a little busy, but nothing in here is a deal breaker.

>> AMBER: Were you using the tab key just then?

>> ALEX: Yes, I was. I was navigating by checkbox.

>> AMBER: In this instance, they’ve styled those to look like Toggle, but they’ve done a pretty good job in not hiding it or whatever. You’re still able to navigate it.

>> ALEX: I wonder if they added the role checkbox.

>> AMBER: Hold on, let me open it. Yes, it’s an input with a type of checkbox and they’ve just styled it better than, I guess, however the other people were styling where they were visually hiding.

>> AMBER: That’s nice to see. I bet you that was a lot of work.

>> SCREEN READER: Button Save and Continue. iUbenda. Mozilla Firefox private browsing. iUbenda document. Same page link. Skip to content. Same page link. Skip to content. 

>> ALEX: Just click save.

>> SCREEN READER: Banner landmark link. Current. 

>> ALEX: You don’t get to change these either.

>> SCREEN READER: Button Your Consent Preferences for Tracking Technologies. 

>> ALEX: At the bottom of the page.

>> SCREEN READER: Button Your Privacy Choices. Link Notice at Collection. Content info land. Link. No. Button Your Privacy Choices. Button Your Consent Preferences for Tracking Technologies. Button Your Privacy Choices Dialog. Back Button. Your Priva– Button Back. 

>> ALEX: Well, I mean, this, more or less, works.

>> SCREEN READER: Button See Full Privacy Policy.

>> AMBER: Those buttons, they didn’t tell you they were going to open a modal, it looks like.

>> ALEX: They did not.

>> AMBER: Okay, but you’re saying that once you open it, it got focused and it seemed okay?

>> SCREEN READER: Button Back. 

>> ALEX: Yes, let’s see what exiting does.

>> SCREEN READER: Button Your Consent Preferences for Tracking Technologies. 

>> ALEX: Yes, focus goes back. Acceptable to me.

>> AMBER: How would you rate this one?

>> ALEX: This one’s not bad. It’s definitely one of the better ones we’ve seen tonight.

>> AMBER: What do I have left? Well, there’s Usercentrics Cookie Bot, which they’ve already told us is not accessible. We could see if it’s any different from the one they said was accessible, or there’s also WP consent, which in their terms of service, they explicitly state that they do not guarantee any– They have a whole bunch of legal stuff about they’re not responsible for accessibility.

>> ALEX: Oh.

>> AMBER: Then I would just put one out there that’s on gov.uk website if you wanted to look at one, but I have no idea how it’s built.

>> ALEX: I don’t know. That’d be pretty interesting. I’ll take that. Sure.

>> AMBER: She said. “I’m curious how Alex feels about this setup, if it’s a good experience and it’s just gov.uk “

>> ALEX: UK generally does a pretty good job. Let’s see if I’m about to regret saying that.

>> SCREEN READER: Mozilla Firefox. gov.uk. UK. Collapsed. Document busy. Private window. Firefox. [unintelligible 03:15:06] browsing his– Heading Level 2. Cookies on gov.uk. 

>> ALEX: All right, first thing on the page.

>> SCREEN READER: We use some essential cookies to make this website work. We’d like to set additional cookies to understand how you use gov.uk, remember your settings and improve government services. We also use cookies set by other sites to help us deliver content from their services. Button Accept Additional Cookies. 

>> ALEX: Not a dialog, so this won’t trap focus.

>> SCREEN READER: Button Reject Additional Cookies. Link. View cookies. Out of region. Same page link. Skip to main content. Cookies on gov.uk. Region. Link. View. 

>> ALEX: Oh, the reading. Okay.

>> SCREEN READER: Button. Region. Link. View cookies. 

>> ALEX: View Cookies.

>> AMBER: This is interesting. I don’t get that. You do. Even if I go incognito, because I’m thinking maybe I’ve just accepted it before, but– so I can’t look at it. That’s a region that looks like it just– instead of an overlay like all the other ones we’ve seen, it looks like it shifted all the content down.

>> ALEX: Yes, I guess they want it to be very much important for everyone. Let’s do the cookies, which is a link, so this could be an issue.

>> SCREEN READER: Cookies on gov.uk. Cookies on gov.uk document. Same page link. Skip to main content. 

>> ALEX: Oh, that’s a whole other page.

>> SCREEN READER: Same page link. Skip to main. Banner landmark. Navigation landmark. Link. Go. There’s a gov.uk homepage. Navigation menu. Heading Level 2. Main landmark. Cookies on gov.uk. Heading Level. Cookies are files saved on your phone, tablet, or–

>> ALEX: They don’t even let you customize this. It’s like you’re either gonna accept them all or deny them all.

>> AMBER: Can you deny them? Was there a deny option?

>> ALEX: There was, but I’m very unclear where the banner is gone now.

>> SCREEN READER: Content info landmark. Link for all content. List with eight item. Link. Help. Link. Pri–

>> ALEX: If she already have them, she have to accept.

>> AMBER: Well, that’s interesting. If you go back to the other page, or turn back.

>> SCREEN READER: Welcome to gov.uk. Heading Level 2 cookies on gov.uk. 

>> ALEX: Yes, sure will. Huh.

>> AMBER: Okay

>> SCREEN READER: Accept Additional Cookies button. Reject Additional Cookie. Accept Additional Cookies button. 

>> ALEX: Let’s just do accept and see what happens.

>> SCREEN READER: Welcome to gov.uk. Mozilla Firefox private browsing. Welcome to gov.uk document. Button Hide Cookie Message. You have accepted additional cookies. You can change your cookie settings link at any time. 

>> ALEX: Well, it tells you what you did.

>> SCREEN READER: You have accepted additional cookies. You can link change your cookie settings at any time. Button Hide Cooke Message. 

>> ALEX: See what change does.

>> SCREEN READER: Change your cookie settings link. Change your cookie settings link. Cookies on gov.uk document. Content info landmark list with AI

>> ALEX: Just brings you back to this page.

>> SCREEN READER: Out of list. Main landmark. Cookies on gov.uk. Heading Level 1. 

>> ALEX: It’s very, very  interesting.

>> AMBER: Oh, there might be inputs on this page.

>> SCREEN READER: Cookies are files saved. We use UK digital service. Service gov like this page has a brief, a link detailed cookie. Heading Level 2. Link detailed cookie information. Heading Level 2. Cookie settings. We use four type. Grouping. Heading Level 2. Cookies that measure website. We use Google Analytics cookies to– List with three items. How you got to these sites. The pages you– What you click– Out of list. We also use LUX. Performance experience– LUX Software. Including whether there were any performance– We do not allow Google or SpeedCurve. Radio button checked. Use cookies that measure–

>> ALEX: There sure is.

>> SCREEN READER: Radio. We do not allow– Use cookies that measure my website use. Radio button checked. Use cookies that measure– Radio button not checked. Do not use cookies that measure– Out of grouping, grouping. Heading Level 2. Cookies that help with our communications and marketing. Out of grouping. Cookies that help with our communications and marketing. Grouping. Use cookies that help with communication. 

>> ALEX: Yes, as far as I can tell, this is about as accessible as you’re ever going to make it. Very, very similar feel. What really threw me though is the whole new page thing because US companies are always just so convinced that modals are the way.

>> AMBER: Yes, it is interesting because I’ve never– I appreciate [unintelligible 03:21:16] for bringing this up because I’ve never seen one like this either where it takes you to a different page, because I think everybody is like, “Don’t remove them from where they are.” That’s my question for you. How would you feel about this in the context of you followed a link and you were going to read an article and now you’d have to go through this and then go back? Would that be okay or would it be kind of annoying?

>> ALEX: I don’t see this being a problem because it’s redirecting the context before you end up in the middle of an article. I suspect if you start on a page–

>> SCREEN READER: Cookies that– Save Changes button. List with two items. Yes, this page– Main landmark. Save. List with two item. Main landmark. Save. 

>> ALEX: Let’s do save.

>> SCREEN READER: Success. Alert government services may set additional cookies, and if so, will have their own cookie policy and banner. Go back to the page you were looking at. Go back to the page you were looking at. Go back to the page you were looking at. Link. 

>> ALEX: I guess they’re thinking the same thing.

Screen Reader Success. Alert government services. :

>> AMBER: That’s nice.

>> SCREEN READER: They always needs. Button Save Changes. They always need to be on. Application. 

>> ALEX: Oh, but focus, it move to the link.

>> SCREEN READER: They always– Button Save. Heading Level 2. Government services. 

>> ALEX: It gave an alert.

>> SCREEN READER: Government. Work. These services may– linking to it. Heading Level 2. Is this page useful?

>> AMBER: That’s an issue. The alert’s actually at the top of the page.

>> SCREEN READER: Main landmark. Cookies on gov.uk are files saved. We use cookies. Digital service.gov. This page has a link detailed cookie information. Heading Level 2. Cookie settings. 

>> ALEX: [unintelligible 03:24:01] it’s above the main heading. You don’t do that.

>> AMBER: Yes, it’s above the main.

>> SCREEN READER: Cookies on– Link. Go back to the page you were looking at. 

>> AMBER: Completely, I think.

>> SCREEN READER: O. Link. Welcome to gov.uk. 

>> ALEX: Ain’t no better than that. That’s an easy fix.

>> AMBER: Yes. When an alert includes an actionable item, focus should shift to that alert.

>> ALEX: I suspect they probably didn’t do it because there’s been so many problems over the years with forcing focus to move like that. The second best thing you can do is put the alert below your main heading. The anti-pattern that every blind person at this point, I would say in my opinion, has learned find the main heading, then go up.

>> AMBER: I mean it almost seems to me like that alert could just be next to the save, like right after the save button.

>> ALEX: That’s where I would like it to be, because then you really don’t have to manage focus if it’s further down the page. I don’t–

>> AMBER: The next item after where you currently are.

>> ALEX: This is why user research is important because you can study these types of behaviors. Half the problem with the world we live in today is because it took the world 20 years longer than it should have to become accessible, blind people have learned by bad patterns. Amazon, for example, started to slowly change a lot of things and make their website more accessible probably because of the European Accessibility Act. The issue becomes is all the ways I was used to navigating it, because their website was garbage, now don’t work, because they’ve actually started to do things correctly.

>> AMBER: Like your little shortcuts are not functional anymore.

>> ALEX: Yes, I have to reteach myself how to use the website.

>> AMBER: In the long run, do you think that’s better though?

>> ALEX: In the long run, absolutely. In the longer run, it would be nice if we quit making inaccessible things.

>> AMBER: I so much appreciate you volunteering your time to go through so many of these different tools and even one that’s just on the fly, it’s so phenomenal, so thank you. I think I would love to give you an opportunity to have any closing thoughts, but I just want to extra highlight here. I mean, I hope some of these cookie banner plugins watch this on YouTube later, but really testing with actual users is so important.

If you’re not somebody who’s experienced with screen readers, you should hire somebody like Alex to do it because it’s not– As we talked about earlier, there’s a lot of issues that can’t be found with automated tools. If you’re not an experienced user, you’re not going to get the same experience. I think that’s really important. I don’t know. Alex. Do you have any closing thoughts about cookie banners or plugins or what plugins have to say about accessibility?

>> ALEX: I mean, I think that the WordPress industry is slowly turning around. I’ve been in WordPress long enough to kind of see what it was like nine years ago and it wasn’t great. There’s still a lot of not great today, especially as the project moves along, tries to do too many things it’s not meant to do. Google Docs comes to mind. I mean, WordPress. There are some people starting to move in the right direction and it’s nice to finally see that. Still got a long way to go. There’s hundreds of plugins on the WordPress repository that would probably do good to look at this.

>> AMBER: Yes. I think the biggest thing that I would really like to see is I’d like plugins to not just promise accessibility if they haven’t had somebody with disabilities or someone who’s an experienced tester test their stuff. Because as we saw, there’s a lot of plugins today who have promised it or said it was certified or whatever, and they clearly have issues that could be blockers for people.

>> ALEX: If you open yourself up to that and somebody like me comes along, I don’t work for you. I don’t have to be nice to you. I will call you out, because it’s a slap in the face to people who have to live with this every day and it’s not right.

>> AMBER: This is the thing. I’m gonna maybe stop your sharing for just a second here if I can figure out how to do that. I was gonna say, I think it’s also got to be really frustrating for website owners who want to do the right thing, but in particular people who aren’t technical, it’s not really fair to them to promise something in your plugin that they can’t do.

>> ALEX: Very much agree. I mean you use the tools you’re given, sometimes the tools over promise. I see that all the time working in my day job.

>> AMBER: Well, thank you so much. I do want to flag for you that Corey, the friend who lives near us in DFW area, you guys got to connect. You can tell him I think if LinkedIn is the best place, but he says that if you want, he would love to take you out for a burger because he thinks you’ve earned one.

>> ALEX: Oh, I will never say no to that. You can find me on LinkedIn. That’s the best place. Alex Stine on LinkedIn, and I also run around a few Slack groups. Anybody who’s in the post status Slack involved with WordPress, you can find me there.

>> AMBER: Great. Well, thank you, and thank you to everybody who tuned in. We will be back next week with another meet-up in the morning, and, of course, please register for WordPress Accessibility Day in a couple of weeks. It’s coming up really fast. Bye.

>> [03:37:15] [END OF AUDIO]

About the Meetup

The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites accessible to people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.

Learn more about WordPress Accessibility Meetup.

Summarized Session Information

In this session, Alex Stine, a blind accessibility professional and screen reader user, performed live accessibility testing of popular WordPress cookie banner plugins. The goal was to evaluate how these consent tools perform for users navigating with assistive technology, with a focus on screen reader usability, focus management, and interactive control behavior. Rather than reviewing legal compliance or cookie-blocking functionality, the session centered entirely on real-world accessibility and user experience.

Using a temporary WordPress multisite, each subsite featured a different plugin for testing. Alex and Amber examined banners that both claimed and did not claim accessibility compliance, allowing for a direct comparison between marketing promises and actual implementation quality. Throughout the session, Alex demonstrated how poorly structured or undiscoverable banners can completely block users with disabilities from giving consent or using a website.

During the live testing, Alex and Amber reviewed the following cookie banners:
Complianz, Usercentrics, GDPR Cookie Compliance (by Moove Agency), Cookie Admin, and Real Cookie Banner. Each example revealed varying levels of accessibility, from strong focus management and clear dialog labeling to severe usability failures like missing landmarks, unlabeled buttons, and inaccessible preference toggles.

This practical exploration highlights the importance of designing cookie banners that are both discoverable and operable for all users. Developers and site owners will gain valuable insight into the most common accessibility pitfalls in consent tools and learn what distinguishes an accessible banner from one that merely claims to be.

Session Outline

  • Characteristics of an accessible cookie banner
  • Testing cookie banners for accessibility
  • Key accessibility issues identified
  • Takeaways

Characteristics of an accessible cookie banner

The most accessible implementations often use a focus trap, functioning like a modal that forces attention onto the banner. This ensures that users with screen readers experience the same “can’t ignore this” effect as sighted users. However, while focus jumps can sometimes feel unnatural for screen reader or keyboard users, having the banner immediately accessible is crucial.

As a secondary approach, it’s recommended to place the cookie banner as the first element in the HTML structure, so it’s encountered right away. Without this, users may never realize a cookie consent exists at all. It’s also cautioned against overly intrusive designs, like those requiring consent on every page load, emphasizing a balance between prominence and usability.

Testing cookie banners for accessibility

Complianz

Amber and Alex began with the Complianz plugin. Using his screen reader, Alex observed that this banner performed reasonably well:

  • The banner announced itself as a dialog.
  • Content was read aloud clearly, and focus was appropriately trapped within it.
  • The user couldn’t miss the banner, fulfilling one of his key accessibility expectations.

However, the links to the cookie policy and sample page appeared below the action buttons (Accept, Deny, View Preferences). It’s suggested that we reverse that order, placing the policy links above so users can review the details before making a choice.

Usercentrics

Usercentrics is not a plugin, but a third-party service. The code used appropriate ARIA markup for tabs. It was correctly structured. This banner demonstrated well-implemented ARIA 4 tab controls, earning positive remarks for technical compliance.

GDPR Cookie Compliance (Moove Agency)

Next, they examined GDPR Cookie Compliance by Moove Agency.
The issues were significant:

  • The banner failed to announce itself, meaning screen reader users were unaware of its presence.
  • There was no heading to provide structure or orientation.
  • While the banner did include a complementary landmark, it was placed far down the page, making it nearly undiscoverable.

Alex estimated “about a 10% chance” that a screen reader user would even find it, calling it “so undiscoverable.” The only way to locate it was through its ARIA label. The banner also included a visual error, repeating the word “settings” three times, which the screen reader read literally.

Cookie Admin

The next tested plugin, Cookie Admin, claimed compliance with ADA, EAA, and WCAG. Yet, Alex found its performance poor:

  • The screen reader revealed that preference toggles weren’t interactive.
  • Inputs were hidden using display: none, and labels were empty, making the controls unusable for assistive technology.
  • When submitting preferences, the page lost focus entirely—returning no clear position or landmark.

Alex called this “total focus loss,” an especially problematic accessibility failure. He dryly remarked that the plugin was “most certainly none of those things” regarding its compliance claims.

Cookie Notice

They then tested Cookie Notice, which also promoted accessibility. This banner loaded a dialog but failed to gain focus when opened. It was placed as the last element in the DOM, forcing users to manually navigate to it. The banner presented confusing language and multiple buttons for “Privacy Policy,” “Do Not Sell,” and other controls. Alex couldn’t determine whether certain elements—such as “Private,” “Balanced,” or “Personalized”—were selectable presets or descriptive categories, creating uncertainty about how to interact with it.

Real Cookie Banner

Real Cookie Banner, encountered structural issues. It’s suggested that the content might be better represented as a table with headers for cookie name and duration, to organize the data better. This would improve clarity and navigation.

They also explored how users could access disabled elements. Alex demonstrated that while certain “Essential” checkboxes couldn’t be reached via the tab key, arrow key navigation still allowed partial access. Amber compared this to another plugin, noting that at least this banner didn’t completely hide disabled controls with aria-hidden="true".

Alex voiced frustration with HTML5’s disabled attribute, explaining that it limits interaction options for users relying on keyboards or screen readers, effectively “trapping” them into one mode of navigation. He also confirmed that large sections of the banner were wrapped together—possibly inside a <fieldset>—causing the screen reader to read all descriptive text as one block rather than as individual input labels.

Key accessibility issues identified

Throughout the testing, Alex highlighted several recurring accessibility issues:

  • Focus management failures: Some banners failed to direct focus to the dialog or restore it afterward.
  • Improper labeling and hidden elements: Many toggles and buttons lacked accessible names or were visually hidden but not coded properly for assistive technology.
  • Ineffective hierarchy or reading order: Important links (like cookie policies) appeared in illogical positions.
  • Complex or ambiguous interfaces: Users couldn’t easily tell which elements were actionable versus descriptive.
  • Overuse of disabled attributes and ARIA misuse, leading to confusion or total inaccessibility.

Takeaways

Alex Stine’s live testing underscored how even plugins advertising “accessibility compliance” frequently fall short in practice.
He advocated for:

  • Designing cookie banners that behave predictably for screen reader users.
  • Ensuring proper focus management (both entry and exit).
  • Structuring information semantically (using tables or fieldsets appropriately).
  • Avoiding hidden, unlabeled, or misleading controls.
  • Remembering that accessibility applies equally to all users—consent and privacy experiences must be usable by everyone.

Legal compliance means little if users with disabilities can’t effectively interact with consent forms. Alex’s demonstrations revealed that accessibility in cookie banners remains inconsistent and often misunderstood by developers.

Facebook0Tweet0LinkedIn0Shares0

Filed Under: Recorded Webinars

About Equalize Digital

Equalize Digital's team has specialized in WordPress accessibility for more than a decade. We offer accessibility audits, WordPress accessibility remediation, user testing, and build bespoke, accessibility-first websites. Our WordPress Accessibility Checker plugin is used by large and small businesses, nonprofits, higher ed, and government websites worldwide. Try it free today.

Post navigation

Equalize Digital Our guide for 2025 on how to write an accessibility statement. Learn what every accessibility statement needs and three things you should never do.Previous post: How to Write an Accessibility Statement in 2025, with Examples
How to use ChatGPT to fix Accessibility code tutorialNext post: How to Use ChatGPT to Fix Website Accessibility Problems

Easier, Faster Accessibility Testing

Equalize Digital Accessibility Checker gives you real-time accessibility feedback in the WordPress editor. Learn accessibility and make fixes earlier in the dev and content creation process. Full-site accessibility scanning without the per page fees.

Get Accessibility Checker

Footer

Equalize Digital Websites for Everyone

Your WordPress accessibility team. Accessibility plugins, rapid audits, and consulting to help you make your website usable by people of all abilities.

  • Facebook
  • GitHub
  • LinkedIn
  • Twitter
  • YouTube

Company

  • About Equalize Digital
  • WordPress Accessibility Meetup
  • Accessibility Statement
  • Blog
  • Events
  • Contact Us

Services

  • Accessibility Audits
  • User Testing
  • Remediation
  • Ongoing Monitoring
  • VPAT & ACR Preparation
  • Accessibility Training
  • For Agencies
  • Website Development

Accessibility Checker

  • Features
  • Pricing
  • Documentation
  • How to Get Support
  • My Account
  • Affiliate Dashboard
  • Become an Affiliate

© 2025 Equalize Digital · Privacy Policy · Terms of Service · Software Terms & Refund Policy

International Association of Accessibility Professionals member

Wait!

Before you go, join our email list to get

10% off

Accessibility Checker or any online course.

Name(Required)

We promise only to send you trustworthy accessibility content and event invitations. You can unsubscribe anytime, and we won’t share your information with anyone.