Inclusive Design: A Microsoft Perspective

A black and white graphic of stick people in various states of being.Microsoft has updated their Inclusive Design Toolkit. It’s a comprehensive guide that focuses on design principles that can be applied in any design situation. Their key advice is to recognise exclusion, solve for one and extend to many, and learn from diversity.

You can download the toolkit in sections. It also includes several case studies in the form of video clips. These are not all about websites or phone apps either. They have been chosen to help inspire all kinds of designers to think about diversity. I liked the one about Antoine, the dancer. 

Microsoft’s definition of inclusive design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.

Microsoft’s design principles: Exclusion happens when we solve problems using our own biases. As Microsoft designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs.  

A very useful design guide for students and practitioners alike.

Colour Kindness

A group of people standing holding a pink banner with the words You are Not Alone, but you can't see the word NOT because it is in pale red and blends into the background colourIt’s one thing to talk about colour blindness, but it is quite another to see what it looks like to the 6-10 percent of the population that have colour vision deficiency. Axess Lab has produced an excellent set of successes and failures using real life examples of colours used by web designers. These examples provide really good guidance for anyone involved in web content and design, as well as printed material. The blog page has links to more information. There is a nice pic of what a football field looks like to someone who can’t see red and green – so it’s not all about the web – it’s all around us as the picture shows. If you want to see more on this topic see ColourBlindAwareness Twitter feed. 

The banner in the picture shown should read You Are Not Alone, instead it looks like, You Are Alone.

DIY – IT Accessibility

Part of the handout with the six steps.University of Maryland has a neat one page with the six essential steps for accessible online content. None of it is rocket science or geeky. This ready reference just has reminders to be a bit more thoughtful about how you go about it. The aim of the six steps is to give everyone equal access to information and services. It’s simple things such as colour contrast, alt-text for pictures, and appropriately placed links to other pages – not “click here”, for example. It’s a handy reference to print out and pin up at your desk. Good for designing online-learning and adding content to an organisation’s website.

There is more on the University IT Division website. https://itaccessibility.umd.edu/

I haven’t been asked that before

part of a computer screen with black background and some words indicating coding.The answer to “Is your site accessible?” is sometimes, “I haven’t been asked that before” or “I’m not sure I understand what you  mean”. Some website managers will quote that they are WCAG2 compliant, but that doesn’t mean they know what it’s about. Some parts of the website design might be compliant, but some of the content might not be. So things like e-books, e-learning or customised apps could pose problems when it comes to accessibility for all. An article by Andreea Demirgian takes a look at these issues and more by using real examples of online chat conversations with web operators. 

A related article, Do you see what I see… Accessibility challenge – CSS! gives instructions on how to find out if the CSS of the website is a barrier to accessibilty. A bit technical but gives insights into what web design should consider. The article is by Herin Hentry of the Reserve Bank of Australia.  

Getting subtitling right

A brightly coloured film strip with the word Video on it.The European Union funded a project to find out more about subtitling and how best to do it for immersive media. Media accessibility usually focuses on users with disability, but this group chose not to go that route. Instead they took a broader section of participants. One of their conclusions fits with other findings on universal design – make it part of the design from the beginning. The findings from this research have recommendations that are good for everyone. One key point is that creation and production processes should have testing that includes users with diverse capabilities. The title of the article is From disabilities to capabilities: testing subtitles in immersive environments with end users“.  With more content being delivered online and the rise of virtual reality and other types of media, this is an important contribution to understanding how best to present current media, as well as media that will be developed in the future. 

From the Abstract:  To illustrate this point and propose a new approach to user testing in Media Accessibility in which we would move from a disability to a capability model. Testing only with people with disability brings poorer results than testing with a broader range of people. This is because subtitles (closed captions) are not just for people are deaf or hard of hearing, but for everyone. This means they should be considered a mainstream feature of video and film production, not an add on feature. The study addresses issues with vision, colour, and being able to navigate digital services to find and use the subtitles. 

Screen magnifiers: Just a bit at a time

The Google trade mark name has a magnifying glass held over it.Screen magnifiers are used by people who have low vision. It enlarges the text and images to a size where only part of the page or picture is visible at any one time. It is not the same as using the zoom function in the browser where the layout is changed to match the width of the screen. This means users have to scroll sideways to get the content of the page.

Because only a portion of the screen is displayed, the reader could miss instructions or drop down menus. How to Make Your Website Accessible to People Who Use a Screen Magnifier, has some good tips and a short video that shows what a screen magnifier does. The tips in the article are aimed at people in charge of websites. However, it is useful to see how it works and what happens when a site design doesn’t account for screen readers. It could help us think about the way we format documents and other information for websites.

