Multimedia

Designing content accessible to those with audio or visual disabilities

• For all pages that contain audio or video:

o Does it address auditory issues for those with hearing disabilities?

¨ If not, create a detailed transcript describing the presentation.

o Does it address visual issues for those with visual disabilities?

¨ If not, create voiceovers for the presentation.

Color

Designing content accessible to the color blind

• For all pages that use color to emphasize important text:

o Are hyperlinks styled with a significantly different color than regular text?

¨ If not, change the text color to show a strong contrast between hyperlinks and regular content.

o Is color used to describe numbers?

¨ If so, use symbols or labels to clearly distinguish the characteristic of the number.

o Are you using color to signify a special meaning? For example, using red to denote a required field.

¨ If so, clearly describe what the meaning. If a field is required, use an asterisk “*” and describe at the top the meaning of the symbol.

Accessibility without Style Sheets

Designing content that is readable without a style sheet

• For all pages that use a style sheet:

o Is all content readable when the style sheet is removed?

¨ If not, rewrite the HTML code using standards compliant techniques so that all of the information renders correctly.

o Does your page use CSS for positioning?

¨ Consider using relative positioning only. Utilize headers, paragraphs, lists, and tables to ensure that the content is readable if a style sheet were not present, rather than using frequent <DIV> and <SPAN> tags that are confusing if a style sheet isn’t available.

o Does your page use CSS to describe something?

¨ CSS, by itself anyways, should never be used to describe the importance of content. If the style sheet were to be removed, the user should be able to distinguish the importance of what was being styled. To emphasize content with CSS, consider using <EM> or <STRONG> tags to describe the information and then style those tags in CSS.

Image Maps

Designing content that describes the geometric shapes within an image map

• For all pages that utilize image maps:

o Does the page use server-side image maps?

¨ If so, convert your server-side image maps to client-side image maps.

o Does the <IMG> tag contain an ALT attribute?

¨ If not, describe the appearance of the image map in the ALT attribute.

o Does the <AREA> tag contain an ALT attribute?

¨ If not, describe the hyperlink of the geometric shape in the ALT attribute.

o Does the page include an alternative text link for those who cannot handle image maps?

¨ If not, create a counterpart for every hyperlink within the image map.

Tables

Designing content that describes header and data cells for tables

• For all pages that utilize tables:

o Does your table contain actual data?

¨ If not, consider moving the content into a <DIV> rather than using it as a layout mechanism.

o Does your table utilize column headers to describe the data?

¨ If not, change the cells that describe data from <TD> tags to <TH> tags. Use ID and HEADER attributes to associate the headers with content.

o Does your table utilize row headers to describe data

¨ If not, use <STRONG> and <EM> tags to show a relationship with the content. While you cannot use the <TH> tag as a row header, you can use ID and HEADER attributes to describe the relationship within the table.

o Does your table have two or more logical levels of row or column headers?

¨ If so, use ID, SCOPE, and HEADER attributes to describe the data in each column and row. Also, utilize <TBODY>, <CAPTION>, <COLGROUP>, and <THEAD> tags to better describe and format the content.

Frames

Designing content that properly uses frames

• For all pages that utilize frames:

o Does your page clearly define the purpose of each frame and are frames even necessary?

¨ If not, either (1) remove frames entirely because most assistive technologies do not support frames, or if absolutely necessary (2) add text to the body of each frame that clearly identifies its purpose.

o Do the <FRAME> and <FRAMSET> tags include a TITLE attribute?

¨ If not, detail what type of content is included within each frame.

o Do the hyperlinks within each frame properly target the correct frame?

¨ If not, be sure to add the TARGET attribute within every hyperlink that isn’t intended to open in the current frame.

o Is your page available in a format that doesn’t require frames?

¨ If not, give the user the option to break out of frames and include (within the <NOFRAMES> tag) alternative text for browsers that don’t support it.

Flicker

Designing content that is between a flicker frequency of 2Hz and 55Hz

¨ Ensure that all animations do not flicker faster 55Hz per second.

JavaScript and Other Scripting Languages

Designing content that uses scripts readable by assistive technologies

• For all pages that utilize a scripting language:

o Is your navigation menu script accessible to assistive technologies?

¨ If not, ensure that the navigation content is not loaded into an array, but instead included within an unordered list—which can be styled and controlled with CSS and JavaScript.

o Are you using the <NOSCRIPT> tag?

¨ Create a text version for browsers who cannot handle scripting languages.

o Does script manipulated content include a respective description attribute?

¨ Ensure that content manipulated with a scripting language includes a readable description, including ALT and LONGDESC attributes.

o Are client-side form validation scripts readable to assistive technologies?

¨ Ensure that when a user enters an invalid item, they are alerted in a modal window which item is invalid. Remember not to refer to the color or font-weight of a required field, but to focus the selection to the field.

o Does the developer ensure that the field is selected to bring attention to a change or update within a page.

¨ Ensure that the field is selected after any changes are made. If fields are auto-populated, the developer should ensure the form field is selected so that assistive technologies know to read it.

o Are you using event handlers that are not supported by handicap devices?

¨ Ensure that scripting is device independent. (onDblClick, for example, is dependent on a device on the availability of a mouse.)

Other Plug-Ins

Designing content that uses plug-ins readable by assistive technologies

