As Content and Layout Co-Evolve: TangibleSite for Scaffolding Blind People's Webpage Design through Multimodal Interaction
Jiasheng Li, Zining Zhang, Zeyu Yan, Matthew Wong, Arnav Mittal, Ge Gao, Huaishu Peng · 2026 · Proceedings of the 2026 CHI Conference on Human Factors in Computing Systems (CHI '26) · doi:10.1145/3772318.3791895
Summary
This CHI 2026 paper investigates how blind designers can author webpages end-to-end — generating content and arranging layout iteratively — rather than being limited to either content entry or layout inspection. The authors ran two rounds of co-design with three blind participants using a tangible design probe derived from the earlier TangibleGrid system: a 3D-printed baseboard with resizable physical brackets representing web elements (text blocks, images, videos). The probe surfaced three findings: blind designers prefer content and layout to co-evolve but lose that flexibility as complexity grows; hands serve as the primary channel for monitoring, confirming selection, and planning next steps; and participants want actionable audio feedback about content-layout fit, not generic descriptions. These findings drove three design opportunities (persistent page representation, touch-aligned feedback clarifying system state and user intent, actionable audio guidance about content-layout relationships) that were implemented in TangibleSite: a 305x406 mm baseboard with 192 PCB cells, shape-adjustable brackets with embedded vibration motors and capacitive touch sensing, a browser companion using React and the Web Speech API for speech synthesis and voice commands, and a backend on Express/Python that maintains the authoritative page model. A formative evaluation with six blind participants — a mix of co-design veterans and newly-recruited NFB members with varying web design experience — asked each to design a real webpage (portfolio, blog, travel diary, or small business homepage) in ~2 hours.
Key findings
All six participants completed a functioning webpage independently, producing portfolios, blogs, travel diaries, and business sites. Persistent spatial grounding (D1) let participants touch the baseboard at any point to recover their mental model without reconstructing the page from memory; those preferring sequential workflows finalized elements one at a time while others moved flexibly between global and local edits. Touch-aligned haptic feedback (D2) disambiguated the many meanings of touching a bracket — inspection, selection, preparation for speech command — and vibration confirmation gave participants confidence that their action had registered. Actionable audio guidance (D3) let participants respond to specific problems: when text overflowed, the system reported 'current characters: 20, maximum 15, recommended 10,' which P1 described as 'the necessary information that you need without overkill.' The 'Check' command produced page-level layout summaries (count and type of brackets, empty grid regions). Likert results showed 5/6 participants agreed they could generate content, choose placement, verify bracket-content fit, and change placement; 4/6 felt confident using it without further help; only 1/6 reported frustration. Key tensions observed: multimodal feedback can overload novices; multi-element structural changes require substantial manual repositioning; the tool currently outputs fixed-grid HTML without margins, typography hierarchy, alt text, or responsive behavior.
Relevance
For accessibility practitioners and tool builders, TangibleSite demonstrates that WYSIWYG-equivalent web authoring for blind designers is viable when the system combines (a) a persistent, always-queryable model of the page, (b) touch-aligned haptic state confirmation, and (c) actionable audio that names specific mismatches and proposes concrete adjustments rather than narrating the layout. It addresses a real accessibility gap: existing tools like Figma, Google Sites, and WordPress support content editing via screen reader but leave layout work to sighted collaborators, forcing blind designers into code-only workflows that are themselves poorly accessible. Practical implications: audio feedback should be decision-oriented (flag overflow, suggest a resize) not descriptive; haptic cues should distinguish interaction modes; and adaptive guidance levels can serve both novices and experienced blind web developers. Limitations to note: fixed-grid layout only, no margins or typography controls, no automatic alt-text or semantic accessibility metadata, single-session evaluation with six participants, and bespoke hardware that is not commercially available. Future work to integrate generative AI for styling, template generation, and responsive variants is a natural next step.
Tags: accessible web design · blindness · tangible user interface · multimodal interaction · web authoring · haptic feedback · assistive technology · co-design