Accessibility: It’s for Your Site, Too


What is accessibility, anyway? In web design, accessibility involves making sure that all content is available and functional to all users, regardless of a user's browser, assistive technology or physical impairment. "Why bother with accessibility? Aren't most of my users regular Joes without disabilities?" one might ask. "Besides, I don't want to stifle my creativity."

Studies find that about 20 percent of the population has some kind of disability.  It's true that not all of those impairments affect one's ability to use the Internet, but even if the figure were much smaller, it would be unwise--and, for some organizations, illegal--to restrict access to such a large audience. After all, a small percentage of a large number is still a large number.  As far as creative design goes, many original designs and techniques can still be used, as long as alternative ways of providing the content and functionality have been implemented where needed.

Accessibility legitimizes a site.  It shows that the organization is mindful and considerate of all its users, and thus builds confidence in the organization.  No one will revisit a website that, at least for him, is broken.  Compliance with accessibility standards demonstrates that web designers and developers are knowledgeable and skilled professionals.  It proves that they are experienced enough to create a site that anyone can use fully; they don't just throw together some "cool hacks" that work in ideal conditions. When accessibility is not addressed, users may draw unfavorable conclusions about the organization's attention to detail, expertise in design, or even its resources.

So when we talk about accessibility, what types of people are we considering?Among them are those with different browsers and browser versions, mobile devices and others with small screens. User impairments of concern are limited vision or color blindness, inability to use a mouse (keyboard-only users) and those with limited memory, seizure disorders or dyslexia. JavaScript should be used cautiously. (Its presence doesn't automatically make a site inaccessible. But because some security-conscious organizations do mandate that JavaScript be disabled on their computers, a site should still be functional with JavaScript disabled.)

How do we begin to check for accessibility? A good place to start is the U.S. federal government's Section 508 guidelines for web-based information and applications. Many of these involve simple coding techniques to follow during development, which can even be checked by a variety of accessibility programs.  But some of these guidelines are merely principles about which we may wonder, "Does my site comply enough?" The World Wide Web Consortium (W3C), the governing body for web standards, has a great online reference for those particulars.

Many checkers will direct you to the W3C guideline relevant to a site's possible violation, but they are in no way a substitute for thorough hands-on testing (use of differing browsers and smaller devices, screen readers, and testing all functionality without using a mouse).  After all, checkers can look for violations in your code, but since they don't know everything the site is supposed to do, they won't be able to tell you, for example, if all of your awesome effects still get triggered under certain conditions.

As a "first aid" of sorts, here are the quickest, easiest fixes to the most common accessibility problems:

  • Provide alternative text for images, video and other embedded content.
  • Tables should be marked up appropriately. Simple data tables need headings (th elements) for each column and row. Complex tables (those with row or column spans) need id and header attributes added. All data tables should be given summary attributes.
  • Form inputs should be given labels, even if they are made invisible to sighted users. (Title attributes may be used on inputs, but not as a substitute for label elements, which better support all-around accessibility.)
  • Show the focus. That little dotted outline around active links or images may seem ugly, but it helps those without a mouse to know what they're currently "pointing at". Don't suppress it; in fact, in some cases, you will want to add it, or an effect that achieves the same purpose.
  • Heading tags should be used in proper order, without skipping levels.
  • Create links to skip repetitive content, such as the main navigation. (These "skip links" can be invisible to sighted users, but they are very helpful to screen reader users and those who can't use a mouse.)
  • Links should have meaningful and specific text which is not repeated on other links on the same page. If you want the link text to be the same, make the text in the title attributes unique.
  • The title element on each page should be distinct and meaningful.
  • In text, provide significant color contrast between the foreground and background.
  • Ensure usability. Usability is ease of use. The structure and function of the site should be intuitive for a user to understand. For example, navigation that confuses a user as to where they'll go upon clicking or where they are within the site structure often fails to provide usability. Another culprit is forms wherein it’s not clear how to fill them out correctly because of unclear wording or unnecessary complication. Ask yourself (or do user testing!), "If I weren't the one who made this website, would I know how to use it?", and make it more usable!

Remember, you can still achieve almost any design you had in mind, whether you're going for beautiful, sophisticated, dynamic, etc. Just make sure you cover your bases to provide equivalent functionality to those with limitations or alternative ways of using the web. For example, you can add features only supported by newer browsers if you wish, as long as what shows up for the older ones is understandable and functional as well. If you must degrade the experience for some users, degrade gracefully.

So let's do ourselves and our users a service and provide an accessible web experience!


Category: Web & Technology
Tags: websites