Skip to main content
CurbCut

PR-2: demo/pr-2-lesson-media

eziedutech/curbcut, main at 515a2b8 to demo/pr-2-lesson-media at d9e7da0

lesson-media.htmlOpen the page as reviewed
Proven

9

Flagged

7

Out of reach

7

Not scanned

2

Verified fixes

none

Screen reader narration

Before the fix

  1. link, Skip to main content
  2. link, OpenClass
  3. list
  4. link, Courses
  5. link, Biology basics
  6. link, Biology basics
  7. heading, Watch, level 2
  8. heading, Look, level 2
  9. img, no description
  10. img, chart
  11. heading, Did you know?, level 2
  12. heading, Data, level 2
  13. table
  14. table, Oxygen bubbles counted per minute
  15. heading, Glossary, level 2
  16. list
  17. heading, Practice, level 2
  18. iframe, untitled frame
  19. heading, Read further, level 2
  20. list
  21. link, More
  22. link, More
  23. link, More about leaf structure
  24. link, Next lesson

After the fix

No fixed branch was scanned.

Findings

Perceivable (7)

ProvencriticalF001

SC 1.1.1: Image missing alt attribute

lesson-media.html img[src$="leaf.svg"]

Who is affected
Blind users and people who cannot see images rely on alt text to understand visual content.
Measured
The leaf.svg image element has no alt attribute, so screen readers have no text alternative to convey the image content.
How to fix
Add a descriptive alt attribute that conveys the content of the image, for example: alt="Diagram of a leaf showing cell structure".
FlaggedseriousF002

SC 1.1.1: Chart image alt text is too generic to convey meaning

lesson-media.html img[src$="stages-chart.svg"]

Who is affected
Blind users and people who cannot see images cannot access the informational content of the chart.
Why flagged
The stages-chart.svg has alt="chart", which does not describe the two-stage photosynthesis diagram or its data, leaving screen reader users without the information the chart conveys.
How to fix
Replace alt="chart" with a description of the chart content, for example: alt="Two-stage photosynthesis diagram: Stage 1 light reaction splits water and releases oxygen; Stage 2 Calvin cycle converts carbon dioxide into sugar."
ProvencriticalF003

SC 1.2.2: Video element has no captions

lesson-media.html video[src$="intro.webm"]

Who is affected
Deaf and hard-of-hearing users cannot follow spoken content in video without captions.
Measured
The intro.webm video has no track element providing captions, so deaf and hard-of-hearing users cannot access its audio content.
How to fix
Add a captions track: <track kind="captions" src="media/intro.vtt" srclang="en" label="English" default>.
ProvenseriousF004

SC 1.3.1: Glossary list contains div children instead of li elements

lesson-media.html .glossary

Who is affected
Screen reader users depend on semantic list markup to understand structure and navigate by list items.
Measured
The ul.glossary element contains div children directly, which is invalid HTML. Screen readers rely on proper list semantics to convey the number of items and allow list navigation.
How to fix
Wrap each div in an li element: <ul class="glossary"><li><div>...</div></li><li><div>...</div></li></ul>, or replace the divs with li elements directly.
ProvenseriousF005

SC 1.4.3: Insufficient color contrast on figure caption

lesson-media.html .figure-caption

