Menu Search
Jump to the content X X

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 book1 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 line2. 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! :-)

Footnotes

  1. 1 https://shop.smashingmagazine.com/products/pre-release-inclusive-design-patterns-by-heydon-pickering
  2. 2 https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.aagksd6j2

↑ Back to top Tweet itShare on Facebook

Heydon is a designer, writer and public speaker. He works with The Paciello Group as a UX and accessibility consultant. His book, Inclusive Design Patterns, is available in hardcover and as an ebook from Smashing Magazine.

  1. 1

    Page 53: the code snippet should use em for media queries (as stated on page 30).

    @media (min-width: 120rem) {
    html {
    font-size: 150%; }
    }
    }

    should be

    @media (min-width: 120em) {
    html {
    font-size: 150%; }
    }
    }

    1
  2. 2

    Page 274:
    <strong class="red"*

    Page 301: The is no such thing as the ERROR property in CSS…

    0
  3. 3

    Thanks for the very interesting and rewarding read *Heydon*. This was my first SM book, and I look forward to a chance to dig into another.

    Here are a few things I noticed while reading:
    **Page 148**
    – The `_` appearing in the regular expression `var fragmentPattern = /#._$/;` should be a `*` (or `*?`) to match the all characters in the anchor fragment.
    – A bit further down the page `|| document.querySelector(‘aname=”‘` appears without the space between the tag and attribute, `’a name=”‘`

    **Page 283**
    It feels like the CSS block is incomplete, especially since the note following the CSS block refers to a background icon that is shown differently on the following page. The `()` in `background: url () center right;` didn’t seem right either, and I ended up on [Ben Nadel’s blog](https://www.bennadel.com/blog/2236-empty-src-and-url-values-can-cause-duplicate-page-requests.htm) suggesting that `url()` would request the current page again.

    Cheers,
    Sean

    1
  4. 5

    Gunnar Bittersmann

    February 10, 2017 5:02 pm

    Amazing work, very useful. Thanks, Heydon.

    Inputs for email addresses shoud be of `type=”email”`:
    <input type="email" id="email" name="email">

    This applies to code samples on pages 266, 269, 274, 275, and also to page 272 when changed as stated above.

    0
  5. 6

    It might be worth mentioning that some browser don’t support changing the input types. Then, show password functionality won’t work. Perhaps it changed over time, but I remember some time spent on this topic two years ago, and only thing that really work was cloning the password field and append a new one with type=text.

    0
  6. 7

    Page 285 RERUNNING THE ROUTINE

    “Once the user is actively engaged in correcting errors, I think it helpful to reward their efforts as they work.For fields now marked invalid, we could run our validation routine on each input event, switching aria-invalid from false to true where applicable.”

    Do you mean change the input invalid to valid or change aria-invalid=”false” to aria-invalid=”false”?

    0
    • 8

      sorry for the typo.

      Do you mean change the input invalid to valid or change aria-invalid=”false” to aria-invalid=”true”?

      0
  7. 9

    Microcopy- Page 288
    First bullet should be “Get out of your own head and get to know the user”. It is missing “of” and sort of gives a different meaning to Bill Beard’s explanation on it.

    0
  8. 10

    Eli Rabinovitz

    July 17, 2017 2:24 pm

    Hi,

    Found a broken link:
    http://mrmrs.io/writing/2016/03/23/the-veil-of-ignorance/
    I think this might be it:
    https://medium.com/@mrmrs_/the-veil-of-ignorance-575f6a53a575

    Thanks for the book, looks very interesting and is fun to read too.

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top