• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
3

Accessibility Questions RE: role = presentation

Enthusiast ,
Nov 01, 2023 Nov 01, 2023

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.  

 

TOPICS
Code , How to

Views

344

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 06, 2023 Nov 06, 2023
quote

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

...

Votes

Translate

Translate
LEGEND ,
Nov 01, 2023 Nov 01, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 01, 2023 Nov 01, 2023

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>.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Nov 06, 2023 Nov 06, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 06, 2023 Nov 06, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 06, 2023 Nov 06, 2023

Copy link to clipboard

Copied

LATEST
quote

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines