Interactive Design, Strategy, & Technology for Websites, Mobile, Apps, & Games

Dynamic Header


Accessibility Tips for Designers and Developers

View All Blog Posts

Accessibility Tips for Designers and Developers

– by Dan Willig

Today is the 1st annual Global Accessibility Awareness Day, an initiative started by web developer, Joe Devon and accessibility specialist, Jennison Asuncion. The mission of the initiative is to increase awareness about digital accessibility to a broad audience. At Funny Garbage, we understand just how critical it is to create accessible experiences and we'd like to commemorate the day by sharing some of our understanding and pointers on the subject of accessibility on the web.
Please note that many of these concepts can be expanded to encompass other digital and analogue interfaces.

Accessibility? What's that about?

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

Accessibility guidelines target  all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities.

It also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people using mobile devices, people with "temporary disabilities" like a broken arm, and people with changing abilities due to aging.

All of us in the interaction design and development community should all striving to create accessible websites so people of all abilities can access the content we're providing.

Who sets the standards for accessibility?

The World Wide Web Consortium (W3C) has a basic set of guidelines that I recommend trying to follow whenever possible.  Additionally, Section 508 provides legal guidelines for government websites. The chart below outlines the high-level standards for each.

W3C standards include the following: Provide text equivalent for non-text elements, Server-side image maps, No flicker on monitor, Documents can be read w/o style sheet, Presentation of information not reliant on color only Use natural language, Auditory descriptions. Section 508 standards include the following: Provide text equivalent for non-text elements, Server-side image maps, No flicker on monitor, Documents can be read w/o style sheet, Presentation of information not reliant on color only.

What are some of the coding techniques that can be leveraged to make a website more accessible?

  • Writing semantic and ordered code will make it easier for people using screen readers, programs that read the markup and present the content to someone through speech output or paperless braille displays, to access content.
  • If your site is presenting important content in video or audio format, ensure that there is an accompanying text alternative for people who won't be able to see or hear the content.
  • Be consistent in the visual treatment of standard text versus links. At times, I've seen examples when text has been highlighted with a specific color to emphasize the content. This sets a false expectation that the highlighted text is a link. The same is true for underlined text and it should be used with caution on the Web.
  • Use multiple techniques to distinguish links from text. It is a common practice to make links a different color from standard copy but some people may not be able to see the color you've designated for links. If the contrast between the two text colors isn't relatively high, it may be beneficial to also underline lined text.

What are some tools that can be implemented to make a website more accessible?

  • Provide a text resize widget. While most browsers enable users to increase the text size, this can break the layout of a site that wasn't coded using flexible values. A widget placed at the top of the screen that enables people to change the size of the text to make it easier to read can be most helpful to many people.
  • Place a skip navigation link at the start of the body content. This will benefit people who are navigating a website with the aid of a screenreader and will enable them to navigate from page to page without having to wait while the screenreader reads the navigation at the top of each page.
  • Include an option to invert the contrast on a site, for example switching the background from white to black and the text from black to white. This will also benefit people with specific vision deficiencies. 
  • Offer translation solutions. While Google translate isn't a perfect solution, it can help people access a website's content across the globe.

The following list of pointers should help you in this endeavor. Feel free to print it out and keep it in your workstation as a reminder and guide. I hope this demystifies accessibility and inspires folks to start taking an accessible approach toward web design.

Funny Garbage's Quick Accessibility Tips. 1. IMAGES & ANIMATIONS - Use the alt attribute to describe the function of each visual. 2. IMAGE MAPS Use the client-side map and text for hotspots. 3. MULTIMEDIA - Provide captioning and transcripts of audio, and descriptions of video. 4. HYPERTEXT LINKS - Use text that makes sense when read out of context. For example, avoid saying click here. Use consistent styling conventions for link states. 5. PAGE ORGANIZATION - Use headings, lists, and consistent structure. Use CSS for layout and style where possible. 6. GRAPHS & CHARTS - Summarize or use the longdesc attribute. 7. SCRIPTS, APPLETS, & PLUG-INS - Provide alternative content in case active features are inaccessible or unsupported. 8. FRAMES Use the noframes element and meaningful titles. 9. TABLES Implement hover effects for row-by-row reading. Include caption and summary. Use thead and tbody tags. 10. CHECK YOUR WORK Use tools, checklist, and guidelines at www. and validate at validator.