|
|
|
@@ -0,0 +1,193 @@ |
|
|
|
<!doctype html><!-- This is a valid HTML5 document. --> |
|
|
|
<!-- Screen readers, SEO, extensions and so on. --> |
|
|
|
<html lang="fr"> |
|
|
|
<!-- Has to be within the first 1024 bytes, hence before the `title` element |
|
|
|
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> |
|
|
|
<!-- The viewport meta is quite crowded and we are responsible for that. |
|
|
|
See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> |
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
|
|
<!-- Required to make a valid HTML5 document. --> |
|
|
|
<title>The UX of HTML ⚒ Nerd (archive) — David Larlet</title> |
|
|
|
<meta name="description" content="Publication mise en cache pour en conserver une trace."> |
|
|
|
<!-- That good ol' feed, subscribe :). --> |
|
|
|
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> |
|
|
|
<!-- Generated from https://realfavicongenerator.net/ such a mess. --> |
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> |
|
|
|
<link rel="manifest" href="/static/david/icons2/site.webmanifest"> |
|
|
|
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> |
|
|
|
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> |
|
|
|
<meta name="msapplication-TileColor" content="#f7f7f7"> |
|
|
|
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> |
|
|
|
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)"> |
|
|
|
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)"> |
|
|
|
<!-- Is that even respected? Retrospectively? What a shAItshow… |
|
|
|
https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> |
|
|
|
<meta name="robots" content="noai, noimageai"> |
|
|
|
<!-- Documented, feel free to shoot an email. --> |
|
|
|
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> |
|
|
|
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<script> |
|
|
|
function toggleTheme(themeName) { |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-dark', |
|
|
|
themeName === 'dark' |
|
|
|
) |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-light', |
|
|
|
themeName === 'light' |
|
|
|
) |
|
|
|
} |
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme !== 'undefined') { |
|
|
|
toggleTheme(selectedTheme) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://vasilis.nl/nerd/the-ux-of-html/"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all"> |
|
|
|
|
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>The UX of HTML ⚒ Nerd</h1> |
|
|
|
</header> |
|
|
|
<nav> |
|
|
|
<p class="center"> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="https://vasilis.nl/nerd/the-ux-of-html/" title="Lien vers le contenu original">Source originale</a> |
|
|
|
<br> |
|
|
|
Mis en cache le 2024-01-08 |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p>Recently when I gave a coding assignment — an art directed web page about a font — a student asked: does it have to be <em>semantic and shit?</em> The whole class looked up, curious about the answer — <em>please let it be no!</em> 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.</p> |
|
|
|
<p><span id="more-2095"></span></p> |
|
|
|
<p>The joke here is, of course, that a well considered user experience starts with well considered <abbr title="HyperText Markup Language">HTML</abbr>.</p> |
|
|
|
<p>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 semantics and shit.</p> |
|
|
|
<p>Recently I decided to stop using the word <em>semantics</em>. Instead I talk about the <abbr title="User eXperience">UX</abbr> of <abbr>HTML</abbr>. And all of a sudden my students are not allergic to <abbr>HTML</abbr> anymore but really interested. Instead of explaining the meaning of a certain element, I show them <em>what it does</em>. So we look at <em>what happens</em> when you add a label to an input: The input and the label now form a pair. You can now click on the label to interact with a checkbox. The label will be read out loud when you focus on an input with a screenreader. When you hover over a <em>label,</em> the hover state of the connected <em>input</em> is shown. My students <em>love</em> stuff like that. They care about <abbr>UX</abbr>. </p> |
|
|
|
<p>I show them that <span>a span with an onclick-event</span> might seem to be behaving like a link, but that there are many layers of <abbr>UX</abbr> missing when you look a bit closer: right-click on <span>this span</span>, and a generic context menu opens up. When on the other hand you right-click on <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">a proper link like this one</a> a specialised context menu opens, with all kinds of options that are specific to a link. And I show them that proper links show up when you ask your screen reader to list all the links on a page, yet spans with an onclick-event don’t. Moreover, a span doesn’t receive focus when you tab to it. And so on. My students see this and they get it. And they love the fact that by being lazy they get much more result.</p> |
|
|
|
<p>So when I teach about <abbr>HTML</abbr> I always start with the elements that are obviously interactive. I show them the multitude of <abbr>UX</abbr> layers of a link, I show them the layers and layers of <abbr>UX</abbr> that are added to a well considered form. I show them what happens on a phone when you use an input with a default text type instead of the proper type of email. They <em>get</em> this, and they want to know more. So I show them more. I show them the <code>required</code> attribute which makes it possible to validate not only form fields, but also fieldsets and forms. They <em>love</em> this stuff. </p> |
|
|
|
<p>Then I go on and show the <code>details</code> element with a <code>summary</code>. Whoah! No JavaScript! </p> |
|
|
|
<p>These interactive things are the most important parts of <abbr>HTML</abbr>. These are the things that truly break or make a site. If you don’t use these elements properly, many people are actively excluded and the <abbr>UX</abbr> degrades in many ways. The interactive elements are what makes the web the web.</p> |
|
|
|
<h2 id="theoldfocusonsemantics">The old focus on semantics</h2> |
|
|
|
<p>Every time I come home from a web conference I hang the lanyard with the badge on a doorknob. There are at least 35 lanyards there. The oldest is more than fifteen years old, the newest just a few months. On most of these conferences there was someone telling us about the importance of using proper <em>semantic <abbr>HTML</abbr></em>. And they <em>all</em> talked about the importance of heading levels. So for <em>at least</em> 15 years we’ve been telling the web design and web development community that heading levels are very important. Yet after all these years, and after all these conferences <a href="https://webaim.org/projects/million/#headings">there are almost no websites that do it right</a>. </p> |
|
|
|
<p>Later, when <abbr>HTML</abbr>5 was introduced the talks about semantics were still mostly about creating a proper document outline, but this time with sectioning elements in combination with headings. Unfortunately this idea was never properly implemented by browsers. And it turned out that these sectioning elements are very hard to understand. For years I’ve tried to explain the difference between a section and an article, and almost nobody gets it. And of course they don’t, because it’s <a href="https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/">very, very complicated theory</a>. And above all: There’s no clear <abbr>UX</abbr> feature to point at. The user experience doesn’t change dramatically if you use a section instead of an article. It’s <em>mostly</em> theoretical. So nowadays, next to <em>divitis</em>, we also have <em><a href="https://www.reddit.com/r/web_design/comments/1it5aa/is_sectionitis_the_new_divitis/">sectionitis</a>.</em> </p> |
|
|
|
<p>Understanding how heading levels work is hard. And understanding how sectioning elements work is really hard. And explaining these things is even harder. What’s the use for <a href="https://www.w3.org/TR/HTML-design-principles/#priority-of-constituencies">theoretical purity</a> if the end result is the same?</p> |
|
|
|
<p>Yes, I know that some sectioning elements actually have some <abbr>UX</abbr> attached to it. But not that much <abbr>UX</abbr> if you compare it to the real interactive elements. Not getting your heading levels right is not at all as destructive as using divs instead of links. </p> |
|
|
|
<p>Now, I’m not saying that we should stop teaching people about heading levels and sections. We shouldn’t. Heading levels and sections do things as well. But we should think about <em>when</em> we teach these more complicated and subtle parts of <abbr>HTML</abbr>. First we need to get people exited about <abbr>HTML</abbr> by showing all the free yet complex layers of <abbr>UX</abbr> you get when you use the interactive elements properly. And then, when they do understand the interactive elements, when they’re really excited and they ask for more, show them the more obscure <abbr>UX</abbr> patterns. You need a good idea of what <abbr>UX</abbr> <em>is</em> before you can understand things like <a href="https://webaim.org/projects/screenreadersurvey9/#finding">the option to nagivate through the headings on the page</a> with a screen reader. Without an idea of what <abbr>UX</abbr> means you cannot understand what landmarks do. First start with the obvious, then show the details.</p> |
|
|
|
<p>I am very much looking forward to 15 more years of web conferences and publications. I look forward to seeing inspiring talks about the <abbr>UX</abbr> of <abbr>HTML</abbr>. Talks about the incredible radio button and its wonderful <em>indeterminate</em> state! Talks about validating forms in a friendly way with just <abbr>HTML</abbr> and some clever <abbr title="Cascading StyleSheets">CSS</abbr>. Talks about the different context menus that appear on different elements. In other words, talks about what <abbr>HTML</abbr> <em>does</em>, and much less about what it <em>means in theory</em>. Let’s talk about user experience, and let’s stop talking about semantics and shit.</p> |
|
|
|
<p><em>This article was also posted <a href="https://www.htmhell.dev/adventcalendar/2023/1/">on the 2023 HTMHell advent calendar</a>.</em></p> |
|
|
|
</article> |
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use> |
|
|
|
</svg> Suivre</a> • |
|
|
|
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use> |
|
|
|
</svg> Pro</a> • |
|
|
|
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use> |
|
|
|
</svg> Email</a> • |
|
|
|
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use> |
|
|
|
</svg> Légal</abbr> |
|
|
|
</p> |
|
|
|
<template id="theme-selector"> |
|
|
|
<form> |
|
|
|
<fieldset> |
|
|
|
<legend><svg class="icon icon-brightness-contrast"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use> |
|
|
|
</svg> Thème</legend> |
|
|
|
<label> |
|
|
|
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="light" name="chosen-color-scheme"> Clair |
|
|
|
</label> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</template> |
|
|
|
</footer> |
|
|
|
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> |
|
|
|
<script> |
|
|
|
function loadThemeForm(templateName) { |
|
|
|
const themeSelectorTemplate = document.querySelector(templateName) |
|
|
|
const form = themeSelectorTemplate.content.firstElementChild |
|
|
|
themeSelectorTemplate.replaceWith(form) |
|
|
|
|
|
|
|
form.addEventListener('change', (e) => { |
|
|
|
const chosenColorScheme = e.target.value |
|
|
|
localStorage.setItem('theme', chosenColorScheme) |
|
|
|
toggleTheme(chosenColorScheme) |
|
|
|
}) |
|
|
|
|
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme && selectedTheme !== 'undefined') { |
|
|
|
form.querySelector(`[value="${selectedTheme}"]`).checked = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const prefersColorSchemeDark = '(prefers-color-scheme: dark)' |
|
|
|
window.addEventListener('load', () => { |
|
|
|
let hasDarkRules = false |
|
|
|
for (const styleSheet of Array.from(document.styleSheets)) { |
|
|
|
let mediaRules = [] |
|
|
|
for (const cssRule of styleSheet.cssRules) { |
|
|
|
if (cssRule.type !== CSSRule.MEDIA_RULE) { |
|
|
|
continue |
|
|
|
} |
|
|
|
// WARNING: Safari does not have/supports `conditionText`. |
|
|
|
if (cssRule.conditionText) { |
|
|
|
if (cssRule.conditionText !== prefersColorSchemeDark) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} |
|
|
|
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) |
|
|
|
} |
|
|
|
|
|
|
|
// WARNING: do not try to insert a Rule to a styleSheet you are |
|
|
|
// currently iterating on, otherwise the browser will be stuck |
|
|
|
// in a infinite loop… |
|
|
|
for (const mediaRule of mediaRules) { |
|
|
|
styleSheet.insertRule(mediaRule.cssText) |
|
|
|
hasDarkRules = true |
|
|
|
} |
|
|
|
} |
|
|
|
if (hasDarkRules) { |
|
|
|
loadThemeForm('#theme-selector') |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
