Why your website should suit screen readers

two hands on a laptop keyboard.Previous posts have explained how screen readers work, but not the amazing things that happen to people who use them. With free screen reading software by NV Access, screen readers are now available to all who need them. This software is so successful that it’s been translated into 50 languages. This means people in developing countries can also join in everyday activities, study and get a job. The video is 12 minutes, but worth the watch because you see the value of why all websites, web pages, and document uploads should be suitable for screen readers. It’s not just about doing “good works” – it’s about expanding your employee base and customer base. Besides, our obligations under the UN Convention require it. NV Access is a charity with a great story to tell. 

 

 

Open Sesame! Packaging made easy

Exploded view of the package and all its partsIn marketing terms, the packaging is part of the product. The package shape, colour and brand are important in enticing consumers to buy. But all too often we have to get a sharp knife, a pair of scissors and wrestle with the packaging in order to get to the product inside. Microsoft has come up with a nice solution to packaging their Xbox Adaptive Controller – a gamepad for people who might not have use of their limbs. Good thinking – no good having a nicely designed accessible product that you can’t get out of the box! The video below shows the simple but effective design. There is another video on the FastCompany website or see the engadget website. Package designers take note. 

The title of the article is How Microsoft fixed the worst thing about product packaging.

 

Colour perceptions vary across cultures

Three smart phones showing the colour game.Anyone interested in optimal colours for web and phone might be interested in a project that came out of a colour matching game app. The game is based on colour perception. Feedback data showed designers how people perceive colour. With the help of academics they began to analyse the data in meaningful ways. Preliminary analysis indicates there is a variation across countries. For example, Norwegians were better at colour matching than Saudi Arabians. Singaporeans struggled to identify greens, and Scandinavians did best with red-purple hues. Research papers are to follow which could lead to more inclusive colour choices. The article concludes, 

“But the fruits of the project live on in open source. A generic version of Jose’s tools to query the Specimen dataset are hosted here on github. My greatest hope is other researchers find and make use of what was gathered, and that other designers and engineers consider leveraging play in unexpected ways”.

The title of the article on FastCompany website is, Our viral app made less than $1,000. We’d still do it again.

Picture courtesy FastCompany.

Graphic Design Everyone Can Enjoy

Front cover of the handbook. Bright yellow with black text.An excellent resource from Ontario, Canada on accessible graphic design. It’s everything you wanted to know but didn’t know how to ask. Graphic design covers creative design, visual communications, applied design and technology sectors. So the guide covers typography, digital media, web accessibility, Office documents, accessible PDFs, print design, environmental graphic design, colour selection and more. It’s written for an easy read and has a logical structure. At the end is a list of publications, links to websites and tools to help. 

There are so many little things that graphic designers can do to make their creations more accessible. The guide unpacks them to show it can be done with little, if any, extra effort. The title of the guide is, AccessAbility 2: A Practical Handbook on Accessible Graphic Design.  

 

Do’s and Don’ts Posters

One of the six posters, mobility, showing a short list of do's and don'ts of accessibility.Six different posters help designers make online services accessible in government and elsewhere. They cover low vision, deaf and hard of hearing, dyslexia, motor disabilities, people with autism and users of screen readers. The posters are simple and this is what makes them effective. Basically they act as visual prompts to designers rather than offering technical know-how.  You can download each of the posters from the UK Government website. There’s other useful information and links too. Also available in 17 languages.

Poster for people with autism

Poster for people who use screen readers

Poster for people with low vision

Poster for people with dyslexia 

Poster for people who are Deaf or hard of hearing

Poster for people with physical or motor disabilities.

 

Choosing colours for websites

Colour diagram showing the three different types of colour vision deficiencyColour vision deficiency or colour blindness affects around 10 per cent of the population. But each person varies in what colours they can see, which is why it is not “colour blindness”.  So what colours are best if you want all readers to enjoy colours on your website? Colour choice is not just a matter of making it look good – it can affect the readability of text and graphics as well.

A small qualitative study looked at two websites to assess their readability and usability by people who have colour vision deficiency. The researcher analysed body text, background and links and found they had an affect on the usability of the websites. The research included designing two websites and then testing them with survey participants. The results should be read in conjunction with the methodology otherwise it won’t make sense. The conclusion section does not provide the specific outcomes.

The title of the article is, The effects of color choice in web design on the usability for individuals with color-blindness.  This is a Masters theses.

 

Writing inclusive social media

Social media icons, Facebook, Linked In, Tumblr and PinterestHere are some tips for making social media more accessible, courtesy the Australian Network on Disability blog post which has more detail for each heading. The first in the list is a must. Posting a funny sign or a clever quotation can’t be read by everyone. Make sure the text is part of the post. A very useful webpage with a good deal of information – bookmark it for future reference.

  • Images
    • Include text that is in images in your post
    • Ensure enough contrast between your text and background
    • Provide alternative text for informative images
    • Use emojis and emoticons sparingly
  • Video
    • Provide captions for your videos
    • Provide audio descriptions for your videos
  • Readability
    • Avoid jargon, acronyms and idioms
    • Use CamelCase for hashtags
    • Include hashtags or mentions at the end of your post
    • Create short links or remove redundant links
    • Tell users when linking to an image, video or audio file
    • Thread related Twitter posts on the same topic  

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/