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
- Poor Eyesight
- Color Blindness
- Inability use of Hands
- Parkinson's Disease
- Muscular Dystrophy
- Hearing Impairments
- Visual Strobe
- Flashing Effects
- Affecting Memory
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 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.
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.
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.