It’s worth noting that there are around ten times as many people who use magnifiers and not screen readers, but accessibility guidelines seem to focus on readers. There is more on this topic from Axess Lab.

Do your pictures tell a story?

A screenshot of the Vision Australia screen and logo.Making images and graphs accessible is something we can all do. Once you get into the habit it’s simple. The process is called “Alt -text” or alternative text. It provides a text alternative to documents, slide shows and web pages. The WebAIM blog site gives more detail about applying text to images. In short, it does three key things:

  • It is read by screen readers so it’s accessible to people who are blind or have certain cognitive disabilities.
  • On websites it is displayed in place of the image if the image file is not loaded or when the user has chosen not to view images.
  • The text description can be read by search engines.

Even if you are not in charge of your organisation’s website, any pictures you provide for web content should have your description and not be left to someone else to interpret. They might get the picture out of context. The article explains more about context. 

For specific information on Word and PowerPoint images, the University of Minnisota has some instructions. Twitter also has instructions on picture descriptions for tweets. Media Access Australia has information on this topic, as well as Captcha options.

From the Editor: I describe all pictures and images on this website. This is not the same as having a caption. Two tips: No need to start the description with “A picture of…” because the screen reader knows it is a picture or graphic and announces it. End the description with a full stop. It makes the screen reader use a tone that ends the sentence rather than sounding as if it is cut off in the middle. Also, avoid “download here” or “click here” and put the link in the actual text so the screen reader and user knows what it is referring to. 

Inclusive designing includes technology

A young woman sits at a desk with her laptop open. She has her face covered by her hands and is indicating distressDesigners rarely design to exclude, but sometimes it just happens. Creating digital materials that are usable and accessible means many more people have access. Here is a book chapter that introduces readers to the ways people with disability use technology. It includes specific steps you can take and highlights the benefits of accessible design. Testing by people with disability is informative and should be included in the design process. As always, planning for accessibility from the start is always more cost-effective than fixing problems later. The title of the chapter is, “Designing for Inclusion: Ensuring Accessibility for People with Disabilities”.  You will need institutional access to SpringerLink for a free read. Otherwise there is a payment option. The book is titled, “Consumer Informatics and Digital Health”

Mobile apps, smart cities and older adults

A hand holds a smartphone with various apps showing. A computer keyboard is in the background.With talk of Smart Cities, it is important for older people to be included in digital designs. Twenty-two industry built apps were evaluated in this open access study from Trinity College Dublin. Some were designed specifically for older people, and others for a broader target audience. Text re-sizing and zooming were the main issues. Overall, the apps did not meet accessibility principles of being perceivable, operable, or understandable for older people. The platforms supported accessibility settings, but for older people, finding these settings is a problem.

The article is titled, “Are Mobile Apps Usable and Accessible for Senior Citizens in Smart Cities?” It provides a comprehensive review and good conclusions. It is expected that more people will use mobile apps and computers to accomplish daily tasks and to access important information and services. This kind of study and ongoing research is therefore important.

Abstract. The population in cities is expected to exponentially grow by 2050, and so is the world population aged 65 and over. This has increased the efforts to improve citizens’ quality of life in urban areas by offering smarter and more efficient IT-based services in different domains such as health-care and transportation. Smart phones are key devices that provide a way for people to interact with the smart city services through their mobile applications (Apps). As the population is ageing and many
services are now offered through mobile Apps, it is necessary to design accessible mobile interfaces that consider senior citizens’ needs. These needs are related to cognitive, perceptual, and psycho-motor changes that occur while ageing, which affect the way older people interact with a smart phone. Although a comprehensive set of design guidelines are suggested, there is no evaluation on how and to what extent they are considered during the mobile App design process. This paper evaluates the implementation of these guidelines in several industry-built Apps, which are either targeted at older people or critical city services Apps that may benefit older people, but are targeted at a broader audience.

Screen readers: what are they and how do they work?

A computer page showing JAWS for Windows home page.In the world of web accessibility people often talk about screen readers. But do you know what they are and how they work?  This is a very useful article for everyone who posts on a website. Nomensa blog explains that a screen reader is a software application that enables people with significant vision impairment to use a computer. They work with the computer’s operating system and common applications. It relays information either by speech or Braille. The majority of users control things with the keyboard, not the mouse. The article provides more detail of each of the operating systems that link with screen readers and the applications they support. If web pages are well structured and designed using a particular code, screen readers can interact easily. The article has additional links to other information. 

Vision Australia has a YouTube clip with a Jaws user explaining how it works for her. You’ll be surprised!