Resources

Intresting and usefull Portfolios, Articles,Videos around the web.

Categories

  • All
  • Books
  • Blog
  • Color
  • Color Generator
  • Community
  • Design Patterns
  • Design Systems
  • Design Studios
  • Emails
  • Gaming
  • Guides
  • Media
  • Newsletters
  • Plugins
  • Resources
  • Software & Tools
  • Web Standards
Developing Inclusive Mobile Apps
Books
Building Accessible Apps for iOS and Android.
Inclusive Design for a Digital World - Designing with Accessibility in Mind
Books
What is inclusive design? It is simple.It means that your product has been created with the intention of being accessible to as many different users as possible.
Paste
Design Systems
Design System for creating high quality, inclusive customer engagement experiences.
Striking a Balance Between Native and CustomSelect Elements
Design Patterns
This “hybrid” select is anotherattempt to create a good looking select while getting as many native features as possible.
Making information and the words we useaccessible
Guides
The best way to find out how to makeinformation accessible is to ask the person or the people you will be giving the information to.
Inclusive teaching - audio describing your ownpresentations
Guides
Here’s some practical tips andexamples that show how some small changes in the language you use can make a significant difference for people in the audience that benefit from your descriptions of the visuals.
WCAG easy!
Guides
Understand once and for all how toproperly apply WCAG in your digital products.
Mobile Accessibility - How to Build Apps thatWork for All Users
Mobile
On the web, we’ve made a lot ofprogress, and it’s generally accepted that accessibility is crucial in creating digital products thateveryone can use with ease.Mobile accessibility, on the other hand, is still fraught with problems.
Typographic accessibility in more detail
Software & Tools
The three pillars of accessibility -emotional, functional and technical - can be applied to any output whether that is a product or a service.Each industry and sector will have its own specific definitions relevant to their output.
Making Content Usable for People with Cognitiveand Learning Disabilities
Web Standards
This document is for people who makeweb content(web pages) and web applications.It gives advice on how to make content usable for people with cognitive and learning disabilities.
What is Inclusive Design, anyways ?
Article
Inclusive Design is design thatconsiders the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.
Eric Bailey's Blog
Blog
Blog on accessible and inclusivedesign.
Sarah Higley's Blog
Blog
A collection ofaccessibility - focused articles.
Fingerspelling
Software & Tools
Learn the ABC in American SignLanguage with machine learning.
Scott O'Hara's Blog
Blog
A collection of articles onaccessibility and UX.
Digital Accessibility Experts Podcast by HassellInclusion
Podcast
Whether you call it Inclusive Designor Digital Accessibility, whether you're an individual with a passion or an organisation wanting to knowmore, this podcast explores a range of topics on accessibility.Hosted by Jonathan Hassell, its aim is toshare inspiration, expertise, and hints and tips to help speed you on your digital accessibility journey.
Hassell Inclusion Blog
Blog
Regular blogs from the HassellInclusion team on a range of topics from the strategic through to the more practical.
Pixels vs.Relative Units in CSS - why it’s stilla big deal
Article
Long live the modern browser!Browsers are getting better these days.We seem to be in a golden age where there’s a never - ending stream ofnew features added for the benefit of the users accessing the page, and really great tools for those creating the page.
Humane by Design
Resources
A resource that provides guidancefor designing ethically humane digital products through patterns focused on user well - being.
Accessible Form Fields
Resources
A small figma component foraccessible form fields.
Webflow accessibility
Resources
Make your Webflow sites accessible.
Opening Links in New Browser Windows and Tabs
Article
Carefully examine the user’scontext, task at hand, and next steps when deciding whether to open links to documents and external sites in the same or a new browser tab.
Editoria11y
Software & Tools
In many ways, Editoria11y is astopgap solution.Most of the mistakes it catches were made because we placed new expectations on contentauthors('tag your content with good structure'), but gave them tools that encouraged the opposite.The path forward is to make accessible content creation easier, and as automatic as possible.
Manuel Matuzovic Blog
Blog
Follow Manuel's blog for anyfront - end accessibility guides, tutorials, and resources.
The 2020 State of Digital Accessibility ReportThe Education Sector
Resources
This report is designed to be readas a companion to the 2020 State of Digital Accessibility Report(SODAR), published by Level Access in collaboration with G3ict and IAAP.
Heading structures are tables of contents
Design Patterns
The heading structure of a web pageis like its table of contents.It gives people who can’t see your page a way to navigate it without readingeverything.
Accessibility for teams
Guides
Making your site more accessible canbe a daunting task.If you are approaching accessibility for the first time, the sheer breadth of the topiccan leave you wondering where to start.
Digital Accessibility
Courses & Certificates
This course will help you tounderstand how those with sensory, physical and cognitive impairments may be disabled by barriersencountered when using digital technologies.The course will highlight how the use of accessible andinclusive design can help overcome many of these difficulties.
Information and Communication Technology(ICT)Accessibility
Courses & Certificates
edx In this introductory course,learn how to measure an organization’s ICT accessibility and assess the importance of maintaining aninclusive workplace for both employees and customers with disabilities.
Screen Reader Keyboard Shortcuts and Gestures
Screen Reader
List of screen reader keyboardshortcuts and gestures.
Color Contrast Checker
Contrast Checker
Evaluating your design for colorcontrast is a critical aspect of accessibility testing and organizations may benefit from appropriate userexperience training and expertise to ensure proper contrast.
Applied Accessibility: Practical Tips forCreating more Accessible Front - Ends
Video
As front-end developers, we aretasked with building the front end of a Web site or application — in other words, we are building the user’send of an interface.This is why it is crucial that we ensure that the front - end foundations that we buildare as inclusive of and accessible to as many users as possible.
Web Axe
Blog
Blog and podcast on webaccessibility
Accessible Components
Developer Tools
Listing of accessible components & amp; patterns.
Web Accessible Code Libraries and Design Patterns
Curated List
Within a web developmentorganization, it’s ideal to maintain(and enforce usage of) design patterns and a components library.Andthey should work together; design patterns create consistency among visual elements across projects and thecomponents library creates consistent implementation of those patterns during development.
The Accessibility of Styled Form Controls
Developer Tools
A repository of styled and styled form control elements and markup patterns, and how they are announced by screen readers.
Patterns – GOV.UK Design System
Design Patterns
gov-uk Patterns are best practicedesign solutions for specific user - focused tasks and page types.
Components – GOV.UK Design System
Design Patterns
Components are reusable parts of theuser interface that have been made to support a variety of applications.
Smashing Newsletter: Issue #289 —Useful librariesand case studies to get Accessibility just right
Newsletters
Building accessible pages andapplications isn’t easy.We have to keep in mind how our sites and applications work with a keyboard alone, whether navigation landmarks are properly assigned, how updates are announced by a screen reader, andwhether we avoid any inaccessible libraries or third - party scripts.And then, for every component we arebuilding, we need to ensure that we keep them accessible over time.
HBO Max adds key accessibility feature forvisually impaired users
Article
The service now offers audiodescriptions for content, which describes what is happening on the screen beyond the dialog and soundeffects.This feature is joined by multiple other changes intended to improve accessibility.
Pocket Biases
Cognitive Biases
Keep your friends close and yourcognitive biases closer.
Psychology of Design: 101 Cognitive Biases & amp;Principles That Affect Your UX
Cognitive Biases
growth-design Improve your userexperience, you need to understand the biases & amp; heuristics affecting those four decision - cycle steps.
Designing for Global Users
Article
How does the World Service go aboutdesigning and delivering to 40 million users a week in 40 languages ?
52 UX Cards to Discover Cognitive Biases
Cognitive Biases
Cognitive biases are psychologicalthought mechanisms and tendencies that cause the human brain to draw incorrect conclusions.
Four personas to help you create accessibledigital services
Accessibility Personas
These four personas capture avariety of reasons why accessibility is a consideration in the first place.There are millions of people in the world who have special needs when it comes to digital services.
Diverse Abilities and Barriers
Accessibility Personas
How people with disabilities use theweb.
Home Office Posters
Inclusive Design Generators
Home Office repository of posterscovering different topics - research, access needs, accessibility and design.
Microsoft Inclusive Design Resources
Resources
Practice new skills, develop newconcepts, or create a prototype—the toolkit is made to be retrofitted to your design team’s goals.Downloadeverything here, and start exploring!
Empathy maker
Inclusive Design Generators
Generate inclusive personas to seeunique disabilities and physical contexts.
Cards for Humanity
Inclusive Design Generators
A practical tool for inclusivedesign.
Create and verify PDF accessibility, Acrobat Pro
PDF
Acrobat tools make it easy to createaccessible PDFs and check the accessibility of existing PDFs.
EPUB Accessibility
EPUB
This document specifies contentconformance requirements for verifying the accessibility of EPUB Publications.It also specifiesaccessibility metadata requirements for the discoverability of EPUB Publications.
Atlassian Design System
Design Systems
Use Atlassian’s end-to-end designlanguage to create simple, intuitive and beautiful experiences.
The Guardian Digital Design Style Guide
Design Patterns
The Guardian's design patternsexplained.
Museum, Arts and Culture Access Consortium
Organization
MAC is an organization strivingtoward increasing access to NYC’s cultural institutions for the disability community through connection, education, and advocacy.
BBC GEL
Design Systems
BBC and UX&D Design System thatfocuses on every day's stuff that makes things special, as well as the stuff that makes things happen.
There's no such thing as a website or web appthat doesn't need to be accessible
Article
In many countries around the world, accessibility is a legal requirement.It’s quite literally your job—your professional obligation—to buildwebsite and web apps that are accessible.
The Component Gallery
Design Patterns
Designed to be a reference foranyone building component - based user interfaces, is an up - to - date repository of interface components basedon examples from the world of design systems.
5 Ways to Make Your Communications More Inclusive
Article
Communication is one area where youcan make a real difference in how connected and involved everyone in your organisation feels.Ourcommunications, internal and external, are incredibly visible.As a result, they can come to define yourorganisation’s culture and so must communicate your approach to inclusivity too.
Start using inclusive language with your team andcustomers
Article
Inclusive language impacts almostevery aspect of a business: attracting and retaining customers, hiring and keeping talented people, increasing productivity, and driving innovation.To get started, you need to understand why inclusivelanguage matters, and how companies use it.You must also develop tactics to get your team to embrace it.
Captioning Reading Experience Survey Results
Article
Captions are more than just addingtext.Captioning is an art and not something that can be learned overnight.
Svetlana’s Accessibility Advent Calendar 2020
Curated List
Accessibility is a very huge andever changing field with many different specializations.So it’s not possible to share all information in one article.The goal of this article is to help you better understand how accessibility benefits both yourbusiness and customers and why it is important to take action on making accessibility part of your dailybusiness activities.
ADA 30th Anniversary - A Perspective from a DeafAccessibility Consultant
Article
Accessibility is not charity. It’s acost of doing business just like any other business expenses.Also, accessibility is not one time thing tobe resolved at the end of the project.It cannot be magically solved by all technologies.
Why build accessible products ?
Article
It’s important to make a productapplicable, handy, and inclusive for people with different abilities.
How to create a screen reader accessible graphlike Apple's with D3.js
Tutorials
Creating a accessible screen readergraph with D3.js.
How to write inclusive, accessible digitalproducts
Copywriting
The first goal of good UX writing isusability.Before you give digital products personality, those products need to make sense.That means thewords need to work for everyone.
Designing Sound
Books
A practitioner's guide to the basicprinciples of creating sound effects using easily accessed free software.
Special Needs vs Disabled ? The new term to sayinstead of Special Needs
Article
It’s not new at all. Disabled.Disability.It’s ok to say the word.
Designing accessible products
Article
An accessible product — in it’ssimplest sense is making sure that all of your users can consume your content.The products we work on aredesigned with the perceived majority of our users in mind — users who do not experience any difficulty in using a web or mobile application.
Disability Visibility
Books
First-person stories from thetwenty - first century.
Designing With Accessibility in Mind
Video
Shaping the future of design is allof our responsibility and this ends and begins with consideration for people.In a world where more than abillion people are disabled, we must keep in mind making accessible products.Universal Design and UserCentered design is at the heart of making products for all of our users.
Disability Inclusive Usability Testing
Article
Remote communication as a new norm.
Disabled And Here: Free stock images
Inclusive Stock Images
This stock collection is adisability - led effort to provide free and inclusive images from our own perspective, with photos andillustrations celebrating disabled Black, Indigenous, people of color(BIPOC).
Design for Cognitive Bias, A Book Apart
Books
Understand the logic powering humanbias and learn to start designing more consciously.
Design Justice
Books
An exploration of how design mightbe led by marginalized communities, dismantle structural inequality, and advance collective liberation andecological survival.
Color Craft & amp; Counterpoint: A Designer’s Lifewith Color Vision Deficiency – A List Apart
Article
So, what is it like to be colorblind and also work in the web design and development industry ?
Color Contrast Grid
Figma
Make a grid of accessible colorcombinations from your document's paint colours.
Ash Guillaume's Notes - Creative South 2019
Article
We have a responsibility as acommunity to hold each other accountable, and push our benchmark for world class design higher.
Beyond the Binary: 5 steps to designing genderinclusive fields in your product
Article
As a primer: one’s genderexpression, gender identity, and gender assigned at birth may or may not be one and the same.Rather, peoplemay have an infinite variety of gendered experience in the world.
An environment designed to suit every body isbetter for all
Article
At every turn, the design of ourenvironments either creates barriers or opens doors.Let’s design a more humane world.
AccessSlide
Developer Tools
An accessible and modernHTML5 - CSS - JS framework for presentation.
Giant Robots - Accessible, Ethical, Inclusive
Podcast
Cat Noone, CEO of Stark, shares anoverview of accessible design, dreams for shaping a more accessible future, helming custom support with a small team, and her motivation to create.
Accessibility fundamentals
Courses & Certificates
Technology can empower people toachieve more, help strengthen education opportunities, and make the workplace more inviting and inclusivefor people with disabilities.
Accessibility Evolution Model: Creating Clarity in your Accessibility Journey
Article
We’re often asked what the secret isto our approach to accessibility and inclusion at Microsoft.The simple answer is, we manage it like abusiness.
Accessibility - Apple Developer
Developer Tools
Apple devices come standard withaward - winning accessibility features that let people experience everything Mac, iPhone, iPad, Apple Watch, and Apple TV have to offer.And with accessibility APIs on all Apple platforms, you can make your appsseamlessly functional for a broad range of users.
Announcing “Access, ” a Short Film AboutAccessibility
Video
A short documentary aboutaccessibility.It follows Cory Joseph through a typical day, showing how he uses his smartphone, Brailledisplay, tactile watch, and guide dog(named Vine) to navigate the world.
'Disabled': Just #SayTheWord
Article
To be seen for who we are in our ownright, and for what we experience, is, I think, a desire common to everyone.
AVA
Software
Empowering Deaf &hard - of - hearing people and inclusive organizations with the best live captioning solution for any situation.
13 Books To Buy Your Child If You’re Trying ToTeach Them About Disabilities
Article
Books to help raise awareness forany age.
A Complete Guide To Accessible Front - EndComponents
Developer Tools
Smashing Magazine's alphabeticallist of all accessible components.
Verizon is First Telecom Provider to Join Be MyEyes
Article
Blind and low-vision Verizoncustomers can now contact their mobile provider through Be My Eyes for questions about accessibility.
Tackle accessibility in your designs with theseuseful plugins
Resources
Failing to thoroughly addressaccessibility in your design means a large demographic of users may be excluded from being able to use yourproduct.Just specifying the right colors so that text has enough contrast, or providing a way for users to navigate your site with a keyboard can make all the difference in enabling them to use your product too.
Accessibility Design Research
Case Study
A thorough case study ofaccessibility design for WHO(World Health Organization)
Good, Better, Best: Untangling The Complex WorldOf Accessible Patterns
Article
By taking a bit more time tocritically think about patterns and choose the most accessible ones, we will undoubtedly create a moreinclusive space to reach more users — on their terms.
Accessible Text Labels For All
Article
On improving eCommerce experiencesfor screen reader users without breaking them for speech - input users.
A11y Color Tokens
Developer Tools
Generate accessible complementarytext or UI colors as Sass variables and / or CSS custom properties from your base color tokens.
AccessiByeBye
Browser Extension
If you use a screen reader and havebeen prompted to press a hotkey to turn on some website's screen reader mode, you've likely encountered thecategory of website add - ons known as accessibility overlays.
Descript
Software & Tools
A collaborative audio/video editorthat works like a doc.It includes transcription, a screen recorder, publishing, full multitrack editing, and some mind - bendingly useful AI tools.
How to Support Disability in your Diversity & amp;Inclusion Efforts
Article
The truth is, if you’re notfactoring in disability inclusion into your hiring process, your company is lagging in innovation.
Inclusive Design Toolkit
Resources
Use these cards early in the designprocess to help you sketch, plan, prototype and design content, interactions and processes.
Designing for users with Aphasia
Guides
Aphasia: Language loss after strokeand other forms of brain injury.
Stories of Web Users
Accessibility Personas
How people with disabilities use theweb.
Trello accessibility cards generator
Developer Tools
Helper for accessibility reviewers in Trello, create the cards related for a review following the WCAG2
Visual Map of WCAG 2.1
Web Standards
Visual map of Web ContentAccessibility Guidelines 2.1
How to organise an accessibility audit
Testing & Audit
An accessibility audit, whichinvolves user testing, is the only way to make sure that disabled people can use your website.But it’s alsoa great tool for raising awareness of accessibility, and the need for action, within your organisation.
4 signs your product is not as accessible as youthink
Article
For too many companies,accessibility wasn’t baked into their products from the start, meaning they now find themselves trying tofigure out how to inject it retrospectively.But bringing decades - long legacy code and design into thefuture isn’t easy(or cheap).
Radically Inclusive
Podcast
Real talks on inclusion atworkplaces.
How to design inclusive digital solutions
Article
Over the last few years, there is agrowing focus on inclusion in digital solutions.There is a need for acceptance, empathy and most importantly equality.Unfortunately with many digital products, inclusion is still just a designafterthought.
Ethical Design Handbook
Books
The book by Trine Falbe, MartinMichael Frederiksen and Kim Andersen.
Pitching accessible and inclusive designsolutions
Article
We shouldn’t have to pitch the needto integrate this into our digital work process.Building solutions that are inclusive is part of ourresponsibility as designers.Everyone should care about creating solutions that a bigger audience can use.
Overlay Fact Sheet
Resources
Overlays are a broad term fortechnologies aimed at improving the accessibility of a website by applying third - party source code (typically JavaScript) to make improvements to the front - end code of the website.
Accessibility Personas
Accessibility Personas
With this poster series, we hope toraise awareness of the many different kinds of invisible disability.Our hope is to elevate their stories, to build compassion for one another, to explore one of our many core beliefs.
Easy Lookup Web Accessibility Guidelines
Guides
We want the process of making anaccessible website to be easier.Therefore, these guidelines contain all of the criteria needed to ensure awebsite can be used by every kind of user.They incorporate much of WCAG 2.0, but are not intended to be asubstitute for the official W3C documentation.
A11y Tools
Developer Tools
JS accessibility tool list.
The Accessibility Tree
Guides
A training guide for advanced webdevelopment.
CSS Toggle Switch
Design Patterns
Accessible CSS toggle switch usingstandard form controls
Reakit
Design Systems
Toolkit for building accessible UIs.
React Tabs
Design Patterns
An accessible and easy tab componentfor ReactJS.
React Accessible Accordion
Design Patterns
React Component for creating an'Accordion' that adheres to the WAI ARIA spec for accessibility.
Accessibility Guide
Curated List
A curated collection of webaccessibility tips, tricks, and best practices.
Learn Website Accessibility and Audit Your Site
Courses & Certificates
Learn how to make your websiteapplications accessible to a larger audience.Use keyboard shortcuts and navigation to help both power - usersand those with disabilities.Make sure your website works well with screen readers and explore using ARIA tomake even the most complex UI’s fully accessible!
ARIA Cheatsheet
Guides
Cheatsheet for the most common ARIARoles and Attributes.
NVDA Keyboard Helpers
Screen Reader
Visual keyboard layout of majorityof the commands for NVDA screenreader software.
Web Accessibility Resources Cheat Sheet
Accessibility Cheatsheet
Web Resources WCAG 2.0 Checklists.
WAI - ARIA 1.1 Cheat Sheet
Accessibility Cheatsheet
WAI-ARIA 1.1 cheatsheet.
Web Accessibility Basics Cheat Sheet
Accessibility Cheatsheet
Web accessibility basic cheatsheet.
Designing for Dyslexia
Article
While there are severaldyslexia - specific things you can do to help someone with dyslexia better process language, I have pulled outthe 10 tips that will make your website more inclusive to dyslexic users while improving usability overall.
Effective and Accessible Alternatives to WebsiteCarousels
Design Patterns
Carousels were cutting-edge at onetime.Everyone wanted them in their redesigned websites because they seemed innovative and engaging.Itturns out, they're not engaging (at least not any longer) and users tend not to interact with them comparedto other content displays.
Keeping Content Accessible Through PeriodicChecks
Copywriting
If there is any content on yourwebsite that has never been tested for accessibility, either because it's new or because your website hasn'tbeen audited before, start here.
Mobile accessibility
Mobile
With web access on mobile devicesbeing so popular and renowned platforms such as iOS and Android having full - fledged accessibility tools, itis important to consider the accessibility of your web content on these platforms.
A good basis for accessibility
Guides
Mozilla's guide on how HTML can beused to ensure maximum accessibility.
How To Code for Accessibility in Web Apps
Article
Coding is a unique line of work whenyou look at its capability for inclusion.
Reversed Exclusion
Simulator
Creating awareness by excludingsighted people about the frustration that people with impaired vision or blindness experience almost everyday when they try to use a website with little or no accessibility.
Imagining native skip links
Design Patterns
Except a skip link is not so trivialto implement.
An Accessible Current Page Navigation State
Design Patterns
Design and technical considerationsbehind the icon that indicates what page you're currently on.
Legibility in User Interfaces Guide
Article
Sometimes, users find it hard toread microCopy on a mobile or desktop screen either because the characters are cluttered, hazy, or too smallto read.
Comparable experiences
Article
The starting point for inclusivedesign.
UK Disability Survey - Our analysis, advice andmore
Article
This survey is hard to complete fromthe point of view of an able - bodied individual.Getting through it was, honestly… very painful, and whatwe’re about to focus on is scraping the surface.Let’s take a look at some of the issues.
Say My Meme
Podcast
Say My Meme is exactly what itsounds like: A podcast that literally describes the world's most #relevant memes, bringing the blind andsighted people together through laughter and the power of visual description.Brought to you by Will from BeMy Eyes and Caroline from Scribely.
Building an Accessibility Library
Article
Making accessibility a feature, nota fix.
Why I blocked
Article
I mean, quite honestly, I’m not afan of AccessiBe at all.Partly because I’m involved with so many legal cases involving their product as anexpert witness it’s starting to make my hair Grey.
Retext Equality
Plugins
A plugin to check for possibleinsensitive, inconsiderate language.
Inclusive Recreation Resource Center
Organization
The mission of the InclusiveRecreation Resource Center(IRRC) is to promote and sustain participation by people of all abilities in inclusive recreation activities and resources.
Colorsinspo meets Adobe XD and Figma
Plugins
Provides you Contrast checker, Colorblindness, Color palettes, solid colors, color generator, palette collections, color design systems andmore.
Adee App
Plugins
Comprehensive accessibility testingtool for inclusive design.
Inclusive Design: Build for all, By all
Article
Inclusive design shouldn’t be amovement we have to make way for, it’s always been a part of creating, innovating, and designing.
Introduction to Accessibility
Guides
So you want to dig into the topic of (web) accessibility ? Wonderful! But you’re not sure where to start ? Don’t worry - you're not alone. Gettinggoing can be overwhelming, but it doesn't have to be. That's what this site is for - to introduce you toaccessibility.
Designing Tesco’s new grocery app
Article
We want the new app to innovategrocery shopping and thinking of accessibility from the start.
Accessibility is making things simple withsimpler efforts
Article
Why would you want to make somethingthat some people can’t use ? Digital accessibility is the ability of a website, mobile application or anyelectronic document to be easily perceived, understood, navigate by a wide range of users, including userswith disabilities.
Digital Accessibility Benefits Everyone
Article
At the dawn of a digital economy,accessibility experience(AX) can enhance the user journey and thoughtfully designed websites and apps with empowering solutions pave the way for a more inclusive world.
Accessibility Shortcuts
Guides
Quickly check the iOS accessibilityshortcuts in one glance.
Placeholder – the piss - take label HTMLAccessibility
Design Patterns
The reasons why use of theplaceholder attribute as the only means of providing a user readable prompt for a form control is deficientUX, are voluminous.It is frustrating having to rehash this discussion endlessly.
Creating comic book speech bubbles with SVG andjavascript
Design Patterns
How to accessibly render comic bookdialogue, most commonly presented as text in speech bubbles.
Do accessible websites still need to supportInternet Explorer 11 ?
Article
In this blog I’ll explore both sidesof the case for continuing to develop for IE11, the problems that it causes, the features that it offers (including accessibility features), but also the challenges people may face if developers don’t build for it.
Creating e - learning that can be used by everyone
Resources
Due to the pandemic, whereverlearning is happening at the moment – whether in workplaces, universities or schools – it is happeningremotely.
First Steps Toward Virtual Meeting Accessibility
Article
Ensuring accessibility andinclusivity must be top of mind as you plan and execute virtual events.Digital accessibility is a complexsubject, but understanding some basic elements is a starting point.
There is no “Myths of Color ContrastAccessibility”
Article
When you need to work on interfaces,color contrast is a real thing you have to take into account to make it accessible.You have the right to beafraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor contrast ratio.Accessibility comes with its constraint, but not much more than UX (User Experience) Design.
Accessibility auditing and pushing for more
Article
An example of the feature set notbeing right(for accessibility) is: If you provide a listing of TV programs, a small proportion of which areaudio described, a make - or -break feature is to show which have audio description.
Accessibility research mobile apps
Mobile
Research on the accessibility ofapps Which accessibility settings do the Dutch really use on their phone ?
Persona Spectrum
Accessibility Personas
Why we need persona Spectrum?Something wrong ?
An Introduction to Inclusive Design
Article
We can apply the idea of inclusivedesign when building products for the web.Let’s take a look at a some practical examples.
Color Studio
Color Generator
It is too hard to build coherent andaccessible themes with the right colors.This should help.
The problem with tooltips and what to do instead
Design Patterns
Tooltips are messages that appearwhen the user hovers over part of an interface—usually an icon—to explain how certain things work or whatthey mean.
Digestible WCAG
Newsletters
Why was it made - To help keepmyself engaged in trying to understand WCAG, I made this.Starting with a short email each day was a lotless daunting to me.
Color Contrast Checker
Contrast Checker
AA Large applies to text > 24pxor & gt; 18.5px for bold fonts.Learn more: Text Contrast Non - text Contrast(WCAG 2.1) For APCA font size andweight need to be taken into account, so the little colored dotis not really meaningful: WCAG 3.0 APCA (Working Draft)
Build a Better Mobile Input
Design Patterns
By properly configuring a few keyinput attributes, you can make web forms much easier to use on mobile devices.
ColorCube
Color Generator
A color A11y Tool for Designers & amp; Developers
Advocating for Accessibility in Video Games
Article
What is the fundamental alteration and how can this language promote accessibility ?
What is Digital Accessibility ?
Article
In this article, you'll learn aboutdigital accessibility and why it is important to incorporate aspects of digital accessibility into websites.
The three components of accessibility
Article
Accessibility means different thingsto different people but accessibility is not just a single thing.We can broadly divide it into threecomponents: emotional, functional and technical.
Building Accessibility into Your Design System
Article
Imagine going about your onlineactivity — paying bills through your bank, buying tickets to go to your favorite band’s show, or scrollingthrough your social media feed.Now imagine that, as you’re doing this, the website gets stuck in frustrating dead ends, the checkout flow won’t let you complete your purchase, and there is a clear mismatchbetween how you use technology and how interfaces are designed.
10 Ways to Improve Accessibility on Websites andSocial Media
Article
Many of the tips don’t require youto know code, only to know that certain features are available on the applications you use that help makeyour posts and updates accessible to everyone.
Sustainable accessibility
Article
It takes time and effort to embedsustainable accessibility into an organisation.It cannot be achieved through disconnected activities likeassessments or training(although such things can be useful in their own right); sustainable accessibilityneeds a co - ordinated and evolving plan that encompasses every aspect of the organisation.
Axess Lab
Company
Our mission is to make life easierfor as many people as possible by creating helpful accessible products that everyone can use.
BBC GEL Design Patterns
Design Patterns
Patterns are a simple, reusablesolution to a design problem.
BBC GEL - Inputs
Design Patterns
This guideline covers the individualinputs that can be used to build a form, to ensure maximum consistency and accessibility for our users.
Datepickers - Accessibility Quick Guide
Design Patterns
Custom JavaScript Datepickercontrols are almost always inaccessible to keyboard and screen reader users.HTML5 input type = date willgive you an accessible date picker in most browsers, but not all like Safari macOS where native datepickersare not supported yet.
Android Apps for the Deaf: Live Transcribe andSound Amplifier
Article
Two new assistive apps coming toAndroid provide audio boosting and near - real - time text - to - speech translation for the deaf and hard ofhearing.
The Internet Is for Everyone, Right ? Not With aScreen Reader
Article
Blind users have been fighting for amore inclusive web for over 20 years.Are lawsuits like the one against Domino’s going to make a difference ?
Alt attributes like paragraphs
Article
Accessibility, I finally made thesimplest of all connections: alt text is like a paragraph.Word pictures.Basic I know, but it helps mecontextualize how to write good alt text as well as source order of my code.
Accessibility devices at CES 2021 reflect growingfocus on inclusive tech
Article
A traditionally overlooked space is finally getting some of the attention it deserves.
How to Design for Accessibility ? Why is itimportant ?
Article
That’s reason enough why we mustalways build accessibility and demand in any digital project.We have to confirm that individuals haveaccess to digital content that has inclusive experiences for all users.
Tips for making accessibility a core designprinciple
Article
Good accessibility depends on thechoices you make from the beginning of the project, and sometimes those choices can't be unmade.
Solid Start
Guides
Are you a person that makes digitalthings for other people ? Awesome—because this page is all about making things for people.
Contrast Safe
Color Simulator
A macOS menu bar app for quicklychecking the accessibility of text against the Web Content Accessibility Guidelines(WCAG).
Grids Part 2: Semantics
Design Patterns
This is part 2 in a series aboutARIA grids(not at all related to CSS grids)
Grids Part 1: To grid or not to grid
Design Patterns
Part of this flood of gridaccessibility questions might be caused by a quirk of where I happen to work, but I don't think that's theonly reason tables and grids are over - represented in accessibility bugs.
Accessibility and Me
Article
Find where you can help and getinvolved.Accessibility is not just a front - end engineering problem.
Accessibility Hero
Mobile
Accessibility Reference for AppDesigners and Developers.
Criticisms of Quick - Fix Website AccessibilityProducts Highlighted in New Lawsuit
Article
Amidst the thousands of lawsuitsfiled over the past few years alleging business’ websites and mobile apps are not accessible to blindindividuals, businesses have scrambled to find ways to make their websites and apps accessible.
Pika
Color Simulator
An open-source colour picker app formacOS.
Checka11y.css
Developer Tools
CSS stylesheet to quickly highlighta11y concerns.
Blackboard Ally
Software & Tools
Accessible content is better contentand making course content accessible
Accessibility Checklist
Media
This checklist has been designed asa quick and easy resource.Explore the links for additional information, hints, tips and tutorials.
Accessibility Resources
Curated List
Creating accessible documents andlearning materials doesn’t require high tech skills or specialized programs.In fact, many of the techniqueswe recommend make it easier to style and design course materials.
Accessible Jeopardy Prototype
Resources
Learn accessibility by playingaccessible jeopardy.
On Overlays as a means of resolving websiteaccessibility issues
Article
It is important to keep in mind thatan overlay is really just applying JavaScript to the current UI to fix the existing accessibility issues.
Complete List of WAI ARIA Roles and Their Uses in2021
Curated List
Accessibility ensures that you treatusers of all abilities and disabilities equally.However, you may ask what is the correct time to ensurethat your website is accessible ? The ideal time to make a website accessible is from the very beginning.
Build a responsive accessible table
Design Patterns
Tables on mobile are sometimes notvery user - friendly.That might be because of horizontal scrolling, or you have had to resize content andhope it fits a 320px viewport.
Readability Guidelines App
Software & Tools
A Google docs add-on to implementreadability guidelines.
Accessibility Cheatsheet — Practical approachesto Universal Design
Accessibility Cheatsheet
Semantic HTML helps screenreaderusers to understand the contents structure and gives it meaning.Ask yourself What is it ? when writingHTML.Use a logical headline order and structuring elements as header, footer, ul, p …
A11yCLE
Resources
Raising awareness of digitalaccessibility, inclusive design, and assistive technologies in Northeast Ohio
Universal Accessibility - Digital AccessibilityConsultancy
Company
We help you open up your digitalproducts and services to more people with a wider range of abilities.
Accessibility Impressions: Playstation 5 vs.XboxSeries X / S
Article
This review will walk readersthrough my decision - making, purchasing, and setup process.Please note that this review will primarily focuson the perspective of disabled gamers.For me, I ended up purchasing both consoles.
Accessible Games
Gaming
Games for absolutely everyone.
Colour contrast in UX
Article
What makes colour contrast a part ofUX ?
ButtonBuddy
Developer Tools
Accessible button contrast generator
Accessibility Icons
Icons & SVG
Accessibility icons, which are goodto understand and tested for years.
Accessible Icon Buttons
Design Patterns
An icon button is an icon thattriggers some sort of action on the page.More accurately, technically speaking, an icon button is a buttonthat contains an icon and no(visible) accompanying text.
The no - mouse challenge
Article
Not everyone out there relies on amouse or a trackpad when using their computers.
Jake Tracey's thoughts on accessibility and more
Blog
Thoughts on accessibility, userexperience and technology.
How to Prioritize UX Accessibility Principles inDesign
Article
Embedding accessibility andinclusive design throughout the product life cycle is a little like giving up smoking, said Leonie Watson, director of TetraLogical, a London - based inclusive design agency.
The Web Accessibility Introduction I Wish I Had
Article
Before the rest, I must correct onemajor thing my past self got wrong about accessibility for too long: accessibility affects all users, notjust those with stereotypical disabilities.Accepting this means realizing accessibility is about buildingfor stress cases.
More Accessible Skeletons
Design Patterns
Many skeleton patterns do a poor jobpresenting themselves to screen reader users in any meaningful way.
Accessible Slick
Design Patterns
The last (accessible) carouselyou'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 easierfor real - world dev teams who need to pass accessibility audits.
Accessibility Interview Questions
Guides
These questions try to stay awayfrom asking people to recite specifications, or rattle off screen reader hot keys.Those can easily belooked up on the job.Instead these questions try to act as conversation starters, to gain insight into howsomeone solves problems, and interprets accessible, inclusive user experiences.
Tips For Online Shopping With Disabilities
Article
A Website Accessibility Guide
Accessible HTML Content Patterns
Design Patterns
Accessible, semantic markup patternsfor HTML content.
Accessible Resources
Evaluation Tools
Accessible Resources provide a suiteof accessibility evaluation tools for macOS and iOS.
Improving Your Tweet Accessibility
Guides
Twitter persists. Even if you havemoved to Mastodon, Twitter will persist.As such, we need to continue to ensure it is accessible to allusers.This post gathers some tips you can and should use.
8 steps to inclusive web design
Article
Accessibility is a human right, and in some countries, the law.In fact, 2018 saw a huge increase in web accessibility lawsuits.Now designersare starting to realise that web accessibility is a must.With that in mind, here are eight top tips for ensuring your web design is optimised for accessibility and as inclusive as possible.
Nutrition Cards for Accessible Components A11YExpectations
Design Patterns
A11Y Nutrition Cards is an attemptto digest and simplify the accessibility expectations when it comes to component authoring.Based on the WAIARIA Authoring Practices Guide.
A11y - Basic Web and Document Accessibility
Resources
A esources for creating accessibleweb content or accessible documents(e.g., PPT, PDF, Word).
Thinking Accessibility Checklist
Media
Practical approaches to UniversalDesignfor blended learning
Practical Web Inclusion & amp; Accessibility
Books
This book will guide you through abroad range of access needs, the barriers users often face, and provide practical advice on how your sitescan help rather than hinder.Going beyond advice tailored solely for developers, this book offers potentialimprovements for designers, developers, user experience professionals, QA and testers, so that everyoneinvolved in building a website can benefit.
Accessibility(A11y)
Curated List
Curated collection of accessibilityrelated resources.
Radix UI
Design Systems
Radix Primitives is a low-level UIcomponent library with a focus on accessibility, customization and developer experience.You can use thesecomponents either as the base layer of your design system, or adopt them incrementally.
List of A11y Resources
Curated List
Digital accessibility resources byJohan Ramon.
Frend
Design Patterns
A collection of accessible, modernfront - end components
Web Accessibility Tools & amp; Resources
Curated List
Accessibility Software, Books,Blogs, Online Tools, and More
Accessible Circular Sliders
Design Patterns
Just a few years ago, it was almostimpossible to create range sliders without a lot of JavaScript.Thankfully, in modern browsers, it'ssuper- easy to style range sliders, using CSS only.If the browser supports CSS Custom Properties, it's evenpossible to use the same styles for a wide range of different styles, just by updating a few properties.
Alt - Text as Poetry
Guides
Alt-text is an essential part of webaccessibility.It is often overlooked or understood through the lens of compliance, as an unwelcome burden to be met with minimum effort.How can we instead approach alt - text thoughtfully and creatively ?
Anatomy of a Web Accessibility Audit
Article
Diagnosing a website foraccessibility and fixing any issues that are uncovered is not a one - size - fits - all endeavor.
Tips for PDF Accessibility
PDF
Here are some guidelines to help inthe review and remediation of existing documents, along with guidance for ensuring accessibility of PDFs as they are created.
Space for Empathy
Article
Sometimes we don’t need more complexsolutions, we need thoughtful ones.Building websites is challenging.There’s never enough time orresources.It’s easy to stick with what’s known and what works.
Accessibility Checker
Media
You can find out how accessible yourwebsite is.The tool crawls your site, making sure that each subpage can be correctly displayed by screenreaders, allowing even blind and visually - impaired users to make full use of it.
Accessibility: Rights & amp; Responsibilities
Guides
Empowering teams to create the newindustry standard.
Become an A11y Advocate! In the battle for aninclusive internet.
Article
Accessibility does not only benefitdisabled users
Accessibility Checklist for Testing Your Site
Media
Accessibility Checklist for TestingYour Site
A11y checklist
Media
To have 100 percent accessiblewebsite for users with impairments, we need to do more.Here is a checklist what we need to do:
Social Media Accessibility Guidelines
Guides
When social media content is broadlyused by the University’s students, employees and / or the public to carry out or participate in its coreeducational and administrative activities, all available accessibility supported features of the platformshould be utilized.
Accessibility Checklist for Content Authors
Media
A checklist for content authors tocreate accessible web experiences.
Create Accessible Content
Copywriting
Accessibility needs relevant tocontent creators cluster around the need for clear and concise writing, using the formatting toolbar, andproviding text alternatives.
Basic Checklist: Online Content Accessibility
Media
This checklist is intended to bestarting point for making documents and websites accessible.
The internet is everything.But is it accessible ?
Podcast
The Americans with Disabilities Actturns 30 years old this summer.How far has technology come in making the world more accessible to peoplewith disabilities ?
Fed A11y
Software & Tools
Automated Monitoring of the Section508 Accessibility of 9, 241 US Federal Government Websites
Everything You Need to Know About CaptionedVideos
Article
The complete guide to captionedvideos.
8 Ways To Be An Ally To The Disability Community
Article
Learn about different models ofdisability.Understand what ableism is and how to detect it.Discover the million reasons why accessibilitymatters.
AppleVis
Resources
AppleVis is the leading onlineresource for blind and low vision users of Apple products such as the Mac, iPhone, iPad, Apple Watch, andApple TV.
Content - visibility and Accessible Semantics
Design Patterns
This feature is meant to improvepage load performance by skipping over content detected as being off - screen or outside of the viewport.
TabPanel / Accordion Widget
Design Patterns
First class support forscreen - reader users! ARIA controls the rendering of their non - visual experience.
Accessibility tips from the BBC
Article
What do the BBC, accessibility andthe Tardis have in common ?
How we made GOV.UK more accessible
Article, Tutorials
To improve the accessibility ofGOV.UK, we needed to find where the problems were.
What If Accessibility Was Also Inclusive ?
Article
It’s hard to articulate what itfeels like to spend a lifetime being told that you are not allowed.Not always in so many words, but in gestures, in spaces, in thoughtlessness.
Accessibility Guidelines
Design Systems
This web accessibility guideincludes best practices, resources, and practical advice about how to ensure all users have equal access toinformation and functionality.
Alphabet of Accessibility Deck
Accessibility Personas
This deck helps designers anddevelopers think about different kinds of disability and accessibility
An Alphabet of Accessibility Issues
Accessibility Personas
This alphabet soup of accessibilityis not a collection of personas.
Designing Accessible Navigations
Design Patterns
When designing a navigationalexperience, designers should make sure that all users, impaired or not, are able to maneuver through yoursite’s content at their own pace with little to no frustration.
More accessible defaults, please!
Article
Useful HTML elements like dateinputs and & lt; video & gt; could make the web a much better place, if browser accessibility bugs in theirimplementations were prioritised.
Creating accessible personas
Accessibility Personas
Personas are used acrossorganisations in UX or marketing to help businesses better understand the customers they are serving.Likeany deliverable, it’s important to consider the accessibility of personas so that your audience canunderstand and engage with them.
Accessibility Personas
Accessibility Personas
The GDS Accessibility team hascreated 7 different accessibility personas.Each persona has different access needs.
5 amazing Chrome accessibility tools you didn'tknow
Developer Tools
With accessibility, we mean makingwebsites that are designed and coded so people with disabilities can use them.
How to Make Emojis Accessible in HTML
Design Patterns
To make sure screen readers couldread the emojis in my bio in a way that made sense, I did the following three things.
Braille Neue
Typeface
A Universal Typeface by KosukeTakahashi That Combines Braille and Visible Characters.
How To Make Your Email Signature Screen ReaderFriendly
Emails
Creating an accessible emailsignature that is screen reader friendly is often overlooked.According to the World Health Organization (WHO), 15 percent of the world's population live with a disability, including at least 2.2 billion who havea vision impairment or blindness.
aria - describedby: What's the Difference?
Article
ARIA is a set of HTML attributesdesigned to tweak how a webpage is exposed to assistive technology.It can be… a lot.
Accessibility Memes
Resources
There aren’t any. So I made some.
My top 10 favorite disability / accessibilityarticles of the year
Curated List
Picking your favorite articles whenyou’ve written 145 of them in the past 12 months is like picking your favorite kids.
Accessible to some
Article
Your website, app, or new feature isonly half as good if only some people can access it.Consider inclusion and diversity from the verybeginning and test properly.
Accessibility — The Ethical Responsibility
Article
Accessibility is the responsibilityof each one of us, together we can make the web a lot more accessible.
It's the markup that matters
Video
In this talk, I explain in just 10minutes how HTML impacts accessibility, what Accessibility Trees are and what to expect from theAccessibility Object Model.First presented at Nextjs conference, organised by Vercel.
Contrasting Accessibility with Color Contrast
Resources
A talk about the current state ofcolor contrast on the web and a walk through why designers and developers should practice accessibility.
Accessibility 2020 - The Web Almanac by HTTPArchive
Curated List
Web accessibility is about achievingfeature and information parity and giving complete access to all aspects of an interface to disabled people.A digital product or website is simply not complete if it is not usable by everyone.If it excludes certaindisabled populations, this is discrimination and potentially grounds for fines and / or lawsuits.
A11yBy
Curated List
Curated list of accessibility news,tips, hints, and resources.
NerdeRegion
Browser Extension
NerdeRegion is a developer toolsextension for debugging live regions on a Web Page.When activated, you will see a list all active Aria liveregions, and you'll be able to see the history of all changes made on the region.
The inspirational case for web accessibility
Article
Instead of asking me why I careabout accessibility, I wonder if we could instead all ask ourselves if we could stand to care a little more ?
Testing Web Accessibility
Testing & Audit
When we develop a new webapplication, we often put a lot of work on the design, on making it beautiful and usable.In other words, wewant our web app to be effective, efficient, and satisfying for the user.But a lot of times we don’t thinkabout the user experience for everyone, people with or without disabilities, including people with age - related impairments.
How to Get Started on Accessibility Before YouHave a Product
Article
You’ve heard about accessibility.You know what it means.Why it’s important.But you don’t know where to start, especially because you don’thave a product yet.
Accessibility Skills Hiring Toolkit
Resources
The toolkit currently providesPosition Description Language and Screening and Interview Questions.Use the following links to download thecomplete toolkit, or you can download a role - specific toolkit.
Comebacks for Five(Wrong) Arguments AgainstAccessibility
Resources
As I and several other a11yadvocates know, getting others to care about accessibility isn't easy. It should be, considering the manymoral and business arguments for it, but it isn't. I've repeated these arguments many times online.Sometimes as direct responses, other times as painful screams into the void.There's still much work to do.
The three levels of accessibility
Article
There are 3 crucial pointsthroughout a project where accessibility should be influenced.Each level supports the next and depending onits execution will vary in strength.For example, if level 1 was poorly executed it would be difficult for your users to reach the 2nd level or your product altogether.
Color blind friendly palettes for datavisualizations with categories
Article
This palette is a “Set of colorsthat is unambiguous both to colorblinds and non - colorblinds”.
Using the VoiceOver Rotor to Navigate within aPage with Landmarks
Video
Using the VoiceOver Rotor toNavigate within a Page with Landmarks
a11y memes
Resources
Gallery of a11y memes. You can alsosubmit your own a11y meme.
WCAG 2.1 Guidelines Explained with Examples
Guides
This set of guidelines are meant toenhance mobile functionality to be friendlier and give end - users extreme flexibility.
Accessible, Smooth Scroll - to - top Buttons withLittle Code
Design Patterns
Scroll-to-top buttons are great forpages that are long enough to require a few scrolls to read everything.They're even better for extremelylong 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 ourpart.
A11Y Challenge
Resources
There are no shortcuts toaccessibility.But take our short quiz on the reasons for building accessible sites.
How to make your design accessible ?
Article
Fortunately, we’ve seen some greatimprovements and focus on accessibility in recent times.It’s far from ideal but it’s getting better everyday and that’s something we can push for.
Accessibility Toolkit
eBook
The goal of the AccessibilityToolkit - 2nd Edition is to provide resources for each content creator, instructional designer, educationaltechnologist, librarian, administrator, and teaching assistant to create a truly open textbook—one that isfree and accessible for all students.
Do you test for screen reader compatibility ?
Article
The short answer is: Yes and no.
What would an ethical overlay look like ?
Article
Under what circumstances would anoverlay product be considered “ethical”?
Restaurant website accessibility falls short at acritical time
Article
As I write this, 97% of the USpopulation is under stay - at - home orders, which means that unless a person is an essential employee orperforming an essential function, they must stay home.All 50 states are in a State of Emergency.
Resources for Designing for the Colorblind
Curated List
A collection of articles, examplesand tools to help design for the colorblind.
A Book Apart, Color Accessibility Workflows
Books
Color is a powerful tool thataffords seemingly endless design possibilities, but we often design with only one type of color vision in mind—our own.Make sure that accessibility and aesthetics go hand in hand with every design you create.Learn what color accessibility is(and why it matters); choose appropriate colors and implement testing; andsnag a few key tips and tricks to get your color game plan together.You’ll become a better, more empatheticdesigner by discovering how other people see the world.
Color Accessibility Workflows
Article
The Web Content AccessibilityGuidelines(http://bkaprt.com/caw/03-01/) 2.0 contain recommendations from the World Wide Web Consortium (W3C) for making the web more accessible to users with disabilities, including color blindness and othervision deficiencies.
Accessibility guidelines for UX Designers
Article
As a UX designer, it is important tobuild empathy and celebrate accessibility requirements as a set of design constraints to build a betterproduct.
Periodic Table of ARIA 1.0 Roles
Resources
Periodic Table of ARIA 1.0 Roles
Web Components & amp; Accessibility
Resources
A presentation about web components & amp; accessibility.
A Comprehensive Guide to Accessible User Research
Guides
Researchers often want to includepeople with access needs in their studies but don’t know where to begin.This three - part series covers thevarious considerations for adapting your practice to include people with disabilities.
Should I Use A Carousel ?
Developer Tools
1% clicked a feature. Of those, 89%were the first position. 1 % of clicks for the most significant object on the home page ?
Colour Contrast Determinator
Contrast Checker
The Colour Contrast Determinatorcontains text alternatives for screen reader users.For example, the text alternative for the hue slider might be Hue values 0 to 217 fail.Values 218 to 285 pass.Values 286 to 360 fail.
Word Accessibility
Microsoft Word
This page is an overview of creatingaccessible documents using Microsoft Word.Accessible documents allow information to be readily availablefor assistive technology.
ColorTester
Contrast Checker
Software for test contrast ratio (WCAG 2.0(JIS X 8341 - 3: 2010) color contrast success criteria) between fore color and background color.
Webflow accessibility: a step - by - step guide tomaking your site accessible
Article
Although building a site withWebflow takes care of many https://sayyeah.com/digital-insights/web-accessibility-book/ design, and codeaccessibility considerations, there are a few extra steps required to make a fully accessible Webflowwebsite.
The true cost of universal accessibility
Article
We have a long road ahead to anAccessible Web, and it comes with a significant backlog of work to be done.However, today’s developmentpractices ensure that this backlog will grow exponentially — unless we measure it and address it soon.
A11y Advent Calendar
Curated List
A accessibility tip a day in thatarticle.Nothing too ground - breaking, and I expect a lot of these tips to be common knowledge for many of you, yet we’ll end the month with a nice list of do ’s & amp; don’ts.
Accessible usability scale
Software & Tools
Test usability with assistivetechnology users.
Accessibility for Digital Experiences 101
eBook
More than 20% of people in both theUK and the US have some form of disability.Despite this, accessibility tends to be overlooked whendesigning digital experiences.
Accessibility testing: tips and best practicesfrom industry leaders
Testing & Audit
Lots of companies want to conductaccessibility evaluations by conducting usability testing for people with disabilities.It’s the right thingto do, and companies genuinely want to be accessible to all.Sometimes, however, the challenge feels sosteep that it’s hard to even know where to begin.
Contrast Checker
Contrast Checker
This tool is built for designers anddevelopers to test color contrast compliance with the Web Content Accessibility Guidelines(WCAG) as setforth by the World Wide Web Consortium(W3C).These calculations are based on the formulas specified by theW3C.
Contrast checker for Firefox
Browser Extension
Checks for compliance with thecontrast levels of foreground and background colors combination based on the requirements of WCAG 2.1
Color Contrast Checker
Contrast Checker
Enter your colors in HEX format orclick on the icon to use the color picker.Contrast ratio value will be updated automatically as you changecolor values.We use Web Content Accessibility Guidelines(WCAG) to calculate the color contrast ratio.
Color Contrast Checker
Contrast Checker
Ensure Accessible Color Use for WCAG & amp; ADA Compliance.
Accessibility checklist
Article
Accessibility checklist to designproducts that people will love… and use
Contrast Checker
Contrast Checker
The tool tests the contrast of yourbackground and text for accessibility.You can use it to visualize different color combination palettes for your website design that are in compliance with WCAG, EU directive, and ADA standards.
Color Contrast & amp; Color PerceptionAccessibility Checker
Contrast Checker
This tool lets you check the colorcontrast between different color pairings and also check for common color perceptions against Web ContentAccessibility Guideline(WCAG) standards.
80 Web Accessibility Resources & amp; Tools(For2020)
Curated List
This collection of 80 webaccessibility resources is aimed at anyone interested in learning how to design, develop and test inclusiveand accessible websites, apps and online documents.Because making the web accessible ensures equal accessto the roughly 1 billion people in the world with disabilities.
Color Check for ADA image compliance
Image Color Checker
Color Check in an interactive toolfor validating web image compliance with ADA(Americans with Disabilities Act) contrast and readabilitystandards.
ChromeLens
Developer Tools
Chrome DevTools extension to developfor the visually impaired.
Be Inclusive
Testing & Audit
Be Inclusive is a web app that helpsyou define, track, and share web accessibility audits.We simplify the admin part of the process so manualauditing is easier to manage and share with teammates & amp; clients.
PDF Accessibility
PDF
This page is an overview of creatingaccessible PDF documents using Adobe Acrobat Pro DC.
Tips and techniques for creating accessibleinfographics in PDFs
PDF
This post addresses the five areasthat most commonly go wrong in the creation of accessible infographics for publication in PDFs.
WebAIM: Web Accessibility for Designers
Guides
The focus of web accessibility isoften on web development – the things that happen in HTML, CSS, or JavaScript.Optimal accessibility shouldstart much earlier, as part of the visual design process.This infographic highlights many importantprinciples of accessible design.
Creating an Accessible Infographic
Infographics
Infographics on the web haveskyrocketed in popularity over the last few years for many great reasons.Often, they are able to quicklyconvey complex bits of information and show key relationships between data sets.For sighted users, representing data as an infographic actually improves accessibility.
Inclusive Design: How to Make Your VisualsAccessible to All
Article
Infographics are an incrediblyeffective way to quickly convey your message.However, if you don’t keep the user in mind when creating yourinfographic, your message may not reach everyone that it could otherwise.
Developing an Accessibility Statement
Web Standards
Accessibility statements areprimarily for users of your content.Usually they will refer to accessibility statements when they encounterproblems.
AXSChat
YouTube Channel
We’re an open online community ofindividuals dedicated to creating an inclusive world; we believe that accessibility is for everyone.
Accessible Infographics and Flyers Checklist
Media
Use this checklist to assess if yourflyer / infographic meets all accessibility standards and best practices.Select each checkbox that applies toyour flyer / infographic.
Accessible Infographics
Infographics
An infographic is a visualrepresentation of complex data that allows users to interact with the content.
Accessibility certifications: separating what ISgood from what just sounds good
Article
People are increasingly posting thatthey(or their products) have been recently received a certificate in some accessibility - related topic.
Creating Accessible Videos
Guides
Videos should be produced anddelivered in ways that ensure that all members of the audience can access their content.An accessible videoincludes captions, a transcript, and audio description and is delivered in an accessible media player.
Contrasting Accessibility with Color Contrast
Article
How do we make it better as acommunity of designers and developers ? We must think about these folks and this is where the need for accessibility in the process comes in.
Create and verify PDF accessibility, Acrobat Pro
PDF
Acrobat tools make it easy to createaccessible PDFs and check the accessibility of existing PDFs.You can create PDFs to meet commonaccessibility standards.
Ikonate
Icons & SVG
Fully customisable & accessiblevector icons
How Can I Make My Icon System Accessible ?
Icons & SVG
Learning how to make an icon systemaccesible.
Ace, by DAISY
EPUB
Ace, the Accessibility Checker forEPUB, is a tool developed by the DAISY Consortium to assist with the evaluation of accessibility features ofEPUB publications.
Access Monitor Plus
Evaluation Tools
Access our web accessibilitypractices(WCAG 2.1) assessor here.Obtain an accessibility report using one of the following methods.
Ferramentas
Curated List
A curated list of accessibilityresources by acessibilidade.gov.pt.
CKEditor 4 - Accessibility Checker
Software & Tools
Use Accessibility Checker to inspectthe content when you work on it, right in the WYSIWYG editor.The tool will resolve some issuesautomatically and recommend how to fix common accessibility problems found in your document.
Accessibility Bookmarklets
Bookmarklet
Accessibility of web pages can behard to observe.These bookmarklets help web developers and designers see the big picture regarding webaccessibility.
a11yTools Resources
Curated List
Tools and resources curated by PaulJ.Adam.
WCAG Cheat Sheets WAI - ARIA Cheat Sheets & amp;Mobile Accessibility Cheat Sheets
Accessibility Cheatsheet
Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around theworld, with a goal of proving a single shared standard for web content accessibility that meets the needs ofindividuals, organizations, and governments internationally.
PostCSS Colorblind
Developer Tools
A PostCSS plugin for seeing yoursite as a colorblind person may.
a11yTools - Web Accessibility on theApp & nbsp; Store
Software & Tools
a11yTools is a collection of HTMLWeb Accessibility Testing Tools in one location on your iPhone and iPad for quick and easy Accessibilitytesting.Run your favorite Accessibility testing tool and easily take a screenshot on your phone showing thea11y error to developers and designers.
The Great Accessibility Blogs Roundup
Curated List
List of influencers in theaccessibility space & amp; made this comprehensive list of accessibility blogs.As the accessibility space isvery dynamic keeping updated about various accessibility techniques, tips & amp; tricks will be the key for success & amp; we hope these blogs will come in handy.
Check My Colours
Color Simulator
A tool for checking foreground andbackground color combinations of all DOM elements and determining if they provide sufficient contrast whenviewed by someone having color deficits.
Accessibility Programming Guide for OS X: Testingfor Accessibility on OS X
Article
It is a tool for checking foregroundand background color combinations of all DOM elements and determining if they provide sufficient contrastwhen viewed by someone having color deficits.
a11yTools - Extension for Safari macOS
Browser Extension
a11yTools is a collection of HTMLWeb Accessibility Testing Tools in one location in a Safari Extension used for quick and easy Accessibilitytesting.Run your favorite Accessibility testing tool and then take a screenshot showing the a11y error todevelopers and designers.
a11y - evaluation - tools
Testing & Audit
A Google spreadsheet that includes alist of tools that can be used to evaluate the accessibility of web content and non - web content(mobile applications, desktop applications, documents)
A11ygato
Developer Tools
Accessibility dashboard for websitemonitoring
Build more accessible apps
Mobile
Accessibility is an important partof any app.Whether you're developing a new app or improving an existing one, consider the accessibility ofyour app's components.
Color Contrast Accessibility Validator
Contrast Checker
This website provides free colorcontrast analysis tools that will display the color contrast issues of a web page or chosen color - pair; perWCAG 2.1 Guidelines.
Best video on - demand streaming services foraccessibility
Guides
Use this guide to compare the mostpopular on - demand services and find out which ones best suit your access needs.
Best video conferencing apps and software foraccessibility
Article
Video calling apps can help maintainconnection and community online, even if you’re unable to in person.Here's an overview of the best videoconferencing apps for accessibility.
Accessibility Code Library
Design Patterns
This is a collection of accessiblesolutions.The links take you to a page demonstrating the fully functional widget.
Accessibility of Web Components
Article
Presentation made by Marcy Suttonthat talks about accessibility of web components.
Label in Name in WCAG 2.1
Guides
Text in Label is just one of manycriterion outlined in the WCAG and, while it may seem like a small detail, adhering to it can make a bigimpact on our users.
Using Meaningful Link Text
Design Patterns
Link text should be unique within apage, should be meaningful when read out of context, and should help users to know something about theirdestination if they click on it.Link text such as “Click here” and “More” fail to meet these criteria.
Developing Accessible Websites
Guides
In order to assure that websites andweb applications are accessible to and usable by everyone, designers and developers must follow webaccessibility guidelines.
A11Y Websites
Curated List
Showcase of accessible websites.These websites have been assessed through both automated and manual testing against the success criteria setout in the Website Content Accessibility Guidelines(WCAG) 2.1 to grade AA and above.
Understanding accessibility requirements for public sector bodies
Article
Making a website or mobile appaccessible means making sure it can be used by as many people as possible.
Publish an accessibility statement before yourservice goes into public beta
Guides
To comply with public sectoraccessibility regulations your service(this includes websites and mobile applications) must meet WebContent Accessibility Guidelines(WCAG) 2.1 AA standards and publish an accessibility statement before goinginto public beta.
Request an accessibility audit
Guides
To meet public sector accessibilityregulations your service needs to pass an accessibility audit and publish an accessibility statement beforeit goes public.
How to test for accessibility
Testing & Audit
These are tasks you can undertake totest your service for accessibility.Some of these will reference the common testing methods.As a bareminimun we suggest you perform the generic tasks along with at least one screen - reader.
Check the accessibility of your service beforeyou get an audit
Guides
The accessibility of your service isyour team’s responsibility.Before you request an accessibility audit, you should check the accessibility ofyour service.
Doing a basic accessibility check if you cannotdo a detailed one
Article
The first step towards meeting thenew accessibility requirements involves evaluating how accessible your website is.
Checklist to avoid the most common accessibilityerrors
Article
This isn’t a comprehensive guide toaccessibility, but we’ll look at ways to avoid the most common accessibility errors identified by the WebAIMaccessibility analysis of the top 1, 000, 000 home pages, and the HTTPArchive 2019 Web Almanac analysis of 5.8million pages.
40 Tips For Inclusive And Accessible UserInterface Design
Curated List
Before diving into the tips, justone note on terminology.When we’re designing, it’s tempting to think in terms of “regular” users as themain focus, and then to treat users with any kind of impairment as an edge case for which we might need tocompromise our core design.
AccessAbility: A Practical Handbook on AccessibleGraphic Design
Handbook
All design by definition promotesaccessibility.Graphic designers try to makeprinted messages clearer, websites more navigable, physical environmentseasier to negotiate.
Dropping Support For IE11 Is ProgressiveEnhancement
Article
If you’re a web developer workingtoday, it’s probably long passed time for you to stop transpiling your modern JavaScript into ES5 for Internet Explorer.Any time or effort spent getting your JavaScript working in IE11 is wasted time thatcould be better spent making a better experience for users without JavaScript.
Tools for designing good - looking accessibleinterfaces
Curated List
It's important for me thateverything I design is both accessible, ethical and user friendly.And to be fair, the three really gohand -in -hand.A product cannot be friendly if it's harmful or inaccessible.
Accessibility checklist
Media
A list of accessibilityrecommendations, tips and resources.
A plan for accessible maps
Design Patterns
Designing accessible interactivemaps is hard.I don’t think I could point to any single thing that I’ve worked on that covers all of thethings mentioned here.But, if I was going to start a brand new project, with plenty of time to get thingsright, this is where I’d start.
W3C Accessibility Standards Overview
Web Standards
The World Wide Web Consortium (W3C)develops international Web standards: HTML, CSS, and many more.W3C’s Web standards are called W3CRecommendations.This page introduces guidelines and other standards related to web accessibility.
Writing for Web Accessibility
Web Standards
Basic considerations to help you getstarted writing web content that is more accessible to people with disabilities.
Developing for Web Accessibility – Tips forGetting Started
Web Standards
Basic considerations to help you getstarted developing web content that is more accessible to people with disabilities.
Making Audio and Video Media Accessible
Audio & Video
Accessible audio and video isessential for people with disabilities, and benefits organizations.Depending on the content of your media, it might need captions / subtitles(a text version of the audio that is shown synchronized in the media player), a transcript(a separate text version of the audio), audio description of visual information (usually an additional audio stream that describes important visual content), or other accessibilityfunctionality / features.
Designing for Web Accessibility
Web Standards
Web Accessibility Initiative (WAI) |W3C - Tips to help you getting started making your user interface design and visual design more accessibleto people with disabilities.
Mismatch
Books
How inclusive methods can buildelegant design solutions that work for all.
Conscious Style Guide
Guides
A website devoted to consciouslanguage.Our mission is to help writers and editors think critically about using language—including words, portrayals, framing, and representation—to empower instead of limit.
My Approach To Mobile Accessibility Testing
Testing & Audit
When I get asked by team membersabout mobile accessibility, I am often asked how difficult it is compared to desktop accessibility testing.Often the questions indicate how many assume that mobile accessibility is a completely different beast totraditional functional and accessibility software testing.
WCAG 2.1: The Area Of Effect For MobileAccessibility
Curated List
Accessibility guidelines are not arecent trend, but with events in the Digital World, they are taking more prominent roles within companies.
30 Days of Accessibility Testing
Media
List of 30 challenges aroundaccessibility testing by Ministry of Testing
Magica11y
Developer Tools
A suite of functions to detect“user - preference” and “environment” media features.
Be My Eyes - See the world together
Mobile
Be My Eyes is a free app thatconnects blind and low - vision people with sighted volunteers and company representatives for visual assistance through a live video call.
Why and How to Start Manual Accessibility Testing
Article
Automated tests only work for thosethings that can be tested programmatically and objectively, such as the existence of alt tags, whether colorcontrast ratios are high enough, and the existence of form labels.
Making Documents Accessible
Article
Word processing documents must bedesigned so that people with and without disabilities can easily access and edit them.In particular, peoplewho are blind, people with low vision, and people with dyslexia may use a screen reader or Braille device tonavigate the document.
Improve accessibility with the AccessibilityChecker
Resources
Before sending your email message orsharing your document or spreadsheet, run the Accessibility Checker to make sure your Microsoft Officecontent is easy for people of all abilities to read and edit.
Writing Accessible Emails
Emails
Email is a primary way of connectingwith new and existing audiences, so you’ll want to ensure that the messages you send are accessible. Luckily, the process for making emails accessible for people with disabilities is similar to making anyother document accessible.
Creating Accessible Data Visualizations on theWeb
Article
Data visualizations are graphicrepresentations that cut through the volume of data to deliver insights.Charts, graphs, and other visualsabstract the underlying data to help people identify patterns and unpack complex information.Addingaccessibility features to visualizations is essential for providing the same insights to people with disabilities.
How to create better, more accessible WordPressthemes
Article
Data visualizations are graphicrepresentations that cut through the volume of data to deliver insights.Charts, graphs, and other visualsabstract the underlying data to help people identify patterns and unpack complex information.Addingaccessibility features to visualizations is essential for providing the same insights to people with disabilities.
Writing Accessible Content
Article
Good start for accessible site isusing accessibility ready themes and plugins.I have written technical overview how to build accessiblethemes.But that alone is not enough.Writing accessible content is big part of having accessible site.
Building an accessible autocomplete control
Design Patterns
Adam Silver write an end-to-endprocess on how to build an accessible autocomplete control.
Disability Language Style Guide
Resources
This style guide, developed by theNational Center on Disability and Journalism at Arizona State University, is intended to help.It coversalmost 200 words and terms commonly used when referring to disability, most of which are not covered in TheAssociated Press style guide.
Ableism / Language
Resources
The terms that are listed below arepart of an expanding English - language glossary of ableist words and terms.
Hemingway Editor
Copywriting
The app highlights lengthy, complexsentences and common errors; if you see a yellow sentence, shorten or split it.If you see a red highlight, your sentence is so dense and complicated that your readers will get lost trying to follow its meandering, splitting logic — try editing this sentence to remove the red.
The main reasons why we shouldn't use click hereas link text
Design Patterns
A typical pattern on the web is forlinks to hide behind text that says “click here”, “read more”, or similar.I’m going to share the reasonswhy this is bad and suggest some better patterns to use.
What is ARIA Even For ?
Podcast
Podcast that talks about some commonpitfalls of using ARIA.
Assessment Checklist
Media
This checklist includes an outlineof how to cover everything that’s required in an accessibility audit of a project or product.
A11y Resources
Curated List
Checkout these recommended resourcesfor furthering your journey in web accessibility.
Accessibility Audit Checklist
Media
A spreadsheet for you to manuallytest your website.A a11y resource must have brought to you by Luis Garcia from Reddit.
a11y is web accessibility
Article
When you read it regularly, youstart to notice that there’s an ebb and flow to the kinds of things that get brought up.People post ideasand observations, followed by reactions, counter - reactions, meta - reactions, subtweets, side and backchannelconversations, etc.
How to Make Your Events More Accessible andInclusive
Guides
When planning an event, we can allagree that there’s one universal goal — to ensure everyone has a fantastic time.More often than not, accommodating accessibility is often an afterthought in event marketing(or not even a thought at all).Asevent marketers, it’s on us to make sure every component of the our events is accessible to every singleparticipant — no matter ability.
Which Video Conferencing Tools Are MostAccessible ?
Article
Since the beginning of the COVIDpandemic, the rate of development in video conferencing has accelerated in a business that already hadfrequent releases.Major product announcements are happening weekly, and Zoom is releasing patches nearlydaily, along with a major upgrade to Zoom 5.
Global Digital Accessibility Developments DuringCOVID - 19
Article
What impact has COVID-19 had oncompanies across the UK and beyond ? I’ve been hosting a series of monthly webinars with senior accessibilityguests from global brands such as Microsoft and ATOS, and UK giants like Barclays and Sainsbury’s.
Accessibility Glossary
Resources
Select a letter to browse theglossary alphabetically.Next, click on a designation to consult its French equivalent and otherterminological information(which may vary from one entry to another) that includes other designations, definitions, notes and usage examples.
Accessible PDF: A Glossary of Terms
PDF
PDF Accessibility Terms Defined
Accessibility Glossary of Terms
Resources
Accessibility Glossary of Termsbrought to you b Accessible360.
Accessibility Terms
Resources
If you are new to accessibility youmay have noticed there are many acronyms, technical terms and other information directly related toaccessibility, disabilities, and advocacy.Here is a glossary of terms to assist you.
Accessibility Glossary Terms
Resources
Accessibility Glossary Terms
Your “hamburger menu” button is inaccessible.Here’s how to fix it
Article
Do you have a hamburger menu on yourwebsite ? You probably do.And why wouldn’t you ? It helps unclutter a busy website on mobile.However there’sa problem.It’s not accessible if you haven’t actually put the time and effort to do it so.
How to Use ARIA Roles, Properties, and States inHTML
Article
In this beginner’s accessibilitytutorial we’re going to learn what ARIA is, why it is necessary to write our HTML with ARIA in mind, what ARIA roles, properties, and states are, and(very importantly) the 5 rules of ARIA use.
Designing for diversity
Article
Inclusive design is often confusedwith simply designing for people with disabilities.However, true inclusive design is much more than this —it is about designing for as diverse a range of people possible.
How Users Read on the Web
Article
They don't. People rarely read Webpages word by word; instead, they scan the page, picking out individual words and sentences.
Accessibility Support
Developer Tools
Will your code work with assistivetechnologies ?
Intopia
Company
We help organisations be moreinclusive and accessible.Together, we create enjoyable, efficient online and mobile experiences for everyone.
Accessibility Reviews
Curated List
A community-driven resource to bothfind and share information on the accessibility of tools, services, platforms, and so on.
A11y Bytes
Community
Join A11y Bytes at Slack.
Readability Guidelines
Guides
A collaboratively developed,universal content style guide, based on usability evidence
Accessible color palette generator
Color Generator
Adobe color's accessible colorpalette generator.
8 common questions about accessible UX
Article
Inclusive design is about servingall types of people, and being exceptionally aware of our biases when creating designs.If you’re doing itright, you’re building a product that is usable for people from all backgrounds, including people with disabilities.The truth is inclusive design is just better design.
Inclusive icons
Icons & SVG
An inclusive icons designed byAudrey Marzin and Florent Lenormand.
Atkinson Hyperlegible Font
Typeface
Atkinson Hyperlegible font is namedafter Braille Institute founder, Robert J.Atkinson.What makes it different from traditional typographydesign is that it focuses on letterform distinction to increase character recognition, ultimately improvingreadability.
Fable
Community
Digital product testing, powered bypeople with disabilities.Fable moves organizations from worrying about compliance, to building exceptional, accessible user experiences.
Accessibility.Dev
Guides
A go-to guide for developers inbuilding websites more accessible.
Web Accessibility Resources
Curated List
A directory of accessibilityresources, tools, services and platforms by InclusionHub.
InclusionHub Digital Inclusion Resources
Curated List
Web accessibility resources tools,services and platforms.
Accessibility tools for designers and developers
Curated List
In this guide, you’ll findaccessibility testing tools, color contrast checkers and color blindness simulators, both for designers and developers who work with web and mobile.
Coblis
Vision Simulator
The Color BLIndness Simulator canclose this gap for you.Just play around with it and get a feeling of how it is to have a color visionhandicap.
When will open source care about accessibility
Article
Here’s a short breakdown. I don’tcare to go into it in depth, because, honestly, I couldn’t care less that non - disabled WordPress fans andWordPress staff are upset by this decision.Let them be pissed for a while.They deserve to have their egobruised.
FACIL’iti
Developer Tools
FACIL’iti provides a significantlyimproved and customized browsing experience for older adults and people with disabilities.It allows thewebsite to meet the needs of each individual’s particular condition.
Creating accessible color systems for human eyes
Article
I think we all agree that colors aresimply hard.We work with digital devices by looking at our screens through human eyes.These often don’t goalong very well.
An Introduction to Accessibility and InclusiveDesign
Courses & Certificates
This course introduces some of thefundamental principles of accessibility and prepares learners for further study in accessibility and inclusive design.
Elsevier's Accessibility Checklist
Media
This checklist provides an overviewof the success criteria for Web accessibility.
TheA11yMachine
Validators
The A11y Machine is an automatedaccessibility testing tool which crawls and tests pages of any web application to produce detailed reports.
Accessibility and video on - demand streamingservices
Article
The Big Hack's Inclusive LeagueTable compares the most popular UK video streaming services and the services they provide for their disabled customers.
Welcome to the Accessibility Developer Guide
Guides
If you want to learn more aboutdesigning and implementing fully accessible websites, you've come to the right place.
Accessibility checklist
Media
To design products that people willlove… and use.Every product designer has to pay special attention to rules, principles, and recommendationsto make their interface design accessible.
5 misconceptions about accessibility that harmpeople and products
Article
Why build accessible products?Understand how important it is to design a product with respect to accessibility principles.
Making Motion Inclusive
Video
It’s a common misconception thatthings like inclusive design and accessibility only come at the cost of design details like motion, butthat’s just not the case.
WebAIM: PowerPoint Accessibility
Microsoft Powerpoint
Microsoft PowerPoint is one of themost popular tools for creating slide show presentations.It is often used to organize thoughts for a meeting or lesson, to present key points in a live presentation, and even to create handouts.This articleoutlines how to can make PowerPoint files more accessible on the web.
How retailers can make their digital presencemore accessible
Article
Creating an online experience that'susable for the visually impaired.
Accessibility for Vestibular Disorders
Article
Accessibility can be tricky. Thereare plenty of conditions to take into consideration, and many technical limitations and weird exceptionsthat make it quite hard to master for most designers and developers.
Responsive Design for Motion
Article
WebKit now supports theprefers - reduced - motion media feature, part of CSS Media Queries Level 5, User Preferences.The feature canbe used in a CSS @media block or through the window.matchMedia() interface in JavaScript.Web designers anddevelopers can use this feature to serve alternate animations that avoid motion sickness triggersexperienced by some site visitors.
Your interactive makes me sick
Article
Why your coolest scrolly featurescan cause problems, and what to do about it.
The Bootcampers Guide to Web Accessibility
Books
A guide of everything Lindsey Kopaczas a self - taught accessibility expert to help bootcampers and self - guided learners.
Accessibility and Typography in Email w / PaulAiry
Emails
Talks about Accessibility andTypography in Emails
A skip link on Squarespace and a little aboutz - index
Article
Injecting accessibility featuresinto existing websites can be a challenge.
The A11Y Collective online courses on WebAccessibility
Courses & Certificates
Whether you’re a designer,developer, product owner, webmaster or content creator, you have the power to make impact.Just enroll in our courses.Learn at home or on the go and always at your own pace.
WP Accessibility Resources
Resources
Download all WP Accessibility talksand online session.
Can I Play That ?
Resources
For Disabled Gamers, By DisabledGamers
A11y for Writers
Guides
To help writers create moreinclusive and accessible content, creative spaces, and professional circles.
Easy Captions for Content Creators
Article
You made a video! Maybe it’s yourfirst, maybe it’s your 500th.Whatever the case, you have a video and now it needs captions.But…how do you get captions ? And why do you need them ? And if you’re uploading it to YouTube, surely the auto - captionsprovided by YouTube will suffice, right ? Wrong.
How Educators Can Support Accessibility
Article
Online education stands a realchance to level the playing field for disabled people when it comes to access to education, but only if schools don’t insist on applying their strict(and quite often absurd) traditional education accommodationpolicies to online programs.
Web Accessibility News & amp; Resources
Curated List
Web accessibility news andresources, curated by Deque Systems.
The Last Of Us Part II - Most Accessible GameEver!
Gaming
Today along with Courtney Cravenfrom http://caniplaythat.com/ are taking a look at the accessibility of Naughty Dog's The Last Of Us PartII.
Bringing inclusive design to life throughPersonas
Accessibility Personas
Accessibility personas — Olivia,Keith, Colin, Serena, Arturo, and Edith
How screen readers navigate data tables
Article
When a table is created using theappropriate HTML elements(or ARIA roles) screen readers can inform users about the characteristics of thetable, and users have access to keyboard commands specifically for navigating tabular content.
Five Ways to Write Better Alt Text
Article
It’s easy to writeminimally - compliant alt text.Just stick anything at all in there and automated testing tools will be happy.But if you actually care about providing high - quality experiences for blind users(which you should), writing alt text is a lot more challenging.
frequent11y
Newsletters
frequent11y is an a11y-focussednewsletter covering design, development, ethics and science in the world of accessibility.Receive your a11ynews daily, weekly, fortnightly, and monthly.
Web Accessibility Checklist
Media
A checklist for creating accessiblewebsites and web applications.
Designing Accessible eLearning Courses
Article
Accessibility eLearning developmenthas evolved from Web accessibility.Web accessibility is about making content, applications, websites, orany form of digital content that can be accessed over the internet by anyone from any place in the world.
A Good Reminder of the Importance of WebAccessibility
Article
The power of the Web is in itsuniversality.Access by everyone regardless of disability is an essential aspect.
Gutenberg Accessibility Costs WordPress the W3CWork
Article
As the W3C has embarked on a fullweb property rebuild, its vendor(Studio24) indirectly announced earlier this month that it had droppedWordPress from consideration as a CMS.
Apple iOS 14 Accessibility Features
Article
Apple iOS 14 accessibility features.
Apple Takes Accessibility Features to the NextLevel in iOS 14
Article
Not only did Apple take the time tofocus on interacting with your iPhone physically, but there are some extra new features.These include audioimprovements along with some extra goodies for those who use AirPods.
Products and Features – Google Accessibility
Resources
Explore some of Google'saccessibility features and products.
Microsoft Windows 10 Accessibility Features
Resources
Windows 10 brings meaningfulinnovation to all people, whether you have a disability, a personal preference, or a unique work style.
An Accessibility & amp; Inclusion Checklist forVirtual Events
Media
To make a virtual event accessible,here’s a helpful checklist that covers accessibility across the full timeline of preparing for an event, to wrapping it up.
Creating an Accessible Range Slider with CSS
Design Patterns
I’ve always loved exploring how tomake semantic, accessible elements aesthetically pleasing.And yes, it is possible.Challenging myself to do this has improved my CSS skills.
Persuading stakeholders and higher ups theimportance of accessibility
Article
Making the case for accessibility isthe most challenging part of the process.We believe there are three main levels that require change for this to happen—getting your peers on board, changing the way your team works, and finally changing yourorganisation’s systems and processes.
9 ways to make social content accessible
Article
You don’t need me to tell you thatdigital things need to be accessible(again).Accessible products and services are both a moral imperativeand the law.
Intro to Accessibility
Article
Accessibility may be more than amoral imperative to ensure products are inclusive of more people who already experience barriers in dailylife — it has a very practical outcome, benefiting everyone including the person with the disability.
Tips to Create an Accessible and Contrasted ColorPalette
Guides
Color contrast is something reallyimportant in Design.It will help users read your text and get a clear understanding of your content.Colorcontrast and color accessibility scares a lot of designers too
Color Accessibility: Tools and resources to helpyou design inclusive products
Curated List
A curated list of all resources,tips and tools regularly use to build and check the color accessibility by Stephanie Walter.
Accessibility for teams by Peter van Grieken
Guides
A starter guide for teams aboutdelivering accessible websites.
12 Screen Reader Facts for Accessible Web Design
Article
Designing for accessibility, andspecifically for screen readers, is a skill every UX designer needs.
Accessibility tools for Developers and QAs
Curated List
There are plenty of Accessibilitytools that can help us improve our web sites / apps for more people.Choose your flavor and begin testing.
Accessibility Resources
Curated List
A curated list of accessibilityresources by Ian Routledge.
Adobe unveils ambitious multi - year vision forPDF: Introduces Liquid Mode
Article
As we build future PDF experiences,our long - term vision is centered around bringing more Adobe Sensei technology into all of our documentproducts and services.
Voicetext by Presence
Software & Tools
Send voice messages w/ texttranscribed directly in Slack
Udacity's Web Accessibility by Google
Courses & Certificates
In this course you’ll get hands - onexperience making web applications accessible.You’ll understand when and why users need accessibility.
How GovTech created a web accessibility testingtool
Article
Meet the GovTech team working toembed inclusion and accessibility into webpage design and software development
Accessible Web Animation
Motion
The WCAG on Animation Explained.
Accessibility and Motion
Motion
How to design the delightful userexperience you want for your sighted / non - motion sensitive users, without triggering distraction, nauseaand migraines in the rest of us.
Creating an Accessible Range Slider with CSS
Design Patterns
A thorough guide of creating anaccessibile range slider with CSS.
Mobile Web Accessibility
Mobile
Mobile Web Accessibility Check is acomplete mobile solution to enable verification of mobile web accessibility against internationallyrecognized accessibility guidelines.
equa11y
Developer Tools
Equa11y Command Line Tool: An easyto implement axe - core command line testing tool made by Software Engineers for Software Engineers
Modularscale
Developer Tools
Use a scale like you would use aruler.Many people set heading type sizes with numbers from a scale, but that's just one possibility. Youcan use a scale to measure or set the size of any element or negative space in a composition — includinggrids, and the overall dimensions of the composition itself.
Accessibility Terms Glossary
Guides
Wondering what that acronym means?Stay up to date on the most important accessibility terms.
Polypane
Developer Tools
A browser with all the tools youneed to build responsive, accessible and performant sites five times faster, perfect for developers and designers.
Caption
MacOS App
Caption takes the effort out offinding and setting up the right subtitles.A simple design, drag & amp; drop search, and automaticdownloading & amp; renaming let you just start watching.Caption is multi-platform, open - source, and builtentirely on web technology.
Van11y
Developer Tools
Van11y (for Vanilla-Accessibility)is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement andcustomizable.
Hadley
Organization
The mission of Hadley is to createpersonalized learning opportunities that empower adults with vision loss or blindness to thrive - at home, at work, and in their communities.
Maccessibility
Podcast
In Episode 201 of The MaccessibilityRoundtable Podcast, our knights Discuss Apple’s “Time Flies” event.
Apple's Accessibility Videos
Resources
Watch all Apple's accessibilityvideos.
Accessibility is not like drowning
Article
Accessibility is not like drowning.I mean it obviously isn't, but let me explain why I'm comparing the two.
For many, accessibility is an unknown unknown
Article
An unknown unknown is something youdon’t know you don’t know.When you’re just starting out with web development there are many unknownunknowns.You don’t know enough about what’s possible to know what the right way to do things is. Accessibility is one of them.
Pixel Lite - Accessibility - first UI kit available in many tech flavors
UI KIT
A modern accessibility-first UI Kitcrafted by Themesberg.
Pivoting to fully remote accessibility testing
Article
People with disabilities are morelikely to have requested part - time or full - time WFH as a reasonable accommodation.However, those wereindividuals who wanted to WFH and, more importantly, emotionally invested in WFH.
How to discuss accessibility during adesign / UI / UX interview or portfolio review
Article
Portfolio reviews are thepenultimate step in the design / UI / UX interview process.It’s a chance to show your work, defend yourdecision making, explain your creative process, and allow your work to speak for you.
Accessibility and Design Thinking don’t worktogether automatically
Article
Under the universal/inclusive designdoctrine, you design for all users and, therefore, do not call out the needs of the users with disabilities.
There is no “myths of color contrastaccessibility”
Article
When you need to work on interfaces,color contrast is a real thing you have to take into account to make it accessible.You have the right to beafraid of losing part of the aesthetics of your beautifully well - designed interface, and you are right if you are used to a poor contrast ratio.Accessibility comes with its constraint, but not much more than UX (User Experience) Design.
Building an Accessible Product
Article
Accessibility is a hot topic, andeveryone is pushing to make their products more accessible.Whether you’re looking at it through a design, technical, or managerial lens, the task of taking a product from zero to accessible can be very daunting.Wehave recently gone through this process on the Inbox team at Hootsuite and want to share some of theknowledge we’ve gained.
What is Focus in Web Accessibility ?
Article
Some users use the keyboardprimarily, and do not or can not use the mouse to interact with the computer(e.g., someone with physical motor coordination and control challenges).
Please Take Accessibility Seriously
Article
The internet is, theoretically, aplace that can be adapted to suit people with different accessibility needs.
UX Design Colour Psychology, Theory & amp;Accessibility
Article
Colour is an interesting topic,which I feel is often overlooked and sometimes under - appreciated.One of the first things I was taught wasthe power of colour, how it can have an impact on human emotion, and that there should be purpose behindchoosing one.
How AI Can Influence Accessibility
Article
Thoughts on establishing bestpractices in AI ethics and creating an inclusive digital future.
10 ways to start your inclusive, accessibledesign journey
Article
How do you integrate inclusive andaccessible design practices into your work, so that it becomes almost Business As Usual ? Here’s 10 ways thathelp recognise inclusion, learn from diversity, and be more innovative with the technology we create.
A11yWatch
Validators
Fast and efficient web accessibilityproductivity tool.
Foundations of Website Accessibility Course
Courses & Certificates
Overwhelmed by WCAG? Learn apractical approach to accessibility guidelines.
Overlays and Plugins Aren’t the Answer toAccessibility
Article
Website accessibility overlays andplugins aren’t the answer to accessibility and compliance, despite being touted as an easy, automatedsolution for web designers and developers and their clients.They present a plethora of problems.
Design With Accessibility in Mind
Article
Most designers don’t think aboutaccessibility, but it affects branding, design, documents and websites.It’s a great way to differentiateyourself from other designers while helping your clients reach more people and legally protecting them.
Color Accessibility
Figma
The following assignment is brokendown into three distinct units.These units will test your ability to identify vision deficiencies, utilizetools to assist in making corrections, and your creativity in altering existing designs to the benefit ofyour users.
Color choices that are accessible
Article
Color is a foundational element inany creative work.
Using the Ipad to Support Dyslexia
Article
When using an iPad to support pupilswith literacy difficulties such as dyslexia, there is a temptation to head straight to the Apps Store todownload the latest dedicated 'dyslexia app'.
Co - creator of Apple VoiceOver talks importance ofaccessibility tech
Article
Dean Hudson, accessibility technicalevangelist at Apple, was part of the original team behind VoiceOver.
Accessibility – React
Mobile
Web accessibility (also referred toas https://en.wiktionary.org/wiki/a11y) is the design and creation of websites that can be used by everyone.Accessibility support is necessary to allow assistive technology to interpret web pages.
Meet the teacher changing how people think aboutdisability
Inspiration
Teaching special education takes anamazing person to figure out exactly what works for each child, and talking to her gave me an even greaterappreciation for these educators.Amy’s students are lucky to have her in their corner.
Let Accessible UX Principles Shape Everything YouDo
Article
Embedding accessibility andinclusive design throughout the product life cycle is a little like giving up smoking, said Leonie Watson, director of TetraLogical, a London - based inclusive design agency.Everybody knows it’s the right thing todo, but it seems almost impossible until you summon the will.
Gaps in Video Game Accessibility
Gaming
Gaps in video game accessibility.
A History of Section 508 Accessibility
Article
A history timeline of Section 508.
Pros and Cons of 5 Web Accessibility Tools
Article
While the need for web accessibilitywas not envisioned when the Americans with Disabilities Act was signed into law 30 years ago this summer, ADA web accessibility has emerged as a top - of - mind topic and a fundamental necessity.
Connecting UX With Digital Accessibility Strategy
Article
An inclusive UX design process hasother potential benefits.Team members become more sensitive to the diversity of human needs when makingdecisions.Processes, resources, and tools emerge to support designing for user diversity.
Designers should avoid pure black typography —but which dark gray should we use ?
Article
I’ve learned something importantfrom this experience with what would seem not such a critical task to many designers.But in reality, reading discomfort could make or break your product, especially if you are content dense application thatrelies heavily on reading.
Accessible Color Standards
Video
Today we’re talking about colorcontrast! We’ll go over what the A, AA, and AAA conformance levels mean and how to ensure properaccessibility compliance for your own site.We’ll go over how to use Chrome Developer
What to look for in an accessibility audit
Article
An accessibility audit is acombination of automated and manual testing done by accessibility experts using assistive technologies in various testing states.A detailed audit is a thorough review of accessibility that provides full coverage, that automated testing alone cannot provide.
Let’s make Accessibility sustainable at scale
Article
When you hear the word‘sustainability’, do you immediately think of the environment, green energy and windmills ?
Make apps for everyone
Article
When it comes to mobile apps, Iwould say that accessibility is something that’s closer to UX than to the development phase.That’s becauseaccessibility has to start from the design.We have to design and develop apps with accessibility in mind.
7 things I learned from Q & amp; As withaccessibility leads in big tech
Article
In the midst of the lockdown, I hadvirtual conversations with Taylor Krut[Amazon], JoAnna Hunt[Amazon], and Matt May[Adobe] about a11y, andgained some early career insights in this field that I think could be useful for any 0–3 years old designerswho wish to make their work more inclusive.
Accessibility on Digital Adoption Platforms — Auser’s delight, but a developer’s challenge
Article
Accessibility helps users to accessand use web applications despite any disability while Web Content Accessibility Guidelines(WCAG) are thestandard guidelines proposed by W3C for an application to be an accessibility complaint.Sometimes it alsohelps users to effectively use a web application with only one input device(keyboard).
Cookie banners and accessibility
Article
Yes, these do matter, especially ifyou are using a cookie banner to handle your privacy disclosures, super especially if you can be sued in California.
Accessibility and React Native — From 0 to 100
Mobile
A year ago, I was tasked with makingan app accessible.The app was written using React Native and had not been designed with accessibility inmind.If you’re about to undergo a similar activity in React Native, I believe this story will help you hitthe ground running(or at least speed walking).
Building for usability, not just accessibility
Article
In the digital world we come to thesame crossroads, do we design for most users or all users ?
Color Filters
Figma
A Figma plugin for color blindnessaccessibility.
The Newbie’s Introduction to Web Accessibility
Article
Accessible websites should be asubiquitous as ramps on sidewalks.Why do so many lack access to the internet, and what can you do to help ?
The big accessibility round - up
Curated List
Tools, inspiration, resources andevents.
ComicA11y
Inspiration
An all inclusive online comicexperiment.Because comics should be universal.
Live Subtitles
Software
Live Subtitles is an AugmentedReality(AR) app which displays real - time conversational subtitles on your smartphone screen as someone isspeaking.
Visib11y
Software
Visib11y is a daily help app forpeople with visual impairment or blindness.Instantly recognize objects all around you, read text, find outyour location, and navigate to places, all with speech.
Wikibility
Software
Using Wikibility, users withlearning disorders like dyslexia, senior, blind users, etc., can all easily use Wikipedia.
Augmenta11y
Software
Augmenta11y is an Augmented Reality (AR) app that helps people with learning disabilities like dyslexia easily read signage, paper, and othermaterial in the real world.
Oswald Labs
Company
Oswald Labs is an award-winningaccessibility technology company.
Valmiki
Browser Extension
The revolutionary tool foraccessible reading.
Agastya by Oswald Labs
Developer Tools
By adding just one line ofJavaScript code, you can make your website accessible to a much wider audience.
Yana Gevorgyan
People to Follow
Yana is a multi-disciplinary productdesigner and creator of Cluse, the most comprehensive color contrast plugin for Sketch that ensures yourproducts are WCAG 2.0 accessible.
Sketch Accessibility Assistant
Plugins
The Accessibility Assistant ensuresthat your Sketch elements pass AA + compliance based on the Web Content Accessibility Guidelines.
Anand Chowdhary
People to Follow
Anand Chowdhary is a cre­ativetech­nol­o­gist and en­tre­pre­neur.He is the co - founder and CEO of Oswald Labs, an ac­ces­si­bil­itytech­nol­ogy com­pany.
Cat Noone
People to Follow
Cat Noone is the CEO of Stark, asuite of integrated accessibility compliancetools for software teams.A solid a11y advocate and evangelist.
Madalyn Parker
People to Follow
Madalyn is a Staff Engineer on theCore team at Gatsby, wielding accessibility knowledge to implement accessible solutions at the frameworklevel and making it easier to build an accessible site out of the box.
Campaign Monitor's Checklist: Is your emailcampaign accessible ?
Media
Use the following checklist based onW3C Web Content Accessibility Guidelines to make sure your email campaign is accessible prior to send.
Writing HTML with accessibility in mind
Article
An introduction to webaccessibility.Tips on how to improve your markup and provide users with more and betters ways to navigateand interact with your site.
Color Tool - Material Design
Color Generator
Create, share, and apply colorpalettes to your UI, as well as measure the accessibility level of any color combination.
9 Myths About Accessibility.Most designers don’tknow about
Article
Find out 9 myths about accessibilityand why you and your clients should care.
Accessibility Insights for Web
Browser Extension
Accessibility Insights for Web helpsdevelopers quickly find and fix accessibility issues.
Date picker WCAG 2.1 compliant
Design Patterns
An open source date picker UIpattern in WCAG 2.1 compliant.
A11y Ally
Developer Tools
A collection of tools to aiddevelopers observe, verify, and test the accessibility of Android applications.
Zebra
Plugins
Zebra is a fast, lightweight colourcontrast checker plugin for Figma.
Button Contrast Checker
Contrast Checker
A tool to test the contrast of allbuttons and links of a page at once.Enter your domain and Button Checker test if your buttons have enoughcontrast and are compliant with WCAG 2.1.
IBM Equal Access Toolkit
Guides
Make your product more usable bymore people in less time.
IBM Accessibility Checklist
Media
This is Version 7.1 of the IBMAccessibility Checklist.
Hearo
Software
An app that can help the HearingImpaired people to communicate better with their Hearing Friends by seamlessly translating voice.
4 Major Patterns for Accessible Drag and Drop
Design Patterns
Building an interaction that worksfor both mouse and non - mouse users.
Basic requirements for accessible email campaigns
Emails
Campaign Monitor's basicrequirements and guide for accessible email campaigns.
Dot translate
Bookmarklet
A simple tool and bookmarklet tohelp you translate any website into braille.
5 Things You Need to Know About ManualAccessibility Testing with the Keyboard and Screen Readers
Article
Madalyn Parker wrote an extensiveguide on how you can test manually with the keyboard and screen readers for accessibility.
How to Build Accessible HTML Forms
Article
Proper steps to creating forms forthe web, how to think about the code we write, and considerations to make along the way.
Web Accessibility Tip: Visually hidden text forscreen - readers
Article
How to hide text from sighted usersyet still allow screen - readers to read it and how to improve accessibility for those accessing your websitewith a screen - reader.
Building Accessibility into your React App
Article
Some of the tips and guides on howsetting up automated accessibility audit tool for React applications that will help you build and createaccessible React apps.
Using Accessibility Best Practices in AndroidDevelopment
Article
When you develop Android apps withaccessibility in mind, you make the user experience much more better for users with accessibility needs.
Duotone Reader
Developer Tools
Screen reading enhancement withduo - voice text reading.
Koa11y
Validators
Koa11y is a desktop app that allowsyou to automatically detect accessibility(a11y) issues on webpages.
Notyf
Developer Tools
A minimalistic JavaScript libraryfor toast notifications.Responsive, A11Y, dependency - free.
Reading Order Bookmarklet
Bookmarklet
Test your page with this bookmarkletto quickly identify when content does not flow in a sensible manner.
The Screen Curtain Bookmarklet
Bookmarklet
The Screen Curtain Bookmarkletallows engineers, testers, educators, and students to temporarily obscure web technologies while using screen readers in order to simulate the experience of using such technologies without sight.
What has focus ?
Bookmarklet
When something receives keyboardfocus via Tab key, the current element will be logged to the JavaScript console so you can determine whichelement currently has focus!
h123
Bookmarklet
A bookmarklet that shows headingslike a screenreader.
How to talk to stakeholders about webaccessibility
Article
Show your stakeholders everythingyour company has done and is doing, the wonderful world of accessibility they are joining, and that they arealready a part of the solution.
Accessible Player Experience
Guides
A tool that helps you makeaccessible content that supports players with disabilities and find inspiration for new accessible designs for your game.
Accessibility of Virtual Reality Environments
VR & AR
The University of Melbourne listedan extensive Virtual Reality guides and a in -depth dive in mobility, cognition, hearing, older users andmore.
Accessibility tools and tips for Designers
Curated List
So you want to include accessibility in your design work - flow ? Let’s explore how.
Dyslexia bookmarklet
Bookmarklet
Rearrange the letters within wordson a page, to show what reading with dyslexia is like.
The Ultimate Guide to Email Accessibility
Books
This guide has the insights andstep - by - step advice you need to write, design, and code emails that can be enjoyed by anyone—regardless oftheir ability.
accessibilityjs
Developer Tools
Client side accessibility errorscanner.
a11y.css
Developer Tools
This CSS file intends to warndevelopers about possible risks and mistakes that exist in HTML code.It can also be used to roughlyevaluate a site's quality by simply including it as an external stylesheet.
A11y Checker
Developer Tools
Identifies accessibility issues inHTML markup.
A11ycasts
Video
A11ycasts is short forAccessibilityCasts(a11y is a common shortening of the term accessibility because there are 11 letters in between the A and the Y ).The goal of A11ycasts is to teach developers how accessibility works allthe way down at the platform level, while also demonstrating real world accessibility problems and solutionsto fix them
Google Chrome Developer
YouTube Channel
Making the web more awesome,inclusive and accessible.
Deque Systems - YouTube
YouTube Channel
Deque’s uniqueness lies in theirability to provide accessibility solutions that blend the best tools that technology can provide with extensive experience and knowledge.
W3C Web Accessibility Initiative(WAI)
YouTube Channel
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Kyper Design System
Design Systems
An accessible design system built bydesign team at MX.
A guide to color accessibility in product design
Guides
There’s a lot of talk aboutaccessible design, but have you ever thought about color accessibility ?
Cluse
Plugins
Cluse is a Sketch Plugin that allowsyou to test the color contrast of your design for accessibility and make changes without interrupting yourworkflow.
Able
Plugins
Able makes accessibility easy, whilelooking and feeling like Figma! Add color contrast and color blindness to your workflow with as littleeffort as possible.
Stark Plugin
Plugins
Design, build, and ship yourprojects that are accessible and inclusive.Works with Adobe XD, Sketch, and Figma.
WCAG Motion Guidelines
Motion
Understanding the success criteriafor Pause, Stop and Hide.
Accessibility UI Kit for Adobe XD
UI KIT
A user interface kit with a focus onaccessibility.Buttons, texts, switches, sliders, tables, graphs, links, accessibility guidelines, checklistand more.A series of content and guidelines that will help you make your website more and more inclusive.
Accessibility Challenges in an Emergency
Article
It is crucial to consider thechallenges your users may face in unexpected situations and take steps that ensure your system will remainaccessible when needed most.
Making Icons More Accessible to Screen Readers
Icons & SVG
Kalamuna as a mission-focusedorganization did a guide for you to build and create more accessible icons to screen readers.
Accessible SVGs: Inclusiveness Beyond Patterns
Icons & SVG
We are fortunate to have robustpatterns to choose from when optimizing accessibility in SVGs — but most people stop there, focusing on codecompliance and not actual users and their needs.
Accessible Systems
Company
accessible.systems is an appliedcourse on accessibility that spans design and development.Go beyond technical requirements and learn how tocreate polished, performant, and usable websites for everyone.
Up Your A11y
Blog
A blog that focuses on tutorials & amp; resources for developers seeking to build accessible web experiences.
Salesforce Lightning Design System
Design Systems
The Lightning Design System forReact is an implementation of the http://www.lightningdesignsystem.com/ with accessible patterns andestablished best practices.
Making Twitter more accessible
Article
Serving the public conversationmeans continuously taking steps to make Twitter more accessible – from what we build to the internalprograms and policies we implement globally – and this must include people with disabilities.
Digital Accessibility Resources
Curated List
Collection of a wide variety ofaccessibility resources & amp; categorized them accordingly.
The User Is Out There
Blog
Research and Intel on InclusiveWebsite Design.
The Bottom Drawer
Curated List
Kim Krause Berg curates and listedsome of the most useful accessibility tools and resources.
Sa11y
Bookmarklet
An accessibility quality assurancetool that visually highlights common accessibility and usability issues.Geared towards content authors, Sa11y indicates errors or warnings at the source with a simple tooltip on how to fix.
a11y CSS reset
Developer Tools
A small set of global rules to makethings accessible and reset default styling.
Accessibility In Chrome DevTools
Article
This article will demonstrate someuseful features in DevTools which can help you improve the accessibility of your website.
Accessible Motion Design for the Web
Motion
Motion design is a criticalcomponent of user experience, but not all enjoy animations equally.
http: //web.dev Accessible
Courses & Certificates
Learn how to provide a robustexperience to your users that accounts for their context and any situational, temporary, or permanentdisabilities.
Rabbit Hole Podcast: Accessibility
Podcast
Explore how and why you should buildaccessible websites.
Tenon.io
Company
Every user should have equal accessto your website.Tenon's tools, testing and training fix accessibility for your entire organisation.
High Contrast
Browser Extension
Lets you browse the web with yourchoice of several high - contrast color filters designed to make it easier to read text.
Accessibility Tips for Web Developers
Article
It's awesome to build sites that areinclusive and accessible to everyone.There are at least six key areas of disability we can optimize for: visual, hearing, mobility, cognition, speech and neural.Many tools and resources can help here, even if you're totally new to web accessibility.
A11y Slacker
Community
Anybody can be an A11y Slacker.
Inclusive Design 24
Audio & Video
Inclusive Design 24 (#id24) is afree 24 - hour online event for the global community.It celebrates inclusive design and shares knowledge andideas from analogue to digital, from design to development, from planners to practitioners, and everythingand everyone in between.
Adobe Inclusive Design
Company
Follow Adobe as they embark to theirmission of inclusive design.
Aditus
Company
The accessibility tool for yourteam.Our mission is to make the web more accessible for everyone.
Scope UK
Organization
We're Scope, the disability equalitycharity in England and Wales.We provide practical information and emotional support when it's most needed,and campaign relentlessly to create a fairer society.
The Big Hack
Blog
Making the digital world better fordisabled people.
WebAIM: WebAIM's WCAG 2 Checklist
Media
A checklist that presents ourrecommendations for implementing accessibility principles and techniques for those seeking WCAG conformance.
WebAIM: Link Contrast Checker
Browser Extension
For usability and accessibility,links should be underlined by default.
One Line of Code Will Not Save Your AccessibilityStatus
Article
If you could fix all theaccessibility problems in a website by simply inserting one line of code, would you really do it ?
Color and contrast accessibility
Article
If you have good vision, it's easyto assume that everyone perceives colors, or text legibility, the same way you do —but of course that's notthe case.
NN / g Accessibility
Blog
Articles, videos, reports, trainingcourses, and online seminars by NN / g.
Debunking the Myths about Dyslexia
Article
There are many signs or clues todyslexia which are discussed in depth; however it is also important to be aware of the misconceptions andmyths surrounding the disorder.
OpenDyslexic
Typeface
OpenDyslexic is a typeface designedagainst some common symptoms of dyslexia.
Dyslexie Font
Typeface
Dyslexie font is a typeface –specially designed for people with dyslexia – which enhances the ease of reading, learning and working.
A UX Copywriter’s Guide to Accessibility
Article
When we build robust web experienceswe need to build them for the actual, real people who use them.
The Directory of the Web
Curated List
Online tools for checking webpagesfor compliance with standards for accessibility to those with visual disabilities.
Focus state ideas
Inspiration
Many people exclusively usekeyboards to navigate, and rely on the focus state to know where they are on the page.Focus state users maybe a person with limited mobility, someone using a screen reader, or someone who wants to use their keyboardto quickly navigate.
Accessibility Rating of Paired Colors
Inspiration
A collection of color pairings andtheir WCAG 2.0 accessibility ratings being compiled for the Frontline Design System.
Libras app Tutorial
Inspiration
LIBRAS its a app that allowsinteraction between deaf, mute and listens with no problem in translation, LIBRAS stand for Brazilian sign language a native language developed for communication using hands.
This is how Safari should look like
Inspiration
Don't try to copy good experiencefrom the desktop, create great experience on mobile!
Accessibility Quick Win
Inspiration
Daniel Sears designed these forms,buttons, tabs, nav bars, and so on accessibility friendly for their Quick Wins process at work.
Accessibility Icons
Inspiration
Lilla Bardenova's created thesenifty and crisps accessibility icons for Validation Suite.
UI Kit - Color accessibility
UI KIT
Anshita Srivastava's created this UIKit that has color accessibility standard in mind.
Figma Contrast Checker
Inspiration
A simple idea to check tocolor - contrast ratios.
Colour palette with names and HEX
UI KIT
Gytis Ceglys's shares these colourpalettes with names and HEX code.Designed by WSAG AAA guidelines.Suitable for small and large text.
Using color - U.S.Web Design System(USWDS)
Design Systems
USWDS organizes its colors tokensinto https://designsystem.digital.gov/design-tokens/color/theme-tokens/,https://designsystem.digital.gov/design-tokens/color/state-tokens/, andhttps://designsystem.digital.gov/design-tokens/color/system-tokens/. System tokens are the complete set ofcolors available to USWDS.
Inclusive Color Sequences for Data Viz in 6 Steps
Article
Before choosing colors at random,slow down and determine a color sequence that is accessible, reproducible, and jointly works with the product palette.
UI Color Palette - Lucent Design System
Color
Creating a family of colors, eachwith a primary shade that could pass basic accessibility standards as text on both black and white.
Data vis palette by Jeremy Elder for GitLab
Inspiration
Working through the creation of anaccessible light / dark UI color palette for data visualization.Combinations explore uses for sequential, categorical, and divergent data by Jeremy Elder.
ADA Compliant Gradient Color Palette
Color
Kaitlyn shared this ADA compliantgradient color palette for your inspiration.
Contrast Checker
Inspiration
A contrast checker idea from NathanWalker to respond automatically to whatever background is behind the text.A bit like spellcheck in wordprocessors.Inspired by Stark's accessibility tool.
Accessibility Cover
Inspiration
Designed by Alejandro Ramirez, thiscover is for a blog article which puts together a list of ten web accessibility guidelines.
Global Accessibility Awareness Month PosterSeries
Inspiration
he first set in a series of postersthat were designed and displayed within the Amazon campus during Global Accessibility Awareness Monthcreated and designed by Gretchen Nash.
Contrast Analyzer and Color Blindness Simulatorfor UXPin
Inspiration
UXPin’s accessibility features thatyou can specify whether to comply with WCAG 2.0 AA and AAA levels.The Contrast Analyzer will automaticallyinform you when the contrast is insufficient.Additionally, UXPin’s Color Blindness Simulator shows yourdesign as perceived by a person with one of eight types of color blindness!
Accessa - Accessibility Plugin Widget Mockup
Inspiration
Accessa is a tool for making yourwebsite more accessible plus more.It has a ton of options for customization, and it sits right on anywebpage, minimized until opened.The configuration tool is broken down into 3 sections for types of adjustments.
Representation & amp; Inclusivity
Inspiration
An illustration designed andillustrated by Riley Caroll for representation and inclusivity.
BBC – Access All Areas
Inspiration
These animations featured on digitalposters promoting the Access All Areas accessibility awareness day at the BBC.
Accessible Palette Contrast
Inspiration
Inspired by the Contrast Grid fromEight Shapes, Jeremy Edler had an idea to incorporate accessibility features within the design tool itself, such as color palettes contrast.
Font Settings Tool
Inspiration
Felix Lee re-imagined the FontSettings tool.Giving different users an option to select with different fonts, font sizes and swatchoptions to help users squinting their eyes.
NoCoffee
Browser Extension
NoCoffee can be helpful forunderstanding the problems faced by people with slight to extreme vision problems, such as: low acuity, color blindness, nystagmus and more vision problems.
Color for everyone
Article
In a world where millions have avision impairment related to color, successful design requires designers to accommodate eyes of every kind.
Accessibility in Adobe XD
Company
Learn about features that helpcreate accessible designs, and also make XD inclusive and accessible for designers with various abilities.
ANDI - Accessibility Testing Tool
Browser Extension
ANDI (Accessible Name &Description Inspector) is a free tool to test web content for accessibility.
A11ygator
Validators
A11ygator bites websites to tastetheir accessibility.
Color.review
Color Simulator
Colors that look and work great foreveryone and what you need to know about colors & amp; accessibility.
Accessibility Insights
Company
Solve accessibility issues beforethey reach your customers.
ACheker
Validators
This tool checks single HTML pagesfor conformance with accessibility standards to ensure the content can be accessed by everyone.
Tanaguru Contrast - Finder
Contrast Checker
Findind the good contrasts, for webaccessibility, between two colors.
A11y Styled Form Controls
Design Patterns
A repository of styled and styled form control elements and markup patterns, and how they are announced by screen readers.
Accessible Color Generator
Color Generator
High-Contrast Color Suggestions.
Colors interactor
Color Generator
A simple way to check theinteractions between the colors of your palette.
Contrast Ratio
Contrast Checker
Easily calculate color contrastratios.Passing WCAG was never this easy!
Accessible Colors
Contrast Checker
A simple tool to testbackground / text contrast ratio and automatically find the closest accessible colors.
ColorBox
Color Generator
Produce accessible color paletteswith the help of ColorBox.
Apple's Accessibility Human Interface Guidelines
Company
Follow Apple's Accessibility HumanInterface Guidelines.
Who Can Use
Color Simulator
A tool that brings attention andunderstanding to how color contrast can affect different people with visual impairments.
Toptal Color Blind Filter
Vision Simulator
Use the Colorblind Filter to selectsafe colors earlier in the design process.
Accessibility: 4 easy - to follow methods
Article
Being aware about accessible designand helpful methods! Tips on how to make information we constantly upload on the Web accessible.
Accessibility drives aesthetics
Article
Accessibility doesn’t sacrificeaesthetics.
AccessLint
Developer Tools
AccessLint brings automated webaccessibility testing into your development workflow.
Accessibility Toolbar Plugin
Developer Tools
Simple accessibility toolbox for use in websites
One Click Accessibility
Plugins
Accessibility plugin for Wordpressto help you make your website accessible for people with disabilities.
Dropkick.js
Plugins
A JavaScript plugin for creatingbeautiful, accessible, and painless custom dropdowns.
Web Content Accessibility Guidelines(WCAG)Overview
Web Standards
Introducing the Web ContentAccessibility Guidelines(WCAG), including WCAG 2.0 and WCAG 2.1.
Web Accessibility: Colour Contrast
Article
In order to ensure your webapplication meets or exceeds WCAG AA be sure to consider colour contrast from the outset and put processes in place to monitor it.
IBM Accessibility
Company
Beyond compliant. Accessibility isnot just a practice, it’s a culture and a mindset.
axe - Web Accessibility Testing
Browser Extension
Automatically catch accessibilitydefects while you code.
WAVE Evaluation Tool
Browser Extension
Web accessibility evaluation tooldeveloped by WebAIM.org.
IBM Equal Access Accessibility Checker
Browser Extension
The IBM Equal Access AccessibilityChecker is an open source tool for web developers and auditors that utilizes IBM's accessibility ruleengine, which detects accessibility issues for web pages and web applications.
Helperbird
Browser Extension
A browser extension that helps andgives you features like dyslexia fonts, change the font & amp; background color, text to speech with natural voices, overlays, dyslexia rulers, immersive reader, reader mode, and much more to tailor the web to youraccessibility needs.
Color Contrast Analyser
Plugins
A Sketch plugin that calculates thecolor contrast of two layers and evaluates it against the WCAG.
Color Tester
Contrast Checker
Create and test your color palette,validate color contrast for accessibility(https://www.w3.org/TR/WCAG20/), simulate your palette seen by a colorblind person, convert colors to HSLA, RGBA and hex for your CSS, convert to CMYK.
Inclusive Design 24
Community
A 24-hour online event for theglobal community.It celebrates inclusive design and shares knowledge and ideas from analogue to digital, from design to development, from planners to practitioners, and everything and everyone in between.
A Smashing Guide to Accessibility
Guides
At Smashing we believe a goodwebsite is an accessible website, one which is available to everyone, no matter how they browse the web.This guide highlights our content which can help you create more accessible sites and web applications.
Liliane Canvas Control for Adobe XD
Plugins
This plugin helps designers andcreatives control Adobe XD's canvas such as zooming, panning or moving selective objects but just using amouse.
Removing barriers: How Liliane Canvas Control isempowering designers in the face of disability
Article
How Liliane Canvas Control isempowering designers in the face of disability
ARIA: poison or antidote ?
Article
How lying to screen readers curesaccessibility, when it doesn't rub salt in it!
Developing accessible cards / tiles
Design Patterns
The card pattern (also known astiles and blades) has become quite popular over the last several years - here are a several great resourceson building accessible cards / tiles.
44x44 Pixel Cursor Bookmarklet
Bookmarklet
Change your cursor to 44x44 pixelssquare for testing WCAG Target Size and Pointer Target Spacing requirements.
Awesome A11y
Curated List
A curated list of awesomeaccessibility tools, articles, and resources.Inspired by awesome - svg, awesome - webcomponents andawesome - flexbox.
The Big Hack Resources
Curated List
Articles, guides and accessibilityresources for businesses
The A11Y Project Resouruces
Curated List
All about softwares, books, blogs,online tools and more.
Contraste
Color Generator
Contraste allows you to quickly knowif a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C.
The Ultimate Guide to Accessible Emails
Emails
Litmus's ultimate guide toaccessible emails will help you create emails that are more accessible and how you can make email better for everyone.
A Beginner’s Guide to Email Accessibility (Checklist + Resources)
Emails
This guide will walk you through achecklist of over thirty improvements you can make to your emails to make sure they’re as accessible as possible.
Email Accessibility Best Practices
Emails
Tips and tricks on how yo make youremail accessible and inclusive.
The Accessibility Cheatsheet
Media
A condense WCAG extensive guidelinesand highlight some practical examples of what we can do to implement them and make our websites moreaccessible.
React Aria
Design Systems
A library of React Hooks thatprovides accessible UI primitives for your design system.React Aria provides accessibility and behavioraccording to https://www.w3.org/TR/wai-aria-practices-1.2/, including full screen reader and keyboardnavigation support.
Knowbility
Organization
Knowbility, Inc. is a nonprofitorganization based in Austin, Texas and an award - winning leader in accessible information technology.
Game accessibility guidelines
Guides
A straightforward reference forinclusive game design
Xbox Accessibility Guidelines
Guides
Set of best practices that have beendeveloped in partnership with industry experts and members of the gaming and disability community.
The A11Y Project
Media
This checklist uses The Web ContentAccessibility Guidelines(WCAG) as a reference point.
100 Days of A11y
Blog
Learning all things webaccessibility in 100 days
A Stark Difference in Design
Newsletters
The newsletter for all thingsaccessibility in design and development.
Stark Community
Community
Join Stark community to learn from acommunity of people designing and building accessible, ethical and inclusive products.
Stark Blog
Blog
Follow the Stark team as theycontinue to build a product that goes beyond accessibility.
The difference between
Article
The aria-label and aria-labelledbyattributes do the same thing but in different ways.Sometimes the two attributes are confused and this hasunintended results.
5 most annoying website features I face as ablind person every single day
Article
Holly Tuke listed the 5 annoyingwebsite features she face as a blind person every single day
Epilepsy Blocker
Plugins
A simple Figma plugin to keep yourdesigns accessible to people with photosensitive epilepsy
5 Tips on Designing for Accessibility
Article
Be mindful of color. Color plays animportant part in design.It’s a powerful way to convey emotion in your designs or create a specific mood.
Accessibility: 7 best practices to get youstarted
Article
Accessibility matters a lot. Here'swhy.
Abstract Accessibility
Article
Accessibility, responsibility, andethics in design.
A11y Coffee
Blog
Pick your serving size of webaccessibility information.What is web accessibility and why is it important ?
XR Access Initiative
Community
A community committed to making #XRaccessible to people with disabilities.
Accessible Brand Colors
Color Generator
Shows you how ADA compliant yourcolors are in relation to each other.
Colors
Color Generator
A nicer color palette for the web.Mix and match color classes to create a variety of accessible themes.
Accessible By Design
Article
Accessibility is an importantconsideration of building a better web.
Accessibility Bluelines
UI KIT
A set of accessibility bluelines tohelp annotate design files for handoff to dev and QA
The World Needs Web Accessibility Now More ThanEver
Article
Kelly Bron Johnson listed someguidelines to follow to build your website more accessible.
Covid Reminds Us That Web Accessibility Helps AllUsers, Not Just The Disabled
Article
Understanding the real numbersbenefiting from digital accessibility.
Deque Systems
Company
The trusted leader in digitalaccessibility.Helping for your compliance goals and help make the web a better place.
Stark
Company
The suite of integratedaccessibility compliance tools for software teams.
Inaccessible Twitter
Bookmarklet
Discover how inaccessible yourTwitter feed really is.
Accessibility Testing is like Making Coffee
Article
In accessibility testing, and whenmaking coffee, we are shooting for the smoothest experience.We want to get to the essence of the thingwe’re making.We want to filter out the grit and bitterness and include everything that makes our finalproduct enjoyable.
Disability Impacts All of Us
Article
An infographic that shows howdisability impacts not one or two people but all of us.
EDUCAUSE Continues to Support AccessibleInstructional Materials Legislation
Article
While the Americans withDisabilities Act was signed into law thirty years ago, EDUCAUSE continues to work with lawmakers and otherstakeholder groups to advance the availability of accessible instruction materials and related technologies.
Writing Alt Text for Data Visualization
Article
You probably can’t write text thatconveys the entire meaning of a chart.But, that doesn’t mean that you shouldn’t try.
Accessibility For Everyone
Books
Helps you understand how to makeyour website more accessible to people with disabilities and other accessibility - related needs.
How to build accessible cards–block links
Design Patterns
Explore some key approaches toensure that, as well as looking good, your cards are also accessible and offer a usable experience.
Forms design best practice
Design Patterns
Best practice guidelines for formdesign.
Introduction to Understanding WCAG 2.1
Guides
Understanding the Four Principles ofAccessibility.
Digital Accessibility Centre
Company
Works with clients to create digitalmedia that is accessible to all members of a population, and meets best practice accessibility standards andlegislation.
Microsoft Design
Company
Designing for inclusivity not onlyopens up our products and services to more people, it also reflects how people really are.
WCAG Accessibility Checklist
Media
Geri Reid's WCAG checklist fordesigners
Scaling accessibility with a design system
Case Study
Geri Reid's case study about herexperience of learning how to design accessible web components, then scale their impact through a designsystem.
Leonardo
Color Generator
An open source contrast-based colorgenerator.
Contrast Grid
Contrast Checker
Test many foreground and backgroundcolor combos for compliance with WCAG 2.0 minimum contrast.
Accessible color palette builder
Color Generator
An Elm-based prototype to helpdesigners build accessible color palettes.
Accessibility for Teams
Guides
A ‘quick-start’ guide for embeddingaccessibility and inclusive design practices into your team’s workflow.
Aditus Accessibility Audit
Validators
Our audits are more than just areport.For every accessibility issue, you’ll get recommendations on how to fix them.
Sim Daltonism
Vision Simulator
A color blindness simulator for iOSand Mac.It takes a live video feed from the camera on iOS and filters it in real time using a colorblindness simulation algorithm.
Colorable
Contrast Checker
Color combination contrast tester.
An introduction to accessibility
Article
A truly accessible website isinclusive of every potential user.It covers differential abilities of all shapes, sizes, and permanence.
10 Rules For Efficient Form Design
Design Patterns
Users can be hesitant to fill outforms, so you should make this process as easy as possible.We need to make the form design our strengthrather than weakness.
a11y Dialog
Design Patterns
A very lightweight and flexibleaccessible modal dialog.
Can I use
Developer Tools
Provides up-to-date browser supporttables for support of front - end web technologies on desktop and mobile web browsers.
Colorblinding
Browser Extension
Simulates the website as a colorvision impaired person would see.
Accessibility Developer Tools
Developer Tools
This is a library ofaccessibility - related testing and utility code.
Spectrum
Browser Extension
Helps you to test web pages forpeople with different types of Color Vision Deficiency(CVD).
Colour Contrast Analyser
Contrast Checker
Helps you determine the legibilityof text and the contrast of visual elements, such as graphical controls and visual indicators.
WebAIM: Contrast Checker
Contrast Checker
A web app tool to check yourforeground, background and text color contrast.
Color Oracle
Vision Simulator
A free color blindness simulator forWindows, Mac and Linux.It takes the guesswork out of designing for color blindness by showing you in realtime what people with common color vision impairments will see.
tota11y
Validators
An accessibility visualizationtoolkit, helps visualize how your site performs with assistive technologies.
Pa11y
Company
Pa11y aims to improve theaccessibility of the web through better tooling and automation.
HTML5 accessibility
Developer Tools
Get the current accessibilitysupport status of HTML5 features across major browsers.
Randoma11y
Color Generator
Randomly produce an accessible colorpalette with contrast ratio check.
Accessible Email
Emails
Accessible-email is an initiative ofMaarten Lierop and Jordie van Rijn to promote email marketing accessibility and usability.
t12t Accessibility Newsletter
Newsletters
The goal is to spread news, articlesand tips on the subject of digital accessibility.
Accessibility Weekly
Newsletters
A weekly dose of web accessibilityto help you bring it into your everyday work.Delivered to your inbox each Monday, curated by David A. Kennedy.
Gatsby Design
Company
We’re working hard to make the weban approachable and fun place for all to build amazing experiences.
Inclusive Front - End Design Patterns
Books
Explore how you can craft accessibleinterfaces without extra effort — and what front - end design patterns you can use to create inclusiveexperiences.
Accessibility Wins
Curated List
Showcasing accessible userinterfaces and tools.Curated by Marcy Sutton.
A Web for Everyone
Books
A Web for Everyone will help youmake your site accessible without sacrificing design or innovation.
The A11Y Project
Community
The A11Y Project is acommunity - driven effort to make digital accessibility easier.
eBay MIND Patterns
Design Patterns
eBay's Accessibility Patterns forthe web intended to complement those systems & amp; tools with accessibility guidance.
Inclusive Components
Design Patterns
All about designing inclusive webinterfaces, piece by piece.
A11Y Style Guide
Design Patterns
This application is a living styleguide or pattern library, generated from KSS documented styles...with an accessibility twist.
Usability Checklist
Media
Catch common usability andaccessibility problems before user testing.
The Contrast Triangle
Contrast Checker
A three-way color contrast checkerto help determine your colors, text, and links are accessible.
Promises to Users
Guides
People use the internet to consumeinformation, and more often than not that just means reading words on a screen.Too many websites make thisharder than it should be.Let's fix that. If we deliver on the following promises to users, the internetwill be a much better place.
Color Safe
Color Generator
Empowering designers with beautifuland accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Inclusive Design Principles
Guides
These Inclusive Design Principlesare about putting people first.It's about designing for the needs of people with permanent, temporary,situational, or changing disabilities — all of us really.
Accessibility - Material Design
Company
Accessibility in design allows usersof diverse abilities to navigate, understand, and use your UI.
Empathy Prompts
Inclusive Design Generators
Prompts and ideas to help considerInclusive Design principles when making things for others to use.
Vox Product Accessibility Guidelines
Media
Making work accessible creates abetter experience across the board.Use this checklist to help build accessibility into your process nomatter your role or stage in a project.
18F Accessibility Guide
Media
This checklist helps developersidentify potential accessibility issues affecting their websites or applications.
Success Criteria Checklist
Developer Tools
A tool to check all UI componentsand giving you a success criteria checklist
Designing For Accessibility And Inclusion
Article
The more inclusive you are to theneeds of your users, the more accessible your design is.
Accessibility in Design
Guides
This guide introduces four differenttypes of disabilities and offers actionable steps that we as designers can take to ensure that our productswork for everyone.
Contrast
Contrast Checker
A macOS app for quick access to WCAGcolor contrast ratios.
Colorific
Color Simulator
Colorific is a tool that allows youto test for color accessibility for common color perception and various color blind conditions.
Hex Naw
Contrast Checker
Hex Naw is a tool that helpsdesigners and developers test entire color systems for contrast and accessibility.Plug in your palette orcolor system and let Hex Naw do the rest.