HTML - Headings, Landmarks, and Semantics
Accessibility wins using Native HTML
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:12] At the core of every webpage is a document object model, which consists of HTML representing a document structure. Semantic HTML include elements that assign a role or meaning to the content that it encapsulates.
[00:13 - 00:20] Using these elements makes their purpose or intention clear. Some examples of semantic elements include header, figure, and even the button tag.
[00:21 - 00:32] This is in contrast to generic non-semantic elements like the div and span tags . Simply put, if you use the right element for the job, you get accessibility gains baked in for free.
[00:33 - 00:41] Use native elements whenever possible. Trying to build your own is always more work because you have to ensure that accessibility meets the wall area standards.
[00:42 - 00:58] And one example of this that I see a lot on code bases unfortunately is people using divs instead of buttons. And I think this is because the button element applies its own default CSS, which is kind of ugly.
[00:59 - 01:08] And they have to undo the CSS to probably style it the way they want. So they're like, "Okay, I'll just use a div because it looks the way I want and I can just apply an on-click handler to it."
[01:09 - 01:28] But even though the button action may work on a div, like it does on a button, you lose all the accessibility gains because you're using a non-semantic element. So things like focus, being able to tab, pressing space or enter to activate, it won't work because you're using a generic div element.
[01:29 - 01:40] So that's just an example of a major culprit that I kind of see a lot on code bases. So yeah, always use the right element for the job because you get accessibility gains for free.
[01:41 - 01:56] And even if it's more work to undo CSS, it's always worth it because the accessibility gains you get make it worthwhile. Technical affordances are the perceptions of interactions one can take with a piece of technology or software.
[01:57 - 02:04] This term can be applied to both the physical and digital realms. It's a term coined by psychologist James Gibson when interacting with an item.
[02:05 - 02:20] Obtaining identifiable affordances improves usability by making interacting with common pieces of software more intuitive. Some common examples of tech affordances are a hamburger menu that you see a lot in mobile views.
[02:21 - 02:33] It's usually a condensed navigational menu and represents hidden navigational contents. There's also the common link which indicates that it will direct you to a different web page or link within that website.
[02:34 - 02:41] And then of course a button that indicates that it will perform in action. Now we'll take a look at headings.
[02:42 - 02:55] In HTML, there are different levels of heading elements ranging from H1 to H6. HTML headings provide a clear structure and hierarchy to the information presented, making easier for all users to navigate and identify the structure of the content.
[02:56 - 03:06] The order in which a screen reader interprets content is based on the DOM order . And having proper headings makes it easier for screen readers to maneuver through your website and provides a proper hierarchy of content.
[03:07 - 03:24] When a web page is structured, an easy to follow hierarchy, screen readers and keyboard users can identify the main section and navigate more quickly through the document. So if you scroll down on this website, we'll see that there is an example of the different headings and how they're styled.
[03:25 - 03:36] And so by default, heading level one is kind of the biggest font size and the boldest. And all that kind of gets incrementally smaller and less bold as you go down to heading level six.
[03:37 - 03:53] And if we go to this W3C page, we can actually click this button that says show headings. And we can kind of see the heading layout on just this sample site here and how you would potentially lay out a heading hierarchy on a website.
[03:54 - 04:01] So now I want to discuss some tips for using headings. And the first is to not use headings as a styling technique for text.
[04:02 - 04:14] Instead, use the font size property if you want to make alterations. So let's say we have a kitten card example here where we're trying to show a cute kitten that's available for adoption.
[04:15 - 04:20] That is my cat Snickers by the way. Let's say we have that kitten for adoption, but the text is just too small.
[04:21 - 04:26] We want it to be bigger. Don't go ahead and make that an H1.
[04:27 - 04:41] Let's say because typically articles are going to be somewhere nested on the page, so the H1 seemingly would have been higher up. So we want the H3 tag because that's the semantic heading that we want and maintains a proper hierarchy, but we don't want like the style.
[04:42 - 05:01] So instead of changing the heading tag and messing with that hierarchy, we can instead apply the font size property to the H3 in the CSS and just make it larger. And in that way, we can get the styling that we want and still maintain the proper heading hierarchy.
[05:02 - 05:07] The last topic we'll discuss are landmarks. Some common landmark elements include the main, nav, and section.
[05:08 - 05:15] By default, majority of these elements have an implicit ARIA role associated with them. And a lot of landmark elements are actually semantic elements.
[05:16 - 05:35] Landmarks ensure content is in navigable regions, which, like the heading tags users mentioned above, make it quicker for screen readers and keyword users to maneuver through the content swiftly. In addition to having accessibility benefits, landmarks make it so that a scan of the HTML conveys the desired hierarchical structure of the document.
[05:36 - 06:00] Let's maneuver over to the W3C page, which we looked at earlier to demonstrate our headings, and let's toggle the show landmarks button instead. And at the top, we can see that we have a banner, we have a navigation, we also have a navigation on the left-hand side, in the center content, we have our main tag , which typically encapsulates a majority of information, hence the name main.
[06:01 - 06:10] On the right-hand side, we have two complementary blocks. And if we scroll down, we see we have a footer here, which has an implicit ARIA role of content info.
[06:11 - 06:16] So this is just a simple example of how a website might be outlined using landmark elements.
This lesson preview is part of the The Approachable Guide to Accessible Components course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The Approachable Guide to Accessible Components, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
At the core of every webpage is a document object model, which consists of HTML representing a document structure. Semantic HTML include elements that assign a role or meaning to the content that it encapsulates. Using these elements makes their purpose or intention clear. Some examples of semantic elements include header, figure, and even the button tag. This is in contrast to generic non-semantic elements like the div and span tags . Simply put, if you use the right element for the job, you get accessibility gains baked in for free. Use native elements whenever possible. Trying to build your own is always more work because you have to ensure that accessibility meets the wall area standards. And one example of this that I see a lot on code bases unfortunately is people using divs instead of buttons. And I think this is because the button element applies its own default CSS, which is kind of ugly. And they have to undo the CSS to probably style it the way they want. So they're like, "Okay, I'll just use a div because it looks the way I want and I can just apply an on-click handler to it." But even though the button action may work on a div, like it does on a button, you lose all the accessibility gains because you're using a non-semantic element. So things like focus, being able to tab, pressing space or enter to activate, it won't work because you're using a generic div element. So that's just an example of a major culprit that I kind of see a lot on code bases. So yeah, always use the right element for the job because you get accessibility gains for free. And even if it's more work to undo CSS, it's always worth it because the accessibility gains you get make it worthwhile. Technical affordances are the perceptions of interactions one can take with a piece of technology or software. This term can be applied to both the physical and digital realms. It's a term coined by psychologist James Gibson when interacting with an item. Obtaining identifiable affordances improves usability by making interacting with common pieces of software more intuitive. Some common examples of tech affordances are a hamburger menu that you see a lot in mobile views. It's usually a condensed navigational menu and represents hidden navigational contents. There's also the common link which indicates that it will direct you to a different web page or link within that website. And then of course a button that indicates that it will perform in action. Now we'll take a look at headings. In HTML, there are different levels of heading elements ranging from H1 to H6. HTML headings provide a clear structure and hierarchy to the information presented, making easier for all users to navigate and identify the structure of the content. The order in which a screen reader interprets content is based on the DOM order . And having proper headings makes it easier for screen readers to maneuver through your website and provides a proper hierarchy of content. When a web page is structured, an easy to follow hierarchy, screen readers and keyboard users can identify the main section and navigate more quickly through the document. So if you scroll down on this website, we'll see that there is an example of the different headings and how they're styled. And so by default, heading level one is kind of the biggest font size and the boldest. And all that kind of gets incrementally smaller and less bold as you go down to heading level six. And if we go to this W3C page, we can actually click this button that says show headings. And we can kind of see the heading layout on just this sample site here and how you would potentially lay out a heading hierarchy on a website. So now I want to discuss some tips for using headings. And the first is to not use headings as a styling technique for text. Instead, use the font size property if you want to make alterations. So let's say we have a kitten card example here where we're trying to show a cute kitten that's available for adoption. That is my cat Snickers by the way. Let's say we have that kitten for adoption, but the text is just too small. We want it to be bigger. Don't go ahead and make that an H1. Let's say because typically articles are going to be somewhere nested on the page, so the H1 seemingly would have been higher up. So we want the H3 tag because that's the semantic heading that we want and maintains a proper hierarchy, but we don't want like the style. So instead of changing the heading tag and messing with that hierarchy, we can instead apply the font size property to the H3 in the CSS and just make it larger. And in that way, we can get the styling that we want and still maintain the proper heading hierarchy. The last topic we'll discuss are landmarks. Some common landmark elements include the main, nav, and section. By default, majority of these elements have an implicit ARIA role associated with them. And a lot of landmark elements are actually semantic elements. Landmarks ensure content is in navigable regions, which, like the heading tags users mentioned above, make it quicker for screen readers and keyword users to maneuver through the content swiftly. In addition to having accessibility benefits, landmarks make it so that a scan of the HTML conveys the desired hierarchical structure of the document. Let's maneuver over to the W3C page, which we looked at earlier to demonstrate our headings, and let's toggle the show landmarks button instead. And at the top, we can see that we have a banner, we have a navigation, we also have a navigation on the left-hand side, in the center content, we have our main tag , which typically encapsulates a majority of information, hence the name main. On the right-hand side, we have two complementary blocks. And if we scroll down, we see we have a footer here, which has an implicit ARIA role of content info. So this is just a simple example of how a website might be outlined using landmark elements. [BLANK_AUDIO]