Cookie Banner Accessibility Testing: Alex Stine

## Metadata
- Author: [[Equalize Digital]]
- Full Title: Cookie Banner Accessibility Testing: Alex Stine
- Category: #articles
- Document Note: ---
tags: [accessibility, wordpress, privacy]
author: [MISSING]
source: YouTube
reference: [https://www.youtube.com/watch?v=NT-SXjxVYH0]
date created: {{date:YYYY-MM-DD}} {{time:HH:mm}}
---
# 🏷️ Title: Cookie Banner Accessibility Testing: Alex Stine
## 🧰 Action Inbox
- [H1] Draft focus-trap guidance for cookie modals — context/https://www.youtube.com/watch?v=NT-SXjxVYH0
- [H2] Add “first in DOM” rule to docs — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1351
- [H3] Replace nested controls; add ARIA pattern — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1709
- [H4] Standardize button labels and outcomes — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2007
- [H5] Remove aria-hidden on essential toggles — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2360
- [H6] Cut noisy landmarks; simplify regions — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2573
- [H7] Add “return focus to trigger” rule — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=6018
- [H8] Provide top and bottom Save controls — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4792
- [H9] Prefer table markup for cookie lists — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4730
- [H10] Add “opens dialog” semantics to triggers — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=3191
- [H11] Add persistent “Change consent” entrypoint — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4176
- [H12] Document GOV.UK pattern as alternative — context/https://www.youtube.com/watch?v=NT-SXjxVYH0&t=5855
## 🧭 Table of Contents
- [📝 Summary](#-summary)
- [📖 Main Content](#-main-content)
- [🗒️ Notes](#️-notes)
- [📚 References](#-references)
- [🗣️ Paraphrase](#️-paraphrase)
- [📰 Newsletter](#-newsletter)
- [✅ Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [📊 Methodology](#-methodology)
- [❓ Questions](#-questions)
- [🔮 Future Research](#-future-research)
- [💡 Implications](#-implications)
- [🧠 Learning Styles Assessment](#-learning-styles-assessment)
- [📊 Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [✅ Logical Validity](#-logical-validity)
- [🛡️ DARVO Analysis](#-darvo-analysis)
- [🎯 Conclusion](#-conclusion)
### 🔗 References
- Video: Cookie Banner Accessibility Testing — Alex Stine (YouTube). https://www.youtube.com/watch?v=NT-SXjxVYH0
- WCAG overview (W3C). https://www.w3.org/WAI/standards-guidelines/wcag/
- ARIA Authoring Practices, Dialog, Disclosure, Tabs (WAI-ARIA APG). https://www.w3.org/WAI/ARIA/apg/
- GOV.UK cookies pattern and policy. https://www.gov.uk/help/cookies
- Equalize Digital (organizers of the meetup). https://equalizedigital.com
- If any link is blocked by your network, use a different device and continue.
## 📝 Summary
- Alex Stine tests real WordPress cookie banners with NVDA.
- He stresses focus management and honest semantics.
- Vendors, organizers, and site owners are stakeholders.
- Risks include lost focus, hidden controls, and misleading labels.
- Bottom line: simpler patterns with tested focus logic work best.
## 📖 Main Content
- Cookie banners must be findable, operable, and predictable.
- Focus should enter the modal and exit to the trigger.
- Labels should state actions and outcomes plainly.
- Do not hide essential toggles from assistive tech.
- Prefer standard patterns for dialogs, tabs, and disclosures.
- Avoid “region spam” and nested interactive elements.
- Consider the GOV.UK approach: banner + full settings page.
- Uncertainties remain around legal defaults and locales; test with counsel.
### 🗒️ Notes
#### ⏱️ [00:07:29](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=449) Focus behavior guidance
### [H1] Focus trap improves consent discoverability
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “It should definitely throw you into a modal like environment.”
Focus traps prevent missing consent; provide a clear escape path. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=449) #articleseed #xref ID:rw_H1
#### ⏱️ [00:22:31](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1351) DOM order and discoverability
### [H2] First-in-DOM increases banner detection
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “At least make the cookie banner available as the first item in the HTML.”
Ensure initial focus can reach consent before main content. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1351) #xref ID:rw_H2
#### ⏱️ [00:28:29](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1709) Nested controls pitfall
### [H3] Avoid interactive elements inside buttons
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “It's not correct to have a… checkbox nested inside… a button.”
Use separate controls; follow ARIA patterns for disclosures. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=1709) #articleseed ID:rw_H3
#### ⏱️ [00:33:27](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2007) Label clarity
### [H4] Button names must match outcomes
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “Accept and… Save preferences… so confusing.”
Name actions precisely; avoid different labels for identical outcomes. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2007) #articleseed ID:rw_H4
#### ⏱️ [00:39:20](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2360) Hidden toggles risk
### [H5] aria-hidden on essentials blocks consent
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “It looks like it might have… aria-hidden=true on it.”
Never hide mandatory disclosures or controls from AT users. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2360) #xref ID:rw_H5
#### ⏱️ [00:42:53](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2573) Landmark noise
### [H6] Excess regions harm navigation clarity
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “This is way too cluttered… everything is a region.”
Limit landmarks to meaningful sections; reduce verbosity. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=2573) #articleseed ID:rw_H6
#### ⏱️ [01:40:18](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=6018) Post-save focus
### [H7] Return focus to invoking control
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “Focus should land back on the trigger.”
On close, restore context and reduce disorientation. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=6018) #xref ID:rw_H7
#### ⏱️ [01:19:52](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4792) Control placement
### [H8] Provide Save at top and bottom
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}.
> “Having a save button only at the top… is… annoying.”
Duplicate primary actions to match user flow. [view highlight](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4792) #articleseed ID:rw_H8
#### ⏱️ [01:18:45](https://www.youtube.com/watch?v=NT-SXjxVYH0&t=4730) Data display
### [H9] List cookies using data tables
> [!quote] [Cookie Banner Accessibility Testing: Alex Stine](https://www.youtube.com/watch?v=NT-SXjxVYH0) by an unnamed author via [[YouTube]]. Published [MISSING]. Access
- Summary: Alex will be testing popular cookie consent solutions for accessibility with his screen reader and providing real-time feedback. If you need an accessible cookie banner, tune in to see which WordPress plugins provide the best starting point.
This is a recording of a September 2025 WordPress Accessibility Meetup.
The WordPress Accessibility Meetup Group is a global group of WordPress developers, designers, and users interested in building more accessible websites. Join us twice per month for meetups on a variety of topics related to making WordPress websites that can be used by people of all abilities.
Learn more about this group at https://equalizedigital.com/meetup
To read a transcript of this video and access additional resources at https://equalizedigital.com/cookie-banner-accessibility-testing-alex-stine/
- URL: https://www.youtube.com/watch?v=NT-SXjxVYH0
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
[email protected]. 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. 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: 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: 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.
[email protected].
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 [?] 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.
[email protected] 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. Screen Reader: Button customize. [laughs] 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. 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. 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-- 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. [?] 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 [?] 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., Cookie Banner Accessibility Testing: Alex Stine, Equalize Digital, 01k862w8znptxjw4g1b6paev7s.