What a drastic statement! We often forget the products we build are not about technology, engineering, or even design. We write software because it enriches the lives of others and makes the world a better place to live.

If this can’t be accomplished, the tools we build are just lines of code rendered graphically on a computer screen.

While developers fall for this trap on a steady basis, user experience consultants and information architects are supposed to be an advocate for their users—but I’m beginning to observe many of us focusing heavily on our design tools rather than who’s most important, the people we serve.

At the end of the day, our wireframes, personas, style guides, taxonomies, photoshop comps, and site-maps are just communication tools. They serve no purpose unless we communicate them between our customers, stakeholders, and engineers. We have to convince people to adapt to better technology and embrace change.

So why am I writing this blog entry? I’m writing this because I want to offer a gentle reminder to the universe that people always come first. If we’re to be successful in our industry, we need to remember the people we serve. You’re not just “the wireframe guy” or “the photoshop gal”, you’re a very important person that is there to make a difference in the lives of your users.

You have professional responsibility to ensure the best experience for your customer, but I believe you also have a social responsibility (as a citizen of this planet) to build experiences that make peoples lives better. If you can limit someone’s frustration and empower them with technology, you are changing the world. Remember, those who believe they can change the world are the ones that do.

So what are you doing to change the world?

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

The problem with using these tools is acquiring them. All of the tools mentioned in this article could cost you upwards of thousands of dollars, and if that is something you can afford, go for it! But for the rest of us, where six thousand dollars is simply unrealistic for learning a new craft, there is hope. Here are a couple of ways that I’ve been able to acquire the software:

1. Steal it! (just kidding) – We don’t advocate piracy at Amazing Design Secrets. Purchasing the software will bring you so many advantages in the long run, like free tools on activation, free updates, customer support, etc.
2. Do you work in an office where your company can purchase it for you? It’s certainly how I’ve been able to acquire it, by acquiring it as a business and writing it off on my taxes.
3. Are you a teacher or student? If you are, Adobe, Macromedia, and Microsoft (and a number of other companies) give great incentives to teachers and students. The first step is to get a copy of your transcript, verification of admission, or get a .edu e-mail address. There are a number of websites that sell these products.