Piotr Zrolka — Accessibility Expert at kinaole
Digital Accessibility from the Ground Up: Integrating Design Principles into Organizational Processes
September 4, 2023
15:45
A11y
🇬🇧 English
A11y
Storytelling with code for better accessibility (and SEO)
About
Google is blind. It doesn't see beautiful layouts, engaging carousels, attractive illustrations, and photos. The same is true for many other users who visit our site and may not necessarily rely on the culturally dominant sense of sight. The use of storytelling principles in coding comes to the rescue, changing the optics from visual coding to linear coding arranged logically. By asking questions about whether the structure of our website tells a logical story, whether its content carries meaning and function, and whether the reader of this story can easily navigate through it by finding strategic elements, we are able not only to create well-functioning websites, which the blind Google and its crawlers will visit and rate higher in the SEO ranking. Above all, we will reach all Internet users who sit down to the coded reading with the satisfaction that someone has prepared a user-friendly website written like an engaging story.
Watch the full talk
Watch this WaysConf session, then continue with related talks or explore the current programme.
From the recording
Talk in brief
In her presentation at WaysConf 2023, Justyna Weronika Łabądź explains how storytelling techniques derived from art history and audio descriptions can improve web accessibility and search engine optimization. Drawing on her experience writing audio descriptions of visual art for blind audiences, she illustrates how web content should be organized logically from macro composition to micro details. She addresses common developer pitfalls, such as relying solely on visually styled headings and overusing generic div elements, which create disorienting linear experiences for screen reader users. To remedy this, Łabądź demonstrates the correct implementation of semantic HTML elements, logical heading hierarchies (H1 through H4), and context-aware image alt text. Finally, she connects accessible coding practices directly to SEO, showing how search engine crawlers interpret page structure similarly to screen readers. By using tools like Wave and axe DevTools, developers can transform code into clear, sequential narratives that benefit all web users and improve search visibility.
Key takeaways
- 01
Structure Web Content From Macro to Micro Detail
Accessible design should mirror audio descriptions by communicating the core structure and primary purpose of a page before introducing finer details. This approach allows screen reader users to quickly grasp the layout and context.
Watch from 2:59 - 02
Use Semantic Markup Instead of Stylized Containers
Relying solely on styled divs creates a disorienting linear stream for assistive technologies. Implementing semantic elements like article and proper heading tags establishes clear structural landmarks.
Watch from 7:10 - 03
Maintain Sequential Heading Hierarchy Without Overcomplication
Headings should strictly follow sequential levels, such as H1 to H2, to avoid confusing screen reader users who navigate by jumping through sections. While HTML provides six heading levels, sticking to a maximum of four avoids unnecessary structural complexity.
Watch from 10:43 - 04
Write Contextual Alt Text Beyond Filenames
Image alt text must describe the visual function within the specific context of the surrounding content rather than repeating the image filename. Effective alt attributes provide actionable detail that enhances comprehension for non-sighted visitors.
Watch from 14:57 - 05
Improve SEO by Designing for Screen Reader Navigation
Search engine crawlers interpret web pages through structural logic and keyboard-like navigation similar to screen readers. Implementing proper accessibility practices directly clarifies content hierarchy for web bots, boosting search visibility.
Watch from 17:06
Read edited transcript highlights
These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.
Translating Visual Art Principles into Web Structure
When observing a visual piece like Vincent van Gogh's Starry Night, sighted viewers absorb the complete composition at once. However, describing art to a blind audience requires first establishing the macro structure—such as the overall landscape, the night sky, and the prominent cypress tree—before diving into specific details like the swirling stars or glowing windows. This same audio description methodology applies directly to web development. Building web pages with a clear hierarchy that moves from broad structural sections down to granular details allows screen reader users to easily grasp the layout and navigate content.
Watch from 2:59The Accessibility Pitfalls of Div-Based Layouts
A widespread bad habit among web developers is placing almost every page component into generic div and section containers without proper semantic HTML. While the resulting design might look visually organized to sighted visitors, it presents a chaotic experience for people relying on screen readers. Because screen readers consume content in a linear sequence, a site made entirely of divs lacks structural landmarks, leaving blind users trapped in a dark room without light switches and unable to distinguish headlines from main body content.
Watch from 7:10Enforcing Sequential Heading Hierarchies
Headings act as chapter titles that guide users through a web page's narrative arc. When developers skip heading levels or use them out of sequence, screen reader users experience a disorienting narrative jump akin to reading a mystery novel where the plot suddenly skips to the final chapter. To preserve clarity, headings should always follow a logical progression starting from H1 down through H2 and H3, while restricting the depth to no more than four levels to prevent overcomplicating the page.
Watch from 10:43Authoring Meaningful Image Descriptions
Images and data tables serve as illustrations that bring web content to life, but they require accurate description attributes to be accessible. A common error is using default file names as alt text, which provides no value to screen reader users. The text within alt attributes must always depend on the surrounding context. For instance, an illustration of a mascot on an article about user research should specifically describe the mascot conducting a customer interview rather than using a generic file label.
Watch from 14:57How Search Engine Bots Benefit from Accessibility
Search engine web crawlers operate remarkably like screen reader users because they evaluate web pages programmatically without visual perception and rely on keyboard-like navigation paths. When developers construct websites with rigorous accessibility standards, clear headings, and descriptive alt text, web crawlers receive explicit instructions regarding page context and value. Consequently, making a web application fully accessible naturally improves its search engine optimization and organic search rankings.
Watch from 17:06
Explore WaysConf 2026
