Accessibility beyond 'alt' tag, 'color contrast', and semantic tags
Tags: a11y, html, webdev, css
Published: 2020-10-09 10:23:43

## 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*".**

![Unicorn Candy store](https://dev-to-uploads.s3.amazonaws.com/i/kbnso7nakeikj089knrb.png)

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? 

![Content is in Japanese and customer is confused](https://dev-to-uploads.s3.amazonaws.com/i/nmucd2ezklhoihn2e9ko.png)

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? 

![user is confused about date format](https://dev-to-uploads.s3.amazonaws.com/i/g5gkndnd258bzb0d0g8j.png)

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](https://dev.to/thinkverse) 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

![user is confused about timezone](https://dev-to-uploads.s3.amazonaws.com/i/356bt33apw2ffx1m9ncv.png)

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.

![User is confuse about currency](https://dev-to-uploads.s3.amazonaws.com/i/i9vtwdq5g4rlismxnd5s.png)

**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]![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ouyo82x7go7xdwacvrhc.png)

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. 

![UI is breaking because of the content](https://dev-to-uploads.s3.amazonaws.com/i/ofy3pc6hva8ven0d0znp.png)

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?

![UAE based content](https://dev-to-uploads.s3.amazonaws.com/i/ngdltc9gajvz7etzhnah.png)

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] (https://twitter.com/poonmjha). Feel free to reach her to show your love and support.