Accessibility Icon

Accessibility

Specialized hardware or software, or a combination of both, designed to enable use of a computer by a person with a disability or impairment.
12 Stories
All Topics

HTML deque.com

The anatomy of accessible forms: the problem with placeholders

A great example of how good accessibility practices are often actually good usability practices for all. While the problems highlighted are most impactful on those who have challenges, I found every single alternative suggested improved usability for me as well. Author Raghavendra Peri states: According to the research conducted by Nielsen, it is not best practice to have a placeholder in the form field from a user experience perspective. This is because many users are confused by placeholders. In particular, people with cognitive disabilities tend to have issues understanding placeholder text because they think it is pre-populated text and will try to submit the form without entering their specific information. TL;DR Don’t use placeholders! But for examples of what else to do, read this article.

read more

Rachel Andrew rachelandrew.co.uk

Grid, content re-ordering and accessibility

CSS Grid is a wonderfully powerful technology, making possible incredibly complex and interesting layouts with fractions of the effort of older tools. But with great power comes great responsibility, for it is now also very easy to shoot the accessibility of your site in the foot. Author Rachel Andrew: I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess.

read more

Smashing Magazine Icon Smashing Magazine

Web accessibility in context

Fascinating read through covering historical context for accessibility and assistive technologies as well as diving into the way we do accessibility in the web today. According to author Be Birchall this article aims to shift your perspective by showing how web accessibility fits into the broader areas of technology, disability, and design. We’ll see how designing for different sets of abilities leads to insight and innovation. I’ll also shed some light on how the history of browsers and HTML is intertwined with the history of assistive technology.

read more

Brad Frost bradfrost.com

Reducing motion with the picture element

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes: This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward. What would be even cooler is if blogging and social media services did this automatically…

read more

Eric Bailey CSS-Tricks

Reader mode: the button to beat

Eric Bailey writing for CSS-Tricks: Good design isn’t about forcing someone to walk a tightrope across your carefully manicured lawn. Nor is it a puzzle box casually tossed to the user, hoping they’ll unlock it to reveal a hidden treasure. Good design is about doing the hard work to accommodate the different ways people access a solution to an identified problem. For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning? Fantastic article full of amazing resources. As web developers, we want people to experience our site the way it was intended. But that means we have to put in the work to make that experience easy, accessible, and clutter-free.

read more

Nick Salloum callmenick.com

CSS only floated labels with :placeholder-shown pseudo class

Nick Salloum: When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little. Time and time again we’ve been told that having a proper label is a better UX. The thing is, having a bunch of labels on a form can start to look congested. This solution is a great one, and saves us from having to use JavaScript.

read more

Abhishek Singh Medium

Getting Alexa to respond to sign language using your webcam and Tensorflow.js

Abhishek Singh isn’t deaf or mute, but that didn’t stop him from asking the question: If voice is the future of computing interfaces, what about those who cannot hear or speak? This thought led to a super cool project wherein a computer interprets sign language and speaks the results to a nearby Alexa device. Live demo here and code here.

read more

Firefox hacks.mozilla.org

Firefox 61 – Quantum of Solstice

The latest version of Firefox adds some powerful new features. It enables parallel CSS parsing, which combines with their existing parallel CSS style computation to make CSS in Firefox incredibly fast. In addition, this version adds a brand new Accessibility Inspector, giving developers direct access to the ‘accessibility tree’ screen-readers use to interact with a website. This is HUGE for helping developers make websites more accessible.

read more

0:00 / 0:00