HTMHell Tips & Tricks

Download links

2021-05-19T00:00:00Z

You can turn a hyperlink into a download link by adding the download attribute. Instead of navigating to the document, browsers prompt users to save the file to their disc.

<a href="myfile_hash5474n.pdf" download>
  Annual Report (666 KB) 
</a>

Additionally, you can specify a value for the attribute which will be used as the filename for the downloaded file.

<a href="myfile_hash5474n.pdf" download="report.pdf">
  Annual Report (666 KB)
</a>

You can find more tips on htmhell.dev

iframe accessibility

2021-06-04T00:00:00Z

iframes should be named, if they contain meaningful content. You can define an accessible name for an iframe using the title attribute. If it’s missing, screen readers might fall back to the value of the name or src attribute, which makes it hard or impossible for users to understand the purpose of the iframe.

<iframe title="Bob Dylan - Visions Of Johanna (Live 1966) YouTube" width="560" height="315" src="https://www.youtube.com/embed/uW9_2r3raHE"></iframe>

If you include an iframe that’s not visible to the user because it’s not meant to be interacted with, hide it from screen reader and keyboard users, too.

<iframe title="Intentionally hidden" aria-hidden="true" tabindex="-1" src="https://www.mythirdpartyscriptxy.com"></iframe>

You can find exemplary use cases for hidden iframes that run in the background in this thread on Twitter.

You can find more tips on htmhell.dev

gifs and reduced motion

2021-06-11T00:00:00Z

You can show animated gifs only if users don’t prefer reduced motion and fall back to jpg, using the picture element in combination with the prefers-reduced-motion media feature.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Animations on the web are sometimes annoying, but they may also cause nausea, dizziness, and headaches in some users. For people with vestibular disorders it may even cause pain and make them feel so bad that they have to stop using the computer, needing time to recover. The negative side effects of animations can be terrible, that's why we should serve animation only if users prefer animation or have no preference.

In most operating systems users can decide to reduce motion in browsers and apps and we can react to that by querying the prefers-reduced-motion media feature.

We start with a jpg in case the user’s operating system does not provide such an option.

<picture>
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Then we replace the jpg with a gif only if the user has no preference for reduced motion.

<picture>
  <source srcset="pooh666.gif" media="(prefers-reduced-motion: no-preference)">
  <img src="pooh666.jpg" alt="Pooh Bear doing knee bends in front of a mirror. Instead of the mirror glass, there’s an illustration of Satan. It looks like Pooh is worshipping the devil.">
</picture>

Depending on your preference you should either see a jpg or a gif of Pooh Bear worshipping the lord of HTMHell.

Animation settings in different operating systems

macOS: System Preferences - Accessibility - Display - Reduce Motion
iOS: Settings - General - Accessibility - Reduce Motion
Android: Settings - Accessibility features - Accessibility - Advanced Visual Effects
Windows 10: Settings - Ease of Access - Display - Show animations in Windows.

You can find more tips on htmhell.dev

page descriptions

2021-06-18T00:00:00Z

You can describe web pages using meta tags. This is important for 3rd party tools, websites, and apps. Search engines may use the description in their search results and social media sites in previews when users post a link.

<meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">

General

Page descriptions are really useful because they can help users understand what a page is about before they click a link. Here are a few things to consider when you describe a page:

Make sure your descriptions are concise and descriptive.
Write a unique description for each page and try to include relevant keywords.
The length of a description should be somewhere between 50 and ~155 characters (this is where Google truncates the text in search result pages).
Search engines usually use the description from the meta tag, but they might not if they think other content on the page is more suitable.
Descriptions don't factor into ranking algorithms for web search, but can impact a page's click-through-rate (CTR) which can positively impact a page's ability to rank.

Social Media

It’s advised to use the description and og:description meta tag. Facebook, Pinterest and LinkedIn use the description meta tag for their URL previews, if you don't provide a og:description. Twitter ignores the description meta tag and only displays the og:description, but it offers a dedicated twitter:description variation.

<!-- Search engines + Fallback for Facebook, Pinterest and LinkedIn -->
<meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<!-- Social media sites Like Twitter, Pinterest, Facebook or LinkedIn -->
<meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<!-- Specific Twitter description -->
<meta property="twitter:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">

You can test how your page descriptions look like using these scrapers:

These scrapers work for me most of the time, but in a discussion on Twitter Kilian Valkhof pointed out that the official scrapers are outdated, so make sure you test the result properly.

You can find more tips on htmhell.dev

the current page

2021-06-25T00:00:00Z

Use the aria-current attribute to highlight the current page in a navigation, both visually and semantically.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" aria-current="page">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

If you use a class like .active to highlight the current page within a set of links, only sighted users will be hinted at which page is the current page.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" class="active">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.active {
  font-weight: bold;
}

Instead of a simple class, you can use the aria-current attribute with the page value. The attribute communicates the active page to assistive technology and you can use it to select the link in CSS.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us" aria-current="page">About us</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

[aria-current="page"] {
  font-weight: bold;
}

