Design Patterns

Recurring, best practice, or common conventions to help you design and build products that make sense to a user.

hiddedevries

Design Patterns

Heading structures are tables of contents

The heading structure of a web page is like its table of contents. It gives people who can’t see your page a way to navigate it without reading everything.

Developer Tools

Accessible Components

Listing of accessible components & patterns.

web-axe

Curated List

Web Accessible Code Libraries and Design Patterns

Within a web development organization, it’s ideal to maintain (and enforce usage of) design patterns and a components library. And they should work together; design patterns create consistency among visual elements across projects and the components library creates consistent implementation of those patterns during development.

gov-uk

Design Patterns

Patterns – GOV.UK Design System

gov-uk Patterns are best practice design solutions for specific user-focused tasks and page types.

gov-uk

Design Patterns

Components – GOV.UK Design System

Components are reusable parts of the user interface that have been made to support a variety of applications.

theguardian

Design Patterns

The Guardian Digital Design Style Guide

The Guardian's design patterns explained.

Design Patterns

CSS Toggle Switch

Accessible CSS toggle switch using standard form controls

Design Patterns

React Tabs

An accessible and easy tab component for ReactJS.

Design Patterns

React Accessible Accordion

React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.

boia

Design Patterns

Effective and Accessible Alternatives to Website Carousels

Carousels were cutting-edge at one time. Everyone wanted them in their redesigned websites because they seemed innovative and engaging. It turns out, they're not engaging (at least not any longer) and users tend not to interact with them compared to other content displays.

Design Patterns

Imagining native skip links

Except a skip link is not so trivial to implement.

callumhart

Design Patterns

An Accessible Current Page Navigation State

Design and technical considerations behind the icon that indicates what page you're currently on.

html5

Design Patterns

Placeholder – the piss-take label HTML Accessibility

The reasons why use of the placeholder attribute as the only means of providing a user readable prompt for a form control is deficient UX, are voluminous. It is frustrating having to rehash this discussion endlessly.

humaan

Design Patterns

Creating comic book speech bubbles with SVG and javascript

How to accessibly render comic book dialogue, most commonly presented as text in speech bubbles.

Design Patterns

The problem with tooltips and what to do instead

Tooltips are messages that appear when the user hovers over part of an interface—usually an icon—to explain how certain things work or what they mean.

Design Patterns

Build a Better Mobile Input

By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices.

bbc-gel

Design Patterns

BBC GEL Design Patterns

Patterns are a simple, reusable solution to a design problem.

Design Patterns

Datepickers - Accessibility Quick Guide

Custom JavaScript Datepicker controls are almost always inaccessible to keyboard and screen reader users. HTML5 input type="date" will give you an accessible date picker in most browsers, but not all like Safari macOS where native datepickers are not supported yet.

Design Patterns

Grids Part 2: Semantics

This is part 2 in a series about ARIA grids (not at all related to CSS grids)

Design Patterns

Grids Part 1: To grid or not to grid

Part of this flood of grid accessibility questions might be caused by a quirk of where I happen to work, but I don't think that's the only reason tables and grids are over-represented in accessibility bugs.

Design Patterns

Build a responsive accessible table

Tables on mobile are sometimes not very user-friendly. That might be because of horizontal scrolling, or you have had to resize content and hope it fits a 320px viewport.

Design Patterns

Accessible Icon Buttons

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.

Design Patterns

More Accessible Skeletons

Many skeleton patterns do a poor job presenting themselves to screen reader users in any meaningful way.

Design Patterns

Accessible Slick

The last (accessible) carousel you'll ever need. A fully accessible, WCAG 2.0 / 2.1 compliant, drop-in replacement for Slick Slider (1.8.1) crafted and tested by expert users and professional accessibility consultants, intended to make life easier for real-world dev teams who need to pass accessibility audits.

Design Patterns

Accessible HTML Content Patterns

Accessible, semantic markup patterns for HTML content.

Design Patterns

Nutrition Cards for Accessible Components A11Y Expectations

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

