Canopy Accessibility — Best Practices
SkillDev toolsAccessibility guidance for Canopy applications. Trigger when implementing accessible HTML, ARIA attributes, keyboard navigation, skip links, screen reader support, or form accessibility in an Angular project using Canopy.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Canopy Accessibility — Best Practices skill
What this skill tells your AI
The instructions your AI receives, as published by legal-and-general/canopy in skills/best-practice/accessibility/SKILL.md and read by ahel’s review.
This skill provides developer-focused accessibility guidance for applications built with Canopy.
Apply this skill when implementing any HTML structure, forms, navigation, or dynamic content.
All Canopy components are built to be accessible. This skill covers what you need to do in your application code beyond using Canopy components.
Document Language
Always declare the page language so assistive technologies use the correct voice profile:
<html lang="en">
For inline language switches:
<p>You could have <i lang="it">una frase in italiano</i></p>
Skip to Main Content
Provide a skip link so keyboard users can bypass repeated header/nav content. Use the skip-content CSS class:
<a href="#main" class="skip-content">Skip to main content</a>
...
<main id="main">...</main>
lg-pageautomatically provides this link — you do not need to add it manually when using the Page component.
Images
- Provide descriptive
alttext for all content images. - Set
alt=""(empty string) for decorative images. - Never omit the
altattribute entirely.
<img src="chart.png" alt="Bar chart showing quarterly revenue growth" />
<img src="decorative-divider.png" alt="" />
Videos and Audio
Provide a transcript for all video and audio content. Use the Canopy lg-details component to house the transcript in a collapsible section. Add captions for videos (transcript synchronised with audio).
Tables
- Use
<th>for header cells and<td>for data cells. - Add
scope="col"orscope="row"for tables where the header direction is ambiguous. - Provide a
<caption>to identify the table's topic.
Use the Canopy
lg-tablecomponent — it follows these standards automatically.
Forms
- Every form control must have a
<label>linked viafor/id, or wrapped around the control. - Group related controls (checkboxes, radio buttons) with
<fieldset>and<legend>. - Mark required controls with the
requiredattribute.
Canopy form components handle label association and grouping automatically.
Hiding Content
| Goal | Method |
|---|---|
| Hide from all users | visibility: hidden or display: none |
| Hide from screen readers only | aria-hidden="true" |
| Show to screen readers only | class="lg-visually-hidden" |
<lg-icon name="arrow-right" aria-hidden="true"></lg-icon>
<span class="lg-visually-hidden">opens in a new tab</span>
Landmark Regions
Use HTML5 semantic elements and ARIA roles to help screen reader users navigate:
<header role="banner">
<nav role="navigation">...</nav>
</header>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
Accessibility Checklist
- Page
langattribute is set. - Skip link is present (or
lg-pageis used). - All images have
alttext (oralt=""). - All form controls have labels.
- Grouped form controls use
<fieldset>+<legend>. - Tables use
<th>,<td>, andscopeappropriately. - Decorative icons have
aria-hidden="true". - Screen-reader-only text uses
lg-visually-hidden. - Page uses semantic landmark elements.
Signals
- GitHub stars
- 23
- Forks
- 46
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
canopy-accessibility- Source
- github.com/legal-and-general/canopy