Here's a quick demo of this pattern used with TalkBack on Android. (Heads up! The recorded audio is pretty loud, sorry.)

Something went wrong, please visit htmhell.dev/tips/the-current-page to view this video.

There are more usages for the aria-current attribute. Check out the links below to learn more.

You can find more tips on htmhell.dev

autocompleting password fields

2021-07-02T00:00:00Z

You can help password managers and browsers (pre)fill password fields by using the autocomplete attribute,...and by doing other stuff.

<label for="new-password">New Password</label>
<input type="password" autocomplete="new-password" id="new-password" name="new-password" />

Let's start with the other stuff. When I created a demo for this post, I wanted to show you that you can use autocomplete="new-password" to instruct browsers to offer users auto-generated passwords, for example in a sign-up form.

Firefox recognizes this password input field as a field for a new password and offers to fill it with a random string.

In order to prove that I created a simple form without the attribute.

<form>
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" />
  </div>  

  <div>
    <label for="np">New Password</label>
    <input type="password" id="np" name="np" />
  </div>
</form>

The thing is, Firefox suggested the auto-generated password, anyway. I was confused. After some testing and research, I learned that browsers take all kinds of things into consideration when figuring out what the purpose of an input field is. In this specific example, it was the fact that the label included the words “new password”. Mind blown!

I translated the labels to German and Firefox didn't suggest the password anymore. Ha! Gotcha, Firefox, and that only took me 2 hours to figure out.

<div>
  <label for="username">Benutzername</label>
  <input type="text" id="username" name="username" />
</div>  

<div>
  <label for="np">Neues Passwort</label>
  <input type="password" id="np" name="np" />
</div>

You might have noticed that the id and name attributes are short and hard to read. That's because browsers take these attributes into consideration, as well. Just naming the id or name “new-password” or even just “new-pwd” brings the auto-generated password autocomplete back.

<p>
  <label for="new-pwd">Neues Passwort</label>
  <input type="password" id="new-pwd" name="np" />
</p>

You can see that in action here auto-complete password: no attribute but id and here auto-complete password: no attribute but name.

Of course, that is a very reduced test case, things are usually much more complicated. I only tested this in one browser and only with the built-in password manager. We shouldn't rely on browsers algorithms, but help them figure out what the purpose of our input fields is.

We should:

Use standard HTML form elements, attributes and practices (form, label, input, etc.)
Use the correct type attribute for each input field
Make sure that we don't generate ids and names randomly
Use common values or values that are similiar to the value of the autocomplete attribute for the name and id attributes
Add the autocomplete attribute and use the values current-password for the current password and new-password for new passwords
Use different name and id values in sign-up and sign-in forms, for the form element itself, as well as any input, select and textarea elements
Test thoroughly in different browsers with different password managers.

<form>
  <p>
    <label for="username">Username</label>
    <input type="text" id="username" name="username" autocomplete="username" />
  </p>  

  <p>
    <label for="new-password">New Password</label>
    <input type="password" id="new-password" name="new-password" autocomplete="new-password" />
  </p>
</form>

That only scratches the surface. There’s so much more to learn about the autocomplete attribute. I can highly recommend these resources:

You can find more tips on htmhell.dev

the document outline

2021-07-09T00:00:00Z

In May to June 2021, WebAIM surveyed preferences of screen reader users and the results show that most respondents find proper heading structures useful.

There are several reasons proper heading structures are important:

The headings on a page form the document outline of a page and the document outline tells third-party tools how your page is structured.
When you validate a page, you can check “Show outline” under “More Options” to list your document outline.
Headings communicate the organization of the content on the page. The <h1> tells users what the page is about. The <h2>s split the page into large sections, <h3> - <h6> structure these larger sections even more.
The proper usage of headings helps search engines understand what your page is about and how it's structured.
Screen reader users can get an overview of the content on a page by only going through the headings. The software usually announces the content of the headings along with their level (1 - 6). That's why it's important to keep a sound document outline. Skipping headings can be confusing and should be avoided where possible.

The VoiceOver rotor on macOS lists all headings on the page with their level and allows users to jump to a selected heading.
Screen readers allow navigation by heading. That means that you can not just go through the headings on a page, but you can select them and jump directly to the position of the selected heading in the DOM and read the site starting from there.
Headings also help sighted users understand how a page is structured and how different sections on a page relate to each other.

An advice I like to give my students is to imagine that they're writing a paper for university when they're creating the outline for a web page. A paper always needs a title, and it has just one title (<h1>). There are usually several main chapters in a paper (<h2>) and sometimes there are also subchapters (<h3> - <h6>).

It's much better to imagine how the page should be structured than to look at a design and only follow visual cues. Sometimes it makes sense to add headings to the page that aren't visible in the design in order to create a sound document outline. You can hide these headings accessibly by using a combination of properties.

<h2 class="sr-only">I'm visually hidden</h2>

.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;
}

You can find more tips on htmhell.dev

the avif image format

2021-07-16T00:00:00Z