Who is affected
People with low vision or color blindness struggle to read text that does not have sufficient contrast against its background.
Measured
The figcaption has white text (#ffffff) on a #7fb3d5 background with a measured contrast ratio of 2.25, well below the required 4.5:1 for normal-sized text.
How to fix
Darken the background color or change the text color to achieve at least 4.5:1 contrast. For example, using #1b4f6b as the background color with white text meets the threshold.
ProvenmoderateF006

SC 1.4.4: Viewport meta tag disables user zoom

lesson-media.html meta[name="viewport"]

Who is affected
People with low vision who increase text size in their browser cannot zoom the page when zooming is disabled.
Measured
The viewport meta tag sets user-scalable=no and maximum-scale=1, preventing users from pinch-zooming or browser-zooming the page on mobile devices.
How to fix
Remove user-scalable=no and maximum-scale=1: use <meta name="viewport" content="width=device-width, initial-scale=1">.
FlaggedmoderateF007

SC 1.4.2: Audio plays automatically with no controls

lesson-media.html audio

Who is affected
Screen reader users are disrupted by auto-playing audio because it competes with their speech output.
Why flagged
The audio element has autoplay and loop but no controls attribute. The engine flagged that it outputs audio for more than the allowed duration without a pause or volume mechanism.
How to fix
Add the controls attribute so users can pause or mute the audio, or remove the autoplay attribute and let users start playback themselves.

Operable (5)

ProvencriticalF008

SC 2.1.1: Accordion trigger is not keyboard accessible

lesson-media.html #more-trigger

Who is affected
Keyboard-only users, switch access users, and screen reader users cannot use a mouse and depend entirely on keyboard access.
Measured
The accordion trigger div has a click event listener but is not focusable and is not a native interactive element, so keyboard users cannot reach or activate it.
How to fix
Replace the div with a button element, or add role="button" and tabindex="0" and handle Enter and Space key events.
FlaggedseriousF009

SC 2.2.2: Auto-rotating carousel has no pause mechanism

lesson-media.html .carousel

Who is affected
People with attention disorders and screen reader users are disrupted by auto-moving content they cannot stop.
Why flagged
The carousel rotates slides automatically every 3 seconds via setInterval with no pause, stop, or hide control in the HTML or JavaScript, so users cannot stop the movement.
How to fix
Add a pause/play button to the carousel, or stop auto-rotation when the element receives focus, and provide a mechanism to disable the rotation entirely.
ProvenseriousF010

SC 2.4.3: Positive tabindex causes focus order disruption

lesson-media.html #main > p:nth-of-type(4) > a

Who is affected
Keyboard users become confused when focus jumps unpredictably around the page.
Measured
The Next lesson link has tabindex="1", placing it at focus position 1 despite being at DOM position 12, so keyboard focus skips all earlier content and lands on this link first.
How to fix
Remove the tabindex="1" attribute. Rely on natural DOM order for focus sequence.
FlaggedminorF011

SC 2.4.2: Page title is generic and non-descriptive

lesson-media.html title

Who is affected
Screen reader users and keyboard users rely on the page title to identify the page, especially when switching between tabs.
Why flagged
The page has <title>Page</title>, which does not describe the topic or purpose of the lesson media page, making it impossible for users to identify the page by its title.
How to fix
Update the title to describe the page, for example: <title>Lesson 3: Photosynthesis in pictures and video - OpenClass</title>.
FlaggedminorF012

SC 2.4.4: Two Read Further links have ambiguous text with no accessible name

lesson-media.html .further a

Who is affected
Screen reader users often navigate by listing all links on a page; ambiguous link text makes it impossible to choose the right one.
Why flagged
The Read Further section has three links all with visible text More. Two of them have no aria-label to distinguish their destination, making it impossible for screen reader users to identify which page they lead to.
How to fix
Add unique aria-label attributes to each ambiguous link, for example aria-label="More about light reaction" and aria-label="More about Calvin cycle".

Understandable (1)

FlaggedmoderateF013

SC 3.1.2: Indonesian paragraph lacks lang attribute

lesson-media.html p

Who is affected
Screen reader users hear garbled pronunciation when foreign-language passages lack a lang attribute.
Why flagged
The paragraph containing the Indonesian sentence Fotosintesis adalah proses tumbuhan membuat makanan dari cahaya. has no lang attribute to identify the language, even though the page default is English.
How to fix
Add lang="id" to the paragraph: <p lang="id">Fotosintesis adalah proses tumbuhan membuat makanan dari cahaya.</p>

Robust (3)

ProvencriticalF014

SC 4.1.2: Accordion trigger uses aria-expanded on a div without button role

lesson-media.html #more-trigger

Who is affected
Screen reader users rely on name, role, and value to understand and interact with every control on the page.
Measured
The div uses aria-expanded="false" but has no role, and aria-expanded is not a permitted attribute on an element with the generic implicit role, making the state information invalid for assistive technologies.
How to fix
Add role="button" and tabindex="0" to the div so that aria-expanded is a valid attribute in context, or replace the div with a native button element.
ProvenseriousF015

SC 4.1.2: iframe has no accessible name

lesson-media.html iframe

Who is affected
Screen reader users rely on an accessible name on frames to understand and navigate embedded content.
Measured
The practice iframe has no title, aria-label, or aria-labelledby attribute, so screen readers cannot describe the purpose of the embedded content to the user.
How to fix
Add a title attribute describing the frame content: title="Practice exercise: Which gas do plants release?"
FlaggedseriousF016

SC 4.1.3: Carousel slide changes are not announced to screen readers

lesson-media.html .carousel

Who is affected
Blind users do not see status messages that appear on screen; without a live region they have no way of knowing the slide content changed.
Why flagged
The carousel container has no aria-live, role="status", or role="alert" attribute, so screen readers receive no notification when the visible slide changes every 3 seconds.
How to fix
Add aria-live="polite" and aria-atomic="true" to the carousel container, or use a dedicated off-screen live region that announces each slide as it becomes visible.

Out of reach

CriterionWhy it is not checked
Out of reach 1.2.3 Audio Description or Media Alternative (Prerecorded)
Whether the intro.webm video contains visual information not conveyed in the audio cannot be determined from code inspection alone; it requires watching the video content.
Out of reach 1.2.4 Captions (Live)
No live streaming content was identified in the diff; if live media is added later this criterion must be evaluated against a running stream.
Out of reach 1.2.5 Audio Description (Prerecorded)
Determining whether adequate audio description is provided requires watching and listening to the video content, which cannot be done from source code alone.
Out of reach 1.4.10 Reflow
Checking that all content is accessible without horizontal scrolling at 320 CSS pixels requires rendering the page at that viewport width; this cannot be verified from code alone.
Out of reach 1.4.12 Text Spacing
Verifying that content remains readable when line-height, letter-spacing, word-spacing, and paragraph spacing are overridden requires live rendering with a browser extension or bookmarklet.
Out of reach 2.3.1 Three Flashes or Below Threshold
Detecting whether any content flashes more than three times per second requires video analysis tools and cannot be determined from static source code.
Out of reach 2.4.5 Multiple Ways
Whether more than one way exists to reach the new page depends on the overall site navigation structure across all pages, not a single page diff.

Not scanned

  • axr-924fe599: axe_needs_review for frame-tested maps to no WCAG SC (best_practice only); the iframe content could not be scanned with axe-core and requires separate testing.
  • focus-107a113b: Focus moved into the iframe during tab crawl; the focus indicator inside the iframe was not measurable, so SC 2.4.7 cannot be assessed for that iframe.

Run

Engine facts
14 in 5.65 s, digest 8d8399ae3c3c
Engine
axe-core 4.13.0, Chromium 153.0.8010.12

What CurbCut does not check

  • It does not certify WCAG conformance. Testing with disabled people cannot be replaced.
  • It does not judge real screen reader experience, cognitive load, or caption quality.
  • Flagged findings are IBM Bob's judgment and can be wrong.
  • Benchmark numbers come from a demo app with planted issues. Other code bases may differ.