Inclusive Design Patterns was written by Heydon Pickering and published by Smashing Magazine this past September 2016.

With the author’s interest in new and innovative ways to make the web an inclusive place, in this book, he takes user research, systems thinking and plain old semantic HTML to discuss a series of inclusive design patterns.

These patterns show you how to take advantage of its built-in powers of reach, inclusivity and accessibility, so you don’t lock out any potential customers or visitors, regardless of how they choose to (or need to) access your content… Basically how to use the web properly.

The average user is created from the combination of all users. What we get is, in fact, a completely different user. None of our users is like the average user. Therefore, when designing for that artificial individual we create something that doesn’t fit anyone’s needs.”

– Designing for the extremes, Susana Gonzalez Ruiz

Introduction snippet from the book

• The web is made of code and must be designed, therefore designing with code is working with the right materials. This is the best course of action.
• Content — what we write or otherwise express via the web — must be subject to design thinking and, in fact, all other design decisions should facilitate that.
• Web pages are not immutable artefacts. They should be tolerant of changing, dynamic content. This content should be managed in terms of discrete components which can be reused as agreed patterns.
• The potential audience of a website or app is anyone human. Inclusivity of ability, preference and circumstance is paramount. Where people differ — and they always do — inclusive interfaces are robust interfaces.

Some of the patterns covered

Taken from Inclusive Design Patterns book

The document

Various document-level best practices are discussed, such as the doctype, the lang attribute, responsive design’s breakpoints and allowing pinch-to-zoom, font-size, progressive enhancement and a few most used HTML elements. Keeping all of this in mind, you should ask who benefits from the way you are approaching a task?

• 1 point: it benefits me
• 10 points: it benefits a user/reader like me and with my setup
• 100 points: it benefits me, people like me, and users/readers unlike me, with differing setups

A paragraph

Working from the basic building blocks, out… paragraphs. The typeface and typesetting would be a good starting point to be inclusive. For example legible body text for people with reading disorders, such as dyslexia, is also pleasant body text for those who have less trouble reading.

A blog post

This pattern covers the setup of an inclusive blog post. Semantic structure and source order is taken into account. It also covers effective link text, how to incorporate video content. By incorporating accessible landmarks and a sound section structure, the content becomes more navigable and interoperable by a diversity of users and parsers.

Navigation regions

By creating navigation landmarks, help visitors move around a page quicker, getting to the content they actually want to read. So it is about creating content to help with content. For example you could make the current page link in the main navigation, point to the main region of the page instead. This will take the visitor past the navigation landmark, straight to the content, like a skip link:

<nav>
  <ul>
    <li><a href="/">home</a></li>
    <li><a href="#main">about</a></li>
    <li><a href="/products">products</a></li>
    <li><a href="/contact">contact</a></li>
  </ul>
</nav>

A menu button

Even though a menu button is related to navigational regions, there is a lot covered about it, to fill up its own chapter. From using text with the widely used hamburger menu icon to good practices or the best method creating and using this icon. By using the necessary ‘Menu‘ text and how to label it.

A list of products

Using a product as an example pattern, it becomes clear, using standard technologies in expected ways often means less work. Going through the basic structure of a product item in a list, it includes methods on structuring the key information, product thumbnail, call-to-action button and appearance in SERPs.

This pattern ensure a user always have a choice how to browse the page. It might be by the headings of each product in the list or a screen reader might want to move from one list item to the next.

Taken from Inclusive Design Patterns book

A filter widget

After going in-depth with the Product Pattern, this chapter focus on how tools can be provided for users to reorganise and sort lists of content. This allow users more control over their search and give them the ability to prioritise the information they are viewing. There is a lot of focus on achieving the inclusion with available HTML and CSS instead of trying to fix things with JavaScript and WAI-ARIA. The chapter does however contain excellent examples of JavaScript enhancement.

A registration form

This pattern embrace standards whilst dealing with potential usability failures. The relationship between standards and usability is where inclusion can be found. From setting up a basic form, focusing on the labelling and focus, available attributes and validation.

Test-driven markup

In this chapter, I found it rather clever how CSS selectors are used as a tool to test against the elements’ properties and relationships.

The author has created an experimental CSS testing bookmarklet, Revenge.css, that reports bad html using pseudo content. If the page being tested has malformed links, deprecated attributes, <div>s inside inline elements, inaccessible buttons, badly nested sections or other errors, some ugly, pink errors written in nobody’s favourite font (Comic Sans) will appear.

There is also A11y.css, which is a bit more advanced CSS accessibility tool, by Gaël Poupard. It positions each pseudo-content message at the top of the document and reveals it on hover.

Principles for inclusion

With all that said, this simple list of principles by Henny Swan, is a great take-away when designing patterns:

1. Give users choice.
2. Put users in control.
3. Design with familiarity in mind.
4. Prioritise features that add value.

In the world of WordPress, the wA11y plugin by Rachel Carden was released beginning of August 2016. After installing the plugin, it makes a few tools available, such as Tota11y and WAVE, to help evaluate and improve the accessibility of your website. I am using it now with all my WordPress theme developing and find it very useful as part of a WordPress front end development process.