good-design-was-always-accessible

Sharlene King

When I was a freshman in college, we were all plagued with an affinity for tiny-type. Text set at 8pt and even 4pt because we thought it looked better. Lost amongst our pet projects of lofty, elegant stationery design intended to illustrate the superiority of our personal tastes, the function was secondary. We learned quickly that we fell in love with tiny-type because when text isn’t readable, it’s another abstract visual object in the composition — no different from a solid black rectangle.

Fast forward to today, with a month left in the 2010s, we find UX design to be a more significant subset of design. What we know as the internet has been alive for over 20 years, our phones are powerful computers in our pockets, and there are plenty of people who recognize the floppy disk only as a save icon.

As designers, we should embrace constraints and requirements. It’s strange that designers view the WCAG’s AA guidelines as an obstacle. Some designers ask if accessible design is necessary as if their work exists in a vacuum. You’re unhireable if your work is meant for an audience that never grows. Businesses want to grow.

Design depends largely on constraints. There are always design constraints, and these often imply an ethic.

– Charles and Ray Eames, Design Q&A. 1972

The most celebrated of our technology were praised for their intuitive and accessible designs. We loved videos of babies using iOS devices without any instructions. We bashed Microsoft products for their complexity. We looked to Apple’s HCI guidance as industry standards for their humane models. Whatever academic disagreements we have about design and its meaning, we tend to agree that design has to be used or it’s just decoration. There isn’t any nobility in design people can’t use.

When new technology loses its shine, we tend to take it for granted. We’re always forgetting that technology is about assisting us and reducing work. How often have you ridden an elevator and judged someone for using it to travel a single floor? In my office, I know at least 5 people under 50 with sciatica. There are so many chronic illnesses and disabilities that aren’t visible, and we all benefit from elevators, so why begrudge anyone a few seconds?

It wouldn’t surprise me if someone begrudged accessibility guidelines and blamed them for their own lousy work. It does absolutely shock me that a UX designer with the reach and audience of the UX Movement would bash accessible design as inherently ugly.

This article by Anthony Tseng is chock full of unresearched presumptions. Lazy at best, it is precisely the problem with designers today who are more obsessed with winning approval on Dribbble than function. It seems like a college freshman move — complete ignorance of design history and low standards for a designer’s creativity.

Tseng talks about how accessible design sacrifices aesthetic for people with “normal vision” when impacted vision is more common. In spite of medical advances, the deterioration of our vision is a global epidemic. It’s believed that by 2050, the number of blind people in the world will triple. In the US, only 35% of adults have perfect vision.

This doesn’t begin to account for temporary disabilities like sunlight, mobility like riding a bus or train, or physical distance like a laptop in bed instead of a desk.

Most temporary disabilities are created by inept designers like Tseng. We’ve all been there: you’re in a restaurant, cafe, or bar and you want to order something. You can’t read the menu. It’s above the counter, dimly lit, tiny text, and probably in some terrible cursive. It looks great, but you can’t use it because it wasn’t designed for its use-case. Any schmuck can put a handful of words together in a way that looks good, but it takes a seasoned designer to understand how to set the type for its intended use and make it beautiful.

Any UX designer or service designer worth their salt has some understanding of temporary disability. The constraints of different use-cases are what challenge us to be better than someone who only has good taste. We’re industrious and ingenious people looking to solve problems instead of merely painting steaming piles of poop in gold.

Looking at design history, we can see this philosophy imbued in the most revered work. The Eames lounger or the tubular steel chairs of Bauhaus are exemplary designs that were initially created for the disabled.

In 1942, war plagued the world, and we saw massive casualties. During this time, splints for injuries were cumbersome aluminum monstrosities. Wearing them and being transported was hell for the injured.

The Eames invented a brace of molded plywood. It was stackable, comfortable, and easy enough for anyone to use or secure an injured person.

Thankfully, for countless soldiers, they didn’t have to rely on the limited imagination and empathy of a designer like Tseng.

Gratefully, we can all enjoy the beautiful and timeless designs such as the Eames lounger that borrowed from its parent design of a little splint.

If you want a career where constraints aren’t part of the challenge, get out of design. If you wish to do timeless work that impacts society, embrace design constraints, and challenge yourself to do better by every user.

