Designing Beneath the Surface of the Web
Sarah Horton · 2006 · Proceedings of the 2006 International Cross-Disciplinary Workshop on Web Accessibility (W4A) · doi:10.1145/1133219.1133221
Summary
This paper reframes web accessibility as fundamentally a source code design problem, arguing that designers focus almost exclusively on the visual "surface" of web pages — colors, typography, layouts — while neglecting the underlying code layer that determines how well pages are read and interpreted by software including screen readers, search engines, and mobile browsers. Horton presents a framework of guidelines organized around four qualities of nonvisual web access: integrity (the soundness of document structure), usability (the ease with which users can access content), functionality (the degree to which users can operate interactive elements), and readability (the degree to which content can be understood). Under integrity, she advocates using semantic HTML elements (headings, lists, tables, fieldsets, labels, emphasis) to explicitly describe document structure rather than relying on visual conventions like alignment and typographic emphasis, which are meaningful to sighted users but invisible to software. She stresses avoiding meaningless and misleading markup — presentational tags like font and bold that convey no structural meaning, text used for visual effects (horizontal bars as dividers), and misappropriated tags (tables for layout, blockquotes for indentation). Under usability, she introduces the concept of "signal-to-noise ratio" for web pages and applies Gestalt design principles (proximity, similarity, continuity) to source code organization.
Key findings
Horton identifies several practical design principles that benefit both nonvisual and mobile access. The "inverted pyramid" principle — placing the most important content first in document order — is critical because serial access (whether by screen reader or on a small mobile screen) means the beginning of the page is encountered first; pages top-heavy with branding and navigation force nonvisual users to wade through noise to reach content. She demonstrates through screenshots of news sites that visual signal-to-noise ratios of popular pages are strikingly low (ratios of 1:1.6 to 1:3.8 for article content versus surrounding elements), and the problem is even worse for nonvisual users who lack visual cues to skip over clutter. On functionality, she argues that all interactive elements must be keyboard-operable and follow sequential logic (label then field, not field then label), using structural markup like fieldset/legend and label to make relationships explicit. On readability, she advocates text as the primary content format because it can be processed by software — spoken aloud, enlarged, reformatted — while images and audio cannot be readily adapted. The paper concludes by showing how all four guidelines directly apply to mobile web design: semantic markup enables Opera's Small Screen Rendering to reformat pages intelligently; reduced clutter saves bandwidth and screen space; text-based content avoids image scaling problems; and logical document order produces sensible single-column layouts.
Relevance
Written in accessible, practitioner-friendly language, this paper articulates a design philosophy that remains foundational to web accessibility work: the most impactful accessibility decisions happen in the source code, not the visual design. Horton's framing of accessibility as "designing beneath the surface" effectively communicates to visual designers that their HTML choices matter as much as their color choices. Every principle she identifies has only grown more relevant: semantic HTML is central to modern frameworks and ARIA; signal-to-noise optimization aligns with core web vitals and mobile-first design; the inverted pyramid maps to modern content strategy; and keyboard functionality is essential for the proliferating range of input devices. The convergence argument — that nonvisual access guidelines also improve mobile access — was prescient and is now established practice under the umbrella of responsive, accessible design. For teams building accessibility programs, this paper provides an excellent introduction that connects accessibility to broader design quality without requiring deep technical knowledge.
Tags: semantic HTML · web design · universal usability · nonvisual access · screen readers · mobile accessibility · document structure · design principles
Standards referenced: WCAG 1.0