by Alexis DegryseI think we all know the <datalist> element (and if you don’t, it’s ok). It holds a list of <option> elements, offering suggested choices for its associated input field.It’s not an alternative for the <select> element. A field associated to a <datalist> can still allow any value that is not listed in the <option> elements.Here is a basic example:Pretty cool, isn't it? But what happens if we combine <datalist> with less common field types, like color and date:<label for="favorite-color">What is your favorite color?</label><input type="color" list="colors-list" id="favorite-color"><datalist id="colors-list"> <option>#FF0000</option> <option>#FFA500</option> <option>#FFFF00</option> <option>#008000</option> <option>#0000FF</option> <option>#800080</option> <option>#FFC0CB</option> <option>#FFFFFF</option> <option>#000000</option></datalist>Colors listed in <datalist> are pre-selectable but the color picker is still usable by users if they need to choose a more specific one

by ScheppEverybody loves fast websites, and everyone despises slow ones even more. Site speed significantly contributes to the overall user experience (UX), determining whether it feels positive or negative. To ensure the fastest possible page load times, it’s crucial to design with performance in mind. However, performance optimization is an art form in itself. While implementing straightforward techniques like file compression or proper cache headers is relatively easy, achieving deeper optimizations can quickly become complex.But what if, instead of solely trying to accelerate the loading process, we triggered it earlier—without the user noticing?One way to achieve this is by prefetching pages the user might navigate to next using <link rel="prefetch"> tags. These tags are typically embedded in your HTML, but they can also be generated dynamically via JavaScript, based on a heuristic of your choice. Alternatively, you can send them as an HTTP Link header if you lack access to the HT

by Alexander MuzenhardtIntroductionImagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, and just before the deadline, you manage to finish it. Everyone loves your work, and the feature is set to go live the next day.<button> <i class="icon">📆</i></button>The ProblemYou find some good resources explaining that there are people with disabilities who need to be considered in these cases. This is known as accessibility. For example, some individuals have motor impairments and cannot use a mouse. In this particular case, the user is visually impaired and relies on assistive technology like a screen reader, which reads aloud the content of the website or software. The button you implemented doesn’t have any descriptive text, so only the icon is read aloud. In your case, the screen reader says, “Tear-Off Calendar button”. While it describes the appearance of the icon, it doesn’t convey the purpose of the button. This information is me...

by David LuhrThe Description List (<dl>) element is useful for many common visual design patterns, but is unfortunately underutilized.It was originally intended to group terms with their definitions, but it's also a great fit for other content that has a key/value structure, such as product attributes or cards that have several supporting details.Developers often mark up these patterns with overused heading or table semantics, or neglect semantics entirely. With the Description List (<dl>) element and its dedicated Description Term (<dt>) and Description Definition (<dd>) elements, we can improve the semantics and accessibility of these design patterns.The <dl> has a unique content model:A parent <dl> containing one or more groups of <dt> and <dd> elementsEach term/definition group can have multiple <dt> (Description Term) elements per <dd> (Description Definition) element, or multiple definitions per termThe <dl> can optionally accept a single layer of <div> to wrap the <dt> and <dd>

by Alistair ShepherdWeb performance is incredibly important. If you were here for the advent calendar last year you may have already read many of my thoughts on the subject. If not, read Getting started with Web Performance when you’re done here!This year I’m back for more web performance, this time focusing on my favourite HTML snippet for improving the loading performance of web fonts using preloads. This short HTML snippet added to the head of your page, can make a substantial improvement to both perceived and measured performance.<link rel="preload" href="/nova-sans.woff2" as="font" type="font/woff2" crossorigin="anonymous">Above we have a link element that instructs the browser to preload the /nova-sans.woff2 font. By preloading your critical above-the-fold font we can make a huge impact by reducing potential flashes of unstyled or invisible text and layout shifts caused by font loading, like here in the following video:Recording of a page load illustrating how a font loading late

by Steve FrenzelThis example is a classic - in a bad way - and can cause quite some confusion for users of assistive technology (AT). But it's also very easy to fix! It's the <input> element missing its dear friend, the <label>... 😭Bad code<input placeholder="Search" />It's not relevant for this article, but here's the "button" to submit the content of the <input>:<div class="_icon_1f3oz_44"> <span title="" class="gl-icon__wrapper" role="img"> <svg class="gl-icon"> <use xlink:href="#search"></use> </svg> </span></div>The cherry on top: It's not even wrapped inside a <form> element, so it's very likely that the submit is handled via JavaScript. 🍒So what's the issue with this <input> element? In theory, having a placeholder instead of a <label> element is only a temporary solution! Once you've typed something, the placeholder gets replaced with whatever you've typed.This could be a big issue for screen reader users. Let's check how different screen readers handle this kind of situation...

by J. Pedro RibeiroNot too long ago, building an accordion component would require you to use a combination of JavaScript and CSS. If you've been around for as long as I have, you might have used a library like jQuery or Mootools."vanilla", your code would look something like this:<div class="my-js-accordion"> <span>Learn more about accordions</span> <p class="hidden">Accordions encapsulate content under a heading.</span></div>.hidden { display: none; }document.querySelectorAll(".my-js-accordion").forEach((accordion)=>{ accordion.querySelector("span").addEventListener("click", (e)=>{ accordion.querySelector("p").classList.toggle("hidden"); });});And it would work as you expected:→ Learn more about accordions Accordions encapsulate content under a heading.→ This one was built with JS and CSS We needed JavaScript and CSS to make this work. Click the heading again to close it.→ Each accordion on this example works independently For any other advanced feature, more JavaScript will be neede

by Daniela KubeschIt's almost 2025, so it's time to stop using the title attribute everywhere. Images, text, buttons, ... you name it, devs really like to put it on any element in sight. Most of the time, people actually want to create a tooltip. You know, that little bubble of information designed to clarify the purpose of otherwise unclear elements, that pops up attached to an element when its receives focus or a user hovers their mouse over it.The identifying thing about tooltips is that they contain no interactive elements (aka. only plain text), and are always attached to existing interactive elements.tooltip, but toggletip. Toggletips can contain semantic markup, rich content and interactive elements, and usually only appear when an element is clicked. The great thing about toggletips is that they're accessible on touchscreens and easier to find and recognise for users with low vision.So depending on your use case, you need to implement a tooltip or a toggletip.But let's circle b

by Matthias KittsteinerWhen I first stumbled upon fieldset and legend, I didn’t know much about HTML and especially not about accessibility. Everything I noticed was the special way a legend is displayed inside a fieldset – or rather: alongside the border of a fieldset.Fast forward to (kind of) today: while working on a contact form, I first could get my hands on this element and learned more about it.What is a fieldset?Every so often I’m surprised how well chosen names in HTML are. fieldset is no exception here. It’s basically a list of form fields (inputs, selects, textareas). It groups all fields inside of it, and makes it a set of fields. And the legend is used as caption of the fieldset (and ultimately it becomes a caption for all of the grouped form fields).A simple example of a fieldset looks like this:<fieldset> <legend>Date</legend> <label for="date-month">Month</label> <input name="date[month]" type="number" id="date-month"> <label for="date-day">Day</label> <input name="date

by Declan ChidlowSetting the colour of text on a webpage is usually a simple affair involving whipping it out the good ol' CSS color property. But this is HTMHell, dammit. None of that wishy-washy CSS nonsense here. No siree. We use HTML as the good lord intended and shalln't stray into the sins of cascading sheets lest we end up some non-HTML variant of hell where they define page structure with JavaScript vars.But HTML isn't great for defining styles -- or at least, it isn't anymore. If we wind back the clocks a few years to HTML versions of old, we find the colour attribute. If you've been around for a while, you've no doubt seen it. Something like this:<font color="#d72b2b">HTMHell rules!</font>HTMHell rules!If we render that in a browser, we get some text in the lovely HTMHell red. That's great. That's what we'd expect. Next we'll choose another colour. Something a bit different. Let's try 'chucknorris'.<font color="chucknorris">But... Chuck Norris isn't a colour.</font>But... Chu

by Scott JehlA 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 off, but as it punched through the clouds a very different scene revealed itself. Out my window, it looked like a Maxfield Parrish painting brought to life. And the plane's speed made it appear to scroll by with this uncanny effect, like a parallax effect that used the wrong easing function. Mesmerizing! I pulled out my phone and recorded a couple of videos.One in landscape:And one in portrait:I didn't realize at the time that those video orientations would come in handy for a little post on this website.Let's jump ahead a year to mid 2023. For years, many of us had been advocating for a simple, HTML-based way to serve video files in different sizes and formats using media queries—essentially how the picture element handles images. I won't rehash the entire history here, but that concept wasn't new or mine to claim. In fact, we once had exa

