To make your Web sites accessible, modify the code so that visitors with disabilities and search engine robots/spiders can access the information on the site’s pages.
Common coding enhancements include adding footer links, a site map page, alt text for images, page titles, meta tags, object labels, titles for links, link tags to the home and site map pages in the head, access and tab index keys, and form input labels.
One of the primary Web standards organizations with an online presence devoted to the subject of Web accessibility for people with disabilities is the Section 508 government site. This organization is dedicated to compliance of Section 508 (29 U.S.C. 794d) of the Rehabilitation Act, especially with regard to the accessibility of Web sites to all people, whether employees of the federal government or not, including those with disabilities. Although their prescriptions for accessibility are technically only legally applicable to federal agencies using, developing, maintaining, and procuring information technology, many Web designers and developers are now informally broadening the scope of Section 508 to include access to any and all information that is readily available on the Web to anyone, with or without disabilities.
The Section 508 amendment, which was passed in 1998, is often broken down into two parts: The first relates to HTML usage, and the second part deals specifically with Java Scripts, plug-ins, and other multimedia enhancements found on Web pages. Because you’re more likely to focus your efforts on HTML compliance than on multimedia compliance, the following excerpt from www.section508.gov lists the standards from the HTML part (Web based intranet and Internet information and applications) and is interspersed with notes on how you might meet each standard:
-
A text equivalent for every non-text element shall be provided (for example, via “alt”, “longdesc”, or in element content).
When building pages for the Web, each page must necessarily pass or fail each of the standards as set forth in Section 508. For example, a graphic on a Web page will fail Standard (a) when the image is missing its
alt
text attribute description, as in<img src="images/508.jpg">
, but will pass Standard (a) when the image contains a properly syntaxedalt
description within the image tag, as in<img src="images/508.jpg" alt="Section 508 Government Seal" />
-
Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
An example equivalent might include the specification of a long description in the HTML code that describes the content in a multimedia presentation, as with this code example that plays an animated GIF:
<img src="images/nowonsale.gif" alt="Rotating Sale Items" longdesc="saleitems.html" />
-
Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
All Web pages must visually make sense, both with and without color style markup. Test your pages to see whether the removal of color changes the experience of visiting the site.
-
Documents shall be organized so they are readable without requiring an associated style sheet.
When using CSS, try toggling the CSS on and off to see whether the ordering of the content makes sense without it, because most assistive devices ignore CSS and strictly read content from top to bottom.
-
Redundant text links shall be provided for each active region of a server-side image map.
Server-side image maps are rarely used anymore compared to client-side image maps; however, if you must include these on your page, make sure to include text links for each region on the image map.
Server-side refers to any application or program that must run on a server rather than on a client machine to function properly, such as with Server-side Includes (SSIs), whereas client-side refers to any code, application, or code processing that is performed on the client’s computer rather than on a server, such as image maps that specify areas on a graphic that link to other pages on the site.
-
Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
Client-side image maps can usually accommodate any special active region shapes, so this shouldn’t be much of an issue.
-
Row and column headers shall be identified for data tables.
When data is displayed in tables and header information is also included, the appropriate
<th>
tags must be used instead of<td>
tags to define the header rows/columns. -
Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Use
<th>
tags instead of<td>
tags to define table cells used as header cells. -
Frames shall be titled with text that facilitates frame identification and navigation.
Though using frames is highly discouraged from an accessibility standpoint, when they are used to present multiple pages in a single browser window, each page that displays in a frame must contain its own title tag, and each frame must have an appropriate frame name.
-
Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
In layman’s terms, don’t add any animations to your pages with a super-fast flicker rate because certain frequencies can trigger seizures in visitors with a particular kind of epilepsy. And this is very dangerous for the epilepsy patients.
-
A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
Anytime content cannot comply with accessibility guidelines, the URL to an alternate text-only page that contains instructions or information about the non-compliant content must be specified in the code.
-
When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional (understandable) text that can be read by assistive technology.
For instance, if your site uses JavaScript to create a rollover effect for all the main navigation links, the code should contain attending
<noscript>
tags that provide the visitor with information about the script’s function as well as links to any pages that the script provides access to.Assistive technology refers to any device (such as a screen reader) or nonhuman application (such as a search engine robot) that accesses content on the Internet through means other than a Web browser. And this is also necessary for the better SEO. If you don’t this Google or other search engine robots can’t read your script or flash files. You should use this tag
<noflash>
for your flash files. -
When a Web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).
You should do this for all applications and devices that interpret content; always provide a link for your visitors to download any necessary plug-ins that are needed to view page content.
-
When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
This means adding labels, coding access keys and tab order attributes, and including other form accessibility tags and attributes to all the form fields.
-
A method shall be provided that permits users to skip repetitive navigation links.
Use anchor links combined with a tab index to allow visitors to skip repeating navigation links. For example, you may want to make the first link in a nav bar called Skip Navigation combined with an anchor link that always takes the visitor to the first line of text on the page.
<a href="#start">Skip Navigation</a>
<p><a name="start" tabindex="1">Welcome</a></p>
-
When a timed response is required from the visitor, the user shall be alerted and given sufficient time to indicate more time is required.
Do not use meta tags, JavaScript, or any other kind of programming to make the page refresh or forward to another page without also providing visitors with one or more alternate ways to adjust the timing and/or access the other information.
Related Resources
To view all the Section 508 standards, including technical standards (1194.21 Software applications and operating systems), visit
www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web
For an informative and comprehensive look at what it means to pass or fail each standard, visit WebAim’s 508 checklist:
www.webaim.org/standards/508/checklist.php
The W3C also offers accessibility checkpoints at
www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html
Additional extremely helpful information on the topic can be obtained at the following Web sites:
www.joeclark.org/book/sashay/serialization
www.alistapart.com/articles/wiwa
And this link will be maybe little bit ironic but I’m totally agree with Mike Davidson and you should check out him article:
Last Words
The benefits of designing for accessibility don’t stop with making sites more accessible to those with disabilities. By following accessibility guidelines, the content on your pages can be more easily accessed using a larger group of lesser known (but no less wonderful) Web browsers, such as Opera, Mozilla, Lynx, and Amaya. The more devices that can access a Section 508–compliant site, the greater the likelihood of increased visitor traffic and potentially increased sales of products and services.
There have been 4 comments | Subscribe to Comments | Jump to Form »
B. Moore
Thank you for the info on accessibility standards.
I am a developer/designer for site dedicated to a summer camp for kids/adults with disabilities. I’m in the process of giving the site a complete overhaul, with the new site one of my goals was to have it acessibility compliant.
By chance do you have links to sites that are compliant that are not government sites?
Mert TOL
@ B. Moore :
Thank you for your comment Brian. Actually, I wrote these steps because in my opinion all designers must known and think about solid accessibility standards. But designers mustn’t use these standards every time. In my opinion, designers could create their unique standards with using these…
I didn’t search any compliant web sites before you pointed that out but I guess, I found just one for you. The Creators says: “The code supplied was fully compliant and met the W3C’s accessibility guidelines.” But I looked just 5 minutes, you can take a look here.
And good luck for your project. Remind me after you finished.
DeafUser
What about captions and transcripts for the insanely increasing number of videos and podcasts that 40+ millions of us deaf and hard of hearing users cannot access? It is a major issue and is part of the guidelines, too.
It’s not just deaf and hoh people that cannot access audio files, but anyone actually. According to the studies, more than 100 million of users need captions and transcripts – not just deaf and hoh, but also non-native English speakers, those learning to read, those who are in noisy or quiet environments, etc. It benefits web owners as well since it would increase SEO results.
This is a huge population that is overlooked and is something I would advise web specialists to seriously think about. Before they babble about accessibility, we would appreciate that you become good role models for accessibility by having all audio contents on your website available along with text equivalents.
Thank you.
DeafUser
@ B. Moore :
I would advise you to check the http://www.webaim.org – it has a lot of great resources for web accessibility.
Also, there’s another website on http://www.dcmp.org that focuses on deaf/hoh and blind/low vision users and has great resources, too.
@ Mert TOL :
Web specialists MUST use all standards – if they do not, they would face legal issues. If you are aware of the Target lawsuit brought by blind users, it is one example.