As Content and Layout Co-Evolve: TangibleSite for Scaffolding Blind People's Webpage Design through Multimodal Interaction

TL;DR

This work addresses the difficulty blind designers face in creating coherent webpages by enabling end-to-end editing of content and layout through TangibleSite, a multimodal tangible interface. Guided by two co-design sessions with blind participants, the authors implement a persistent page representation and feedback mechanisms that combine tangible manipulation, vibrotactile cues, and actionable audio to support iterative design. A formative study with six participants demonstrates that TangibleSite enables independent webpage creation, supports refinement across content and layout, and lowers barriers to achieving visually consistent designs. The results highlight the value of co-evolving content and layout, the need for scalable feedback, and potential paths toward adaptive automation and AI-assisted design in accessible web authoring tools.

Abstract

Creating webpages requires generating content and arranging layout while iteratively refining both to achieve a coherent design, a process that can be challenging for blind individuals. To understand how blind designers navigate this process, we conducted two rounds of co-design sessions with blind participants, using design probes to elicit their strategies and support needs. Our findings reveal a preference for content and layout to co-evolve, but this process requires external support through cues that situate local elements within the broader page structure as well as multimodal interactions. Building on these insights, we developed TangibleSite, an accessible web design tool that provides real-time multimodal feedback through tangible, auditory, and speech-based interactions. TangibleSite enables blind individuals to create, edit, and reposition webpage elements while integrating content and layout decisions. A formative evaluation with six blind participants demonstrated that TangibleSite enabled independent webpage creation, supported refinement across content and layout, and reduced barriers to achieving visually consistent designs.

Figures (10)

• Figure 1: P2 demonstrated two different workflows. a) Placed the bracket first to establish the layout, then inserted the content. b) Spoke the content first, then placed the bracket to determine its placement.
• Figure 2: a) P2 used multiple brackets as placeholders to sketch the overall webpage structure. b) P2 then discussed the intended content for each bracket.
• Figure 3: Workflow of P3 designing webpages using multiple web elements. a-c) P3 placed three web elements in sequence. d) P3 explored the board to verify the alignment and then inserted content into each bracket. e-f) P3 added an additional bracket on the baseboard and input its content.
• Figure 4: Four scenarios examined in Co-design Session 2: a) Text overflow: the text container is too small, causing content to extend beyond its boundary. b) Text underflow: the container is larger than the text, resulting in excessive unused space; the dashed inset marks the usable text area. c) Image–container mismatch: a landscape-oriented container holds a portrait image, leaving whitespace on the left and right. d) Multi-element reorganization: when an existing text container is full, adding new content requires resizing or repositioning neighboring elements to create space.
• Figure 5: Examples of three touching behaviors. a) P1 used touch to identify the category of a bracket by feeling the tactile patterns on its top. b) P2 used their hands to touch brackets, the baseboard, and tactile patterns to check alignment and gauge size. c) P3 swept the board and used their hands to touch multiple brackets to recall layout decisions.