Accessible Screen Reader UI Prototypes

Overview

Simple static HTML prototypes for screen-reader-friendly menus, checkout flows, and forum interfaces. Each page starts with a short description and includes optional speech-label variations using apostrophe syllables and Eloquence-style ECI examples.

Speech effects are disabled by default because unsupported synthesizers may read command characters literally.

Menu Order

Cafe menu with category links, item details, add/remove buttons, and cart announcements.

Open menu prototype

Menu Filter Variation

Compact menu with category filter buttons and selectable announcement styles.

Open menu variation

Checkout Flow

Fake Amazon-style checkout with products, delivery, payment review, and order status.

Open checkout prototype

Checkout Form Variation

Marketplace product cards, cart totals, delivery radios, and fake payment fields.

Open checkout variation

Checkout Compare

Dense product comparison variation with a table, quantity controls, and summarized totals.

Open compare prototype

Forum Thread

Reddit-style forum feed and thread with voting, sorting, nested replies, and live updates.

Open forum prototype

Forum Feed Variation

Single-page forum feed with post creation, sorting, voting, and live score updates.

Open forum variation

Forum Compose

Post composer variation with validation, preview, flair, and accessible warnings.

Open composer prototype

Status Panel

Live-region examples for progress, warnings, errors, and completion messages.

Open status prototype