Is accessibility limited to have correct alt tags, color contrast as per the WCAG, or using semantic tags?
This question we should ask ourselves when developing web applications. I keep asking myself as an Accessibility enthusiasts.
The short answer:
No, accessibility is not just limited to the alt tags, semantic tags, or color contrast, etc.
Today we will learn what all things we (web developers & designers) should take care of accessibility beyond the alt tags, color contrast, semantic tags.
For this blog, let's take an example of our fictional e-commerce store of delicious candies - "Unicorn Candy Store".
The best part of our Unicorn Candy Store is we have customers across the world (this we learned recently by looking at our analytics). This gave us an opportunity to start the worldwide shipping.
Below are the learnings and challenges we faced in terms of accessibility:
1) Languages
Unfortunately, we didn't have any language translator. Hence we couldn't get the content translation done. We started losing business in non-English speaking countries. In analysing, we got to know that folks from non-English countries were accessing our store and the content was non-accessible for them.
Do you know that the web browsers themselves try to translate the content based on the geography it is accessed from?
All we need to add is lang="JA". We can change the lang attribute based on the country users are accessing.
Takeaway: If you are launching a global web application. Make sure that the content is not limited to English only and to provide the lang attribute.
2) Dates
One of our customers placed the candy order and they got the email:
Unicorns are working on your order and it will be delivered to you on 10/11/2020.
Now, is it DD/MM/YYYY or MM/DD/YYYY format?
If you will talk to folks from the USA they will read it MM/DD/YYYY, while those from India they will read DD/MM/YYY. From here the confusion and bad review of our Unicorn Candy Store will start.
Do prefer dates as 6th Sep 2020. It is clear, easy to read and understand.
(Thanks to Kim for this wonderful suggestion)
Takeaway: Do not leave the guess-the-date game on the users. Take the date formats very seriously. The date formats differ from country to country. Always remember to change the dates from where the site is visiting.
3) Time
We at Unicorn candy store maintains the order history. Now, one of our customer accessing the order history:
You ordered pineapple candies at 23:05:00
This will again create confusion and chaos. Imagine the conversation between the customer and Unicorn candy store customer care representative. If the customer is looking at the format of the timezone based on their geography whereas the Unicorn candy store customer care is referring to the time zone based on the store's geography.
Just like language, the time is also based on geography or provides the standard format getting followed. A message like "All time formats are in IST Timezone will suffice.
Takeaway: If you have time in your application make sure that you are using the right timezone or give a link to check the timezone.
4) Currency
Even after fixing the language of non-English countries. Yet, we saw that there were huge drops from the cart. On analysing, we learned that the issue was related to currency.
Our 'Unicorn Candy Store' all prices were in INR. Due to this, customers from out of India are not able to understand the price.
Takeaway: Just like time, the currency should be as per the country from where it is getting accessed or provide the currency convertor (if possible).
5) Numbers
While fixing the currency issue, we learned that the number's format also differs from country to country.
This is again very important. The reason is every person is used to of reading the number in a particular format and if the format is not been followed it would get harder to read.
People from India can relate to 1,00,000 but it would get harder to read for the folks from the USA.
![User is confused about number format]
Eg: In our store, we have numbers (telephone or purchase) by default in Indian format. Just like dates, times, languages we are converting the numbers as per the geography.
Takeaway: Just like the rest of the areas - dates, time .etc, identify the format of numbers and use that on your website.
6) UI
After introducing the different languages we got new issues. Our UI was breaking in some geographies.
During analysing, we found the reason was our developers used fixed height and width of the elements(such as buttons, navigation) based on the primary language we worked on "English".
We fixed this issue by assuring that:
1) Our elements don't have any fixed height and width.
2) We did testing with every languages.
Takeaway: Avoid making fixed height and width of the elements as well as do not assume English is the only language for designing & development.
7) Right to Left
Our candy store became a world sensation and it is getting the traffic from UAE but the users are just dropping. Why?
Well, because we haven't thought about the right to left languages at all. This is very much related to the point no 1. Not just content but multimedia content along with images should be replaced to the right to left.
8) Responsive
Our candy-store is available across the world. There are many users who are visiting our store from the mobile or tabs. We should ensure that our store is supporting different screen sizes. Rather than showing them a broken web application and telling them:
we are only supporting desktop version 1080 x 700 resolution and chrome browser only.
So, today we saw that there is a world beyond alt tags, color-contrast, and Lighthouse score for accessibility.
Happy learning!!
PS: All graphics are designed by awesome Poonam Jha. Feel free to reach her to show your love and support.
Top comments (22)
With dates I prefer human readable dates whenever possible.
MM/DD/YYYY
and,DD/MM/YYYY
always catch me off guard.Jan 1st 2020
or,1st of January, 2020
is much easier to read.True very true. Good point. I will add this to the article.
I worked on a project where accessibility was a huge requirement. The client was a.lead sponsor of Para Olympic. I have seen real users testing the site. We as able people assume a lot of things when thinking about a site but anybody would be amazed to see them use web and assisted technology. They are so smart and quick in using these tools and shortcuts. But seeing them use the website first hand gives a lot of insights. No amount of reading can give that experience that actually seeing them use. I find myself lucky in that sense.
100% true. The real accessibility test is when real users use it. There is no repalcement of that. Would love to know more about your experience.
Love the broader interpretation of “accessible” here! I think the development community has a specific, technical definition for accessibility that limits the scope to how software interfaces with assistive technology like voice control and screen readers. That constrained definition makes it easier to know what we’re solving for when we talk about it. These are great tips for doing internationalization (i18n), localization (l13n), and responsive design well!
Nicely explained about the different aspects of accessibility. Also, aptly put graphics justifies the subject, as one hardly needs to read the words, since visually communicating graphics through more "real" objects make it faster and simpler to understand. Kudos 👏👏
I'd like to add that, when you don't understand things like this, you get the most baffling development requests, like "can you add a slider so that users can change the size of the user interface text without affecting the input size?" because your translation team didn't bother to tell you that the German labels are much longer...
Nice article.. Learned new things. Thanks for sharing.
Thank you Tapas.
You're talking about the right to left writing from Western languages, compared with the left to right writing from Semitic languages like Arab or Hebrew, they are both horizontal.
But In some cases, Asian languages like Chinese or Japanese can use a vertical writing.
Here I put some links to the MDN Web Docs related to that :
Thank you for sharing this. I will add this to my blog.
this is really insightful! definitely bookmarking this to have for reference. thanks for sharing! ☺️
Nice article! I liked how you used a fictional store to map each point to real world examples. Thanks for sharing 👏
Thank you so much <3
Really well done article. I hadn't considered problems with date and time formats.
I don't mean to nitpick, but the alt text on the image in the "Numbers" section is 'Alt Text' :-).
Hey Jim - thank you for pointing this out. I will correct it :)
I only noticed it because I happened to read your post first using a text-only web browser before using a graphical web browser ;).