ADA Compliance in Digital Communications and on Sites
(includes website, all Google sites, and any online site or digital communication vehicle)
- The words "Click Here" are not compliant. I know it may seem counterintuitive, but instead of saying "Click Here" the name of the document or website should simply be hyperlinked. Examples:
Examples:
To view the Board of Education Agenda, Click Here. - incorrect
Click here to view this week's E-Notices. - incorrect
View this week's E-Notices. - Correct
- Do not use italics or highlighted text. You can use bold and underline.
Examples:
Author of George Gets Slimed; Seesaw Saturday. - incorrect
Author of George Gets Slimed; Seesaw Saturday. - correct
Please pay your HSA Dues today. - incorrect
Please pay your HSA Dues today. - correct
- Only some fonts can be read by a digital or manual screen reader. Digital screen readers work with our computers to read what is on the screen. Manual screen readers are table top devices that look similar to old overhead projectors and read out loud the content of what is placed on the machine. And, the wrong fonts don’t just affect those living with disabilities either, even those with learning difficulties such as dyslexia struggle with certain text.
Do not use fonts that have any fancy curly cues, simulate script handwriting, are in all capital letters, or are condensed or overly expanded. Stick with fonts that do not have serifs (the little lines at the end of the letters), use accurate letter formation, and are basically easy to read.
So, what are some great font choices? Verdana, Tahoma, Montserrat, Calibri, Helvetica, Arial, and Tahoma. Other slab serif fonts like Arvo Museo Slab and Rockwell are also accessible. Please note that Google Docs do not have all accessible fonts and some of their fonts are not ADA-compliant. The same is true for all Google or MicroSoft programs, so please check your fonts. Recommendation for the District: Verdana, Arial, and for headings - Open Sans.
Want to know some terrible font choices? OK, since you asked: Comic Sans, Book Antigua, Georgia, and avoid fonts featuring “imposter letter shapes” that are designed to be very similar to other letter shapes as part of their visual style, such uppercase Is, the number 1, and lowercase Ls. Always avoid any font that is not a True Type Font.
- Point Size Matters - Never use a point size smaller than 12pts (which equals 16px). And although 12pt is the minimum, 14 to 16pts improves readability. Note that the minimum can vary though, depending on which font and the associated contrast. See the next bullet.
- Contrast is key - There are actual contrast ratios that are ADA-approved. Color contrast is one of the most commonly referred to aspects of ensuring your digital documents meet accessibility criteria, and there are many great tools available to check the WCAG 2.0 criteria for color contrast ratios. My favorite is the WebAIM Contrast Checker. However, it is not always convenient to check contrast every time you are creating a document, so there are some easy guidelines to follow.
- Black on white is always best. Pure black on white is the highest contrast that you can achieve. However, remember that point size and font are also key when the black is text.
- The darker the color, the higher the contrast. This seems like common sense, but certain colors may appear dark to you and don't meet the ratio. Stick with black, dark green, dark blue, dark grey, dark red, or dark purple on white or white on these colors. These colors meet the ADA compliance rules for contrast. Note: Be careful with red and green combinations as this is the most common color vision deficiency combination. We are lucky as our Maroon is a high-contrast color (hex code is #76232f), which means it can be used for text or for background color under white text.
- The color difference of text and its background should have a contrast ratio of at least 4.5:1. This also applies to images of text. Exceptions are: When using large text (18 points or larger), a ratio is 3:1 is sufficient.
- Color can be tricky - Related to contrast is color. Not every color is ADA-compliant for text, but can often be used for background colors or decorative lines/images (see above). Many of us can intuitively point toward a pleasing, engaging color combination. However, people with certain vision impairments cannot. While they may seem cool in the design stage, color combinations that are close in hue, saturation, or brightness will prove very challenging to people with vision impairments. Additionally, color combinations that are too bright or too saturated can overwhelm certain website visitors and leave them incapable of properly engaging with a web page.
There are certain color combinations that tend to be problematic, as they often do not contrast sufficiently. These include, but are not limited to:
Green and red
Green and blue
Blue and black
Yellow and orange
Yellow and red
Yellow and green
Purple and black
Red and brown
Blue and purple
The district light gray should never be used for text.