By: Monica Boeger, Owner and Creative Director, MonicaLauren design
I have an embarrassing confession! For over 10 years, I’ve been working as a graphic designer, art director, creative director and everything in between. Today was the FIRST time the idea of designing a website as ADA compliant was brought to my attention thanks to the inspiring Steve Gates, global head of design at Citi. As he was enthusiastically speaking about Atomic Design and defining the best steps to develop the most affective brand and digital experience, he casually mentioned that, “the form fields and interactivity needs to be ADA compliant”. I literally sat up straight in my chair and said out loud, “I’m such an asshole”!
How was I NEVER aware of this?! It seems like such an obvious requirement and being in the professional creative world for so long, I can honestly say I’m embarrassed. Public buildings are required to have entry ramps and elevators, busses have lifts, cross walk lights make sound, signs and books are written in brail, ticket booths have audio options, why on earth wouldn’t a website be designed and developed to successfully communicate to those with disabilities? Gates’s presentation did not focus on this topic, but from this second - that’s all I could focus on.
So, I started researching and found old news from 2010. Seven years later. Thanks Steve - really, thanks Steve - for saving me from further years of embarrassment. In September of 2010, The Department of Justice published the Americans with Disabilities Act Standards for Accessible Design which says that all electronics and information technology must be accessible to people with disabilities. We know the Americans with Disabilities Act became a law in 1990 and that it prohibits discrimination against those with disabilities in jobs, schools, transportation and all public places.
Of COURSE websites, apps, and everything else digital should be easily accessible to everyone. I was hoping I was the only designer living under a rock and not yet taken this into consideration with digital design planning, but as I’m sitting here trying to find research about how the ADA influences graphic design and development, I sadly can’t find much information or articles. Are other designers as unaware as I am? If so, we all need to be better.
The most helpful information I could find was in an article from techrepublic.com. I learned that the ADA applies mainly to businesses with over fifteen employees, which made me feel slightly better about my lack of knowledge as I work with small companies, but I still feel awful on a personal moral and consideration level. The article went on to say that small companies and freelancers can benefit by complying because they can potentially attract more clients and liabilities will be limited. The article also provided a digital criteria list from the U.S. Department of Health and Human Services.
If your website or digital design meets everything on this list, then it most likely is easily accessible to people with disabilities:
- Every image, video file, audio file, plug-in, etc. has an alt tag
- Complex graphics are accompanied by detailed text descriptions
- The alt descriptions describe the purpose of the objects
- If an image is also used as a link, make sure the alt tag describes the graphic and the link destination
- Decorative graphics with no other function have empty alt descriptions (alt= "")
- Add captions to videos
- Add audio descriptions
- Create text transcript
- Create a link to the video rather than embedding it into web pages
- Add a link to the media player download
- Add an additional link to the text transcript
- The page should provide alternative links to the Image Map
- The <area> tags must contain an alt attribute
- Data tables have the column and row headers appropriately identified (using the <th> tag)
- Tables used strictly for layout purposes do NOT have header rows or columns
- Table cells are associated with the appropriate headers (e.g. with the id, headers, scope and/or axis HTML attributes)
- Make sure the page does not contain repeatedly flashing images
- Check to make sure the page does not contain a strobe effect
- A link is provided to a disability-accessible page where the plug-in can be downloaded
- All Java applets, scripts and plug-ins (including Acrobat PDF files and PowerPoint files, etc.) and the content within them are accessible to assistive technologies, or else an alternative means of accessing equivalent content is provided
- When form controls are text input fields use the LABEL element
- When text is not available use the title attribute
- Include any special instructions within field labels
- Make sure that form fields are in a logical tab order
- Include a ‘Skip Navigation' button to help those using text readers
(via U.S. Department of Health and Human Services)
While this list is helpful, it’s smart to ask people with disabilities test your website and report back with changes and improvements. Moving forward, I will be taking ADA compliant design into consideration and making a creative plan of how to work this stage of design and development into the workflow process.
Thanks for opening my mind, Steve Gates.
Monica is the Owner and Creative Director at MonicaLauren design based in Denver, Colorado. She has over ten years of professional experience working with clients from New York to L.A. in music and entertainment, travel and tourism, interior design, health, and apparel industries.