>> Information and then we can get right to the content.
So, welcome to today's AEM Center Webinar.
I'm Cynthia Curry [assumed spelling].
I'm Director of the AEM Center and it's my pleasure to introduce today's webinar.
Before we begin, we want to orient you a little bit to the Zoom environment.
If this is new to you, we want to make sure that you know your way around and you have access
to all the tools that are available.
We do offer live closed captioning.
To view those captioned, click the closed caption button in your zoom menu
and captions will appear along the bottom of your screen.
I want to thank Emily [assumed spelling] for her live captioning service today.
Really appreciate it.
These live captioned will also appear in the recording for this webinar,
which will also be closed captioned.
Although your microphone is muted, we really want to make sure we get all of your thoughts
and comments, so please do contribute often.
We have multiple people monitoring the chat and we have multiple people who are able
to address your questions throughout the webinar,
so we welcome those questions to come through the chat.
And, if they're not answered, we do incorporate them into archiving on the event page
for the webinar and you can always follow up with us,
but we do try to answer everybody's questions and comments during the time of the webinar.
When you select the chat, make sure that in the dropdown menu just
above where you enter the text for your chat that you choose all panelists and attendees.
By default, sometimes it says all panelists.
We want to make sure that everybody sees all of your comments and your thoughts.
And, Leslie O'Callahan [assumed spelling], are Operations Coordinator, will be dropping links
into the chat throughout the webinar for your convenience.
And, also if you are Twitting today, make sure you use the hashtag #aem4all,
so that you grab the AEM Center's audience as well.
Well, Leslie is putting those links in the chat.
Do know that there are resources for this webinar are available online at our website
and you can download those from the event page, which is at the bit.ly link on your screen,
also in the chat, but that's bit.ly/websiteA11y.
The webinar is being recorded and will be archived on our YouTube channel
within about a week, once it gets closed captioned and returned to us.
So, as soon as that's available, a link will be made available
on our website at that event page.
So, without further ado, I welcome Lynn McCormack
and Luis Perez to deliver today's webinar.
AEM Center's own duo.
So, thank you.
>> Thanks so much for that introduction, Cynthia, and thank you all for joining us today.
My name is Lynn McCormack and I'm the [inaudible] technologist on the AEM Center
and I'm joined today by Luis Perez.
Luis, would you like to introduce yourself and say hello?
>> Sure. Hello, everybody.
I'm glad to see you all again.
I did a webinar last week, depends on when you're watching this recording,
but I did one on PBS and now I'm back for website accessibility.
So, glad to be with you.
Normally, I'm based out of Florida, but I'm traveling as I'm recording this webinar.
So, I bravely join you from wherever I am from the country.
>> Thanks, Luis.
So, we're going to get started today.
And, so we have a couple of goals for our webinar today.
And, it's really thinking about increasing your awareness of how important it is
to have accessibility in your digital communication.
So, today we're concentrating on thinking about your website.
Last week we were thinking about pdf, but those things go hand in hand.
Many of the concepts overlap from the things we learned last week about pdf, so we'll cover some
of those again this week in the context of the website.
And, we want to really empower you with actual steps today,
thinking about more accessible websites.
So, we're going to give you some to do and some activities.
So, today's agenda is very interactive.
If you thought that today you were going to just sit back and relax for an hour
and just get things poured into you, I'm sorry, this is not what today is all about.
Today is going to be interactive.
We're going to be doing some polling.
We're going to be having you do an audit of your website.
So, as the title says, is your state, your district or your school website accessible?
I want you to be thinking about what the website is and where [inaudible] and how you can get
to that, because we're going to be using that as we move today through this webinar.
Okay. So, we are going to start with Question 1.
So, Cynthia, can you poll with Question 1 please.
All right.
So, Question 1 asks how accessible is your state, district or school website?
>> Lynn and Luis, you can see the results coming in, correct?
>> Yes.
>> Great.
All right.
It looks like just about everybody has responded.
>> Yeah. I think everybody is responding.
>> Oh, and we have more coming in as the poll is open.
>> Yeah, it looks like we just got Erin [assumed spelling] coming in
and maybe Ann [assumed spelling] as well.
So, welcome.
Welcome to the webinar.
I think we can - we could probably go through and show this one, Cynthia.
>> Oh, I thought it was.
I thought it was displaying.
Okay, let's see.
Share the results.
[Multiple speakers] there we go.
>> There you go.
Okay. Super.
So, we got kind of a mix, which is fantastic.
So, some of you feel really confident
that your website is fully accessible and that's really exciting.
I feel like our websites are really accessible and I feel like today,
I'm still going to learn something.
I'm hoping that some of you share some of the tools that you have.
So, even if your website's fully accessible, I feel like accessibility is a journey,
so we're still going to be learning here together and if you have something
to share, I would love for you to share.
So, the largest number of folks said that your websites [inaudible] accessible.
So, it looks like you're on a journey for trying to make yours more accessible, so that's great.
Our website's not accessible.
This is a no judgment zone here today.
So, for sure, I want you to feel that there's absolutely no judgment here at the AEM Center
and we want you to join us on the journey for accessibility.
And, we just hope that every day that things are a little bit better
than the day they were before or that you're just on a path to that.
And, some of you aren't sure.
And, I hope that - we're definitely going to answer that question today
about whether you think that you have some work to do or not.
So, great.
Thanks so much for sharing your thoughts on where you are right now.
So, do you have to do something to turn that off now.
Cynthia?
>> You all can just close it out on your screen.
Just close out the window.
>> Okay. Do I close it out or do you close it, Cynthia?
>> Each of you has to.
>> Okay. Super.
Great. So, when we say accessible, what do we mean by accessible?
So, we want to make sure that all of our users regardless of their differences
that they have the ability to access the same information, have the same interactions
with your website, access the same services, with really the same equivalent ease of use.
So, I'm hopeful that we're all on the same pages for what we think about as being accessible.
It's the functional definition what accessibility is.
And, those user differences, about 20% of the population has either a diagnosed disability,
but it's really a continuum in that we are all on that continuum at some point in time.
So, we think about that there's visual differences, like color blind, low vision,
no vision, but you can think about the fact that when you're in bright sunlight that,
so really all of us have a continuum
of visual abilities depending on the context that we're in.
We think about the hearing deficits that our users might have.
We think about deafness, hard of hearing or perhaps being in a noisy room.
All those affect the way people can hear the information on our website.
Our users might have motor differences.
They might have difficulty with fine motor control.
They might have difficulties using a keyboard.
They might be using a switch only.
They might have slow response time.
They might be in a bumpy vehicle.
So, there's a continuum of motor differences as well.
And, also thinking about cognitive differences.
So, they might have focus issues.
They might have learning differences.
They might be sleep deprived parents.
They might have had too much coffee that day.
So, there are a lot of differences that we have to really think about in our users
as they're trying to access our website.
And so, I wonder if this is old news, but it might be new news for some of you.
So, there were two suits that were settled back in 2015.
And, these really formulate our plan for thinking about accessibility.
So, the first suite was the National Foundation
for the Blind vs. Seattle Public Education System.
And so, often times we think of our website we might think of the student or maybe a teacher
that none of my students have any differences, so I don't have to worry about that.
But, in this case, a blind parent could not access the student's materials in trying
to help their student with their homework.
So, you really have to think across the board of the abilities for all of your users,
even the users that you don't know.
It could be somebody who's tutoring somebody.
It could be someone's grandparent that's helping for an evening.
So, you're going to have to think all of the users, even if you haven't identified
who they are and have to just really think about all the users.
And, then the second case also in 2015 was edX and they had an issue in that as a resolution
of the platform in that case was accessible.
And, in that case, the content was not accessible.
So, there's a combination of both of those things.
So, you as a school department may have bought a system to deploy your website
and that back system is accessible, but if you're putting materials on there
that are not accessible, it still means that your site is not accessible.
So, it's important to think about both of those things.
Even though you've gone and bought the right tool,
you have to make sure it's a continuous evaluation process to make sure that everything
that you put on there is also accessible.
And, if you're interested in learning more about certain cases that have happened,
you can actually search the Department of Ed, Office of Civil Rights
for resolution agreements covering Title II of the ADA.
So, for example, I looked in Massachusetts and there are nine different documents
and some interesting cases that you can look at.
And, if you're looking just across the states with no state specified,
we found over 1000 different documents.
So, it's kind of interesting to look at what's available and look at what the resolutions were.
There was a time about a year or so ago, I don't want to get into any politics,
but there was quite a lot of new cases happening and because of the [inaudible] find
out right now, there are fewer cases happening, but it's still really important for us
to be addressing these situations, not from a punitive or worrying about a punitive situation,
although that possibility is out there, we're really thinking about serving all
of our constituents in the best way possible.
So, general outcomes from those cases, here's some general outcomes from those cases.
So, in your organization, you should have an accessibility coordinator,
you should have a published process for reporting accessibility issues,
you should have a published accessibility policy, and you should have some kind
of accessibility audit and that standard right now by the way is WCAG 2.0AA,
but WCAG 2.1 was released in June of this year.
And, we're going to talk about each one of these things.
Oh, but first we've got another poll.
All right.
So, Question 2 is in progress now.
You can answer all of these that apply to you.
So, do you have an accessibility coordinator?
Do you have a process for reporting accessibility issues?
Do you have a written and publishes accessibility policy?
Have you recently performed an accessibility audit?
And, maybe you're not sure of any of those things.
So, these are things you're learning about today.
>> All right.
Right now, we have about 65% of our attendees have responded.
So, we'll give a little bit more time for people to decide.
>> All right.
>> All right.
So, I'm going to go ahead and end the poll.
Oh, we've got 19.
Do we have -- there's one person who hasn't responded.
If you'd like to respond, now would be the time.
All right.
I'll go ahead and end the poll.
>> Excellent.
All right.
So, about half of you have an accessibility coordinator, about 40% have a process
for reporting accessibility issues, 37-40% have an accessibility policy, excellent,
and nearly 60% of you have performed an accessibility audit.
So, that's really exciting.
And, some of you are not too sure and that's okay because we're excited
that you're here today to join us to learn a little bit more about this.
Great. So, Luis, do you want to take this section or do you want to talk
about the accessibility coordinator first?
>> I'll let you go ahead with the accessibility coordinator first
and I'll fill in some of the gaps.
>> Yeah. Excellent.
So, your organization should have a person who represents the accessibility coordinator.
It could be part of a [inaudible] person if you're a small school
or if you're a large district, it certainly could be an entire person position.
So, it really depends on the amount of resources that you have.
And, that person must be able to understand that diversity of users we were talking about earlier
because really you're going to be representing those users and their best interests
and making sure that you are covering each one of those users
and giving them the best possible user experience.
You have to understand both the content and the context so that you're delivering
that information in the best way possible.
And, you have to be able to advocate for the needed resources.
So, you have to be able to advocate for resources ongoing because making sure
that you have all the accessibility features that you need.
For instance, making sure as you move forward that you produce videos that have captioning
in transcripts, so making sure you have the resources
to have those additional features that you may not have right now.
And, if we find out today that you need some work and that your sites are not accessible
as you expected, that you need to be able to advocate
for those resources for that remediation.
And, also this person should be involved in any sort of tech decisions that are happening
within your educational organization, whether it's a school, a district, a statewide.
So, in any of the tech purchasing decisions,
they should have some understanding in those areas.
And, if you don't have an accessibility coordinator and you get through the end
of the day today, then I'm going to plead with you to work within your organization
to have somebody assigned to this role or maybe raise your hand
to [inaudible] obviously you're hear today to learn about these things,
so that would be fantastic if you were stepping into this role as well.
So, we welcome you to do that.
>> And, what I would add, Lynn, is also
that where this person sits makes a difference as well.
So, depending if you're a larger organization, larger university,
where they sit sort of frames their position a bit.
So, depending on where they sit and, you know, your ADA office or your compliance office
or either a part of, you know, instructional design and so on.
So, that's an important consideration as well, as you're sort of defining that role.
Where is that person going to sit within the organization?
>> Super. So, let's talk a little bit about the accessibility policy and contact.
Luis, do you want to handle this one?
This one is specifically the screenshot from the Seattle Public School,
which is one of the cases that I mentioned earlier.
>> Absolutely.
The accessibility policy is really important because that provides a way for individuals
with disabilities to let you know if there are some issues with the website
with their experience, with your web applications.
So, it's really important as a best practice to have a variety
of ways that people can contact you.
And, so that may be email, it might be they can call you on the phone.
That could be snail mail.
Yeah, some of us still use that from time to time when we can find the stamps.
So, just the main idea there is that there's multiple ways to contact you.
And, we recently updated our accessibility statement within the AEM Center,
so there's a screenshot of it here.
When we looked around at a number of different accessibility statements and kind
of identified some of the common features that they had, that was one that just kept coming
up time and time again, making sure that there's multiple ways
to contact somebody whose responsible for maintaining the website and making some
of the fixes that need to be made.
Along with that, sort of helping the user by having some clear statements that, you know,
explain what you've done to make the website more accessible.
So, that could be including, you know, a skip navigation link.
We'll talk about a lot of these other options later.
Making sure that you're transpiring about which standards you're addressing
when you're working on your website, at what level.
So, you know, Lynn already mentioned that could be section 508, that could be WCAG,
so making sure that you're clear on that.
Any special features that you include for your end users to improve their experience.
So, for instance, on our website, we have a feature called speech stream,
which provides text to speech for any of the content on the website.
So, just making sure that people are aware that that accessibility support is there along
with what you've done to make the content more accessible.
And, then I put in a couple of just sort of extra touches here
to round out the accessibility statement.
One is you can provide some helpful links to [inaudible] technology so that
if somebody is struggling with the website, you can find things like a free screen reader,
like NVDA on Windows or VoiceOver on the Mac or Narrator,
which is a built-in screen reader on Windows.
So, you're just saving a step for the person that needs
that support to be able to use the website.
And, then finally, and again, this is not an essential component,
but it's something that's great to share is, you know,
evidence of your commitment to the accessibility community.
So, for instance, [inaudible] has created a tool for figuration,
which is a tool for developing responsive, accessible websites.
So, anything like that that you're contributing to the community, that helps you going forward
because what a lot of these steps show, you know, having an accessibility coordinator,
having a clear accessibility policy and an accessibility statement is
that you're making a good faith effort to incorporate accessibility
and you're being proactive in taking some concrete steps
to improve the accessibility of the website.
And, that's going to come in and be helpful later on if we do have one of those complaints
that Lynn mentioned at the beginning.
It shows that you didn't just kind of sit back and, you know, not address the situation,
but you are proactive in the addressing it.
>> Yeah, and [inaudible] figuration here.
So, today we're sort of skimming the top of web accessibility today,
but Luis mentioned Figuration and figuration.org, the link was put into the chat.
So, as we're going through things today, if there are ideas you have for other webinars
or pieces that you want more information on, because we could probably do a whole session
on figuration and developing accessible responsive websites.
And, if you're interested in that, we'd love to get that feedback.
So, figuration.org if you've gone off and looked at that and say wow, that's pretty cool,
I'd love to hear more about that, please [inaudible]
and give us that [inaudible] feedback.
That's important for us to have.
And, important for us to serve you.
So, if [inaudible] to provide that.
All right.
So, one of the things with auditing, so if you're thinking about an accessibility audit,
there's two ways you can go about doing that.
You can have an outsider, an external accessibility audit
versus an internal accessibility audit.
So, let's just take a few minutes to think about those different ways
that you can have those audits and what might work for your organization.
So, if you're thinking about the first one, external, you're going to have to pay somebody.
In general, people don't do these for free.
So, you're going to have to hire somebody to come in and there's a whole range of folks
in this area that would provide you with accessibility audits.
And, they'll be able to bring to the table access to multiple environments.
So, if you don't know who all your users are, you actually may not have access.
You might be a, you know, a Chrome tool and that's what you have and you don't have access
to a MacBook and all different types of tablets and yet, you're serving parents or others
that are outside and they might be having those environments.
So, you may not have the ability to test on those environments and make sure
that everything works in those environments and along
with [inaudible] technology in those environments.
So, that's a consideration if you want to have a broad base of different types of technologies.
They may have access to a wider range of assistive tools and devices.
So, that's another capacity that they might have.
And, the [inaudible] here, I want to actually caution a little bit.
So, they may be experts in accessibility, but they may not be experts in your context area.
So, for instance, perhaps they are great at financial institutions
and that they make sure financial institutions have the best accessible websites
for people doing their banking.
So, that might be fantastic, but you are developing a Mac curriculum, let's just say,
and in that context, they may not be able to help you think
about how would I write alternative text or how do I do Mac markup language.
So, thinking about what things are important to you and what they're expert's in.
You want to make sure that those things match up, so that they're experts
and they have some understanding, education in your audience as well.
They may be able to provide you with some training.
They're likely very well trained and so that could be part of your sort of hand off process.
So, that's something to think about.
But, on the downside, they are generally going to do a snapshot of where you are right now.
They aren't necessarily going to be there in a week, in a month, and later on we're going
to do a mini audit and I have done this mini audit and it came out perfectly and I had
that in my presentation and then when I checked it yesterday, they had changed their website
and it no longer came out so perfectly.
So, it was this great example of where they probably had a website audit or something
at some point in time and then something changed.
So, it's really, it's important to think about after that accessibility audit,
how do I make sure in the future that I continue to keep up and have the capacity to provide
that level of accessibility moving forward.
So, you have to think about do I have the capacity to do this internally.
Do I have the expertise internally to be able to do this?
Do I have a sufficient number of environments internally
that I can have good cross representation?
And, do I have the right tool to be able to do this?
And, we're going to look at quite a few tools here today.
So, we're going to arm you with some of those tools as we move forward here.
You have any thoughts, Luis?
>> Yeah. One of the things that I was going to say is with regard to different devices,
a point that you made, especially with some environments that are somewhat fragmented
where there's just, you know, different versions of the operating system.
Not everybody updates, so it's -- when you contract with somebody, you know,
just make sure that they sort of do testing across, you know, desktop, mobile,
different operating systems, different versions, just to get a,
you know, sort of comprehensive view.
But, also as you mentioned, Lynn, it's really important to have a plan in place.
Things are changing so quickly and things are getting updated a lot more frequently now.
So, instead of just a snapshot, sort of have a plan going forward to how you're going
to build this, the sort of mini audits or whatever you want to call it
in your organization into the development cycle.
So, it's something that you're considering even when you have, you know, early prototypes.
You can present those prototypes to individuals with disabilities.
You can do some of this testing yourself and that will help you identify some
of these issues early on where it may be a little bit less expensive
and take a lot less work to fix them than if you wait until the end.
>> For sure.
[Inaudible] when you're early on in the process if you're developing a new website,
you definitely want to go through those steps to try to mitigate having something multiplied
by 10 or 20 or 100 or 1000 because it becomes much more difficult later on.
All right.
So, you've been sitting back.
You've got to sit back for 28 minutes, well, except for a few polls.
But, now it's time for you to start working.
So, I'm going to leave our presentation and you all are going to join me
and we're going to go to this website.
It's called wave.webaim.org.
And, Leslie has dropped it right into the chat window.
You're going to be able to go right there to the link.
Let's see.
It's going to look like this.
Everybody see that?
And, was everybody able to go there?
Now, I'm going to test the website that the AEM Center website and it's the page that has all
of the information from today's webinar on it, but I don't want you to go there.
Earlier on [inaudible] we talked about you checking out your website.
So, if you don't want to look at your website, again, no judgment thrown today,
you could pick somebody else's website,
but I'm going to grab the website that we're going to look at.
And, thanks for putting that in the chat window, because that helped me too, Leslie.
All right.
So, I'm going to take a look at the accessibility of our website.
So, right away you can see there are five errors on our website.
So, the first thing I'm going to [inaudible] you is that all of the tools that we're going
to show you today have the possibility for leading to false negative and false positive.
So, all of these tools require a little bit of skill.
So, I know for instance that these places where it's giving me an error
that I haven't already add in there that describes what that is,
that the way that the school is picking it up is giving me an error.
It's given me nine alerts and it tells me I have nine features, I have 23 structural elements,
30 HTML5 or ARIA elements and I have no contrast errors.
I'll give you guys a second just to look at what you have on your tool.
All right.
So, now I'm going to go to the detailed listing on here and I'm just going to walk you
through some of the things that I see and I want you to look at the things that you see.
I don't expect that you're going to see the same thing that I see.
So, yours may have five errors.
It might have zero errors.
It might have 30 errors.
Again, no judgment thrown today.
And, I wouldn't be able to explain what your errors might be.
I can only explain what my errors are here today.
And, so this is interesting in that it gives you an alert because our Word document
and our PowerPoint document are linked to the website.
And, as we talked about right at the beginning of this session and going back
to last week's webinar on thinking about inclusive pdf and making sure
that they're designed right, what it's saying is that anytime
that you have a document that's linked off of your website, you have the possibility
that that document wasn't built in a way for accessibility.
So, it's just giving you that notice that that might be and perhaps you have hundreds
of documents and perhaps those documents may not have been done
in a way that they are accessible.
So, one of the other features is you'll see your alternative tests.
You can see that I have alternative tests and images and I've got a [inaudible] error here
that says that I have form labels and I know that that in fact is our search that's
on our website and our search is appropriately labeled.
And, we'll talk about that a little bit as well.
It says I have a skip link and also a skip link target.
So, both of those things should exist and watch, I'll actually show you this
in action a little bit when we do a manual testing on some of these things.
And, then all the way done in structural elements, just curious,
how did you do on your structural elements?
So, this is actually going back to last week's webinar again.
It includes the pdf.
And, so how the heading structure is important because that's the way that users can navigate
through your document and understand different sections of the document.
So, there should be one heading one, potentially multiple heading twos, heading three,
and so just think about that part for a minute.
And, then how well is your document actually structured?
So, on this particular page, there's one header, one navigation section,
one name content section and one footer section.
So, that's the question, whether or not you have all the features.
I know on some other parts of the AEM website, we have both,
that top navigation and left-hand navigation.
In that case, on those cases, there's actually two navigation sections on the site.
And, then there's some ARIA information as well.
I'm not going to go into the ARIA today.
I know that I may have gotten one request for ARIA, but if there are folks on the line
that want to do a session that dives deeper into ARIA [inaudible]
because I think that's a little bit beyond the scope of what we have today,
then by all means, we can - you can let us know.
>> If I may chime in, Lynn, that fully I think that's a good idea to think
about doing a session on ARIA, but I also want to emphasize, you know,
try to do as much as you can with the standard HTML functionality that's provide as opposed
to sort of using ARIA as sort of like a go to.
So, think about how you can start with, you know, the native affordances of HTML elements
and then use ARIA doing to enhance that.
And, the same thing with CSS, cascading style sheets, right.
It's important to begin with a good structure and then use CSS to kind
of enhance that with the presentations.
So, separating the content from the presentation.
So, I just wanted to throw that in.
I think ARIA's a really powerful technology, but at the same time, I've seen that, you know,
sometimes it is possible to go overboard with it and sort of ignore some of the things
that you can do with the native elements.
>> Super. So, that's the highlights of the [inaudible] accessibility tools.
If you have any questions, I'm happy to take a look at that
if you wanted to enter that into the chat.
Hopefully, you all got a sense at least of what your site looks like in the WAVE
and feeling good or maybe not so good or feeling like, wow,
I'm going to leave this webinar knowing I've got work to do.
And so, Luis, do you want to show the other tools at this point in time?
And, then --
>> Yeah, and -- absolutely.
And, I also wanted to share a comment in the chat.
They say that the number one rule of ARIA is don't use ARIA.
And, so it's like Fight Club, the first rule of Fight Club [laughter].
And so, what's she's saying, what they're saying here is no ARIA is better than bad ARIA.
So, again, it's thinking about being really purposeful about how you use some
of these enhancements like CSS and ARIA and so on.
So, I'm going to take over the screen, so I think you have to release it, Lynn.
>> Okay.
>> And, then I'll be able to take over.
Let's see.
Yeah, I think I can take it over from here.
Just let me see and let me know if you see my [inaudible].
Okay. You all seeing my screen now?
>> I see the desktop.
>> Yeah, no.
We're still seeing -- now, we see - now we see your [inaudible].
>> It's coming.
So, just answering one of the questions in the chat, somebody asked
but what about third-party content.
So, I will drop this link into the chat in just a second, but the WCAG or the W3C
which is the standards body, they have some guidance on that,
understanding partial conformance related to third party content.
So, we'll go ahead and drop that into the chat in just a second.
So, one of the other tools in addition to WAVE, especially if you're just getting started
with web accessibility, I'm not sure how to pronounce it.
I guess we'll go with totally or, you know, total ali [phonetic], I don't know.
So, we'll come up with the correct pronunciation.
So, this is a tool, you may be familiar with this company called Khan Academy.
They produce videos and other content for learning math.
They started out with math, but now they produce content around a number of different topics.
So, this is a visualization toolkit.
It allows you to see the accessibility of a website.
So, I'm going to go down to the bottom and first of all, if you scroll down to the bottom
of the website, which will drop into the back, you can see how to install it.
It's really simple.
You just basically take a button that appears on the page and you drag it
up into your toolbar of your web browser.
And, so you can add this into a variety of web processes.
It's just a snip bit of java script that will do the work once you enable it.
So, when you click on that button on your toolbar,
you'll see an icon at the bottom of your screen.
It looks like eyeglasses.
Again, for the idea of visualization.
So, on the page right where you install it, you'll see some examples
that you can run the tool on to learn a little bit more.
So, I'm going to do that right now.
I'm going to bring up the eyeglasses.
I'm going to click on it.
And, then I can go ahead and select headings.
And, then it gives me information about the headings on the page,
including some of the errors that I may have, but also I can see the heading structure.
So, this is really cool.
If you want to see, well, maybe I skipped a heading level.
Well, that's one of the things that it's going to point out here.
So, in there you can see that we skipped a heading level
and so it points that out as one of the errors.
Another nice thing that it can do is it can show you the contrast levels
of some of the things on the page.
So, let me see if I can find one here.
So, here you can see this is an error.
The contrast is not sufficient.
There is a certain ratio that you have to meet for contrast level
in order to be compliant with WCAG.
And, so it says this is 3.17 when the acceptable ratio is 4.521.
And, there are a number of other tests you can perform here.
It can point out if you have any images that are missing [inaudible],
so they're missing the description and you can also show the structure of the page.
I'm going to actually run it on our website.
I'm going to go over to the AEM Center website and I'm going to enable --
I've already clicked the button on the toolbar.
I'm going to enable that and select landmarks.
And, then you should see at the top of the screen, it's showing us where the navigation is,
it's showing us what some of the button roles are and so on.
So, again, this is not an audit tool, but if you're just starting out and you want
to learn more about these features, it can help you see those features visually.
Things like landmarks, labels for your form elements,
link text to make sure that it's descriptive and so on.
So, that's one of the tools that I wanted to share with you.
The other tool is something called AXE, A-X-E.
What's nice about it, it's a free Chrome extension and you run it
on your Chrome web browser and then it adds a special tab
to your developer tools within Chrome.
So, let me see if I can bring that up on here.
I'm going to go into more tools and then I'm going to choose developer tools.
And, that will come up as a tab on the side.
So, for those of you that are a little more techy oriented, this would be a great tool.
It's sort of the next step up from the WAVE tool.
And, so in here, I should be able to find a tab.
Let me see.
I may have to drag this out a little bit, give myself a little bit more space.
Let's see if we can do that.
There we go.
AXE. And, then I will select analyze.
And, it will do sort of something similar to what -- oh, I'm on the Chrome extension.
I need to switch to another page and then I can do that.
So, let me see.
In the interest of time, just know that that's -- I'm going to skip that step,
but just know that it's another tool that you can use in addition to the WAVE tool.
It's a little bit more comprehensive, but with all of these tools, they give you some help.
So, it's not just about identifying what's the error, but also here's how you can fix it
or they'll give you a code snip it that you can review to see exactly where the error is.
So, let me see.
How we doing on time, Lynn?
Because I want to run this.
And, I'm committed to it.
[ Laughter ]
Yeah, it should only take a second.
So, I'm going to do analyze and this one better be good, because it's from the W3C [laughter].
So, in here, you can see it gives you the errors and then it organizes them
into different categories, so things like form elements, having a visible label,
all of these different issues that you may come up with.
You can see there's some contrast errors here too.
So, like I said, with any of these things, you can select it and then you can find where it is
in your code and it gives you some guidance on how to fix it and so on.
So, again, WAVE is one tool, AXE is another.
There's a number of them out there.
There's a number of them out there.
It's almost like when I work with a [inaudible], no one tool is going to be perfect
for every learner, so we choose a range of the different tools.
It's the same thing when you're doing this kind of testing.
You want to kind of check out at least a couple of tools to see if you get different results
because that can help you sort of see some patterns.
So, I'll go ahead and stop sharing and I'll turn it over back to you, Lynn.
>> Okay [inaudible].
Let me get back.
So, while I'm trying to find my place here,
so the other tool that's related to AXE, Luis, is AXE Coconut.
And so, I had to actually wait around with one of the -- sorry, so let's see here.
And, I was actually a little bit -- sorry, about that.
I'm just going to -- sorry about the screen [inaudible].
And, that actually is just [inaudible] at the top of the toolbar,
so you don't actually have to go into the developer tools.
But, it's pretty similar to what Luis just showed us which is great.
And, I just wanted to say about the color contrast analyzer tool as well before we.
>> Yeah, this is one of my favorite tools that I sort of have available to me throughout the day,
because color is something that I'm really conscious of,
mostly because I need high contrast myself.
And so, this is a tool from the [inaudible] Group.
It's Colour, spelled, you know, the British way, Contrast Analyzer.
And, it runs on Windows and the Mac, so it's cross platform, and it's really easy to use.
You get these color pickers.
So, WAVE, the same people that created WAVE, Web Aim, they have an online color contrast checker,
but again, you have to open up your web browser and copy the color values and put them in there.
This is just a tool that you can sort of launch and just keep on the side on your desktop
on your system and then as you need to check the color contrast, you can bring it up
and just use the color pickers to choose your foreground color, your background color,
and then see whether it passes WCAG level AA for both normal text and larger text.
So, it's a really nice tool to have in your bag of tricks.
>> I'm going to second Luis.
This is one of my favorites and one that I will definitely use when I end
up with the color contrast issues I'm trying to identify.
All right.
So, no matter what, all those tools that we just showed you, there's always going
to be some manual thing that you're going to have to check.
So, for instance, it might check whether you have all text, but whether
or not that all text is valid, it maybe every single field.
It used to be tools that just defaulted all text into every all text field.
And, so, great.
It's valid and it runs through the checker, but it isn't actually very valid.
So, there's always some manual checking that has to happen and similarly,
for forms that they might be missing labels and that would show up as missing a label,
but it could also be like it says form field one.
Well, that's not very helpful to somebody if they're trying to listen to a screen reader
and know what is the form field one.
So, if it says first name, that would actually be much more helpful.
So, it might have that content, but the content may not in fact be valid.
And, I was going to walk us through a tab order exercise,
but I think that we may not have enough time to do that.
>> So, I'll add something to the tab order conversation, Lynn.
I think this is one of the easiest accessibility tests you can do is take the no mouse challenge.
So, basically, go to the website that you're interested in sort of considering in terms
of accessibility and just flip your mouse over and then see if you can get
around that website by pressing tab and shift tab.
I know in Safari, there's one extra setting you have to enable in order for it to work right,
but in general, most web browsers, tabbing through will give you a sense of what, you know,
that logical tab order should be.
And, then, sort of a nuance thing is not only can you tab through in a logical order,
but can you tell at each time that you press tab where the focus is?
Because that's something that's often ignored and if you can't see like where the focus is,
then it doesn't matter that it's keyboard accessible, that you can tab through it,
because the person may not be able to see where they are on the screen.
So, using some CSS sometimes, cascading style sheets, you can go in and style that focus state
so that, you know, it adds a thicker outline around the form element.
So, that's more of a usability suggestion, I think, that really enhances both the usability
and accessibility of form elements.
>> Yeah. So, that's perfect.
So, while you were talking about it, I was actually demonstrating it.
So, that worked perfectly.
Hopefully, you all were able to see that I have the website of AEM website up
and the [inaudible] page that we've been working on today.
And, so right the very top, the first thing I tab to once I get to the page as you can see
up there at the top, I'll go back.
It says skip to main content.
So, the first thing in the tab order should be something that says skip to main content.
And, we talked about those different landmarks earlier.
So, the main content would be it's going to skip any of the navigation
and go to the main part of the page.
And, just as Luis was talking about, I can see where I am there.
They're highlighting in bright green as I'm navigating across that navigation at the top.
So, hopefully you also had your website up in the background and you're able to take a look
at that and see how you did with your path order there.
>> And, another comment, Lynn, is people often think that the skip to main content link is just
for people that are using screen readers, but they also help people
that are keyboard users or keyboard only.
So, it's really important that, you know, that shows up when you tab through so
that it's not just accessible to the screen reader users
because they might be a keyboard only person or they might be a switch user,
so a switch access technology user.
And, it's important that shows through as one of the first items like you mentioned
when you first tab through the website, because they'll be able to use that as well.
>> Yeah. And, I actually am one of those people.
I have been programming so long, my mouse hand doesn't really work anymore,
so I am 90% keyboard except for when people make it really difficult for me
to get to some of those other places.
All right.
So, we talked about AXE Coconut and there's another add onto Chrome
and those are also in the digital handout.
You have plenty of opportunity to tryout all these tools,
but I want to hear from you now on Question 3.
We had some ideas when we started this about how our website were or weren't.
Some of us were unsure.
Some of us felt really confident.
And so, what are you thinking now?
Kind of agree with what you thought you had?
>> We're certainly hoping it's not yikes.
>> Well, but remember, no judgment zone here today.
>> That's right.
>> We're all working [inaudible], end of the seminar, you learned a few things
and you're enthused about doing better tomorrow than really, that's fantastic
and we're totally fine with that.
>> And, that's the key.
>> And, there are some yikes.
There are some yikes and they're growing.
So, that's great [laughter].
Bring on the yikes.
>> But, remember, I think with accessibility, I've always said this, you know,
perfect can be the enemy of good.
So, the goal is to each time that you go to that website, each time you do an update,
is there a new technique that you can learn and that you can incorporate as you sort of develop
that website or that web application to make it better.
Because that's really the goal is to make sure that, you know, people have a good experience.
So, how can you make that experience even better each time?
Hey, it kind of evened out actually.
We're looking at, you know, about, you know, 31% for great.
So, the mini audit and if that was the case, then you're in good shape.
You're on the right direction, heading in the right direction.
Good. We have 31% as well.
Yikes, 31%, but again, as we said, that just means, you know, you have a little bit more work
to do, but again, if you take a growth mindset to it, you can definitely get to a higher level
of accessibility and continue to improve.
And, then I'll try this later was 6%.
So, I just wanted to read those out so that you can see that or hear that.
>> [Inaudible].
All right.
So, I think [inaudible] some of these issues.
So, someone of the common issues that you'd find with potentially
that you either don't have landmarks or that your page structure is somehow not there.
That's very common.
That the heading structure or the outline of the page, you might have an H1, an H2 and then an H5
and people might have chosen that one instead of CMS.
And, I really like the way the H5 looks.
And, so sometimes those [inaudible] happen, so heading structure outlines not being
in the right order is common and you can work on that.
We talked about color contrast which is very, very common and that was the issue
with that site that I had used as sort of being the great example.
They had added the orange button.
Orange is notoriously difficult to get the right color contrast, so I wasn't surprised
when I saw the orange buttons that they didn't have color contrast.
Often times, we didn't talk about this much today, but you might have seen these
on your websites, is that you have these spinning carousels or spinning animations
or any of those sort of things, often times without any control.
In general, you should not start things moving on page.
Your user should have some control over that and at an absolute minimum, you have to be able
to shut those things off, but often times you might have used the tool
that has those carousels and you think those would be fantastic
and they get put into the page.
So, these are very, very common issues that you might find.
That skip link that we showed you, that may not be programmed into your site.
The tab order may be in some other order.
It might be in an order that's unexpected or out of order
with where you would expect visually to traverse the page.
The links may be on there without descriptive language.
You might have five links on the page that says see more or more information.
And so, somebody who is going through vivid screen reader getting to each one of those links
and they all just say more information, more information, more information.
So, that's not very descriptive, so making sure that those links are very important,
that they specify the unique place that each of those links are going to be going.
Making sure that your forms have valid input labels.
We did talk about that already.
All text is missing.
We've done this.
Or too long.
>> Yes.
>> Yes, that is such a thing, right Luis?
>> Yeah, and it depends on the image.
If you're working with stem content where you have a complex image,
obviously your old text is going to be more extensive and it also depends on the goal of,
you know, what you need to do in a learning context with that image.
But, yes, if the all text is too long, then the person who's listening to it,
they may tune out, tune in or tune out, right.
I was going add to the forms a quick tip.
One of the things you can do when you have a form is you can tap the label or click on it
with a mouse and if it's associated with a control next to it,
then the focus should go right to that control.
So, that's a quick way that you can check to make sure that, you know,
your controls are associated with the labels.
It's just by tapping or clicking on the label and if you have that in place,
that really helps out people that have motor issues.
They may not be able to click precisely into the text field or the radio button,
whatever that control is, but they may be able to move the mouse around and be able to click
on the label that may be bigger, have some bigger hit area.
So, that's again another simple test that you can do.
That's one of those manual checks that, you know, you can supplement at the automated test.
The other ones here, the audio and video, that's one where I would recommend.
A lot of times people will check at the beginning of the video.
So, make sure that you have a good sample.
So, make sure you go somewhere in the middle of a video and play a few, you know, a few seconds,
30 seconds, a minute there and then go to the end.
And, that's just to make sure keeping people honest, to make sure that, you know,
it wasn't lunchtime or something and they decided to kind of leave the job half done.
But, also you want to check about quality again.
So, just as there is the issue of quality with all text, there's [inaudible] issue
of quality with captions as well.
So, making sure that it's not automatically generated, but it's actual, you know,
high quality captions that are represented in that video would be important.
And, of course, we kind of touched on ARIA, but that's a more advanced topic,
but do you want to mention that, Lynn, a little bit.
>> Yeah, I was just going to mention the fact [inaudible] meant,
because often times people are like what is ARIA?
It sounds like an airplane or something like that.
So, Accessible Rich Internet Application, that's what the ARIA stands for.
And, again, if you're interested in that more, it's really about those sort of pieces
that move, those pieces that kind of come on and off of the page.
So, all of those often will have tagging so that your specific technology can pickup
on what those pieces are and get the right messaging at the right time.
So, that's an important part of many dynamic websites today
that do have the need to have the ARIA tagging.
So, we have about two minutes left here.
And, I want to think about addressing the gaps with you.
So, some of you today definitely felt like you have a place that you have to get
to that you're not quite there yet.
So, I'd love for you to take what you did today to help you think
about prioritizing perhaps what it is that you need to get to.
And, I'm going to skip right down to the bottom one, is that don't remove all the content
from your website and I'm going to say that, because Leslie just put
in the Berkeley [inaudible] online content.
So, last year, Berkeley -- it wasn't last year, but I think it was 2017, Berkeley had a bunch
of lecture style videos out on their website, 40,000 plus of them that they had
and they didn't have - they did not have the captioning that they needed.
And so, while many people could use them and found them very useful, they opted instead
of actually going through and remediating that, they just decided to take everything down.
So, I'm not suggesting any of you do that and that made me super sad.
So, if things are out there that are not accessible,
use this to think about how I [inaudible], how do I make sure that from here
on out I'm doing things that in an accessible way as best I know how to do.
How do I make a timeline to address the things?
So, what are the pieces of my website that gets the most traffic
and how do I remediate those pieces or how do I prioritize
and get the biggest bang for the buck.
All that, in all those cases that we learned about earlier, what they were looking for,
good faith effort, moving in the right direction.
And, so I really want to make sure that from today you're thinking about what is one step
or two steps that I can take to move forward with my website that's really going
to get me in the right direction.
And, even if it's just putting off an accessibility statement,
that would be fantastic.
And, it's 3:00.
Thank you so much.
Let's go -- we don't have time for questions,
but if you want to contact Luis or myself and please do.
Your feedback is so important to us.
So, if you have a minute right now to fill out the survey, we'd greatly appreciate it.
And, Luis, last minute?
>> Just wanted to thank Emily for providing the captions, thank Cynthia and Leslie
for their support during the webinar, and just to reiterate what Lynn McCormack, my good friend
and colleague said, just making a good faith effort and just aiming to be better,
aiming to just go higher with accessibility.
That's really the goal.
>> Thank you.
And, one last time, Leslie, excellent.
So, Leslie just posted.
If you didn't get a chance to download the slides,
everything is available at the bit.ly/websiteA11y.
Thanks so much for your time tonight and have a great day.
>> Thanks everybody.
Bye-bye.
For more infomation >> 'The Best Thing Donald Trump Can Do To Help Brett Kavanaugh Is Shut Up' | Velshi & Ruhle | MSNBC - Duration: 14:38. 
For more infomation >> Rochester man gets to Showcase Showdown on 'The Price is Right' - Duration: 0:42. 
For more infomation >> Kyle Eckert spins on 'The Price is Right' - Duration: 1:22. 
For more infomation >> Rep. Swalwell On Donald Trump Fraud Allegations: 'No One Is Above The Law' | Hallie Jackson | MSNBC - Duration: 5:11. 
For more infomation >> 1 dakikada 300 Spartalı ( this is SPARTAAAA!!!) - Duration: 2:38. 
Không có nhận xét nào:
Đăng nhận xét