curriculum/challenges/english/blocks/workshop-accessibility-quiz/614ccc21ea91ef1736b9b578.md
For this workshop, you have been provided with a basic boilerplate.
Start this accessibility journey by providing a lang attribute to your html element. This will assist screen readers in identifying the language of the page.
Also, remember to link your stylesheet to the page.
You should give the html element a lang attribute. Hint: You can use the value en for English.
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
// TODO: This should/could be fixed in the builder.js
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
You should have a link element in your head element.
assert.exists(document.querySelector("head>link"));
Your link element should have rel="stylesheet" and href="styles.css".
const link = document.querySelector("head>link");
assert.equal(link?.getAttribute("rel"), "stylesheet");
const href = link?.getAttribute("data-href");
assert.oneOf(href, ["./styles.css", "styles.css"]);
<!DOCTYPE html>
--fcc-editable-region--
<html>
<head>
</head>
<body>
</body>
</html>
--fcc-editable-region--
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}