Errata Inclusive Design Patterns Book
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Start with a free demo —
Click here to kickstart your project for free in a matter of minutes.
Check the frontend report!
Take a break with a 3D game built on Netlify!Mistakes happen to all of us, but we cannot undo mistakes that are caught in a printed book. So let’s collect the errata of the Inclusive Design Patterns book below:
Page 83
The class .visually-hidden has one line of CSS missing which is white-space: nowrap;. The white-space property forces the content to render on one line. Thefore, the whole CSS for .visually-hidden should read:
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}Page 148
The getFragmentId has a typo. I’d should be id.
On the same page, in the query selector too, the id has become I'd and there is no opening square bracket while selecting the element.
Page 174:
menu.hidden = !expanded;should be
menu.hidden = expanded;Otherwise this would require two clicks to open the menu from its default closed state.
Page 272: The code sample appears to be missing the top portion of the form:
<input type="text" id="username" name="username" placeholder="e.g. HotStuff666">
<label for="password">Choose a password</label>
<input type="password" id="password" name="password">
<button type="submit">Register</button>
</fieldset>
should be
<form id="register">
<fieldset>
<legend>Registration</legend>
<label for="email">Your email address</label>
<input type="text" id="email" name="email">
<label for="username">Choose a username</label>
<input type="text" id="username" name="username" placeholder="e.g. HotStuff666">
<label for="password">Choose a password</label>
<input type="password" id="password" name="password">
<button type="submit">Register</button>
</fieldset>
</form></li>Page 276:
<label for="password">Choose a password<label>
<input type="text" id="password" name="password">
<label><input type="checkbox" id="showPassword"> show password</label>should be
<label for="password">Choose a password</label>
<input type="password" id="password" name="password">
<label><input type="checkbox" id="showPassword"> show password</label>Otherwise the password will be visible with the “show password” checkbox unchecked.
Please let us know in the comments if you have found any further errata. Thank you! :-)
