Skip to content

Add screen reader output support for bezier() and spline() curves #9236

Description

@Kunal241207

Increasing access

Screen reader users cannot perceive curves drawn with bezier() or spline() because the accessibility system (textOutput() / gridOutput()) currently only describes basic shapes. This feature would make curve-based drawings more accessible to blind and low-vision users without requiring authors to manually describe every curve with describe().

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

Feature request details

Description

The accessibility system (textOutput() / gridOutput()) provides screen reader descriptions for basic shapes (ellipse, rect, line, triangle, arc, quad, point) but does not support curves:

  • bezier() / bezierVertex()
  • spline() / splineVertex()
    This means complex drawings using curves are invisible to screen reader users.

Expected behavior

When textOutput() or gridOutput() is enabled, bezier and spline curves should appear in the accessible output with:

  • Shape type ("bezier curve", "spline curve")
  • Color (stroke for unfilled, fill for filled)
  • Approximate position (centroid of control points)
  • Approximate area (bounding box or polygon approximation)

Current workaround:

Authors must manually use describe() / describeElement() for every curve.

Proposed implementation:

Follow the existing pattern in src/accessibility/outputs.js:

  1. Add bezier/spline cases to _getMiddle() — Compute the centroid by sampling 20 points along the curve using the same math as bezierPoint() / splinePoint() and averaging them.
  2. Add bezier/spline cases to _getArea() — Sample 20 points along the curve and use the shoelace formula to approximate the polygon area.
  3. Add bezier/spline handling in _accsOutput() — Use the fill color when filled, otherwise the stroke color, and include the computed area.
  4. Call this._accsOutput('bezier', args) / this._accsOutput('spline', args) from bezier() and spline() in src/shape/curves.js when accessibility is enabled.
  5. Add unit tests in test/unit/accessibility/outputs.js following the existing arc()/triangle() patterns.

Code references:

  • src/accessibility/outputs.js — _accsOutput() (~line 439), _getMiddle() (line 503), _getArea() (line 583)
  • src/shape/curves.js — bezier() (~line 188), spline() (~line 680)
  • test/unit/accessibility/outputs.js — follow arc()/triangle() test patterns

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions