question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Region Role and Section - Learn Accessibility by Building a Quiz

See original GitHub issue

Describe the Issue

In Step 16 the tutorial told us to use both section and role="region". According to MDN Web Docs about Region Role states that

Using the <section> element will automatically communicate a section has a role of region if it is given an accessible name. Developers should always prefer using the correct semantic HTML element, in this case <section> , over using ARIA.

And in MDN Web Docs <section> element also states that for best practice there should be a heading inside the section element for accessibility purposes.

I am now left wondering why do we still need to declare the role and aria-labelledby in the section element in this step?

Thank you

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-16

Your code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
			  </ul>
      </nav>
    </header>
    <main>
      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
        <section role="region" aria-labelledby="student-info">
          <h2 id="student-info">Student Info</h2>
        </section>
        <section role="region" aria-labelledby="html-questions">
          <h2 id="html-questions">HTML</h2>
        </section>
        <section role="region" aria-labelledby="css-questions">
          <h2 id="css-questions">CSS</h2>
        </section>
      </form>
    </main>
  </body>
</html>

Expected behavior

To not use roles in section unless its a div and we’re building a semantic that is not defined in the HTML element?

Screenshots

No response

System

  • Device: PC
  • OS: Windows 10
  • Browser: Brave
  • Version: Latest

Additional context

No response

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
bbsmoothcommented, Nov 9, 2022

If you want to turn these sections into landmarks then using a section element with aria-labelledby is the best semantic option. You just don’t need to add role="region".

0reactions
sidemtcommented, Nov 10, 2022

My comment above was a meeting note from our issue triage meeting. And now I read through your comments here and on the forum. Thank you @bbsmooth for a comprehensive explanation.

The proposal we had in the meeting was:

  • Add a step next to this one
  • Modify this step to use div instead of sections (as a false example) such that: <div role="region" aria-labelledby="student-info">
  • Then, in the newly added step, we can teach something like: “It works, but there is a better way to do it. If you use a <section> element it will automatically have a role="region" so you don’t have to add it manually. Also, it is better practice to use correct semantic HTML elements.” And we guide users to modify the code to: <section aria-labelledby="student-info">

I’m not sure what we should do regarding that it’s not recommended to add too many landmarks. I know we want to keep explanations short, but can we add brief notice about this point?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Learn Accessibility by Building a Quiz - Step 15 how to create ...
Learn Accessibility by Building a Quiz - Step 15 how to create region role in section? ; Tell us what's happening: Describe your...
Read more >
freeCodeCamp/6145e6eeaa66c605eb087fe9.md at main
freeCodeCamp.org's open-source codebase and curriculum. Learn to code for free. - freeCodeCamp/6145e6eeaa66c605eb087fe9.md at main ...
Read more >
Learn accessibility by building a quiz - Jin's Devlog
... action="https://freecodecamp.org/practice-project/accessibility-quiz"> <section role="region" aria-labelledby="student-info"> <h2 ...
Read more >
Step 1 | Learn Accessibility by Building a Quiz | PLAYCODE
Welcome to the first part of the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you...
Read more >
HTML: A good basis for accessibility - Learn web development
Next up we'll explore CSS and JavaScript, and how accessibility is ... This gives the input a bigger hit area, making it easier...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found