Copy link to clipboard
Copied
Hi
If I add role = "presentation" to a section where a class is included and that class's CSS has a background image where I want to ensure it's marked up as 'decorative', how can I be sure it's not applying to all content within that section?
How do I pin point that it's only applicable to the background image? And, are there any options per WCAG for defining this directly within the CSS to ensure specificity?
<section class="bgPattern" role="presentation">
Thanks.
Yes, so I can assume the entire section content will not be read by screen reader if the role of presentation is applied to it, even though I was aiming to target the one class within that section called 'bgPattern'.
So, I am at a loss as to how to only apply the role to cover a decorative background pattern.
By @r_tist
I don't see the issue here, screen readers won't even know a background image set in css exists- that's exactly why you should not use them to convey any important information you
...Copy link to clipboard
Copied
As far as l know anything in the 'background' doesn't require accessibility applied to it as its purely decorative eye candy, only 'real' content which can be read by screen readers require some accessibility options applied. I'm no accessibility expert but it sounds reasonable.
Copy link to clipboard
Copied
That makes no sense. Probably because you don't know what ARIA presentation role is used for.
https://www.w3.org/WAI/ARIA/apg/practices/hiding-semantics/
What you want is this:
<h2 role="presentation">Democracy Dies in Darkness</h2>
This removes the heading semantics of the h2 element from assistive technologies making it the equivalent of
<div>Democracy Dies in Darkness</div>
.
Copy link to clipboard
Copied
Yes, so I can assume the entire section content will not be read by screen reader if the role of presentation is applied to it, even though I was aiming to target the one class within that section called 'bgPattern'.
So, I am at a loss as to how to only apply the role to cover a decorative background pattern.
Copy link to clipboard
Copied
Yes, so I can assume the entire section content will not be read by screen reader if the role of presentation is applied to it, even though I was aiming to target the one class within that section called 'bgPattern'.
So, I am at a loss as to how to only apply the role to cover a decorative background pattern.
By @r_tist
I don't see the issue here, screen readers won't even know a background image set in css exists- that's exactly why you should not use them to convey any important information you wish users, who need assisted technology, to access - so there is zero need for you to do anything if this background image is purely for decorative purposes and conveys no important information for the people who use assisted technology.
Copy link to clipboard
Copied
Yes, so I can assume the entire section content will not be read by screen reader if the role of presentation is applied to it...
By @r_tist
=========
???
You've never tested sites with a screen reader, have you? You should. It may surprise you. Proper markup and accessibility are essential for visually impaired users to navigate, interact and enjoy their web experiences. Without it, it's all just gibberish.
What goes on in the background, is irrelevant. Screen readers only target actual TEXT and foreground images that are properly marked up inside the <body> tag.
Below is a YouTube video demonstrating JAWS screen reader on both an accessible and non-accessible web page. The differences between them are night & day.
Hope that helps.