SPIDER

Smashing Magazine's Inclusive Design Patterns by Heydon Pickering: Book Review

Prashant Sani -

Heydon Pickering is a well-known web accessibility expert & recently he published a book with Smashing Magazine by the name "Inclusive Design Patterns". People accessing web have different abilities & needs, use different tools to access the content on websites. The book looks at patterns that enhance the accessibility of our Interfaces and make them Inclusively Designed.

Physical Quality of this hardback book feels absolutely sturdy with the high-quality pages; and like Smashing Book #5, the book contains an orange bookmark stitched to its spine. Every Print order is accompanied with an ebook version in EPUB, PDF and MOBI formats.

The topic of accessibility could be very dull and boring. The author, Heydon makes sure to keep his readers engrossed and entertained with his witty and skillful writing and his whimsical stick figure adventures.

Heydon inquisitively talks about paper prototyping, which involves creating an interactive prototype from paper, which - with help of someone to manually operate it- allows user testers to play with a rough-&-ready demo version of app/website. Over the years as a web developer, I have heard of interactive website mockups & image based prototyping tools like Invision. But, knowing that we could also make an interactive paper-prototype based on a rough Wireframe that we have built, was quite thought-provoking.

Some of the patterns in the book talk about alternative methods and ways of achieving a design solution keeping accessibility in mind. One of the patterns is avoiding repetitions where ever possible. We usually have 2 links that link to the homepage in the <header> section/tag of our website, one being the logo link and the other one in the navigation. He proposes that the logo should be placed inside the home-page link of <nav> tag to avoid repetition. The logo could be, then positioned using CSS. The following code snippet could be helpful in explaining this in more detail.

Conventional Pattern

<header>
    <h1><a href="index.html">
            <img src="logo.svg" alt="Logo">
        </a>
    </h1>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

Proposed Pattern

<header>
    <nav>
        <ul>
            <li><a href="index.html">
                    <img src="logo.svg" alt="Logo">
                </a>
            </li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

Although this is quite an ingenious pattern, this could also turn into an antipattern in some situations, for instance, when the <nav> tag is placed inside a hidden model (popup/lightbox) and only visible on click of a hamburger button. Since the nav is hidden/and or off the view, arranging CSS for the logo could be either impossible or involve lots of obtrusive JavaScript based positioning logic.

Other than the point above, I unanimously agreed to almost all the points & patterns that Heydon speaks about in the book.

Some of the key points

Some of the points I found worth sharing are as follows:

  • The web is made of code and must be designed, therefore designing with code is one of the best methodologies to be used while building UI of a website
  • Web Pages are not immutable artifacts. Inclusive Interfaces are tolerant of dynamic content & ever-changing context in which websites are consumed
  • Design not only includes creating mockups in Adobe Photoshop, Illustrator or Sketch; it also involves thinking about the structure of data & trying to arrive at the optimal solution
  • In some cases, your website images could be eliminated if the user has Windows High Contrast Mode enabled
  • Never disable "pinch to zoom"
  • Web fonts are typically large assets which should be treated as an enhancement.
  • Try using a font which has a large international character set
  • Very high contrast can actually diminish readability for some users. Sufferers of Irlen syndrome are sensitive to glare, and stark contrast can result in blurred text or text that appears to move around
  • To make sure font-size, padding, and margin all resize proportionately, each should be set using relative units, em or rem
  • Elements using viewport units cannot be scaled using the full-page zoom.
  • Any opinionated frameworks not easily configurable for inclusive design techniques should be avoided. They lead you to build poor products
  • Content should be available to users who do not have JavaScript running or for whom JavaScript has thrown an error, been blocked or failed to load
  • Video Player should be keyboard and screen reader accessible. So should be every element of UI
  • HTML5 hidden attribute is used to hide the elements both visually and from screen readers
  • We need to be mindful not just of the code and the visual design, but also our choice of words in UI

When all users' needs are taken into consideration in the initial design process, the result is a product that can be used by the broadest spectrum of users.

-- OXO Good Grips

Test Driven Markup

We all have heard about Test Driven Development, which usually involves adding test cases in a JavaScript file or some special-syntax-based-test-cases (like Galen ). In any case, we do have to learn the syntax or the methods and properties of a library and they are more associated with JavaScript than HTML or CSS. But, Heydon sagaciously uses CSS to write tests for curbing any HTML markup related issues/errors. Since well-formed markup is a big contributor to web accessibility, a kind of TDD for markup can keep us from building uninclusive patterns.

Everybody is a keyboard user when eating with their mouse hand.

-- Adrian Roselli

Noteworthy Tweets




Web pages are not pinboards for images, but they can be described as terminals through which they accept and display information. The websites should always allow the user to accept information and display the content in most accessible way possible. Implementing a website which looks aesthetically pleasing as well as functional & accessible should be the primary focus of any developer.

I would recommend this book to anyone looking to make their websites more accessible. Some of the techniques described in the book can be implemented easily and the benefits of having them are huge.

Rating: 8/10

Customs, Duties & Delivery

  1. Customs/Import Duties on educational books in India is zero and books ordered from Smashing Magazine delivered through the local post office. For other countries, you can check with your local customs office.
  2. Smashing books usually sent through priority mail and are delivered within 10 days of shipment. (Postal Address: in Mumbai)
  3. All of the orders from Smashing Magazine that I have received till date have come neatly packaged in a hard cardboard box, leaving little room for damage.
  1. Buy Inclusive Design Patterns
  2. Heydon's Blog/Website
  3. Tips for creating accessible SVGs
  4. Practical ARIA Examples (Article by Heydon Pickering)
  5. Video Tutorial - Accessible Modal dialogs
  6. Nielsen Norman Group - Drop-Down Menus: Use Sparingly
  7. UK Govt.'s Accessibility Blog
  8. Don't Make Me think
  9. Marco's Accessibility Blog

Opinions are my own. As of the publish date of this article, I m not affiliated with Smashing Magazine or any of its advertisers. All pics are shot by me using an iPhone SE. Edits are done using MacOS Photos App and Instagram.