avif is a fairly new image format and for me it's one of the most exciting recent additions to web development. Why? On a website I recently built, I could reduce the total image size from 1.72MB to 172KB just by converting images to avif.

That sounds too good to be true, so let me start with the bad news: Chrome, Chrome for Android, Opera, Opera Mobile and Samsung Internet are the only browsers to support avif at the moment. Firefox supports it behind a flag.

Progressive Enhancement

That’s not terrible, but it isn’t good either. The good news is that we can leverage the built-in progressive enhancement mechanisms of HTML to provide users with fallback image formats in case they’re using a browser that doesn’t suppor avif.

The markup for the screenshot above looks like this:

<picture>
  <source srcset="/images/7_avif-support.avif" type="image/avif">
  <source srcset="/images/7_avif-support.webp" type="image/webp">
  <img src="/images/7_avif-support.jpg" width="740" height="251" alt="caniuse.com browser support chart for the avif image format" loading="lazy">
</picture>

We provide browsers with a set of images. The browser goes through this set and stops at the first format it can interpret. Chrome stops at the first <source> element because it supports the avif format, Edge skips the first line and uses the webp image in the second line and IE skips both lines and uses the jpg referenced in the <img> element.

webp Browser Support

You might even stop using jpg altogether because support for the webp image format is pretty good these days. All modern browsers, Safari starting with Big Sur, support it.

<picture>
  <source srcset="/images/7_avif-support.avif" type="image/avif">
  <img src="/images/7_avif-support.webp" width="740" height="251" alt="caniuse.com browser support chart for the avif image format" loading="lazy">
</picture>

Image size comparison

I took a screenshot of the HTMHell website and compressed it with OxiPNG and converted it to webp and avif.

Pretty amazing, if you ask me. :)
There are already several compression tools out there, but I can recommend the Squoosh web app, if you want to get started.

You can find more tips on htmhell.dev

the section element

2021-07-23T00:00:00Z

Use the <section> element to mark up a grouping of related content, typically introduced with a heading.

<h1>Welcome to GOV.UK</h1>
<section>
  <h2>Services and information</h2>
  …
</section>
<section>
  <h2>Departments and policy</h2>
  …
</section>
…

An extract of the gov.uk home page.

It’s not always clear when it’s appropriate to use the <section> element and how to use it properly. I’ve collected some guidelines to help you decide.

Implicit region and exposed role

By default, there’s no difference between a <section> and a <div> regarding the semantic information exposed to assistive technology. For a screen reader, the following two code snippets are practically the same:

<section>
  <h2>Services and information</h2>
  …
</section>

<div>
  <h2>Services and information</h2>
  …
</div>

Regardless of the information exposed to assistive technology, it still makes sense to use <section> when appropriate. It’s a semantic element that allows us to structure a page and maybe style it accordingly using the section tag selector.

`div` vs. `section`

<section> is no replacement for the <div> element and must not be used for styling purposes only.

The class names in the following code snippet and the fact that the sections are nested in a <header> indicate that their only purpose is to split the header into four columns visually. They’re not important sections of the page. (Of course, the search and the navigation are important parts of a page, but <nav> is a landmark on its own and you can turn a search form into a landmark by applying the role="search" attribute and value. )

<header class="site-header">
  <section class="site-header__title"></section>
  <section class="site-header__logo"></section>
  <section class="site-header__search"></section>
  <section class="site-header__nav"></section>
</header>

There’s a useful rule of thumb in the HTML specification:

A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

You can read about the document outline in Issue #6 - the document outline.

region landmark

The <section>’s exposed role and purpose change when you label it using aria-label, aria-labelledby or with the title attribute. Labelling it using these attributes turns it into a landmark, which exposes a different role (region) and gives screen reader users easier access to the section. (Note: Safari doesn’t expose the region role when named via title)

<section aria-labelledby="results">
  <h2 id="results">Results</h2>
  …
</section>

Other landmarks are, for example, <header>, <main> or <footer>, important sections of the page. With that said, only promote a <section> to a landmark if it plays an important part in the current page.

The document outline

If you have multiple <h1> elements in a page and you’ve nested some of them in <section>s, semantically you still have multiple level 1 headings. The font size of an <h1> nested in a <section> may decrease, but the level exposed to assistive technology is still 1. There Is No Document Outline Algorithm.

Conclusion

If you’re not sure whether to use a <section>, it’s probably best to not bother with it. It’s much more important that you create a sound document outline.

PS: Thanks a lot, Scott, for writing Accessibility of the section element which helped me understand the section element much better.

You can find more tips on htmhell.dev

the mailto: URI scheme

2021-07-30T00:00:00Z

You can pre-fill header fields and the message body, when you link to e-mail addresses.

<a href="mailto:manuel@matuzo.at?subject=HTMHell%20issue%209%20was%20fantastic&body=Thanks,%0D%0AManuel!">
  manuel@matuzo.at
</a>

When you click this link, your default e-mail browser should open a new e-mail window with the subject “HTMHell issue 9 was fantastic” and the message “Thanks, Manuel”.

