Skip to main content
R
r_tist
Inspiring
November 1, 2023
Answered

Accessibility Questions RE: role = presentation

  • November 1, 2023
  • 2 replies
  • 847 views

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.  

 

    This topic has been closed for replies.
    Correct answer osgood_
    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.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 2, 2023

    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
      R
      r_tistAuthor
      Inspiring
      November 6, 2023

      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.

      O
      osgood_Correct answer
      Legend
      November 6, 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 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.

        O
        osgood_
        Legend
        November 1, 2023

        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.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices