Good morning.
My name is Rachel Carden.
I'm a web developer and designerfrom the University of Alabama,
and I'm excited to be here todayto talk about accessibility.
It's something that I'm very passionateabout and I very much believe in and support.
I'm excited today to talk about some toolsand techniques that you can do that are
really easy to implement to evaluateyour website for accessibility.
So, what is accessibility?
The very base principle of it is justa practice of removing barriers
with the goal of having accessible contentfor everyone no matter their disabilities.
Anything from images to videos to colors.
There is a wide spectrum of content andfunctionality on your website where you
could be excluding someone from accessingbecause of a certain disability or need.
I don't know if you watched the Grammy'sthis week, but there was a great moment
with Stevie Wonder and he was calling outa winner and the winner was written in braille.
And he made this great teaching moment atthe Grammy's about how we need to make
every single thing accessible toevery single person.
That is kind of at the heart ofaccessibility and what we do -
trying to make all content availableto everyone on the web.
I know we've all heard the mantra that information wants to be free,
but I truly believe that informationneeds to be accessible.
If we want it to be free to everyone,then it needs to be accessible.
There are things that we can do asweb developers and designers
to make sure that our informationand our content is accessible.
Because data does show that one in fiveof your users has some kind of disability.
You could be excluding 20% of potential users,clients, or students if you're an educator.
You could be excluding your information,
your lessons, products, or servicesfrom 20% of people.
I was having a great conversation yesterdaywith someone about accessibility
and they pointed out that we will fighttooth and nail to make sure websites
look good for old versions of Internet Explorer,and it's like 5% of your users are using
crappy old Internet Explorer and we go outof our way to make it work for them.
But 20% of our users have some kind ofdisability and therefore we should be fighting
to make our content work for them as well.
There are two general accessibility standards.
I am in higher education which meansI receive federal funding.
Not all higher education does, but mine does - it's a public university, which means that
we are required by law to meetSection 508 standards.
There are also WCAG 2.0 which is the currentstandard from WC3.
They're not all that different.
Section 508 is kind of similarto a certain level of 2.0.
2.0 has three levels -A, AA, and AAA.
Usually we try to strive for AA.
AAA is really nice and we shouldall want to be AAA,
but it's a little more difficultthough it is not impossible.
I wanted to go over some of the broad-levelaccessibility things that you can do.
All non-text content needs to havesome kind of text equivalent.
This largely involves image and videos.
So if you are blind and navigating a websiteand there is an image or video
but the image does not have a text equivalent,say a caption or an alt attribute,
then that person is missing out on thatcontent that you felt important enough
to place on your website.
Especially with videos, if there isno caption then if you made a 20-minute
tutorial then a deaf person is missing outon that information because they can't hear it.
Also, infographics were really big andthey still kind of are.
If you put a bunch of helpful informationin an infographic, someone who is blind
may not be able to read all of the textthat you placed in that graphic.
You can provide a text equivalent so theycan read all of that information.
A great example of this that I like to share -
I'm from Alabama where tornadoesare a big ordeal
and this is a graphic that is on a nationalweather service site for us.
It's basically how to be safeduring a tornado,
but there's no text equivalent for this.
This is all text in the photo, so someonewho is blind would not be able to read
this information and they are missing outon life-saving information that was not accessible.
Another big one that people don't thinkabout a lot is color contrast.
People who are color blind can have a lotof issues on websites.
You need to make sure that you providesufficient contrast with your colors.
A big example that I like to share is links.
Basically, we need to make sure that colorthat conveys information or direction
is not color-only.
A lot of people like to have linkson their site just be a color.
But what if you were color blind andmaybe you don't see blue?
You wouldn't see that link.It wouldn't stand out to you.
So there needs to be more than just color.
There needs to be, say, an underline.
There needs to be something that makesa link stand out beside just color.
This goes for any other information.
If you have some kind of alert or somethingand it's only notified by the color red,
that could be missed on someonewho can't see the color red.
If they are color blind, they would at leastsee the line.
So, something to think about as we design.
Pages need to have proper heading structure -H1, H2, paragraph tags, all that stuff.
Some people actually navigate websitesstripped of CSS, so your website needs
to be understandable if someonedoes not have CSS turned on.
This also goes to things like screen readers.
People who are blind depend on screenreaders that literally read websites to them.
If your page does not have proper structure,it is confusing.
Also, some people can't use a mouse and
have to navigate your website witha keyboard or another input device.
So, we need to make sure that we cannavigate with the tab button.
Just sitting down with your website andseeing if users could tab through
all of the links and the menus andnavigate your site simply using the tab.
A big foundation of accessibility is reallyjust a lot of good markup.
It's good HTML, it's good practice.
So, it's a win-win. Your website is good,and it also improves your SEO.
A lot of accessibility is good SEO.
So working on that alone can makea huge difference.
There is a lot of accessibility stuff, soI wanted to share these checklists that
you can use that WebAIM made that are reallygreat and walk you through each standard -
the 508 and the WCAG.
It does a really good job of showing youeach individual thing that they check for
and they talk about how to fix it.
Now I want to jump into the tools.
The really great thing about accessibility is,yeah it can be complicated, but we have
a lot of great tools that can help you geta large part of the way.
Even though we have all of these tools andthis software helps, it always needs a human touch.
It still needs usability testing andsome of this stuff.
I do not recommend solely depending onsome of these tools to do everything.
Always test and experiment.
If you can do any kind of usability testingwith people helping you out with disabilities,
that's always very helpful soI would recommend that.
Up first is a big one - the WAVE tool.
WebAIM is a big advocate for accessibility.
They do a lot of cool stuff and they madethis tool that tests for Section 508 A and AA.
It's in-browser testing which is really greatbecause you pull up their website,
you put in your URL and it shows you.
There is also a Chrome extension and an API.
It's paid but it is cheap, it's like penniesfor each test.
It will basically give you results via JSON,so then you can do something with that.
If you don't need all that, what theyprovide for free is still pretty good.
So, I'll pull this up and show you real quick.
We'll test wordpress.org - it's not that bad.
They do a good job over here of showingyou how many errors - there are 2 errors,
6 alerts which are things thatneed to be looked at.
They actually implement 6 features andthey use some ARIA stuff.
ARIA is attributes you can add to your HTMLthat kind of help with accessibility.
It's like labeling - like, this is my navigationand this is a search field.
It kind of helps screen readers and otherdevices understand what your HTML
is supposed to be doing in order to helpthe user interact with your website.
They possibly have some contrast errors.
If you come down here they list them outand you can click on them to find them.
They have an empty buttonand an empty link.
If I remember correctly theyhad some structural issues.
Basically it will tell you if you have anH1 and skip to an H4 - that's a problem.
Where are the H2s and H3s?It needs to go in order.
So it helps you point that out and helpspoint out if there are no alt attributes.
It really gives a lot of information tohelp you go in and clean it up.
This is the Chrome extension.
Let's say you have a website pulled up,you just click this button and it pops up.
Really easy, really quick, and you don'thave to put anything on your website.
You just have to pull it up in a browser.
It makes it really easy to jump in andsee how your website is doing.
Next is this kind of new scriptthat popped up I think last year.
It's pretty cool - it's called "tota11y".
If you are a Twitter person, "a11y" is theshortened nickname for accessibility.
It's the hashtag we use to talk aboutaccessibility - so #a11y.
So that's where "tota11y" comes from.
There are a couple of other toolsthat used "a11y" as well.
There are 11 letters between the "a" and "y"in accessibility, so that's why it's "a11y".
Accessibility is a long word.
tota11y is pretty cool. It's justa JavaScript file you put on your website.
It adds a button to the bottom left corner,so really it's more for development environments.
It's not something you'd put on yourpublic site unless you're wanting to
have some accountability from your usersfor accessibility.
You click the button and a report pops up.
It talks about alt attributes, color contrast,heading structure, makes sure that your
form labels are accessible, and checks ifyou are using any ARIA landmarks.
It's really handy.
There is also, if you don't actually want toput it on your website,
there is actually a Google extensionfor that as well.
So if I click this button, tota11y pops up.
It checks for color contrast and even tellsyou what the ratios are.
Basically, the ratios depend on size.
You may have good contrast but your font isreally small, so you need to have better contrast.
It's more flexible if your textis really large.
Some of the color contrast stuff they testis not always 100%.
There are color contrast checkers that youcan go in and say, "this is the background color
and this is the foreground color" and itwill tell you if it's a pass or fail.
Don't always depend on these contrast checkers.
Something else that's really important foraccessibility about links is that links need
to have clear context.
"Click here" is really bad for accessibility,and I'll explain why.
Imagine if you're depending on a screen readerto read a website out loud to you
and you come up to a "click here" you haveno idea what "click here" does.
And then you click it and get there, thenrealize it's not what you wanted.
Now you have to go back and read thelast page all over again.
So "click here" is not helpful.
Links need to have clear direction as towhere you're going when you click the link.
"Visit our programs page" or"Learn more about our programs"
are much more helpful for everyone.
It will also check for blank links orrepeat links.
A lot of us will have the logo as a link,then next to it your name is written out
and that is a link.
That repetitiveness can be really confusingfor accessibility because the screen reader
is having to read that aloud back-to-back.
So if you can, try to keep from havingthose repetitive links.
It checks for alt attributes and tells youwhen you're using ARIA landmarks.
Another really fun tool to useis CodeSniffer.
It's a client-side script thatchecks your source code.
It checks for Section 508 and itchecks for all three levels of WCAG 2.0.
They offer a variety of tools as wellthat I will show you.
This is a popular one, a lot of developersreally like this one.
It's kind of new to me. I've only recentlystarted using it but it's pretty cool.
Then I discovered that other tools are actuallyusing this as their backend, so clearly
a lot of people really like this tool.
So this is their website and even on here,all their code is on Github,
so you can go on here and paste some littlesnippets of code if you don't want to test
the whole webpage.
You can go in here and just paste some codeand pick which level you want to test against.
There is also a bookmarklet which I put up here,so you just take the bookmarklet and drag it up here.
So then you go here and click CodeSniffer, and thislittle thing pops up that tells you your errors,
your warnings, and things like thatwhich is pretty cool.
And you can even view the more extensive report.
What's really great about all these tools isyou don't have to necessarily put any stuff on your site.
All you need is Chrome. There is also some Firefoxstuff, but they live more in Chrome.
So this is really great, the stuff at yourfingertips is really quick to check.
You don't have to put any files on your site.
If you are the kind of person who wants toput some stuff in your development workflow,
there are tools for that as well.
It just depends on how deep you want to go.
pa11y is another great tool, and they offera great variety of toolsets for you to use.
They also test against all the standards.
They provide a dashboard that you candownload and self host,
and then it gives you all of this greatreporting information.
They even have a demo that we can pull up.
So it's all open source and it's all free.
You can sit here and try out thedashboard demo.
Basically what you do is you put in differentURLs that you want to check,
and it has this nice dashboard that shows youa glimpse into your errors and such.
So, Twitter is feeling rough.
But you can go in here and see a more detailedreport of everything, and you can
download different files. You can showdifferent states so you can kind of see
the progress you've made, which is whatthis is up here.
It's nice in the sense that you can see progress.
Maybe my site's not 100% accessible, butI improved 40% of it today and tomorrow
I'll keep working.
So this is a really nice tool.
They also have a web service you can setupwhich basically prints out your information
as a JSON API that you can use.
They also have it where you can run it inthe command line for all the command line
and terminal nerds in here that like to do that.
You can come in here and type "pa11y" and"wordpress.org" and hopefully it works.
Here we go - it shows you all the information.
By default it checks for WCAG 2.0 AA, but youcan go in here and change the standard.
You can change the standard to say Section 508.
So I'll pull up my university's website.
So now it's changed to the standard that wehave to follow.
It's looking and trying - so there we go, weonly have 2 errors so we have some work to do.
166 warnings, we have some work to do.
So there you go, good grief!It's going and going and going.
I think from the command line you can printout a CSV file and do all that stuff,
so pa11y's really cool and what's reallygreat is that it is open source and free
and you can take advantage of it.
They use HTML CodeSniffer, so that's a greattool that I would definitely recommend checking out.
I love the dashboard thing and the factthat you can self-host that.
At UA we could do that. We could self-host ourown dashboard and put all of the
university websites on there and have thisreally great overview of how accessibility
is doing on our campus.
I may actually do that when I get back.
Axe is another great tool.
It's kind of similar to tota11y in thatit's a JavaScript file.
It pretty much literally is just a JavaScriptfile that you can use to print out the errors.
You can go in and tell it to print the errorsto the console, so that's neat.
It's made by DQ and they do a lot ofaccessibility work, so kudos to them
for making this available.
Also, you can use Axe in your developer toolsin Chrome, so you can come over here and
we can go into our console and here isan axe where we can analyze this page.
Thankfully pa11y's website has noaccessibility violations.
That would have been very embarrassingfor pa11y.
So that's another way that you can run somequick tests on your site.
If we pick on WordPress again we'll seesome similar problems.
It gives you some information and if you wantmore info there's a link,
and you can learn about the problemand how to fix it which is really nice.
So if you don't understand why it's a problem,it will help you learn and figure that out.
That's really nice, thank you Axe.
From here you can click the right arrowand it tells you if it's a critical problem
or if it's just a warning.
You can arrow through them, and if youclick "inspect" it will jump to the code.
It's a pretty handy tool and I use it a fair amount.
Definitely recommend that one.
There are also a couple of WordPress plugins,both made by the same person.
WP Accessibility tries to help you fix somecommon issues in your theme.
Access Monitor uses another tool called Tenin.
Tenin is a commercial tool so it's not free,but it's still beneficial.
I include a link to an article I'd recommendreading about comparing the free to the paid
and the benefits, and what you need.
There are very much benefits to some of thepaid services.
Generally the big difference is usually thepaid services offer pretty extensive reporting,
so it's the ability to say the service is goingto go out and check my site, then send me
an email if there are problems.
Maybe you're a one-man team doing a bunchof sites.
At my university I have a portfolio of60 websites, so I can't sit down and
check every website for accessibility issues.
I would never get anything done.
We do use a service called Site Improvethat scans our website, then I get a report
every Monday that tells me when there areissues so I can go in and fix them.
Tenin is like that. There are other ones.
We're about to implement a servicecalled SSB Bart.
There are a variety of tools paid and free,and it depends on what you need and
your resources and stuff like that.
I wanted to mention some other browser tools.
There is one - Accessibility Developer Tools.
It basically puts an audit in yourdeveloper area, and I think it will
pull up some reports.It can be pretty helpful.
I'd also recommend installingsome kind of screen reader.
Chrome Box is the common one in Chrome.
Chrome Box isn't perfect but it might bebetter than nothing if you don't
have any other options.
It's really quite interesting to try and seewhat it's like for people who depend on
screen readers to navigate your website.
It's really eye-opening to see.
Something else that's really helpful is theskip to content links you'll sometimes see
at the top of sites.
If you've ever wondered what that's for,that allows people who depend
on screen readers to skip over your headerand jump straight to the information.
Can you imagine every time you visit a page,having to be read the header every time?
That would get a little old after thesecond or third page.
Those links are really helpful and cansave someone tons of time.
Also imagine if you went to a page andthat's not what you're after -
you had to listen to the entire header tofigure out that this wasn't the information
that you need.
So those skip to content links you put inyour header are really helpful.
These are some other articlesI would recommend.
These talk about the different tools andkind of lay them all out for you
with the pros and cons and things like that.
It mentions much more tools thaneven I mentioned.
I would recommend checking out thesearticles and reading more about the
different tools available.
I'll tweet these out if you didn't get achance to write these down.
I'm @bamadesigner.
Some other resources - a color contrastchecker that I mentioned earlier could
be really helpful.
Like I said, the tools are not 100% reliablewith color contrast.
Sometimes you do funky things with designand maybe the tool can't quite pick up on that.
I would always recommend double-checkingthe color contrast.
If you wanted to learn more about ARIA, I woulddefinitely check that out.
It can be very helpful as well to kind ofhelp accessibility tools understand more
of what you are wanting to do withthat section of your website.
Last but not least, I want to do a pitch.
I work in higher education and we have acommunity and a conference going
for people who use WordPress inhigher education or just education
in general, and we just started.
You can learn more about us at WPCampus.org.
We have a conference planned this summer,July 15 and 16 in Sarasota, Florida.
So, I'll be back to Florida in July so allof you Florida residents, if you want to
come up to Sarasota it'll be a lot of fun.
I have buttons if anyone wants a buttonto put on their lanyard.
I also have stickers.
So if you want one, come and find me afterward.
Accessibility, like I mentioned earlier,is very important in higher education
not only because we require it by law,but because we want our information to be
accessible to everyone.
We are trying to teach and educate andshare our knowledge, and we want to make
sure that everyone can consume it.
Does anyone have any questions?
(inaudible)Just WPCampus.
(inaudible)I'm @bamadesigner on Twitter.
(inaudible)The hashtag for accessibility is a11y.
(inaudible)I've never seen any browser tools for Safari.
That doesn't mean they don't exist -prove me wrong. But, I don't know of any.
Thank you!