Accessibility

Accessibility is a core principle at Slate, not an afterthought. Every course built with Slate includes accessible structure, keyboard navigation, and screen reader support automatically, with no additional effort required from the author.

Slate targets conformance with the Web Content Accessibility Guidelines (WCAG) 2.1 at Level AA.

Course architecture

Slate courses are single-page applications. All content loads within a single HTML document, and navigation between lessons is handled without page reloads. This provides several accessibility benefits:

• Consistent landmarks and heading structure across the entire course experience
• No page reloads that could disrupt assistive technology state or lose context
• The course title (H1) anchors the document at all times, while lesson titles (H2) update as learners navigate

Built-in accessibility features

Every course includes the following features automatically.

Enforced heading hierarchy

Slate enforces a correct document outline in every course. The course title is always H1, lesson titles are H2, and authors are restricted to H3–H6 for content headings. This ensures screen readers can navigate the document structure reliably.

Keyboard navigation

All interactive elements in the course player are fully keyboard accessible. Learners can navigate using Tab, Enter, Space, and Arrow keys. This includes lesson navigation, accordions, tabs, carousels, knowledge checks, and assessments.

ARIA landmarks and roles

The player uses semantic HTML5 landmarks (header, nav, main, footer) and appropriate ARIA roles for interactive components including tab panels, accordions, dialogs, and form controls.

Screen reader support

Descriptive aria-labels are provided on all icon-only buttons. Live regions announce dynamic content updates such as search results and quiz feedback. Visually hidden content provides additional context where needed, such as the course title when a logo is displayed.

Skip navigation

A skip-to-content link is included at the top of every course, allowing keyboard users to bypass the navigation and jump directly to the lesson content.

Focus management

Visible focus indicators are displayed on all interactive elements. Focus is managed appropriately when navigating between lessons and interacting with modals and forms.

Reduced motion

Slate respects the prefers-reduced-motion operating system setting. When enabled, animations and transitions are disabled throughout the course player.

Color contrast

The default color palette meets WCAG AA contrast requirements. All text and interactive elements maintain sufficient contrast ratios against their backgrounds.

Responsive visibility

Content blocks can be configured as mobile-only, desktop-only, or visible on both. When content is hidden for a given viewport, it is properly excluded from the accessibility tree. Screen readers only encounter content that is visible at the current screen size.

Audio narration

Content blocks support optional audio narration with a built-in player featuring play, pause, and progress controls. All narration controls are keyboard accessible and include appropriate aria-labels for screen readers.

Document blocks

Document blocks include title and description fields that provide context for downloadable files. These fields ensure screen readers can convey the purpose of attached documents without relying solely on file names.

Form accessibility

All form inputs include proper labels, required field indicators, and error messages that are announced to screen readers via ARIA live regions.

Responsive design

Courses adapt to all viewport sizes, from mobile devices to large desktop displays, ensuring content remains accessible regardless of how learners access it.

SCORM exports

All accessibility features are included in SCORM exports. Courses deployed to any SCORM-compatible LMS retain the full set of keyboard navigation, screen reader support, and semantic structure.

Authoring best practices

While Slate provides a strong accessible foundation, course creators play an important role in ensuring their content is accessible to all learners:

• Use descriptive alt text on images. Every image block includes an alt text field. Describe the content and purpose of the image for learners who cannot see it.
• Structure content with headings. Use the available heading levels (H3–H6) to create a logical content hierarchy within your lessons.
• Ensure sufficient color contrast. When customizing themes, verify that text remains readable against background colors.
• Provide captions and transcripts. For video and audio content, upload SRT or VTT subtitle files to provide text alternatives. Slate includes built-in support for subtitle file uploads on video and audio blocks.
• Use meaningful link text. Avoid generic labels like “click here” or “read more.” Instead, describe where the link leads.
• Keep content well-structured. Use short paragraphs, lists, and clear language to make content easier to follow for all learners.

Custom code blocks

Slate’s code block allows authors to inject custom HTML, CSS, and JavaScript into courses. This provides powerful flexibility but operates outside the boundaries of what Slate can control.

Slate cannot validate or enforce accessibility standards within custom code blocks. Authors who use this feature are responsible for ensuring their custom content meets accessibility requirements:

• Test custom blocks with a keyboard. Can all elements be reached and activated?
• Test with a screen reader. Is content announced clearly?
• Use semantic HTML elements rather than generic divs and spans
• Include appropriate ARIA attributes on interactive elements
• Ensure sufficient color contrast in custom styles

Feedback

We welcome feedback on the accessibility of Slate courses and the authoring platform. If you encounter an accessibility barrier or have suggestions for improvement, get in touch.