FAQ: Accessibility - ARIA Role: Presentation

This community-built FAQ covers the “ARIA Role: Presentation” exercise from the lesson “Accessibility”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise ARIA Role: Presentation

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

<div role="presentation">
  <p>Hello, World!</p>
</div>

In the example above, a screen reader wouldn’t read div out loud as it has a role of presentation. However, it will read the p as it isn’t a necessary child element of a <div>. What if we didn’t want screen readers to read p out loud, do we also give it a role of presentation? Do we want the screen reader to read p out loud?

1 Like

What does it mean by “This happens because the paragraph is not a necessary child of the div”?

1 Like

Tons of element can be children of a div element, however, only li element can be direct children of a <ul> or <ol>. So when you give role=‘presentation’ to a list, it’ll apply directly to the <li> children of this list.

1 Like

How is a screen reader able to know what is a list if we give the list a role of presentation? I thought that lists should communicate their semantic meaning to screen reader users in order to understand the content.

2 Likes

I don’t think it changes the meaning, just prevents it being read out loud.

1 Like

This lesson is wrong.

Its explanation of how screen readers work is wrong, and it teaches people to use ARIA role presentation when they absolutely shouldn’t.

Screen readers don’t say “ol” out loud - they say “list,” which is helpful context when navigating without seeing the content. That’s not something you want to remove with ARIA. It’s utterly baffling to me how you can teach students how to use semantic HTML and then teach them to remove those semantics to make the experience worse for screen reader users. They’re used to hearing “link” and “heading level one” and “list” when navigating - blind users need to, because how else are they going to know that something is a link? How will they navigate by headings to quickly scan a page if you remove the headings? How will they know they’ve entered a list, or hear how many list items there are if the code tells a screen reader to ignore its semantics? (Hint: they won’t.)

On the other hand, screen readers also won’t read out “div” at all - divs have no semantic meaning, so putting role “presentation” on them is pointless. They are already simply for presentation (grouping content for styling or layout).

This accessibility course is literally teaching people to write inaccessible code. The first rule of ARIA is “don’t use ARIA (unless absolutely necessary),” and this is why - because using it poorly often makes something less accessible, when the whole point of ARIA is to complement HTML and fill some gaps. Not utterly destroy accessibility inherent to the HTML.

1 Like