Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> Before we talk about how to make your websites accessible, we need to give a definition of what accessibility actually is and what it isn't. Web accessibility is basically allowing people with disabilities to use the web. This includes all disabilities that would affect web access. For instance, visual disabilities, such as blindness, tunnel vision or even low vision; auditory disabilities, such as deafness and speech disabilities. Physical limitations can also affect use of the web, such as even arthritis or Parkinson's Disease; learning disabilities, such as dyslexia, and other cognitive and neurological disabilities.
There are some concepts that web accessibility is frequently confused with. Accessibility overlaps with, but is not the same, as usability. Usability is designing web pages to be more effective, efficient and satisfying for all people. Accessibility addresses issues that put people with disabilities at a disadvantage when they're using the web. Accessibility is also not the same as device independence. This is the concept of designing websites so that they can be used with a wide variety of devices that have access to the web, including small screen devices, such as mobile phones and PDAs, and older browsers.
However, improving the accessibility of your site will often improve how your site performs in terms of its usability and device independence at the same time. So don't worry too much about the semantics of what each term means. Rather, focus on putting features into your site that will help users make sense of it and navigate around whether or not those features are called accessibility or usability. Accessibility is also something that is relative. So there's some good news and bad news with that. The good news is there's no such thing as inaccessible.
But that doesn't mean that you have no work to do because the bad news is there's no such thing as accessible either. While there's no such thing as an inaccessible page, there are pages or pieces of content that can be completely inaccessible to certain groups of people with disabilities. So basically, accessibility is a range. It's not possible to make everything accessible to everyone. But you can make content more accessible to more people. As we will talk about in later movies, there are different standards and guidelines available for web accessibility.
Different standards can result in greater or less accessibility. Basically, your job is to maximize the number of people who can use the site while balancing other requirements for the site, such as funding or branding. Also remember that accessibility doesn't have to be a painful requirement that you're forced to add to your sites. It doesn't require much extra work when accessibility features are done as part of the initial development of the site. So make sure you plan for it upfront. This will be less expensive than fixing accessibility problems that are found later.
If you already have pages that you've made and you need to make them compliant with accessibility guidelines, keep in mind that even small changes that you make can have a big impact on making them more accessible. Another myth about accessibility is that the sites that are accessible are simple, plain or ugly. This doesn't have to be the case, though, if you keep in mind the concept of progressive enhancement. This means starting out with a solid structure of content that can be accessed by a wide variety of devices and people and then adding on layers of style and functionality for those that can use it.
There are a number of websites that illustrate how attractive accessible web design can be. Three of these sites are listed here. If you want to pause the movie at this point to write down the URLs, this would be a good time to do so before we look at these actual pages. These three sites are examples of sites that collect screen shots of other great looking websites to use as inspiration when you are creating your own design. This first site is at http://accesssites.org/site/category/showcase.
Accesssites.org not only shows you screen shots of the websites that it features that are accessible, but also attractive, and includes a write-up of each of these sites, detailing what features are accessible in each one. We can scroll down the page to view the beginning of each of these articles about each site. The name of the site is given. A screen shot is provided. And you can continue reading the article to view all of the comments on its accessibility features. Let's switch over to another site now. This site is at www.cssliquid.com.
This site is dedicated to showing websites that are made with CSS and include a liquid type of design, which we'll talk about how to make in a later movie. This type of layout is often more accessible. Although CSS, by itself, does not guarantee that a website will be accessible, it is a great tool down that path. If we scroll down the page here, we'll see the latest three screen shots of sites that have been added to the gallery. You can click on any of these screen shots to go to the website that is featured.
Now let's look at the third site. This site is at www.cssbeauty.com. Again, this site showcases web designs that are made with CSS. These designs are shown in screen shots in this third column of the page. A great feature of this website is the news articles that are listed on the left side of the page. You can use these articles to learn more about how to create CSS-based designs, such as the ones you see in this site. So in this movie, we've learned what web accessibility is, some of the types of disabilities that it's meant to address, and seen some examples of websites that can offer you inspiration when making your own accessible designs.
In the next video, we'll learn more about the people who are affected by web accessibility and the benefits that it can give them when they are browsing the web.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.