1. The Image Alt Text Decision Tree
To add alt text to a image, click on the image and add the text in the right sidebar in the alt text/title text fields.
Please note, any text that is part of an image is not accessible. Web services recommends NOT putting text in images. However, if you do, you MUST add the necessary information into the alt text field. What is "necessary information"? Anything that is important for the user to know about the image. If it is advertising an event, add the date, time, location, where to park etc. Unless that information is also noted in text form on the page.
When uploading an image, ask yourself: "If I couldn't see this, what would I miss?"
| Image Type |
Action |
Example Alt Text |
| Informational |
Describe the specific details. |
alt="Graph showing 20% increase in web traffic since 2025." |
| Functional |
Describe the destination/action. |
alt="Download the 2026 PDF Guide." |
| Decorative |
Leave it empty (Null). |
alt="" |
| Text-heavy |
Transcribe the text exactly. |
alt="Grand Opening: April 24th at the City Hall Plaza." |
2. The Heading "Outline" Test
Use headings in order. Do NOT skip heading numbers.
Think of your page like a book’s Table of Contents. If it looks like this, it passes:
Pro Tip: Don't pick a heading level based on how "pretty" or "small" the font is. Use Bold or Italics for emphasis within a paragraph, but use Headings only for structure.
3. Link Text: The "Stand Alone" Rule
If you pulled every link on your page into a single list with no other text, would they make sense?
-
❌ Avoid: "Click here," "More," "Link," "Read this."
-
✅ Use: "Download the 2026 Accessibility Checklist," "Register for the April Webinar."
4. Color & Contrast
In websites that are managed by Web Services, we have limited what colors can be used on some of our features like buttons and headings. This limitation ensures proper color and contrast. However, here are the requirements and strategies to make sure you remain in compliance.
To meet the WCAG 2.1 AA standard, your text must stand out clearly from the background.
-
Standard Text: Needs a contrast ratio of 4.5:1.
-
Large Text (18pt+): Needs a contrast ratio of 3:1.
-
The "Color-Only" Rule: Never use color as the only way to convey meaning. (e.g., instead of "Required fields are in red," use "Required fields are marked with an asterisk *").
5. Video & Multimedia
-
Captions: Must be synchronized and accurate (no "Auto-caption" fails).
-
Transcripts: Provide a text version of the video/audio for users who prefer reading or use braille displays.
-
No Auto-Play: Don't let video or audio start automatically; it interferes with screen readers and can be jarring for users with cognitive sensitivities.