< Return to Feed
Aaron Smith - 10.19.2017

Making Images Readable to Meet ADA Compliance

What is ADA Compliance?

The Americans with Disabilities Act (ADA) was enacted into law in July 1990 by President George H. W. Bush. The ADA is the foundation for all legal requirements in businesses and government agencies regarding accessibility for people living with disabilities. The ADA originally focused on physical activities, and played a key role in providing wheelchair ramps and allowing service dogs to enter buildings. Recently, the ADA began addressing Internet issues as well to ensure that digital information is accessible to those with sensory, physical and cognitive disabilities.

Making Images Readable

It is becoming an increasingly common practice for agencies to adapt their sites to meet the minimum A standard of ADA compliance. This has led to the inclusion of inline images over background images for the sake of screen readability, and often leads to specific image size and ratio constraints being provided to the developer or client, greatly limiting the responsive effect an image or non-text object can have. This can cause a forced use of images that are solely landscape, higher resolution, and constrained to an incredibly specific ratio that is consistent across all screen and device sizes. The need for concise, readable alt text has also lead to a new system of content management, placing as much emphasis on the short descriptions as on the images themselves.

When working within the constraints of ADA-compliant images and their required alt text to create responsive background images there are a variety of solutions available. Some developers have resigned themselves to the use of title tags on the divs in question, while others include secondary images in a size so small they cannot be seen. The most effective of these solutions can be determined by the use case of the image in question. For background images that maintain a similar functionality to that of background-size: cover, there is a relatively simple solution that can work in almost any instance where a standard background image would work. The theory behind this method is to always ensure that the image fills its parent, regardless of ration, and clip the portions that do not fit. This method removes any image ratio restrictions put on the client and allows for a more versatile component.

Example of ADA-compliant code for images.

This method of creating background images can also be used to manipulate picture elements that utilize an image source, further expanding the utility of using inline images as opposed to background images. This method not only rises above background images because of increased ADA compliance by including alt text, it will also allow for multiple images to be used, depending on screen size. This allows for faster loading experiences on small and mobile devices and can even have a more creative effect of adjusting point of focus at different screen sizes to better enhance the viewing experience, all without losing compliance.

Example of ADA-compliant code for images.

Making Images Worth It

Though the above solves the problems related to background images being readable, the practice of using alt text is another issue entirely. According to WCAG 2.0 Guidelines, text alternatives for any non-text content must be provided so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language. These messages should be constrained to 75-100 characters and should properly convey the meaning or title of the image provided. If the image or non-text item is more complex, such as a graph or chart, additional copy, possibly contained in a text element, should be included in the same container for screen readability and full conveyance of information.

For example, a line graph that shows average winter temperatures from the past 10 years would include a short(alt) text alternative of "Average winter temperatures 1996-2006” and a long text description in a subsequent paragraph that includes the data table that was used to generate the line graph. Something simpler, like a landscape or a stock office picture, could be covered solely by the short text of “People working in an office” without the need for a long text description unless a significantly deeper meaning needs to be conveyed.


The requirement to make websites and mobile apps accessible to wider audiences is likely to increase as time goes on. While compliance may require a few extra technical steps, optimizing websites and mobile apps for ADA compliance ultimately produces more usable content and more satisfying online experience for a wider range of audiences.

Click here to see an example of ADA-compliant code.