That’s right! Another cliche saying that accessibility is crucial. Probably, you heard that before! But, things are changing. And, as different technologies come in, we need to retailor the accessibility so it does the job. In today’s article, we’re not gonna cover why accessibility will become a prophet (holy guacamole…I just said that!) into engineering the UX and delivering the content to everybody, even if we know that accessibility is designed for the users who experience disabilities.
“Sorry, Chris, I didn’t get that!”
This is what I heard every time I’m asking Siri to find me hilarious product images that could become viral. And the idea is not about what we ask but rather what web haves there and how accessibility was done. And now, it’s time to say one thing you probably haven’t thought about:
“When designing for accessibility, we need to think also about Siri…or whatever voice assistant you have”
And here’s why. Voice assistants play a major role in the life of people experiencing disabilities. It’s an important topic to cover when tou develop your contextual inquiry toolkit. (And for those who don’t know, contextual enquiry is a set of methods that colectively for a toolkit for understanding your users in their everyday lives.) In fact, such assistants are web users too. And most of the time, we don’t pay attention when engineering the accessibility. It might sound like “Chris, it’s like taking accessibility for people with disabilities that have trained dogs”, but…Ready?
“Voice Search will become in near future the next search functionality taking over the standard one”
Why do you think Amazon sell their Alexa, or Apple integrate their Siri? Or even the latest Google Assistant that literally make an appointment for you. Check the video if you have time:
So, getting your accessibility done for search assistants improves the discoverability and usability of your business. Now, let’s look at some important checklist that you probably need to get done outside choosing a proper font size, contrast or even content.
Houston, We’ve got problems with the Display!
What the heck do alternatives mean? Well, it stands for the info you add in the HTML elements so the user that experience disability can read it, or listen to it.
Image Alt Tag
Some of us are not so good at coding. We do User Experience. But, being a UX designer or engineer (this comes from 2 thinking schools: “Product as Information” and “Product as Functionality”)means that we can connect later on with the dev, so he‘s informed that these tags are important for usability.
By default, an image alt tag looks like this:
When the user enables the screen narration, the information within this tag is being narrated. Also, the alt tag tells crawling bots (those who are being sent by Search Engines) what the image is about. This also helps search assistants find relevant images when someone asks it. Yes! Laziness is a disability too. You can’t imagine how often I use Siri for searching images…
So, next time you engineer the accessibility, think about image alt tags and what info should be here. Most go with keywords. But, think what’s the most important to you: Usability or Discoverability.
I bet you’re pretty familiar with basic accessibility definitions. How to set fonts size, color contrast, content placement…and so on. This article is more about the backend part of any website. And that’s coding. But this should not scare you. The info you find here can be easily handoff to dev. So, moving on.
Tooltips play another major role in usability and accessibility. Since I don’t f***ing get why businesses still use their specific language instead of plain English, a great way to display info about an element is by using hover tips. They help the user understand better what the section does. Take a look at these savage tooltips and let me know what do you think? How would you implement it?
Here are some examples: https://tympanus.net/Development/TooltipAnimations/
And since you might ask “Chris, what tooltips have to do with accessibility?”, here’s the answer: Tooltips looks different on the code. Here’s an example:
Already guessed what impact it haves on search assistants and users with disabilities? No? Tooltips give the user access to better understanding the element, whatever it’s a search form, link, or even input fields. So, think about adding these little interactions kitties to your next UX project.
3. What To Write, Where to Click.
Another element of backend accessibility I’d love to talk today are inputs and how we should design them for accessibility. As with any other HTML element, Input fields have their descriptions too. We use labels, placeholders but…forget about TYPES! Let’s feature the most important ones when it comes to accessibility:
-Text: Tells the browser it’s a one-line text input field.
-Password: Defines a password field and hides the characters within.
-Submit: Tells the browser that the form data inputted by the user it’s completed and should be delivered somewhere.
-Reset: Well, as it says…it reset the information user have typed in the fields.
-Color: Defines it’s a field for selecting the color
-Date: Defines it’s a field for choosing a date
-Email: Tells the browser it’s a field for inputting the email.
-Tel: I think it’s self-explanatory.
Of course, there are more than these. If you wanna see the full list, go here.
You might not get why choosing a proper type is so important but, imagine you’re on your phone and you have a form. In the first example, the form field for email doesn’t have the right type, which is “email”. In the second example, the field for the email input, have the right type. So, when you click on that field it will display the keyboard layout for email, that one with “@” characters. The question is: In what example, you’ll get better accessibility?
I guess you found the right answer. And, btw, the same goes for “tel” type. It’s always better to display a numpad instead of a standard keyboard. Right?
So, that’s pretty much all for today. Hope you’ll find useful the value from these lines. As a final word, I’d love to encourage you to drop your message in case you’ve got questions and always design for usability. Always for the user.
Source link https://blog.prototypr.io/designing-for-accessibility-or-why-its-so-crucial-when-engineering-the-ux-1d371d50d919?source=rss—-eb297ea1161a—4