Skip to content

Accessible Control Layout

Run the Accessible Control Layout Fullscreen

Edit the Accessible Control Layout Using the p5.js Editor

Description

This interactive MicroSim demonstrates the recommended layout structure for creating accessible educational simulations. It shows three key sections that should be vertically stacked for optimal accessibility:

  1. Canvas Area - The visual simulation at the top
  2. Status Area - Text-based feedback in the middle
  3. Control Panel - Interactive controls at the bottom

Key Accessibility Principles

The layout demonstrates several critical accessibility principles:

  • Controls below canvas, not overlapping: Placing controls below the canvas ensures they are reachable via keyboard navigation and do not interfere with visual content.

  • Logical tab order: Users navigating with Tab key should move left-to-right, top-to-bottom through controls.

  • Screen reader support: The canvas uses describe() to provide content descriptions, and the status area uses aria-live to announce changes.

  • Visible focus indicators: All interactive elements show clear visual feedback when focused.

Interactive Features

  • Click on sections to see detailed accessibility requirements for each area
  • Toggle Tab navigation flow to visualize the keyboard navigation path
  • Reset View to return to the overview

The Three Sections

Canvas Area (Top)

The visual simulation area where graphical content is displayed:

  • Full-width responsive canvas
  • Uses describe() to provide screen reader descriptions
  • Shows focus indicator when canvas receives focus
  • Contains all visual simulation elements

Status Area (Middle)

A text-based output region for simulation state:

  • Uses aria-live="polite" for dynamic announcements
  • Displays current values in text form
  • Provides non-visual feedback for simulation changes
  • Keeps announcements concise and meaningful

Control Panel (Bottom)

The interactive control section:

  • Contains sliders with visible labels
  • Includes action buttons (Start, Pause, Reset)
  • All controls reachable via Tab key
  • Clear focus indicators on all interactive elements
  • Tab order flows logically left-to-right, top-to-bottom

Embedding This MicroSim

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/automating-instructional-design/sims/accessible-control-layout/main.html" height="600px" scrolling="no"></iframe>

Design Guidelines

When implementing this layout in your own MicroSims:

  1. Never place controls overlapping the canvas - They may be unreachable for keyboard users
  2. Always provide text alternatives - Use describe() for canvas content
  3. Use semantic HTML - Labels should be associated with their controls
  4. Test with keyboard only - Ensure all functionality works without a mouse
  5. Test with screen readers - Verify announcements are meaningful and timely
  6. Maintain contrast ratios - Focus indicators should meet WCAG requirements (at least 3:1)

References