What tag should be used in the shown section?
What tag should I use in the part where there is a photo, which is the best approach?
58 Replies
what you' suggestion?
I tend to go with a section
with what class?
Someone else said try not to use section. Unless it is with a label.
thank you Mr @trashlord
You will have to label it, I would take a look into how a screen reader parses a page.
What you give as a class name should be relevant to what it is, but that's for you to decide.
so it good to i use aria-label here.
yes
Why would you be using aria-label here for a section? @trashlord
Because its a giant image that may have text in it
Can't that be explained with a heading?
I'd have to double check
if i don't wrong because for screen-reader.
You should aim to use semantic elements when possible over aria attributes. Is it just going to be a plain image? I'm assuming you're going to have text where the image, in which case you can use a h1
actualy this is my design
Yes so I wouldn't use an aria-label; just put "Your safety our responsibility" in a h1.
Many front-end trainers say that the section should be used with aria-label, and without it, there is no benefit to the web.
This is great for screen readers because many people with vision problems need to be able to understand the web page just fine.
NCState
YouTube
How Headings Help Screen Reader Users
Why are document headings important? One of the main
beneficiaries of headings in documents is screen reader users. They
enable screen reader users to quickly skim and navigate a document
without having to first read the entire page in order to understand
the gist of the document.
To download a full transcript of this video, please follow...
Sidenote: it depends on the reader/browser too. I've been fighting with this one cause most still need you to set a
aria-labelledby using the id="headingName" from the h1
Some readers will assume landmark/regions names by the heading but not all.
It's really annoying honestly it should just work without the labelledbyReally? First I'm hearing of this. I've always just done a section with a header, with a heading inside the header and thought that was all good for accessibility, but now you're saying it depends on the reader/browser?
Wouldn't that mean all sections need a aria label?
You thought it was good or you tested it?
Do I have to tap the sign?
"Assuming this works cause I've been told it does" is not the way. Please test these things for yourself.
Yes that is what it means
🫣
Again it depends on the reader and the browsers combo
Thanks for the info, I'll have to start testing legitimately now because apparently everything I know is a lie 😂
Best practices are a lie
Test or die
In my opinion, it is good to use the Aria-label, even if the screen reader is not used, it is not harmful, so let's use it. Am I right?
Wrong
Best Aria is no aria
Its more harmful if you are just adding Aria-labels on things....
🤦♂️
Like Vince said.. Start with semantic HTML first
then test with a reader
then add aria labelled by (with heading id's) where its needed.
which best readers?
You should only be using aria-label for specific use cases, like a inline SVG logo
or if the reading is off and needs more info.
the one that works on your OS xD
Of course, I didn't mean to use it all the time, I meant to use it for tags like sections.
again no you should only be using aria-labelledby with a heading
id
Semantics firstWhat do you mean by heading id?
w/e you name it ya
yes right I understood the same thing, but for a moment I thought you meant something else. Thankful
so in this case i use section and h1 with id. is better? (because this is a practice)
So the bigger thing and reason this is important for readers is how they use Lists too
You have a Landmark/Region list and if they all have proper labels the users can navigate better using that list.
They also have a Headings list
See I thought that the association was automatic, even in the mdn docs it says that (paraphrasing) "Sections should almost always be accompanied by headings" which I thought implied that there was a semantic/accessible relationship between the two
So its just as much about navigation (they are not tabbing around) as it is reading the title.
Yea I've read things that even say that it should be... Testing proves otherwise
Also how <articles> are treated is different too
really annoying
Sorry @Davood 🍁 for misguiding you 🥺
not problem.
I would question why a section has the h1 and not a h2 though
sections are a section of another landmark
excuse me i am a begginer in front-end and not know landmark. what is landmark?
like
https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
section region when it has an accessible name using aria-labelledby or aria-label
here what is landmark? which tag is landmark?
Like this is crap that erks me... lol section is only a region if it has a label? like really? haha but yea test show that is correct.
I guess because section isn't really all that semantic, so it's only a region if you denote as such
yea ig xD
but if header/footer get special treatment based on their relation to body idk why they didn't do it here.
if header/heading level is the first child even seems like it would work well 🤷♂️
Yea idk I can only cry when it comes to accessibility 🤣
I tried to read this article, but since I don't know much English because I'm not a native English speaker, I still don't understand what Landmark is?
It is a role you assign or is given by default to those semantic elements that have one
header, footer (in body), main, aside, nav, section (with a label).
Article imo should be one but its not xD
Thanks, but I'm really confused about this. I don't want to disturb you. But is it possible to give me an example? if you have time
idk what more you want
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
Semantic elements are assigned some Roles by default
You really need to fire up a screen reader, it would probably make most sense that way honestly.
Again .. don't just read/learn best practices... Test your site
thank you for getting that across
oh sidenote: You also have the accessibility tab in DevTools
I use PolyPane which has little more features but ya honestly boot up a Screen Reader. Best way to learn what you are trying to do.
@b1mind Thank you for your advice and answers.