World Wide Access: Accessible Web Design
[Narrator] You want these people. They order your products, sign up for your services, enroll in your classes, read your opinions, and watch your videos. You'll never see them, but they know you-through your website. Or maybe not. Your website's visitors aren't a faceless mass of identical mouse-clickers, but a vibrant community of individuals with varying tastes, styles, and abilities. To be successful in designing your site, you have to think about how those individuals access your information. We'll show you how to design websites that are usable by individuals employing a wide variety of technologies. This includes people with disabilities.
[Terrill] It's important for web designers and developers to realize that what they see currently on their computer, at their resolution, with their browser and their operating system, is not going to be necessarily the same thing that everybody else sees.
[Narrator] There's no "normal" or "standard" way to describe all the individuals who make up our society. And there's no single profile of people who use the Internet. Almost everyone uses it, and they use it all the time.
[Wendy] Well, it's just to participate in society. More of what we're doing is online. You know, the way that we're interacting with people; the way that we're buying our groceries; the way that we're working, learning, paying our taxes. You know, it's all very important stuff.
[Student] Hey, look at this.
[Narrator] Not everyone will access your site using a keyboard, a mouse, and a monitor. Some people will be using cell phones or touch screens. Others may access the web using refreshable Braille devices or computer-generated speech for output.
[Computer] ...but you don't change the structure of the brain.
[Dan] ...for example, comma...
[Narrator] Some users might interact using speech recognition, or other assistive technology, for input. They may navigate by keyboard alone, because they're unable to use a mouse.
[Dan] Nobody wants to make a barrier to their web page. However, it's very easy to do so without knowing everything that you might need to know about accessibility, and what are the things that affect the ability of somebody to visit a web page.
[Narrator] Some of those potential barriers affect people with disabilities. They may not be able to see graphics because of visual impairments, or hear audio due to hearing impairments. They may be physically unable to use a mouse. They may have learning disabilities that make it difficult to navigate a cluttered web page. And you don't want them to give up on your site.
[Dan] It makes sense that you would want as many customers as possible to get through your doors, whether they're physical doors on the street, or virtual doors on the web.
[Wendy] It's just intelligent thinking about your design and just making sure that you've considered factors. When you design a car, you've got to think about all the different places it's going to go and all the needs people will have with that car. It's the same thing with a website.
[Narrator] Universal design is key to building web content that's accessible and usable for diverse visitors.
[Dan] Well, to me, universal design means addressing the needs of the widest possible audience, with all of their abilities, that you can possibly do, given the technology at hand. It's an approach that really benefits lots and lots of people.
[Wendy] It has a semantic base, it has a good framework that can be flexible, in that people can take from it what they need, and they can change it into something that's going to work for them. So, it's just a well-designed site.
[Narrator] If you can design a website, you can design an accessible one.
[Dan] The neat thing about web accessibility is that everything you might want to learn about it is available online, with some key searches and some resources that are out there. As detailed as you want to get.
[Terrill] The most important thing to keep in mind in developing a website is to comply with standards. So, be aware of what the standards are, and develop websites that comply with those standards.
[Narrator] The World Wide Web Consortium, known as W3C, has developed and published the Web Content Accessibility Guidelines or WCAG. how are you making the information available
[Wendy] The point of that is, how are you making the information available to the person's senses? So if someone is not able to see, Well, they won't be able to see color; they won't be able what information are they missing? Well, they won't be able to see color; they won't be able to see images, those types of things. So you need to provide equivalents, you need to provide text that the screen reader can use to make that information perceivable.
[Narrator] Using good, semantic HTML is key to making information accessible to someone using a screen reader.
[Wendy] If you're someone who's using a screen reader, and you come to a form where there's a checkbox, as a checkbox unless you put some code in there it won't be identified as a checkbox unless you put some code in there that says, "This is a checkbox." So for the person who's using the page visually, it will look and it will act like a checkbox. But for someone who can't see that and get that information, then you need to provide, in the underlying code, something that the screen reader can use to indicate that that's a checkbox.
[Narrator] Images on a page need to have text associated with them.
[Wendy] In this case, this is an image that, you know, even I, who can see, have no idea what it means. So, the alt attribute is actually helpful for me. The text equivalent for this image is "microorganisms from a Lake Washington mud sample."
[Computer] ...and some of them have disabilities...
[Narrator] For users with hearing impairments, the perceivable principle requires captioning video and transcribing audio elements.
[Matt] When I'm going into a website, it'll go right past me if it happens, like, there's music or talking and there's no captioning there. I just get lost, and then I'll have to ask my friend, "Would you tell me what that says?" And then I really feel lost.
[Terrill] If somebody can't hear that content, they're not going to have access to it. So, for video, we need captions. For audio, we need transcripts. And that also helps other people, too, who may be on a slow modem connection and don't have the bandwidth to support viewing a video or even listening to an audio podcast.
[Narrator] Another benefit of captioning or transcribing is that it makes your multimedia content fully searchable using a text-based search-and that benefits everybody.
[Terrill] If somebody can't use a mouse, or is using a technology that is not mouse based-maybe they're using speech recognition, maybe they're using a handheld device with a stylus, or lots of assistive technologies: eye gaze technologies, head pointers, mouth sticks, any number of different technologies-they still need to be able to operate the buttons, click on the links, make the menus appear.
[Dan] So the tab moves the cursor from link to link...
[Narrator] Design your site to be operable with keyboard commands as an option for people who don't use a mouse.
[Wendy] And unfortunately, many websites are designed so that you have to use a mouse and to click on a button, or to slide your mouse different ways to access a website. This is the College of Engineering website at the University of Washington. It's been designed using a standards-based approach, and it's incorporated accessibility features in it. There's a navigation bar across the middle of the page that includes About Us, Departments, Faculty and Research, Give to Engineering, and some other options. Using the mouse, when I mouse over these, a menu pops up. And under About Us, we have several options What I want to show now is that I'm not going to use the mouse, within that menu. What I want to show now is thatI'm not going to use the mouse, but I still want to try to get to those menu items. And if I use the shift-tab key, I'll go back to Departments, and if I hit shift-tab again, I go to About Us. The menu hasn't popped up, but if I press return, I go to a new web page, and here are those options that had been on the previous page. So I can access all of the menus using the keyboard only, which is important.
[Wendy] Understandable is making sure that the content is understandable both to the technology and to the people, but one of the main things you can do there is to mark what human language is used on the website. If it's a site that's written in English, you can mark it as English. If it's in French, it's French. And it becomes really important if it's a site that goes back and forth, you may have some English interspersed with some French, like the United Nations website.
[Rick] You have to figure out what task a person is trying to do when they come to your website. And then you try to design the page to make it easy for them to easily, effectively, properly do the task correctly the first time.
[Michael] I think everybody would like a simple web page.
[Michael] I think everybody would like a simple web page. It's a lot more....a lot less complicated and a lot less cluttered; it just looks a lot better.
[Wendy] Robust is that the website and the technologies used in the website are going to work well with assistive technologies, and it's also looking forward to when new browsers and new devices come out, that it will continue to work.
[Kayla] I got a laptop when I was a senior in high school, and I used that for everything. And then about a year and a half ago, I got the iPhone, and pretty much 90 percent of what I do is on my phone now.
[Narrator] Another W3C standard is ARIA, Accessible Rich Internet Applications. ARIA provides methods for ensuring that dynamic web applications are accessible to individuals with disabilities.
[Terrill] So the challenge now, with more interactive web content, is you have things changing, so it's not just a static page. You perform some action, as a user, and that triggers content changes elsewhere on the page. So things become a lot more complex. A key to making all this happen is standards and guidelines. such as the W3C's Web Content Accessibility Guidelines
[Narrator] Adopting standards, such as the W3C's Web Content Accessibility Guidelines and ARIA, is critical for accessibility. Another source is the United States Access Board's Section 508 standards. Section 508 of the Rehabilitation Act is a law requiring federal agencies to ensure that their information technology, including websites, is accessible.
[Wendy] The way that I like to test things is, I inspect the website, and I look for the things that need to be there. So, do images have an alt attribute, So, do images have an alt attribute, and if they do, does it make sense? You can turn off style sheets, and you can look at how the page looks without the style sheets. What's the actual structure, the framework of that content?
[Narrator] You want as many people as possible to access your information. If your website is designed well, everyone who visits it will be able to do that successfully.
[Wendy] The web is flexible: that's the beauty of it. And that it can transform; that someone can increase the font size, and someone else can change the color, is really the beauty of using all these bits and using digital media, is that it is flexible, and that's exactly what makes it accessible, and that's what makes it work on mobile devices, and over the phone, and however else you want to access it.