manuel@matuzo.at

When linking to e-mail addresses, you can provide the subject, recipients, and the e-mail body. You do this by writing the e-mail address followed by a ?, the header name, =, and the header value (see example above).

Recipients

There are different ways to link to no, one or multiple e-mail address(es).

mailto: only

If you don't provide a value for mailto:, your default e-mail client opens a new e-mail window with all fields empty.

<a href="mailto:">
  mailto: only
</a>

mailto: only

mailto: only, with single address

The “To:” field filled with a single e-mail address.

<a href="mailto:manuel@matuzo.at">
  mailto: only, with single address
</a>

mailto: only, with single address

mailto: only, with multiple addresses

Separate multiple recipients with a , (comma) and no space between.

<a href="mailto:manuel@matuzo.at,manuel@webclerks.at">
  mailto: only, with multiple addresses
</a>

mailto: only, with multiple addresses

mailto: + `to` parameter

You can also define multiple recipients by using the to parameter.

<a href="mailto:manuel@matuzo.at?to=manuel@webclerks.at,info@webclerks.at">
  mailto: + to parameter
</a>

mailto: + to parameter

mailto: + `cc` parameter

The “To:” and “Cc:” field filled with different e-mail addresses.

<p>
  <a href="mailto:manuel@matuzo.at?cc=manuel@webclerks.at">
    mailto: + cc parameter
  </a>
</p>

mailto: + cc parameter

mailto: + `bcc` parameter

The “To:” and “Bcc:” field filled with different e-mail addresses.

<p>
  <a href="mailto:manuel@matuzo.at?bcc=manuel@webclerks.at">
    mailto: + bcc parameter
  </a>
</p>

mailto: + bcc parameter

Subject

You can define a subject by using the subject parameter. Special characters and spaces must be url encoded.

<p>
  <a href="mailto:manuel@matuzo.at?subject=This%20is%20a%20subject">
    mailto: + subject parameter
  </a>
</p>

mailto: + subject parameter

Body

You can define a message body by using the body parameter.

<p>
  <a href="mailto:manuel@matuzo.at?body=Hi!">
    mailto: + body parameter
  </a>
</p>

mailto: + body parameter

Special characters, line breaks and spaces must be url encoded

<p>
  <a href="mailto:manuel@matuzo.at?body=Hi!%0D%0A%0D%0ATom%20%26%20Jerry%20are%20the%20best!">
    mailto: + body parameter
  </a>
</p>

mailto: + body parameter with special characters and line breaks

It's not possible to add HTML to the message, it's plain text only.

Additional considerdations

Spaces must be encoded with %20.
Line breaks must be encoded with %0D%0A.
To avoid interoperability problems, the same header value shouldn't be used multiple times (e.g. ?to=a@b.at?to=b@c.at)

You can find more tips on htmhell.dev

reversing ordered lists

2021-08-06T00:00:00Z

You can reverse ordered lists by using the reversed attribute.

<ol reversed>
  <li>Curly Sue (1991)</li>
  <li>Uncle Buck (1989)</li>
  <li>She's Having a Baby (1988)</li>
  <li>Planes, Trains & Automobiles (1987)</li>
  <li>Ferris Bueller's Day Off (1986)</li>
  <li>Weird Science (1985)</li>
  <li>The Breakfast Club (1985)</li>
  <li>Sixteen Candles (1984)</li>
</ol>

The reversed attribute numbers items from high to low.

Ordered lists

Curly Sue (1991)
Uncle Buck (1989)
She's Having a Baby (1988)
Planes, Trains & Automobiles (1987)
Ferris Bueller's Day Off (1986)
Weird Science (1985)
The Breakfast Club (1985)
Sixteen Candles (1984)

With the reversed attribute in place, the visual order of list items stays the same, but they are be numbered from high to low.

You can also combine the reversed and start attributes to change the number the list counts down from.

<ol reversed start="5">
  <li>Fifth</li>
  <li>Fourth</li>
  <li>Third</li>
</ol>

Fifth
Fourth
Third

Unordered lists

The attribute has no effect on unordered lists (ul), even if you change the type.

<ul reversed type="1">
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ul>

Third
Second
First

You can find more tips on htmhell.dev

print style sheets

2021-08-15T00:00:00Z

Improve user experience by providing a print style sheet for your website.

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="print.css" media="print">

One of the most exciting and challenging things about web development is that we can’t predict how users will consume content on our pages. There are different devices, browsers, and input modalities and different ways of accessing and reading content. Some people prefer using the navigation, others like using search. Some people prefer reader mode and others like to print pages.

Yes, I know, it’s 2021, but people still have printers and they still like to print pages sometimes. Printed web pages don’t have to be perfect, but we should make sure that the important content on a page is at least accessible when printed on paper. We can do that by providing a print style sheet and including it in HTML.

<link rel="stylesheet" href="print.css" media="print">

The styles in this file only apply if users print the page. Note: The file will be downloaded, regardless, but without delaying page rendering.