In a story twist, I do agree with him that we depend too much on WCAG. If you ran the websites of the current 2020 presidential candidates thought an accessibility check, only Donald Trump came out to pass the AA rating. Ope. According to Miami’s chapter of Lighthouse, a fantastic org advocating for the visually impaired, not one of the 2020 candidates was usable as of June 2019. Consider the ramifications of that as we criticize older people for following conservative politicians and news. Know that 1 out of 3 people who are 65 years old or older have degenerative eye disease.

We can debate the value of aesthetics and function until we’re blue in the face, but the reality is that excluding any user group has lasting and broad cultural impacts — none of them good.

There are endless examples of timeless and accessible design, but I’m scratching my head over recalling any inaccessible design that is worth remembering.

microsoft-went-all-in-on-accessible-design.-this-is-what-happened

The Xbox Adaptive Controller is one of the most telling products in how design as we know it is changing. It’s a boxy controller with two giant buttons and over a dozen ports for external peripherals, to allow people with disabilities the option to play Xbox in any manner they can.

If the 2000s and 2010s were about bringing good design to everyone, the 2020s are shaping up to be about bringing good design for everyone else—the so-called fringe cases embraced in inclusive design who have been overlooked by a world that champions averages and other one-size-fits-all solutions.

[Photo: Logitech]

But the Xbox Adaptive Controller was just the first step into more inclusive video games and voting machines. And we’re seeing that proven in a new, companion product developed by the mouse and keyboard giant Logitech. Called the Adaptive Gaming Kit, it’s a collection of mix-and-matchable buttons that plug into the Xbox Adaptive Controller for additional customization.

Priced at just $99, it includes three big buttons that can be stepped on or hit with a head or an elbow, three smaller buttons for similar use cases, four microswitches that need nothing more than a finger tap to activate, and two pressure-sensitive triggers that can work as gas pedals, allowing variable, pressure-based input. These buttons stick firmly onto two pads with Velcro. Those pads can be placed on a table, tilted like a laptop stand, or wrapped around an arm or wheelchair. The idea is that the player can set up the controls however they want.

[Photo: Logitech]

“It’s not one product that will solve everything,” says Ujesh Desai, VP and general manager of Logitech. “If every user’s needs are unique, [we had to build] a kit with every button and switch they could need.”

The Adaptive Gaming Kit was a project that started long before Desai even realized the road his company was on. More than two years ago, Microsoft reached out to Logitech, requesting some joysticks to test a secretive, unannounced product. Microsoft and Logitech are frequent partners; Logitech sells all sorts of headsets and other components that plug into Xbox peripherals already. So Desai gave his consent for Curtis Brown, Logitech’s strategic partnership manager, to send whatever Microsoft wanted. Then he pretty much forgot about it.

After about a year, Microsoft invited Desai, Brown, and the team out to see the mystery product. Inside Microsoft’s accessibility lab, Desai was blown away by the inclusive vision of the Xbox Adaptive Controller. He also realized just how much free product Logitech had been sharing with Microsoft when he learned more about the project and saw it strewn around the lab.

“Unbeknownst to me, he must have given them hundreds of our joysticks . . . it was a lot,” Desai laughs. “That’s when it came out how much gear Curtis had given them. He looked at me sheepishly, and I gave him a big hug. . . . I said, ‘This is really important to Logitech—we need to learn more about this space.’”

That’s when Logitech created a dedicated team focused on building something to plug into the adaptive controller. Microsoft was generous in sharing what it had learned, and Logitech began collaborating with groups such as Special Effect, the gaming-with-disabilities charity in the U.K.

“We spent a week there with their occupational therapists. They showed us all the equipment and different buttons they use,” says Desai. “And they showed us no patient was the same. We got to meet a number of the people they work with, and hear from them about some of the pain points they had.”

[Photo: Logitech]

Logitech, which knows as much about controller ergonomics as any company on the planet, absorbed a lot of new information about designing around disabilities. That’s when they began to piece together this multipronged, customizable approach.

Desai’s team also recognized some clearer shortcomings with specialty buttons and switches on the market: They just weren’t built all that well. These components would often break in a few months, yet sometimes they cost over $100 for a single switch (and someone might need many switches). That meant an Xbox, the Adaptive Controller, and some extra buttons could top out over $1,000. Who can afford that?

“I arbitrarily picked a price point. I told the team, I want the whole thing for only $99,” says Desai. “They looked at me like, ‘OK . . .’ [But] having a clear goal, saying no, it’s not going to be more than $99, we challenge our team to do something that was high-quality design but still reach a [lot of people].”

