Accessibility tips to Improve user experience of any product
Countless people have disabilities that affect how they use the internet.
Did you know that the global population for people with dyslexia is greater than left-handed people? Apparently 7% of people are left-handed while 9% are dyslexic. While dyslexia is only a single disability accessibility is meant to help anyone with a physical, visual, auditory, even speech, cognitive, or neurological disabilities.
Accessibility is a serious matter. Think about it. The internet allows people access to unlimited information.
Incorporating accessibility into your product design will ensure that the product you’re working on benefit everybody. It will help the product be stronger because more people will be able to use it without hassle. There a few things we designers can do to make sure our work has high accessibility standards.
01. High contrast
People have been complaining about poor contrast for a while not. And, unfortunately, the battle continues. There are websites designated to combating poor contrast designs going back to 2011 like Contrast Rebellion. For some reason, we haven’t taken the hint and keep using low contrast colours. I’ve fallen an idiot for this myself thinking that it’s worth colouring a text in a lighter shade for the aesthetic purposes; it’s not. If someone can’t see it because they have poor vision or a weird monitor, it’s useless and invisible. That’s far from being aesthetic.
Let’s talk about the navigation on Joshua Gimenez’s portfolio. The three navigation items are getting lighter in font weight, and lighter in opacity. It’s a cute gradient but it makes the navigation hard to see. When entering the site for the first time, your eyes are down to the big and bold typography – which has an amazing contract. The small font size of the navigation further diminishes it. I’m I have poor vision, forget about finding the navigation. With context, this navigation is not accessible to everyone.
Another example is on the portfolio of Laurent Sutterlity. In the skills section, Laurent briefly talks about his design and development skills before listing them individually. The problem here is that someone on a poor monitor could easily misinterpret it as white space.
The light gray font, even with the light gray background, is, well, too light. I have a hard time scanning the section to see if he has the skill I am looking for. I would move on in an instant if it wasn’t for this article. It’s important to make users work hard for information because they won’t; they will move on.
One last example of poor contrast is Squarespace and their in-page navigation. On their many pages, they often feature example template which is a fantastic way to sell their product. In these instances, the links to sort through the different template is so small and very light in colour.
Take for instance the page for online stores. You can filter the different types of stores by clicking the “Show others” link on the right-hand side of the section. It took me a while to notice it.
Once you click it, the in-page navigation shows up and you can filter the examples to portfolios, for example. Those links are not any easier to see. The same goes for the subheading of that section’s heading. “Start your free trial today. No credit card required” is very faint. It’s an amazing selling point but it’s noticeable. All this just to look good is not worth sacrificing potential customers who miss those links.
02. Indication of change
I was ordering something from Honest Beauty’s website recently when I filled out my credit card information wrong. I didn’t know what went wrong. The form does tell me that something is wrong but first of all, it’s vague on the actual problem, second of all it’s hard for me to tell what it is right away anyways.
A good piece of advice is to use more than one method to indicate a problem. I’m happy that there are notifications by three different inputs that they are wrong. I’m not happy that they are not specific as to what is wrong with them – more on that shortly. If the forms were marked red for instance, bolded and with an error next to them, it wouldn’t take a second for me to know exactly what the issue is.
Another thing that happens often is only indicating an error with a colour. That’s also not good enough. What if the person is colourblind? What if their monitor has a glare on it and they can’t very well on it? Add words, make it bolder, give it more contrast – add more indicators, don’t rely on just one.
03. Explain the correct interaction requirements
This is the biggest pet peeve of mine. A form needs to be clear about what it needs from the user. Otherwise, the user will spend time, effort and energy into trying to decipher something that should have been clear from the get-go. It’s not hard to design interaction to be inclusive of more than one scenario. Edge cases are a common term because they happen so often. It’s easy to design for this and it’s also easy to develop for this too.
Dinapix is a digital studio. The contact form on their website could use some love. Looking beside the contrast problem, the form is very vague in its requirements. I pressed send on an empty form to see what would happen. I then entered 123 as the phone number. That’s the screenshot I took. I am willing to bet if I submitted “123” as my phone number I would get an error. But why? The form doesn’t tell me what I should or shouldn’t enter as the phone number. There is no formatting. The form threw an error when I didn’t enter one in the beginning but, in all honesty, why do they need my phone number? What do they need it for? Are they going to call me or email me back? There are just so many questions.
Additionally, the form is not very specific about why the blank inputs are bad. They turned red, the from didn’t do any other signals to indicate an error by the way. Actually, the message field wasn’t red. So it’s all a guess on which forms are required and which are optional. Again, I don’t know what happening here. It’s not hard to develop the from to check the content of the input and reflect an appropriate error message. If the input is required but empty the form can display “Don’t leave this blank.” If the email is formatted poorly and is missing @ then the error can indicate this in its message.
It bothers me that things like this go undesigned. It doesn’t take a lot of time to provide specs for these kinds of interaction. It’s lazy when it’s not done because it affects everyone who would go through the interaction, not just the visually impaired or the people with poor monitors.
Another example is the form on Xfive’s website. I entered a wrongly formatted email address into the second field and pressed enter. The error I received it that I did not fill out the first field. The form upon submission is announced with the rest of the form being empty or the email being useless. That’s not good. The lack of labels of is also a bad idea. It’s a usability nightmare for if a user spaces out and doesn’t know what they were typing. Or, whether the input asked for first name only or full name. You can’t know this if the label is a placeholder that goes away.
04. Keyboard focus indicator
I don’t wish this on anyone but I once had to reinstall my Mac’s OS without being able to use a mouse. It’s a long story but it was so awful!I Eventually fixed the issue and had my mouse back but imagine having a broken hand, or no hands at all. It’s hard navigating on a website without a mouse. It can happen to anyone, the mouse input could break for you or user users too like it did for me.
To combat this, there is a focus feature on all links, inputs, buttons – anything a user can click in an HTML page.I’m sure you’ve seen it around. Don’t ever remove it. Better yet, design it so it fits within your design. You can customize the CSS that goes into the focused field. You can get really creative. If you decide to design, you should keep in mind that the focus field should be obvious and be familiar. If a user can’t distinguish that an element is on focus, it’s not doing its job. Below, in the image from Blah, you can see what the focus state is around the about link. Pretty straightforward.
Yet, there are pages like the home page for Fifty Four. Whoever designed it cared to impressed with the website. It has sleek photography, trendy typography and button styles and some interesting image transforms on hover. But, there is no focus state on the logo, the menu icon that’s in the middle of the page, the single CTA button that’s above the fold right there nor the arrow pointing down. I have pressed Tab till we were both blue in the face with no luck. That’s a shame.
There you have it
Yup, that’s all I’ve got. Accessibility isn’t tricky or difficult. As long as you keep in mind these things when you’re developing your designs you can make the designs that much better.
Improve the experience of the users who are the worst off will also improve the overall experience of every user by proxy. The web is an inclusive place for everyone and I want to make websites that anyone can use. These were four ways in which I try to achieve that.