Tip:
Highlight text to annotate it
X
So today Webcomm with OU’s Disability Resource Center
We’re here to talk to you about what that means,
why that’s important and how to make sure your site is accessible.
First off, accessible websites is required by law.
Federal Law tells us we have to make sure our sites are accessible.
This means that each department at OU is responsible for making sure your site is accessible.
That’s why we wanted to put this on and make sure you know how to keep your site up to accessibility standards.
More important than that, we want to make sure that everybody has
the ability to get that same information on our sites.
We don’t want to leave anybody out whenever they are coming to our OU sites.
Making sure that they can get all the same information regardless
of ability or disability.
Currently we have over 30,000 students...
enrolled across the three campuses here at OU.
That’s a lot of people, just in and of its self,
to be looking at when we’re thinking of accessibility.
We also have over 18,000 employees.
So, 49,000 people alone, just within the University, a lot of people.
Within the Disability Resource Center we have 485 students currently registered.
We also have over 22,000 visitors everyday at the OU home page.
That’s a lot of people.
And not all of those are contained within the OU community.
It could be anybody nationwide or worldwide wanting to get information from OU.
Screen readers we’ve mentioned a couple of times
and what these are, they’re a way for people with sight impairment or maybe somebody with dyslexia...
who can’t nesccessarily read through a web page very efficiently.
What will happen is they’ll use a tool or a software program that will read off the website to them.
I’m going to show you a demo in a second.
The first site we're going to take you through is the Web Communication's site.
[Screen Reader reads site]
Erin: It's telling you it's taking you to the OU Home page.
Erin: or the Web Communications page.
Erin: And then it's going down this left navigation.
Erin: So then this takes you through the content of the page.
We really need to think about all types of disabilities.
People with disabilities are one of the largest minority groups in the world.
About 1 in 5 Oklahomans has a disability, so that’s a huge amount of people.
People with motor and physical impairments often are using adaptive technology
to navigate the screen on their machine.
They may be utilizing their breath or they may be utilizing head motions to click a button.
We really need to be considerate of those kinds of accommodations as well.
Those with visual impairments can’t see the images on your webpage.
And a screen reader doesn’t know what that image is...
unless you tell the screen reader what that image is.
And you do that by providing alt text to an image.
It’s just a little piece of information you put into the code.
It needs to be very concise and very clear.
If you have a girl with a dog in your image,
you need to say that, girl with a dog. If it is a dollar sign you should say dollar sign,
If your dollar sign says pay now across it, it needs to say dollar sign that says pay now.
Any text you have that is on your image needs to be in the alt text.
If you’re utilizing multimedia on your website,
you need to provide a synchronized equivalent to the audio and video for those who are visually or hearing impaired.
You can also provide a transcript in a web accessible document that is right there accompanying it.
Color blindess is a big problem for us at OU. One of our major colors is red.
Red/green color blindness is one of the most common forms of color blindness.
508C asks us to be considerate of that.
If you have text on your page that’s in color
it should also be viewable in black and white.
If your banner looked like the top one there that’s red and green,
the majority of people with red/green color blindness would see this one,
and a limited number of red/green color blindness with the more extreme cases would see this.
and clearly that’s not remotely readable.
You want to make sure your colors are providing proper contrast.
We need to remember that a screen reader reads from left to right, top to bottom.
And the page should still follow that form with the screen reader turned off.
Or lists become unclear and illogical.
Libby will kind of show you what accommodations need to be made there.
So, on the surface, this page over here, it looks pretty logically laid out,
but once you turn off the CSS,
which every browser can do every browser has the capability to turn off all styles.
Once you get down into the prices here they don’t really relate to anything,
so it’s really hard to see what’s going on in that page.
But if you format it in such a way,
like if you put all of that in tables instead of lists,
and you format it in such a way where all of this data is related...
you can really see,
left to right, top to bottom like Lindsey said.
If you have an image that links to somewhere,
we see this a lot in maps or if you have a button on your site that’s an image,
the area within or around that image is called the image map.
And it must include alt text that tells the screen reader where you’re linking them to.
Tables are great for organizing information especially if you have a calendar or a check list or something that has pricing structure.
But they can be really incredibly confusing for a screen reader if they’re not created properly.
You need to identify the row and column headers in the table,
and then you need to include HTML within each cell...
that logically associates each piece of data...
with its row and header,
so that when a screen reader reads it,
left to right, top to bottom, it can still make sense to somebody who’s not seeing the table.
All fields and instructions needed to complete and submit a form, including their instructions, must be accessible.
What you want to do is wrap label around the input type so that
when a screen reader is reading that the person who’s using the screen reader knows what data is expected in that input field.
All pages should include a link option to skip navigation or lengthy menus.
If you’re utilizing a screen reader,
you have an option to hear all of the links on the page.
And if you have to click through,
all the links to get to the bottom link,
or if you want to get to the body rather of the page,
that’s a lot of clicking.
If you’re utilizing adaptive technology that requires you navigate the screen with your breath or head movements,
if you have to breathe through 20 menu items...
to get to the body of your copy you’re going to be way out of breath by the time you get there.
If you provide this skip nav link,
they can go directly to the body of the page...
and decide whether or not that’s where they want to be and move on.
There's a few sections of 508 we didn’t cover.
We wanted to give you things that would apply to the larger group,
but most we don’t advise that you do anyway.
508i covers pages that are made from frames.
If you do that, the hand out we gave you kind of explains what you need to be doing to make those accessible.
508j discusses flicker considerations for those with seizure disorders.
We also don’t suggest you be using a lot of animation on your pages.
They get too busy that also applies to people with ADHD.
Links should make sense out of context.
If you took that link off the page you should still understand what it means.
Like the screen reader, if it’s reading a list of links, we don’t want it to say...
click here, click here, click here, click here, click here.
That won’t make sense; nobody will ever find a link that they are going to if they’re utilizing a screen reader.
Your link should say, read here to find out about OU Graduation,
or click here to find out about something else.
If you want to be super sensitive, you should really mind the language because not everybody is clicking or seeing or reading.