Through the process, Logitech worked with gamers to figure out how these buttons should be Velcroed. They also learned that often, it wasn’t a gamer but a caretaker who would be setting up these controllers. That meant the controllers needed clear label systems that would allow a Luddite to piece together a very specific setup, take it down, and put it back together again. And of course, the product packaging itself needed to be accessible too—so Logitech followed all of the best practices learned by Microsoft, which had already spent a year developing an easy-open box for the Adaptive Controller.

For now, it appears that Logitech succeeded at all its tasks and then some. Note how colorful, and downright playful, the buttons look. I want to play with these myself! “The biggest thing we learned—a number of people with accessibility needs use this term a lot. They don’t want to feel othered. They understand they might need gaming gear different than someone else, but they don’t want to feel othered,” says Desai. So Logitech pulled colors and other symbology on the controllers right from the Xbox itself. “That’s why designing the buttons and switches, we wanted to make them feel like gaming equipment. That’s why the labels match the Xbox, because it’s a gaming product.”

[Photo: Logitech]

Desai admits that the $99 retail price for a collection of 12 buttons, while doable, means that Logitech’s margins on the Adaptive Gaming Kit are lower than most of its products. “But all the way from me to Bracken [Darrell], our CEO, we said, ‘This doesn’t matter, this is an area you need to do the right thing.’”

And in the few hours since Logitech launched the kit, Desai had already heard from gamers who actually imagine that the kit might help in all sorts of other parts of their lives. That response certainly makes sense: High-quality, cheap, customizable buttons could be beneficial to someone in a wheelchair during all sorts of times when they aren’t gaming, from turning on the lights to opening a door.

So what does this all mean for Logitech? Could the PC and gaming peripheral company become something more, something that might help with someone’s mobility or healthcare needs, too? “That’s something we’re going to have to think through,” says Desai. But he means it. Now that it’s started down the road of inclusive design, Logitech is earnestly trying to figure out what comes next.

how-to-build-accessible-products-at-a-startup

Sneha Dasgupta

Cover photo with types of web accessibility

Cover photo with types of web accessibility

At a startup, accessibility can feel daunting because resources are limited, but new technology and smaller scope can be a unique benefit. Making the investment earlier on will save a lot of time and money in the long run.

Although this article is based on my experience as the only UX person working on an earlier stage product with a small team, many of the steps and resources can be used by larger organizations with more mature products.


Accessibility is the practice of making your websites usable by as many people as possible.

Why does accessibility matter?

  1. It’s good for business. The more users that can use the software, the bigger the market. Additionally, if your company is going after any government contracts or putting a consumer facing app into an app store, accessibility will likely be a requirement.
  2. It’s good for users. Globally, 2.2 billion people are blind, have low vision, or colorblindness, and 466 million people are deaf or have hearing loss. 40% of websites are completely inaccessible to users who are blind. Accessible products avoid alienating these groups and provide a better user experience for everyone.

Stakeholders will probably ask why it’s important to make the investment. Making the case for accessibility to get team buy-in is critical to success.


Design with accessibility in mind

Starting with accessible designs sets the tone for the rest of the product.

  • Pick colors with high contrast ratios. For users with low vision and colorblindness, high color contrast ratios can make content clearer. Read more about color contrast accessibility.
  • Use readable, scalable fonts. Users should be able to increase the font size by zooming in and out to more easily read the text. Generally, the body text should be at least 16px.
  • Don’t depend on visuals or audio alone to convey a message. Provide alternate messaging for blind, low vision, deaf, or hard of hearing users. For example, if a design uses color coding to categorize, consider pairing it with text, a pattern, an icon, etc.

A view of categorization without colorblindness, protanopia, deuteranopia, and tritanopia.

A view of categorization without colorblindness, protanopia, deuteranopia, and tritanopia.

Different types of colorblindness impact the way users see content. Pairing color with a secondary identifier can help users understand the message. Using text also allows a screenreader to pick up the information.

Check your work with tools like Stark

Designers aren’t required to know if a font color has a high enough contrast ratio. Plugins like Stark can be used while designing to check contrast ratio and font size, as well as simulate colorblindness.

Stark’s contrast checker gives a level of compliance for contrast ratios at different font sizes.

Stark’s contrast checker gives a level of compliance for contrast ratios at different font sizes.

