| Section 508 refers to a statutory section in
the Rehabilitation Act of 1973, strengthened in the Workforce
Investment Act of 1998. Its primary purpose is to provide access
to and use of Federal executive agenciesí electronic and information
technology (EIT) by individuals with disabilities.
What does section 508 require? - Section 508 generally requires Federal agencies to ensure that their procurement of EIT takes into account the needs of all end users Ė including people with disabilities. Doing so enhances the ability of Federal employees with disabilities to have access to and use of information and data that is comparable to that provided to others.
Are you required to have your site 508 compatible?
- No, but if your site is funded by the government, then it
has to be 508 compatible.
Can Rich's Web Design design a site that is compatible with Section 508? - Yes. The site will not be as visually appealing, but if your needs are such, then we can create such a site.
- Solutions for web site quality, accessibiity and privacy.The US government's Section 508 requires all federal websites be fully accessible to the disabled.
Section 508 also requires all vendors providing information to federal sites be fully accessible to the disabled.
Over 10% of the online population is disabled (750 million people worldwide, 55 million Americans)
According to iCAN, people with disabilities have a discretionary income of more than $188 billion dollars.
Companies with accessible websites benefit from positive publicity.
Companies with accessible websites protect themselves from litigation, costly settlements, unfavorable publicity, and potential loss of business.
Letís face it. No one wants to think about yet ANOTHER chore when designing a Web site. Already designers worry about many issues beyond simple design - different browsers and resolutions, for example (well, they should, anyway). Iím sure most of you out there arenít jumping up and down, clapping your hands at the idea of making your sites accessible to the disabled, too. Hooray, something else to learn to implement!
Is your website accessible to all individuals, including those with disabilities or users with different connection devices and speeds? The following are a few of the reasons why it's important that your site be accessible:
The reasons to make your site accessible are pretty compelling
though Ė aside from the obvious moral arguments, there are
laws in the works that will require at least certain sites
in the US to be accessible to the disabled. This could actually
create more jobs for you designers out there, not to mention
opening up a new market of hundreds of millions of people
for you ebusiness-types. Imagine that youíre blind and seeking
some independence in your daily life. Doesnít it make a great
deal of sense to shop on the Web? Consider the markets that
could open up simply because your site is accessible to this
From - Web Site Accessibility By Sue Bolander.
Web Site Accessibility
By Sue Bolander
Article Date: 2003-07-11
This issue is not a new one, but there is still a great deal of confusion out there about what makes a Web site accessible and why it matters. If you don't think this topic is important, consider this:
If that doesn't matter to you or your organization, remember that some of you are required by law to have accessible sites, and others may be sued if your sites are not accessible. If you happen to work for the Federal government, Section 508 of the Rehabilitation Act mandates that Federal Web sites need to be designed so that every citizen can access the information.
- Over 10% of the online population is disabled (750 million people worldwide, 55 million Americans) -- Watchfire
- Barriers to websites restrict access to information for over 550 million people with disabilities worldwide, representing over $176 billion in discretionary income. -- iCan
- Roughly 1 in 20 people have some sort of color vision deficiency. -- Vischeck
- In the US, 54 million people, 20% of the population, have a disability. As people are living longer and the population ages, the number continues to grow. If you add persons with temporary disabilities due to accidents or illness, it's easy to understand why accessibility is an important issue. -- Section508.gov
And finally, remember that we are all just seconds away from being disabled ourselves. At any moment, an accident or diagnosis could change our lives. If that happened, we would want to retain our independence as much as possible, and the Internet would be a big part of that. Creating sites that allow disabled individuals to access information, products, and services on the Internet in spite of physical or cognitive limitations is not too much to ask of us as professional Webmasters.
In this article, I am going to focus on a few basic topics and some simple ways to make your site far easier for a disabled individual to use. This is not an article on absolute compliance with the law, and doing these things will not guarantee that your site meets any specific requirements. Neither the Section 508 legislation nor the Access Board standards that define the law provide a compliance "checklist." Instead, the burden to determine if a Web site meets the standards lies with you. Consider the suggestions presented here as a step in the right direction.
The subject of this article is Our Home Page, a site for an imaginary company. This site is not intended to resemble an actual Web site. In fact, if this site resembles your company Web site, I beg you to get a new Webmaster. I created this one-page example not to dazzle you, but to illustrate several accessibility issues that are hidden within the HTML code and can be remedied without drastic changes to the site's appearance. Of course, this site could use a complete makeover, but that's not the point of this article. The point is that no matter what your design, good or bad, it doesn't have to change to become accessible.
LayoutIssues and problems:
A user with vision impairment may override your style sheet (more on this in the next section), so you need to make sure that your page layout still makes sense when your style sheet is not used. The easiest way to test for this is to temporarily rename your style sheet, thus breaking all of your links to it, and viewing your site. This page relies upon a style sheet to arrange the page into columns. When the page is viewed without the intended style sheet, the layout is lost.
The style sheet layout instructions are removed and a very simple layout table is applied to the page. Let's look at the page, which is still being viewed without the style sheet. I'll show it first with the table borders turned on, then with them off. Notice that even without the style sheet, the layout is correct. If you require columns on your page, try to accomplish this with just one simple table, not a series of nested tables. The table we are using on our page is very simple and should not present difficulties to those using screen readers.
Issues and problems:
Users who are completely blind often use screen readers or Braille readers. A screen reader is a machine that reads the site to the user so that he can hear the text. A Braille reader reads the text, then raises and lowers pins on a pad to write that text in Braille so that the blind user can read it. For those using screen readers, the reader will normally read a table starting at the top, left cell and working down the contents of that cell, then across the row to the next cell, reading it in its entirety, then across until it hits the end of a row. It then starts in the left column of the next row, and so on. The table that is used to present actual data on our subject page needs to be presented with the data arranged in proper rows and cells, not in the "cheater" way it is presented in our example. In its current condition, the data table will not be read properly by a screen reader.
I will put the data into rows and cells, which will make the layout of this information far easier for a screen reader to interpret. A good way to check your layout to see if your table structure would be confusing to a user with a screen reader is to select all of the text in your browser window and copy it to your clipboard. Then paste that text into Notepad and see if it still reads in the proper order. If you try this on the subject site before and after the data was placed into rows and cells, you can see that the site is much easier to understand after this change.
Vision Impairment/BlindnessIssues and problems:
People with vision impairment may simply use tools that increase the font size, and perhaps the font face and colors, to make the sites easier to read. This can be accomplished by a number of methods, including browser settings or custom style sheets. The subject page contains 24 uses of the FONT tag that specify size in absolute terms, such as FONT SIZE="2." Because the font is fixed in size, users are not able to change the size of text, either to compensate for the resolution or size of their device, or because of a visual impairment.
If you insist upon using the FONT tag, use relative size specifications, such as SIZE=+2 rather than SIZE="5". Better yet, because the FONT tag is a deprecated element, meaning that it has been removed from the HTML specification and is not expected to be supported in future browsers, don't use it. Use an external style sheet to specify your font sizes and faces. Not only is the far easier for you to write and maintain, it makes your pages more accessible to those with vision impairments. This is because many browsers have options to disable and override style sheets, meaning that the user can replace your style sheet with one of her own, which may make the text five times larger or change the font face to the one that is most legible to her.
First I will show you the subject page with all of the FONT tags removed and the font size and face specified in the intended style sheet. You can see it here as it appears to most users. Notice that it looks the same as it did when the FONT tags were present. Now, we'll apply the custom style sheet that our vision-impaired user wants to use. The sheet calls for very large Arial text because that is what she is able to read. When we apply the style sheet this time, it works because no FONT tags are present. Of course, the custom style sheet has no impact upon the text included inside of the images.
I can hear all of you control-freaks grumbling right now because your Web sites are a thing of beauty and are intended to be viewed with a specific font size and face. Get over it. Do you really want to prevent someone with disabilities from using your site or give them a splitting headache all in the name of artistic expression? Remember, the only people who will see your site without the style sheets are those who choose to override them, and they have good reasons for doing so.
Issues and problems:
Users who cannot see your images need a way to understand what the images represent, especially if they are navigation links. The subject page contains navigation images and an image map that cannot be interpreted by screen readers (or search engines, for that matter) because they lack ALT tags. To get an idea of how the page "looks" to a screen reader, look here. Would you be able to navigate the site under these conditions?
To correct the problems with images and image maps that cannot be interpreted by screen readers, I have added an ALT tag to every image and "hot zone." Examples of ALT tags are shown below:
<A HREF="index.html"><IMG SRC="about.gif" ALT="About Us"></A>
<AREA SHAPE="POLYGON" HREF="michigan.html" COORDS="9,23 18,100 13,105 22,115 18,159 117,159 113,146 88,129 87,100 84,102 95,95 96,77 114,57 138,45 119,42 116,38 107,44 95,37 90,40 78,30 68,34 51,26 50,15 43,15 43,23" ALT="Michigan">
Check out how the page "looks" to a screen reader with ALT tags on every image and hot zone. Some screen readers will be able to interpret the ALT tags on the states themselves, but others may not. We will resolve this problem in the "Use of a Mouse" section. To sighted users, the page looks like this, with the ALT tags appearing during mouseovers.
Issues and problems:
To help people who are blind find all the hypertext links on a page, a variety of screen readers have adopted techniques to list each of the links consecutively. A screen reader has difficulty in distinguishing between links if there isn't some sort of element between them. This can be any character, an image, a list element, or a table cell. It cannot be a BR or P tag. The subject page contains image links in the left column that are not separated by anything other than white space. I am referring to the links that read "About Us," "Products," "Services," and so on. As sighted users, you can see the separation between the links, but a screen reader cannot.
There are a number of ways to separate adjacent links. I'll employ two different techniques. First, I will insert a period between "About Us" and "Products." This simple step has corrected the problem. If you do not wish to insert a character between your links, an easy way to create an invisible separator is to use a small, transparent image in the .gif format. Insert this image using a HEIGHT and WIDTH of "1" (don't use 0 because Netscape may then show the image) and use an ALT tag that reads ALT="". This image won't impact your layout, but will allow the screen reader to correctly separate the links. Do not use ALT="Filler" or ALT="Spacer" because this will be read by the screen reader. I will insert an invisible spacer between the remaining links. Check the appearance of the links now and you will see that the period and spacers have made little or no difference in the page's appearance.
Here is an example of the coded empty image link:
<IMG SRC="empty.gif" HEIGHT="1" WIDTH="1" BORDER="0" ALT="">
About the Author:
Some simple ways to test your site for problems.
Over 10% of the online population is disabled (750 million people worldwide, 55
million Americans) -- Watchfire
Is Your Site Accessible? Five Simple Tests
By Sue Bolander
Article Date: 2003-07-10
Accessibility is not a new issue, but there is still a great deal of confusion out there about what makes a Web site accessible and why it matters. If you don't think this topic is important, consider this:
Barriers to websites restrict access to information for over 550 million people with disabilities worldwide, representing over $176 billion in discretionary income. -- iCan
If that doesn't matter to you or your organization, remember that some of you are required by law to have accessible sites, and others may be sued if your sites are not accessible. If you happen to work for the Federal government, Section 508 of the Rehabilitation Act mandates that Federal Web sites need to be designed so that every citizen can access the information. And finally, remember that we are all just seconds away from being disabled ourselves. At any moment, an accident or diagnosis could change our lives. If that happened, we would want to retain our independence as much as possible, and the Internet would be a big part of that.
In this article, I am going to focus on a few basic accessibility topics and some simple ways to test your site for problems. This is not an article on absolute compliance with the law, but consider the suggestions presented here as a step in the right direction.
Test 1: Turn Off the Graphics
View your Web site and turn off the graphics. To do this in Internet Explorer, click "Tools," then "Internet Options," then "Advanced." Look in the "Multimedia" section and uncheck the box that reads, "Show Pictures." Click "Apply," then refresh the page.
Are you able to use and understand your site without the graphics? If not, you need to add ALT tags to your code. These tags provide text information for each graphic, allowing visually-impaired users to understand what the graphic represents. These tags are especially important if you use graphics as navigation buttons. If you use an image map with "hot-spots" for navigation, provide text links in addition to this system. Not only will this ensure that all users can access the pages, it will allow search engine spiders to find them.
Test 2: Copy Your Site Into Notepad
View your page with your browser and choose "Edit," then "Select All," then "Edit," then "Copy" from the menu. Next, open Notepad or some other text editor and paste the text into it. You are now seeing your site with the contents linearized, much as a screen reader "sees" it and reads it to a blind user. Is the site in the correct order, or is the text scrambled? If the site doesn't make sense, you need to examine your layout structure and redesign the layout cells so that the text falls into the correct sequence when the page is linearized .
Test 3: View Your Site in Black and White
Print your pages with a black and white printer and make sure that everything on it can be interpreted when there are no colors present. Is there enough contrast to make the text legible? Change any instructions on the site that rely upon color, such as "Click the green button to submit the form." If you use maps or pie charts, can you differentiate between the colors that you have used? If not, try changing the colors or adding a pattern to some of them to make them easier to read in black and white.
To test your site even further, run a page through the color-blindness simulator found at Vischeck.com. This tool will create a graphic of your page as seen by a colorblind person.
Test 4: View Your Site Without Your Style Sheet
To do this, either move your external style sheet to another folder or temporarily rename it. Next, refresh your page to see your site without the designated font faces, colors, or other special formatting features specified in your style sheet. Does your page look very different in terms of font faces and sizes? Good - it should. Does it still make sense and is it useable? If not, you may need to consider other methods of accomplishing your layout or formatting goals.
If your site looks exactly the same after performing this test, you have probably used the FONT tag and hard coded your font faces and sizes. When you do this, you make it impossible for a visually-impaired user to override your font choices with ones that are larger and more legible. You should redesign your site so that all text formatting is done with an external style sheet instead of with the FONT tag.
Test 5: Unplug Your Mouse
Are you able to use your site effectively without a mouse? Many disabilities make a user unable to control a mouse, and these people will use your site with the keyboard only. Can you navigate your way to every page using only the Tab, Arrow, and Enter keys? Can you still use your forms?
Do you have a menu system that is only visible during a mouseover? If so, can you access the interior pages without a mouse? You don't have to get rid of your mouseover menus, but be sure to provide another way to access the pages, such as a text-only Site Map or text links in addition to the pop-up menus. This will also ensure that search engine spiders can find all of your pages.
If you revamp your site so that it passes these five tests, I can't guarantee that your pages will be completely accessible, but you will be much closer to that goal. For more information, check out these sites:
View All Articles by Sue Bolander
- Section 508 This site is full of information about Section 508 of the Rehabilitation Act. Sign up for 508 Universe and take the online tutorial, which includes simulated screen readers that allow you to experience accessibility problems first-hand.
- WebAIM is a nice web accessibility evaluation tool.
- A guide that adds some context and explains how to create an accessible site is http://wiht.co/guidetoaccessibility.
About the Author:
More web_development_site_design Articles
- Solutions for web site quality, accessibiity and privacy.