DEV Community

Neha Sharma
Neha Sharma

Posted on • Updated on

Accessibility beyond 'alt' tag, 'color contrast', and semantic tags

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

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

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

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

user is confused about timezone

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

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

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

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

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.

Oldest comments (23)

Collapse
 
jackdomleo7 profile image
Jack Domleo

This is fantastic! I agree with every point!! 💪

Collapse
 
patriscus profile image
Patrick Ahmetovic

Nice article! I liked how you used a fictional store to map each point to real world examples. Thanks for sharing 👏

Collapse
 
hellonehha profile image
Neha Sharma

Thank you so much <3

Collapse
 
prahladmishra profile image
Prahlad Mishra

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.

Collapse
 
hellonehha profile image
Neha Sharma

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.

Collapse
 
atapas profile image
Tapas Adhikary

Nice article.. Learned new things. Thanks for sharing.

Collapse
 
hellonehha profile image
Neha Sharma

Thank you Tapas.

Collapse
 
shaerins profile image
Sharon Rachel Levin

this is really insightful! definitely bookmarking this to have for reference. thanks for sharing! ☺️

Collapse
 
thinkverse profile image
Kim Hallberg

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.

Collapse
 
hellonehha profile image
Neha Sharma

True very true. Good point. I will add this to the article.

Collapse
 
preritvishal profile image
preritvishal

I too, am, terribly a BCA student and quite bad in HTML, CSS and have literally no idea about JS.
Suggest me a place or site to start with, cause w3school didn't worked for me, much.

Collapse
 
mehmetcanaygun profile image
Can

Really nice article! Show us that there are more to consider than we usually do when it comes to accessibility.

Collapse
 
atuljha91 profile image
Atul Jha

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 👏👏

Collapse
 
devdufutur profile image
Rudy Nappée

Great article about internationalization, not accessibility !

Collapse
 
littleninja profile image
Sarah (she/her)

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!

Collapse
 
douglasfugazi profile image
Douglas Fugazi

Thanks

Collapse
 
mellen profile image
Matt Ellen

Fab article! Thanks so much for writing it. I'm really curious to know what countries use MM:HH:SS format for time! That fact blew my mind 🤯

Collapse
 
jimgregory profile image
Jim Gregory

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' :-).

Collapse
 
hellonehha profile image
Neha Sharma

Hey Jim - thank you for pointing this out. I will correct it :)

Collapse
 
jimgregory profile image
Jim Gregory

I only noticed it because I happened to read your post first using a text-only web browser before using a graphical web browser ;).

Collapse
 
jcolag profile image
John Colagioia (he/him)

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...