What are the Web Content Accessibility Guidelines (WCAG) and why are they important?
- Question:
- What are the Web Content Accessibility Guidelines (WCAG) and why are they important?
- Answer:
Web Content Accessibility Guidelines (WCAG) is a set of guidelines, which help ensure that web content is accessible to everyone; including people with disabilities. Accessibility supports social inclusion and provides a better user experience for all.
They are important for the following reasons:
- Compliance with the WCAG ensures that the the universty meets the legal requirement and avoids any legal repercussions.
- Universities need to ensure that their digital content is accessible to all students, including those with disabilites.
- WCAG guidelines ensure that web content is compatible with assistive technologies such as screen readers, magnifiers, and voice recognition software. This is crucial for students who rely on these technologies to access course materials, submit assignments, and participate in online discussions.
Who's responsible for being compliant?
Everyone is responsible for ensuring the website complies with the WCAG.
How do I start?
Step 1: Review your content on the webpage
Writing
| Titles |
|---|
| Headings |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | should tell a story and a brief outline of the content (Use < h1 > for the main title) |
| Sub-headings |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | use these to label and group the sections (Use < h2 > for the sub-headings) |
| Shorter sentences |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | use simple language and avoid jargon by writing out any abbreviations |
| Language |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | consider those whose first language is not English and keep the language simple |
| HTML links |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | Instead of writing ‘click here’, describe the content of the link with meaningful text. For example, 'Read more about our accessibility guidelines.' |
| Alternative text for images |
|---|
| create a short and unique title that describes the page content and distinguishes it from the other pages | Use alternative text to describe what is happening in the image; be it information or the purpose |
| Titles |
create a short and unique title that describes the page content and distinguishes it from the other pages |
|---|
| Headings |
should tell a story and a brief outline of the content (Use < h1 > for the main title) |
|---|
| Sub-headings |
use these to label and group the sections (Use < h2 > for the sub-headings) |
|---|
| Shorter sentences |
use simple language and avoid jargon by writing out any abbreviations |
|---|
| Language |
consider those whose first language is not English and keep the language simple |
|---|
| HTML links |
Instead of writing ‘click here’, describe the content of the link with meaningful text. For example, 'Read more about our accessibility guidelines.' |
|---|
| Alternative text for images |
Use alternative text to describe what is happening in the image; be it information or the purpose |
|---|
For more tips on writing, take a look at our tone of voice and writing style guidelines.
Design and layout
| Content |
|---|
| White spaces |
|---|
|
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
more white spaces help the reader to focus on areas on the page without being distracted, so allow spacing around headings and paragraphs
|
| Visual flow |
|---|
|
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
generally, the eyes start to scan from the top left and horizontally downwards, so positioning on the page is important when designing the page. Place the most important information on the top left hand side of the page.
|
| Responsive design |
|---|
|
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
consider the webpage design on a desktop computer, laptop, mobile and tablet when designing it
|
| Multimedia |
|---|
|
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
use videos, images, tables and graphs to enhance the content on the page
|
| Captions |
|---|
|
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
include captions for videos, especially if there is a lot of background noise
|
| Content |
the text on the webpage determines the layout and design so it's important to do this before laying out the page
|
|---|
| White spaces |
more white spaces help the reader to focus on areas on the page without being distracted, so allow spacing around headings and paragraphs
|
|---|
| Visual flow |
generally, the eyes start to scan from the top left and horizontally downwards, so positioning on the page is important when designing the page. Place the most important information on the top left hand side of the page.
|
|---|
| Responsive design |
consider the webpage design on a desktop computer, laptop, mobile and tablet when designing it
|
|---|
| Multimedia |
use videos, images, tables and graphs to enhance the content on the page
|
|---|
| Captions |
include captions for videos, especially if there is a lot of background noise
|
|---|
For more tips on images, take a look at our image guildeines.
How can I check if my page meets the accessibility requirements?
Brunel uses Silktide’s scanner to identify and optimize web content accessibility issues on extranet and public-facing intranets. Silktide's scanner is synced with the latest WCAG 2.1 AA compliance reports.
- Login: please go to Silktide and log in (Silktide will email you your password, which you should then change)
- Search: Silktide will search for broken links, misspellings, offensive language, missing images, page titles
- Recommendations: It will show the issues and make recommendations according to the WCAG criteria
- Device testing: It also tests desktop and mobile accessibility for multi-device capability
How can I manage my microsite(s)?
- Dashboard: search for your microsite title in the dashboard
- Site List: click ‘Websites’ in the top menu to view all microsites
- Weekly Scans: conducted every Sunday for regular WCAG rating overviews
- Monthly Reviews: schedule monthly alerts to review and improve accessibility
Watch the WCAG videos at Silktide Academy to understand web accessibility with examples to ensure your content meets accessibility standards.
We're here to help, so if you have any questions you can reach us at marketing-channels@brunel.ac.uk