Category Archives: tips

Prototyping accessibility in web and mobile UI design

Adaptable, interactive and coherent prototypes for users with disabilities. Covering accessibility in the prototyping phase of web and app design.

Pay close attention to color, contrast and visual hierarchy

Make your interactive UI elements more interactive

Don’t crowd me!

Make your app accessible by being adaptable

“Flexibility is the key to ensuring that your website is accessible to everyone.” Shaun Anderson, Hobo Web

Prototyping responsive design is actually pretty easy. With Justinmind prototyping tool, it really only involves creating a set of screens of different sizes (to represent the different screens sizes that your users use), adding the content to each screen, and adding linking events between the screens. In fact, we’ve created a nifty tutorial in our Support section to teach you step by step.

Don’t forget the user testing

Curated by (Lifekludger)
Read full article at Source: Prototyping accessibility in web and mobile UI design

Making your site accessible using W3C’s Easy Checks

We’ve put together an infographic based on the W3C’s ten easy checks.

While this is by no means an extensive checklist, we hope it will help when considering the first steps that can be taken in order to ensure your website is accessible.

 

Curated by (Lifekludger)
Read full article and Download the full infographic from Source: Making your site accessible using W3C’s Easy Checks

The art of labelling — A11ycasts #12

There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:

  • Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to chrome://flags/ and turn on in the DevTools settings.
  • Wrapping an <input type="checkbox"> in a <label>gives the input a name of the text in the label, even without a for attribute.
  • The aria-labelledby attribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself.
  • Adding tabindex='0' to an element will make it focusable.


Curated by (Lifekludger)
Read full article at css-tricks

Introducing A11y Toggle

If you’re only here for the code, go straight to the GitHub repository.

A few weeks ago, I introduced a11y-dialog. Today, I am coming back with another accessibility-focused module: a11y-toggle.

At Edenspiekermann, we used to heavily rely on the checkbox hack to toggle content visibility. Unfortunately, this hack (the word is an understatement) involves some usability and accessibility concerns.

What’s wrong with the checkbox hack?

That’s a lot of people excluded just for the sake of simplicity (which is also arguable). On top of that, the checkbox hack has some accessibility issues. See, for a content toggle to be fully accessible to assistive technology users, it should respect the following:

So we need JavaScript (unfortunately). However, we don’t need a hell lot of it. A few lines are enough. And that’s precisely what a11y-toggle does (in roughly 300 bytes once gzipped). It just makes it work™.

 

Curated by (Lifekludger)
Read full article at Source

How disabled iPhone users can take control with blinks, nudges and even breath

tecla shield disabled touchscreen teclashield editTim Cook began Apple’s latest product unveiling with a video narrated by a disabled woman using a Mac with the help of an assistive device — a switch that she could bump with the side of her head. Her name is Sady Paulson, and the message couldn’t have been clearer: With the right technology, even people with almost no control over their bodies can interact with the world and harness their own creativity in ways that were previously impossible.

Wireless freedom for disabled people

The video was upbeat and inspirational, meant to affirm Apple’s commitment to accessibility. But what it didn’t show was the struggle those like Paulson have when it comes to controlling a multitude of devices. That head-triggered switch might be her only means of controlling her wheelchair, computer, or phone or tablet. If it’s hardwired into one of these devices, how can it control the others?

Curated by (Lifekludger)
Read full article at Source

The Accessibility Difference Between Aria-hidden and role=”presentation”

In dealing with role=”presentation” and aria-hidden=”true” you may find that they both have deceptively similar functions when it relates to how they interact with assistive technology (screen readers). Before we dig into the difference between these two attributes we first need to learn a little bit about how accessibility in a Web browser works and this thing called: The Accessibility Tree

The Accessibility Tree

The accessibility tree is a mapping of objects within an HTML document that need to be exposed to assistive technology (if you’re familiar with the DOM, it’s a subset of the DOM). Anything that communicates aspects of the UI or has a property or relationship that needs to be exposed, gets added to the tree.

Curated by (Lifekludger)
Read full article at Source: The Accessibility Difference Between Aria-hidden and role=”presentation”