Usability and Accessibility: Inclusive Design to Create an Accessible Design

Accessibility is one of the most fundamental elements in User Experience, and it is proven to develop a curated experience for broader user segments, especially users with disabilities.

So what is inclusive design and accessibility?
The inclusive design itself is a design methodology that enables and draws on the full range of human diversity. As we apply this design methodology, we would be able to provide accessibility to the interface, which is an attribute that makes an experience open to all for a wider range of users.

Why should we apply inclusive design to achieve accessibility?
Accessible design is not entirely intended for people with disabilities; instead, it extends to anyone with temporary and situational disadvantages. It can be someone who has just injured his/her arm, a mother holding her baby in one arm, or even a vlogger doing a makeup tutorial. To shed some light, inclusive design is not universal design. We are not creating one model that fits for all types of people in the world. Instead, we are creating design alternatives where other people with different ability can experience without feeling excluded.

However, this does not always happen in the world we are living in today. Firstly, It is mainly because “designing for disability is not cost effective” (Glinert and York, 2008). Secondly, most interfaces have and always been designed by and for people who are not disabled. Designing for accessibility can be effortless and cost-effective as long designers and coders understand standard guidelines for accessibility.

In looking at that, I would like to introduce a standard guideline created by W3C called WCAG (Web Content Accessibility Guidelines).
According to WCAG, there are 4 principles for a website to be accessible which are perceivable, operable, understandable and robust. I will list a few of the guidelines that are quite easy to be applied, especially by UX designers.

1. Provide Text Alternatives for Non-text Contents
People with blindness and low vision impairment often make use of screen readers. Therefore, designers should consider putting label and captions on non-text contents like images and videos. This will not only help people with vision disabilities but also users who have low internet speed that prohibit them from loading an image. Although there are upcoming programs like Google’s Conceptual Captions that help to describe non-text contents automatically, designers still have to anticipate this issue and provide label and caption manually.

2. Color Contrast
Although the high-contrast protocol is made for people with vision impairments, it does benefit other users with different situation and scenario, e.g., for people to see the screen in bright sunlight. Based on the World Health Organization, around 217 million people have moderate to severe impairment; therefore, people who suffer vision impairment find it difficult to read text from a low-contrast background. It is essential for designers to understand the importance of color and contrast in designing an interface. According to WCAG and official government websites in the U.S.A, the standard contrast ratio between text and its background has to be at least 4.5 to 1. In looking at this, designers can instantly check contrast ratios using platforms like WebAim and

3. Pattern and Label
Pattern and label are used to emphasize critical contents when color differentiation is not sufficient. It is common that today’s modern website often just use a different color to signify hypertexts and buttons and people with color blindness find it hard to understand this. Firstly, Designers can consider using underlined text style for hypertexts. Secondly, graphs and charts should be distinguished with different pattern, shapes, labels, and icons to give clarity to users.

4. Keyboard Navigation
People with blindness often use a screen reader and keyboard navigation to go through a website. It is vital for UX designers to provide keyboard navigation and understand the importance of it. Keyboard navigation can also be useful for someone with a situational limitation like someone who just injured his arm or a mother holding her baby in one arm. In this scenario, users usually use the Tab button to navigate through interactive elements on a website like links and buttons. It is a designer’s job to make sure that the content of the site should be logical and follow the standard convention. The navigation system should start from left to right, top to bottom. The layout of the website should start with the header, navigation, content, input, and footer.

Designing for people is not an easy task, and when it comes to people, there is no such thing as “normal.” Therefore, I hope these few simple and easy-to-apply guidelines from WCAG and brief understanding about inclusive design will be able to help future designers and coders to view these as a collective responsibility to their design for them to create an accessible and understandable website for a wide range of users.


Glinert, E. P. & York, B. W. Computers and People with Disabilities. ACM Transactions on Accessible Computing, 1(2). doi:

Shum, A., Holmes, K., Woolery, K., Price, M., Kim, D., Dvorkina, E., Muller D. D., Kile, N., Morris, S., Chou, J., Malekzadeh, S. (2016). Inclusive Microsoft Design.

