Quick question about section tag regarding accessibility and semantics
I was wondering, with the
section tag, in the MDN docs it says that there should always be a heading/header associated with each section wherever possible, with limited exceptions. I was wondering if adding aria-label to a section was sufficient? Or should I use a heading and add a .sr-only class to it? I'd imagine a screen reader reads it more or less the same, but I'm not sure if it would impact search engine ranking if I'm not semantic.2 Replies
for a section to have any real semantic meaning, they need more than just a heading inside of them sadly. Even if you put a heading in there, it might as well be a
<div>, despite whatever you might have come across.
I always had the same impression that a heading in there is all you need (mostly because that's what you always hear), but you need to have either a aria-label or aria-laballedby... so like, you're better off having an aria-label rather than a heading...
I went into a lot of detail in this video if you want to know more https://youtu.be/ULdkpU51hTQThank you Kevin!! 🙂