EasyShape5000 Accessibility Guide

EasyShape5000 is designed to be usable with keyboard-only navigation and compatible with assistive technologies. This document details keyboard controls, focus management, and WCAG 2.1 compliance efforts.

Keyboard Navigation Overview

The interface is designed for full keyboard operability using a Focus Zone strategy. This reduces repetitive tabbing by allowing users to jump between major workspace areas.

Global Navigation

These shortcuts work globally to navigate the application structure.

Note: A Skip Link is available on the first Tab press after page load to jump directly to the Canvas. Each F6 press announces the zone it landed in through the status region, which matters here because the left sidebar holds two independent panels.

Editing and Selection

These apply wherever focus is, except inside a text field.

Single-key shortcuts are scoped. Inside the scene tree or the operations panel, Delete removes the focused node rather than the canvas selection. Inside a property row in the right sidebar, no single-key shortcut fires at all, so a stray keystroke while arrowing a form cannot destroy work.

Zone-Specific Controls

Each zone has specific interactions once it receives focus.

Toolbar

Scene Tree (Left Sidebar, upper panel)

The scene tree is an ARIA tree with a roving tabindex. Press Tab to enter it, then use arrow keys. Groups nest to any depth; the tree reports each item's level and position in its branch.

Row buttons are reachable by their shortcut key rather than by Tab, so a hundred-shape file does not add three hundred tab stops to the sidebar.

Operations Panel (Left Sidebar, lower panel)

Each operation is a bucket. Its header is a tree item, and every artifact it has produced — Offsets, Preview, Toolpaths — is a child tree item with its own visibility toggle.

An invalidated stage is marked visually with a strikethrough and announced as invalidated, so the state does not depend on colour alone.

Canvas Controls

These controls are active when the Canvas zone has focus.

Property Panel (Right Sidebar)

This panel handles parameter inputs for the selected stage node. The fields it shows change with the stage, so the same keys apply throughout.

Help text is attached to each field as its description rather than to a separate button, so a screen reader reads it when the field takes focus. The ? icon beside a label is decorative and is not a tab stop.

The 3D Viewport

Unlike EasyTrace5000, where 3D is an optional preview, three EasyShape operations are three-dimensional by definition: V-Carve, Relief and Rotary. Generating one switches the workspace to the 3D view automatically, because there is no 2D contour that represents its output.

The camera is fully keyboard-operable once the viewport has focus. Press F2 to enter 3D, then F6 until focus reaches the viewport.

The viewport is exposed as a labelled region so its purpose and its key bindings are announced on entry. What it does not yet have is a text equivalent of what it draws — see Known Limitations.

Modals & Dialogs

When a modal is open, focus is trapped within it until it closes, and global navigation keys (F6) are disabled. Closing a modal returns focus to the element that opened it. Where a modal's body scrolls, focus lands on the scrollable body so the arrow keys and Page Up / Page Down work immediately.

General Navigation

Confirmations

Deleting a shape is undoable with Ctrl + Z and happens immediately. Deleting an operation is not undoable, so it asks first. The confirmation is an alert dialog, its buttons are reachable by Tab, Escape cancels, and focus returns to the node you were on either way.

Sortable Lists (Export Manager)

The Export Manager's operation list is drag-and-drop, with a full keyboard equivalent:

Drill Tooling Table

The per-diameter drill table is a modal grid. Tab moves between cells and Escape closes the modal. Every input and dropdown carries an accessible name that names both its hole diameter and its column, so a cell is never announced as a bare number.

Screen Reader Support

Live Regions

• Status region: a polite region carries ordinary progress and completion messages; a separate assertive region carries errors, so urgency is not lost.
• The visible status text is not itself a live region. Its idle state, which restores a few seconds after every message, is therefore silent rather than being re-announced.
• Long-running generation reports progress through the same region, so a background job is audible rather than silent.
• The status log holds the full history and is reachable from the keyboard: Tab to the chevron at the left of the status bar and press Enter.

Semantic Structure

• Main landmarks: <header> (toolbar), <main> (canvas), <aside> (sidebars), <footer> (status bar)
• Both left-hand panels are ARIA trees, each with its own label, and the tree role is dropped while a panel is empty so it never claims children it does not have
• Headings hierarchy maintained within sections
• Form labels associated with inputs via for/id, and help text via aria-describedby

Button Labels

All icon-only buttons include aria-label attributes describing their function:

• "Fit to View", "Zoom In", "Zoom Out"
• "Toggle Visibility", "Delete", etc.

SVG Icons

Decorative icons are marked aria-hidden="true" as they enter the page, including icons injected into tree rows and stage nodes after load. Icons that carry meaning on their own are given an accessible name instead.

WCAG 2.1 Compliance

EasyShape5000 targets WCAG 2.1 Level AA compliance. While the application is fully functional for keyboard users, some visual aspects (such as the 3D viewport) have inherent limitations.

Implemented Guidelines

Partial or Planned Support

Known Limitations

1. 3D view: V-Carve, Relief and Rotary render only in 3D. The camera is keyboard-operable, but the geometry it draws has no text equivalent yet, so a non-visual user can generate and export these operations without being able to inspect them. This is the largest open gap and is tracked as planned work.

2. Canvas interaction: The 2D canvas preview is visual-only. Object data is available through the scene tree and the property panel, but spatial relationships require visual inspection.

3. Narrow viewports and high zoom: See guideline 1.4.10 above. Rotating a tablet to landscape, or widening the window, restores the full workspace.

4. Per-operation announcements: Generation messages name the stage but not yet which operation produced them, which is ambiguous when several are queued.

5. Drag-and-drop file upload: Requires a pointer. Alternative: activate the drop zones with Enter, or use the import button and the I shortcut.

6. Moving shapes on the canvas: Dragging is pointer-driven. The X, Y and rotation fields in the property panel are the keyboard equivalent.

7. Touch devices: Touch zoom, pan and orbit work, but keyboard navigation is the primary accessibility path.

8. Audio: EasyShape5000 produces no sound. Every state change is reported as text, so no information is conveyed by audio alone.

9. EasyTrace5000: This guide covers EasyShape5000 only.

Reporting Issues

If you encounter accessibility barriers, please report them via GitHub Issues.

There's a dedicated template available for these reports to ensure the necessary technical details are included.

1. Go to the New Issue page
2. Select the Accessibility Report template
3. Fill in the required details (Browser, OS, Assistive Technology)

Resources

• WCAG 2.1 Guidelines
• WAI-ARIA Authoring Practices
• WebAIM Keyboard Testing