Why Using Div Elements Instead of Buttons Harms Web Accessibility
By
moebrowne
Reliable enough to start your morning with. Toast it again tomorrow.
Summary
The article argues against using div elements as substitutes for button elements in web development, particularly criticizing developers who use onclick handlers on divs instead of proper button elements. The author explains that divs lack proper accessibility features: they don't announce themselves as interactive elements to screen readers, can't be focused with a keyboard, and don't respond to Enter or Space Bar key presses. The piece targets framework-enthusiastic developers in React and HTMX communities who prioritize convenience over accessibility standards.
Key quotes
· 4 pulledOne of the weirdest 'debates' I seem to perpetually have with framework-enthusiastic developers is whether or not a <div> is 'just as good' as a <button>
This element does not announce itself as an interactive element to screen reader users
You can't focus on a <div> with a keyboard
The event only fires on click, not when the Enter or Space Bar keys are pressed (again, keyboard users)
You might also wanna read
Text-Based Web Browsers: Their Continued Relevance for Accessibility Testing and Semantic HTML
The article discusses the relevance of text-based web browsers in modern web development, emphasizing their importance for testing website a
cssence.com·4mo ago
The HTML Output Tag: Built-in Accessibility for Dynamic Content
The article introduces the HTML <output> tag as an underutilized but powerful element that provides built-in accessibility for dynamic conte
denodell.com·7mo ago
WebSparks: An AI-Powered Tool for Building Web Applications Without Extensive Coding
WebSparks is an AI-powered software engineer that transforms ideas into fully functional web applications without requiring extensive coding
innovirtuoso.com·18h ago
Joost de Valk publishes open Website Specification: 128 rules for modern, future-proof websites
Joost de Valk, creator of Yoast SEO, published the Website Specification (specification.website) — an open, platform-agnostic reference docu
ppc.land·23h ago
ZX Spectrum BASIC interpreter rebuilt from scratch to run natively in web browsers
A developer has rebuilt the ZX Spectrum's BASIC interpreter from scratch to run in a web browser, without emulating the original Z80 hardwar
boingboing.net·1d ago
How to Set Up an Apache Reverse Proxy for an Ecommerce Website
This article provides a comprehensive, start-to-finish guide on setting up an Apache reverse proxy specifically for ecommerce websites. It c
blog.radwebhosting.com·2d ago