Debugging print style sheets

When debugging print style sheets, we don’t have to print pages with every change we make. Browsers can emulate printing.

Firefox

You’ll find an icon that looks like a document or printed page (“Toggle print media simulation for the page”) in the rules panel in Firefox Dev Tools. Clicking it applies the print styles to the page.

Chrome/Edge

In Chrome/Edge DevTools you can click the button with the three dots (“Customize and control DevTools”), select “More tools”, “Rendering” and finally “print” under “Emulate CSS”.

Safari

You’ll find an icon that looks like a printer (“Use default media styles”) in the elements panel in Safari Dev Tools. Clicking it applies the print styles to the page.

You can find more tips on htmhell.dev

crossed out content

2021-09-05T00:00:00Z

HTML provides us with 2 different ways of identifying crossed out text*, the s and the del element.

<h3>Vietnamese Rose Wood Nose Flute</h3>
<p>
  The nose flute is the <del>mots</del> <ins>most</ins> beautiful instrument in the world.
</p>
<p>
  <s>Original price: € 19.99</s>
</p>
<p>
  <strong>Special offer: € 9.99!</strong>
</p>

* “Crossed out” in terms of its semantic meaning, usually but not necessarily displayed as crossed out text.

The `s` element

Use the s element to highlight contents that are no longer accurate or no longer relevant. A typical example is the old and the new price for a product.

<p><s>Original price: € 19.99</s></p>
<p><strong>Special offer: € 9.99!</strong></p>

~~Original price: € 19.99~~

Special offer: € 9.99!

The important bit here is that you don't display the price alone with no text because not all screen readers announce the s element as such.

~~€ 19.99~~

€ 9.99!

<p><s>€ 19.99</s></p>
<p><strong>€ 9.99!</strong></p>

Screen readers might announce this as “19 Euro point 99 9 Euro point 99” which can confuse and lead to false expectations.

If you have to display the price only, hide the text visually.

.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;
}

<p>
  <span class="sr-only">Original price: </span><s>€ 19.99</s>
</p>
<p>
  <span class="sr-only">Special offer</span><strong>€ 9.99!</strong>
</p>

Original price: ~~€ 19.99~~

Special offer€ 9.99!

Steve Faulkner and Adrian Roselli present a different technique involving pseudo elements for making the s element accessible in Short note on making your mark (more accessible) and Tweaking Text Level Styles.

The `del` element

Use the del element to highlight a removal from the document. Use the optional cite attribute to link to more information about the edit and the datetime attribute to add the date (and time) of the edit.

<p>
  The nose flute is the <del datetime="2021-09-03T17:42:30">mots</del> <ins datetime="2021-09-03T17:42:36">most</ins> beautiful instrument in the world.
</p>

The nose flute is the ~~mots~~ most beautiful instrument in the world.

Talkback on Android announces this sentence as “The nose flute is the mots deletion most insertion beautiful instrument in the world“, but VoiceOver and other screen readers announce “The nose flute is the mots most beautiful instrument in the world“. To force screen readers to announce the edit, Adrian and Steve recommend using pseudo elements.

del::before, del::after, 
ins::before, ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion end] ";
}

Using this technique results in VoiceOver announcing “The nose flute is the deletion start mots deletion end insertion start most insertion end beautiful instrument in the world“.

As always, test with your users to find the best solutions for them.

You can find more tips on htmhell.dev

ol vs. ul vs. div

2021-09-10T00:00:00Z

The difference between using ol, ul, and div for a list of items.

<!-- An ordered list -->
<ol>
  <li>Clerks (1994)</li>
  <li>Mallrats (1995)</li>
  <li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

<!-- Just text -->
<div>
  <div>Clerks (1994)</div>
  <div>Mallrats (1995)</div>
  <div>Jay and Silent Bob Strike Back (2001)</div>
</div>

Recently someone on Twitter asked Is semantic HTML really that useful?. That's a great question because most people know how to write HTML but not why. In a series of posts, I'll try to explain why semantic HTML is useful. I want to begin with the ol and ul elements.

Why is the `<ul>` / `<ol>` element useful?

Screen readers might announce it as a list of items
Screen readers might announce the number of items in the list
Screen readers might announce the bullet or number of each item
Screen reader users can use shortcuts to jump from list to list on a page
It groups related content visually
It provides a selector for styling (un)ordered lists in CSS

Unordered lists

We use the <ul> element for identifying an element as a group of n items that thematically belong together, listed in no particular order.

<h3>Some of my favorite movies directed by Kevin Smith</h3>
<ul>
  <li>Jay and Silent Bob Strike Back</li>
  <li>Mallrats</li>
  <li>Clerks</li>
</ul>

Here's what you get when you use NVDA with Firefox:

Something went wrong, please visit htmhell.dev/tips/the-current-page to view this video.

NVDA announces “List with 3 items, Bullet Jay and Silent Bob Strike Back, Bullet Mallrats, Bullet Clerks, Out of list”

Ordered lists

