Create Accessible and Mobile-Friendly Learning Content - Article
Summary
Accessible content helps more people understand and complete learning, including people using assistive technology, smaller screens, captions, or slower connections. Build these needs into the content rather than treating them as a final visual inspection.
Platform controls and responsive layouts are only part of the experience. Authors remain responsible for the meaning, structure, media, documents, and external resources they add.
Use this article to:
- Use the platform’s native responsive behavior and choose layouts with a predictable reading order;
- Create accessible text, images, links, tables, media, interactions, and documents;
- Test keyboard, screen-size, caption, contrast, and learner-access behavior;
- Recognize and manage accessibility limits introduced by external tools or files.
Structure text for understanding
Use meaningful headings in a logical hierarchy and plain language appropriate to the audience. Explain unfamiliar terms and abbreviations when they first appear. Keep instructions close to the action they describe.
Set the correct language for the Course and each translated edition. Eurekos uses the configured Course language to identify authored content for assistive technology. If the language is incorrect, a screen reader can pronounce otherwise correct text using the wrong language.
For translated Course editions, see Translate and Localize Courses and Learning Assets.
| Content element | Good practice | Why |
|---|---|---|
| Headings | Describe the topic or task, using actual heading styles. | Learners can scan and navigate the structure. |
| Links and buttons | Name the action or destination. | The purpose remains understandable outside the surrounding sentence. |
| Lists | Use numbered steps for sequence and bullets for independent items. | Relationships are clear without relying on visual spacing. |
| Tables | Use clear headers and a simple structure. | Repeated comparisons are easier to interpret on different devices and with assistive tools. |
| Emphasis and color | Use text or symbols with an explanation as well as color. | Meaning does not depend on color perception alone. |
Avoid using empty paragraphs or repeated spaces to position content.
Native pages adapt by default
Courses created in the native Eurekos authoring interface are responsive by default. Authors do not need to create separate desktop, tablet and phone versions or manually define breakpoints for ordinary page content. The platform adjusts the native layout and objects to the available screen.
Authoring choices still influence how predictable that adaptation feels. A single-column layout is the safest option when reading order is critical, because the visual order remains clear as the page narrows. Multi-column layouts can work well for related content, but test how the columns stack and whether headings, instructions and actions still appear in the intended sequence.
Third-party embeds, SCORM packages, external video players and individual H5P libraries can impose their own size, navigation and accessibility limits. Native mobile applications or embedded browser containers can also behave differently from a full desktop browser. Test the complete learning route on the actual delivery channels used by the audience, not only in the page editor.
Understand platform and content responsibility
Eurekos is designed to support accessible learning experiences and aligns the platform with WCAG 2.2 Level AA accessibility guidelines, alongside Section 508 and EN 301 549. This provides an accessible foundation through responsive layouts, labelled controls, keyboard behavior, focus handling, and compatibility with assistive technology.
Course authors and external content providers remain responsible for the accessibility of the complete learning experience. Text structure, media alternatives, documents, H5P configurations, imported packages, links, and external services can introduce barriers even when the surrounding platform is accessible.
Verify responsive and accessible behavior
- Confirm the reading and focus order after columns stack on a narrow screen.
- Verify touch targets, video controls, captions and interactive feedback on a phone-sized display.
- Test third-party and packaged content separately; native responsiveness cannot correct a fixed or inaccessible layout supplied by another tool.
- Check that essential instructions and actions are not communicated by position, color or hover behavior alone.
For page construction, see Build Course Pages with Layouts, Text, Images, and Buttons. For the limitations and maintenance responsibilities of external content, see Embed External Content and Use Advanced Page Tools.
Make images and diagrams understandable
Provide meaningful alternative text for images that convey information. Describe the relevant meaning rather than the filename or a generic phrase such as “image of.” Do not repeat a long caption word for word when a shorter alternative conveys the same purpose.
Complex diagrams need a nearby text explanation of the relationships or decisions. An attractive flowchart is not sufficient if its only explanation is embedded in small labels. Use adequate spacing, clear direction, and readable type.
Decorative imagery should not distract from essential content. Apply the supported decorative treatment where available; do not fill alternative text with irrelevant descriptions that interrupt the learning.
Provide usable media alternatives
| Media | Author responsibility |
|---|---|
| Video with speech | Provide accurate, synchronized subtitles and review the available transcript experience. |
| Video with important visual actions | Explain those actions in speech or provide an appropriate alternative; subtitles of unrelated narration are not enough. |
| Audio-only material | Provide a useful text equivalent through an appropriate content route. |
| Slides or on-screen text | Ensure readability and provide the essential meaning in accessible text. |
| Generated transcript or translation | Review terminology, numbers, meaning, timing, and completeness before release. |
Do not make a critical instruction available only during a brief moment in a video. Provide a maintained reference or summary where the learner needs to apply it.
Test interactions, not only pages
Different H5P types and external tools have different accessibility characteristics. Test the specific content type and configuration with the required interaction methods. A familiar library name is not proof that every authored item is accessible.
Check keyboard access, focus visibility, answer selection, feedback, and any retry route. Avoid a task that depends only on precise dragging, hovering, color, or a tightly timed response unless an appropriate alternative is provided and approved.
For assessments, preserve the learning outcome when providing an alternative. The alternative should measure the intended knowledge or skill, not a learner's ability to overcome an interface barrier.
Review documents and imported packages
An accessible Course page does not make an attached PDF or imported package accessible. Review each resource in its own format.
For documents, check searchable text, heading structure, reading order, link meaning, table headers, and image alternatives. Scanned pages and image-only documents may need remediation outside Eurekos.
For SCORM/xAPI or externally hosted learning, request accessibility information from the supplier and validate the actual exported package. Keep editable sources and an agreed correction process so defects can be addressed.
Design for mobile and constrained connections
Use focused pages and appropriately prepared images and media. Test narrow screens and text enlargement without assuming the desktop arrangement will simply shrink gracefully.
Multi-column layouts should have a sensible reading order when stacked. Tables should remain interpretable, buttons should remain usable, and embedded content should not trap the learner in nested scrolling. Offer a practical route when an external resource is unsuitable for the intended mobile device.
A focused accessibility review
Test the published learning experience with a representative Participant account. The authoring and administrative interfaces can expose different controls, labels, and navigation from the route participants actually use.
| Review | Confirm that |
|---|---|
| Published Participant experience | The published Course exposes the intended content, controls, instructions, and navigation without relying on author or administrator access |
| Keyboard-only use | Essential controls and learning tasks can be reached and operated in a logical order, focus remains visible and does not become trapped, and controls respond to the expected keyboard actions |
| Screen-reader or equivalent structured review | Headings, labels, landmarks, alternatives, status changes, content language, and reading order convey the intended meaning |
| Voice-control use | Visible control names are clear and can be used to identify and operate actions without relying on precise pointer movement |
| Text enlarged and viewport narrowed | Content remains readable and operable without important information overlapping, disappearing, or requiring unnecessary horizontal scrolling |
| Colour and visual cues | Text and controls remain distinguishable, contrast is sufficient, and colour is not the only way important meaning or status is communicated |
| Audio muted | Captions, transcripts, or equivalent alternatives provide the information needed to understand and complete the learning |
| Images unavailable or not visible | Alternative text or surrounding content communicates the purpose of informative images without repeating decorative content |
| Assessment with different access needs | Questions, instructions, response controls, feedback, timing, and completion behavior remain understandable and operable |
| External or downloadable resource | The resource is accessible in its own format, opens as described, and does not introduce an unexplained barrier or inaccessible dependency |
| Automated accessibility scan | Reported structural, labelling, and contrast issues are reviewed on each relevant page or state and then confirmed through manual keyboard and assistive-technology testing |
This review is practical authoring guidance, not a claim that a Course automatically conforms to a particular accessibility standard. Where formal conformance is required, use the organization's applicable standard and qualified evaluation process.
Maintain accessibility after changes
Recheck affected alternatives when replacing images, media, documents, interactions, or language editions. A correct subtitle track or image description can become inaccurate after a seemingly small content update.
Record known issues, the responsible owner, and the approved alternative while a correction is being made. A general instruction to contact support should not replace an available, usable learning route.
FAQ
-
Does accessible platform software make every authored Course accessible?
No. Authors still determine text structure, alternative text, media alternatives, document quality, interaction choices, and instructions. Review the complete learner experience, including external and imported content.
-
What should alternative text for a learning image explain?
Explain the information or purpose the image contributes to the learning task. Avoid simply repeating a filename or saying image of. For a complex diagram, provide a nearby text explanation as well as concise alternative text.
-
Are subtitles enough when important instructions are shown only on screen?
Not always. Subtitles primarily communicate spoken and relevant audio content. Important visual actions, labels, or changes also need an accessible explanation, such as narration or accompanying text, appropriate to the material.
-
What should I check when testing a Course with a keyboard?
Confirm that learners can reach and operate links, buttons, media, interactions, and navigation without becoming trapped. Check visible focus and a logical order. Test the actual embedded or imported components, not only the surrounding page.