Members access

Our Commitment

The HTML produced by Rise Canvas is designed to meet the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, making content accessible to users who rely on keyboards, screen readers, or other assistive technologies.

Universal — Applied to All Components

• Visible keyboard focus indicator on all interactive elements using :focus-visible with a 3 px outline
• Screen-reader-only text utility class .sr-only for context that is visually implied
• lang="en" declared on every output HTML document
• Answer and result feedback states use solid (opaque) background fills so text remains legible over a Rise lesson background image
• Components report their height to Rise so blocks size to their content, preventing clipped or overlapping text

Interactive Components

Quiz

• Answer options are keyboard-operable — Enter or Space to select
• Each option has role="button" and a descriptive aria-label combining the letter badge and answer text
• Feedback uses role="status" aria-live="polite" so screen readers announce correct/incorrect immediately
• Confirmation modal uses role="dialog" aria-modal="true" aria-labelledby

Accordion

• Toggle buttons have aria-expanded updated on every open/close
• Content panels use role="region"

Tabs

• Tab bar uses role="tablist" with an aria-label
• Tab buttons use role="tab" with aria-selected updated on click
• Panels use role="tabpanel" with tabindex="0" and aria-labelledby
• Arrow keys navigate between tabs

Checklist

• Items use role="checkbox" with aria-checked updated on toggle
• Space bar toggles each item
• Progress counter uses aria-live="polite"

Flip Cards

• Each card uses role="button" with an aria-label describing the current face
• Enter or Space activates the flip; label updates to reflect the new state
• aria-hidden is toggled between front and back faces

Carousel

• Slides use role="group" aria-roledescription="slide" with descriptive labels ("Slide 1 of 4")
• Navigation buttons have aria-label; non-visible slides are aria-hidden="true"
• Dot indicators use role="tab" with aria-selected
• Slide counter uses aria-live="polite"

Sorting Activity

• Draggable items use role="button" with tabindex="0" and an aria-label
• Category zones use role="group" with aria-label matching the category name
• Score feedback uses a live region

Self-Assessment

• Each rating scale is wrapped in role="group" with an aria-label carrying the statement being rated
• Rating options are real <button> elements — keyboard operable, with aria-pressed reflecting the chosen value and an aria-label of "n of N" (or the point's word, e.g. "Often (4 of 5)", when per-point labels are used)
• Questions are presented one at a time; the Next button stays disabled until the current statement is answered, and a live progress indicator ("Question x of y") with a progress bar shows position
• Results (radar chart, category bars and answer summary) are reflective only — no scoring is passed to the LMS, and responses are not saved or sent anywhere
• The radar chart is decorative reinforcement; the same data is always available as labelled text bars and a per-answer summary, so no information depends on the canvas drawing alone
• An optional "Open printable results" button produces a clean, self-contained results page in a new browser tab (the radar is rendered as an image so it travels), which the learner can print or save as PDF using their browser — this works around the Rise iframe sandbox that blocks in-place printing
• Per-band guidance and any "Find out more" link are presented as plain text and a real link per category, so result advice never depends on colour or the chart alone
• Interactive controls show a visible focus-visible outline, and the block reports its height to Rise so the results never clip

Expanding Infographic

• Card triggers are native <button> elements with aria-expanded and aria-controls
• Panels have aria-hidden toggled on expand/collapse

Labelled Graphic

• Hotspot pins are native <button> elements with descriptive aria-label and aria-haspopup="dialog"
• Modal uses role="dialog" aria-modal="true" aria-labelledby
• Graphic canvas has role="img" with an aria-label

Scenario & Branching Scenario

• Choice buttons are native <button> elements — keyboard operable by default
• Result and output areas use aria-live="polite" so feedback is announced to screen readers

Completion Signalling

• Interactive components can be marked as required for lesson completion; completion is driven by the same keyboard-operable interactions (selecting answers, opening all items, reaching an outcome) so it is reachable without a pointing device
• Reveal-based components (accordion, tabs, flip cards, carousel, expanding infographic) signal completion once every item has been viewed
• Viewed/visited states are reflected visually (e.g. faded hotspots) to help all learners track progress

Informational Components

Timeline & Process Steps

Wrapped in a landmark role="region" or role="list" with a descriptive aria-label.

Stats & KPI

Each stat card uses role="figure" with a combined aria-label reading value, label, and description together. The section uses role="region".

Infographic Cards

Card grid uses role="list"; each card is role="listitem" with an aria-label from the card heading.

Quote & Callout

Wrapped in role="region" with an aria-label taken from the heading text.

Image

Alt text is set from the builder's Alt text field. Image and caption are wrapped in semantic <figure> and <figcaption> elements.

Video

Embedded YouTube and Vimeo players have a title attribute and a role="region" wrapper. Direct video files include native controls.

Audio

• Player region uses role="region" with an aria-label from the track title
• Play, pause, mute and progress controls are native <button> elements with aria-label that updates between Play and Pause
• The progress bar uses role="progressbar"
• When autoplay is blocked by the browser, a visible tap-to-play affordance is shown rather than failing silently

Divider

Purely decorative — marked aria-hidden="true" so screen readers skip it entirely.

Known Limitations

Standards Reference

Web Content Accessibility Guidelines (WCAG) 2.1 Level AA — www.w3.org/WAI/WCAG21/quickref