According to the World Wide Web Consortium (W3C), the web represents a unique opportunity to use technology to provide unprecedented levels of access to written, audio, and video content to those affected by disabilities. With the explosion of education, employment, government, business, healthcare, and entertainment services online, accessible website design is a critical issue, and will determine whether disabled users have equal access to the services those of us without disability take for granted.

In some instances, the reasons for providing accessibility extend into the legal realm. For example, there are laws on the books requiring that all websites developed or purchased by the U.S. Federal Government provide equal access for disabled persons. The UN has also created similar guidelines. In addition, some websites have been required by the courts to comply with the Americans with Disabilities Act (ADA), and at this time all educational institutions are advised to have an accessible website.

In light of the benefits to the disabled made possible by the web, as well as the legal ramifications that may face a website that fails to meet certain minimum accessibility standards, several organizations, including the W3C, have developed standards that website designers can apply to ensure that all visitors are able to make full use of the information and functionality of a website.

Tips for Creating an Accessible Website

People with disabilities often use assistive technologies to access websites. A website that is accessible is designed to function properly with assistive technologies so that the information and functionality that is fundamental to the website is made accessible to every visitor.

In some cases, such as in the case of color blindness, no assistive technologies are used. Instead, websites that are accessible to these visitors consider these issues as they design their website, and make proper use of visual elements.

In short, according to the W3C: "web accessibility means that people with disabilities can use the web" (source) regardless of the disability. Reaching that level of access is the goal of the Web Content Accessibility Guidelines (WCAG) 2.0, which is the current applicable standard from the W3C.

Begin Your Project with Accessibility in Mind

The first step in building an accessible website, is to understand how people with disabilities access the web. The W3C has pulled together resources that include stories of real web users, an exploration of the diversity of web users, and a discussion of the diverse ways users access the web. Reviewing these resources will give you a clear picture of how people with disabilities use the web.

It's also important to think about the components of web accessibility. While designers may be tempted to limit their accessibility mindset to the visual elements they design and the code they write, it's important to know the other pieces of the puzzle - particularly things such as assistive technologies and software used to enhance accessibility - and how they should inform web design.

As a project begins and authoring tools are selected, keep accessibility in mind. Not all themes, widgets, and plugins offer equal accessibility to website visitors. The accessibility of websites produced by these different tools should be one of the criteria taken into account as authoring tools are selected.

Lastly, before beginning your project, review the recommendations made in WCAG 2.0. Following the recommendations made in this document will help ensure that your website content is perceivable, operable, understandable, and robust.

Structure HTML Properly

One of the important things to do when creating an accessible website, is to make proper use of semantic HTML. Here are a few tips to get you started:

• Provide descriptive text alternatives (alt-text) for images: Screen readers read the alt-text, so make it meaningful. Reading the text should convey the same meaning as viewing the image.
• Use header tags correctly: Screen readers pay attention to header tags, and use them as clues about the importance of information, and the structure of the content on a page. Don't skip a heading level, and don't use them out of order.
• Create accessible forms: Use descriptive and well positioned labels for each input field, and use the label tag or an ARIA property to associate the label with the input field.
• Use tables appropriately: In the past, using tables for website layout was common practice. However, screen readers aren't able to distinguish between a table that contains data, and a table used for layout purposes. As a result, improperly used tables create unnecessary complexity and confusion for visitors using screen readers.

Working With Visual Content

Visual elements need to be considered carefully to ensure that accessibility is not lost for users with visual impairments. Such users often access websites with special high-contrast web browsers, screen readers, or by replacing CSS styles with a set of rules designed to remove visual barriers. In order to create a site that provides the greatest degree of access to the visually impaired, consider the following tips.

Never Depend on Color Alone to Convey Information

A form that uses color to identify required fields will pose a problem for visitors who are color blind, or those using a screen reader. At the same time, other users benefit greatly from the use of colors to convey information. The takeaway is that you should use color, but you should also use other ways of conveying critical information.

Don't Use CSS to Deliver Critical Information

Some web browsers provide the option for visitors to create their own style sheet which will override the styles provided by a website's CSS files. Keep this in mind when creating a website, and ensure that all critical information and functionality is delivered separately from the CSS files. As the ability to create and deliver content using CSS increases, the barriers to access for people with disabilities are increased. Be careful that innovative design doesn't leave behind some of your visitors.

