Mindsmith is committed to creating accessible learning experiences. This guide covers the accessibility features available in Mindsmith and how to use them effectively.
Color Contrast and Readability
Mindsmith's theme editor includes built-in tools to help you meet accessibility standards for text readability:
Auto Color: Toggle this on in the theme settings to have Mindsmith automatically generate accessible text colors based on your background color. This ensures sufficient contrast without manual tuning.
Contrast Warnings: If you manually select text and background colors that result in a contrast ratio below the WCAG minimum of 4.5:1, a warning message will appear. Adjusting the text color or background to meet this threshold ensures learners with low vision can read your content.
Semantic Structure and Screen Readers
Mindsmith renders lesson content with semantic HTML tags that assistive technologies can interpret:
Heading hierarchy: Title, Heading, and Subheading text styles render as proper HTML heading elements (
h1,h2,h3), allowing screen readers to navigate the content structure.Alt text: Image tiles support alt text descriptions. Click the image options in the editor to enter a description so screen readers can announce what the image conveys.
Tables: Table tiles render as semantic
tableelements in learner view, with header rows and columns marked up usingthelements with properscopeattributes when headers are enabled.
Video Captions and Transcripts
For video tiles, you can add captions and transcripts to support learners who are deaf or hard of hearing:
Upload VTT captions: Attach a standard
.vttcaption file for timed subtitles.AI-generated captions: On Business+ plans, Mindsmith can automatically transcribe your video and generate synced captions.
Manual transcript: Add a full text transcript that learners can read alongside the video.
Keyboard Navigation
Learners can navigate through lessons using keyboard controls. Interactive elements like flashcards, tabs, and accordions respond to standard keyboard interactions (Tab, Enter, Space). Question tiles accept keyboard input for selecting answers and submitting responses.
Content Structure Best Practices
To create the most accessible lessons:
Use heading tiles (Title, Heading, Subheading) to create a clear content hierarchy that screen readers can navigate.
Add alt text to images by clicking the image tile and entering a description in the editor menu.
Keep text tiles at a readable width using the Cap Width toggle, which limits line length for improved readability on wide screens.
Use the list tile checkbox mode for interactive checklists rather than relying on visual-only indicators.
Avoid conveying information through color alone. If you use color-coded elements, pair them with text labels or icons.