Hurry up⚠️ Only 100 tickets left in this pool WaysAwardsSubmit your WaysAwards project — enter the 2026 nominations

A11y

Divs may not apply - the beauty of semantic HTML

September 4, 2023 1:45 PM

Long Lecture

🇬🇧 English

CMYK

About

As front-end developers writing modern web applications, we often forget that a deep knowledge of HTML is a skill to be honed. The result is that the huge majority of digital products have invalid HTML, which results in accessibility issues. In her talk, Marta will show you how to start taking HTML seriously by showcasing how to implement some very common semantic elements along with those less common ones. She will explain why this matters and share strategies on how to keep your skills fresh.

Talk by

Photo of Marta Dabrowka, Software Engineer at Trustpilot

Software Engineer at Trustpilot

Watch the full talk

Watch this WaysConf session, then continue with related talks or explore the current programme.

Explore the 2026 agenda More WaysConf recordings

From the recording

Talk in brief

In this WaysConf 2023 session, Marta Dabrowka, software engineer at Trustpilot, demonstrates why returning to semantic HTML is essential for creating accessible and maintainable web applications. Analyzing data from WebAIM's annual report on one million homepages—which reveals an average of 50 accessibility errors per page—Dabrowka highlights how common issues such as empty buttons, missing image alt text, and broken heading hierarchies stem directly from improper HTML. She explains why relying on WAI-ARIA attributes, component libraries, or custom div-based controls increases code complexity and introduces accessibility barriers. Through practical examples comparing native elements like buttons, description lists, address tags, and progress bars against div-heavy alternatives, she outlines how semantic markup reduces code footprint and improves screen reader compatibility. Finally, Dabrowka offers actionable development strategies, including bare-HTML prototyping and screen reader testing, while pointing to the upcoming 2025 European Accessibility Act as a critical driver for organizational adoption.

Key takeaways

01
WebAIM Data Shows Widespread HTML Failures
WebAIM's annual analysis of one million homepages reveals an average of 50 accessibility errors per page, most of which stem from basic HTML mistakes. Issues such as missing alt text, empty buttons, and absent form labels remain prevalent across top websites.
Watch from 3:54
02
ARIA and Frameworks Cannot Substitute Native HTML
Adding ARIA attributes or using third-party component libraries does not inherently fix accessibility issues and often correlates with higher error rates when misused. Native semantic elements deliver implicit ARIA roles and keyboard interactions out of the box without extra scripting.
Watch from 11:57
03
Native Buttons Eliminate Redundant Boilerplate Code
Replacing interactive div tags with semantic button elements automatically handles keyboard navigation and screen reader roles. Reimplementing these features manually requires multiple event listeners, ARIA roles, and tab index management.
Watch from 17:35
04
Correct Heading Hierarchies Ensure Usable Screen Reader Navigation
Screen reader users rely on structured headings from H1 through H6 to navigate page content logically. Mixing heading levels for visual styling disrupts document outline structure and confuses assistive technologies.
Watch from 20:21
05
Legal Mandates Provide Business Justification for Semantic Web Standards
The upcoming 2025 European Accessibility Act creates strong legal leverage to persuade stakeholders to adopt semantic HTML standards. Native compliance reduces maintenance overhead and provides built-in accessibility without costly refactoring.
Watch from 37:11

Video chapters

3:54The Current State of Web Accessibility Errors
Marta Dabrowka shares findings from WebAIM's annual analysis showing persistent HTML accessibility errors across the top million websites.
5:56Why Web Industry Practices Neglect HTML Basics
The speaker explores why coding bootcamps, technical interviews, and industry trends undervalue core semantic HTML skills.
11:37The Limits of ARIA and Third-Party Component Libraries
Dabrowka explains why relying on ARIA attributes, frameworks, or AI tools cannot fix underlying semantic HTML structural flaws.
15:14Semantics in Action: Divs Versus Native Controls
A detailed code comparison demonstrates how native button elements outperform custom interactive divs while requiring significantly less code.
20:00Enforcing Structured Document Hierarchies
The talk covers heading hierarchy principles and discusses how design systems should decouple visual styles from structural tags.
25:38Unlocking Underused Native Elements
Real-world examples from production websites demonstrate proper implementations for address tags, description lists, and progress bars.
30:14Strategies for Implementing Semantic HTML Workflows
Practical recommendations encourage developers to prototype in plain HTML, run automated validators, and test using screen readers.
34:39Q&A: Advocating for Accessibility and No-Code Tools
In the closing Q&A, Dabrowka discusses the impact of no-code platforms and explains how the European Accessibility Act provides business leverage.

Read edited transcript highlights

These concise notes were edited from automatic captions and checked against the talk structure. They are not a verbatim transcript.

WebAIM Research Exposes Persistent Accessibility Deficits

Every year since 2019, WebAIM analyzes the top one million homepages to measure web accessibility performance. Despite gradual improvements across the industry, the data consistently shows an average of 50 accessibility errors per page. The majority of these issues—such as missing alternative text for images, empty links, unlabelled inputs, and missing language attributes—are fundamental HTML errors rather than complex scripting failures. This evidence demonstrates that basic web markup practices remain widely neglected across modern software development.

Watch from 3:54

Misconceptions Surrounding ARIA and Component Libraries

Many development teams assume that sprinkling ARIA attributes onto non-semantic markup or adopting third-party component libraries will automatically render their applications accessible. WebAIM data actually indicates a positive correlation between ARIA usage and increased accessibility violations when attributes are implemented incorrectly. Similarly, assembling pre-built component libraries into a page can still yield non-semantic document structures. Sustainable accessibility requires developers to understand native HTML semantics rather than delegating responsibility to external libraries or automated tools.

Watch from 11:37

Code Efficiency Benefits of Native Interactive Elements

Divs and spans are non-semantic generic containers designed purely for styling and grouping. When developers turn a div into an interactive element like a button, they must manually write event handlers for both click and keydown events, assign an ARIA role, and set a tab index. In contrast, using a native button tag provides implicit accessibility roles, default focus management, and built-in keyboard trigger support without extra code. Choosing semantic elements minimizes script complexity and reduces long-term maintenance overhead.

Watch from 15:14

Specialized Elements for Complex Content Structures

Beyond standard text containers, native HTML offers specific elements designed for structured data that developers frequently recreate with generic divs. For instance, contact details can be wrapped in an address element to allow screen readers to navigate directly to communication links. Key-value pairs, such as product attributes on e-commerce sites, are best represented using description lists with title and description elements rather than nested divs. Additionally, native progress elements eliminate the need for custom JavaScript and CSS progress bar components.

Watch from 25:38

Leveraging Legal Mandates for Technical Alignment

When advocating for semantic HTML within organizations focused on speed and short-term delivery, legal compliance serves as a compelling argument. The European Accessibility Act of 2025 imposes strict accessibility requirements on digital products, giving engineering teams solid backing when requesting time for proper HTML implementation. Because semantic markup provides native accessibility features without recurring costs, training teams in core HTML standards is one of the most cost-effective strategies for meeting regulatory compliance.

Watch from 37:11

Explore WaysConf 2026

View the agenda

Get tickets