Beyond Plugins: Real Accessibility for WordPress Websites | Joseph LoPreste
Watch on YouTubeVideo summary
The core message of the presentation is that while WordPress plugins and overlays are useful tools, they are not a magic solution for web accessibility. Many website owners mistakenly believe that installing an accessibility plugin or adding an overlay guarantees compliance, but these measures often provide only a false sense of security. Automated testing tools can identify roughly 70% to 80% of issues, but they frequently miss critical problems such as keyboard traps, improper focus states, and context-dependent errors like missing or inaccurate alt text. True accessibility requires a manual process where developers and designers verify that users with disabilities can actually complete tasks, navigate the site using only a keyboard, and understand all dynamic content changes, such as pop-ups and modals.
To build a genuinely accessible website, one must focus on the user experience and journey rather than just checking off legal boxes like ADA Title II or WCAG 2.1 standards. The speaker emphasizes that accessibility is not a static state achieved once and for all; it is an ongoing process that requires testing at every stage of development and maintenance. Common pitfalls include using headers incorrectly by making text large instead of using proper H1, H2, and H3 tags, failing to announce error messages to screen readers, and neglecting focus indicators on interactive elements. Even if a theme claims to be accessibility-ready, the final product can become inaccessible if plugins, page builders, or custom content introduce new barriers. Therefore, it is essential to test the fully assembled site with real assistive technology, such as NVDA, to ensure that the end-user's needs are met in all scenarios.
Practical strategies for maintaining accessibility include setting up guardrails within the WordPress backend to guide clients when they add their own content, ensuring that block patterns and templates adhere to accessibility standards from the start. When a client insists on using an inaccessible feature, such as an unmapped Google Maps widget, developers should employ workarounds, like providing a primary method for finding directions alongside the map, rather than simply adding a CSS fix or overlay that might break further down the line. The most effective approach is to integrate accessibility into the initial design and development workflow, treating it as a fundamental requirement rather than an afterthought. This proactive stance not only reduces the risk of costly lawsuits but also saves money in the long run by preventing the need for expensive retrofits after a site has gone live or been sued.
Ultimately, the responsibility for web accessibility lies with the creators and maintainers of digital content, as they have the power to make a significant difference in the lives of millions of people with disabilities. The speaker encourages professionals to educate their clients about the importance of accessibility, framing it not as an extra cost but as an essential investment that protects against legal liability and ensures inclusivity. By building accessible sites from the ground up, using tools wisely, and committing to regular manual audits, the web community can move beyond mere compliance toward a culture of genuine inclusion. As laws evolve and deadlines approach, such as those for government contracts, the industry must continue to prioritize the human element, ensuring that every digital interaction is open, usable, and respectful for all users.
Read the full video transcript
I appreciate that introduction. Uh, if
you don't mind, could you follow me
around everywhere I go and when I walk
into a room, just introduce me?
>> As long as you always have
>> I got you. All right. Well, I appreciate
everybody coming in today. This is a
very important conversation.
I want you to imagine for a moment
you're WordPress. You're you're a
business owner and you've got a website.
More than likely, your your main focus
is going to be your business. And your
website is how you generate your income.
You've heard about accessibility. You've
had friends that have had uh runins with
web accessibility. You're a good person.
You want to do the right thing because
you feel you have this personal
responsibility.
The way WordPress is set up, we think to
ourselves, all right, great. we we will
get a uh we'll put a plugin.
So, we put a plug in there. The plugin
runs at scan. It says, "Hey, we found x
amount of issues. We've fixed all the
issues for you. Here's your special
little green check. You are good to go."
You want to do a little extra. You say,
"You know what? I'm not 100% sure if
that's going to get me there. So, I'm
going to go ahead and add an overlay."
So, you go ahead and throw an overlay on
there. And now you feel good. You sleep
like a baby at night until you get a
letter, a legal complaint, or until an
individual reaches out and says, "Hey, I
can't use your site."
This happens all the time.
Excuse me one second here. Now,
accessibility affects so many people.
You got 70 million plus people dealing
with some sort of disability.
This stat here is very important. 41% of
the internet of websites run WordPress.
This is why I'm so passionate about
coming and talking to WordPress uh
designers, developers because we can
make a dent in this.
Another stat is
uh they ran a test on the top 1 million
websites and 94% of them had way
failures on on the homepage. That's a
big deal.
The standards that when we talk about
web accessibility, that word gets thrown
thrown around a lot. We're talking about
ADA title two. We're talking about
section 508.
Um, there are laws that are in place.
Uh,
you know, WAG 2.1 is the base standard.
WAG 2.2 is really coming down the
pipeline. So, in my opinion, when I deal
with clients, I always just try to push
them to WAG 2.2. It's only a few extra
things. Um, but the real important thing
here is to understand that these laws
and these standards are the floor. They
are not the end goal. These are this is
just the base level. This is the
starting point and that that's very
important to understand.
One of my favorite things about
WordPress, what got me into I've been
doing this 10 plus years were the
plugins. I didn't have to be a developer
to do cool stuff. And that's kind of how
WordPress is built. You're able to get a
plugin. Hey, I I need a contact form.
There's a plugin for that. I need uh
whatever it is you need, there's a
plugin for that.
WordPress is very good with that. So,
you've got different plugins. You got
plugins that just do testing. They'll go
through and they'll test some stuff. You
have plugins that are made for authoring
that you can put on the back end that
helps your clients when they're
authoring, when they're creating
content. It kind of puts some guard
rails there for you. Then you have uh
your component plugins where your forms,
your menus, all these other things. And
then you've obviously got your widgets
and overlays.
But the key is there's no single magic
bullet. There is no one plugin that can
get it all done for you. We have a
plugin out there and it does a lot of
different things for you. So I'm not
trying to naysay on plugins. There is
definitely a role and a place for them.
But just please understand that it's not
the it's not the end all beall. It's not
the start and finish. Plugins are are a
tool for you to use in your toolbox.
And with that said, you got
accessibility.
WordPress also does a really good with
accessibility just internally and with
their with their base. But you got to be
careful because just because a theme
says that this this theme is uh
accessibility ready. It gives it that
tag. That doesn't mean your website as
long as you use that theme, your end
product's going to be accessible.
Because I'm sure we all know that once
you get you get your theme, but then
once you start adding your plugins and
you start adding your page builders and
and your templates and and all this
other stuff, it's going to change your
accessibility. It's no longer just uh
your your accessibility ready theme. And
it's important to understand that
accessibility it's you want to test
that.
You want to test it during the process,
but you have to test it at the end once
you've merged all of your things. You've
added your plugins, your themes, all all
of your content. You got to still check
it. And it at the end of the day, it's
really about the user experience. So
that's that's what's most important. And
and honestly, this is what I find most
the time is is a lot of people are like,
"Well, I got the accessibility ready
theme. I've got this plugin that says
that says it's accessible, but they
don't understand that really at the end
of the day, it's about the user and it's
about the user flow and journey. Can
they accomplish a task? Can they fill
out that form? Can they whatever it is
they need to do, can they do that?" So,
it's always important to test those
things.
Now, we do have a lot of plugins and and
I'm sure everybody here is can probably
name two or three automation tools that
that you can use and that's great. I I
am not saying don't use those. But what
I do want to say is that understand that
automation is only going to get you so
far. automation, they'll tell you right
out of the gate. We can only catch
you make a number up 50% 70%.
Some of the testing software that I use
is just highend and at its best it's
only going to catch 70 to 80%. And they
tell you that right out of the gate. So
you have to go through and add your
manual process to that. One thing that
automation well there's a bunch of
things automation cannot find. Um things
like uh it can tell whether an image has
an alt text but it can't tell whether
that alt text is is an actual
descriptive text of that image. Uh one
thing that I find on a bunch of websites
is the focus is the focus state
indicator. uh there's no tool that's
able to find out whether you have that
and another even if you do have that
what the color contrast ratio of your
focus state indicator is is another very
important thing um we hit on it you you
need to verify whether the the enduser's
journey can be accomplished
another big area that I see automation
does not cover is uh multiple states of
your website what'll happen is you'll
open up your website you'll run a tool
that tool tool is only checking your
site in that state. It does not check it
if you open up a modal or it does not
check it if you change that state in any
way. It it it just doesn't do it. So it
it's just the base site
and and that's very important because as
we know websites are are say almost like
living breathing things. They they they
change, they grow, expand. So, it's it's
very important to to make sure you're
testing and that it's accessible in all
in all states.
Some common things I find I I do I do
audits all day long on websites. It
really doesn't matter the the platform,
the CMS. I have an affinity for
WordPress is where I got started. I
believe it's the best CMS out there. Uh
but it really doesn't matter. I find
these problems
all over the place. Keyboard traps.
um navigating to make sure you can
actually reach all of the interactive
items. Make sure you can back up. Make
sure when you're hitting forms that your
keyboard is able to hit all of the
forms. And I I'll show you here in a
little bit, but a way to do that is is
we call this tab navigation. You're
going to use a low vision individual or
somebody that needs help like that will
use the tab button mainly to navigate
your site and then do things like shift
tab or control space and arrows and all
that. But your tab navigation is going
to be a big thing. I find a lot of
silent failures too as far as error
codes go when you're filling out a
user's filling out a form and it says
name, email, and they don't fill it out
uh completely. And when they hit submit,
everybody knows you'll get the red text
up that says, "Hey, you got to fill this
out, fill that out." But that has to be
accessible to your assistant tech, the
screen reader. So when that error pops
up, you got to make sure the screen
reader is announcing that. Otherwise,
the individual has no idea that that
error just just incurred. Um, structural
problems. You got page builders. It's
headings. It's it's a big one uh with
headings. A lot of people will take
their text and just kind of make it
large and bold and use that for a for a
header that you can't do that. So, um
you know, and we find a lot of PDF
documents as well that that's another
kind of silent killer for a website is
you can get your website fully
compliant, but the laws and
what we want to accomplish is for all
digital content and that that's
everything. That's websites, that's
PDFs,
videos, that's all of it. So, when
you're going through and checking,
please understand that it's not just
your website. If you're offering PDFs or
a video, all those have to be compliant
as well. Not just because it's the law,
but because it's it it's it's
the right thing to do. And I do believe
that we everybody in this room has a
personal responsibility because we run
so much of the internet. Everybody here
runs so much of the internet.
When I do talk to some people, sometimes
they are not really fully able to
understand how much they could really
make a difference. You know, like they
say, the ocean is made up of of
raindrops and and that's and that just
that point really hits home to me with
with the WordPress community.
All right, if you I would like to run a
demonstration here.
What I have here is I have a
I have a broken site and then I have a
uh an actual site. Well, neither are
actual sites, but one one's broken,
one's good. So, what I want to do is I'm
just going to show you a couple of
things real here real quick that and
this is not the end all beall. This is
not okay. Well, I did I did the four
things Joe told me to do. We're good.
Ship it. That that's not the case at
all.
But here are some things what I was
talking about earlier about focus state
indicator. What that is is when an
individual is using the tab button to
navigate the web page, there's a uh a
focus state indicator that tells them
where they are. Without it, you have no
idea where you are. So, we are going to
use the tab button and I'm going to go
through here and you can uh you'll see
the skip skip skip to main content just
popped up. So, we know we're there. But
as I hit the tab button, if you notice
I'm tabing, you have no idea where I am.
It's just not possible. You can look
down in the bottom leftand corner,
bottom lefthand corner, and you can see
like the links and you can kind of make
out where you are, but that that's not
acceptable. So, here's the proper way of
what that would look like.
Sorry about that. There we go. There.
Right out of the gate, you see that is
the focus state indicator. So now as I
tab press the tab button,
you can see exactly where you are. The
user knows where they are at all times.
This is very very important. This is a
constant fail and it's an easy fix and
it makes a big difference. Um and you
can see as you go through you'll be able
to see where everything is and that's a
big deal.
Uh we got another one here. Um,
what you want to do is you'll notice
these read more here. And I was going to
try to put up my screen reader, but
we're not going to do that now. But it
says read more here. And it says that on
the other one, too. So the actual text
of read more. I mean, that's okay. But
what you need to do is you need to
explain to the end user what's going to
happen if they click read more. And you
can imagine if I'm if I'm a low vision
individual and I'm skimming through this
and I hear read more, read more, read
more, learn more, read more, learn more.
I have no idea what that means. So what
I always try to do is on on the working
site it, and this is just an example,
you can still have it say read more
because I know we all like our
aesthetics and we want we don't want a
big long explanation there. So we can
just add an ARA label. So the first one
would say read more about running more
productive meetings. And when I go to
the next one, I'll say read more about
creating clear content process or making
training more engaging. So I'm adding
that Arya label to allow the user to
know where they are uh when when they're
clicking the read more and learn more.
Now, personally, I avoid try to avoid
read more and learn more. I would um
just use some other text, but if you
have to use the learn more, read more,
just add that Arya label.
Um, and another good way to
we're on here. So, we're on here. We're
going to add our, you know, put our
name. I always think of the tech. My
name is Jeff. Uh, so we're we're Jeff
today. And then when you come in down
here and you're going to you're going to
hit send request. We can see the errors
pop up and all of that's fine. A broken
site on the broken one, if I would have
my screen reader on and I did this, you
wouldn't hear anything. the screen
reader wouldn't announce anything. But
on the proper site, the screen reader
announces that you have there are some
errors and you have to correct them and
it reads out what those corrections are.
So that's very important. Another major
one that I see a lot is as you're going
through here the modal if a modal pops
up on this one, the proper working one,
if you notice the close button has the
focus indicator. So when someone opens
up a a pop-up or a window, you you have
to bring the focus state to the modal.
You have to and best practice is just to
have it immediately on the close button
and you go and then you can just scroll
around and close on the broken one. What
it'll do is when they're broken and you
and you use the modal, the focus state
behind.
So now the modal popped up. If you
notice, there's no focus indicator. And
as I'm tab navigating, my my focus state
is behind the popup. It is still on the
web page and I'm not able to get to the
modal. So that's very very important.
And that's another very very common
mistake.
Another common mistake here, I'm not
going to show you here, but you see
headers is headers out of place. You
want headers in dist descending order.
You're going to want one H1 header per
per web page. And that H1 header should
be basically your your almost like your
document title. That should describe
what your page is. And then all of your
headers under underneath that should be
in descending order in order. So you
have your main H1. And then of the next
section, you're going to have an H2. And
then if you have a couple other headers
in that section, that's fine. H3, H4,
and then the following section is going
to be H2 again. So every new section
starts back at the H2, not an H1. Um,
and and you want to make sure you don't
go from an H2 to an H4, back to an H3 to
an H5. Um, so your H2 should be the
header of each section, and they should
be in descending order.
So, those are just some simple fixes,
some simple things um that that to pay
attention to. And these aren't things
that
a plugin can fix. You're not going to
put a plugin in or any kind of automated
software and and get to that point. This
is something that you have to manually
do. And you know, that's just the way it
is.
So, with that said, when you're testing
your your WordPress website, you
obviously want to test the front end for
user and stuff, but I'm sure there's a
lot of people here that uh you know,
agencies, developers that you're going
you're making your websites for your
clients. And what's going to happen is
it's happens all the time is is the
client is then going to take the
finished product and they're going to
continue to add content to it. Change
content, add content because our
websites are le are living. they grow,
they expand with time. So, after you
check the front end before delivery, I
suggest adding like an interface uh a
tag 2.0. And what that is is that's
something uh for WordPress that it kind
of puts guard rails on the end user when
they're adding content. It helps them
keep their content accessible because we
could put out a perfectly accessible
website, but if if the end user or the
client adds some inaccessible contents
with bad contrast ratio with bad readme
text uh links, then that's going to kind
of break the site. So, it's it's just
important to to test the front end and
the back end to make sure that the the
what the client is using is accessible.
Now, for plugins,
again, I'm not here to tell people not
to use plugins. They are very useful.
Absolutely 100%. But I will give some
suggestions on some questions you can
ask yourself if you want to use that
plugin or not. So, use the plugin,
upload it, activate it, test it, make
sure you can reach it with your
keyboard. Make sure that that it handles
errors correctly by announcing it. Make
sure that um
all all the changes, dynamic changes as
far as like uh on because we have our
website or we have our desktop, but it
also be on on your mobile devices. So,
that's another area that really kind of
gets messed up. But it'll look beautiful
on your desktop, but once someone pops
it up on on a on a mobile device, you're
going to lose content. Sometimes they
won't uh refflow properly. You'll have
overlapping content. So, you want to
make sure the plugin's not doing any of
that. Make sure you're you're zooming in
to 200%, 400%, putting it in a mobile
state. Make sure nothing's overlapping.
And if you want to go the extra mile,
you can always check that plugin's VPAD
or ACR because that company should be
providing a VPAD and ACR. Uh an ACR is
an an accessibility conformance report
that tells you where the plugin
uh meets accessibility requirements and
where it doesn't meet accessibility
requirements. And that gives you kind of
a head start on knowing, okay, well,
this plugin is going to have issues in
these situations. And if you're not able
to get the plugin to work,
you're going to want to think of another
solution. Is there another plugin? Is
there another workaround?
I do a lot of workarounds because I come
across a lot of clients are like, "No,
that's my that we're using that plugin.
I am going to have a Google Maps." This
was a problem five, six years ago. I am
going to have a Google Maps on my
website. So, you may have to kind of get
creative and think outside the box. And
a a way to do that is that I found is to
make that I'm just using Google Maps as
an example to make that the secondary
way of the end user reaching that
information. So you can add a a primary
method of someone finding an address and
getting a d and getting directions and
then using the Google map as a secondary
way. If you do that, you're good. But
that's that's that's only in the cases
where the client's like, "No, no, I I am
going to use this particular plugin no
matter what." So, we want to make it as
accessible as possible. And then
obviously let them know, well, there's
some accessibility issues here, but
we're going to do a workaround, and if
you still want to move forward with it,
we will.
Again, this is this is really big. You
want to make sure that you're testing
the end journey, not just, okay, I put
the theme up, let's run a scanner. Okay,
let's add this plugin. Let's run our
scanner. Let's we did this piece. Let's
let's run our scanner. You want to put
the site obviously check as you're going
and to make sure make sure you're doing
everything properly, but at the end when
all pieces are together, when you've
built this car, you got to take it for
for for a joy ride. You got to you got
to figure out where the problems is. Are
there accessibility issues here? Is it
reading properly? Is there is there
reflow issues? And if there is, you're
able to kind of go back and and fix
those things. Things you want to check
are like the key journeys. Again, the
user journey. That's if you're building
an e-commerce site for for a client,
check the go through the checkout
process. Make sure an enduser can
actually uh take a product, put it into
the shopping cart, go to the shopping
cart, and buy it.
uh WooCommerce beyond the page. You want
to make sure again your popups work and
and make sure your website works in all
states, but it's important that you're
testing the the user flow at the end.
That I just can't express that enough
because although the law says every all
of your guidelines have to be all your
checkboxes have to be checked, at the
end of the day, it's about the
individual and it's about the user being
able to have access to everything we do.
So that's really the most important
thing. So just add that to your flow.
And when you do come across issues, and
we always will fix the problem. Don't
try to just add a layer of CSS on top of
it or find a plugin to fix it. It's
always better to just fix the the the
actual code, HTML or whatever it is. fix
the problem at the foundation because if
you just do a quick fix, the next major
update, it's going to rebreak and you
probably won't know because it's not
really in our flows to check
accessibility every time we update
something. So fix the foundation,
replace if needed, and if you absolutely
have to add some workarounds.
As developers, designers, agencies, when
we're building our websites, again,
you're going to be shipping off the
website and more than likely that client
is going to be adding their own content
and adjusting as you go or adjusting as
they go. And so I believe that it's very
important for us. WordPress does a
great, this is just another reason why I
love WordPress. Does a great job with
allowing you to add some guard guard
rails, your block patterns, create them,
test them, and then lock them. So if an
individual wants to add or rearrange,
they can use blocks that they know are
accessible.
Um, your theme, your JSON,
that's going to be really important as
well. So you can create that and and we
know the clients, they'll all have their
own their own company branding and they
have their colors and their logos and
everything they want to do. So it's real
important that you can add something
like this. So when they're adding stuff
and they want to use this color or that
color, if it's already an inaccessible
color, um they're just going to just
plaster that everywhere. So, in a way,
you're kind of limiting their options,
but you're giving them great options,
and you're allowing them to kind of have
their own sandbox to do what they want
and be confident that the the content
they're creating is more than likely
going to be accessible. That and again,
there none of these are end all bealls.
It's just not. So, always be on the
lookout. But what you can do is set your
clients up for success.
And really this is when I got into
accessibility for WordPress back in 2015
16. I had to work overtime to explain
the importance of accessibility and I
felt like a a cheap salesman
because I had to explain the importance
of accessibility legally as and then
explain the importance of it as far as
it's just what we have to do as a
community. come together and do these
kind of things. You're talking lawsuits.
Um if you're doing any kind of work with
the government or contracting or um RFPs
with them, everything you do has got to
be accessible and but nowadays it's kind
of starting to become more mainstream.
So I want to make a suggestion to
everybody in here to just add that as a
line item. I don't believe you'll have
to work real hard to justify that
because more and more clients I'm
working with fully understand the
importance of web accessibility,
especially with the new laws coming out.
Um, they were for April of 2026 that got
pushed back to April 2027 and for
government agencies with like 50,000 or
less than 50,000 constituents that uh
deadline is April 2028.
But but the the client, the end user is
starting to wake up to the fact that
this is important, that I'm not just
trying to sell them extra stuff. This is
very important.
Build accessibility in your workflow. I
learned this early on. This was really
the biggest game changer for me because
I learned early on that the real expense
is twofold. one the the real expense is
a client getting served a lawsuit.
Obviously, they got to lawyer up. Then
they got to bring somebody like me in
and they got to deal with the headache,
lose sleep. It's a mess. Um,
so
you want to build it into
the workflow.
So early on, okay, that's right. I
apologize. I lost my train of thought.
The other biggest part of that is is we
build a website. Right? We make this big
beautiful website and then the client's
like, "Hey, I got served papers." Or,
"Hey, uh, I have a a friend with a
company that just got served a lawsuit."
And then we have to go back, we have to
audit the site, we have to fix the site.
You're talking thousands of dollars for
a small site. But had we had just built
that process into our workflow, we could
have shipped the project um to be fully
accessible from the beginning. And
again, add it as a line item. Say,
"These are what we're doing. We're
building your site to be accessible from
the beginning. It's a little bit more,
but it's going to be way less in the
long run, and it really won't add that
much uh time or scope to your project if
you're doing it from the beginning. So,
discovering design right from the
get-go. When you're discovering, ask the
questions. When you're designing, add it
into your design. When you're building,
build it. Author, test it. Once it's
done or as you're building it, test it.
Make sure you're testing it. Verify it's
accessible. And then once you launch it,
maintain it. A lot of times I have the
majority of my clients want the uh
ability to add their own content as they
go, which is fine, but then we will
we'll check in quarterly, or we'll check
in uh annually, by annually, or after
any major updates. A lot of times I have
clients that just say, "Hey, listen.
this month we've we've created these
these blog posts or these pages. Can you
just skim over them? Make sure
everything's good. So, that's going to
be part of your launch and maintain. And
again, it's a line item for you. This is
a way to
I don't want to say it's it's just a way
for you to to really offer and provide a
absolute needed um
project, but also you're getting paid
for it. So don't feel like early on it
was I got a lot of push back from
developers and designers saying well
this gonna add so many hours and and my
clients aren't interested in this so I
don't even want to mention it but I I
really believe that the tide is turning
the clients know about this and I've
actually seen a few instances that when
I talk to them they say you know what
you're the first one to mention these
kind of things to me I'm going to go
with you because the other developers
and agencies didn't didn't mention
accessibility at all and the client
Clients are becoming more and more
educated. So, don't feel bad about
mentioning it. Add adding adding it to
your scope.
All right. What I want you to do today
for me, if anybody here is available,
you can open up your laptop right now
and I want you to tab through your
homepage the same way I was tabing
through. I want like for you to just
check your interactive items, your your
um your input values, all those kind of
things. Make sure you know where you
where your focus state is.
Tonight when you're at your hotel, spend
10 minutes. And this is this is
something I highly recommend. Download
NVDA. It's a free screen reader. It it's
actually created by two low vision um
developers. It it's my personal
favorite. Turn that on and just start
navigating your site and hear what they
hear. I always like to say, close your
eyes and just start clicking the tab
button and see if you know where you
are. And when you open your eyes, see if
you can tell where you are. If you can,
you're you're ahead of the curve. If you
can't, you know what to work on.
This month, I personally would take one
of your clients, maybe your best client
or your most recent client, and and
navigate their site, figure out what's
good and what's bad for accessibility.
um they they will be they will be
thankful and you can add it you can say
hey listen on our next iteration because
we when we deal with clients it's not
usually oneoffs it's we we deliver the
product but then we get we be we're kept
on board so we're able to say okay here
here are some things maybe our next
check-in we can address that because we
have x amount of hours this month to use
to spend on the website for maintenance
we're going to do these couple of things
and it really kind of I've learned that
it makes the client feel better.
All right. Well, that's pretty much the
bulk of it. I on our website, I have
compiled some free resources for
everybody. So, if you want, you're more
than welcome to scam that. You can just
go to our web page. It's going to give
you some some free resources that you
can use for your accessibility. Um, and
I would like to say again that we do
have a plugin. So, I'm not trying to
ex any any plugins. They are very
helpful. But just remember that the
plugins are just a tool in your tool
belt. You are the contractor. You are
the mechanic. These tools do will not
fix the car by themselves. That that
hammer and and drill are not going to
build the house by themselves. They are
your tool.
Please use them. Um yeah, that's it. Is
there any questions, concerns?
Yes.
Hey, can I jump in there while he's uh
working his way over there?
>> Super. And before you do, I'll just
mention uh we'd love to have you if you
have uh questions, ask them. We have
about 10 minutes left and so if you'd
like to ask a question, just line up
behind the gentleman at the microphones
right now.
>> Thank you.
>> Go for it. Oh. Oh, thanks. Uh thanks for
the talk. Absolutely.
>> Uh you mentioned that you had um um It's
weird hearing my voice over the speaker,
isn't it?
>> Yes.
>> Uh you mentioned that you had automated
testing tools that could check up to 80%
of accessibility issues.
>> Um would you mind sharing what those
tools or tool is?
>> Yeah, absolutely. And I just want to
make it clear 80% I was being very nice
because I don't want to hurt any
feelings, but yes. Um
>> I'm used to around 30%. So yeah. What
tool are you using that I'm not using?
>> Uh there's a lot of them. Um you have
Axe Dev tool, you have Wave, you have
the Google Lighthouse, you have Andy. Um
I use the like uh developer inspect tool
a lot. Um and and what I found that
these tools are good in certain areas.
Wave is great in checking my header
hierarchy and checking color contrast.
And is great at checking like alt text
and interactive elements. Um, Google
Lighthouse is is really just kind of a
backup. Um, Axe is kind of a go-to
because I feel like they're the better
one in this space, but even they will
tell you we're only catching 70% on full
maps. Uh, we only have 70% um,
confidence in what we're finding. So,
that's saying that even if they find
something, they're only 70% confident
they found it. That's not even including
things that they haven't found. So,
those are pretty much the tools. I would
not use overlays.
Shameless plug here. We have a plugin
that helps um test. It also helps you
bring all of your images into one place
to add alt text, send them to the front
end as a contrast checker, free
resources, stuff like that. But th those
are the basic ones.
>> Yeah. Yep. Sounds good. Thanks.
>> Absolutely.
>> I have uh two questions, but the first
should be pretty quick. Um, first
question is for the focus indicator
when, uh, you're working with, you know,
some focusable items that are on a dark
or medium colored background, uh, do you
try to apply a universal focus indicator
that works on any background color or do
you do a uh, you know, a unique one for
those uh, color variations?
>> Right. No, that's a great question and
I've come across this quite a bit and
what I found to work best is you get a
focus indicator that's two colors or a
sandwich. It's like it'll be like a two
black outlines with a white center. So,
no matter what they're against that
you'll have proper color contrast
because that's a major problem. Uh just
because you have a focus state
indicator, I see a ton of them that that
actual focus indicator does not have the
proper color contrast. So, that is a
major issue. So that is a way that I
found it to alleviate that.
>> Yeah. Like a combination of a border and
an outline.
>> Exactly. For each color.
>> Exactly.
>> Um All right. And then second question
is uh if you have the same image on
multiple pages, have you ever found that
it's appropriate to use different
alternative text uh for each image based
on the context of the page? Um or do you
always use the same alt text if an image
is used multiple times?
>> I typically use the same alt text. I
just try to keep it descriptive, one to
two sentences in general, but I have
come across situations that that you
just mentioned. Um because sometimes an
image I want to say could have like a
duality meaning, but sometimes you can
pull different things out of it
depending on the content around it. So
the real important key here to think
about is that uh is that alt text
describing the image properly for its
use in that content?
if if that makes sense. So it it you
could need different alt text kind of
slightly different if it's in a
completely different content setting,
but in general I would try to keep the
alt text the same short and descriptive.
>> Yeah. The example I was thinking of is
like if somebody has a profile picture
on the team page versus if there's like
a, you know, a full article about them
on a blog,
>> like how descriptive each of those
should get. Should it cover, you know,
uh how much of describing what they look
like versus what their relation is to
the the uh content on the paper?
>> Right. So, I mean, in this in this exact
uh situation you're mentioning, I
personally would just be very vague kind
of this is uh you know, a head shot of
so and so or this is their profile, a
profile picture of so and so and just
kind of leave it at that. We don't
really need to describe the individual
because what's going to happen is just
going to make a really long alt text and
then and then that individual is just
going to have to deal with all of that.
>> Yeah, it gets convoluted really quick.
>> It really does.
>> Appreciate it. Thank you.
>> Absolutely. Good questions.
>> Yes,
>> great presentation. Thank you for the
information. My question is around tools
like userway access that offer um I
think one of them offers 99%
uh and then they even give you money
guarantee if you do get a lawsuit. Do
you have any experience on those or any
of them better than the others or any
that should we avoid?
>> No, absolutely. That is a great question
because we fall in this trap of it's
it's WordPress plugins, overlays. Um,
I don't want to be rude. I hate
overlays. I hate them because for me it
gives the individual a false sense of
security. What happens typically if a
site is broken, they'll put an overlay
on it and all they're doing is just
slapping a layer on top of a broken
site. Um, so it won't actually fix the
issue. I would suggest the use of an
overlay to be after your site is
accessible, add an overlay just to help
out because they are great as far as you
can change the contrast ratio and text
size or cursor size. Those are great.
But other than that, I wouldn't rely on
them. And I'm not going to name names,
but there are overlay companies that
have been sued and owe upwards of a
million plus dollars because of the
claims like you you had mentioned that
they make. Um because in my opinion,
it's it's just not real. Because again,
if your site's broken, it it's it's an
overlay is more than likely not going to
fix the broken part. It just slaps and
really can make it even more difficult.
I actually just gave a a talk a
presentation at at a local word camp and
that was my focus were overlays. A lot
of times they add broken elements to an
already broken site. So for instance, if
you add an overlay to something and your
tab navigation does not flow in a
logical order that'll break that even
more because a lot of time that's the
second or third item you'll tab to. So
you'll tab and all of a sudden you're
down here and you have no idea and then
you're back up here. Um or it'll open
it'll open its window and not tell the
user it's open. So use an overlay but
have your site accessible first and use
overlay just as extra
>> if that answers your question.
>> Yeah. Any that you recommend that you
know are really great or you've seen I
don't know if you can name. No, just
because I don't really like them. But
there's a lot of them and and they're
pretty free. They're most of them are
free that you can add. But
>> as long as your site's accessible, I'm
okay with that. But just try not to.
>> Thank you.
>> You're welcome. Thank you.
>> Hi. Um, so I work in higher education
and we love our PDFs. Mhm.
>> Uh no matter how many times we try to
persuade them to turn into web pages
that some cases are special and we have
to have PDFs which are some of the
hardest things to make accessible. Um
but we currently use site improve and
they just released um a PDF
accessibility tool that will remediate
the PDFs.
>> Um
>> it sounds too good to be true in some
ways. Um and we're currently in the
testing phases. So, what are some things
that we probably need to like look for
um in a tool like that? Like some things
we might need to watch out for,
>> right? Um
there is no such thing as a tool that
will remediate a PDF or a website all by
itself. It's not it's just not it's not
there. The race has started. The we are
racing to get there, but we are not
anywhere near that point. if it's a good
tool, it'll tell you what it fixed and
it will tell you what you need to check
manually. It'll say check these items
again because a lot of times they'll
they'll it can tell if it image has an
alt text, but it can't tell if that alt
text is proper. Um, and there's a lot of
thing things that they cannot tell. So,
use the tool can get you so far and if
it's a good tool, it'll say you have to
manually check these items and then
stick them in other tools as well. You
got pack adobe. I mean we use common
look uh you know check kind of counter
check with other tools to find out but
right now and for the foreseeable future
there is no way to circumvent the human
person in that process.
>> That's what I thought
>> and that's what we do. But your idea is
right and that's what we suggest. If you
can take those PDFs and turn them into a
web page that's the best. But if you
can't then you got to remediate it.
>> Okay. Thank you.
>> Thank you.
All right. All right. Well, I think I'm
about to get the hook. I appreciate
everybody. Web accessibility is a very
important subject to me. So, I want to
thank everybody for spending your part
of your day, this part of your day here
with me. Thank you. Thank you.