Accessibility Cheat Sheet
Two things fix most accessibility problems on a page: headings in the right order and good alt text on images. Screen reader users rely on both to navigate and understand a page, and both are legal requirements for us (WCAG 2.1 AA and Section 508).
This sheet shows how to get them right using our own editing blocks.
Headings: Build an Outline, Not a Font-Size Picker
Think of headings as the table of contents of your page. A screen reader user can pull up a list of just the headings and jump around — but only if the headings are in a sensible order. Sighted users skim the same way.
Heading Rules
- One H1 per page — and it is already there. The page title is the H1. Our Page Header block creates it automatically. Do not retype the page title inside a Heading block, and do not try to make a second “big title.”
- Pick a heading level by where it belongs, not by how big it looks. On our site the size of a heading is set separately from its level — so choose the level that matches the structure, and it will still look right.
- In the Heading block, “Level 1” means the top section under the page title. Because the page title is already the H1, the block’s levels sit beneath it. Just think of them plainly:
- Level 1 = a main section of the page
- Level 2 = a subsection inside a Level 1
- Level 3 = a smaller point inside a Level 2
- Go in order. Do not skip levels. Never jump from Level 1 straight to Level 3. Each step down goes one level at a time. Going back up any number of levels is fine.
- Do not use bold text as a heading. If it introduces a section, use the Heading block. Bold is only for emphasis inside a sentence.
- Some blocks already make their own headings — do not double up.
- Cards — each card’s title is automatically a subheading.
- Content & Image and Feature Break — the title is automatically a section heading.
- So do not add a Heading block right above them just to repeat the same words.
What a Good Outline Looks Like
Page Title . . . . . . . . . . (H1 — from the Page Header, automatic)
Level 1: Admissions
Level 2: Freshman Students
Level 2: Transfer Students
Level 1: Financial Aid
Level 2: Scholarships
Level 2: Grants
Self-Check: Headings
Read only the headings, top to bottom. Do they sound like a sensible table of contents? If yes, you are done. If a heading feels out of place, its level is probably wrong.
Alt Text: Describe the Image for People Who Cannot See It
Alt text is the words a screen reader reads in place of an image. It is also what shows if the image fails to load, and it helps search engines. Every image that carries meaning needs it.
Where You Set Alt Text
In the Media Library, in the Alternative Text field — set it when you upload or select the image.
Every WNMU block that uses images pulls the alt text from there: Image Row, Cards, Slider, Content & Image. Set it once on the image and it works everywhere that image is used.
Alt Text Rules
- Describe the meaning, not the file. Say what the image shows and why it is there. Never leave it as a filename like
IMG_2043.jpg. - Do not start with “Image of…” or “Photo of…” The screen reader already says it is an image. Jump straight to the description.
- Keep it short — about one sentence (roughly 125 characters). Say what matters in this context and stop.
- If the image is purely decorative, leave the alt field empty. A background texture, a divider, a mood photo that adds no information — an empty alt tells the screen reader to skip it. Do not type “decorative” or a filename.
- Our note: Page Header background images are decorative by design — the page title is the real content — so they do not need descriptive alt.
- If the image contains words (a flyer, a poster with dates and times), put those words in the alt text — or better, also add them as real text on the page.
- Caption is not alt text. The Image Row block has a separate Caption field that everyone sees. Alt text is for people who cannot see the image. They can say different things — do not just copy one into the other.
- Logos: use the organization’s name, for example
Western New Mexico University. - If the image is also a link (some Slider images link out): the alt should describe where it goes or what it is, not just what it looks like.
Good vs. Not-So-Good Alt Text
| Avoid | Better |
|---|---|
image of students |
Students studying together in the Miller Library commons |
DSC_0891.jpg |
Mustangs baseball team celebrating a home win |
photo |
Dr. Jane Smith, Dean of the College of Education |
flyer |
Spring Career Fair — April 12, 10am, Besse-Forward Global Resource Center |
A decorative banner with banner |
Leave the alt field empty |
Self-Check: Alt Text
If you hid the image and only had the alt text, would a reader still get the point? If yes, it is good. If the image is just decoration, empty alt is the right answer.
The 30-Second Check Before You Publish
- The page has exactly one H1 — the page title — and I did not recreate it in a Heading block.
- Heading levels go in order, no skips, chosen by structure and not by size.
- Reading the headings alone sounds like a table of contents.
- Every meaningful image has alt text that describes its point.
- Decorative images have an empty alt field.
- No alt text starts with “image of” or is just a filename.
- I did not add a Heading block that just repeats a title a Card, Content & Image, or Feature Break block already makes.
WNMU Web Ops accessibility quick reference. Questions: contact the web team.