Offer Alternatives to Audio and Video Content

Today's web makes heavy use of rich media such as podcasts and videos. When using this sort of content, provide text alternatives for visitors with visual and auditory impairments. This means that written transcripts should be made available for both video and audio content, and captions should be available for all videos.

Use Descriptive Link Text

Visitors using a screen reader depend on the text of a link to determine where the link leads. As a result, links such as "Read More", or links on images that don't provide alt-text are not accessible to these visitors. Text links should use short descriptive text, such as "read About Us" rather than "read more". This link is both easy to understand, and will be easy for visitors using speech recognition software to remember and repeat.

Exercise Caution When Using Dynamic Content

Virtually all websites today use JavaScript and other technologies to add interactivity and functionality. However, dynamic content can cause problems for screen readers, keyboard-only users can end up trapped in page overlays, and other problems can crop up if accessibility is not kept in mind during the development process.

Learn About and Use ARIA Roles

The Web Accessibility Initiative Accessible Rich Internet Applications (WAI-ARIA) recommendation is the W3C specification designed to help website developers make dynamic content more accessible. The entire ARIA specification merits serious research by developers, but anyone who writes HTML should take the time to learn about the new role attribute and aria-label attribute which can be assigned to any HTML element. These attributes are instrumental in helping visitors with certain impairments navigate dynamic websites.

Preserve Functionality for Visitors Using Just a Keyboard

People with mobility challenges often cannot manipulate a mouse with the precision needed to use it effectively. As a result, they access the web with a keyboard, a special keyboard overlay, or other devices designed to ease access to the web. However, certain web content such as complex menus, slideshows, pop-ups, and items that require a mouse-over action remain inaccessible to these visitors. In order to avoid this scenario web developers need to consider keyboard-only site visitors as they design the interactions necessary to use the site.

Checking for Accessibility

There are variety of tools and resources you can use to audit your site for accessibility. A good place to start is the list of Easy Checks provided by the W3C. Going through this list will catch most common issues, such as images without alt-text, headings that are missing or out of order, common color contrast issues, and more.

After working through the Easy Checks, you should consider using some of the many free and paid tools available to audit your site for accessibility issues. The W3C has pulled together a useful list of accessibility testing tools. For more information about checking for accessibility, review the Accessibility Evaluation Resources page where you'll find many additional resources to assist in auditing and testing for accessibility.

Additional Resources

If you'd like to learn more about web accessibility there are a number of places you will find additional education, tutorials, tools, and other resources. We recommend the following organizations as you work towards ensuring accessibility for all of your website's visitors.

The W3C Web Accessibility Initiative is one of the organizations driving the development of accessibility standards and guidelines. To learn more about the WAI you can view the WAI homepage, complete free accessible design tutorials, and see an example of the changes needed to improve an inaccessible website and bring it up to accessibility guidelines.

Google also offers a free Intro to Web Accessibility course that will teach you the basics of building accessible websites and show how to use accessibility tools in the Chrome web browser to test your site for accessibility.

The University of Washington has put together a list of 30 Web Accessibility Tips in PDF form which you can print and refer to as necessary. This list covers all of the basic guidelines for creating accessible websites, and is a good way to quickly refresh your memory on all of the basic tenants of accessible web design.

WebAIM is another organization dedicated to making the web more accessible, and they offer a number of helpful resources for learning about different impairments, including the following tools and simulations:

• Section 508 Checklist: This helpful checklist will help ensure that your design is compliant with Section 508 requirements.
• WCAG 2.0 Checklist: If your goal is to comply with the Web Content Accessibility Guidelines (WCAG) 2.0, this checklist will help you verify that your design is up to the standard.
• Color Contrast Checker: Simply enter the font color and background color to determine if the contrast between the two meets WCAG standards.
• Screen Reader Simulation: Get a sense for how visitors who use screen readers experience the web with this simulation.
• Low Vision Simulation: This simulation allows you to view a website in a way that mimics the effect of different vision impairments such as glaucoma, cataracts, and macular degeneration.
• Dyslexia Simulation: This simple exercise will give you a sense of what it's like to try and read with dyslexia so that you earn a greater appreciation by the challenges affected visitors face in navigating the web.
• Distractibility Simulation: This simulation will give you a sense of the effect of suffering from distractibility and help you appreciate the value of websites designed to reduce distraction.