Microsoft’s new inclusive design toolkit

Microsoft wants designers to see beyond physical and sensory disabilities. So they have updated their popular Inclusive Design Toolkit to include cognition – the brain. Cognition is about getting, storing and retrieving information. It’s also about focusing, learning, memorising and making decisions. So how to design for people who process thoughts in different ways?

Microsoft launched it’s first inclusive design toolkit in 2015, but it only focused on physical and sensory disabilities. The second edition takes a broader approach to address cognitive exclusion.

A black and white graphic of stick people in various states of being. Microsoft's Inclusive Design Toolkit

The new toolkit has three key principles for cognition, which can be applied in many other design contexts:

  • Understand the user’s motivation, and the goals and tasks they are trying to complete.
  • Discern the cognitive load required to reduce that mismatch.
  • Co-create the final product with a diverse community of people across the spectrum.
A man wearing a black t-shirt holds his hand to his forehead in an act of desperation.

The toolkit is not about specific industries or specific conditions. Rather it encourages designers to collaborate with users and find out first hand how they learn and think. The Inclusive Design 101 Guidebook has the basics. The Inclusive Design Cognitive Exclusion is a separate document.

The toolkit and guides are useful for anyone who wants to learn how to design inclusively – to take a universal design approach to design.

FastCompany has an article about the Inclusive Design Toolkit’s development. Christina Mallon, Microsoft’s head of inclusive design, discloses that she has ADHD. She couldn’t complete certain tasks and felt stupid. When she learned about inclusive design she realised that she was not stupid, just designed out of products. Now she just wants her job to be just a designer, not an inclusive designer. The title of the article is, Microsoft’s new Inclusive Design Toolkit is designed for the brain.

Good colour contrast for websites

How did you choose the colours for your last website update? Did you choose colours based on your brand logo and text or did you use the Web Content Accessibility Guidelines (WCAG) algorithm? But can the WCAG algorithm guarantee good legible colour contrasts for websites? Research by The University of Cambridge says it doesn’t. So they have developed an alternative algorithm for good colour contrast for websites. 

Five different coloured ovals with both black and white text for comparison. Human perception is better for good colour contrast for websites.
Examples of black and white text for comparison

Since January 2022, the Accessible Perceptual Contrast Algorithm proposes that legibility of text on websites is better with perceived difference than a mathematical contrast ratio. White text on strong coloured backgrounds are preferred over black text in almost all cases in the study. 

In the examples above, the black text passes the WCAG contrast ratio but fails the white text. The Accessible Perceptual Contrast Algorithm passes the white text and fails the black text. 

Sam Waller explains this more fully in his article, Does the contrast ratio actually predict the legibility of website text? 

As a result of this work, an early working draft of WCAG 3 proposes using the new method for calculating contrast. 

This is important information for choosing brand logos and text so it isn’t just something web designers should know. Many website designs are guided by brand colours so choose carefully. This information is also important for product labelling especially for online shopping. 

 

Do web accessibility overlays work?

Accessibility Overlays - What are they & why are they so bad? - YouTube
First screen of the YouTube video

This site has a web accessibility overlay or add-in widget. It’s the circle icon next to our logo on the website. If you click on it, it has a dropdown accessibility toolbar. That’s because the platform, WordPress, isn’t inherently accessible. So like the tacked on ramp to a building, it is an afterthought. But really, it advertises that the website platform isn’t really accessible and there are good reasons why. 

Website add-ons for accessibility go back to the 1990s with products like Browsealoud and Readspeaker. They added text to speech capabilities on the website. More products arrived in the market with similar aims. To the layperson these features seem beneficial, but their practical value is overstated. That’s because the people who need these features will already have the software on their devices to access the web and other software. The Overlay Fact Sheet by Karl Groves explains more: 

Overlay Fact Sheet logo - black background and an orange circule.
From the overlay fact sheet

“It is a mistake to believe that the features provided by the overlay widget will be of much use by end users because if those features were necessary to use the website, they’d be needed for all websites that the user interacts with. Instead, the widget is —at best—redundant functionality with what the user already has.”

Do overlays meet compliance?

While an overlay might improve compliance in some respects, full compliance cannot be achieved using this method. That’s because the products are unable to “repair” all possible issues. In some cases, the overlay can conflict with the users software and cause problems. And ironically, some overlays are inaccessible. So that means it’s back to the programmer and designer to get it right. 

The video below gives examples of overlays and graphically shows how they don’t work. You only need to look at the first three minutes to get the idea. 

We all have a responsibility to make our digital information accessible. Beware any web developer who says they’ve solved the accessibility problem with an overlay or widget. Indeed, you are showing your inaccessibility by having an “accessibility” overlay and icon on your site. 

Web designers might think the international web standards are sufficient. But they are not – just like the standards for access and mobility in the public domain are not enough. 

