In her role as Web Content Coordinator at the Fashion Institute of Technology, Norma Stary has power many of us dream about—and what’s more, she uses this power for good. She’s a Certified Professional in Accessibility Core Concepts, and it shows in the way she governs FIT’s web presence. With file type–specific directories, automated site reporting, and web author training, she makes it easy in her CMS to do the right thing.
Many of us know how dicey a website can get when it has a whole lot of authors. Especially when they don’t know how to write accessibly. So Norma restructured her web publisher training to include twelve accessibility guidelines in three broad categories for her authors to follow before they can log in to the CMS.
Text
- Use Headings.
Repeat three times: I do not care what the heading tags look like. Use them like an elementary school–style outline, not for visual appeal. - Limit Font Size and Weight.
No font should be smaller than your defaults. Bold and italics are fine for emphasis, but reserve underlining for links. - Notice Color Contrast in Text.
Don’t rely on color alone to convey meaning. Not only is this a WCAG guideline, it’s also not that hard to do by adjusting the font weight or emphasis style along with the color. - Watch for Jargon, Acronyms, and Reading Level.
We all know our institution or department speaks its own language. That’s fine; just keep it off your website so your visitors know what you’re saying.
Links
- Make Purpose Clear From Link Text.
The words “view” or “read more” say nothing about what your audience will find when they click the link. Tell them what they’re walking into. - Don’t Use URL as Link Text.
Screen readers read out the entire URL, every dot, dash, slash, and string of numbers. Don’t make your audience listen to that! - Distinguish Link From Surrounding Text.
Link text should stand out. We all expect it to be blue and underlined, so leave it blue and underlined. If you must change the color, make sure it meets WCAG contrast standards. - Include the File Type in the Link Text.
For example: View Norma’s Presentation Slides (PPT). Again, tell your readers what to expect before they open the link.
Images and Graphics
- Write Thoughtful Alt Text Descriptions.
When you write alt text for your images, you have to make a case for including the image. Place decorative images in the context of the rest of your page. - Describe Action (Not Image) for Actionable Images.
For actionable images like buttons or icons, write actionable alt text. For example, “Save.” is better alt text than “Image of a 1990s-era 3.5-inch floppy disc.” (Note the period at the end of the text; the screen reader will pause before continuing on to the rest of the page!) - Use Diagrams.
Diagrams are great! They can help people with diverse learning styles and cognitive disabilities process information more easily. So use them. But also use alt text for them. For example, “Flowchart of our admissions process, described in the body copy.” - Skip GIFs.
This is controversial. And it doesn’t need to be a rule. But many GIFs don’t meet WCAG guidelines (i.e., Images shouldn’t flash more than 3 times per second, and if it moves for more than 5 seconds, it needs a stop/start function). If the GIF meets these rules, then sure, use it. Otherwise, skip them altogether.
Even with these guidelines, Norma reminded us all that we need to use screen readers and other accessibility tools so we have first-hand experience using our sites in the ways all of our visitors do with their many varied abilities. When we’re on the receiving end of each of these accessibility guidelines, we’ll be even better at appreciating why we need them and how to apply them to everything we do.