• For all pages that utilize external plug-ins such as Java, Flash, etc.:

o Does your page include a link so the user can download the plug-in?

¨ If not include a link so the user can download it.

¨ Ensure that the plug-in is accessible to assistive technologies.

¨ Ensure that the document is accessible to assistive technologies.

o Note: PowerPoint is usually not accessible and must be converted to HTML to be in compliance.

Form Handling

Designing forms that can by handled by assistive technologies

• For all pages that utilize forms:

o Does your form reside within a table?

¨ If so, remove it from the table. It is not proper to include field titles within table cells. Instead, utilize the <LABEL> tag. Always define an <INPUT> tag with a preceding <LABEL> tag to describe the field.

o Does each field include a TABINDEX attribute?

¨ If not, ensure that the TABINDEX is ordered properly so the focus will move in the proper order.

Navigation (skipping)

Designing content that gives the user the ability to skip repetitive navigation

• For all pages that utilize a navigation menu:

o Does your page give the user the ability to skip the navigation menu to avoid repetitive links?

¨ If not, create a bookmark where your content begins (<A NAME=”content” />) and create a hyperlink at the beginning of your navigation menu to tell the assistive technology it can skip ahead.

Timed Responses

Designing content that gives sufficient time to give a response

• For all pages that require a timed response:

o Does your page force the user to logout after a set amount of time without first alerting the user?

¨ Ensure that the application first alerts the user when the session is about to end and allow them to opportunity to request more time.

Images

Designing content that has a text-equivalent for anything that is not readable by assistive software (images)

• For all pages that have images:

o Do all of the images within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Video

Designing content that has a text-equivalent for anything that is not readable by assistive software (video)

• For all pages that have video or other types of animation:

o Does the page display animations that are not defined?

¨ Ensure that every image contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute. If the image/animation is for decorative purposes, put it in CSS or include empty ALT attributes.

o Does the page display video that isn’t described?

¨ Include a detailed transcript of the video.

Objects and Applets

Designing content that has a text-equivalent for anything that is not readable by assistive software (objects or applets)

• For all pages that have objects or applets:

o Do all of the objects or applets within your web pages include ALT attributes that thoroughly describe what is being presented?

¨ Ensure that every object or applet contains an ALT attribute. If the description is longer than one sentence, also include a LONGDESC attribute.

Equivalent Pages

To be used under special circumstances when it is impossible to be in compliance

• For all pages that cannot be in compliance:

¨ Create text equivalent pages for content that isn’t in compliance

¨ Create a synchronization policy for content to be updated on compliant and non-compliant versions

What many web designers do not understand is that every web browser uses their own standards in their rendering engine. Microsoft has a very unique rendering engine unlike anyone else, but are beginning to follow the W3C’s standards in their recent release of Internet Explorer 7. Firefox’s rendering engine is based off of Mozilla’s standards, which follow very closely with those recommended by the W3C. Safari’s rendering engine is based off of the Open Source Gecko engine also used in Konqueror, a popular Linux web browser. The problem with these rendering engines is that they don’t follow the same rules–what looks right in IE might look terrible in FireFox, Safari, and so on.

I always recommend designing your website in Mozilla Firefox. It is simply the greatest common denominator. I have found, in my experience, that if you design your website in Firefox, it “usually” requires less recoding to behave in other browsers.Let me share some of his troubles with you and walk you through how we resolved the following issues:

• “Oh, my god! My DIV doesn’t center in Firefox like it does in Internet Explorer!”

Okay, this is a very simple fix and I can pretty much guess what you are doing wrong. Most likely, your style looks like this:

box {
width = 720px;
text-align = “center”;
}

The text-align reference, although seems to behave fine in Internet Explorer, is not valid for this kind of element. The W3C recommends that the text-align tag be exclusively used for text, so other browsers are not going to center an entire DIV for you. Also, remember that adding <div align=”center” id=”box”> to your HTML code isn’t going to work either for the same reason. To accomplish this problem, you need to actually change this to the following code:

box {
width = 720px;
margin: 0 auto;
}

• “Oh crap! My DIV looks great in Internet Explorer, but awful in Firefox. What do I do?”

To render an item solely in Firefox (and it not effect other browsers, simply add a -moz- in front of the tag. Let me demonstrate:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3px; // For Firefox
margin-top: 4px; // For other browsers
}

• “Oh no! Now it’s the other way around. It looks great on Firefox, but bad on Internet Explorer!”

Easy fix! The problem with Microsoft is that they sometimes add some default elements to your styles that other browsers do not add. The “!important” tag tells your browser to take precedence over the all of the other tags. Normally in CSS, the last style added takes precedence, thus they are “cascading”. The “!important” tag overrides this cascading behavior and sets a default for that style which cannot be overridden. Here is how you do this:

box {
width = 720px;
margin: 0 auto;
-moz-margin-top: 3em; // For Firefox
margin-top: 8em !important; // For Internet Explorer
margin-top: 4em; // For other browsers
}

• “But I wanna assign an entire other style for those who use IE!”

That’s not a problem. Simply do this:

.topMennu{
width: 700px;
}

.top\Menu{
width: 720px;
}

So, to make a long story short he lived happily ever after with the fabulous new tricks I taught him. Do you have any tricks you’d like to add?