By the way, CUDA uses the WordPress platform’s free version and continues to do so because we do not receive financial support for the website and want to keep it open access. As with everything universal design – it is a work in progress. “Do the best you can with what you have at the time and strive to improve next time.” 

 

Inclusive online conference planning

Graphic showing a laptop computer screen with coloured squares each with a face of a person. Inclusive online conference planning.Virtual and hybrid conferences have become more popular since the advent of the recent pandemic. But are they accessible and inclusive? A paper from Canada addresses the issues of inclusive online conferences. Using the recent Parks Accessibility Conference as a case study, the authors describe their experiences. As a Canadian event, they also had to consider two languages in their planning. 

Some people with disability or impairment find online events less stressful than attending in person. They can avoid travel stresses and the regular access barriers. Others who find crowds and noise difficult, tuning in from home is a more comfortable. Consequently, conference planners need to take care to plan for easy access and inclusion.

And it should be for every conference, not just conferences with a disability component.  However, this is a good place to begin and to learn from first hand experiences. The Parks Accessibility Conference is one such example.

Key strategies

The authors provide a list of their key strategies: 

    • Make visual elements accessible to attendees with vision impairment
    • Make audio elements accessible to attendees who are Deaf or hard of hearing
    • Avoid overstimulation for individual who are neurodiverse or with a cognitive condition
    • Create ways to incorporate multi-sensory experiences remotely
    • Finding the right virtual conference platform.

The planners worked with presenters to help format and organise their presentations and materials. They hosted a pre-conference session with attendees to explain how to use the various features of the online platform so they knew what to expect. 

The paper reads like a story, explaining every step along the way so that others might learn from their experience. There are eight recommendations for future conferences based on what they learned. Top of the list is to include people with disability from the beginning.

The title of the paper is, Virtual Accessible Bilingual Conference Planning: The Parks Accessibility Conference.

From the Abstract

The objective of this paper is to share how our team planned and delivered a virtual conference that was fully bilingual and accessible to individuals with disabilities.

We incorporated closed captions, sign language interpretation, language interpretation (audio), regularly scheduled breaks, and a multi-sensory experience.

We describe our approaches to planning the conference, such as including individuals with disabilities in decision-making, selecting virtual conference platforms, captioners, and interpreters, and how we incorporated a multi-sensory experience.

The paper also summarizes feedback we received from our attendees using a post-conference evaluation survey and our team’s reflections on positive aspects of the conference and opportunities for improvement. We conclude by providing a set of practical recommendations that we feel may be helpful to others planning virtual accessible bilingual conferences in the future.

People with complex communication needs

A hand holds a globe with several communication icons on it. It's against a sky blue background. See a separate paper, Supporting Communication Accessibility and Inclusion in Online Meetings for Persons with Complex Communication Access Needs. This is a Masters thesis on running online sessions for people with complex communication needs. 

From the abstract

This community-based, participatory research study explores how online sessions can be designed to support complex communication access needs. The use of a community-led co-design approach resulted in a deeper understanding of the individual communication accessibility requirements, barriers, and lived experiences of persons who use AAC, within the online meeting context.

Participants (‘co-designers’) designed and took part in collaborative design sessions aimed at developing ideas for supporting communication access and inclusion throughout the process of meeting online. Through cross-community collaboration, we co-designed an open-source communication access toolkit for online meetings.

The toolkit includes accessibility guidelines with a protocol for holding accessible and inclusive online sessions; suggested accessibility features and plugins for meeting platforms; and a template for a collaborative participant notebook.

The design outcomes provide guidance to the general population on how we might ensure that online meetings of all forms are inclusive and accessible for diverse and complex communicators, as we all have a right to communicate with dignity in ways where we understand and are understood.

Making questionnaires more readable

A young woman sits at a desk with her laptop open. She has her face covered by her hands and is indicating distress. Time to make questionnaires more readable.One area of inclusion and accessibility that often gets forgotten is readability of forms and questionnaires. Academics and marketing professionals regularly use surveys to get information from specific groups of people. Within those groups will be people with varying levels of capability in terms of being able to decipher what’s on the screen or form. And it isn’t all about literacy and reading ability. It’s about the different ways people see and interpret the information. Here are some good tips for making questionnaires more readable from Alex Haagaard in Medium

Likert Scales

Likert scales aren’t great for screen readers because they often interpret them as tables. But much depends on the design of the survey platform. Even if they are screen-readable, Likert scales can be difficult for people who are neurodiverse. People who are autistic or dyslexic struggle with visual tracking across and between rows. This creates the need to exert more brain power to focus on getting the corresponding check box. 

Instead of using a Likert scale, use a series multiple choice questions to capture the same information. Creating page breaks to separate distinct sections of the questionnaire also helps with readability for everyone.

Balancing access conflicts

A hand holding a pen poised on a questionnaire form ready to check a box on the form. There is lots of lines of text and check boxes. As is often the case, making something more accessible for one group can create problems for another. So it’s important to identify these early and eliminate or mitigate the barriers. 

One solution is to provide optional comment boxes where the participant can choose whether to reply in their own words. People who want to quickly complete the questionnaire can skip this.  

Haagaard takes things a step further with a suggestion to provide detailed explanations about terms and concepts at the beginning of each section. However, this is tiresome for screen readers and others might find this overwhelming. Participants can be asked at the beginning of the survey if they would like the key information repeated for each section. Those who say no can have the concise experience.

In summary, Haagaard acknowledges that it is unrealistic to assume that anything can be fully accessible to everyone. That means that there will still be occasions where an alternative means of participating is required. This might be an interview or an email. 

The title of the article is Making Your Surveys More Readable. This is the third in a series on cognitively accessible survey design. 

Accessible places with Google Maps

Google Maps has two new features to help us find our way and what we are looking for. Live View uses the camera in your phone to give street view directions, and the “Accessible Places” feature marks entrances with wheelchair access.

Accessible Places feature

Google Maps has expanded its “Accessible Places” feature that shows when a place is wheelchair accessible and/or stair-free. It will be interesting to see if this will encourage more places to make their businesses accessible. As we know, when it’s good for a wheelchair, it’s good for prams, bikes and trolleys.

The feature was originally launched in 2020, but it was limited to just Australia, Japan, the U.K., and the U.S. Now, the feature is available worldwide on Android and iOS.

Google Maps pin icon against a background of different coloured dots.

To use this feature, turn on the “Accessible Places” setting in the Google Maps app. You will see a wheelchair icon on the business profile if it has a wheelchair accessible entrance. You will see the same icon with a strikethrough if the location is not accessible. The feature can also check to see if the location offers accessible parking, facilities, and seating.

Steepness of slopes doesn’t appear to be covered, and Google doesn’t say if their access maps are accessible.

It’s up to business owners to update their business profile to reflect whether their business is accessible. It’s unlikely Google will check whether this is true, but user feedback should keep businesses on their toes.

Live View feature

When walking around in new surroundings, Live View helps you keep your bearings. Using the phone camera, the flat map view is transformed into the street view with arrows so you know which way to head. A great plus for tourists and visitors.

When walking around in new surroundings, Live View helps you keep your bearings. Using the phone camera, the flat map view is transformed into the street view with arrows so you know which way to head. A great plus for tourists and visitors.

With Live View, users can walk the streets using the camera on their phone and get directions on the screen. The updated version has more information such as cafes, ATMs and transit stations.

A Gif of Live View in action showing a street view on Google Maps.

Different app developers have tried their hand at creating access maps, but Google brings many features together on the one screen. However, access for wheelchair users does not guarantee access for everyone, and it doesn’t cover all disabilities. It also doesn’t say how welcome people with disability will feel. Nevertheless, it is a good start and Google will continue to improve. The next thing is finding places where you can hear each other talk.

The Google blog page has more up to date information.

Universal design and perfection

A universal design approach to a project often means doing the best you can with the knowledge, skills and resources to hand. Each time you have a design project, make it more accessible and inclusive than the last. Universal design is not about perfection, or perfection for absolutely everyone. It is an ongoing iterative process.

A drawing of a man with curly black hair with his head in his hands in front of a laptop. He looks unhappy. Universal design and perfection.

The notion of perfection reinforces the perspective that accessibility is hard.

A blog post from CanAxess discusses the issue of perfection in digital and web design. Using the example of two people, a celebrity chef, and a special forces soldier, the article discusses “the perfection millstone around the neck”.

If digital designers have a mindset of expecting absolute perfection they will reinforce the idea that accessibility is hard. For example, headings might be incorrectly rendered on a page. For designers this is unforgivable and a “slight on those users who need that support the most”. The risk is that designers will give up and stop trying to improve digital accessibility. And then there is the anxiety, procrastination and fear of falling short.

Having high standards is a good thing, but it needs to be balanced otherwise it makes it hard to get started on a project. So, at these times, “good enough is good enough”. The advice from the blog post is to do better than yesterday and do it well.

The CanAxess website has other resources of interest:

Make video accessible

Make forms accessible

How to make chatbots accessible

Google spells out accessible, inclusive, usable

A woman stands on a stage with a woman sitting behind her. She is making a presentation to an audience. Google spells out accessible, inclusive and usable.It would be good if all designers took their lead from the likes of Apple and Google: inclusion, accessibility and usability are about the design process. Apart from clearly explaining how these terms are linked and can be used together, Google spells out accessible, inclusive and usable in a half hour video 

Infographic showing three groups of disability: permanent, temporary and situational. From Microsoft.
Microsoft infographic: Permanent, temporary, situational disability

The video also has some tips and tools for designers and shows how three different users have the same need: a man with a mobility disability (permanent), a boy with a broken arm (temporary) and a woman with an armful of shopping (situational). Microsoft designed an infographic to illustrate the point. 

Individual situations might be different but they all have the same need for accessibility. And people have the same goals they want to achieve regardless of their situation.

This instructional presentation is aimed at an audience interested in designing apps, particularly the second half of the video. However, the messages in the first half can be applied to other design disciplines. 

Website cookie banners: barriers to access?

Some people think that people who are blind can’t use websites or smartphones because they can’t see the screen. This is not true of course because they use screen reader software to read out the content of the webpage. However, even on a reasonably accessible website, cookie banners are barriers to access to the very first page.

Many websites have accessible features, but they are not necessarily linked up. The popup cookie banner can prevent some users from accessing the website entirely.

A black computer background with a red circle around the red words Access Denied! Cookie banners, barriers to access.

Clive Loseby’s Tedx talk explains that despite legislation for online accessibility, very few websites meet basic access standards. You can check your easily by doing what people with low vision and people with screen readers do. They use the keyboard and not the mouse. Go to your home page and use the Tab key. Does it progress through the menu or navigation tabs?

It is a legal requirement in most countries to have accessible websites – the guidelines and standards have been around for more than 20 years. What is taking so long? Clive Loseby explains basics and how every organisation or business is missing out on customers.

Some websites use popup banners to advertise something and others use scrolling images as well. These have a similar effect to the cookie banners.

A reminder about attitude

Some of the responses to the talk in the comments section are not positive and in some cases almost abusive. While all YouTube videos get their share of negatives, it is still a reminder that ableism is alive and well.

Inclusive imagery and icons

We are seeing more people with disability in films, tv and stories. Both the presence of people with disability and images depicting disability are being integrated into computing. But are the processes for developing inclusive imagery also inclusive?

If the only images available to illustrate accessibility are pictures of wheelchair users, then it becomes difficult to get people to understand and acknowledge the huge range of unique user needs.

Circular graphic showing many different icons related to disability.

A short article by Emory James Edwards addresses some of the issues related to diversity and inclusion in computing. Designers regularly use personas to help them communicate with developers. They each know what the other is talking about. But these ‘design assets’ as they are called, have not included images of people with disability, non-western users, or older adults.

Although people with disability are getting more recognition, the images are still prone to stereotypes. With luck, as we see more images of people with disability we could see increased understanding of the need for accessible technology.

If people who are blind are only depicted as wearing sunglasses or using a guide dog, but never depicted as using a white cane or walking with a sighted guide, it makes invisible the variety of skills and preferences of people who are blind or have low vision

A blind man and his guide dog walk through a shopping mall. Inclusive imagery.

More images of disability is not enough – they could even reinforce stereotypes. It gives people the illusion of knowing what life is like with a disability.

Tips for inclusive image generation

Edwards explains six key points:

  1. Do not reinforce isolated, sad or pitiable stereotypes.
  2. Avoid being overly “sweet” or creating “inspiration porn”.
  3. Show the diversity of the the disability community. That includes gender and nationality.
  4. Consult with people with specific identities.
  5. Make a commitment to long-term engagement with people.
  6. Make inclusion the default position without resorting to tokenism.

The title of the article is, Putting the Disability in DEI Through Inclusive Imagery. Diversity, Equity and Inclusion is about changing the paradigm in computing and other fields. Technology is an essential part of modern life. The reference list at the end is also useful.

A picture can paint the wrong words

For those who understand the issues with the picture shown, there is no need to explain. But there are others who see two good looking young people, one in a wheelchair being pushed by the other. They are wearing bright colours and looking happy as they make their way through an empty shopping mall. For the uninitiated there are three key issues with these companion pictures.

Shutterstock image of a young person being pushed in a hospital wheelchair. The occupant is obviously a model that doesn't look like they have a disability.
  • First, perpetuates the stereotype that wheelchair users must be helped by being pushed rather than mobilising independently. A person walking alongside would be better. 
  • Second, it is clear that both of them can walk as they change places with each other to be pushed in the chair.
  • Third, the type of wheelchair is usually found in a hospital setting. It is not one that a person would normally own let alone use it to go shopping. Wheelchair-user models would come with their own wheelchair.

Wheelchair users are not the only way to convey diversity or disability. The majority of disabilities are invisible, e.g. low vision, hearing loss, heart disease. So pictures of groups of people from all walks of life are much better. Too many of these pictures show a lone wheelchair user in places devoid of other humans. This is not real life.

Let’s make sure images convey the right messages.