Overview
We serve millions of people, and we believe everyone deserves equal access to our content. That's why we're committed to meeting accessibility standards, including WCAG 2.2 and the European Accessibility Act.
- Add text alternatives for images and media
- Ensure sufficient colour contrast
- Use clear, logical page structures
- Test with real users and screen readers
- Use labels and announcements with care
- Rely on colour alone to convey information
- Use vague link text like "read more"
- Autoplay media with sound
- Think of accessibility as an afterthought
Principles
The Web Content Accessibility Guidelines (WCAG) are built around four key principles that guide everything we do:
Perceivable
- Provide text alternatives for images
- Support captions and transcripts for audio/video
- Use accessible font sizes
- Maintain sufficient colour contrast between text and background
Operable
- Make all functionality available by keyboard
- Respect user settings like reduced motion and text zoom
- Avoid autoplaying media
- Ensure interactive elements are large enough to tap or click
Understandable
- Use clear, simple, and consistent language
- Provide helpful error messages and instructions
- Provide meaning to elements (form labels, aria labels, link text)
- Use semantic HTML
Robust
- Ensure compatibility with current and emerging technologies
- Test with screen readers and assistive technologies
Understanding different needs
Accessibility isn't just for people with permanent disabilities, it's about designing for everyone. By understanding the different ways people might interact with our content, we can create experiences that benefit all.
Situational
Temporary
Permanent
Guidelines
Text contrast
Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). This ensures text is readable for people with low vision or in bright sunlight.
When text is on top of images, graphics, or gradients, the contrast is evaluated against its lowest point.
Black text on white background
Gray text on white background
Do
Sufficient contrast
Light grey text on white background
Light blue text on white background
Don't
Not enough contrast
Image alt text
Alt text provides a text alternative for screen readers & other assistive technologies. Because our content bridges journalism and academia, alt text must capture both the subject and the intellectual takeaway of the image.
- 1–2 concise sentences describing the core action and context
- Proper capitalization and punctuation
- Describe the chart type, the variables, and the main visual trend or takeaway
- Leave empty if the image is just decorative
- Explain who a person is and their role/affiliation if it is relevant
- Start with "Image of" or "Photo of"
- Over-describe irrelevant details like clothing colours
- Describe every datapoint in a chart
- Repeat the caption word for word
- Always use the same alt text for the same image
General examples
<img alt="Group of young college students laugh and walk along a tree-lined pathway." />
Do
Descriptive and specific
<img alt="Photograph." />
Don't
Vague and unhelpful
<img alt="Dr. Sarah Jenkins, Professor of Marine Biology standing in a classroom." />
Do
Explain who a person is and their role/affiliation if that is why they are relevant to the article
<img alt="Image of Dr. Sarah Jenkins with red hair wearing a black top and smiling next to a whiteboard in a classroom with white walls." />
Don't
Too much visual trivia that is unlikely to be useful knowledge.
Data and charts
<img alt="A map showing light pollution across North America, with severe pollution increases across the United States, particularly in the north eastern region." />
Do
Describe the overall data trend
<img alt="Map of North America with spots indicated on it." />
Don't
List visual elements without context
Context matters
Psychology of loneliness
<img alt="A single, empty wooden chair sits alone against a dark background." />
Do
In an article about isolation, the physical details of the wood don't matter. The emotional takeaway (emptiness and being alone) is the focus.
Woodworking and design
<img alt="A simple, handcrafted wooden armless chair with a solid backrest." />
Do
In a design or history article, the user needs to know about the physical construction, materials, and style of the chair.
News
<img alt="" />
Do
If the image is just a visual spacer that adds no intellectual value to the text, the alt attribute should be intentionally left blank so screen readers skip it.
Musical theatre
<img alt="Wooden armless chair." />
Don't
This is literal but contextless. It reads like a furniture catalog stock description rather than editorial content. It tells the reader what it is, but not why they should care.
Link text
Link text should be descriptive and make sense out of context. Screen reader users often navigate by links alone.
Heading structure
Use headings to create a logical page structure and don't skip levels.
Do
Don't
Audio and video
Multimedia is core to our storytelling, but it must never lock anyone out. Captions, transcripts, and restraint with autoplay keep our reporting accessible to everyone.
- Respect users reduced motion settings
- Provide accurate captions for any video with speech
- Offer a transcript for audio-only content like podcasts
- Describe meaningful on-screen visuals for users who cannot see them
- Autoplay media with sound
- Rely on auto-captions
- Place breaking-news updates only inside audio or video
- Use flashing content that could trigger seizures without appropriate warning
Tables
Use tables for data, never for visual layout. A header row lets screen readers announce each column, and a short caption explains what the reader is looking at.
- Use tables only for genuine tabular data
- Add a short caption summarising what the table shows
- Keep cell content concise and scannable
- Use tables to force a visual layout
- Omit the header row
- Merge cells in ways that break the reading order
- Leave the table without any introduction or caption
Structuring data
Research funding by year
| Year | Funding | Studies published |
|---|---|---|
| 2024 | £2.1m | 48 |
| 2025 | £2.8m | 61 |
Do
A header row labels each column, so a screen reader announces 'Year, Funding, Studies published' as it moves across each row.
Research funding by year
| 2024 | £2.1m | 48 |
| 2025 | £2.8m | 61 |
Don't
With no header row, every cell is just data. A screen reader reads '2024, 2.1m, 48' with no idea what those numbers represent.
Tables are for data, not layout
About the author
A short biography of the journalist.
Related coverage
Links to related reporting.
Do
When the goal is to place content side by side, use a layout grid instead of a table. Screen readers read it as ordinary flowing content.
About the author A short biography of the journalist. | Related coverage Links to related reporting. |
Don't
Using a table purely to sit two blocks next to each other forces assistive tech to announce 'table, two columns' for content that isn't data at all.
Keep cells concise
Study outcomes
| Region | Trend |
|---|---|
| North | Rising |
| South | Stable |
Do
Short, scannable cells. Detail and analysis live in the surrounding article, not inside the grid.
Study outcomes
| Region | Trend |
|---|---|
| North | Across the northern region researchers observed a sustained upward trend over the full study period, with the sharpest increases concentrated in the final two years and attributed to a combination of policy and funding changes. |
Don't
Cramming full paragraphs into cells makes the table exhausting to navigate one cell at a time.
Resources
Web Content Accessibility Guidelines (WCAG)