Motor disability

Motor impairments are one of the two most important disability categories to focus on when designing products and public spaces (the other one being vision impairments). Simply because motor disabled users - just as blind users - may be completely unable to access poorly designed products or services while other disability groups would probably just have a worse than average user experience.

When asked to give examples of motor disabilities, people usually just mention wheelchair users and go on to assume that the only accessibility they need concerns public facilities such as ramps, elevators and wide-doored bathrooms. They couldn't be more wrong!

Indeed, wheelchair users are probably the most visible fraction, but motor disability isn't all about wheelchairs. The formal definition of motor impairment points to loss of function of a body part - not only total paralysis but also things like decreased stamina or muscle control. This means your motor disabled user group also consists of walking cane users, those with reduced fine motor skills and various types of amputees, All this adds up to a vast and diverse group. A lack of fine motor skills for example may impair precise pointing, wrist twisting or finger bending, maintaining a fixed hand position...

And then there are elderly people who often suffer from several different motor impairments at the same time. This makes using computers, smartphones and high tech household appliances all the more confusing.

The most common issues faced by motor impaired users include operating small or unergonomic hardware elements, reaching distant interface elements, operating touchscreens and performing 2D or spatial gestures.

More details to come in the next post on accessibility for motor disabilities!

Accessible charts and diagrams

Just as all images, charts and diagrams aren't the most accessible medium out there. But on the other hand, they're a very effective way of visualizing data - far more so than tables or written analyses.

Despite the abundance of various diagrams on the web, we rarely realize that they may present a significant accessibility challenge not only for blind Internet users. Choosing the wrong colors, scale or grid density can significantly reduce a charts readability for all users.

Although a chart will never be fully accessible to a screen reader user, you can still make it more or less accessible for all the other people out there.

Let's start with some data. Here's the latest population distribution according to age for the European Union from the World Factbook:

Age group	% of population
0-14	15.5
15-24	11
25-54	41.9
55-64	12.8
65 and over	18.8
Total	100

There are many ways to illustrate this dataset using different types of charts - we'll go through several of them and note their merits and drawbacks.

Basic circle diagrams

A circle diagram would probably be one of the most obvious choices to visualize percentages that add up to 100. If you don't tinker with your spreadsheet's default settings, you'll probably get something like this:

(A)

Sometimes you also come across different variations of the same diagram:

(B)

(C)

The slight differences between them make all the difference when it comes to accessibility - both online and in print.

Diagrams (A) and (C) use a color-coded legend to distinguish between the age categories. This is a very straight-forward solution, but it doesn't work well for color blind or partially sighted users.

A color blind viewer may not distinguish between certain colors. Unfortunately, it doesn't always have to be the well-known red-green pair. There are various forms of color blindness and choosing a set of colors to satisfy them all may prove impossible. You could of course try to use shades of gray to make sure all your colors have different contrast ratios, but this may not be effective when working with a long list of categories.

Using patterns or textures is another option, but looking at such diagrams can quickly lead to eye strain.

Additionally, low vision users may find it difficult to make out the color of a "sample" in the legend due to its relatively small size. Unfortunately, spreadsheets don't always let you change the size of the legend's color samples.

In the case of example (C) a lack of borders between the sections of the diagram additionally contributes to a color blind user's confusion as they may not even be able to work out where specific sectors end.

Diagram (B) partially resolves the color coding problem by placing appropriate labels inside the circle diagram. However, this in turn gives rise to another issue - the contrast ratio between the font and background colors. The font will most likely be black or white which means that if you have both a yellow and red sector in the diagram you're probably not maintaining enough contrast for one of them.

An extra issue with version (B) is the lack of clearly stated distribution values. Looking at the diagram alone it may be difficult to accurately estimate whether a given sector is 20% or 25% and almost impossible to tell apart some smaller values.

Labeled circle diagrams

(D)

A labeled circle diagram like the one in figure (D) is by far the most accessible of all the diagrams we've looked at so far. The labels are key here. They help the user easily make out which sector represents which age group and make it easy to associate a category with its value. The only potential issue you may have with this type of diagram is making sure the guidelines connecting a sector with the appropriate label are clearly visible and not confusing - e.g. make sure to have enough space between the lines.

Stack diagrams

Another way to visualize a trait's distribution is by using a stack diagram:

(E)