We use the <ol> element for identifying an element as a group of n items that thematically belong together, listed in a particular order.

<h3>Movies directed by Kevin Smith sorted by release date</h3>
<ol>
  <li>Clerks (1994)</li>
  <li>Mallrats (1995)</li>
  <li>Jay and Silent Bob Strike Back (2001)</li>
</ol>

Here's what you get when you use NVDA with Firefox:

Something went wrong, please visit htmhell.dev/tips/the-current-page to view this video.

NVDA announces “List with 3 items, 1 Clerks, 2 Mallrats, 3 Jay and Silent Bob Strike Back, Out of list”

Divs

If we don't use semantic elements, screen readers just announce a bunch of unrelated strings. This might work, too, but sometimes it's better to provide structure and convey more information.

<h3>Movies directed by Kevin Smith sorted by release date</h3>
<div>
  <div>Clerks (1994)</div>
  <div>Mallrats (1995)</div>
  <div>Jay and Silent Bob Strike Back (2001)</div>
</div>

Something went wrong, please visit htmhell.dev/tips/the-current-page to view this video.

NVDA announces “Jay and Silent Bob Strike Back, Mallrats, Clerks”

Styling lists

Things get a little complicated as soon as we style our lists, but that’s something I’ll cover in another issue. In the meantime, check out "Fixing" Lists by Scott O'Hara.

You can find more tips on htmhell.dev

Autocapitalization

2021-09-17T00:00:00Z

Control how virtual keyboards capitalize words and characters by default.

<label for="words">Words</label>
<input type="text" id="words" autocapitalize="words">

Let’s say you have an input field that demands users to enter text in lowercase letters only. If you focus the field, by default the virtual keyboard starts with uppercase letters. You can improve the experience for some users by changing the default auto-capitalization behaviour. By setting autocapitalize to none, virtual keyboards won’t capitalize letters automatically anymore.

<label for="none">All lowercase</label>
<input type="text" id="none" autocapitalize="none">

The attribute is supported by Safari on iOS and Chrome, Edge and Samsung Internet on Android. The attribute is not supported by Firefox on Android and it has no effect on physical keyboards.

Besides none, there are three more allowed values:

none: No autocapitalization should be applied (all letters should default to lowercase).
characters: All letters should default to uppercase.
sentences: The first letter of each sentence should default to a capital letter; all other letters should default to lowercase.
words: The first letter of each word should default to a capital letter; all other letters should default to lowercase.

Source: 6.7.6 Autocapitalization

You can find more tips on htmhell.dev

Spell check

2021-10-08T00:00:00Z

You can disable spell check in input, textarea and contenteditable fields.

<label for="msg">Message</label>
<textarea spellcheck="false" id="msg">HTML is amazzing!</textarea>

spellcheck is an enumerated attribute, so we must provide a value, either “true” or “false”. If no attribute is present, the browser decides whether it checks an element for spelling errors.

<div>
  <label for="msg">Message</label>
  <input value="HTML is amazzing!" id="msg">
</div>

<div>
  <label for="msg2">Message</label>
  <textarea id="msg2">HTML is amazzing!</textarea>
</div>

<div>
  <strong>Message:</strong>
  <div contenteditable>HTML is amazzing!</div>
</div>

If you click one of the fields below (in some browsers you have to type something), you should see a squiggly, dashed or dotted red line indicating that “amazzing” isn’t spelled correctly. Please note: Results may differ depending on your browser and default language. The attribute is merely a hint, browsers are not required to check for spelling errors.

Message

Message:

HTML is amazzing!

We can hint browsers at (not) checking an element for spelling errors.

<div>
  <label for="msg2">Message</label>
  <textarea spellcheck="false" id="msg2">HTML is amazzing!</textarea>
</div>

In the following textarea you shouldn't see a squiggly red line because spellcheck is set to “false”.

Message

In the following input field you should see a squiggly red line because spellcheck is set to true.

Message

You can find more tips on htmhell.dev

Landmarks

2021-10-17T00:00:00Z

HTML allows us to define so-called landmarks, important areas in a page. They can be really helpful, especially for screen reader users.

<body>
  <!-- banner landmark -->
  <header>
    <!-- navigation landmark -->
    <nav>
    </nav>
  </header>
  <!-- main landmark -->
  <main>
    <!-- search landmark -->
    <form role="search">
    </form>
  </main>
  <!-- contentinfo landmark -->
  <footer>
  </footer>
</body>

Benefits

Landmarks help screen reader users with orientation on the page.
Screen reader users may jump from landmark to landmark using keyboard shortcuts.
Screen reader users may list all landmarks on a page and select them.
Sighted users may add a browser extension to jump to landmarks by using keyboard shortcuts.

Landmarks

Landmarks in HTML
Element	ARIA role	Conditions
`header`	banner	Only in context of the body element, not when it's a descendant of `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`.
`nav`	navigation
`main`	main
`section`	region	When it has an accessible name using `aria-labelledby`, `aria-label` or `title`
`form`	form	when it has an accessible name using `aria-labelledby`, `aria-label` or `title`
`form`	search	with `role="search"`
`aside`	complementary
`footer`	contentinfo	Only in context of the body element, not when it's a descendant of `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`.