Design Patterns

Frend

A collection of accessible, modern front-end components

Design Patterns

Accessible Circular Sliders

Just a few years ago, it was almost impossible to create range sliders without a lot of JavaScript. Thankfully, in modern browsers, it's super-easy to style range sliders, using CSS only. If the browser supports CSS Custom Properties, it's even possible to use the same styles for a wide range of different styles, just by updating a few properties.

Design Patterns

Content-visibility and Accessible Semantics

This feature is meant to improve page load performance by skipping over content detected as being "off-screen", or outside of the viewport.

Design Patterns

TabPanel/Accordion Widget

First class support for screen-reader users! ARIA controls the rendering of their non-visual experience.

Design Patterns

Designing Accessible Navigations

When designing a navigational experience, designers should make sure that all users, impaired or not, are able to maneuver through your site’s content at their own pace with little to no frustration.

Design Patterns

How to Make Emojis Accessible in HTML

To make sure screen readers could read the emojis in my bio in a way that made sense, I did the following three things.

Design Patterns

Accessible, Smooth Scroll-to-top Buttons with Little Code

Scroll-to-top buttons are great for pages that are long enough to require a few scrolls to read everything. They're even better for extremely long pages. Scrolling is a lot of work for some users, especially on a mobile device. We (website creators) can greatly reduce the amount of work it takes to scroll our pages with surprisingly little effort on our part.

Design Patterns

Accessibility Code Library

This is a collection of accessible solutions. The links take you to a page demonstrating the fully functional widget.

Design Patterns

Using Meaningful Link Text

Link text should be unique within a page, should be meaningful when read out of context, and should help users to know something about their destination if they click on it. Link text such as “Click here” and “More” fail to meet these criteria.

Design Patterns

A plan for accessible maps

Designing accessible interactive maps is hard. I don’t think I could point to any single thing that I’ve worked on that covers all of the things mentioned here. But, if I was going to start a brand new project, with plenty of time to get things right, this is where I’d start.

Design Patterns

Building an accessible autocomplete control

Adam Silver write an end-to-end process on how to build an accessible autocomplete control.

Design Patterns

The main reasons why we shouldn't use click here as link text

A typical pattern on the web is for links to hide behind text that says “click here”, “read more”, or similar. I’m going to share the reasons why this is bad and suggest some better patterns to use.

Design Patterns

Creating an Accessible Range Slider with CSS

I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills.

rangeslider

Design Patterns

Creating an Accessible Range Slider with CSS

A thorough guide of creating an accessibile range slider with CSS.

datepicker

Design Patterns

Date picker WCAG 2.1 compliant

An open source date picker UI pattern in WCAG 2.1 compliant.

Design Patterns

4 Major Patterns for Accessible Drag and Drop

Building an interaction that works for both mouse and non-mouse users.

Design Patterns

A11y Styled Form Controls

A repository of styled and "styled" form control elements and markup patterns, and how they are announced by screen readers.

webaxe

Design Patterns

Developing accessible cards/tiles

The card pattern (also known as tiles and blades) has become quite popular over the last several years - here are a several great resources on building accessible cards/tiles.

card-blocks

Design Patterns

How to build accessible cards–block links

Explore some key approaches to ensure that, as well as looking good, your cards are also accessible and offer a usable experience.

WCAG-accessbility-checklist

Design Patterns

Forms design best practice

Best practice guidelines for form design.

nickbabich

Design Patterns

10 Rules For Efficient Form Design

Users can be hesitant to fill out forms, so you should make this process as easy as possible. We need to make the form design our strength rather than weakness.

modal-window

Design Patterns

a11y Dialog

A very lightweight and flexible accessible modal dialog.

ebay

Design Patterns

eBay MIND Patterns

eBay's Accessibility Patterns for the web intended to complement those systems & tools with accessibility guidance.

components

Design Patterns

Inclusive Components

All about designing inclusive web interfaces, piece by piece.

a11yguide

Design Patterns

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles...with an accessibility twist.