Unfortunately, apart from the value markers on the left axis, this chart does not offer much more accessibility than the basic circle diagrams. If anything it is a little bit easier for color blind users to decipher which color corresponds to which label because the colors in the diagram appear exactly in the same order as in the legend (while circle diagrams with many small sections don't always make it easy to figure this out).

But on the other hand, a wide stack like the one above makes it more difficult to see the difference between categories with similar values.

Column diagrams

Another way to visualize data is by using column or bar diagrams. Here are a few examples:

(F)

(G)

(H)

These diagrams all have one major advantage compared to circle and stack diagrams: no color coding. Every column is labeled so it's easy to make out which represents which data category.

The greatest potential accessibility issue in these diagrams is reading column values. Users will usually do this by comparing a column's height to the scale on the vertical axis. So if you care about clarity, you should think twice about the scale you use. Unfortunately, spreadsheets don't always automatically choose the most human-readable scale to illustrate the data. Diagrams (F) and (G) automatically fitted the data into a 0-50% scale but divided the range into quarters producing 0, 12.5, 25, 37.5 and 50 as left axis labels. While technically there's nothing wrong with this, choosing 0, 10, 20, 30, 40, 50 markers would have been much more helpful and intuitive.

Adding extra grid lines as shown in (H) can also be helpful but here too you need to make sure the default settings make sense. Remember that there's no added value in setting secondary grid lines every unit when the main grid appears every 20 units. Too much "noise" behind the data columns will only distract the user.

One more good practice worth remembering is using column value labels like those in diagram (G). This solution is especially worth using when there's little variation between data columns' heights.

And a quick end note on other, non-standard diagrams: though often helpful, they shouldn't be used without good justification. After all, your goal in visualizing data is better and faster comprehension - the user shouldn't spend too much time on figuring out how the diagram works.

Accessibility awareness survey

Working in accessibility for quite a while now, and seeing how more and more big players in the tech industry reach out and embrace universal design, I started wondering how this massive push for accessibility has effected popular awareness of the issue. So I conducted a little accessibility awareness survey.

Using a web survey portal I prepared a short questionnaire to ask Polish Internet users about their understanding of accessibility. The survey ran for a few weeks in February and here are some of it's findings.

In total there were 320 participants - 61% of which were female and 39% male.

The participants' ages ranged from 13 to 85 years old (my apologies for the huge surplus of 20 to 29 year-old women - I guess they're the group most in to filling out online surveys).

Over 40% of the participants claimed they knew what accessibility was.

Sounds like a great result, right?

But when asked to give a definition, most of the allegedly accessibility aware Internet users don't seem to have much to say. After looking through their answers I found only about 1 in 9 to be anywhere near correct.

According to the most common misconceptions accessibility is either equivalent to website uptime or free software downloads (sic!). Quite a few participants also honestly admitted they're unable to define the term, even though one question back they claimed to know it's meaning.

The results were more optimistic for those working in Internet related branches of industry such as IT, e-commerce and telecommunications. Here, nearly 65% of the participants said they knew about accessibility and around 36% were able to give a fairly correct definition.

After providing the participants with a proper definition of accessibility I asked them to point out groups that could benefit from its implementation.

Over half (56%) of the respondents were unable to point to any group of beneficiaries. Another 11% claimed that accessibility benefits IT professionals such as programmers, designers or bloggers and 16% suggested completely irrelevant answers (e.g. companies, researchers or celebrities), which would suggest that these participants don't exactly grasp what accessibility is despite being given a proper definition.

Just 11% claimed that everybody could benefit from accessibility. And, surprisingly, only 3% of the respondents mentioned the elderly and under 6% pointed to disabled users!

For Internet related industry professionals the results were slightly better. Even though over 50% were unable to point to any group of beneficiaries, yet at least more of them realized that accessibility aids elderly and disabled users. And no one suggested it is something you implement for the benefit of the developer.

Asking about how to make software accessible didn't ring a bell with the general public either. Just under 6% of the participants were able to point to various assistive technologies as the solution. 75% declared they don't know how to enforce accessibility and the remaining 19% proposed irrelevant solutions (e.g. website positioning or online marketing).

Unsurprisingly, when asked about implementing accessibility the Internet industry professionals managed to nail the right answers more often than users from other backgrounds, though with 65% still not being able to produce any answer, you wouldn't exactly call it common knowledge...

Altogether, this little survey shows there's still much to be done before accessibility awareness is common in the IT industry, let alone the general public.

Keep in mind that the figures presented in this post were based on a relatively small group (320 participants) and are probably not representative for the general population.

Accessibility vs UX

Accessibility, usability and user experience are tree terms often perceived as a single step in the whole product development process (and to be performed by a single "general purpose" designer). Which often ends in disappointment when our UX designer approved software turns out to have accessibility issues - and beware, these are often neither easy nor cheap to fix once the product is out on the market.

Formal definitions aside, accessibility means a product is available to everyone regardless of the way they operate their device.

Usability guarantees the product is easy to use, intuitive and easily learnable.

User experience on the other hand tries to make a product attractive and fun - turning it into an experience rather than just another mundane tool.

I've tried and failed to order these terms into a nice, logical pyramid-like structure to visualize the importance and hierarchy between them. Besides, half of the UX designers out there would have probably disagreed on the hierarchy anyway ;).