by Alan DaltonDive into marking up booksBooks are the best Christmas presents, especially for us web geeks. (I hope you’ll find a Web Accessibility Cookbook in your Christmas stocking, gentle reader.) Unfortunately, A Book Apart closed this year. Fortunately, the authors reacquired the rights to their books.To track the authors’ preferred ways of making their books available, I created an “Authors Apart” webpage. For the HTML, I recalled the “‘Distributed,’ ‘Extensibility,’ & Other Fancy Words” chapter of Mark Pilgrim’s seminal Dive Into HTML5, which explains HTML’s microdata features. Mark wrote that article 13 years ago with a focus on Google Rich Snippets, and so I also referred to his unofficial guide to migrating Google Rich Snippets to schema.org and the more recent “Book” schema from Schema.org. Armed with that knowledge, here’s how I structured the HTML for each book to convey the name, URL, author’s name, author’s URL, original publishing date, date when the book was updated (

by Marco BretschneiderCan you remember the day you first learnt about ARIA? Maybe the first fact you learnt about ARIA was the first rule “Don't use ARIA, use native HTML instead“ - and so did I.As someone who has been able to speak native HTML for many years, I always thought that ARIA is not relevant for a developer like me.My “Wait a minute” momentWith the entry into force of the European Accessibility Act, accessibility has also become more important in our products, which are mainly used internally by banks.<nav> <ul> <li> <a href="#">First navigation link</a> </li> <li> <a href="#" class="active">Second navigation link</a> </li> <!-- more navigation links --> </ul></nav>.active { /* Highlight the selected navigation entry */}When it comes to supporting people with visual impairments, it is our job as developers to convey as much information as possible that we also display to sighted people.The code example above represented in the accessibility tree The information that the seco

by Maureen HollandDon’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 content for disclosure widgets, like a custom select component or dropdown navigation menu. But a disclosure widget is made of two parts:A button that controls show/hide behaviourRelated content that is shown or hidden depending on the button stateWhether the isOpen class is applied or not, a screenreader would announce this button as "Click me!, button".<button>Click me!</button><p class="isOpen">Content that displays depending on a conditionally applied class.</p>One of the principles of web accessibility is to be perceivable. That means not relying exclusively on one sense, like sight, to provide information. In the above case, if I can’t see the content being shown or hidden, how do I know my button click did anything?We need a corresponding semantic update to indicate what happened. This is what the aria-expanded attribute provides.The

by Corina MurgWith the right CSS makeup and a click event, almost anything can pretend to be a button. In accessibility work, we spot these fakes and fix them, but teaching others why and how to do it is just as important. It’s not just about correcting a single mistake; it’s about introducing developers to accessibility concepts and approaches that they can comfortably return to and reuse across all their projects. More importantly, it encourages them to think beyond the sighted user with a mouse and consider the needs of those who rely on assistive technologies.Really, How Bad Can a Fake Button Be?!So, how do we answer this question? I used to demo the problems using a screen reader, but I've found that it can be overwhelming for developers new to accessibility. I prefer now a different approach, using simpler tools: the keyboard and the accessibility tree. They are easy to pick up and give developers a good feel for what’s really going on.No, the message is not to avoid screen reade

by Kristin RohlederImagine you’re reading a book that seems perfect for cozy winter evenings. But as soon as you turn the page, you suddenly find yourself somewhere else, rather than on the next page of the story. Now, you have to painstakingly search through the book to find where the story continues — as if someone had bound the pages in the wrong order.For about 16% of the world’s population (roughly the population of China), the web often feels like a maze. People who rely on assistive technologies experience the web like a poorly bound book, one they must tediously navigate page by page rather than simply moving to the next relevant section.Another example: imagine you're searching on Google and find the answer on page 2. However, to get there, you first need to enter the Konami Code to unlock the link. Such obscured navigation elements are, unfortunately, a daily reality for many web users.While an accessible pagination doesn't make the entire web accessible, it does ensure that

by Anastasiia BatareiToday, I’d like to talk about the experience of browsing websites where content is fully or partially in a language different from the user’s native one. This situation is common for users navigating government portals or local service providers in a country where they don't speak the language well, and for international marketplaces, where essential information might appear in unfamiliar language. Or just a user has a different language preference set in their browser because it's convenient for them. In these cases, users often rely on the browser’s auto-translate feature, which many modern browsers offer by default. When you open a page in a different language from your preferred setting, the browser will prompt you to translate it automatically.Browser auto-translation relies on the lang attribute set on the HTML element:<html lang="en"></html>However, automatic translations can sometimes be inaccurate or misleading, especially when it comes to proper and brand

by Julia UndeutschSince I started to create content in Japanese, I also wanted to learn about traditional setups, like having Japanese text flow from top to bottom, right to left, like you’d see in newspapers or novels. That's when I discovered CSS properties like writing-mode: vertical-rl and HTML tags like <ruby>, which add furigana (phonetic guides) over kanji characters.Honestly, I’d never used these properties before and almost forgot they even existed! But now that I’ve dived into them, I’ll break down how you can implement them step-by-step to get that traditional Japanese look.That's the text we'll work with. It means "Example of vertical text. Japanese culture is very rich.":Step 1: Setting Up Vertical Text with CSSFirst up, we’ll make the text flow vertically from right to left, top to bottom. The CSS property writing-mode: vertical-rl is perfect for this. It’s how you make Japanese text look like it’s traditionally printed..vertical-text { font-size: 2rem; /* Adjust font siz

by Evan HahnIn short: put <meta http-equiv="refresh" content="1"> in your <head> element to refresh your page every second. This is a makeshift "hot reload" for development. It's not perfect, but it can be a quick solution!Hot reloading automatically reloads parts of your page while you're working. Change some HTML and see your work instantly! Tweak some CSS and the results are right there! Gone are the days of repeatedly switching to your browser to refresh, because hot reload takes care of it.It's called "hot" reloading because it's hot. It's powerful. Everyone loves it.But here's the problem: hot reload requires fancy build tooling. It's built into tools like Vite, Parcel, and various editor plugins. But what if you aren't using one of these? What if you're writing HTML the way God intended: by editing some damn files on disk? In other words, without a build tool?Can you still get that hot, hot reloading?Home-grown hot reloadYou can create a makeshift hot reload by putting this some

by Felix HessenbergerIt was on a cold February evening. I had been working on a client project, building an order item list—nothing out of the ordinary. To adjust an item’s quantity, the user would open a popup form with a single input field, type a number, and hit enter.<form> <label> Quantity <input type="number"> </label></form>Everything worked as intended when suddenly, a new requirement came in: add another input field to also set a bulk quantity. I did what I was told, but to my horror, the form wouldn’t submit anymore with the new field displayed! 😱I checked the browser console for any JavaScript errors and double-checked my markup, but to no avail. A quick detour to Stack Overflow shed light on the situation: according to the HTML 2.0 spec, it's a feature, not a bug:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.Some Web archeology later, I found myself pretty deep down the rabbit...

by Vadim MakeevIt’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 mode. Well, not all of them, unfortunately. And that’s the thing: dark mode has become a quality-of-life feature for many users, and I often try to avoid using apps or websites that haven’t implemented it, especially in the evening. They literally hurt my eyes!When it comes to color scheme implementations, they range from rather useless ones that require a page reload to more sensible ones that query the prefers-color-scheme media feature and apply changes in CSS on the fly:body { background-color: #ffffff; color: #000000; @media (prefers-color-scheme: dark) { background-color: #000000; color: #ffffff; }}⭐ I’ll be using native CSS nesting in all demos throughout this article. It works in all modern browsers and makes code a bit more compact, especially when it comes to media queries. But if you’re not familiar with CSS nesting, you can use

by Jens Oliver MeiertConsider the following HTML document:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1996-01//EN"><html> <head> <title></title> </head> <body> <p class="Author"> <h1></h1> <P> <P> <H2></H2> <P> <UL> <LI> <LI> <LI> </UL> <P> <!-- … --> </body></html>You will notice a few things:The unusual doctypeThe inconsistencies in element case (most notably, <p> vs. <P>)The inconsistencies in omitting optional tags (like dropping </p> and </li> end tags, but keeping </body> and </html>)Yet in some respects, this document structure is better than the code we find on many modern websites (and that is sites, not even apps).Why? What’s to like about this kind of code?It’s valid. If you run this and the respective original page’s code through an HTML conformance checker like the W3C markup validator, the code will validate. This is basic professional work that we don’t see often anymore.It’s focused. There’s close to no superfluous code. While there’s a little bit more optional markup to be

by Léonie WatsonCan 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 another person. As it was, I was asking ChatGPT, and so of course there was nothing simple about it.For the briefest of moments, I caught myself thinking even ChatGPT couldn't get this wrong. The <button> element is probably the most talked about HTML element in accessibility. Literally all you have to do is use it, give it an accessible name, attach some JavaScript to get it to do something if it isn't part of a form, and you don't even need to think about keyboard accessibility because the browser takes care of all that for you.Then reality kicked me in the shins and told me to snap out of it, and, as if to prove reality's point, ChatGPT burbled:Absolutely! Here’s an accessible button in its simplest form, following best practices to ensure compatibility with screen readers and keyboard navigation.OK, I thought to myself, that doesn't soun

by Weston ThayerAn accessible name is how UI components are identified to assistive tech. Having a good accessible name is important. If not, negative effects may include screen reader users missing out on vital information, voice control users struggling to interact, and any number of other issues with the assistive technologies that rely on it.By default, accessible name is computed from an element's own contents. That's part of the spec'd algorithm that browsers implement.<a href="/updates"> Latest updates</a>A link with the accessible name "Latest updates".There are many ways to change that behavior. The aria-labelledby attribute is one which can be used to point the algorithm somewhere else in the DOM. Or not.<h2 id="heading">Latest updates</h2><a href="/updates" aria-labelledby="heading"> <svg>…</svg></a>A link with the accessible name "Latest updates".What happens if aria-labelledby points within?Purgatory<a href="/updates" aria-labelledby="contents"> <span id="contents">Latest

by Matthias Zöchlingfigure{margin-bottom:2.4rem}figure img{aspect-ratio:4;border: 6px solid #000}figcaption,sup,.highlight,section:has(#resources) span,section:has(#fns) ol{font-size:87.5%}.highlight{margin-left:1.5em;padding:1rem;text-wrap:balance}.highlight::before{content:attr(data-icon);content:attr(data-icon) / '';position:absolute;margin-left:calc(-1.5em - 1rem);filter:grayscale()}.highlight em{font-style:inherit;text-transform:uppercase}sup{position:relative;top:-.5em;vertical-align:baseline}Are you aware of Forced Colors Mode? If not, there are some resources at the end. If so, did you also know that this accessibility feature can be used as an entry-level debugging tool?From left to right: The HTMHell Advent Calendar 2024 in its intended theme, when viewed in Windows 11 contrast theme “Night Sky”, and “Desert”.Note: I’ve created a CodePen with all the upcoming examples, so you can follow along.PremiseWhen the forced colors feature is turned on, colors will be replaced with CSS

by Bramus figcaption { font-size: 0.8em; text-align: center; }Viewports units on mobile have been a problem for a long time. Using 100vh is most likely not exactly what you initially expected it to be. To fix this, the CSS Working Group came up with more units over time for you to use. The dynamic viewport units got introduced, which include svh and lvh which represent 1% of the small and large viewport height respectively.Two mobile browser visualizations positioned next to each other. One has an element sized to be 100svh (left, green) and the other 100lvh (right, blue). The blue dashed outline represents the Layout Viewport.While these units are fairly interoperable at the time of writing – there are still some interop issues, mainly related to webviews – there is one big gripe that a lot of people have with it: when the Virtual Keyboard gets shown, these units do not take the presence of that Virtual Keyboard into account. Depending on what you are building, you might want to have

by John AllsoppA single line of CSS can enable slick multi-page transitions for web applications (and web sites for those who maintain there's a difference), opening up new possibilities for web app architectures, and website experiences. So let’s take a look at View Transitions, why we might want them, and how to get started with just that single line of CSS.The Web's Long Legacy of Native App EnvyThe launch of the iPhone coincided with (and likely ignited) a resurgence of the web. After years of stagnation under the dominance of Internet Explorer, competition and innovation were rekindled by Safari for Mac and Firefox. The iPhone’s killer feature (hard as it might be to believe now) was the “full Safari” on a mobile device.The Safari team introduced native CSS features like gradients, rounded corners, web fonts, transitions, animations, and transforms. Slick interactive experiences were now a reality on the web.Then native iPhone apps arrived—with their smooth, animated state transit

by Kilian ValkhofFocus is where the user is on your website. It's what makes it possible to navigate your site with the keyboard or other assistive technologies, and it's how a browser knows which form element you're typing in. It's vital to get right if you want to build good websites.Whenever you're dealing with code that can “steal” focus you have to be aware of how that affects your visitor. So it's not strange that many folks will tell you to leave focus alone, to stay away from tabindex and autofocus.All of that advice is good advice: you should be careful when moving the focus away from where it would normally be and where the user would expect it to be, or you'll quickly find yourself in a world of accessibility issues.But if you start off on the right foot, managing focus is a delightful HTML detail that makes your site a joy to use.AutofocusThe autofocus attribute can be added to any element to make it automatically focused on page load, skipping over any other elements that

by Rian RietveldIt'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 be added to the link text.The problem with linking a logo is that it serves 2 purposes:a logo, that tells you which site you are visiting;a link, that leads to the homepage.So add both that info in the alt text. Explain what's on the image and where the link leads to: "Site name logo, to the homepage".Note: Start the alt text with the visible text, then the link will be easier to target for people using voice recognition software.Let's take as example the logo of my home town Leidschendam-Voorburg.In code (simplified):<a href="/"> <img alt="Leidschendam-Voorburg logo, to the homepage" src="logo-lv.svg" /></a>Generated HTML:VoiceOver in Safari will announce this as:All info is there.There is an advantage of using the alt text instead of an aria-label solution. When the connection is slow, the alt text will show up before the image does and a

by Lara Aigmüller“HTML is easy.”, “Frontend development is easier than backend development.”, “Updating the UI should be a simple task once the backend is ready.”—these and other similar statements reached my ears time and again during my career as a web developer.Very often, these made me sad. 🥲The reason is that I spend most of my working hours writing frontend code including HTML, CSS, and JavaScript (JS) (actually, TypeScript most of the time). When somebody tells me, that my job is “easy”, I feel like my skills are nothing special and another developer could replace me anytime…What follows now is an article about thoughts that came to my mind in the last couple of years when working together with different people from different teams with different backgrounds in HTML and frontend technologies in general. This is an article about the many “whys” in my head and possible answers…Why do people think HTML is easy?What is meant by “easy” anyway? Whether something is easy or not is usu...

by Cristian DiazDisclosure widgets are one of the most common component patterns you can find on the web. It consists of a button that can hide or show information when you click it. It's also one of the straightforward components to make from a technical standpoint.Just a quick note: this article will focus on the most basic form of it to show or hide content. A navigation menu can be considered as a disclosure widget but it has other features that won’t be the main focus of this article.This component pattern has two approaches: the first one is creating a <button> element with the attribute aria-expanded that will toggle between true and false when you want the content to be shown or hidden. Additionally, you want to create a relationship between those two elements with aria-controls to indicate the button controls the presence of this element, like this:<button aria-expanded="false" aria-controls="accordion">What are cephalopods?</button><div id="accordion"> <p>A cephalopod is any

by Andrea de SouzaARIA stands for Accessible Rich Internet Applications. It is a set of roles and attributes that makes web page elements accessible to users who require assistive technology, like screen readers, when native HTML alone is not enough. One of these sets of roles and attributes is aimed at defining live regions.Live regions are areas that, when dynamically updated, trigger screen readers to announce their new content. They are commonly used for notifications that do not receive focus when the new content is added to the page. For example: form errors, loading spinners, search results that appear on dynamic search, and toasts.Here is a practical example. On an e-commerce website, the notification “product added to cart” displays momentarily whenever the “add to cart” button is pressed. The new content is added to the page, but doesn't receive focus. While sighted users would be able to see it, screen-reader users would not know that somewhere on the page an updated happene

by Halvor William SandenPeople don’t need call-to-action buttons. Interface elements made to get attention and herd people towards clicks increase cognitive effort because they obscure themselves and reduce interfaces to clickable surfaces.The implied web is based on the idea that people read interfaces through the glasses of their needs combined with previous web platform experiences. Driven by tasks, they are open to clues about solutions and need clear communication to comprehend and actively move through the interface. In short, people must recognise elements so they can act accordingly.To better understand how to work with the implied web, we will look at signifier mishmash, intent through HTML and the dynamics of roles.The impossible elementInterface elements tasked with explicitly communicating clickability make things more complicated because clicking is neither a defining nor a driving factor in the interface; it’s just the mundane way things work.We make such click-focused el

by Jan HellbuschShould we use tooltips to convey information? Hints and descriptions are often included on web pages through tooltips – but not everyone has access to them.A tooltip is a short text that usually appears as a popup when a user hovers a mouse pointer over an element. Tooltips can be attached to any HTML element using the title attribute. There are only a few exceptions when a tooltip created with a title attribute will not be displayed (e.g., a title attribute on an iframe element). In this article, we’ll first take a look at the title attribute in HTML and point out to a few accessibility issues. Then we’ll make a few general suggestions about how to use tooltips. In the third part, we’ll build two accessible custom tooltips with HTML and ARIA, then look at two different CSS solutions and finally add an event handler in accordance with accessibility guidelines. Both tooltips can be previewed:In example 1, you’ll find a nested tooltip with a basic design using the z-index

by Stefania MellaiSemantic and accessible HTML serves as a powerful tool, enhancing not only human interaction but also the efficiency of software systems. For instance, when users fill out forms with clear labels and accessible input fields, this reduces errors and ensures sending accurate data to the backend and databases. You may also have heard about how a well structured web page is fundamental for search engine optimization (SEO).The Connection Between Semantic HTML, Accessibility, and TestingThis topic was beautifully explored by Rita Castro, in her talk a11y and TDD: A Perfect Match. While Rita mainly focuses on unit tests, it's worth mentioning how these principles can be applied to end-to-end testing as well, and for the same reasons.The End-to-End Testing DilemmaEnd-to-end testing, goes beyond checking individual parts of a website. It tries to act like a real user in a real web browser, testing the whole webpage as it would appear to someone using it for real.Let's imagine

by Vadim MakeevHTML 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 browsers and screen readers are willing to implement. Writing semantic markup only because the good spec is a spec, and it is good, and it’s a spec is not the worst approach you can take, but it might lead you to HTMHell.Simple daysLike most people involved in the front-end, I started my journey into Web development from HTML. It was simple enough, close to a natural language, and easy to use: you type some tags, save a text file, and reload the browser to see the result. And it would almost never fail if I made a mistake!Back then, I considered HTML a simple set of visual building blocks. It was too late for purely visual <font> elements (the CSS has replaced them), but the general idea stayed pretty much the same: if you wrap your text into <h1>, it becomes big and bold, if you have two <td> cells in a row, that’s your two-column layout.

by Winnie BosiboriLists are one of the fundamental semantic HTML configurations that, when implemented appropriately can enhance accessibility.HTML Lists RefresherWhenever I visit any website, I have formed the habit of checking for any accessibility issues and delving deeper into the HTML code structure. One apparent thing is that a large number of sites are characterized by non-semantic code structures that result in inaccessible sites.<ul>, <ol>, or <dl> elements.As developers or designers, we may sometimes overlook and deem lists as insignificant HTML constructs. However, Without lists, it will be difficult for people to follow content or information on a site. This is because they facilitate grouping related pieces of information, so they are associated with each other and make it easy to read and understand. In addition, people who use assistive technologies such as screen readers may be able to easily interact with a page using keyboard shortcuts.In this article, we are going to

by Ida FranceenI don't like how the screen reader pronounces these numbers and I've been experimenting with different kinds of markup to get it to read better, like injecting spans to force it to make proper pauses…Reflecting on my tendency to obsess over small, but maybe not so important details has led me to write this article. I want to share my experiences and the lessons learned from past projects where I may have lost sight of what is actually important.The biggest problemWhen I'm actively trying to improve the accessibility of a website it's easy to start with the first issue I come across. Maybe the color contrast of the icons in the footer is not good enough, making it hard for people to see them. Let's fix this!Well, if I'm selling things then the core functionality is probably people being able to buy things. However, if I'm focused on getting a screen reader to read prices in a preferred way, and my checkout is broken due to missing form labels, it's a problem. This situati

by Thomas A. PowellAs a well-seasoned web developer, a clear euphemism for my age, I reminisce about the early days of markup through the haze of strong emotional glasses. I see the past from an extreme nostalgic fondness for the simplicity of the time when a basic text editor and the ability to view source was all you needed. Yet it can just as easily go to a secret shame and embarrassment of admitting that we hacked around with invisible pixels, nested tables, and all manner of quirky presentational elements.This post attempts to map those extremes and the space between them. The ultimate outcome would be to encourage you to personally explore the history of the web to unearth things that could be rediscovered, recycled, or recast for the modern web as well as learn from past mistakes. So let’s get going, and I promise we will tread a path that isn’t as annoying as a scolding about the innovation of the <blink> tag.Searching for Markup GhostsBefore we get started with our naughty, ni

by Alistair Shepherd Carefully observing websites in the wild As the murderous tortoises start to converge on Ryūji’s hideout, they pull out their phone. It’s a cheap, older device but it’s survived the toils of the tortoise-ageddon well so far. Thankfully the internet still exists, although a bit slower, so they’re able to search online for how to scare tortoises away. The first result looks promising so they quickly tap through to find the information they need. But as the loading bar moves at barely a crawl, Ryūji realises with horror that this website is loading far too slowly—20 seconds have passed and it’s still just a white screen! They look up and realise they’ve run out of time, poor website performance was Ryūji’s downfall.As Ryūji discovered, web performance really matters, and is about making websites fast. I hope that most of us don’t encounter as drastic circumstances as they have! For the rest of us a well performing website is more accessible to people, offers a more en

by MayankYou've probably heard statements along the lines of "HTML is already accessible by default" or "You don't need to reinvent this perfectly fine HTML control". I consider these to be more of general claims rather than universal truths. It's extremely important for web developers to recognize gaps in the platform. To that end, I've decided to collect a few instances where HTML falls short, through accessibility issues or usability issues.This is not a comprehensive list, and it does not include gaps in ARIA. I wanted to find a balance between widely known issues and more frequently encountered (but lesser known) ones, while making sure to include some things that we take for granted. In each section, I will include its severity, alternate suggestions, and links where you can find more detailed information.<select multiple>Let's start with an easy one. The multiple attribute on <select> should pretty much never be used. It's like the polar opposite of single <select>, where instea

by David LuhrWhen I started writing unit tests and following a test-driven development (TDD) workflow, I was stoked with the immediate feedback and confidence I gained in every line of JavaScript I wrote.TDD improved my software design with simpler, more predictable code. It saved me countless hours of manual debugging by reporting errors directly in failing tests. And with solid test coverage, it allowed me to add new logic and functionality while keeping everything in an always-working state.I followed the process of Red, Green, Refactor, meaning I wrote a failing test, wrote just enough code to make the test pass, and then freely cleaned up my code, knowing everything was working. My JavaScript code had never been better.Then one day, I wrote a UI-oriented test that used document.querySelector(). Before the test even finished running, it errored and revealed that JavaScript tests run outside of the browser in Node, where no document object model (DOM) exists. Since the focus of my c

by Ahmad El-AlfyThe hidden attribute allows us to hide HTML elements from the page. When it was introduced, it worked in a very simple way: it set the CSS display property to none.Many people voiced concerns because here we are, mixing styles with markup again. To be fair, this was at a time before the rise of frameworks and the change in people's mindsets where separation of concern became a less debatable issue. There were also others who opposed the attribute because it can be easily overridden by CSS. A solution to avoid hidden elements from showing unintentionally is adding this snippet to your stylesheet to ensure it overrides other rules used on the same element.[hidden] { display: none !important;}There are differing opinions on using the !important declaration, as some authors considered it code smell. Later, the use of !important in utility classes became more accepted.A modern way to mitigate the use of !important is the use of CSS Cascade Layers. CSS layers is implemented b

by Steve FrenzelForewordThis template is opinionated and intended as a starting point for those who want to define how accessibility is dealt with in their company. It does not matter whether your title is developer, designer, project manager or something else.I created it based on my experience working with a very small start-up, a digital agency with more than 250 employees and a monolithic company with very fixed structures.When creating this template, I had the six most common WCAG failures in mind, but also what processes take place when you collaborate with other people. Nothing is set in stone and it should be adapted in consultation with your colleagues, because accessibility is a group effort! More on that in Prependix.As a reference, I refer to the Web Content Accessibility Guidelines (WCAG) 2.2, as they are popular and well documented. However, you are free to include a different one or more in this template, depending on your location and the requirements that need to be me

by Egor Kloos (aka dutchcelt)Web Components. The discussion seems to pop up more than it used to.Web Components Will Outlive Your JavaScript FrameworkHTML Web Components: An ExampleMaterial web components 1.0 releaseHTML Web Components are Just JavaScript?Web Components offer nifty features for creating components using JavaScript, CSS, and HTML. They have been available in all major web browsers since 2017. That’s long enough to start using them in production.Web Components consist of three things that are intended to work together.Custom ElementsShadow DOMTemplates and SlotsThe great thing is that you can use each of these on their own. For HTMHell and fun, let’s take a closer look at Slots and the <slot> element.What are slots?For slots to do their thing, we need a Shadow DOM. MDN on what the Shadow DOM is:A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated funct

by Phil NashThe <input> element is the most fascinating element in HTML.Most elements behave the same way regardless of their attributes, the type attribute of the <input> element can take 1 of 22 different values that gives it not only different behaviour, but a different visual appearance too (many of which are hell to style, of course).The <input> element is responsible for everything from text input, through checkboxes and radio buttons, to a button that resets all other elements in the form. I want to look beyond the various types that the <input> can embody, to the attributes you may not know about. Attributes that tweak the behaviour of the <input> to make it more usable, more accessible, and more applicable to various situations. Let's dig in.Keyboard controlOn a mobile device, focusing a text input will bring up the default virtual keyboard. But what if the input you are expecting is numerical or some other format? In this case the inputmode attribute can help to optimise the

by Saptak SVarious HTTP headers are sent between the user and the server of a website in the request-response cycle. Some of these HTTP response headers sent by the server to the browser help enhance the security and privacy of the website's users. These sets of headers are often commonly known as security headers. These can range anywhere from forcing the browser to always visit your website through https (Strict-Transport-Security) to preventing Cross Site Scripting and Clickjacking attacks on the website's user. You can check how well the security headers are set for your website using securityheaders.com.These security headers (or any HTTP response headers) are usually set through the server configuration, i.e., nginx config, Apache config, or similar. However, in certain scenarios, like hosting a static website using GitHub Pages, the developers don't have a lot of control over the HTTP response headers. In such scenarios, the ability to add security headers declaratively through

by Chris FerdinandiWeb Components are a collection of technologies that you can use to create reusable custom elements, with built-in interactivity, automatically scoped (or encapsulated) from the rest of your code.They have a wide range of features and functionality (some good, some bad, some ugly), but today, we're going to look at how to create your first Web Component using the most cliche of examples: the counter button.We'll learn how this...<counter-button></counter-button>Automagically becomes somethings like this under-the-hood...<button onclick="increase()">Clicked 0 Times</button><script>let count = 0;function increase (event) {count++;event.target.textContent = `Clicked ${count} Times`;}</script>Let's dig in!Creating a custom elementFirst, we'll create a custom element.You can name it anything you want, but it must include at least one dash (-). Single-word web components are not allowed (those are reserved for native elements).Let's uncreatively name ours counter-button.<c

by Jason Cranford TeagueTimeline of HTML from 1990–2024Note: HTML standards are developed first in browsers, so the version might have already became the de facto standard before the official standard document is released.The story so far:In the beginning Tim Berners-Lee created the World Wide Web. This has made a lot of people very angry and — putting all of humanity in constant contact with each other — been widely regarded as a bad move.This would be called the Hypertext Transfer Protocol, but you probably see it every day as http://. Although initially intended as a way to share scientific papers, Berners-Lee quickly realized it would do a lot more than that:His vision has led us to today, where the Web is now the predominant information platform for the planet Earth, and the language he created to create documents, HTML, is used by billions.Unlike other systems at the time that were making use of the growth of home computers and modems — like AOL and Compuserve — Berners-Lee provi

by Daniela KubeschIn the fast-paced world of web development, it's easy to get caught up in the latest frameworks, libraries and cutting-edge technologies. But sometimes, the most impactful improvements come from revisiting the fundamentals.In this blog post, I'll guide you through five HTML attributes that not only improve accessibility but also enhance the overall user experience. Whether you are an experienced developer or just starting, let's explore the potential of these elements to create a more inclusive web experience.1. hreflangThe hreflang attribute specifies the language of a linked resource on an <a> or <link> element. It works like the lang attribute but is specifically used for links.Why use hreflang?You can improve the user experience and SEO by using hreflang for both internal and external site links.hreflang on internal website links provides a way to tell search engines about different variations of a page for other languages or regions. This means that English speak

by Alexander MuzenhardtConsider a scenario where you have a login form containing two input fields with corresponding labels, alongside a submit and a reset button. If you submit the form, the action of the form gets triggered, and you can work with the formData.The layout looks nice as well (let’s imagine we have added some fancy CSS).<form action="/login" method="get"> <div> <label for="username">Username</label> <input type="text" name="username" id="username" required /> </div> <div> <label for="password">Password</label> <input type="password" name="password" id="password" required /> </div> <div> <button type="reset">Reset</button> <button type="submit">Submit</button> </div></form>The ChallengeNow, let's delve into a new requirement presented by your client. They want a revamped layout with the buttons placed elsewhere. This redesign, however, leads to a problem.<main> <form action="/login" method="get"> <div> <label for="username">Username</label> <input type="text" name="usern

by Kilian ValkhofHello, my dear friend of RSS! This post contains interactive demos. You may want to read it on the website.Please don't feel antagonised by the title of this article. I don't hate JavaScript, I love it. I write bucketloads of it every single day. But I also love CSS, and I even love JSX HTML. The reason I love all three of these technologies is something called:The rule of least powerIt's one of the core principles of web development and it means that you should Choose the least powerful language suitable for a given purpose.On the web this means preferring HTML over CSS, and then CSS over JS. JS is the most versatile language out of the three because you're the one describing how the browser should act, but it can also break, it can fail to load and it takes extra resources to download, parse and run. It is also very easy to exclude keyboard users and people using assistive technologies with it.In contrast to JS, which is imperative, HTML and CSS are declarative. You

by Vasilis van GemertRecently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be semantic and shit? The whole class looked up, curious about the answer — please let it be no! I answered that no, it doesn’t have to be semantic and shit, but it does have to be well designed and the user experience should be well considered. Relieved, all of my students agreed. They do care about a good user experience.The joke here is, of course, that a well considered user experience starts with well considered HTML.Somehow my students are allergic to semantics and shit. And they’re not alone. If you look at 99% of all websites in the wild, everybody who worked on them seems to be allergic to semantics and shit. On most websites heading levels are just random numbers, loosely based on font-size. Form fields have no labels. Links and buttons are divs. It’s really pretty bad. So it’s not just my students, the whole industry doesn’t understand sema

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 JavaScript, friend. I have a better suggestion:<button type="button">Button action goes here</button>And that’s it! No preventDefault() or no overwrought dependencies that will stop working without notice. Just good ol’ reliable HTML and a humble attribute.Okay, cool, thanks!PS from Manuel: Thank you so much to all authors for this wonderufl series of articles and thank you to all readers for reading, sharing, and commenting! Merry christmas and a happy new year! 🖤

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, where there are many ways to consume content. The language, browser type, device model, using a screen reader, navigating with or without a mouse - all of these factors can influence how information is experienced on the web.And the glue that can better aid all these factors might be developing with semantic HTML which helps in describing content more accurately. In this article, we will explore common issues related to incorrect HTML markup and how you can enforce good practices to fix them.IntroductionWeb experiences should be fast, accessible, and tailored to the capabilities of users and the devices they own. A premise we could all agree on, as we have all have suffered from poorly designed web experiences. And if you are a web developer, you might have once followed practices that led to such experiences.Still, building for a wide ra

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 include text alternatives to describe the image information or function.Three options are:Alternative TextLong descriptionCaptionBut how do you know which one to use? And when? Here's info to help you make that decision.Alternative TextAlternative text is a concise image text alternative for screen reader users. It's not shown to sighted users unless the image doesn't load.Which can happen when someone has turned off images on their email application. Or they're using a slow connection.<img src="flickr.svg" alt="Flickr">Long DescriptionLong descriptions are longer text alternatives for complex images, which are shown to both sighted and screen reader users.An expand/collapse accordion below an image is one example of a long description. Another example is a text description below the image.Note: don't confuse the longdesc attribute with long

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 themselves by the landmarks and the stores, where there were no directional signs, and where streets and neighborhoods had no names. It may sound like a U2 song, but it is the current state of the web.The Internet is a vast network of related pages and nodes, but the connections between the elements are void of meaning by default. They lack semantics. A link may connect pages A and B, but what is the relationship between the two? Why are they related? Wouldn’t it be great if there was a way of expressing the relationship between the Internet nodes? Then we wouldn’t have just data; we would have meaningful information. It would take the Internet to a whole new level.Fortunately, it is possible. Thanks to the rel attribute.The rel attributeThe rel attribute defines a relationship between the linked resources (one being the document it appears

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 omit all tags, and it will still work.That’s all nice, but as web professionals, we should aim to write valid code. But even professional web developers make mistakes. Here are some examples of common nesting issues in HTML.Anchors and buttonsLet’s start with anchors and buttons. It is common to see buttons inside anchors out in the web wilderness.<a href="#"> <button>Button</button></a>According to the specification, the anchor element must not contain any other interactive element, so <button> elements cannot live inside the <a> element.Permitted content- the a element on MDNIf we validate the code against the HTML validator, we can see that it's invalid.In the example below, when you click on a button, you will get two alerts, which is far from ideal.See the Pen Nesting issue: <a> and <button> by Silvestar Bistrović (@CiTA) on CodePen.Yo

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 longer and is clearly related.You're in good company if it's new to you - the State of CSS 2022 results just came in, and 73% of respondents had never heard of it.You probably use prefers-color-scheme a lot within your CSS media queries, to make a dark or light theme for your sites and apps based on user preference. Maybe you also add a toggle so people can choose their color scheme, irrespective of their OS settings. Beautiful. But now there's more to play with!What is color-scheme, then?It's a CSS property all of its own, and can save you a bunch of styling work for dark mode./* the selector here could be :root, html or body */:root { color-scheme: light dark;}Stick the above inside your stylesheet or <style></style> tags and voila, your website, without any other styling, will now respond to the user's prefer-color-scheme preference, as

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 consideration topics such as performance, screen sizes, accessibility, pixel density, or user preferences, you might ask yourself at some point if plain HTML is enough for the task… And the answer is yes! HTML has many options and is powerful enough to handle this task. This article will cover what you should consider at the moment of adding an image to a site with HTML.Basic considerationsalt attributeLet’s start with a very important one: your image needs an alternative text. It’ll have screen reader users to identify the image content, but it’ll also help when the image doesn’t load (maybe because the image is not available, or maybe because the user has a slow network). Otherwise, they won’t know what the image is. This can be done with the alt attribute.<img src="path/to/image.jpg" alt="A white cat laying on a sofa" />Keep in mind, someti

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 your page whatever is their context — slow bandwitdh, oldish browser, etc. — but also making the said page more resilient (e.g. to JavaScript errors).Progressive enhancement starts from the ground up:content,marked up with HTML,styled with CSS,enhanced with JavaScriptand improve accessibility with a bit of ARIA.Each of those steps should work as-is and enhance the lower steps without breaking them. In other words, you would need to write your markup independently from the CSS or JS you will apply later on.Great.That being said, it's kinda obvious that the better you know each step in the stack the more robust your page should be. JavaScript is everywhere so we may assume you know about it. ARIA is getting some shedlight for a few years now, so even without knowing ARIA we may suppose you use components libraries or something doing this j

HTML is a beautiful programming language. It comes with many out-of-the-box accessibility benefits—it conveys semantic meaning to assistive technology, enabling people to consume content and complete often important journeys that they may not be able to do outside of the web. So why is all that goodness we can get for free ignored so often?To expand on that point a little, why do we ignore native HTML elements that will tell people exactly what their purpose is and enable them to interact with it, and use overly complex ARIA-laden JavaScript solutions? Some of this may come down to how something is designed, while in other cases it may be misunderstanding/confusion or copied-and-pasted bad practices. In this article, we'll look at 5 common instances when semantic HTML is ignored.<button>Let's start with a topic that people will have seen many discussions around—interactive buttons. Take a look at the latest postings on the HTMLHell site, which will no doubt feature this issue heavily!A

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 onto the boat by creating websites with an “old-school” vibe.SEPRONIC WORLD by Thea Wood on BehanceThe marquee element is an old web dev community favourite, fitting the 2000s aesthetic. However, this HTML element is deprecated and should not be used on modern websites. If you still want to achieve that unique marquee aesthetic, this article is here to help. First, we learn about the history of the marquee element and look at the pros and cons. Then we code an alternative with CSS and JavaScript.The Marquee elementThe marquee element has never been a standard HTML element and is even classified as a non-conforming feature in HTML5. This means it is entirely obsolete and must not be used, according to the World Wide Web Consortium (W3C). Microsoft introduced the marquee element in Internet Explorer version 2.0, which was launched in 1995. Sin

In this article:Hello, Website Builders!A little historyWhat is a table?Who benefits from tables?What does a table look like?What does a table sound and feel like?(Re)learning tables (1994 - 2022)WCAG levels unlockedWhen tables get complicatedGo forth, and make good tablesLearn HTML (including tables) for freeTesting toolsSpecial thanksAbout AmyHello, Website Builders!Hey, you. Yes, you. Let's talk about tables on the web.It's almost 2023. Yet tabular data is still being delivered in ways that aren't accessible. From a visually disabled person's perspective, it's horrifying.Data tables aren't given semantic HTML to clarify its information relationships. Table markup is still used for page layouts, yet they're aren't flagged as such. The Web Alamanac reported how infrequent caption (a table's title) and role=presentation (indicating layout-only) were used in 2022 to improve accessibility.I'm embarrassed on behalf of my fellow developers, who should be more up-to-date with their craft an

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 awesomeI realise this calendar is about HTML. And I'll get to that. But first, let me start with CSS. CSS is fantastic, because it has allowed us to decide what our websites look like for over 25 years. This wasn't a given. Before CSS, you could only define the structure of your pages and browsers would decide their appearance.Fast-forward to today, CSS not only exists, it has become extremely versatile. We have grids, custom properties, transforms and much more, and it is all pretty compatible across different browsers. The basic principle of CSS stays: styles are hints. What websites look like is a combination of the preferences of users, browsers and web developers.But maybe in your design system, your select has a very specific style. Shadows around the listbox, brand-specific whitespace settings… or your select contains more than just string

MotivationWhen thinking of HTML-related security bugs, people often think of script injection attacks, which is also known as Cross-Site Scripting (XSS). If an attacker is able to submit, modify or store content on your web page, they might include evil JavaScript code to modify the page or steal user information like cookies.However, this article is NOT about XSS.This article is about an interesting attack that relies on HTML-only injections. The techniques here were first described by Gareth Heyes in 2013, the topic gained additional attention due to a recent research paper and its accompanying website https://domclob.xyz/ from Khodayari et al.BackgroundBefore we dive into the vulnerability class of DOM Clobbering, we need to establish some background.Have you ever noticed that whenever you include a HTML element with an id attribute, it becomes available as a global name (and a name on the window object)? So, for example<form id=freddy>…will lead to window.freddy becoming a referenc

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 comes to having users choose an option from a pre-defined list, also known as “choose one” fields.This article will take you on a three-stop tour of the most common ways to enable this kind of response in your forms, using just HTML. I’ll talk about some of the implications for CSS and JavaScript as well, but this is HTMHell after all, so my main focus is on the markup.Selection controls (a.k.a., drop-downs)The <select> dropdown has been a mainstay of web forms since they first debuted in HTML 2. This relatively simple element allows for an author to define multiple choices for the user to choose from and the whole thing is neatly packaged in a compact control that can be manipulated via the mouse or keyboard or both.<label for="fruit">What’s your favorite fruit?</label><select name="fruit" id="fruit"> <option>Apple</option> <option>Orang

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 restrictions in an input field for a name:<label for="name">First name:</label><input type="text" minlength="3" maxlength="20" id="name">You might be surprised at discovering how many people in the world have names with just 1 or 2 letters (Read the article Inclusive name inputs – because not everyone is called Chad Pancreas by Bruce Lawson for examples), or maybe you can try to fit the full name of Pablo Diego José Francisco de Paula Juan Nepomuceno Crispín Crispiniano María de los Remedios de la Santísima Trinidad Ruiz Picasso in your poor name field.But if you absolutely want to add some kind of validation, you can try with a pattern attribute:<label for="name">First name:</label><input type="text" pattern="[a-zA-Z]{2,20}" id="name">So... you're assuming names can only contain A-Z letters. What do we say then to Lee-Ann, Niccolò, Noëmi, a

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 websites which are pure HTML. No CSS and no JS.And I thought… do you even need HTML to make a website?A few hours later, I launched the NO-HT.ML website. Proving, once and for all, that you don't need HTML to make a beautiful1 responsive2, and useful3 website which everyone will love4.Go take a look and marvel at its magnificence - then come back here to discuss its profound importance.How it worksIf you look at the source code, you'll see it uses a tiny scrap of (mostly) invalid markup to kick things off.<!doctype UNICODE> is a fake doctype. But it seems to be needed to convince some browsers into attempting to render the document.<meta charset="UTF-8"> is real. Without this, text encoding sniffing takes places and some browsers just displayed rubbish.<plaintext> is also a real HTML element. It was deprecated in HTML 2 back in the mid-1990s.

SummaryIntroductionWhat is SEO ?Web quality with OpquastSEO-related Opquast rulesConclusionIntroduction ↑Colleagues sometimes ask me: “Hey Alex, I would like to learn a bit about search engine optimisation (SEO) but I don't really know where to start. Do you have tips for me?”. Well, it's not surprising: like accessibility, sustainability and environment, or performance, SEO is a big topic.I usually answer: “It's awesome that you want to dig into this. SEO is also a significant part of UX, and more globally of web quality assurance. Listen, I'm not a SEO expert but I know a solid start: these are the Opquast rules. If you apply them carefully, you will do better than most other websites.”In this article, first I would like to describe shortly what SEO means, then present what Opquast is, and finally explain the benefits of some Opquast's SEO rules.Disclaimer: Opquast is a society. I am neither an employee nor an affiliate.What is SEO ? ↑SEO stands for Search Engine Optimisation. It com

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 have bought Twitter! As a former developer and current accessibility consultant, it is my sincere hope that by reading this article, developers unfamiliar with or unsure about this topic will have a better understanding of the differences between aria-label, aria-labelledby, and aria-describedby.Semantic HTML elements convey meaning - role and state - to browsers and assistive technologies. Whenever you can use an appropriate native HTML element, you should do so. For example, using a <button>, instead of using a generic element such as a <div> and then adding ARIA roles and states and properties and JavaScript functions and CSS to make it look and behave like a button, is a much better way to code. In fact, the First Rule of ARIA is: Use HTML. (Credit for that paraphrase.)When should I use ARIA to label something?Using this priority of met

Getting performance data from real users can transform assumptions about how a user experiences a site into objective, actionable information.In the last two years, there has been increased awareness of web performance thanks to Google's Core Web Vitals (CWV) metrics. These metrics are great and have nearly universal application, but it can also be helpful to add information specific to your site. Fortunately, it's easier than ever to collect this data thanks to features that have made their way into browsers in recent years.Critical LandmarksUsing the PerformanceObserver API, you can get performance information about page navigation, in-page landmarks like how long it takes to parse the HTML, how long it takes to download and render specific resources, and it's even possible to measure server performance with the Server-Timing header.It's possible you have a dedicated Real User Monitoring (RUM) vendor that takes care of logging this information for you, but if not, most site analytics

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 horizontal bar. Browsers provide user-agent styles, but the <meter> element can also be styled.<meter min="10" max="200" value="130"></meter>The example above in Safari, Chrome and Firefox on MacOS.<meter> is sometimes confused with the <progress> element as they are visually similar, but <meter> represents a current value in a known range, while <progress> represents something that is in progress, like a file upload.The definition found in the HTML spec includes some examples of potential uses.The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.The spec also states that it should not represent an arbitrary range, meaning there should be a known maximum value.Attributes

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 and, of course, also help people that use assistive technologies navigate through your page. Somewhat less known are landmark elements. These are elements that are used to define the structure of your entire HTML and you probably know some of them already: nav, main and footer are all landmark elements (well, most of the time. We'll get to that.)Many of these elements were only introduced with HTML5 (compared to the headers that have been with us for as long as HTML existed) so if you haven't used them extensively yet, that's not that unusual. Let's figure out what they are and where you can (and can not) use them.Landmarks 101When you look up landmark elements, you'll find that they also go by another name: sectioning elements. You can take that quite literally: they section off different parts of your page into unique semantic blocks.Kno

At some point of developing a website, there might come a time where we need to progressively enhance using JavaScript. There are few different options of how you add JavaScript. Firstly, we can write our own script using vanilla JS only, and self host the JavaScript file. However, often we find ourselves needing to use a JavaScript framework or library to make our life a little easier. We can definitely download all the JavaScript framework and libraries we are using and self host them in our server, but most framework websites recommend using a CDN.CDNs for JavaScript frameworks and librariesCDN or Content Delivery Networks are a group of servers which stores duplicate copies of data and serves them to the user from the server closest to them to improve performance. CDNs are often used to serve static files like CSS and JS files by frameworks and libraries. Developers used CDNs for serving JS files not only because CDNs are usually faster, but also since a lot of commonly used framew

In web development, writing semantic HTML is important for accessibility, and also provides some nice side effects such as supporting browser "reader" modes, SEO, graceful degradation, and exporting.Implementing semantic HTML will also greatly reduce the need for ARIA (Accessible Rich Internet Applications). ARIA is a large set of HTML attributes to help accessibility for users of assistive technology, namely screen readers, by better supporting semantics not provided or not supported well via HTML.ARIA usage certainly has its place. But overall, reduced usage of ARIA will, ironically, greatly increase accessibility. This is due to several reasons including:ARIA is very often implemented incorrectly. This is well known in the industry, but for data, reference the WebAIM Million report which states “Home pages with ARIA present averaged 70% more detected errors than those without ARIA”.ARIA may not be supported well (even when implemented correctly) by the browser and/or screen reader,

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 glory. Your mission now is to transform it into code to present a prototype as soon as possible, starting with nothing but an empty text file.Facts, questions and the truthThis task comes with a few challenges and most of the time there’s no single correct way to do it. In this article, I’m going to describe how I personally approach these tasks.Our goal for today is to build an HTML prototype for an online newspaper homepage, “The Weekly Prophet”. The only information we have is the following wireframe:There’s a lot to unpack here.The first important fact is that in HTML there’s no such thing as placing elements on a page next to each other (we need CSS—Cascading Style Sheets—for that). There’s just one element at a time. When there’s no one-column layout for small screen sizes provided by a designer, we need to define an order of elemen

Bad code<button role="link" title="Name of website" tabindex="0"> <img alt="Name of website" src="logo.jpg" title="Name of website"></button>Issues and how to fix themWrong usage of the button element. There’s an element for linking to external sites (<a>). Do not change native semantics, unless you really have to.It’s possible to link to pages without JavaScript.The title attribute is redundant.The tabindex attribute is redundant. A button doesn’t need tabindex, it’s focusable by default.Good code<a href="https://"> <img alt="Name of website" src="logo.jpg"></a>

Bad code<div tabindex="-1"> <div role="button"> <svg width="28" height="24"> … </svg> </div></div>Issues and how to fix themSetting button semantics explicitly using the role attribute isn’t necessary, there’s an element for that (button).You don’t need the tabindex attribute if you use a button. HTML buttons are focusable by default.A click event on a div triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.There’s no text alternative for the icon.Good codeUnfortunately, there’s no native way of hiding content only visually.The .sr-only class makes sure that content is visually hidden but still accessible to screen reader users..sr-only { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px;}<button> <span class="sr-only">Send</span> <svg width="28" height="24" aria-hidden="true"> … </svg></button>

Bad code<img src="/images/edit.gif" onclick="openEditDialog(123)"><img src="/images/delete.gif" onclick="openDeleteDialog(123)">Issues and how to fix themThe purpose of the img element is to display images, not to execute JavaScript.A click event on a img triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.There’s no text alternative for the image. Screen readers may announce the filename instead.Good codeSolution #1: Use buttons and add alt attribute to images<button onclick="openEditDialog(123)"> <img src="/images/edit.gif" alt="Edit product XY"></button><button onclick="openDeleteDialog(123)"> <img src="/images/delete.gif" alt="Delete product XY"></button>Solution #2: Use buttons, add text content and hide imagesUnfortunately, there’s no native way of hiding content only visually.The .sr-only class makes sure that content is visually hidden but still accessible to screen reader users..sr-only { position: absolute; white-

Bad code<a href="https://example.com"> <button>Example</button></a>Issues and how to fix themBy nesting a button inside of a link, you’re sending two messages: this is a button, but also this is a link.If you’re not sure when to use <a> or <button>, watch The Links vs. Buttons Showdown by Marcy Sutton.Good code.button { /* use CSS to apply button-like styles to the link */}<a href="https://example.com" class="button">Example</a>

Bad code<a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Register&nbsp;&nbsp; </a>Issues and how to fix themIt’s a link to a form at the same page that looks like a button.By adding role="button" to a link, you’re telling that it’s a button, though it acts like a link. Do not change native semantics, unless you really have to.aria-haspopup="true" suggests that there’s a popup, but it doesn’t exist.Padding should be added via CSS, not &nbsp;.Good code.button { /* use CSS to apply button-like styles to the link */}<a class="button" href="#form"> Register </a>

Bad code<a href="javascript:void(1)" onClick='window.location="index.html"'>Link</a>Issues and how to fix themLinks won't work, if JavaScript fails to load or execute.You don’t need JavaScript to link to other pages, you can use the href attribute for that. Browser support is pretty good (100% of all browsers).The context menu on right click is different, "Open in new tab/window" is not available.CMD + Click to open a link in the background won't work.Good code<a href="index.html">Link</a>

Bad code <table> <tr id="body"> <td id="body"> <table id="body"> <tr id="body_row"> <td id="body_left">…</td> <td id="body_middle">…</td> <td id="body_right">…</td> </tr> </table> </td> </tr> </table>Issues and how to fix themAn id should be unique no matter on which tag it’s added. Also this code uses a table-based layout (and yeah, it’s on a live production site still running, redesigned in 2016). Avoid using tables for layout reasons only, because table elements have a semantic meaning. Using them could make your document more confusing for some people.Replace the current markup with semantic HTML5 tags. This reduces the number of tags and avoids the table-based layout.Style the new elements by using Flexbox or CSS Grid.For the ID values, more semantic terms should be used.Good code <main id="body"> <aside id="secondary_content"> </aside> <article id="primary_content"> </article> <aside id="tertiary_content"> </aside> </main>

Bad code<a href="#" onclick="modal.open()">Login</a>Issues and how to fix themIf the a element has an href attribute, it represents a link to another resource like a page or a PDF document.The purpose of the element in this example is to trigger an action on the same page with JavaScript. The button element with the type button is more suitable because it has no default behaviour and it’s designed to trigger actions on user input.Browsers and devices that do not support JavaScript will not be able to access the content in the modal.Good codeSolution #1: Use a button element<button type="button" onclick="modal.open()">Login</button>Since the only purpose of this element is to trigger an action on the same page instead of navigation; the <button></button> element is the semantically correct element to use.Solution #2: Add a valid href value to the login form<a href="/login" onclick="modal.open()">Login</a>Another solution is to add a href value to a location where the same actions as the

Bad code<body> <header>…</header> <main>…</main> <footer>…</footer> <div class="cookie_consent modal"> <p>We use cookies…</p> <div class="cookie_consent__close"> <i class="fa fa-times"></i> </div> <div class="cookie_consent__ok">OK</div> </div></body>Issues and how to fix themThe modal is not the first item on the page and focus is not on the modal when the page loads. Keyboard users have to tab through all items on the page to access the cookie consent window.A div isn’t keyboard focusable.Content inside these divs is semantically just text. Assistive technology doesn’t know that these fake buttons are actually buttons.A click event on a div triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.There’s no text alternative for the icon.Font Awesome advises to hide icons semantically by settings aria-hidden="true" on the <i> element.Font Awesome adds Unicode content via the ::before pseudo element. Assistive technology may ann

Bad code<section id="page-top"> <section data-section-id="page-top" style="display: none;"></section></section><main> <section id="main-content"> <header id="main-header"> <h1>...</h1> <section class="container-fluid"> <section class="row"> <article class="content col-sm-12"> <section class="content-inner"> <div class="content__body"> <article class="slider"> <section class="slide"> … </section> </article> </div> </section> </article> </section> </section> </header> </section></main>Issues and how to fix themSectioning content (<article>, <aside>, <nav>, <section>) is content that potentially has a heading and is appropriate only if the element’s contents would be listed explicitly in the document’s outline.It’s OK to nest sectioning content, but it only makes sense if the contents of the inner elements are related to the contents of the outer element.In this specific example, the sectioning elements are used for styling purposes only. They must not convey any semantic meaning, most of

Bad code<span class="nav-toggle"> ☰ Menu </span>Issues and how to fix themA screen reader may announce this as trigram for heaven menu, because ☰ is the unicode character for the trigram for heaven.The purpose of the icon is decorative, it should be hidden from screen readers. Consider adding decorative images using background properties in CSS.A click event on a span triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.A span isn’t keyboard focusable, but this element must be focusable, because it’s used for opening and closing the main navigation.aria-expanded must be added to indicate wheather the main navigation is collapsed or not.Good code<button class="nav-toggle" aria-expanded="false"> <span aria-hidden="true">☰</span> Menu</button>Fun factThe Bagua or Pa Kua are eight symbols used in Taoist cosmology to represent the fundamental principles of reality, seen as a range of eight interrelated concepts. Each consists of

Bad code<form role="form"> <h2>Poll title</h2> <div id="pollQuestion">Is this accessible?</div> <div name="pollGroup" role="radiogroup"> <div role="radiogroup" aria-label="Poll title"> <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]"> <span>Yes</span> <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]"> <span>No</span> <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]"> <span>Maybe</span> <input type="radio" name="poll" aria-labelledby="pollQuestion" value="[object Object]"> <span>Can you repeat the question?</span> </div> <button type="submit">Vote</button> </div></form>Issues and how to fix themSetting form semantics explicitly using the role attribute isn’t necessary, the semantics are implied in the element.A form is a landmark. An aria-labelledby referring to the h2 gives the landmark an accessible name. This makes it more useful for navigation.Setting role="radiogroup" isn

Bad code<input type="checkbox" id="accept" required><label for="accept"> <a href="/legal"> I accept the confidentiality policy and data… </a></label>Issues and how to fix themIt’s bad practice to nest elements with activation behavior (e.g. click).Users don’t expect a new page to open when they click a label.The ability to click a label provides usability and accessibility benefits (larger hit area).Place links outside the label element.Good code<input type="checkbox" id="accept" required><label for="accept"> I accept the confidentiality policy and data… </label>(read <a href="/legal">Terms and conditions</a>)Resources4.10.4. The label elementBe Wary of Nesting Roles by Adrian Roselli

Bad code<a type="button" class="button" href="/signup" tabindex="-1">Sign up</a>Issues and how to fix themThe type attribute has no effect on the semantics of an <a> element.An anchor may have the type attribute, but the value should be a valid MIME type. Browsers may consider it, but it’s purely advisory.If the presence of the href attribute makes sense, you most definitely want to use a proper link (<a>) and not a button, no matter how the element looks like in your design.A negative tabindex value means that the element is not accessible via keyboard, but it could be focused with Javascript.Do not change native semantics, unless you really have to.If you need a button, use the <button> element.Good code<a href="/signup" class="button">Sign up</a>Resources4.8.2. Links created by a and area elements4.5.1. The a element

Bad codeLetters are wrapped in divs to animate each letter with JavaScript.<h3> <div style="display: block; text-align: start; position: relative;" class="title"> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">H</div> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">e</div> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">a</div> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">d</div> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class="char">i</div> <div style="position: relative; display: inline-block; transform: rotateX(90deg); transform-origin: 50% 50% -30.8917px;" class=

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: The Last Engine"> <div> <img alt="Browser Wars: The Last Engine" src="thumbnail.jpg"> </div> </div></a>Issues and how to fix themIf the <a> element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed.HTML spec)If you’re adding a click event to a placeholder link, you probably don’t want to use a placeholder link, but an actual link with an href attribute or a <button>, depending on what's happening on click.Placeholder links aren't focusable. tabindex makes them focusable, but the attribute is another indicator that a proper link would be a better choice here.alt is not allowed on div elements and it has no effect on their semantic meaning.Avoid aria attributes when possible. The aria-label attribute on the div is redundant, because the img already has an accessible name (the value

Context: A list of linked cards, each with heading, image, and teaser text.Bad code<section> <section> <h2>Overview</h2> <figure class="card" data-url="image1.html" style="background: url(image1.jpg)"> <figcaption> <h4>My heading</h4> <article>Teasertext...</article> </figcaption> </figure> <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure> </section></section>Issues and how to fix themYou might not need (so many) <section>s. Read Why You Should Choose HTML5 <article> Over <section> by Bruce Lawson for more details.Heading levels shouldn’t be skipped. Screen reader users rely on a sound document outline and hierarchy. It helps with navigation and understanding how the page is structured.The figure element represents content, optionally with a caption, that is self-contained, but in this example there’s no content, only a caption.The image in a card usually isn’t decorative, it conveys information. It should be part of the HTML document and not

Context: The main navigation of a personal website.Bad code<div class="nav"> <div> <div>about</div> <div>thoughts</div> </div></div>Issues and how to fix themThe <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.Use <nav> for the main navigation, it represents a landmark with links to external or internal pages. Screen reader users may use shortcuts to access the navigation directly or skip it.Use <ul> or <ol> to structure related links semantically and visually. Screen readers usually announce the number of items in a list.If the order of items in the navigation matters, use <ol>, otherwise <ul>.A click event on a div triggers only on click. Use <a href=""> to link to other pages. It’s (more) accessible to keyboard, screen reader, and mouse users than a fake JavaScript-only link.Good code<nav> <ul class="nav"> <li> <a href="/about">about</a> </li> <li> <a href="/t

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> <div> <div> <i> <h3 class="message is-success"> It‘s <a>available</a>. </h3> </i> </div> </div> </h3></div>Issues and how to fix themh1 – h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.1All div elements in this specific example are superfluous. It’s likely that they only exist because a front-end framework adds them by default. Use Fragments in React or similar techniques in other frameworks to avoid unnecessary markup.Try to avoid excessive DOM sizes. Too many DOM nodes and nested DOM elements may harm your page performance.A large DOM tree results in a large accessibility tree, which may have a bad impact on the performance of assistive technology.Only phrasing content is allowed as children and descendants of h1 – h6 elements. (h3

This first HTMHell special inspects one of the most complicated and most controversial patterns in front-end development:🔥 the close button. 🔥In modals, ads, and other overlays you often find a button with a close symbol that allows users, or at least some of them, to close the overlay. This functionality is often limited to mouse users, because most implementations of close buttons suck.After less than 2 hours of research, HTMHell presents a collection of 11 different bad practices.Pattern 1: div and background image<div class="close"></div>.close::after { background: url("close.png"); content: "";}Issues and how to fix themThe <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.A click event on a div triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.A div isn’t keyboard focusable.There’s no text alt...

Context: A button that expands and collapses a section of text.Bad code<button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true"> <legend> Industries Served </legend></button>Issues and how to fix themlegend is not allowed as a child of any other element than fieldset.HTML spec for legend)You don’t need the tabindex attribute if you use a button. HTML buttons are focusable by default.href attribute is not allowed on the button element.HTML spec for button)Good code<button class="panel-heading" aria-expanded="true"> Industries Served</button>ResourcesThe legend elementThe button element

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" data-url="index.php"> About us</div>…or any other variation of this pattern where an element other than <a> is used to link to a page.Issues and how to fix themThe <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.A click event on a div triggers only on click. A click event on an a triggers on click and if the user presses the Enter key.A div isn’t keyboard focusable.The context menu on right click doesn’t provide options like “Open in new tab/window” or “Bookmark this link”.By default, screen readers just announce the text in a div (e.g. “about us”), in a proper link (<a>) a screen reader announces the text and the role (e.g. “about us, link”).Attributes like aria-label might not work (properly) on div elements.Screen reader

Bad code<article> <div> <div class="sr-only">Image</div> <img src="/feature-teaser.png" alt="Feature teaser" /> </div></article><div> <span> <span>Exciting feature!</span> </span> <div> This text describes what the feature does! </div> <a href="/blog/feature"> <span>Read more</span> <svg viewBox="0 0 9 12" xmlns="http://www.w3.org/2000/svg"> <path d="M.84 10.59L5.42 6 .84 1.41 2.25 0l6 6-6 6z"></path> </svg> </a></div>Issues and how to fix themThe example code uses an <article>. This element is meant for standalone content that can be re-used by itself. If there is anything reusable here, it is the entire “card”. More appropriate is a <section>.There is a piece of text before the image, with the text image. This seems to be some sort of definition of the role of the element following. When using proper semantic HTML, the HTML-elements already communicate their semantics. Adding text is superfluous and confusing.The alt-attribute states that image is a teaser for the feature mentioned b

Bad code<input type="text" placeholder="First name">Issues and how to fix themEvery form input element needs a label. When screen reader users access a form field, the label is announced with the field type (e.g. first name, edit text). If it’s missing, users might not know what they’re supposed to fill in (e.g. edit text).Some screen readers fall back to placeholder as the label, but it’s not recommended to rely on it.By default, placeholder text is displayed in a light grey color with low contrast. It might not be readable for people with low vision or under certain conditions, like strong sunlight.It’s possible to increase contrast by using the ::placeholder pseudo element, but if contrast is too high, users may mistake a placeholder for data that was automatically filled in.Using and displaying a <label> increases the target size of the form field which can be of great help, especially on touch devices.If placeholder functions as the only label, the label disappears when the user t

Note: We've removed most classes to improve readability.Bad code<a tabindex="0" type="button" href="/signup" role="link"> <span class="focus" tabindex="-1"></span> <span> <span> <span>Sign up</span> <i class="icon icon-external-link" aria-hidden="true" role="img"></i> </span> </span></a>Issues and how to fix themYou don’t need the tabindex attribute if you use an a tag. HTML hyperlinks are focusable by default.The type attribute on a tag is used to hint at the linked URL’s format with a MIME type, eg: type="image/svg+xml"Using role=link on an a tag is not needed since you already get that behaviour for free by using a standard hyperlink (<a href="">).A negative tabindex value means that the element is not accessible via keyboard, but it could be focused with JavascriptAn additional span to handle focus isn’t necessary, a can do that by itself. 💪🏻The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a di...

The second HTMHell special focuses on another highly controversial pattern in front-end development:🔥 the burger button. 🔥The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.Pattern 1: the unsemantic burger<div class="burger"> <span></span> <span></span> <span></span></div>.burger { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 20px; cursor: pointer;}.burger span { height: 1px; display: block; background: #000;}Issues and how to fix themThe <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibi...

Context: Visually a list of links.Bad code<h6>Popular Cities</h6><div> <h6 class="footerLinks">Amsterdam</h6> <h6 class="footerLinks">Rotterdam</h6> <h6 class="footerLinks">Utrecht</h6> <h6 class="footerLinks">Den Haag</h6> <h6 class="footerLinks">Eindhoven</h6></div>Issues and how to fix themUse headings (<h1>-<h6>) to structure the page, don’t use heading elements arbitrarily or only to comply with visual requirements.By default, a click event on an <h6> triggers only on click. A click event on an a triggers on click and if the user presses the Enter key.An <h6> isn’t keyboard focusable.If your content it so comprehensive and deeply structured that you need levels as deep as <h5> and <h6> in order to describe the structure, consider splitting your large page into multiple smaller pages.The <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility.If you’re listing items

Bad code<h1 aria-busy="true" aria-live="polite" role="alert" class="sr-only"> Done</h1>Issues and how to fix themThe element is used for communicating status updates, not to structure the page. A div with a role of status or alert is more suitable than a h1.The heading is semantically not a heading anymore, but an alert container. This can be confusing, NVDA, for example, announces “alert busy Done level 1”. Do not change native semantics, unless you really have to.aria-live="polite" turns the element explicitly into a polite live region. This behavior is overwritten by role="alert" which turns it implicitly into an assertive live region.For frequent updates it might be better to use a polite (role="status") and a not an assertive (role="alert") live region.aria-busy indicates whether an element, and its subtree, are currently being updated. The text of the live region “Done” indicates that all the necessary updates have finished. If that's the case, aria-busy should be removed or set

Bad code<section> <aside> <div> <section> <header> <a href="/"> <img src="logo.svg" alt="Logo"> </a> </header> <main> <a href="/services">Services</a> <a href="/products">Products</a> <a href="/aboutus">Aboutus</a> </main> <footer></footer> </section> </div> </aside> <section> <footer></footer> <main> <h1>Welcome to Hell</h1> </main> <footer></footer> </section></section>Issues and how to fix themUse the <section> element only to mark up a grouping of related content, typically introduced with a heading. Learn more about sections in Issue #8 - the section element.Use the <aside> element only for content that is tangentially related to the main content and not for important parts of the page or site.Use the <nav> elements for important navigational groupings of links. Learn more about landmarks in Issue #16 - Landmarks.If a link contains an image and no text, the alt attribute of the image serves as the link text. In such a case it might make sense to use the attribute not to describe t

Bad code<p> • HTML <br> • CSS <br> • JavaScript</p>Issues and how to fix themUse <p> for paragraphs, not lists. The standard way for creating basic lists is <ul> (when the order doesn't matter) or <ol> (when the order matters), and <li> for each item.The “list” won't be announced as a list when using a screen reader.<ul> and <ol> provide useful semantic information. What and how assistive technology announces information differs, but:screen readers might announce it as a “list with items”screen readers might announce the number of items in the list, e.g. “list with 3 items”screen readers might announce the bullet or number of each itemscreen readers might announce when you enter or leave a listScreen reader users may use shortcuts to jump from list to list on a page<ul> and <ol> provide a selector for styling in CSSWhen copying the fake list, all the bullets will go along with itYou can turn the bullet into a fire emoji using ::marker 🔥Good code<ul> <li>HTML</li> <li>CSS</li> <li>Java...

Bad code <a href="/contact" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="Ifyou find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309"> Contact </a> <a href="/login" aria-label="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309" title="If you find that you need additional assistance in navigating or accessing the content of this website, please call our customer service toll free number 1-800-666-8654309"> Login </a>Issues and how to fix themaria-label, aria-labelledby, etc. must not be misused for dumping contact information or other unrelated content.Text in a link must describe the purpose or the target of the

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="15px" width="15px" fill="#000" name="close"> <title>Close dialog</title> <path d="…"> </path> </svg></button>Issues and how to fix themEither turn the <svg> into a semantic element (role="img") or exclude it from the accessibility tree (aria-hidden="true"). Doing both makes no sense.The button has no accessible name (a text alternative). The title element in the svg would serve as the accessible name, but aria-hidden="true" makes the whole SVG inaccessible to assistive technology.Even without aria-hidden="true", some screen reader/browser combinations might not recognise the <title> element. Label the <svg> using aria-labelledby or aria-label.The role=button attribute and value for the button is redundant. Its implicit default role is “button”.There's no display attribute. If you need custom attributes, use the data- prefix.The name attribute i

The good intentions were there but in the HTML and Accessibility world, less is sometimes more.Bad code<label for="textinput">First name</label><input type="text" id="textinput" aria-label="First name" placeholder="First name" title="First name">Issues and how to fix themThe aria-label, placeholder, and title attributes all provide the same informaton ("First name"), leading to the screenreader reading the same text multiple times.The aria-label is unnecessary since the input is already correctly labeled by the <label> element. <label> elements should be preferred to aria-label since they are also visible to sighted users.The title attribute is not needed here, as the label and placeholder already convey the necessary information. Using title in this context adds unnecessary complexity.The placeholder text should provide a hint / example to the user what kind of input is expected, it should not act as a label or contain the same content.Good code<label for="textinput">First name</label

Bad code<button type="button" onclick="window.open('https://example.com/other-page')">Link target description</button>Issues and how to fix themA button opening a link will be unexpected behavior for screen reader users. No matter how it is styled.Links disguised as buttons won’t show up in the link list of a site in assistive technologies.Use links for navigation to other pages or sections, and buttons for actions performed on the current page or within the application.Good code<a href="https://example.com/other-page">Link target description</a>Resources<a> on MDN<button> on MDNButtons vs. Links by Eric Eggert