Learn Accessibility by Building a Quiz - Step 15

HTML-CSS
1

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 region="role"></section>
       <section region="role"></section>
       <section region="role"></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 (Linux; Android 9; Nokia 2.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Mobile Safari/537.36

Challenge: Learn Accessibility by Building a Quiz - Step 15

Link to the challenge:

2

Please. Please fill this out. Please.

3

Good first try but you need to pay closer attention to the language used by the exercise.

Here’s the instruction you were given:
To increase the page accessibility, the role attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The role attribute is a part of the Web Accessibility Initiative (WAI), and accepts preset values.

Give each of the section elements the region role.

Notice that the instruction is teaching us about a new “attribute” called role.
We understand this from this part of the instruction “The role attribute can be used to indicate the purpose behind an element…”

So in HTML, what is an attribute?
An attribute is a type of descriptor that helps the browser understand more information about each tag. So one of the attributes you may have known about is the src attribute which is used in the img tag for example. Recall:
<img src="website-image.jpg"/>
Another attribute you may recall is the type attribute used in input tags:
<input type="text">

So then, knowing this, when someone says they want you to add an attribute called role to the section element, do you then see that the role should be on the left-hand-side, not the right-hand-side of the line?
(look back now at your code, which side of the equal = did you put the word role)

hope this helps

2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.