For maximizing a product's audience, the most sensible approach would be to first make sure the product is accessible to all, then work on it's usability to support the actual functionality we're trying to sell and finally package the whole thing in a compelling user experience design.

Ironically, even though from my perspective product accessibility is a "must" and great user experience would only count as a "nice-to-have", the most basic design decisions such as who an app is for and what it should actually do are questions of unmet needs which should be answered by a UX researcher before anybody even does a line of coding or design work.

Of course, you can decide to ditch accessibility and make a pretty, shiny and totally inaccessible product which will give your young, lean and always energetic audience thrills along their spines and never mind those aging grannies that you're probably discouraging from ever even looking at your new invention, why not? It's a free market.

But keep in mind that accessibility often turns out to have much in common with ergonomics and will also make it easier for your regular audience to effectively use the product.

Accessibility by Example: Windows log in screen

OK, so you've read the theory on accessibility and are probably wondering what it all boils down to in practice. Well, that's what the "Accessibility by Example" posts are going to be about.

I'll be showing examples of accessible (or inaccessible) websites, software, hardware or just about anything else I can think of.

Let's start with a picture that'll probably seem familiar to most of us:

Microsoft's Windows operating system has been at the top of the pack for OS market share for years. You can pretty much assume that if somebody uses a computer they've probably seen a Windows log in screen at some point or another.

You see it, click on a user tile, type your password, hit enter and off you go.

But have you ever wondered what it's like for someone who can't see? Or maybe just has low vision? Or can't operate a mouse or keyboard all that accurately? Or - improbable as it may sound - sees it for the first time?

Color contrast

If you've read my previous post on basic accessibility for low vision users, you'll have probably already figured out that there's something seriously wrong with the color contrast.

Light blue paired with white make a popular and modern looking but unfortunately also quite inaccessible color theme.

The color contrast for the username text on this login screen is barely around 2.0 (actually it's between 1.9 and 2.5 as the blue is darker on one side and lighter on the other) - while the WCAG minimum is set at 4.5! The shading on the buttons doesn't help much either.

Blue and white can be combined to make a very accessible color theme, but you need to make sure you choose a blue dark enough to give you the desired contrast ratio.

Widget size

Button size (or, in general, clickable UI element size) is a major accessibility factor, important primarily to low vision and motor disabled users, though bigger clickable areas also considerably increase a product's overall usability for able-bodied users as well.

Here, both the login button and the ease of access button (sic!) are small to say the least. Neither of them are an easy target for someone who has trouble precisely operating the mouse. Moreover, a visually impaired user might actually not notice the ease of access button considering its size and the poor color contrast!

The only large, easily clickable widgets on the screen are the avatars that represent different users.

Layout

Apart from the irrationally frugal use of button space the layout is a good one.

Not only does it strongly support the screen's primary use case (i.e. actually logging in to the system), it also places the controls for other relevant use cases in easily accessible places. Even a severely visually impaired user who can normally barely follow a pointer on the screen or motor disabled user having difficulties with precise hand movements, will probably be able to move the mouse to the bottom left corner to open the accessibility menu and turn on supportive features for their disability (assuming they see the button or otherwise know it's there).

Fonts

There's not much text on the login screen – which doesn't yet mean there's no room for improvement as far as the font goes. The clear, sans serif font is a pretty good choice (it's been claimed that sans serif fonts are more readable than serifs). But that's not much of a merit when you outline your font with a shadow and put it on top of a barely contrasting background.

Nevertheless, I wouldn't blame the font for this screen's accessibility issues.

Keyboard access

The screen is keyboard accessible which means that both screen reader users and those who can't use a mouse can operate it.

After choosing a user, focus automatically moves to the text field so you can type your password straight ahead. After that all you need to do is hit the enter key to log in.

The keyboard focus animations, however, are barely visible to low vision users.

Comprehensibility

The big user avatars are a good hint that you should first choose a user for the login session.

The text field also clearly signals what is expected of you thanks to the "Password" ("Hasło" in my Polish system version) hint placed inside it.

The arrow button, however, could have been replaced with something more explicit (e.g. a classic "Log in" button) – especially as it's so small and easy to miss.

One more non-standard icon used in this screen is the "ease of access" button. True, it may be known to Windows users, but won't necessarily ring a bell with those migrating from other platforms where a simple wheelchair icon is usually used to represent accessibility settings.

Conclusion?

What can I say... I often use this logon screen as a practice accessibility evaluation task for the participants of my accessibility trainings and they're always amazed at how poor this design is accessibility-wise.

Not to say it doesn't have it's merits - it could easily be turned into a fully accessible screen by applying just a few basic accessibility principles like providing adequate color contrast and element size.