diff --git a/curriculum/challenges/english/25-front-end-development/workshop-accessibility-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/english/25-front-end-development/workshop-accessibility-quiz/614394fb41985e0d2012a93e.md index 5a0fd82b33f..c9da5a14149 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-accessibility-quiz/614394fb41985e0d2012a93e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-accessibility-quiz/614394fb41985e0d2012a93e.md @@ -9,7 +9,7 @@ dashedName: step-24 The question numbers are 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 element, is to add text only a screen reader can read. -Nest a `span` element with a `class` of `sr-only` after the number in each of the `h3` elements. +Nest a `span` element with a `class` of `sr-only` before the number in each of the `h3` elements. # --hints-- @@ -37,6 +37,18 @@ You should give the second `span` element a `class` of `sr-only`. assert.equal(document.querySelectorAll('span')[1]?.className, 'sr-only'); ``` +You should add the `span` element before the number 1 within the first `h3` element. + +```js +assert.equal(document.querySelector('span')?.nextSibling?.textContent, '1'); +``` + +You should add the `span` element before the number 2 within the second `h3` element. + +```js +assert.equal(document.querySelectorAll('span')[1]?.nextSibling?.textContent, '2'); +``` + # --seed-- ## --seed-contents--