My favourite colour is Chuck Norris red ๐
by Declan Chidlow Setting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But th [...]
HTMHell
Posts
Getting Oriented with HTML Video ๐
by Scott Jehl A couple years back, I was in a window seat on a flight from Amsterdam to New York. The weather was gray and drizzly as the plane took o [...]
Microdata for books ๐
by Alan Dalton Dive into marking up books Books are the best Christmas presents, especially for us web geeks. (I hope youโll find a Web Accessibility [...]
How I gained a new perspective on ARIA ๐
by Marco Bretschneider Can you remember the day you first learnt about ARIA? Maybe the first fact you learnt about ARIA was the first rule โDon't use [...]
You donโt need the isOpen class ๐
by Maureen Holland Donโt get me wrong. You can keep it if you like it. But you donโt need it. A class selector can allow us to visually show or hide c [...]
The Gift You Do NOT Want: A Div in a Button's Clothing ๐
by Corina Murg With the right CSS makeup and a click event, almost anything can pretend to be a button. In accessibility work, we spot these fakes and [...]
Page by Page: How Pagination Makes the Web Accessible ๐
by Kristin Rohleder Imagine youโre reading a book that seems perfect for cozy winter evenings. But as soon as you turn the page, you suddenly find you [...]
Improving User Experience for Multilingual Web Browsing ๐
by Anastasiia Batarei Today, Iโd like to talk about the experience of browsing websites where content is fully or partially in a language different fr [...]
HTML and CSS I didn't even know about before I started creating content in Japanese ๐
by Julia Undeutsch Since I started to create content in Japanese, I also wanted to learn about traditional setups, like having Japanese text flow from [...]
Makeshift hot reload ๐
by Evan Hahn In short: put <meta http-equiv="refresh" content="1"> in your <head> element to refresh your page every second. This is a makeshift "hot [...]
Submit to the Quirks of HTML ๐
by Felix Hessenberger It was on a cold February evening. I had been working on a client project, building an order item listโnothing out of the ordina [...]
Native HTML light and dark color scheme switching ๐
by Vadim Makeev Itโs getting dark early in Berlin in the winter. Itโs not even close to evening, but my OS and all apps have already switched to dark [...]
Past HTML, Future HTML? ๐
by Jens Oliver Meiert Consider the following HTML document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1996-01//EN"> <html> <head> <title></title> [...]
Almost, but not quite, entirely unlike... ๐
by Lรฉonie Watson Can you give me the HTML for an accessible button please? It was a simple enough question. Or it would have been, had I been asking a [...]
aria-labelledby = self ๐
by Weston Thayer An accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negativ [...]
Forced Colors Mode Futility ๐
by Matthias Zรถchling figure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid #000}figcaption,sup,.highlight,section:has(#resources) sp [...]
Control the Viewport Resize Behavior on mobile with `interactive-widget` ๐
by Bramus figcaption { font-size: 0.8em; text-align: center; } Viewports units on mobile have been a problem for a long time. Using 100v [...]
Smooth Multi-Page Experiences with Just a Few Lines of CSS ๐
by John Allsopp A single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a diff [...]
Starting off right: Where autofocus shines ๐
by Kilian Valkhof Focus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive t [...]
A link on a logo in the header, what should the alt-text be? ๐
by Rian Rietveld It's a common pattern to use a logo in the header as a link to the homepage. Fun fact: the alt text of the image inside a link, will [...]
#34 a button is not a link ๐
Bad code <button type="button" onclick="window.open('https://example.com/other-page')">Link target description</button> Issues and how to fix them A b [...]
#33 make me one (input) with everything ๐
The good intentions were there but in the HTML and Accessibility world, less is sometimes more. Bad code <label for="textinput">First name</label> <in [...]
Never underestimate HTML ๐
by Lara Aigmรผller โHTML is easy.โ, โFrontend development is easier than backend development.โ, โUpdating the UI should be a simple task once the backe [...]
The devil is in the details: a look into a disclosure widget markup ๐
by Cristian Diaz Disclosure widgets are one of the most common component patterns you can find on the web. It consists of a button that can hide or sh [...]
ARIA Live Regions ๐
by Andrea de Souza ARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that makes web page elements accessible [...]
The Implied Web ๐
by Halvor William Sanden People donโt need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase co [...]
Design pattern for custom tooltips ๐
by Jan Hellbusch Should we use tooltips to convey information? Hints and descriptions are often included on web pages through tooltips โ but not every [...]
Boosting testing efficiency: how semantic HTML transforms End-to-End testing ๐
by Stefania Mellai Semantic and accessible HTML serves as a powerful tool, enhancing not only human interaction but also the efficiency of software sy [...]
The road toย HTMHell isย paved with semantics ๐
by Vadim Makeev HTML semantics isย aย nice idea, but does itย really make aย difference? Thereโs aย huge gap between HTML specโs good intentions and what b [...]
Revisiting Fundamentals - Semantic lists for Improved Accessibility ๐
by Winnie Bosibori Lists are one of the fundamental semantic HTML configurations that, when implemented appropriately can enhance accessibility. HTML [...]
Swallowing camels ๐
by Ida Franceen I don't like how the screen reader pronounces these numbers and I've been experimenting with different kinds of markup to get it to re [...]
The Ghosts of Markup Past ๐
by Thomas A. Powell As a well-seasoned web developer, a clear euphemism for my age, I reminisce about the early days of markup through the haze of str [...]
Getting started with Web Performance ๐ ๐
by Alistair Shepherd Carefully observing websites in the wild As the murderous tortoises start to converge on Ryลซjiโs hideout, th [...]
HTML: The Bad Parts ๐
by Mayank You've probably heard statements along the lines of "HTML is already accessible by default" or "You don't need to reinvent this perfectly fi [...]
Test-driven HTML and accessibility ๐
by David Luhr When I started writing unit tests and following a test-driven development (TDD) workflow, I was stoked with the immediate feedback and c [...]
The hidden attribute in HTML ๐
by Ahmad El-Alfy The hidden attribute allows us to hide HTML elements from the page. When it was introduced, it worked in a very simple way: it set th [...]
Template for accessibility guidelines ๐
by Steve Frenzel Foreword This template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with i [...]
What the slot? ๐
by Egor Kloos (aka dutchcelt) Web Components. The discussion seems to pop up more than it used to. Web Components Will Outlive Your JavaScript Framewo [...]
The hidden depths of the input element ๐
by Phil Nash The <input> element is the most fascinating element in HTML. Most elements behave the same way regardless of their attributes, the type a [...]
Security Headers using <meta> ๐
by Saptak S Various HTTP headers are sent between the user and the server of a website in the request-response cycle. Some of these HTTP response head [...]
Web Components FTW! ๐
by Chris Ferdinandi Web Components are a collection of technologies that you can use to create reusable custom elements, with built-in interactivity, [...]
The Hellish History of HTML: An incomplete and personal account ๐
by Jason Cranford Teague Timeline of HTML from 1990โ2024 Note: HTML standards are developed first in browsers, so the version might have already [...]
Back to Basics: 5 HTML attributes for improved accessibility and user experience ๐
by Daniela Kubesch In the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technol [...]
The Form Attribute - Enhancing Form Layout Flexibility ๐
by Alexander Muzenhardt Consider a scenario where you have a login form containing two input fields with corresponding labels, alongside a submit and [...]
You don't need JavaScript for that ๐
by Kilian Valkhof Hello, my dear friend of RSS! This post contains interactive demos. You may want to read it on the website. Please don't feel antago [...]
The UX of HTML ๐
by Vasilis van Gemert Recently when I gave a coding assignmentโโโan art directed web page about a fontโโโa student asked: does it have to be semantic [...]
Preventing form submission with zero Javascript ๐
Want to trigger an action? Use a button element. Theyโre great. Want to also prevent form submission when someone clicks that button? Put down the Jav [...]
Enforcing better HTML markup with Eleventy ๐
While what we mean is usually very clear to us, others may decode our messages differently from what we intended. This is especially true on the web, [...]
What is the Difference Between Alternative Text, Long Description, and Caption? ๐
When it comes to adding images on the web, you need to consider how to make them accessible and understandable to everyone. Which means you need to in [...]
A Theory of Web Relativity ๐
The rel attribute has the potential to take the Internet to the next levelโฆ and yet, we usually forget about it. Imagine a city where people guided th [...]
Common nesting issues in HTML ๐
HTML is such a lovely language. Browsers will almost always display something for you, no matter what you put in the HTML document. Heck, you could om [...]
Do you know color-scheme? ๐
Do you know of color-scheme yet? If not, I bet you still think you do. It will certainly look familiar, as prefers-color-scheme has been around for lo [...]
Mini-guide to add an image ๐
Adding an image with HTML is pretty easy, itโs just a simple tag, after all, right? <img src="path/to/image.jpg" /> But when you start taking into con [...]
Modern HTML as a foundation for progressive enhancement ๐
Reading HTMHell, you might be aware that progressive enhancement is a thing. To sum things up, it's a way to make sure anyone gets a viable version of [...]
5 HTML elements, And a partridge in a despair tree ๐
HTML is a beautiful programming language. It comes with many out-of-the-box accessibility benefitsโit conveys semantic meaning to assistive technology [...]
Get that marquee โจAeStHeTiCโจ ๐
With the current Y2K fashion trend and JLo being back together with Ben Affleck, the 2000s are having a revival this year. Many brands are jumping ont [...]
Table Like It's 2023 ๐
In this article: Hello, Website Builders! A little history What is a table? Who benefits from tables? What does a table look like? What does a table s [...]
One day we'll have a fully customisable select ๐
Today, I want to look at a proposed HTML feature that may end up replacing a lot of <div>s-based custom input components: <selectmenu>. CSS is awesom [...]
DOM Clobbering ๐
Motivation When thinking of HTML-related security bugs, people often think of script injection attacks, which is also known as Cross-Site Scripting (X [...]
There can be only one: Options for building โchoose oneโ fields ๐
When it comes to building out forms, it sometimes seems like there are at once both too few field types and too many. This is especially true when it [...]
Dear developer, your assumptions are wrong ๐
As developers, validation of user input is one of the first things we are taught. So, for example, we may think it would be a good idea to put some re [...]
You don't need HTML! ๐
While browsing Mastodon late one night, I came across this excellent blog post called HTML is all you need to make a website. It describes a few websi [...]
Improving SEO without knowing where to start ๐
Summary Introduction What is SEO ? Web quality with Opquast SEO-related Opquast rules Conclusion Introduction โ Colleagues sometimes ask me: โHey Alex [...]
Meaningful labels using ARIA โ or not. ๐
If I had a dollar for every time I've had to tell someone to remove an aria-label from an interactive control that has actual visible text, I could ha [...]
Adding Complementary Performance Data to Your Site ๐
Getting performance data from real users can transform assumptions about how a user experiences a site into objective, actionable information. In the [...]
Reading the meter ๐
The <meter> element is a little known and rarely used semantic element. It's a non-interactive form element that renders as a partially filled horizon [...]
Landmarks and where to put them ๐
Heading elements (h1 through to h6) are used to give structure to the content of your page. They're important for SEO, make your pages more readable a [...]
Using SRI to protect from malicious JavaScript ๐
At some point of developing a website, there might come a time where we need to progressively enhance using JavaScript. There are few different option [...]
You Don't Need ARIA For That ๐
In web development, writing semantic HTML is important for accessibility, and also provides some nice side effects such as supporting browser "reader" [...]
How to transfigure wireframes into HTML ๐
Soon enough in your career as a web developer, you encounter the situation where a designer hands over a wonderful web design in all its large-screen [...]
#32 almost a proper close button ๐
Bad code <button display="flex" role="button"> <svg role="img" viewBox="0 0 13 13" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="15p [...]
#31 additional โassistanceโ ๐
Bad code <a href="/contact" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, ple [...]
#30 Bullet โlistโ ๐
Bad code <p> โข HTML <br> โข CSS <br> โข JavaScript </p> Issues and how to fix them Use <p> for paragraphs, not lists. The standard way for cre [...]
#29 Randomly grouping content ๐
Bad code <section> <aside> <div> <section> <header> <a href="/"> <img src="logo.svg" alt="Logo"> < [...]
#28 alert level 1 ๐
Bad code <h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only"> Done </h1> Issues and how to fix them The element is used for communi [...]
#27 <a6> ๐
Context: Visually a list of links. Bad code <h6>Popular Cities</h6> <div> <h6 class="footerLinks">Amsterdam</h6> <h6 class="footerLinks">Rotterd [...]
#26 HTMHell special: tasty buttons ๐
The second HTMHell special focuses on another highly controversial pattern in front-end development: ๐ฅ the burger button. ๐ฅ The burger button and hi [...]
#25 A link is a button is a link ๐
Note: We've removed most classes to improve readability. Bad code <a tabindex="0" type="button" href="/signup" role="link"> <span class="focus" ta [...]
#24 A placeholder is not a label ๐
Bad code <input type="text" placeholder="First name"> Issues and how to fix them Every form input element needs a label. When screen reader users acce [...]
#23 A card pattern ๐
Bad code <article> <div> <div class="sr-only">Image</div> <img src="/feature-teaser.png" alt="Feature teaser" /> </div> </article> <div> [...]
#22 the good olโ div link ๐
Context: A link to another page. Bad code <div>About us</div> <div onClick="location.href='about.html'"> About us </div> <div data-page="aboutus" da [...]
#21 Legendary legend! ๐
Context: A button that expands and collapses a section of text. Bad code <button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="t [...]
#20 HTMHell special: close buttons ๐
This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development: ๐ฅ the close button. ๐ฅ In m [...]
#19 heading in the wrong direction ๐
Context: A simple page that displays the availability of a product. Bad code <h1>Product Status</h1> <h2>Is the product available?</h2> <div> <h3> [...]
#18 main divigation ๐
Context: The main navigation of a personal website. Bad code <div class="nav"> <div> <div>about</div> <div>thoughts</div> </div> </div> Is [...]
#17 inaccessible cards ๐
Context: A list of linked cards, each with heading, image, and teaser text. Bad code <section> <section> <h2>Overview</h2> <figure class="ca [...]
#16 alt, no waitโฆ, aria-label, no waitโฆ, alt ๐
Context: A list of images that link to detail pages. Bad code <a tabindex="0"> <div alt="Browser Wars: The Last Engine" aria-label="Browser Wars: Th [...]
#15 letter by letter ๐
Bad code Letters are wrapped in divs to animate each letter with JavaScript. <h3> <div style="display: block; text-align: start; position: relative; [...]
#14 not my type ๐
Bad code <a type="button" class="button" href="/signup" tabindex="-1">Sign up</a> Issues and how to fix them The type attribute has no effect on the s [...]
#13 link or label ๐
Bad code <input type="checkbox" id="accept" required> <label for="accept"> <a href="/legal"> I accept the confidentiality policy and dataโฆ </a> </la [...]
#12 accessible poll yes/no ๐
Bad code <form role="form"> <h2>Poll title</h2> <div id="pollQuestion">Is this accessible?</div> <div name="pollGroup" role="radiogroup"> <d [...]
#11 The trigram for heaven ๐
Bad code <span class="nav-toggle"> โฐ Menu </span> Issues and how to fix them A screen reader may announce this as trigram for heaven menu, because โฐ i [...]
#10 <section> is no replacement for <div> ๐
Bad code <section id="page-top"> <section data-section-id="page-top" style="display: none;"></section> </section> <main> <section id="main-content [...]
#9 Cookie Consent from Hell ๐
Bad code <body> <header>โฆ</header> <main>โฆ</main> <footer>โฆ</footer> <div class="cookie_consent modal"> <p>We use cookiesโฆ</p> <div c [...]
#8 anchor tag used as button ๐
Bad code <a href="#" onclick="modal.open()">Login</a> Issues and how to fix them If the a element has an href attribute, it represents a link to anoth [...]
#7 multiple duplicate ids and table layout ๐
Bad code <table> <tr id="body"> <td id="body"> <table id="body"> <tr id="body_row"> <td id="body_left">โฆ</td> [...]
#6 link with void operator as href value ๐
Bad code <a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a> Issues and how to fix them Links won't work, if JavaScript fails [...]
#5 button-like-link ๐
Bad code <a href="#form" role="button" aria-haspopup="true"> Register </a> Issues and how to fix them Itโs a link to a form at [...]
#4 link-also-button ๐
Bad code <a href="https://example.com"> <button>Example</button> </a> Issues and how to fix them By nesting a button inside of a link, youโre sendin [...]
#3 image-buttons ๐
Bad code <img src="/images/edit.gif" onclick="openEditDialog(123)"> <img src="/images/delete.gif" onclick="openDeleteDialog(123)"> Issues and how to f [...]
#2 div with button role ๐
Bad code <div tabindex="-1"> <div role="button"> <svg width="28" height="24"> โฆ </svg> </div> </div> Issues and how to fix them Setting button [...]
#1 button disguised as a link ๐
Bad code <button role="link" title="Name of website" tabindex="0"> <img alt="Name of website" src="logo.jpg" title="Name of website"> </button> Issu [...]