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.