Tips

Here are some tips for using landmarks:

If there are multiple navigation landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
```
<body>
  <header>
    <nav aria-label="Primary"></nav>
  </header>
  <footer>
    <nav aria-label="Secondary"></nav>
  </footer>
</body>
```
Landmarks listed in VoiceOver on macOS without labels

Landmarks listed in VoiceOver on macOS with labels
Avoid redundancy when labelling navigations. A label like “primary navigation” may be announced as “primary navigation navigation”, just label it “primary".
If a navigation landmark has an identical set of links as another navigation landmark on the page, use the same label for each navigation landmark.
Don't add too many landmarks to a page. Too many landmarks can make navigation more difficult and confusing.
There should be only one banner landmark.
There should be only one contentinfo landmark.
A document must not have more than one <main> element that does not have the hidden attribute specified. Having more than one visible <main> element can confuse users because screen readers don’t announce the number of main elements.
If there are multiple complementary landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
If there are multiple form landmarks on a page, each should have a unique label (aria-label or aria-labelledby).
Generally, you shouldn't need explicit roles on landmarks with implicit roles. For example, <header></header> is sufficient, you don't need <header role="banner"></header>.
Most landmarks are well supported, but support may vary, especially with form landmarks. It’s advised to test your landmarks with different screen readers and browsers. Some screen readers may intentionally not announce certain landmarks. Don’t worry too much about it, as long as you have a sound document outline.

You can find more tips on htmhell.dev

the track element

2021-10-22T00:00:00Z

The track element allows you to specify timed text tracks (e.g. captions or subtitles) for media elements.

<video src="workshop_promo.mp4" controls>
  <track default kind="captions" srclang="en" src="workshop_promo.vtt" label="English">
  <track kind="subtitles" srclang="de" src="workshop_promo_de.vtt" label="Deutsch">
  Sorry, your browser doesn't support embedded videos.
</video>

If you want to provide captions or subtitles for a <video>, you can use the native <track> element in HTML.
Here's the result of the above code:

Sorry, your browser doesn't support embedded videos.

Your browser should automatically show captions in English and somewhere in the controls there's should be an additional button that allows you to switch or turn the text track off.

There are several attributes you can use with the track element.

src specifies the path to the .vtt file that contains the text.
kind defines the type of text track you're adding.
“subtitles” for translations of the spoken content
“captions” for a transcript of the audio and important non-verbal information.
“descriptions” for textual descriptions of the video content. (doesn't seem to work in any browser)
“chapters” and “metadata” are tracks intended for use from script. Not displayed by the user agent.
label gives a user-readable title for the track, displayed in the video's UI.
srclang defines the language of the text track.
default defines the default track.

CSS

It's possible to style captions and subtitles using CSS. Visit MDN for a list of supported properties.

::cue {
  background-color: red;
}

The block below is editable. If you change the value of the background-color property, the color of the cue in the video at the top of the page should change accordingly (On macOS: Firefox only, Windows: Chrome and Firefox).

JavaScript

There's a cuechange event in JavaScript that fires when a text track has changed the currently displaying cues. Select the English track (default) and open the console to see it in action while the video is playing.

let textTrackElem = document.querySelectorAll("track")[0];

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
  console.log(cues)
});

.vtt

In case you were wondering how the .vtt file for the English track looks like.

WEBVTT

00:00:00.240 --> 00:00:07.040
Hi! My name is Manuel and if you know me, you know
that I like to complain about HTML others have

00:00:07.040 --> 00:00:14.880
written. I post about it on Twitter, I even have a
website called htmhell.dev where I post bad code,

00:00:14.880 --> 00:00:20.400
but complaining is not the only thing I can do.
I can also, and I also like to, share my knowledge

00:00:20.400 --> 00:00:25.440
and this is why I've teamed up with my friends
at Smashing Magazine. We've prepared a workshop

00:00:25.440 --> 00:00:31.840
called “Deep dive on accessibility testing” where
I show you how I use automatic testing tools,

00:00:31.840 --> 00:00:38.160
browser extensions and even CSS and JavaScript,
manual testing, like testing with the keyboard

00:00:38.160 --> 00:00:43.760
and screen readers, to discover these bad
things, to discover accessibility issues.

00:00:43.760 --> 00:00:49.520
If that sounds interesting, it would be great if
you would join me for my workshop. Below the video

00:00:49.520 --> 00:00:56.560
you will find a special link with a discounted
price just for you. I hope to see you soon! Tthanks!

You can find more tips on htmhell.dev

Debugging HTML: Accessibility

2021-11-08T00:00:00Z

You can debug accessibility features of HTML elements using DevTools in Firefox, Chrome, and Edge.

Let’s say your users report that they can’t access the burger button in your navigation using a keyboard or switch device, or they report that they’re confused by the label of the button when they use a screen reader. There are several ways of debugging that using DevTools.

