--- id: 6143931a113bb80c45546287 title: Step 23 challengeType: 0 dashedName: step-23 --- # --description-- Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read. Append a `span` element with a class of `sr-only` to the current text content of the third `label` element. # --hints-- You should add a `span` element within the third `label` element. ```js assert.exists(document.querySelector('.info:nth-of-type(3) > label > span')); ``` You should give the `span` element a class of `sr-only`. ```js assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only'); ``` You should place the `span` after the text content `D.O.B.`. ```js assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\. Accessibility Quiz

HTML/CSS Quiz

``` ```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; } h1, h2 { font-family: Verdana, Tahoma; } h2 { border-bottom: 4px solid #dfdfe2; } ```

Student Info

HTML

CSS