Accessibility Helpers

Canvas includes a small set of utility classes that support accessibility. The most useful is screenreader-only, which lets you provide extra information to screen reader users without affecting the visual layout.

Useful references

These resources explain best practices for visually hidden text, labelling, and accessible naming:

• The A11Y Project — How to hide content
• MDN — aria-label
• WebAIM — ARIA labels and naming
• W3C WAI — Techniques for hiding form labels accessibly

screenreader-only

The screenreader-only class hides text visually but keeps it available to assistive technologies. This is ideal for:

• Clarifying link destinations.
• Providing text equivalents for icons.
• Adding extra labelling for context.

<p>
  <span class="screenreader-only">
    This sentence is only read by screen readers.
  </span>
  <span>This sentence is visible to everyone.</span>
</p>
<p>
  <a href="#">
    Submit assignment
    <span class="screenreader-only">for Week 3: Data Analysis</span>
  </a>
</p>

Accessibility notes

The screenreader-only class is similar to visually hidden utilities used across modern web frameworks. When using it:

• Do not hide information that sighted users also need.
• Avoid duplicating text in both visible and hidden forms.
• Keep hidden labels short, focused, and task-relevant.

Combined with semantic HTML, this utility can help make your Canvas pages clearer and more accessible without changing the visual presentation.