or 
 to control text positioning, or not associating data table cells with headers and defining relationships between headers and data rows/ columns. 

CSS is for presentation 

In every case where presentational effect is needed, you should use CSS to achieve the presentational effect. I cannot think of many presentational effects achieved by HTML attributes that do not have CSS equivalents. Some CSS properties have spotty support by major browsers, and for this reason you should always keep this issue in mind. This spotty support does not mean you should lazily resort to HTML's presentational attributes. Rather, it means you should either come to grips with the myth of ""looking the same"" to everyone or find another presentational effect to chase after. In my opinion, resorting to a workaround means the design is flawed, not the spec. 

Use appropriate markup 

Use appropriate markup for the document, before even involving yourself in presentation. This includes things like headings, paragraph tags, and break tags. Are you using 
 to make a large, bold word? Are you using  to create a heading? Are you using 
 to create a break between paragraphs? Are you using 
 to indent text? If so, you're using these elements improperly. 

Each of these elements has a purpose in dictating the structure of the document. For instance, 
 is the element meant to dictate the heading of the document. 
 is for sub-headings, such as main sections of text. 
 is meant as a subheading of a section. 
 is meant to mark a paragraph, and so on. For more information on what the purpose is of the various HTML elements, visit the spec yourself. http://www.w3.org/TR/html401 

To ensure greater accessibility: 

Use HTML to define structure only 

Use CSS to define presentation 

Always use the most appropriate element for the content. Do not misuse elements or attributes just to achieve your aesthetic vision. 

3. Device dependence 

While many people tend to think of accessibility as efforts to make a site usable for the blind, this is simply not true. Creating a site that is dependent upon any piece of hardware is destined to fail for users with a wide range of potential special needs - most notably, the blind and persons with motor impairments. Device dependence is a bad practice from a general usability standpoint as well. More and more users are accessing the Internet with devices such as cell phones and PDAs. Creating device dependence can serve to alienate far more people, disabled or not. 

Device dependence can be seen as: 

onClick/ onMouseover/ onMouseout or other event handlers that rely on the user having a mouse in order to operate a link or form control. 

Server-side image maps that do not have a corresponding set of redundant links 

Navigation or forms that do not have a logical tab order 

I don't necessarily frown on device dependence in cases where the dependence is only an issue for things like rollovers, image highlighting, text color changing, or some other decorative change. The issue comes when the device dependence combines with a reliance on scripting (#1, above) in that the event handler is tied to something like form submission, content presentation, or a calculation. In such cases, as I also said above, these things would probably be best-handled server-side. At the same time, a more accessible event handler choice might be best as well, using handlers like onFocus, onBlur, onChange and onSelect. 

In cases where device-dependent event handlers are needed, you should use redundancy to handle the interaction so that it at least works for people using either a mouse or a keyboard. When you use onMousedown, combine it with onKeydown. When you use onClick, combine it with onKeypress: Click The Button 

Example: 

Click The Button 

Ultimately, you would still be far from fully accessible, so long as there's any level of device dependence for access to any important content, navigation, or interactivity. A far better approach would be to refrain from creating site features that require the user having any specific piece of hardware. Remember one thing above all others: For every specific special need there is just as wide of a variety of methods used by the visitor to compensate for it. This includes input devices just as much as it does output devices. Dodge the bullet altogether by creating the site so that it doesn't matter what the visitor uses to interact with the site. 

Some creative and knowledgeable designers also use JavaScript's document.write() function to write these features to the browser. In these cases, they also wisely provide a redundant text alternative via the 
 tag. 

Then use a ""legend"" for each field set using the 
 tag and provide a  for each element. 

What Operating System Do You Like Best?
 Windows Macintosh Linux Unix 
 

Example: 

What Operating System Do You Like Best? 

Windows 

Macintosh 

Linux 

Unix 

For select menus, use the  element to group related choices. Again, explicitly defining the label. What kind of dog do you have 

 

 

German Shorthaired Pointer 

Chesapeake Bay Retriever 

Golden Retriever 

Labrador Retriever 

Cocker Spaniel 

 

 

Boxer 

Bullmastiff 

Mastiff 

Rottweiler 

Saint Bernard 

 

 

Boston Terrier 

Bulldog  

Dalmatian 

French Bulldog  

Poodle  

 

 

Example: 

What kind of dog do you have: 

German Shorthaired Pointer 

Chesapeake Bay Retriever 

Golden Retriever 

Labrador Retriever 

Cocker Spaniel 

Boxer 

Bullmastiff 

Mastiff 

Rottweiler 

Saint Bernard 

Boston Terrier 

Bulldog 

Dalmatian 

French Bulldog 

Poodle 

Always provide a button to submit forms. 

Don't use JavaScript to automatically submit forms via an onChange event unless you also provide a functioning button so that those without JavaScript can submit the form as well. 

Ultimately, it is the information that matters 

What it all boils down to is ability to access information. Accessibility is not ""in addition to"" what you already have, and it should not take away from it either. A complete focus on the user (all users) stems only from an understanding of why people are coming to your website: Information. Accessibility is the effort toward providing equal access to the information to all - regardless of the methods they use to access it. It requires nothing more than an understanding of the potential roadblocks and how they can be avoided. 


About The Author


Karl Groves is a freelance web designer who has done production on websites such as National Cancer Institute, Network For Good, and Aerospace Medical Association.





 
 





RELATED ARTICLES & TUTORIALS




Now you have a Web site. Have you ever heard of accessibility?

An accessible Web site is easily approached, easily understood, and useable for all. There are accessibility standards set forth by the World Wide Web Consortium, which all sites should adhere to as much as possible.


Web Accessibility - The Law and The Opportunity