First, let’s summarize the requirements for a proper button:

Label - It has a visible text label or text alternative
Semantics - It has a proper ARIA button role
Focus - You can access it using a keyboard by pressing Tab
Events - You can activate the button by clicking or pressing Space or Enter

Chrome Dev Tools - Accessibility pane

In Chrome or Edge open DevTools, click the Elements tab, select the element you want to inspect and click the Accessibility tab. The accessibility pane shows you how the element is represented in the accessibility tree, which ARIA attributes it has, and its computed properties.

If you inspect the following button in Chrome, here's what you’ll learn about it:

Button 1

Label - The button gets its label “Navigation” from the aria-label attribute (Name: "Navigation")
Semantics - It has a proper button role (Role: button)
Focus - It’s focusable (Focusable: true)

<button aria-label="Navigation" class="btn">
  <svg viewBox="0 0 20 20" aria-hidden="true">
    <rect y="3" width="20" height="2"></rect>
    <rect y="9" width="20" height="2"></rect>
    <rect y="15" width="20" height="2"></rect>
  </svg>
</button>

Let’s look at another example. This button looks the same, but it's less accessible.

Button 2

Label - The button has no label (Name: "")
Semantics - Its role is “generic” which means that it doesn't have any semantic meaning (Role: generic)
Focus - It’s not focusable (Missing Focusable property)

<div type="button" class="btn">
  <svg class="hamburger" viewBox="0 0 20 20">
    <g>
      <rect y="3" width="20" height="2"></rect>
      <rect y="9" width="20" height="2"></rect>
      <rect y="15" width="20" height="2"></rect>
    </g>
  </svg>
</div>

Firefox Dev Tools - Accessibility panel

In Firefox, right-click the button and select “Inspect accessibility properties” or open DevTools and click the “Accessibility” tab and find the button in the accessibility tree.

Button 1

Label - The label of the button is “Navigation” (Name: "Navigation")
Semantics - It has a proper pushbutton role (Role: "pushbutton")
Focus - It’s focusable (the implicit tabindex is 1)

Note 1: Firefox uses a different accessibility API, that’s why the names of roles aren’t the same as in Chrome. pushbutton corresponds to the ARIA role button.

Note 2: You can check if an element is focusable by ticking the “Show Tabbing Order” checkbox. If there’s an outline on the element with a numbered arrow pointing to it, it means that it’s focusable. The number represents the tabindex.

Button 2

Label - The button has no label (Name: null)
Semantics - Its role is “section” which means that it doesn't have any semantic meaning (Role: "section")
Focus - It’s not focusable (No outline and number when pressing “Show Tabbing Order”)

Note: Just like generic in Chrome, section in Firefox corresponds no ARIA role.

You can find more tips on htmhell.dev

Debugging HTML: Linting

2021-11-24T00:00:00Z

Edge highlights potential issues in your document directly in the elements panel of DevTools and it lists details and further issues in the issues panel.

One of my favourite features in Edge DevTools is the built-in linter that highlights potential issues in your HTML by marking affected elements with a squiggly yellow line.

If you hover over the opening tag, a tooltip with a description of the issue appears. You can Shift + click or right-click it and select “View Issues” to view details about the issue or you can open the issues panel directly (CMD/Ctrl + Shit + P -> Show Issues) to get a list of all issues found on the page. The data is coming from axe, @mdn/browser-compat-data, and webhint.

You can also jump from the issues panel directly to the affected element in the elements or sources panel, and there are links to learning resources.

and

must only directly contain

HTMHell Tips & Tricks

Download links

iframe accessibility

gifs and reduced motion

Animation settings in different operating systems

page descriptions

General

Social Media

the current page

autocompleting password fields

the document outline

the avif image format

Progressive Enhancement

webp Browser Support

Image size comparison

the section element

Implicit region and exposed role

div vs. section

region landmark

The document outline

Conclusion

the mailto: URI scheme

Recipients

mailto: only

mailto: only, with single address

mailto: only, with multiple addresses

mailto: + to parameter

mailto: + cc parameter

mailto: + bcc parameter

Subject

Body

Additional considerdations

reversing ordered lists

Ordered lists

Unordered lists

print style sheets

Debugging print style sheets

Firefox

Chrome/Edge

Safari

crossed out content

The s element

The del element

ol vs. ul vs. div

Why is the <ul> / <ol> element useful?

Unordered lists

Ordered lists

Divs

Styling lists

Autocapitalization

Spell check

Landmarks

Benefits

Landmarks

Tips

the track element

CSS

JavaScript

.vtt

Debugging HTML: Accessibility

Chrome Dev Tools - Accessibility pane

Button 1

Button 2

Firefox Dev Tools - Accessibility panel

Button 1

Button 2

Debugging HTML: Linting

`div` vs. `section`

mailto: + `to` parameter

mailto: + `cc` parameter

mailto: + `bcc` parameter

The `s` element

The `del` element

Why is the `<ul>` / `<ol>` element useful?