Pick two colors to see if the contrast ratio is high enough for low vision users.

Use an existing design system

If you’re at a startup, it’s unlikely you’ll have the resources to build your own design system, let alone one that’s accessible. Leveraging an established design system, like Angular Material or React, helps ensure that every time a component is used, it passes accessibility compliance.

Auditing can be so overwhelming that there are companies that audit products for companies. At a startup, that luxury is unlikely, but luckily there are resources to streamline the process.

Start with an understandable checklist

Web Content Accessibility Guidelines (WCAG), created by World Wide Web Consortium (W3C), is a global standard for web accessibility.

“Web Content Accessibility Guidelines 2.0 explain how to make web content accessible to people with disabilities. Conformance to these guidelines will help make the Web more accessible to users with disabilities and will benefit all users.”

Reading through the WCAG requirements can be tedious. WebAIM, an accessibility non-profit, put together a checklist with recommendations on how to adhere to each guideline.

Use the WebAIM Checklist.

Go page by page with the WAVE Evaluation Tool

WebAIM also created a chrome extension that can be turned on for any page. It lists potential accessibility issues and gives suggestions on how to fix them.

The WAVE Evaluation Tool can be used on any page.

Install the WAVE Evaluation Tool Chrome extension.

Fill out an audit

Use the WebAIM checklist and WAVE Evaluation tool to fill out an audit. The Voluntary Product Accessibility Template (VPAT) is the most common audit form in the US. The audit provides the status of compliance for the product and helps the team understand how much work is needed.

Here’s a blank VPAT template I started with.

The final step is the most collaborative. It requires clear communication to make sure everyone’s on the same page.

Review the audit with the team to size the work

Discuss the findings to begin sizing how much work will be necessary. Use the checklist’s recommendations to meet unmet guidelines. This will help the team agree on how and when the work should be done.

Write requirements to chip away at remaining work

Make an epic to “Create an accessible product” to have a bucket for all accessibility work. Take the page-by-page audit and write requirements for each issue. When the work is defined, the goal looks a lot more achievable.

Screenshot of JIRA with an accessiblity epic.

Screenshot of JIRA with an accessiblity epic.

Code with accessibility in mind

Make a plan to maintain an accessible product. Developers need to code with accessibility in mind, just like designers design with accessibility in mind. Use a checklist, just like any other QA checklist, to assure each new feature passes accessibility standards.

Here’s the developer accessibility checklist I put together for my team.

Finally, don’t be afraid to re-open stories

Like any other functional requirement, accessibility should be treated as an expectation for each new feature. Enforce that expectation.

Screenshot of JIRA changing a story status to Reopen Issue

Screenshot of JIRA changing a story status to Reopen Issue


Although accessibility is a subsection of inclusive design, I find it’s a great place to start a larger discussion. The standardization and examples around accessibility help teams understand why inclusive design matters.

Priorities change and accessibility is often pushed to the end of the backlog, but tirelessly advocating for accessibility and inclusive design creates the best user experiences for all users.

Don’t let the way your product is built be the reason someone isn’t using it.

Resource list

android-gets-new-accessible-logo-design

New Android logo

(Image credit: Android)

Google’s mobile operating system, Android, has been given a minty fresh logo redesign and a new naming system with the launch of Android 10. Leading the redesign are new colours for the Android robot and brand name (above), which sees Google doing away with the sweet-based system. 

The new-look Android bot that will now be gracing the best Android tablets and your favourite Android apps  is now a minty green colour. Google says the shade is more modern and – crucially – more accessible than the previous lime colour. 

“It’s a small change, but we found the green was hard to read, especially for people with visual impairments,” said Android’s VP of product management, Sameer Samat.

“The logo is often paired with colours that can make it hard to see – so we came up with a new set of colour combinations that improve contrast.” As well as changing colour, the body of the Android has been removed from the logo. Watch how the brand has developed below.

Up until now, Android releases have been named after sweet treats in alphabetical order, including Android KitKat and Android Oreo. Although these names were appetising, they caused confusion with the public as some people didn’t know which version was the most recent. A straightforward number system has been introduced to make things much clearer.

A rebrand that looks good and works better than before is a winning combination, so hats off to Google for giving Android a stylish and practical redesign that will benefit its users.

The updated logo will start rolling out in the coming weeks with the final release of Android 10. Find out more about the new logo in this blog post from Google.

Related articles: