---
id: 6148e5aeb102e3142de026a2
title: Step 67
challengeType: 0
dashedName: step-67
---
# --description--
Finally, the navigation accessibility can be improved with providing keyboard shortcuts.
The `accesskey` attribute accepts a space-separated list of access keys. For example:
```html
Submit
```
Give each of the navigation links a single-letter access key.
_Note: It is not always advised to use access keys, but they can be useful_
Well done. You have completed the _Accessibility Quiz_ practice project.
# --hints--
You should give the first `a` element a single-letter `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1);
```
You should give the second `a` element a single-letter `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1);
```
You should give the third `a` element a single-letter `accesskey`.
```js
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1);
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
HTML/CSS Quiz
--fcc-editable-region--
--fcc-editable-region--
```
```css
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
color: #dfdfe2;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label, .info input {
display: inline-block;
text-align: right;
}
.info input {
width: 50%;
text-align: left;
}
.info label {
width: 10%;
min-width: 55px;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```
## --solutions--
```html
Accessibility Quiz
HTML/CSS Quiz
HTML
1
The legend element represents a caption for the content of its
parent fieldset element
2
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
Submit
```
```css
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: fixed;
background-color: #1b1b32;
top: 0;
}
#logo {
width: max(100px, 18vw);
aspect-ratio: 35 / 4;
max-height: 100%;
background-color: #0a0a23;
padding: 0.4rem;
}
h1 {
text-align: center;
font-size: min(5vw, 1.2em);
color: #f1be32;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li {
display: block;
margin: 0 0.2rem;
color: #dfdfe2;
padding: 0.2rem;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
}
section {
width: 80%;
margin: 0px auto 10px auto;
max-width: 600px;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
margin-top: 0px;
padding-top: 60px;
}
.info {
margin: 0 auto;
padding: 10px 0 0 5px;
}
.formrow {
margin-top: 30px;
padding: 0px 15px;
}
input {
font-size: 16px;
}
.info label,
.info input {
display: inline-block;
text-align: right;
}
.info label {
width: 10%;
min-width: 55px;
}
.info input {
width: 50%;
text-align: left;
}
.question-block {
text-align: left;
display: block;
width: 100%;
margin-top: 20px;
padding-top: 5px;
}
p {
margin-top: 5px;
padding-left: 15px;
font-size: 20px;
}
p::before {
content: "Question #";
}
.question {
border: none;
padding-bottom: 0;
}
.answers-list {
list-style: none;
padding: 0;
}
button {
display: block;
margin: 40px auto;
width: 40%;
padding: 15px;
font-size: 23px;
background: #d0d0d5;
border: 3px solid #3b3b4f;
}
footer {
background-color: #2a2a40;
display: flex;
justify-content: center;
}
footer,
footer a {
color: #dfdfe2;
}
address {
text-align: center;
padding: 0.3em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```