1.1 Semantic HTML
Introduction
Web standards are rules and guidelines used to promote code consistency when building a web page. With those, anyone (people and robots) can access and understand the content of a webpage in a meaningful way.
One of the Web standards consists in writing semantic HTML markup: Go beyond <div />
and <span>
(non-semantic elements) and replace them by semantic elements. Use them where it makes sense: to describe sections, text, media, and so on. This way, we are not only writing readable code, but we are also making the web a more accessible place.
Exercise
In the exercise page, there's a layout implemented that looks good but the semantics are a mess.
People who read this page through an Assistive Technology (AT), for example, a SR (screen reader), will struggle to understand and interact with the page.
🎯 Goal: Improve the HTML by using semantic elements.
Tip: For now, we won't use a SR. Instead, we'll use an analogy. Let's imagine the page as if it was a book: plain old text. Remove the page styles and improve the HTML until this book makes sense to you.
Bonus
1. Order of content
In a book, the title is always the first thing to show up. However, on this page, the tag "On Sale" appears before the title.
🎯 Goal: reorder the HTML elements so that the title and the tag appear in the correct order, but without changing the design!
🍀 Toggle CSS hint #1
Perhaps some flexbox trick can help us to reverse the order visually.
🍀 Toggle CSS hint #2
With CSS flexbox there are 2 ways to display the tag before the title:
- in
.header
, reverse the order withflex-direction: column-reverse;
. - or, in
.header-tag
move it to the top withorder: -1;
.
2. Missing content
We can visually understand that the plant is on sale ($40 to $30). However, if we see the page naked (without styles), it doesn't make much sense. We see two price tags, but we don't know the difference between them. Some people may not even understand that's the plant price.
🎯 Goal: Add the missing words to be visible when the page is displayed without styles.
<span class="visually-hidden">Price:</span>
Hint: What CSS will you use at .visually-hidden
? There are better ways to hide content than using display: none;
. Check how to visually hide content.
Further reading
- Extension
headingsMap
- Chrome or Firefox - Accessible heading structure
- How to hide content
- HTML5 deep dive into article and section
- Fun fact: on April 9 is the CSS naked day
WCAG Success Criterion
- WCAG 1.3.2 Meaningful Sequence - Level A
- WCAG 2.4.6 Headings and Labels - Level AA
- WCAG 2.4.10 Section Headings - Level AAA
Exercise takeaways
(After the exercise) Reveal takeaways
- Be more than a div'eloper. HTML tags exist for a reason — to add extra meaning and functionality.
- The heading structure must prioritize the content of the page rather than the visual designs.
- Use
.sr-only
to complement the missing visual content. - Aim to organize the DOM as a book — when necessary use CSS to tweak the visual order.
- As a designer, include the "invisible copy" in your mockups.