Skip to content

Update WCAG references from 2.0 to 2.2 #5681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nayab-Gauhar wants to merge 1 commit into
base: main
Choose a base branch
from
+42 −43
Open

Update WCAG references from 2.0 to 2.2 #5681

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 42 additions & 43 deletions templates/accessibility.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
{% extends "_layouts/site.html" %}

{% block title %}Accessibility guidelines{% endblock %}
{% block description %}Vanilla Framework accessibility guidelines{% endblock %}
{% block copydoc %}https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit{% endblock %}

{% block content %}
<div id="main-content" class="p-strip">

<div class="p-strip" id="main-content">
<div class="row">
<div class="col-12">
<h1>Accessibility guidelines</h1>
<p>Vanilla Framework aims for Level AA conformance with the <br><a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a></p>
Copy link
Member

@jmuzina jmuzina Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please keep the BR, it helps ensure WCAG starts on a new line

<p>Vanilla Framework aims for Level AA conformance with the <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines (WCAG) 2.2</a></p>
</div>
</div>
</div>
</div>

<div class="u-fixed-width">
<hr />
</div>
<div class="u-fixed-width">
<hr />
</div>

<div class="p-strip">
<div class="p-strip">
<div class="row">
<div class="col-6">
<h2>Ensuring conformance</h2>
Expand All @@ -29,17 +28,18 @@ <h2>Ensuring conformance</h2>
<p>A checklist that can be filtered by A / AA level, with a short description and links to the related "Understanding" and "How to Meet" articles that accompany each criterion.</p>
<p class="p-heading--5 u-no-margin--bottom"><a href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA Authoring Practices Guide</a></p>
<p>
<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> A guide for understanding how to use <cite><a href="https://www.w3.org/TR/wai-aria-1.1/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.1</a></cite> to create an accessible Rich Internet Application. It provides guidance on the appropriate application of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, describes recommended <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> usage patterns, and explains concepts behind them.</p>
<abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> A guide for understanding how to use <cite><a href="https://www.w3.org/TR/wai-aria-1.1/"><abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> 1.1</a></cite> to create an accessible Rich Internet Application. It provides guidance on the appropriate application of <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr>, describes recommended <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> usage patterns, and explains concepts behind them.
</p>
<p class="p-heading--5 u-no-margin--bottom"><a href="https://validator.w3.org/nu/">The W3 Markup Validation Service</a></p>
</div>
</div>
</div>
</div>

<div class="u-fixed-width">
<hr />
</div>
<div class="u-fixed-width">
<hr />
</div>

<div class="p-strip">
<div class="p-strip">
<div class="row">
<div class="col-6">
<h2>Curated criteria checklist</h2>
Expand All @@ -48,9 +48,9 @@ <h2>Curated criteria checklist</h2>
<div class="col-6">
</div>
</div>
</div>
</div>

<div class="p-strip u-no-padding--top">
<div class="p-strip u-no-padding--top">
<div class="u-fixed-width">
<ul class="p-list is-split">
<li class="p-list__item is-ticked">Make sure there is enough contrast between text and its background color</li>
Expand All @@ -59,13 +59,11 @@ <h2>Curated criteria checklist</h2>
<li class="p-list__item is-ticked">Links should be visually identifiable and have clearly distinct states</li>
<li class="p-list__item is-ticked">Be as consistent and clear as possible in layout and copy</li>
<li class="p-list__item is-ticked">The general architecture and hierarchy of the content should make sense</li>

<li class="p-list__item is-ticked">Help users understand inputs, and help them avoid and correct mistakes</li>
<li class="p-list__item is-ticked">Write good alt text for your images</li>
<li class="p-list__item is-ticked">Make links descriptive</li>
<li class="p-list__item is-ticked">Users should be able to navigate content using a screen reader</li>
<li class="p-list__item is-ticked">If an experience cannot be made accessible, create another route for users to get that information</li>

<li class="p-list__item is-ticked">Use the correct HTML element for your content</li>
<li class="p-list__item is-ticked">Support keyboard navigation</li>
<li class="p-list__item is-ticked">Understand and use region landmarks</li>
Expand All @@ -78,37 +76,37 @@ <h2>Curated criteria checklist</h2>
</ul>
<p>*Adapted from <a href="http://accessibility.voxmedia.com">Accessibility Guidelines</a> checklist and <a href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a></p>
</div>
</div>
</div>

<div class="u-fixed-width">
<hr />
</div>
<div class="u-fixed-width">
<hr />
</div>

<div class="p-strip">
<div class="p-strip">
<div class="row">
<div class="col-6">
<h2>Key WCAG documents</h2>
<p>The volume of information on the WCAG 2.0 website can be disorienting. <br>We keep the following links handy for quick reference:</p>
<p>The volume of information on the WCAG 2.2 website can be disorienting. <br />We keep the following links handy for quick reference:</p>
</div>
</div>
</div>
</div>

<div class="p-strip u-no-padding--top">
<div class="p-strip u-no-padding--top">
<div class="row">
<ul class="p-list is-split">
<li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
<li class="p-list__item"><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
<li class="p-list__item"><a href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a>: a customisable quick reference, includes guidelines, success criteria and techniques</li>
<li class="p-list__item"><a href="https://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</a>: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures</li>
<li class="p-list__item"><a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a>: the W3C standard, includes principles, guidelines and success criteria</li>
<li class="p-list__item"><a href="https://www.w3.org/WAI/WCAG22/Understanding/">Understanding WCAG 2.2</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
<li class="p-list__item"><a href="https://www.w3.org/WAI/WCAG22/quickref/">How to Meet WCAG 2.2</a>: a customisable quick reference, includes guidelines, success criteria and techniques</li>
<li class="p-list__item"><a href="https://www.w3.org/WAI/WCAG22/Techniques/">Techniques for WCAG 2.2</a>: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures</li>
</ul>
</div>
</div>
</div>

<div class="u-fixed-width">
<hr />
</div>
<div class="u-fixed-width">
<hr />
</div>

<div class="p-strip">
<div class="p-strip">
<div class="row">
<div class="col-6">
<h2>Useful tools</h2>
Expand All @@ -124,16 +122,17 @@ <h2>Useful tools</h2>
</ul>
</div>
</div>
</div>
</div>

<div class="u-fixed-width">
<hr />
</div>
<div class="u-fixed-width">
<hr />
</div>

<div class="p-strip">
<div class="p-strip">
<div class="u-fixed-width">
<h2>Noticed an issue?</h2>
<p>If you spot an accessibility problem in Vanilla, let us know <br> by <a href="https://github.com/canonical/vanilla-framework/issues">filing&nbsp;an&nbsp;issue</a> on GitHub.</p>
Copy link
Member

@jmuzina jmuzina Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why remove the nbsp's here?

They are helping to keep the link as a whole on one line as the page shrinks. This is a very minor change, as this link only wraps on exceptionally small screens, but I'd like to keep the changes here in scope to the WCAG reference updates.

<p>If you spot an accessibility problem in Vanilla, let us know <br /> by <a href="https://github.com/canonical/vanilla-framework/issues">filing an issue</a> on GitHub.</p>
</div>
</div>
</div>

{% endblock %}