“What are my legal obligations in (the UK, Ireland, Australia, or the US) regarding web accessibility?” This or some variation of it is one of the most common questions heard in this business. If positive publicity and increased business together make “th


Using the Web Accessibility Toolbar

Testing a website for accessibility can be a time-consuming and laborious process. The free Web Accessibility Toolbar can do most of the hard work for you though and is an indispensable tool for anyone interested in accessibility.


Web Accessibility: The Basics

Web accessibility is about making your website accessible to all Internet users (both disabled and non-disabled), regardless of what browsing technology they're using. In addition to complying with the law, an accessible website can reap huge benefits on


Learning difficulties & web accessibility

Accessibility is about making it as easy as possible for all members of society to fully take part in that society. It is about removing barriers. It is about inclusion and empowerment. It is about creating the sort of world that we all want to live in -

The Top 5 Roadblocks To Web Accessibility

Date Added: October 05, 2004 11:59:38 PM

Author: Karl Groves

Category: Web Design: Web Accessibility

Introduction Accessibility is often the last thing on a web designer's mind when creating a website. This is not a trait unique to newbies or people working on a personal page. It is also a trait common to professional web designers (large and small) and even multinational corporations. In fact, most web designers have no clue about what accessibility is. Many who do know what accessibility is will often treat it as though it is brain surgery. Nothing could be further from the truth. In fact, all that it takes to create an accessible site is some forethought and understanding of the kinds of mistakes you're likely to make so you know how to avoid them. What is Accessibility? For those with no knowledge of accessibility, I usually like to use the following analogy: The building you work in probably has at least one handicapped parking space. If it has more than one floor, it probably has an elevator or escalator (or both). It has railings on the stairs, and probably has a dip in the curb. Your workplace has these items in order to facilitate access to the business by disabled customers and/or employees. Accessible web design is nothing more than an electronic equivalent of this effort toward equal access to your resources. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect - Tim Berners Lee, inventor of HTML and the HTTP protocol. Why A Complete Focus is Needed I will not venture into any discussion of the morality of why you should make your site accessible. Simply put, any argument (other than sheer ignorance) against accessible design is simply not worth having. Instead, let's focus on what sorts of special needs a user may have that can create problems in interacting with a website: Visual impairments, which can manifest themselves in color blindness, poor eyesight or complete blindness Hearing impairments in a wide range of potential severities Mobility impairments ranging from arthritis, multiple sclerosis, Parkinson's disease, paralysis, or other motor-control disorders Cognitive impairments such as cerebral palsy, Downs syndrome, Alzheimer's, dyslexia, or learning disorders Seizure disorders like epilepsy Ultimately, a complete approach is what is needed in order to create an accessible site. You cannot predict the user's needs or the severity of those needs. Misguided approaches such as browser detection or text-only alternatives betray a lack of understanding this fact. Text-only alternatives can only provide an accessibility solution for those with vision disorders, thereby disregarding millions of other disabled users with different needs. Browser detection is destined to fail, as disabled visitors use a wide range of adaptive technology, including user-agents that identify themselves as one of the major brands. Moreover, there is no way to detect the user's pointing device or any of the other items in the wide range of settings used to compensate for their special needs. Avoid The Most Common Mistakes In their ignorance and disregard, web designers are most likely to commit five mistakes that are roadblocks to accessibility. Avoiding these mistakes will take you far down the road toward accessible design. Your site won't be perfect just by avoiding these five mistakes, but committing these mistakes will likely mean the site is completely unusable a wide range of users with special needs. 1. Dependence upon client side scripting to present navigation or important content Among the ways you can make a website completely inaccessible to many types of impairments at once is to use client-side scripting in such a way that the entire site fails to work for users who have client side scripting turned off or who are using adaptive technology that does not recognize client side scripting at all. Such items would be things like: Event handled dynamic content (processed client side) Fly-Out (aka DHTML) menus Drop down menus that require the onChange event handler to operate Popup windows that do not work without JavaScript Reliance on scripting will have one of four possible results: The site will load but navigation will be impossible (it will either display and not work, or often just not display) Substantial portions of content will not display The site will load but absolutely no content will display In an attempt to circumvent ""usability"" problems created by their use of scripting, they will cluelessly detect the presence of scripting support by the browser and redirect the user to a dead end page, which attempts to teach you how to upgrade your software. I consider any of these results to be a complete accessibility failure. Unfortunately, even websites for multinational corporations and government entities fail under such criterion. The following sites lead to dead end pages asking you to upgrade your software New York Stock Exchange Time Magazine H&R Block Travelocity General Motors Toyota Porsche The following sites result in completely inoperable navigational elements Washington DC Water and Sewer Authority Volvo 1-800-Contacts The American Automobile Association Verisign The following sites will load, but the content will actually not display at all Chrysler Ford Chevy Visa The following sites have a Swiss-cheese effect with content sporadically missing on screen Dodge Jeep Baltimore Ravens Football Team The solution for these problems is extremely simple. Do not make anything completely dependent upon scripting. Interactive elements should add to the enjoyment of the website, not detract from it as often happens. I recommend against using ""fly-out"" (aka DHTML) menus and dropdown menus for primary navigation. While it is possible to create them so that navigation works with scripting turned off, that will only solve one set of problems. As a general usability issue, DHTML navigation is often described as ""slippery"" by able-bodied users, and can certainly create frustration among those with motor impairments. At the very least, you'll want to ensure two things when using fly-out menus for navigation: The menu (or a

Ratings Average rating: (null votes) Rate the article:   1 2 3 4 5 6 7 8 9 10

Comments No Comments Yet. Leave your comment: Name or Website: Email: Comment *Enter the code shown:   The views and opinions of authors expressed on Zeronese Webmaster Article Directory web sites do not necessarily state or reflect those of the Zeronese.net .