Ever made an app that is impossible to use? There's a chance you have. Technology users are a diverse bunch, which means that some of your users are using your app much differently than you WOULD EXPECT. That's where accessibility comes in: Designing for everyone regardless of disability. Here are some tips and resources to get you started.

A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.

Koa11y is a desktop app that allows you to automatically detect accessibility (a11y) issues on webpages.

Pa11y is your automated accessibility testing pal. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.

ANDI (Accessible Name & Description Inspector) is a "favelet" or "bookmarklet" used by web developers and testers to inspect web content for accessibility.

Create interactive voice prototypes for Amazon Alexa and Google Home, no coding required.

[ARIA-related problems]
When WebAIM evaluates a client’s website for accessibility, we often spend more time evaluating and reporting on ARIA use than any other issue. Almost every report we write includes a section cautioning against ARIA abuse and outlining ARIA uses that need to be corrected or, most often, removed. Ironically, this is often followed by a list of issues that can only be addressed with ARIA.

This page has a quick introduction to the personas we created for this book. The full version of the personas with more details about them and their stories will be posted over the next few weeks.

Welcome to the Teach Access Tutorial! This resource is part of the Teach Access Initiative, and provides best practices for making accessible mobile and web apps. This tutorial currently provides basic training for developers and designers, with more disciplines to come! If you are new to accessibility, you’ve come to the right place - the following material will help you get a solid footing on accessibility via hands-on exercises and useful reference guides. Follow the instructions below for using and interacting with the tutorial.

It’s extremely useful to have a WCAG 2.0 checklist to hand when you’re working through the guidelines. A WCAG 2.0 checklist helps you to check your web accessibility progress, record how far you’ve come and set your targets out for the future.

Wuhcag is all about holistic web accessibility – that means taking everything about your website into account. That’s why I don’t rush you to make every web accessibility change at once – it’s too much for you to do and so it’s bad for your users. I love a structured approach to everything in life, and your website is no exception.

Get the current accessibility support status of HTML5 features across major browsers.

Microsoft inclusive design: three degrees of disabilities

The toolkit is a comprehensive resource for any inclusive session you want to lead. Practice new skills, develop new concepts, or create a prototype – the toolkit is made to be retrofitted to your design team’s goals. Download everything here, and start exploring!

We ran an audit to see what issues the different accessibility testing tools pick up. We deliberately introduced 143 accessibility barriers to a page of content, and ran them through 10 automated tools. We also had a look at features like usability and cost.

For information on how to accessibly implement the components I’m working on, I often refer to WAI-ARIA Authoring Practices specification. One thing this spec sometimes recommends, is to trap focus in an element, for example in a modal dialog while it is open. In this post I will show how to implement this.

certainlyakey starred davidtheclark/focus-trap

Modifies Gravity Forms form fields and improves validation so that forms meet WCAG 2.0 accessibility requirements.

I’m currently using gravity forms and struggling with the accessibility of it. It sounds like there are no plans to make it accessible, but I know a lot of people use this plugin, so let’s make the best of it.

Recently I discovered Contact Form 7 (CF7) by Takayuki Miyoshi. A plugin to create forms on a WordPress website. I was looking for an accessible alternative for Gravity Forms, and discovered that Contact Form 7 does an excellent job!

Up to now I used Gravity Forms, which is a great plugin. But it has some accessibility issues and has W3C validation errors for the HTML and CSS. Gravity Forms also doesn’t have an accessible backend.

Contact Form 7 recently (version 3.6) added accessible WAI-ARIA to the forms, e.g. for error messages and required fields. Also the plugin gives you complete controle over the HTML output of the form.

A second advantage of Contact Form 7 is that the backend is fully accessible, so a visually impaired content manager can build her own forms.

The only drawback is that the default form, provided by the plugin needs to be changed to make the form fully accessible, but that’s easily done, unlike with Gravity Forms.