One of the most overlooked elements to web development is making your site web accessible for people with disabilities. There are some individuals that might have difficulties navigating through your site. Having problems with certain images, colors of your design, or how your site functions.

The internet is becoming a part of everyone's life. It's in every household, government building, hospitals and help kids learn in schools. These different opportunities should be accessible to everyone no matter the user's condition.

Disabilities to Address

Here are some categories of disabilities to address when developing your website.

Visually Impaired

• Blindness
• Poor Eyesight
• Color Blindness

Motor Impaired

• Inability use of Hands
• Parkinson's Disease
• Muscular Dystrophy
• Stroke

Auditory

• Deafness
• Hearing Impairments

Seizures

• Visual Strobe
• Flashing Effects

Cognitive

• Affecting Memory
• Dyslexia
• Dyscalculia

Tools that Help with Accessibility

Knowing what software people use to help with their disabilities, can help you as a developer prepare your site. There are a lot of software that comes with today's operating systems that help with most situations. There could be additional hardware required to help with certain tasks of functionality. Here are some of the most common software and hardware used for accessibility.

• Screen Magnifier - Making the screen text bigger.
• Screen Reader - Reads all the content on the page, including hyperlink title and image alt tag attributes.
• Large Key Keyboard, Joystick or Trackball
• Voice Recognition

Voice Recognition

Voice recognition is a great topic to touch on because it's an old technology that has become popular in the last couple of years. Software like Dragon Natural Speaking can control desktop computers with voice commands. Apple and Google are pushing this technique on their mobile devices and tablets.

This technology is great for accessibility. Now the user can talk to their computers, give it certain commands without any physical contact. Surf the web, write documents or emails, or play movies and games.

Making Your Website Accessible

The easiest way to make your site accessible to people is to have as many elements in text format. This could be adding the alt tag to your images, title attribute to your hyperlinks, and transcripts to your multimedia elements. These few things will solve most of the general problems associated with web accessibility.

Here are some problems WHDP ran into.

• Empty text links (CSS Sprites)
  Solution: Put text in text hyperlink and hide with CSS
• Not Labels on Form Inputs
  Solution: Insert Labels to describe Form Inputs.
• Out of Content Text (Read More)
  Solution: Insert title anchor text attributes with description text.

ARIA Landmark Roles

There are some HTML5 development tags called "roles". ARIA Landmark Roles can help different software determine your page elements. With these tags inserted in your code, screen readers can help the user determine what area of the page they are currently viewing. These are the ones you can start implementing today.

• <header role="banner"> - Top of the page.
• <form role="search"> - Primary search form.
• <nav role="navigation"> - Area with primary navigation.
• <main role="main"> - Main area of the page.
• <aside role="complementary"> - Content area of the page.
• <form role="form"> - A form that the user can interact with.
• <footer role="contentinfo"> - Bottom of the page.

How Does Your Site Flow

One good way to get an idea how your site will interact with a screen reader is to view your site without any CSS or images. Once you have it disabled, read through your content and see if it makes sense to you. Most likely if you are using pure CSS and HTML you will be fine. If you are still using tables to layout your website, you will have a problem.

Testing Your Website for Accessibility

There are a couple of online free tools you can use to see how your website stacks up against the web accessibility industry. These two resources both show what elements could be a potential problem and what you can do to fix them.

• http://wave.webaim.org
• http://achecker.ca/checker/index.php

If you want to see how your site design looks to someone with some visual challenges, such as color blindness, here is one site you can use. It has eleven different color filters to give you the best idea of what design adjustments you might need.

• http://colorfilter.wickline.org

Takeaways

Most of the problems you will find when going through your site and doing the online checks are all problems are solvable. If your design and code is using best practices you will find that you will have less areas to worry about. Having your site more accessible to whoever comes to your site, you can ensure you give them the best experience while they are visiting.