When and how to use the ‘<section>’ element


[Intro music]

>>ROBOTIC VOICE: Welcome to Technica11y!

>>MICHAEL BECK: So, ladies and gentlemen and all variations there upon, welcome to this May 2021 edition of Technica11y. For those new to our series, I’m your host Michael Beck, the Director of Operations at Tenon. Before we get to today’s guest, I do have a quick announcement, on Monday, May 17, at 11a.m. Eastern, that’s US time, we’ll be launching our new German speaking edition of Technica11y hosted by Joschi Kuphal. And the first guest will be Eric Eggert, who is a professor emeritus of Technica11y, so to speak, of at least of the English speaking version. So if you are a German speaker, keep an eye on our Twitter account @twitterapi…I’m sorry, @tenonapi for registration info. The German Technica11y will be a monthly series that will be on the third Monday of every month. And with that out of the way, let me welcome today’s guest Martin Underhill! Welcome, Martin!

>>MARTIN UNDERHILL: Thanks Michael. Thanks for having me.

>>MICHAEL BECK: Yeah, thank you for being with us today. Martin will be talking about the `<section>` element and answering the burning questions such as, “What on earth is a ‘<section>` element? How do we use it properly? In what ways is the `<section>` element different from other elements like the `<article>` or the `<main>` elements.”

If you’ve ever asked yourself this or any questions like it, today’s your day because Martin is here to explain it all!

And as always, if you have any questions for Martin, please put them in the chat and we’ll answer them after the presentation and if there’s any time after that, we’ll open the floor up to any accessibility related questions for our little brain trust that we have here right now. And so, without any further ado, the floor is all yours Martin.

>>MARTIN UNDERHILL: Thank you! Yeah, thanks very much for having me, again, Michael! It’s great to be to be on and good to see everybody on the call. Let me just jump quickly to a (brings up PowerPoint on screen share) There we go.

So, I’m Martin Underhill and I’m a principal experience designer at Sage, which is a quite large company that does accounting software role of all kinds. As well as being a designer, I’m a bit of a frontend developer and I’ve got a strong background in in things like HTML and CSS and then avoidance and other things like JavaScript, wherever I can. But yeah, so I’m that. I’ve got a background in a UK government’s digital side of things and the GDS principles and all that kind of stuff. I’ve worked for for a few years doing that so and all of the, all the prioritization they put on accessibility with government services being something that everybody has to use, so making sure that everyone is included.

So that brought me into my current role where I am an Accessibility Specialist. But I guess above and beyond all of that, I’m a dad of two children and I’m a husband to Bea, so that’s me in a very quick nutshell.

Let me dive straight in, so I should also mention at this stage, I don’t speak the Queen’s English, necessarily, so if anybody struggles with my accent please pipe up. Let me know and I’ll either rephrase the language I’m using or I’ll try and slow down a little bit. It’s easy to, to sort of take the, take the boy out of Glasgow but not necessarily to take the Glasgow out of the boy, if that makes sense.

So, HTML5 and cowpaths is where I’d like to start. So, the idea of HTML5 was that where it took over from or it superseded XHTML was that it would be paving the cowpaths. That was, a that was one of the design principles behind it, so in 2019-ish, ISH, HTML5 is starting to get a bit of traction and seeing some adoption. And the idea was to design it around, what people were already doing, so there were things like, I think there were the bots were sent out across the, across the worldwide web and they found that there was lots of commonalities across all these websites. So people were using things like a <div> with a class of header. So, from that they inferred, “Okay, header is something that’s quite useful. So why don’t we make a <header> element in HTML. So that was just one example of many. But that’s only part of the story, so that’s paving the cowpaths. But there are also some new paths that were forged. HTML5 changed and repurposed some semantics and the <AI> element and the <B> element being, being a couple of kind of prominent ones of those which are not I could, I could digress but I won’t.

It also introduced a new semantics like the <header> element that I mentioned and the <footer> was one. <main> was a bit of a late comer but that was another one that arrived. And the main thing was for me, that it raised lots of questions. It wasn’t like for like anymore. There was lots of new things to learn.

So, one of my questions was, “What on earth was a <section> element even for?” And this was a, it may not be a direct quote but this was something around the sort of, the sort of question I would have been asking around 2009 when I started to use HTML5.

So let’s start by talking about landmarks. Landmarks are things that a sighted user can identify on a page, so you have a header, you have a navigation, you have maybe a main content area, a sidebar, and a footer so that’s, this is a diagram here, a very, very rough wireframe of all those things, very sort of classic website in the desktop mode.

Here I’ve numbered those elements so number one is the header, right at the top there. Number two is navigation which is inside the header and kind of maybe off to the right hand side. Again, we’re looking at this and I can have a laptop view rather than a mobile view. And we’re concentrating on, on the, on the visual aspect of it as well as stage. Number three, we’ve got the main content area. Number four, you’ve got a sidebar, and then number five, you’ve got a footer down the bottom there, those are things that, that they found to be common across almost every website across the web.

But just as a sighted user can visually identify those landmarks, screen reader users have superpowers as well.

So what they can do is they can quickly bring up a list of all the landmarks on the page and then jump to any one of them that they choose. In the same way that the sighted user can visually identify these things and then zoom in or zone in, zone in on that one that they’re interested in. So okay, “I’m interested in the footer, because I came here to find your Twitter account. Probably it’s in the footer,” so as a sighted user I scroll down, find the footer. “Okay, there’s a footer link.” As a non sighted user, I can find that landmark that, that footer landmark and jump straight to it and have a look around, have a poke around for the Twitter link.

So, this is where things get interesting. So, those new elements that we were given in HTML5 came with implicit rules. And the idea here is that screen readers can take one of these elements and then give it a rule to communicate to a screen reader user. So, the screen reader does that. It kind of goes across the page, picks out the rule, finds a <header>, “okay this is a header.” So, it communicates that to the user. In order for them to have a look through the, the different elements on the page and these common landmarks and because it’s implicit we don’t have to see anything. We don’t have to add any attributes like, role=banner, or something like that to our, our <header> anymore just, it’s just implicitly added there.

So here’s a, here’s a very rough look at what the markup for the example page may look like. We’ve got the <body> element containing everything there and then it’s very bare bones so at the top we’ve got <header>, and inside the <header>, just like the diagram, we’ve got the <navigation>. After the <header>, we’ve got a <main> element, which, which it contains all of our, our <main> content. Then we’ve got the <aside> element, which is used for the sidebar. And then at the bottom of the <footer>. So that that structure there would be what we would use to create the page that I’ve shown you before.

So, with those we get these lovely implicit rules here. We get the <header> becomes a banner, the <navigation> is a navigation and <main> is a main. The compliment of the <aside>, or the <sidebar> is complimentary and in the <footer> is what’s known as content info to tell you about the contents of a page. And these rules allow screen reader users to identify those landmarks in the same way that a sighted user could. But there’s more, so custom landmarks become a thing. So, this is where the second element comes in. So some visually identifiable landmarks that aren’t included in HTML. I guess it could be, it could be anything really, but if you scan around the page and you can, you can lock onto something and say, “Okay, I know what that is. I’m going to, I’m going to have a look at that thing.” Some of those things may be headers, footers, but it might be more nuanced things like perhaps blog post information.

It might appear on the side of the page where the, where the sidebar would be but it’s not strictly speaking in <aside> which, I’ll get to. But yeah, blog posts information, that kind of thing. You can have a filter panel that would be what you can use a <section> for as well. Just ya know something like on an E commerce site where you can refine your search if you’ve looked for something you can say, “I want, only want to see the blue versions of this or the red versions.” That kind of thing, so yeah filter panels could be a landmark. Then calls to action are probably a good one as well, so in marketing websites you might have the call to action down at the bottom there. That would be something that you’d be able to easily visually identify. And the same way that you’d want to give that same power to non visual users and give them that that call to action, a rule using a <section> but, “A <section> is essentially a <div> from a semantic perspective.” – And that’s me quoting myself here, so this was an article that I wrote a couple of months ago, that kind of sparked this whole discussion off.

The screen reader doesn’t know anything about a <section>. So we need to tell the browser what each <section> actually is, before we can, before we can do anything with it. And what we do there is we give a <section> meaning by using ARIA to label them. So we can either use aria-label=”” or we can use aria-labelledby=”” and I’ll take you through each of those and the sort of pros and cons of each.

So if we were to use aria-label, here’s an example where we’ve got a <section> element with an aria-label attribute on the <section>, opening tag and it says, “Join the mailing list,” <section> has a header, heading sorry, which has an <h2> to “Join the mailing list.” So those two things are exactly the same. And I use an example from VoiceOver on macOS. It says, “Join the mailing list region.”

So, that’s all pretty straightforward. A screen reader user would understand that they’re in a joining, there is a join mailing list region and then they can jump straight to that. Then they get the header, which, which reinforces where they are and then they can read the details about joining the mailing list. Maybe, maybe, sign up at that point.

A call to action is, a sort of a nice, simple example of this. The problem is that it’s a bit repetitive. We’re adding the same content in two places. We may be using a templating language, something in nunchucks or, or twig or something but, but where we can input the same piece of data in two places but still there’s a bit of duplication there and we can probably do with avoiding. So, the problem is if the headings changed there’s a risk that the aria-label value is forgotten about and doesn’t change as well.

So you might end up in a situation like this, where you’ve changed your heading but you haven’t changed aria-label. So in this example, we’ve got the same, the same code, the aria-label still says, “Join the mailing list,” but we’ve updated the subscribe to the heading too, “Subscribe to our mailing list.” And now, first of all, I guess first of all the Marketing Department might not be very happy that you’ve done that. They’ve put all that work into, into that brilliant new copy that’s gonna get all those new subscribers and then you’re, you’re giving screen reader users the old experience. So, they’re not gonna be very happy with that.

There’s also the issue that you’ve got a mismatch between the landmarks label and the heading. So that can be a bit disorienting for some users. A screen reader user would expect to see a <section>, that would be reinforced by this heading or this main heading. So here, we get the same landmark in VoiceOver and if we look, if we were to look at our kind of elements in our router view it would say, “Join the mailing list region,” rather than “Subscribe to our mailing list.”

So a better way to do it is to use aria-labelby. This takes out all of the repetition that we have. So we’ve got the <section> that has an aria-labelby attribute on the opening tag this time. And that aria-labelby value matches the ID that we’ve added to our <h2>. So, the <h2> says, “Join the mailing list.” And if we reference that, that means that wherever, wherever we update the heading to, it’ll always be reflected in the <section> so there’s zero risk of any mismatches, or, or any of the Marketing Department coming after you. So that would say, “Join the mailing list region,” in this example. And if we were tempted to subscribe to our mailing list, it would then say, “Subscribe to our mailing list region,” and VoiceOver. So you’ve got that aria-labelby hooking itself up to the <h2>, or whatever value that is, that’s exactly what it will tell you, that region.

So, with that there’s no repetition and the <section> refers to the heading through successful name, and the heading is changed. If the heading is changed, the section just uses the new heading content. And again, I’m referring to myself, of course to myself “A <section> is a custom landmark… give it some semantic meaning with ARIA and screen reader users will be able to jump right to it, just like a sighted person, a sighted user can.”

Right, so I’ll talk now a little bit about some other powers, I’ve talked about the, the landmarking superpowers that you give people with, with using the, by using the <section> element correctly. But you’ve also got sectioning, in and of itself. So, what you can do is you can section headers and footers, so I’ll explain a little bit more about that.

Some, some landmarks are unique. So you’re only allowed one banner. You’re only allowed one main, you’re only allowed one content info. You can have several of other landmarks like, you can have several adverts, so you might have several complimentary landmarks but these three elem… these three landmark rules here, you’re only allowed one of each. But I don’t even know how to make sense visually because you’re, you’re looking at a website, you want to only know there’s one ,, that’s, that’s kind of the way these things work, you’ve got one bit of main content, one, one footer and that makes perfect sense.

But then there’s a bit of a clash and in that, we are actually allowed to use more than one header or footer. So where does that leave us? So I’ve had a look into HTML5 Dr. Website here where it says you can use multiple headers. “You can use multiple headers, each of which will then become a header for that section of the document.” So, this is also true of footers. But, what’s going on here? Well, and also yeah I mean what does it have to do with the <section> element? Well, <section> elements are, unsurprisingly, unsurprisingly sectioning elements. Sectioning content from the HTML living standard sectioning content is content that defines the scope of headings and footers. And there are four sectioning elements, one of which is <section>. We also have <article>, <aside> and <nav>. Those three, those four elements are what’s known as sectioning elements. So if you have a header or a footer inside there, it removes the implicit rule.

So, if you have those nested headers and footers, then they don’t, they’re not exposed as banners and content and info rules or landmarks. So what we’ve done here is we’ve made sure that we don’t give our users multiple headers, multiple footers. As far as the landmarks are concerned but we are able to use <header> and <footer> semantically inside discrete <section>s, whether that’s an actual sectional,<section> element or one of the other three there.

So, yes, so what we’re doing is we’re scoping <header> and <footer> elements. A <section> can have its own header and footer, and this is not the page header or footer. And this is an example, so if we go back to our, our amazing website that we’ve, we’ve wireframed and we’ve put the basic HTML together for, this is the bottom <section>, which was where we look at the packages and we’ve got a bunch of packages and this is very typical on websites. You might have three tiers, you might have basic Standard and/or Pro or something like that you got the three, three different versions and they all cost different amounts and that kind of thing. So, on this website, that’s what we’ve done, is we’re offering a Pro package and that’s our most popular package.

So we’ve got a <section> and inside that <section> at the top we’ve got a <header> and at the bottom we’ve got <footer>, and in between that we’ve got a heading, saying, “The Pro package,” and we’ve got a list of all the amazing things you get when you buy that Pro package. In the <header>, we’ve got an image, which is what makes its header, so it may be, maybe it’s bronze, silver, gold, you want to use that kind of metaphor. This one here would maybe have the silver or the gold badge or a little trophy or something like that. And some kind of identifiable marker that you can put in inside the <header>. And then the <footer>, you’ve got the, “Terms and Conditions,” and I may have a link to a page with some terms and the terms and conditions on it. So that’s how you would use a <header> and a <footer> in a <section>, as opposed to being part of the main page.

So now that we’ve talked about sectioning, we can talk a little bit more about outlining, or talk about outlining, for the first time. So, this is a bit more of a historical study, and I’ll tell you why. There was a thing when HTML 5.0, 5.0 came out back, I think it was released in 2008. So when that was finally finished they had this idea, a great idea of the HTML5 document outline. And I’ll start with a spoiler alert, it has been deprecated HTML 5.1 kind of got rid of it. It was tried, it didn’t, it didn’t take hold, but yeah, so it’s deprecated. So don’t use it.

What it did do, it was interesting because it allowed <sections> to be moved, moved around, without you having to worry about the markup. So you wouldn’t have to change a heading level two to a heading level three, if you were to nest deeper, or you wouldn’t have vice versa, or you wouldn’t have to worry about anything.

Basically, it would all take care of itself because it would be all be scoped to that <section>. And it’s a great idea for modular content, and if you’ve got to like a CMS that kind of works in that kind of that kind of way, where everything has its own place and you’re kind of in pulling those things out and putting them in your own order on the, on the homepage or whatever it may be, then that was a good idea. And it allowed you to mix and match it with <h1> to <h6> markup. So you weren’t locked. You didn’t have to have an <h1> for everything, which is what I’ll show you in the next example.

You could use <h6>s or <h2>s, and <h3>s. Or you could have a one page that has the HTML5 document outline and then another page, and then maybe written with with <h1> to <h6> and kind of more classic fashion, which is probably more for things like blog posts and things that you might want to use markdown to write. So that’s that’s the, that’s the kind of mix and match difference but very useful in certain circumstances. So this is the code that it may be built with going back to our wireframe earlier we’ve got the <main> element which has got everything inside of it and inside that <main> element, we’ve got a heading level one, which is the name of the company, “Example Limited Web Services,” and then you’ve got three <section>s.

First <section> is for,”Services,” The second <section> is for, “Testimonials,” and the third is for, “Our amazing packages,” and we’ve seen an example of what that markup inside those packages might look like in the last part of the talk.

“Services,” there we can see we’ve got two nested <section>s, one for, “Web design,” and one for “Web development.” And basically what what this very simple, simplified to is outlined example does is it demonstrates how everything has an <h1> and we’re using <section> elements to, to scope the level of the heading. So the ones that are surrounded by two, a parent and a grandparent <section> element, those ones are heading level three because their three levels deep. The ones that have one <section> as a parent, are our <h2>s effectively. And this is sort of how that would look as an outline so you’ve got the, example with limited “Example Limited Web Services,” and then you’ve got the three <section>s and then inside, “Services,” you’ve got those two bullet points, nested in there for “Web design,” and “Web development.”

So as I said, unfortunately, “The HTML 5.1 specification requires developers to use <h1> to such an <h6> to convey document structure, the HTML5 document outline is not implemented.” So that was from an article I think again it was on HTML5 Dr.

Computer says no to HTML5 document outline so that there. I mean, that was it, basically it was a it was a it was a shame. But, you know these things, these things are the way they are, and browsers even fail your nested headings properly when their scoped with the <section> element, you give it, give it a shot. It’s quite quite interesting to see how far it goes down the line. Google have confirmed that it’s cool with the outline algorithm that you’re not going to be competing for <h1>s as long as it’s all scoped <section>s from an SEO point of view but it was never fully adopted by user agents and assistive technology just means <h1> <h1> <h1> <h1> heading level one, so it doesn’t, it doesn’t make any, any doesn’t discern between the <h1> and the, and the nested two levels, <h1>, which should be an <h3>. So, we’re stuck with <h1> to <h6> for everything. And the good thing here is that it’s nicely backwardly compatible. So in our example here, we’ve just got the scope and same structure there, and <h1>, three <h2>s, and after the <h2>s two <h3>s. <h1> with the Services, Testimonials and the Packages and then we’ve got those nested, “Web design,” and, “Web development,” services in there as well.

In a way I’m kind of glad, I think the HTML5 document outline wasn’t really it, wasn’t really progressively enhanceable or, or a progressive, progressive enhancement. So it doesn’t really feel all that HTMLly, to me, because the idea of HTML is that it’s always going to be backward compatible, but what we’re doing here was we’re breaking things. And for users that may be using, well, screen reader users, for the great extent and also all the users that use older browsers as well.

So I think the final thing to take you through is the similar elements, how does s<section> differ from certain other landmarks? I mean, headers, navigation or <nav> & <footer>. They’re all pretty obvious in their uses, you know, they’re quite it’s quite, You know those are what they are basically. But some elements aren’t as distinct from <section>. So, we might benefit from a bit of a deep dive into those.

So, the <main> element as the most recent addition to the spec. This is the stuff that your <title> is talking about so the the <title> being that kind of meta data that appears in your browser tab. That is important for assistive technology and search engines alike. Basically this <title> is, this document is about this thing. This is the thing you can drill right into. It is for the main content of a document. You’re only allowed one on the page, and I mentioned that they’re perceivable so you can only have one displayed at one time, whether it’s visually or otherwise. But yeah, so if you have two <main> elements, one has to be hidden, and the other has to be shown, then you can maybe toggle between the two. I mean, for me I don’t see that being too, too much of a use case, but it is allowed. Essentially though you’re only allowed one.

It is probably the destination of your, “skip to content link,” so, and you’re, you might, you might be helpfully jumping past the big block of navigation at the top for keyboard users or screen reader users. So they can, the use of the tab index, they have this language which can jump past that, conveniently, and you’re going to want to get into the <main> element, because that’s the main part of the page. It’s also the thing that’s used by Safari for it’s reader mode, And I know that Firefox and edge, probably Opera it but not Chrome, for probably obvious reasons but the reader mode is basically zooms you in right into that main content of the page and gets rid of all the distractions so that you can really focus.

It’s also what we do later, services like Instapaper, pocket or Safari reading list is used as the kind of main focus of the page, they’ll, they’ll grab that and then stick that in your, in your reading list for another time.

It’s a, <main> isn’t a sectioning element. So we can’t nest another header or footer in there, and it’s worth mentioning, just because it feels like it should be but it’s not.

So the next thing is, is an <article>. The <article> element is a self contained chunk of content and it’s reusable elsewhere. And by reusable elsewhere, it could be the same site, it might be that you’ve got blog listing. It doesn’t have to be the whole article. It can just be a little snippet, teasing you, “Come and read this next article.” But it lives on a different page so it can, it’s that content, it can be put anywhere on your website, and it would make sense. You can also use it in an RSS feed, JSON feed or something like that. If you’re more if you’re a geek like me and you like to keep up the RSS or you can have it on an entirely different website. The the <article> is something that would make sense out of context. And it might link back to your main field blog post for example, but yeah that’s kind of what the <article> is for. It doesn’t have, doesn’t have to be a blog post, either it could be it could be something, something else, but yeah something to make sense out of context, context, you can have as many of those as you like. They can be nested one inside the other. And that is a sectioning element. It’s also worth mentioning that this is potentially the same thing as the <main> elements of what you may have as the <main> element wrapping an <article>. So, another <article> does expose things. I think that does have an effect for things like if Apple Watch and things if you, if you wanted to read an article in your Apple Watch or look for the <article> element. If someone sends you a link, for example, I mean it’s a very small article, very small canvas to be reading on but yet nonetheless. But yeah, so that’s, that’s how the <article> element works.

The <aside> element I mentioned earlier, that’s, it’s for content that’s not really related to the page. And so, for adverts. They might be related, you know they might be, they may be over theme, but it’s not what you’re there for. It’s not the content of the page. Social media feeds may come into that. they belong to belong to you there, they belong to Twitter or whoever, but the, you know, the, the, they’re your thing, but yeah, they’re an <aside>, they’re not part of what you’re actually there for and tangentially linked content of any type, really.

So they’re known for things like pull quotes, are often info or content filters and sidebars and things like that. I have seen a few things that point towards them as being for pull-quotes. The problem with that is that if they’re a child, they should be a child the <body> element because if the scope to something like an <article> or a <main>, then they’re not, then don’t get exposed to assistive technology. So non sighted users can’t ignore them in the same way that you could as a sighted user. So, yeah, the sighted user might have that banner blindness, the idea you know they’ve got that top right hand corner that’s for the advert, “I’m gonna ignore that.” And we want to give that exactly the same power to a non sighted user so they can dodge the sides and just concentrate on what they’re actually there for. So that’s that one. And finally, the <div> element, the, this is something with absolutely no semantic meaning or power at all. You can’t do anything fancy with it, without adding ARIA rules and all that kind of thing but but that’s probably something that you that you want to avoid if possible, or certainly if there’s a if there’s a semantic HTML element which will do that job for you.

And some questions to ask yourself, “Do you need to expose the element as a landmark? And do you need sectioning powers?” If not, it’s a <div>, and that’s, and that’s, those are the those are the kind of similar elements.

So just to sum up, <section> is for creating landmarks on the page for assistive technology. It’s for sectioning Header and Footer elements, so you don’t end up with multiple, which can be confusing, and you’ll, you’ll be breaking, breaking your automated tests with that I’d imagine. It used to be for outlining, not anymore. And then, as well as something different to me in <article>, <aside> and <div>, it has its own has its own use, as distinct from those. Thank you very much. That’s a, that’s me.

>>MICHAEL BECK: Alright, thank you very much Martin. Do we have any questions from anyone,

You need to throw it in the chat, or you can, if you feel like it you can unmute yourself and go ahead and throw that out, well PJ has question.

>>PJ: Now that we don’t have outline and we have the h1 to h6 giving us the structure, one of the problems I think is, is trying to prepare things and have it in a content management system and then being able to pull it in with the correct, you know the correct header. The advantage of something like, I guess a <section> or. Too bad about the outline is that you could create it with, you know, say in h2 and it would always be an h2 but you can pull it in, you know like, wherever it went instead of having to worry about it falling into the structure of the document. It’s more a comment than a question I think.

>>MARTIN UNDERHILL: No is a good point. My templates are often littered with context (Michael Beck laughs) so if this bit of content appears in this particular position, then give it an h2, If not use h1 and h3. Yeah, it gets a little bit burdensome doesn’t it, it’s the, the burden is on the developer I guess. No it’s, yeah, not ideal but…

>>PJ: Well especially if you have lots of people working on teams. It’s really makes it difficult.

>>MARTIN UNDERHILL: Yeah (pause). Yeah, it was one of those things that was a kind of a double edged sword when they, when, I remember being disappointed when it was, when it was removed back in, I think, 2014, but at the same time I guess that whole, that is not a progressive enhancement. It kind of felt like, “Okay, well, this is this, is probably for the best because backward compatibility or we’re not breaking things for, for, for certain users.” But yeah.

>>MICHAEL BECK: Gonzala Saverio ask, “Is the approach you are outlining hold across assistive technology products in versions. And how about the technical ability and age of users?

>>MARTIN UNDERHILL: Is this for the for the for the landmarking for the adding the rule to the <section>, adding the aria-label to the <section>, particularly?


>>MARTIN UNDERHILL: Yeah, it’s pretty well supported. As far as I’m, as far as my experience goes, and the you have tested and, in, in, with lots of different combinations from your VoiceOver in Safari on Mac, same on iOS, and then looking at things like NVDA and Firefox, on Windows, and it doesn’t quite say exactly the same thing but it does convey the meaning of the of the <section>element. Different versions of the screen reader and browser software I wouldn’t want to comment too too authoritatively on that as time is goning by, but but but certainly things are looking good at the minute.

>>MICHAEL BECK: Bruce Blaser asked, “To clarify you do not need to make a <section>, a landmark in order to use the header or footer in it?”

>>MARTIN UNDERHILL: No, no, you can submit a <section> without, without an aria-label or an aria-labeledby attribute. It is just a dev effectively. Apart from the fact that it’ll, it’ll do that sectioning thing with nested footers and headers. It will remove the implicit rules from them, but effectively it’s a <div> so you can use any heading you want inside there. I would use a heading. Just for you, just for the way that document might be, maybe put together, and expect it to be, to be read. But, but yeah, it’s answered your question. Okay,

>>MICHAEL BECK: Let us know if not, but in the meantime, Elizabeth Patrick asks, “Is a section, the same as role=region?”

>>MARTIN UNDERHILL: Yeah, yes, that just exposes something as a region, yeah.

>>MICHAEL BECK: Okay, Sarah Bourne had a comment that, “Our folks, wanted the outline because they couldn’t make it work in their content management system. It turns out the browser’s couldn’t either. Oh, it’s probably still easier to get your CMS to do it though.”

It’s interesting. Okay. Anyone else have any questions for Martin or for, for anybody here? Any burning things that are going on at work. Just don’t get can’t wrap your head around.


>>PJ: Um, I have one more, which is we just mentioned, role=region. How is that it, can then be used in conjunction with <section or other?

>>MARTIN UNDERHILL: Oh, it would be, I guess it would be implicit, with the, with the name, you could add role=region and it would expose as a region but without a label, it’s kind of meaningless. You want to give it some kind of meaning. And you would just use a section element anyway so because things may change things, you know, so the role=region may have or I might know some, I might not know something that the role=region would be, I guess like a button, if you’ve got a button and you give a <div> class of button you’re also gonna have to give it tab index=zero and all those other things that you need to do to expose it as a button properly so you end up doing more work to, to replicate the same thing so I would, I would always air towards using the HTML rather than the role.

I guess it’s a bit like a <nav> element, if you’ve got several <nav> elements on a page which is fine, you’re probably going to want to give each of those, a label, just in terms of looking at all the landmarks on the page, you can read through that list and know that you don’t just have navigation navigation navigation you’ve got primary navigation, you’ve got app, app specific navigation you might have global navigation you see you got different labels for each of the navigations and the same way that you would label each of the <section>s.

>>MICHAEL BECK: Alrighty, I think we are done with our questions and that brings us to an end to this webisode of Technica11y. Thank you Martin for that presentation. Thank you to our attendees, of course, for joining us. Our next episode will be on June 2 at 11am Eastern and features Stockholm’s own Daniel Goranson. He hasn’t said on a topic yet he has three or four that he’s bouncing around and trying to figure that out. But keep an eye on Twitter @tenonapi for that info once he makes that decision. And thank you again, Martin, and we will see you all next month.

>>MARTIN UNDERHILL: Thanks, all.

Martin Underhill

About Martin Underhill

Martin is a principal user experience designer who specialises in accessibility. He designs, builds, mentors, gives talks, writes (https://www.tempertemper.net/blog/), and is a proponent of minimalist, progressively enhanced, usable interfaces and experiences for all users.