Mobile Accessibility and the Perceivable Principle

Mobile accessibility and the perceivable princple

The W3C wants to help developers understand how WCAG 2.0 applies on mobile devices. They recently issued the first working draft on the topic. The guidelines and principles of WCAG are explained using the POUR method: Perceivable, Operable, Understandable, Robust.

In this post I will distill the W3C information for the Perceivable principle.

Small Screen Size

Guidelines include:

  • Use a responsive design and minimize the amount of information that is put on each page
  • Use fewer images
  • Focus on the features needed to operate in the mobile environment
  • Use a “reasonable” default size for content and touch controls to reduce the need for zooming
  • Make sure link text does not exceed the width of the device
  • Put form fields below their labels


The suggestions include:

  • The user should be able to zoom to 200%. Do not block this with the page’s viewport meta element.
  • Support system fonts that follow platform level user preferences for text size
  • Support options on the page to allow the user to change text size


Mobile device content is viewed on smaller screens and in different conditions so the allowable ratio for lessened contrast on larger text on desktop devices must be considered carefully for mobile apps. Therefore, the W3C suggestion at this point is that developers should strive to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. Even then, the user must be able to zoom to magnify the text.

Mobile device image: William Hook

New Tool: Responsive Image Breakpoints Generator

Responsive Image Breakpoints Generator

A new open source tool, Responsive Image Breakpoints Generator, should be at the top of your to-do list of new things to learn to use. Developed by Cloudinary and offered to web designers for immediate use, the tool describes itself,

Responsive websites, even the most modern ones, often struggle with selecting image resolutions that best match the various user devices. They compromise on either the image dimensions or the number of images. It’s time to solve these issues and start calculating image breakpoints more mathematically, rather than haphazardly.

After you choose what you want the breakpoints generator to do for you, you can then download a zip file which contains the HTML5 code which uses the srcset attribute of the img element to set up the responsive breakpoints. The zip file also contains all the images that are referenced in the srcset attributes.

For a longer description of the tool, see this excellent article at Smashing Magazine, which explains a bit more about the tool.

Gather Content Offers a Free UX Guide

A Guide for UX Designers

Gather Content, an online software tool that allows people to streamline their web content production, is making their UX Guide available as a free download.

The book, UX Design And Content Strategy: The Project Guide, is described as a hands-on resource for all UXers and a project guide to UX design and content strategy that explores the relationship through a website project. The book is a 64 page PDF document.

I haven’t read the book myself, but if you are interested in a project based approach to user experience, it certainly is worth a look.

5 Cool New Color Scheme Tools

How do you pick a color scheme for your design projects? Do you browse various color palettes? Perhaps you employ tried-and-true color wheels. Both are good ways to develop color schemes, but if you want to discover fresh new schemes you might want to give the following five new and cool color scheme tools a try.

1. Interaction of Color


You might be familiar with Josef Alber’s “Interaction of Color,” a must-read for all graphic designers published by Yale University Press. Now, meet the iPad app, which features Alber’s teachings alongside interactive plates and videos. The app lets you learn more about color theory and helps you pick the perfect color scheme with its palette tool, which behaves “like paper.”

2. Flat UI Colors

ui flat

If you’re into flat design – the modern web and mobile design trend – then you’ll love this free flat UI color tool, which lets you easily copy numerical RGB and hex values for the most popular colors used in the Flat UI Pro palette. The only way this application could be better is if it included suggestions for complementary colors based on the colors you’ve added to your palette.

3. ColoRotate

color rotate

A new kind of color scheme development tool that lets you build palettes in 3-D, ColorRotate is available on the web or as an interactive iPad app. Click and drag your way to a new custom color scheme, then tweak adjustments on the sliding scale. Or, browse some of the other color scheme creations crafted by users who came before you.

4. Colorzilla

color zilla

