Accessibility for Web Design

– An ecommerce purchase

This post basically talks about the accessible design from a lot of different angles using three typical scenarios:

  • Buying best friend’s gift online
  • Arrange for a lawn mowing service
  • Listen to favourite podcasts

Putting ourselves in the shoes of the person that is each completing their tasks and think this question:

Will the scenario be different if it is for those disabled people?

Designers should put themselves in a unique position to influence the final work by creating more accessible designs from the beginning of the project rather than adding it in partway through.

The use of colour

When we start to create designs, we use several tools to communicate.
One of the most obvious tools we use is color.

We use it as a design element.

Color helps us distinguish one thing from another. but it doesn’t apply to those people who are color blind.

Without the color, those people with color blind can’t tell the difference between each line in the chart.

How can it be helpful for those people with disabilities?

When there is an issue when color cannot be used as a tool, use shapes or patterns to show the difference.

When changing that, make sure it isn’t the only method to communicate the message.

let’s put it into two scenarios.

  • Ecommerce site selling T-shirts

Solution: We can solve the problem by combining the color names with the color swatches and we’ve now made this much more accessible.

  • When using the search engine of the Podcast.

Each search result from the search engine of products was classified by its color to show if the keyword was found in the podcast name, episode titles, or the content of the podcast itself.


  1. Using shapes such as Circles, squares, and triangles to denote the difference between the three types of search results.
  2. prefixing each result with colons
  3. putting an uppercase P, E, or T in the color block
  4. put it to usability testing. Getting the answers and advice directly from the users.

Also add those accessibility works as well as for those can’t see color at all, or are blind, or have low vision.

By doing this right, you’re helping a lot of people due to the large population of people with disabilities.

As a designer, we need to find multiple ways of providing the same message.

Keyboard Functionality

Accessibility computer icon

One of the most important requirements for accessibility is keyboard usage because this affects people with many different types of disabilities.

When you make things accessible to use with a keyboard, you make it work for anyone who can’t use a mouse.

Example: when viewing a map
Such as the example of a map using a keyboard to do the same operation with the people use the mouse; the operations can be like
panning to different directions like up, down, left, right; recenter the map; zoom in or out, and even have little flags which for informing about each pin on the map when click on it.

In order to provide equal functionality for all different users, we need to make sure that all of that functionality is available for somebody using a keyboard.

Make each operation matched with certain keyboards keys.

Almost every same function for a keyboard user that a mouse user has except that Google Maps cannot access to the pins by using keyboards.

One thing to keep in mind, making sure that we can do everything with the keyboard doesn’t mean that we need to be able to tab to all of the content.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s