Skip to Main Content
Go to Penn Libraries homepage   Go to Guides homepage

Accessible Code for Content Providers

It's not just screen readers.

"26% of adults in the United States have some kind of disability." - CDC web page and info graphic

Graph: Mobility: 13.7%; Cognition: 10.8%; Independent living: 6.8%; Hearing: 5.9%; Vision: 4.6%; Self-care: 3.7%.

See the full graphic

Captions Are an ADA Requirement for Multimedia

In our ongoing efforts to ensure our digital spaces and communications are as inclusive as possible, Penn requires the captioning of all multimedia. - Web Accessibility at Penn

Don't Rely on Color to Convey Information

8% of men and .5% of women are colorblind. At Penn that's 1781 people. (Penn population stats taken from

  • Don't rely on color to convey information. 
  • Don't say,"Items marked in red are errors and need to be corrected."
  • Do use color. But do add text or symbols (with alt text, of course) to convey your information.

Below left: A LibCal room reservation grid as most people see it.
Below right: The same grid seen with the most common type of red-green colorblindness. Luckily, we added x's for unavailable rooms and checkmarks for your requests.

LibCal room reservation grid in color LibCal room reservation as it appears for people with deuteranopia, the most common type of colorblindness

The COBLIS website will simulate all variants of color blindness.

Design for Low Vision: 1. Color Contrast

191,700,000 Americans correct their vision.

Color Contrast:

Text to background contrast must accommodate people with moderately low vision. That means a contrast ratio of 4.5:1.

Detail of the color checker with suggested tweaks

Design for Low Vision: 2. Be Prepared to Make It Bigger

I need it bigger!

People with low vision may set their browsers to 200%, 300%, even 400%. These people use desktop computers to see the mobile version of your page.

What works: Content that re-flows to accommodate mobile devices.

What doesn't work: Content that requires horizontal scrolling to read simple sentences.

Advanced Sizing: Use "rems"

What if text grows and images do not?
Solution: Set measurements in "rems."

  • Do define all font sizes and all measurements using rems, not pixels.
  • 1rem = 10px.
  • if "font-size: 1.6rem" (16px) and image "height: 10rem; width: 50rem" (100px x 500px), image and text can be expanded in perfect coordination (and you won't be embarrassed when your team shouts "Make the font bigger!").

Using rems requires that someone set up "rems" on the back end of your website. LibGuides and most Drupal sites are already set. "Need help with the rems setup?, ask ALT.

Penn Libraries Home Franklin Home
(215) 898-7555