The ultimate color tool for Chrome, even if it’s still in beta. Colorzilla lets you get the color of any pixel on any page, generate CSS and CSS gradients, analyze any URL to generate a color palette, and, of course, pick colors to add to a saved palette. If you use Google Chrome, add the Colorzilla extension to your browser (it’s free) and start picking colors today.

5. ColorBug

color bug

A light yet incredibly useful color scheme application for Windows, ColorBug is essentially a color picker tool that lets you drag and drop colors to multiple palettes, then make adjustments to those palettes right in the application. You can select different color code formats, create instant CSS gradients, and even generate color swatches for popular design applications such as Adobe Swatch Exchange (.ase).

Have you tried any of these color scheme tools? Which is your favorite, and how did it stack up to your usual method of color palette selection? Let us know in the comments!

[Ed.: This is an updated version of a post that was published earlier on Web Teacher.]

Guest Author’s Bio: Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.

Upcoming changes in Apple iOS 9.3 will Affect Education

images from of iOS 9.3

A group of students can be set up as a classroom to use any iPad

Apple announced changes aimed at education that are coming in iOS 9.3. The changes allow a group of students to share iPads. Faculty will be able to set up profiles for each child in a classroom. Those profiles can then be used on any classroom iPad.

Students log in to any iPad and have access to all their apps, books, and documents.

With Apple iOS 9.3, teachers can guide students through a lesson, see individual progress including what’s on the student’s screen at the moment, and keep them on track. Teachers can project a student’s work on a classroom television equipped with Apple TV with AirPlay.

Images from of shared iPad use

Teachers can show everyone the same thing at the same time during a lesson

Teachers can launch everyone’s apps at the same time, then guide what students are looking at on their devices.

On the administrative side, there are tools for creating accounts, setting passwords, managing enrollment information, making bulk purchases of books, and creating and delivering lessons with iTunes U.

I think these changes will be important to educators from the primary school through college level.

Images via

How to Protect Yourself from the Weakest Links in The Internet of Things

How to Protect Yourself from the Weakest Links in The Internet of Things

Image via image via dsa66503. Image choice is not meant to suggest that Nest is an insecure brand.

So many things are connected to the Internet now. Your thermostat, your refrigerator, your baby monitor, your light switches, your health tracker. Did you know there are web sites designed to find all the Internet connected devices and potentially allow them to be hacked?

You don’t need to be a computer genius to hack into someone’s security system, door locks or cars. Using the username admin with the same password often yields access to such devices with no trouble at all.

Having access to one of the Internet connected devices in your home could be the weak link that allows someone to hack into other devices in your home, such as your computer.

The most important step you can take to protect yourself is to change default usernames and passwords on all your Internet connected devices. Boston University has a great post on how to create a secure password.

If possible, make the device accessible only from your private home network (which has a secure password, right?) You can then log in to your own network away from home, but others won’t be able to.

Protect your data. Be safe out there.

Broadband Use Drops Slightly; Smart Phone Use Climbs

The Pew Research Center released a new survey on home broadband use in 2015 that has implications for web designers. The overall finding is that fewer people have home broadband, while more people rely on their smart phones for Internet access.

The changes are slight, but possibly significant. Home broadband adoption has plateaued. It now stands at 67% of Americans, down slightly from 70% in 2013.

Pew Internet Survey results for movement from broadband toward smartphones

Pew Internet Survey results for movement from broadband toward smartphones. African Americans, those with relatively low household incomes and those living in rural areas show the most change.

The cost of broadband is a major problem cited by many of those surveyed.

The monthly cost of broadband is prohibitive to many

The monthly cost of broadband is prohibitive to 43% of those who do not have it

24% of Americans do not have cable or satellite. 15% are former subscribers who ‘cut the cord.’ Young adults, in particular, expect to be able to use their smartphones to access almost anything they want, apply for jobs, follow the news, access government services and more.

The implications for web designers

  • websites should work well on mobile devices
  • websites should download quickly with a minimal hit on a users data plan