Design Patterns
Recurring, best practice, or common conventions to help you design and build products that make sense to a user.
Motion
Reducing Motion to Improve Accessibility
Animations, zooming, and panning can be problematic for people who have vestibular disorders. These disorders can cause motion sickness and vertigo. These are uncomfortable feelings that you don’t want to deal with ever, let alone on a website.
Modal Dialog
An Accessible Modal Dialog with HTML, CSS, and JavaScript
In this post I want to share with the community a modal dialog I have implemented with HTML, CSS and JavaScript, that satisfies the tests set by the W3C WCAG working group.
Focus Indicators
A guide to designing accessible, WCAG-compliant focus indicators
This guide is aimed at both designers who want to learn about accessibility considerations for designing focus indicators, as well as developers who want to implement them.
Buttons
Understanding Logical Focus Order
Showing buttons as disabled until a form is complete might seem like a good idea. It is not. They usually create a lousy user experience and exclude many people with disabilities. Here’s why disabled buttons suck and what to do instead.
Focus Indicators
Understanding Logical Focus Order
Logical focus order is a key element of web accessibility and is required by WCAG 2.1 in order to meet Level A standards. Let’s dive into what it is, why it matters, who it benefits, how to test for it, and some common pitfalls to avoid.
Accessible Components
Accessible Code Reviews
Accessible code reviews can greatly improve the accessibility of your web content.
Accessible CSS Art Drawings
Creating Accessible CSS Art Drawings
CSS art has been a thing since the creation of CSS itself. It is a great way of practicing and learning and it makes for an interesting coding challenge. But it has a big problem - CSS art is inherently not accessible.
Accessible Overflow
Accessible Overflow
One major tenet of web accessibility is that users have various strategies to operate your website.
Menus
Building Accessible Menu Systems
There are lots of different types of menu on the web. Creating inclusive experiences is a question of using the right menu patterns in the right places, with the right markup and behavior.
Inputs
How to design better inputs
A comprehensive guide for UX and UI designers
Links
How to make "Read more" links accessible
Read more links are commonly used on websites, but they aren't very descriptive when read outside of their surrounding context.
Scroll-to-top
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.
Design Patterns
Paragon
An accessible, theme-ready design system built for learning applications and Open edX.
Design Patterns
Style Guide Best Practices
Style guides and pattern libraries are essential tools to help Web teams maintain sanity while creating experiences for our multi-device Web.
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
Simply Accessible
A repository of code examples that we are use by Simply Accessible for trainings and workshops.
Forms
Making forms more user-friendly
Practical tips for designing simple and inclusive forms for the web.
Charts
Charts & Accessibility
Charts, graphs and maps use visuals to convey complex images to users. But since they are images, these media provide serious accessibility issues to colorblind users and users of screen readers.
Forms
Everything You Need to Know About Designing Accessible Forms
Explore why best practices for designing a form in an accessible way.
Skip Links
Your skip links are broken
Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
Design Patterns
Yale UI Component Library
The Yale UI Component Library is a resource designers and developers can use to make it easier to build consistent user interfaces that follow Yale’s usability, identity, and accessibility standards.
Focus Indicators
Designing a focus style
Focus is important. It tells us what element we’re currently focusing on. Most developers suggest keeping the default focus style.
States
Active, Hover, and Focus States for Designers
It can be helpful to understand these concepts and their differences during both the design and development process.
Select Elements
Striking a Balance Between Native and Custom Select Elements
This “hybrid” select is another attempt to create a good looking select while getting as many native features as possible.
Tables
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.
Accessible Components
Accessible Components
Listing of accessible components & patterns.
Developer Tools
DevTools Tips
A collection of useful cross-browser DevTools tips
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.
Design Patterns
Patterns – GOV.UK Design System
gov-uk Patterns are best practice design solutions for specific user-focused tasks and page types.
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.
Design Patterns
The Guardian Digital Design Style Guide
The Guardian's design patterns explained.
Toggle Switch
CSS Toggle Switch
Accessible CSS toggle switch using standard form controls
Tabs
React Tabs
An accessible and easy tab component for ReactJS.
Accordion
React Accessible Accordion
React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.
Carousels
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.
Skip Links
Imagining native skip links
Except a skip link is not so trivial to implement.
Navigation
An Accessible Current Page Navigation State
Design and technical considerations behind the icon that indicates what page you're currently on.
Speech Bubbles
Creating comic book speech bubbles with SVG and javascript
How to accessibly render comic book dialogue, most commonly presented as text in speech bubbles.
Tooltips
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.
Inputs
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.