Accessibility content creation

For website accessibility, IT and the chosen CMS handle a majority of accessibility concerns: operable, perceivable, understandable, and robust accessibility (POUR). The main accessibility responsibility on the content owners will be the content itself, only perceivable and some understandable accessibility. This ranges from the choice of language, the structuring of sentences and paragraphs, and images/graphics. This guide will walk through those items and things to consider and look out for. This focuses on WCAG 2.1 AA standards, although there are some AAA standards that are worth mentioning and considering.

Image Accessibility

One of the biggest discussions in accessibility are images. Images can be decorative to the page, provide important context, and have information on them that is vital to the content written. It is important that we mark them correctly and label them for accessibility. 

1.1 Text Alternatives
1.1.1 Non‑text Content (A)

Link to Detailed Understanding for Non-text Content

Drupal has the capability of adding images that are purely meant for decorative image. When uploading this in the WYSIWYG editor, it must be marked as “Decorative Image”. This is for images or graphics that don't provide any useful information to the context. This could be a graphic that is dividing a section, something that is purely cosmetic or redundant. This will give alt="" or null, but with some specific markings to tell screen-readers to ignore.

For all other images, they must be properly given alt text, text alternatives, or full text equivalents. Which one is required depends on the content shown in the image. Below are the relevant sections of the WCAG Guidelines.

1.3.1 Info and Relationships (A)

If the image shows relationships (steps, branches, hierarchy), those relationships must also exist in text.

1.4.5 Images of Text (AA)

Text inside images must be avoided unless essential — and if used, the full text must be provided elsewhere.

1.4.11 Non‑Text Contrast (AA)

If the image includes icons, shapes, or color‑coded meaning, those must be perceivable in text.

1.2.3 / 1.2.5 (A/AA)

If the image is part of multimedia, the information must be available in captions or descriptions.

Solutions and Best Practices

For regular images, I would strongly recommend reading over this guide from WEBAIM. 

This guide goes over image contexts, what to take in mind when writing the alt text, and great examples to pull from.

For large complex images such as charts, diagrams, or flow charts, you must also provide a full text alternative. The alt text can simply read “Chart for Specific Name” and then in a caption below it can contain a written summary of the content or link to another page for a written alternative. Any diagram, chart, flow chart, infographic, or image containing essential text must include a complete text alternative that communicates the same information in a structured, accessible format. This is required for WCAG 2.1 AA compliance.

Video Accessibility

Creators are responsible for captions, transcripts, and descriptions. Here are the relevant sections pertaining to 1.2 Time-based Media.

Link to Detailed Understanding of Time-based Media

1.2.1 Audio‑only & Video‑only (Prerecorded) (A)

Provide transcript for audio. Provide text alternative for video‑only content

1.2.2 Captions (Prerecorded) (A)

All prerecorded videos must have captions

1.2.3 Audio Description or Media Alternative (Prerecorded) (A)

Provide a text alternative describing essential visual info

1.2.5 Audio Description (Prerecorded) (AA)

If visuals convey meaning not in audio, provide audio description or a full text alternative

AAA (easy enough to include)

• 1.2.6 Sign Language (Prerecorded) — optional; rarely required
• 1.2.8 Media Alternative (Prerecorded) — long text description
• 1.2.9 Audio‑only (Live) — not relevant to most content creators

Here is a great detailed guide on making your videos accessible.

Content Structuring

This is mostly structured in the backend when done correctly, but is especially important to be mindful of in large sections of WYSIWYG editors where you have control over paragraph, heading styles, and source code editing. This also touches on some language to avoid.

Link to Detailed Understanding of Adaptable Content Structuring

1.3.1 Info and Relationships (A)

Creators must:

Use real headings (H1–H6), lists, tables, labels

Avoid using styling to fake structure.

In WYSIWYG editors, you have the ability to select different headings. It's important to keep them in sequence. For example in this document where I am selecting headings, I have left “Heading 1” untouched as the title of the page is the sole H1 that should be included. The secondary title is Heading 2, and the tertiary titles are Heading 3, with heading 4 within those sections. The styling informs a lot of these and feels natural to do, but it's important to maintain as that is how screen-readers determine ordering. 

1.3.2 Meaningful Sequence (A)

Ensure content reads logically in source order

Avoid copy‑pasting messy PDF‑converted HTML

1.3.3 Sensory Characteristics (A)

Avoid instructions like “see the red button” or “on the right”

Distinguishable, Colors and Contrast

This section is about colors, contrast, spacing, and images of text. Color contrast is a delicate balance between branding and accessibility. We have to choose backgrounds and font colors carefully to achieve the correct contrast for readability. 

Link to Detailed Understanding of Distinguishable

1.4.1 Use of Color (A)

Do not use color alone to convey meaning

1.4.3 Contrast (Minimum) (AA)

Ensure text meets contrast ratio requirements

Applies to text in images too

1.4.5 Images of Text (AA)

Avoid putting text inside images unless absolutely necessary. View relevant sections above for more detailed solutions for text in images.

1.4.11 Non‑text Contrast (AA)

Icons, infographics, and graphical components must have sufficient contrast

1.4.12 Text Spacing (AA)

Don’t override default line-height/spacing in ways that break readability

Operable

This is a shorter section for content creators, as most of the operable criteria is developer side. There are a few relevant sections to be mindful of. Most of them are AAA standard, but should be considered when creating content.

Link to Detailed Understanding of Relevant Operable

2.3 Seizures and Physical Reactions

2.3.1 Three Flashes or Below Threshold (A)

Do not upload flashing content

2.3.2 Three Flashes (AAA)

Same as above; easy to comply

2.3.3 Animation from Interactions (AAA)

Avoid auto‑playing or motion-heavy GIFs

Navigable

The relative sections in this area are mostly related to the areas that content creators can control. It's mostly for labeling, meaningful titling, and purpose.

Link to Detailed Understanding of Relevant Navigable

2.4.2 Page Titled (A)

Provide clear, descriptive page titles

2.4.4 Link Purpose (In Context) (A)

Use descriptive link text (“Download the report”)

2.4.6 Headings and Labels (AA)

Use meaningful headings and form labels

2.4.9 Link Purpose (Link Only) (AAA)

Link text alone should describe purpose (easy to adopt)

2.4.10 Section Headings (AAA)

Use headings to organize content

Understandable

This section is extremely relevant to content creation directly. This is all controlled strictly by the content owners. 

Link to Detailed Understanding of Understandable - Readable

3.1 Readable

3.1.1 Language of Page (A)

Ensure correct language is set (IT handles markup; creators must write in the correct language)

3.1.2 Language of Parts (AA)

Identify foreign-language phrases

3.1.3 Unusual Words (AAA)

Provide definitions for jargon

3.1.4 Abbreviations (AAA)

Expand abbreviations on first use

3.1.5 Reading Level (AAA)

Aim for plain language; required only if content is complex

3.1.6 Pronunciation (AAA)

Provide pronunciation when needed for clarity