Choosing just ten major accessibility fails wasn't an easy task, but here's my personal list of bad accessibility and usability practices.
To many, color contrast is more of a question of aesthetics than usability. Quite the contrary! The color theme you choose for your product can severely influence its accessibility.
Adequate color contrast doesn't mean you need to resort to boring black and white. There are lots of color combinations with a reasonably high contrast rate. But be aware that the extremely popular white & light blue color theme is not one of them.
Information architecture is one of those things you never appreciate until it's broken. And you can be sure that once you break it, lots of people will notice and feel entitled to share their discovery with others.
The truth is: your user should never have to think too much while using your product. Finding things should always be obvious and intuitive.
A pretty graphics theme won't help a messy information model. You want your menus to be logically structured and appropriate to the use cases you expect your audience to engage in. You want your links to point to the things the user needs in a given context. And most of all, you want to minimize information clutter and make sure everything your user sees is there for a purpose.
Tiny paddingless buttons tightly huddled together, checkboxes you have to explicitly click within that little white square to select, three-letter inline link texts... one thing they all have in common is how inviting they are to error.
Reading small text is one thing but misclicks or not being able to perform an action altogether are a totally different story!
Providing large clickable items and enough space between them is crucial to low-vision and motor disability accessibility. It also helps elderly people and all those who lack fine motor skills.
Most people never even think of using a computer without a mouse. But believe it or not, quite a few people actually do use the keyboard for more than just typing text. Blind, low-vision and motor disabled users may all resort to keyboard access in order to compensate their disability and move around faster.
Nowadays, keyboard access is quite simple to provide - all you really need to do is adhere to good programming principles like setting up headings or adding basic keyboard shortcuts etc.
The only good cases for using images of text are logos and artwork. In all other cases text should be entered as text (e.g. as a label) and preferably also be selectable and copyable.
If for some reason you really, really need your text to be an image - be sure to add an alternative text to it.
Why is the polite "Please enter your e-mail address" inferior to a crude "Enter e-mail" command? Well, being polite is great but when it comes to user interfaces you want your labels and descriptions to be as short, clear an concise as possible. Why?
For one thing: you don't wan't your user to waste time on reading more than is absolutely necessary to perform the task they're aiming to finish.
Secondly, your audience may also contain intellectually disabled users who find it difficult to understand or concentrate on complex expressions.
And last but not least - remember that a low vision user may enlarge the text of your website or application which often results in the software's labels not fitting in their corresponding text areas.
Input errors don't just happen do disabled people. But when they do, it can take quite a while to figure out what exactly has gone wrong and how to correct the erroneous input.
An input error message should always let the user know which field triggered the exception and provide instructions for supplying a valid input (e.g. the desired date format, password size requirements).
Text alternatives are descriptions of non-text elements to be displayed to people using text-only viewing interfaces like screen readers or text browsers. Their sole purpose is to provide useful information. Why then add a "pretty smiling lady" alt text to an add or "green floral decoration" to a banner?
Actually, there's a good practice solution for just such a case. All uninformative or purely decorative content should be given an empty string as their alt text. All other content should be tagged with a concise description.
Hover menus are not inherently evil but they do tend to be a real pain in the ass for many elderly, motor disabled or low-vision users. E.g. a hover many may work fine at the standard browser magnification level, but could go all over the place once you set magnification do 300%. Moreover, they're unbelievably irritating if you're not too good at moving the mouse precisely: the menu will hide and reappear each time you accidentally swipe too far.
Hover menus were meant to save space. But at the same time they're barely usable when their items start sprouting submenus. And besides, having this enormous menu you can't fit on your webpage... are you absolutely sure you've got your information architecture right?
There's a good change you've heard about photosensitive epilepsy and know that blinking light's may trigger an epileptic seizure. But on the other hand, flashing, moving or blinking content is so widespread on the web it seems a must-have.
The truth is there aren't all that many photosensitive epileptics. And even among them, not every one will automatically have a seizure from looking at an animation. But flashing content may also cause discomfort or eye strain to many able-bodied users so it's good practice suggests you minimize flashing and blinking whenever possible.
Inadequate color contrast
To many, color contrast is more of a question of aesthetics than usability. Quite the contrary! The color theme you choose for your product can severely influence its accessibility.
Adequate color contrast doesn't mean you need to resort to boring black and white. There are lots of color combinations with a reasonably high contrast rate. But be aware that the extremely popular white & light blue color theme is not one of them.
Poor information architecture
Information architecture is one of those things you never appreciate until it's broken. And you can be sure that once you break it, lots of people will notice and feel entitled to share their discovery with others.
The truth is: your user should never have to think too much while using your product. Finding things should always be obvious and intuitive.
A pretty graphics theme won't help a messy information model. You want your menus to be logically structured and appropriate to the use cases you expect your audience to engage in. You want your links to point to the things the user needs in a given context. And most of all, you want to minimize information clutter and make sure everything your user sees is there for a purpose.
Small action items
Tiny paddingless buttons tightly huddled together, checkboxes you have to explicitly click within that little white square to select, three-letter inline link texts... one thing they all have in common is how inviting they are to error.
Reading small text is one thing but misclicks or not being able to perform an action altogether are a totally different story!
Providing large clickable items and enough space between them is crucial to low-vision and motor disability accessibility. It also helps elderly people and all those who lack fine motor skills.
Partial or no keyboard access
Most people never even think of using a computer without a mouse. But believe it or not, quite a few people actually do use the keyboard for more than just typing text. Blind, low-vision and motor disabled users may all resort to keyboard access in order to compensate their disability and move around faster.
Nowadays, keyboard access is quite simple to provide - all you really need to do is adhere to good programming principles like setting up headings or adding basic keyboard shortcuts etc.
Text as images
The only good cases for using images of text are logos and artwork. In all other cases text should be entered as text (e.g. as a label) and preferably also be selectable and copyable.
If for some reason you really, really need your text to be an image - be sure to add an alternative text to it.
Overcomplicated language
Why is the polite "Please enter your e-mail address" inferior to a crude "Enter e-mail" command? Well, being polite is great but when it comes to user interfaces you want your labels and descriptions to be as short, clear an concise as possible. Why?
For one thing: you don't wan't your user to waste time on reading more than is absolutely necessary to perform the task they're aiming to finish.
Secondly, your audience may also contain intellectually disabled users who find it difficult to understand or concentrate on complex expressions.
And last but not least - remember that a low vision user may enlarge the text of your website or application which often results in the software's labels not fitting in their corresponding text areas.
Handling input errors
Input errors don't just happen do disabled people. But when they do, it can take quite a while to figure out what exactly has gone wrong and how to correct the erroneous input.
An input error message should always let the user know which field triggered the exception and provide instructions for supplying a valid input (e.g. the desired date format, password size requirements).
Incorrect text alternatives
Text alternatives are descriptions of non-text elements to be displayed to people using text-only viewing interfaces like screen readers or text browsers. Their sole purpose is to provide useful information. Why then add a "pretty smiling lady" alt text to an add or "green floral decoration" to a banner?
Actually, there's a good practice solution for just such a case. All uninformative or purely decorative content should be given an empty string as their alt text. All other content should be tagged with a concise description.
Hover menus
Hover menus are not inherently evil but they do tend to be a real pain in the ass for many elderly, motor disabled or low-vision users. E.g. a hover many may work fine at the standard browser magnification level, but could go all over the place once you set magnification do 300%. Moreover, they're unbelievably irritating if you're not too good at moving the mouse precisely: the menu will hide and reappear each time you accidentally swipe too far.
Hover menus were meant to save space. But at the same time they're barely usable when their items start sprouting submenus. And besides, having this enormous menu you can't fit on your webpage... are you absolutely sure you've got your information architecture right?
Blinking content
There's a good change you've heard about photosensitive epilepsy and know that blinking light's may trigger an epileptic seizure. But on the other hand, flashing, moving or blinking content is so widespread on the web it seems a must-have.
The truth is there aren't all that many photosensitive epileptics. And even among them, not every one will automatically have a seizure from looking at an animation. But flashing content may also cause discomfort or eye strain to many able-bodied users so it's good practice suggests you minimize flashing and blinking whenever possible.
