Learn Accessibility by Building a Quiz - Step 15

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!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"></section>
        <section role="region"></section>
        <section region="bottom"></section>
      </form>
    </main>
  </body>
</html>

/* file: styles.css */
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Learn Accessibility by Building a Quiz - Step 15

Link to the challenge:

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

let’s read from instructions

Give each of the section elements the region role

now if you look at your attempt you will see its not quite accurate (one of them is not correct!!), address that change as it says in “instructions”, happy learning :slight_smile:

Thank you, A.B.
Please forget this instruction. Until reading this, I knew nothing about “role” of “region” in any HTML or CSS context.
I most courses there are lesson guides or books. I am asking if there are for these courses, and if so for a link to them.
My confusion may have confused you as well.
– Fred

there are many online resources that explain HTML tags and attributes.
for eg if I don’t know what a region attribute is I can do a quick google search like this
html region attribute

And get results that give examples and explanations.
Suggest you try this now.

Thank you, @hbar1st .
I have done the searches. Reading the attribute name and definition really did not help me understand the ~~~ when, where and why ~~~ of how I would use it. I was hoping to be pointed to some lesson guides that give this. I can see the source code used in the preview and copy that. Doing so does not help me learn how I should use it.
Now I see that I have a Code of Conduct warning with this question. :frowning:

you don’t have any COC warning (That was just a bad flag that was cancelled).

Your question before sounded like you just wanted to know more about the ‘role’ and ‘region’ than what you saw in the curriculum and the response is that you can google that.

Now with this new question, “when, where and why”, you can do the exact same but just change the question you’re posting to google.

Here is a beginner’s guide to ARIA for eg that you can read
https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility#:~:text=ARIA%20is%20a%20set%20of,can%20help%20bridge%20those%20gaps.

And you can go from there with more specific google searches as needed.

Thank you again, @hbar1st .
It appears that my original question is lost. I hoped to be directed to a course reference or curriculum for the course. Just some way to learn what I was doing.
Thanks again. I am learning - that I don’t know enough to ask intelligent questions.

The -curriculum- is the curriculum.
There is no separate curriculum that describes the curriculum.
If you have understood everything you are presented with and you need additional references, you need to use the internet to research the additional information you feel you want to learn.
Everything you see when you click on the “Visit the Curriculum” link is the entire content of the project based courses offered by fCC.
fCC also offers articles (searchable via google) and courses through the youTube channel.
There are no other references or books.

Understood, @hbar1st . Thank you.

1 Like