Errata Inclusive Design Patterns Book

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! :-)