Hi, and welcome back as we go back and we talk about designing for
accessibility once again.
So, as I've been telling you more and more kind of cool,
neat things, I sometimes feel the need to rein you back in and
remind you of the basics of when you're designing your page.
And part of that basics is that I want to remind you that the content of your
page should be in your HTML.
What I mean by that is that it can be really tempting to add content via colors,
images, etc., things that people may not be able to perceive, but
you're not necessarily thinking about it when,
as a visual user, you're kind of bringing it in.
So what I want you to do as you're designing your pages and testing and
redesigning and testing and redesigning is remember what we call the POUR guidelines.
We want your pages to be perceivable, operable, understandable, and robust.
And the perceivable and
understandable really kind of match up with what you're doing with your CSS.
So in order for
things to be perceivable, I just want you to remember a couple of things.
First, always remember to provide text alternatives for your images.
Your images should not convey the information completely on their own.
Make sure that you're providing captions and transcripts for video and audio.
Now, not everyone has access to tools to provide this for you for
free, but where you work or where you go to school may be able to help you out.
Make sure you're using that correct semantic markup so
that content can be presented in different ways.
I want you using that nav tag.
I want you using the figure tag instead of the image tag.
What tends to happen is that people have code they've already written and
they want to be a little bit lazy and not have to change their HTML,
because when they do, they have to change their CSS.
Go ahead and make that change.
It's really going to be worth it.
Make it easy for
users to connect, to see their content, by using really good color contrast.
You'd be very suprised to realize how many people are unable to access
information on the web because they really can't see what you've put up there.
Next, let's talk about what it means for your page to be operable.
What I mean by that is that all the functionality that's going into your page
should be available from the keyboard.
Don't expect that everyone's going to use a mouse to go over your page.
Don't expect that some things, it's okay for
some things to only be accessible if you hover over them.
Users should have the control over all the timing and the limits.
So if you have those videos in media, make sure you're putting it in that there's
a control panel for them to turn things off, turn them down, rewind, etc.
This is something that's actually important to me,
because I have family members who deal with this, is that you want to make sure
that you don't have some sort of content that flashes all the time.
I'm not talking about Flash the software.
I'm talking about things that are going to blink on the screen and
the user doesn't have the control to turn it off.
This can actually cause seizures.
You want to provide ways to help users navigate through your page.
Don't make it a puzzle where they have to kind of figure out how to get where they
want to go.
It's your job to make it as easy as possible for them to find content and
figure out where they are on your page.
Here's just a few quick examples of different ways
that people sometimes access the web, whether it's with a penstick,
a keyboard, a remote, a kind of accessible keyboard, or
even some sort of puff devices that they can use to navigate through the web.
Next, let's talk about what I mean when a page is understandable.
Typically, you want to keep your language short and sweet on your page.
Unless you're an author and you're showing off your works,
people are only going to spend a few seconds on your page.
Make it easy for them to understand what you're trying to say.
When you have text supplemented with illustrations, videos,
and other formats where appropriate, you want to make sure that you're using
good universal design, that people are able to access it.
Navigation, information structure, those should be really separate and
discernable from your content.
Make people, make it easier for people to get away, get back to certain pages, etc.
And finally, make your pages operate in predictable ways.
This can be kind of a confusing thing to just talk about, but
if you've ever been to a website where you just can't quite figure out how to get
back to the page you were three pages ago, make it easy for people to get that.
Finally, help users avoid and correct mistakes.
It's up to you, not them, to figure out how to access the information.
Finally, the R, the robust in the POUR.
Is your site functional across various technologies, a smart phone,
screen reader, laptop, pensticks?
As you work with me and
we go further on, we'll talk about responsive design in some later classes.
And that's making sure that your page looks the best it can look
on different screen sizes.
But it's more than screen sizes, you also need to think about things like we said,
the pensticks and the screen readers.
So there's going to be syntax errors that you might have in your code
that don't affect what the page looks like to you.
You've gone in, it looks great, you're like, I'm golden.
You have to remember that those syntax errors can mess up other technology.
So make sure that you're adhering to standards and
to ensure future compatibility with new browsers.
And the easiest way to do that is to go onto validator.w3c.org and
the wave.webaim.org to validate your code.
It's simple, it's fast, and it's really going to give you a much better page.
So just to review, I'm not asking you to make great strides.
I just want you to do little things right.
And that really starts with the proper HTML tags.
Styling can actually make it harder for some people to access the information, so
test, test, test.
Have people look at your page.
Have them give you feedback.
Don't take it personally.
It's not about your coding.
It's about really making a great product.
Finally, get into the early habit
of utilizing these different accessibility tools.
They’re there for you to make your life easier, not harder.
Finally, the one thing I really struggle with, with students,
is we all want to do the cool new things.
But cool new styles and cool new technologies
should not be at the cost of accessibility and people viewing your page.
So really I'm hoping that as you're learning this code and
you're getting a little bit stressed out about utilizing all these cool things
you're learning, that you're remembering it's not about having the coolest webpage.
It's about having a clean page that really portrays the information
you want to get out on the web.
Good luck.