Stanley, P. (2018, June 27). Designing for accessibility is not that hard [Blog Post]. Retrieved from


Design Critique – Imessage (Apple)


In this design critique assignment, I will apply concepts discussed by Don Norman in The Design of Everyday Things to evaluate 4 attributes of iMessage, an instant messaging service platform designed by Apple in 2011, which allows a user to send message, attachment, contact information and money transaction. In general, the application itself has a simple and understandable interface in terms of basic task like sending a message, media, and etc. Below are 4 critiques that I would like to emphasize:

1.Hypertext on incoming message (Positive Experience)


Firstly, I want to discuss the new iMessage feature on Apple’s IOS 8 which converts specific incoming messages into hypertext. Incoming texts like names of a landmark, restaurant, time, artist and etc. are seamlessly converted into clickable hypertext that connects user to other Apple application like Siri, Apple Maps, Calendar and etc. In my opinion, this feature has:

  • Great feedback by giving underlined dots under the text that creates discoverability for users to know that it is a clickable hypertext.
  • This feature provides knowledge in the world because it reminds users to set upcoming events in the calendar as a reminder.
  • Since this feature is quite new, it has an obstacle which disables hypertext feature with venues that aren’t well-known and time will also not be converted into hypertext if it isn’t supported with a specific hour (if the user types tomorrow instead of tomorrow at 8 pm, tomorrow won’t be converted as hypertext). This is one of the examples of logical constraint discussed by Don Norman.


2.Imessage ID (Negative Experience)


Secondly, Imessage ID can be based either on user’s phone number or Apple ID or both. This might look very convenient at first, but for someone who travels frequently, this is one of the worst iMessage UX flaws.

  • The cultural constraint in the U.S encouraged users to use iMessage as their primary social networking service since the majority of people in the U.S. are using iMessage. Also, the majority of people would exchange contacts through phone number instead of Apple ID/email.
  • Continuing the evaluation above, when users travel abroad, they usually change their SIM card and hence disabling users to receive messages that are sent to their U.S. number. This happened because iMessage separates messages that are sent to user’s email and phone number, although user set both email and phone number as his/her iMessage ID.
  • It has bad signifiers because users have to go to settings which located apart from the application to configure all the ID settings.

I believe that if Imessage could synchronize messages that are sent to both user’s phone number and email, it will create a better experience for the users.


3.Sending Attachments (Negative Experience)

Thirdly, sending attachments in Imessage takes longer time because the default setting of the app was set to its highest resolution.

  • It has bad discoverability for users because have to go to settings to set “low-quality image mode” to send media faster with lower resolutions.
  • Unlike Imessage, Whatsapp has better signifier, it offers user different resolutions when sending attachments.
  • Imessage prioritizes message/media that is sent prior. In other words, messages that are sent after, will not be delivered unless the media is successfully uploaded.


4.Time notification (Negative Experience)

Last but not least, time of messages being sent and received is not visible unless user swiped right to left, from the right side of the screen.

  • Imessage has bad discoverability because the timestamp is not visible, unlike Whatsapp and Line.
  • However, iMessage provides a decent mapping element (third-based mapping), because once the user is confused, he/she will notice that the only way to show the time is to swipe the screen, right to left. (Swiping right to left is a familiar method to go back to the previous page for regular Apple users).
  • According to Don Norman, novices are more likely to make mistakes than slips, whereas experts (regular Apple users) are more likely to make slips than mistakes. In this case, a few people that I observed, admit that they subconsciously swiped the opposite way to check the timestamp which caused them to exit the chat room instead.
  • It is not an effective conceptual model because the designer of the interface assumes that the majority of users would understand based on their mental model.

In my opinion, Imessage should minimize task to be done by putting time underneath every messages that are sent and received.



I would also like to finish this design critique by recommending an incremental idea for iMessage. I called it “reminder auto-send message”, the feature reminds users to send a message at a specific time chosen by the users. Not only it helps people to deal with their memory-based slip and interruption, this feature also supports feedforward theory by combining both knowledge in the world and knowledge in the head in order to complete a task.

Picture reference :