Common Missing Labels in E-Learning Apps: Causes and Fixes

Missing labels happen when a UI element is visible to sighted learners but has no accessible name for assistive technology. In e-learning apps, this usually affects controls, images, quiz answers, dia

What causes missing labels in e-learning apps

Missing labels happen when a UI element is visible to sighted learners but has no accessible name for assistive technology. In e-learning apps, this usually affects controls, images, quiz answers, diagrams, video controls, progress indicators, and custom interactive components.

Common technical root causes include:

• Meaningful images without alt text: course thumbnails, teacher avatars, badges, worksheet previews, math diagrams, and science illustrations.
• Icon-only buttons without accessible names: play, pause, bookmark, download, notes, captions, submit, next, previous, mute, and expand.
• Custom controls that do not expose accessibility metadata: custom radio buttons, sliders, drag-and-drop cards, whiteboard tools, and quiz option rows.
• Hybrid app inconsistencies: a React Native, Flutter, or native shell may be accessible, while embedded WebViews or HTML content is not.
• Dynamic labels generated incorrectly: “Question 1”, “Correct”, “Locked”, or “In progress” not announced after state changes.
• Focusable elements with aria-hidden, contentDescription="", or accessibilityElementsHidden.
• Component reuse without context: the same “Start” button appears on a course, quiz, assignment, and live class, but the accessible name does not explain what it starts.

For WCAG 2.1 AA, the most relevant criteria are 1.1.1 Non-text Content, 4.1.2 Name, Role, Value, and 2.4.6 Headings and Labels.

Real-world impact

Missing labels are not cosmetic defects. In e-learning, they can block access to lessons, assessments, certificates, and paid content.

Typical user complaints include:

• “The quiz says ‘button’ but I don’t know which answer it is.”
• “I can’t tell whether the video is playing or paused.”
• “The diagram has no description, so I can’t complete the biology question.”
• “The app skips my progress badge and certificate button.”
• “The lesson thumbnail says ‘image’, but I don’t know which course it belongs to.”

The business impact is direct. Students and parents leave negative store reviews, teachers cancel classroom deployments, and school procurement teams may reject apps that fail accessibility requirements. Revenue loss can come from:

• Lower conversion on course catalog pages.
• Higher support tickets during onboarding and payment flows.
• Failed accessibility audits for public schools or universities.
• Reduced retention for learners using screen readers or switch control.
• Lost institutional contracts where WCAG, Section 508, ADA, or EN 301 549 compliance is required.

How missing labels manifest in e-learning apps

How to detect missing labels

Use both automated checks and real interaction flows. Automated tools catch many missing names, but e-learning apps need persona-based testing because context matters. A course thumbnail labeled “image” may pass a basic check but still fail the user.

Useful tools and techniques:

• Web: axe-core, Lighthouse Accessibility, Playwright with @axe-core/playwright, ESLint jsx-a11y, React DevTools Accessibility tab.
• Android: Android Accessibility Scanner, Espresso accessibility assertions, Appium queries for contentDescription, Android Lint.
• iOS: Accessibility Inspector, XCUITest accessibility identifiers, checks for accessibilityLabel, accessibilityValue, and accessibilityTraits.
• React Native: React Native Accessibility Inspector, accessibilityLabel, accessibilityRole, accessibilityState.
• Flutter: Flutter semantics debugger, Semantics widgets, excludeSemantics review.
• Dynamic testing: Run flows such as login, course search, lesson playback, quiz submission, certificate download, and checkout with screen readers enabled.

What to look for:

• Controls announced only as “button”, “image”, or “clickable”.
• Meaningful images with empty or missing alt text.
• Duplicate labels such as “Start” repeated across different courses.
• Focusable elements hidden from accessibility APIs.
• Custom controls missing role, value, selected state, or checked state.
• Dynamic feedback like “Correct answer” not announced.
• SVGs, icons, and canvas-based diagrams without text alternatives.

SUSATest can help catch these issues earlier by uploading an APK or web URL and exploring the app autonomously, without scripts. It uses accessibility-focused personas, including the accessibility persona, to detect missing labels, dead buttons, crashes, ANRs, security issues, and UX friction. It also generates Appium tests for Android and Playwright tests for web, so accessibility regressions can run in CI/CD with JUnit XML output.

How to fix each example

1. Course thumbnails and lesson images

For web:

<img
  src="/courses/algebra.jpg"
  alt="Algebra I course thumbnail showing linear equations on a whiteboard"
/>

For Android:

imageView.contentDescription = "Algebra I course thumbnail showing linear equations on a whiteboard"

For React Native:

<Image
  source={{ uri: course.thumbnailUrl }}
  accessibilityRole="image"
  accessibilityLabel={`${course.title} course thumbnail`}
/>

Avoid generic labels like “course image”. Include the course name and useful visual context.

2. Video and audio controls

For web:

<button aria-label="Pause video lesson">
  <PauseIcon />
</button>

For Android:

pauseButton.contentDescription = "Pause video lesson"

For Flutter:

Semantics(
  label: 'Pause video lesson',
  button: true,
  child: PauseIcon(),
)

Do not rely on the icon alone. Also expose captions, playback speed, volume, and full-screen state.

3. Quiz answer options

For web, associate the label with the input:

<label>
  <input type="radio" name="q1" value="a" />
  Mitochondria
</label>

For React Native:

<TouchableOpacity
  accessibilityRole="radio"
  accessibilityState={{ selected: selectedAnswer === 'a' }}
  accessibilityLabel="Answer A: Mitochondria"
>
  <Text>M