Principles of Web Accessibility

Image result for WCAG

According to WHO, about 15% of the world’s population lives with some form of disability, of whom 2-4% experience significant difficulties in functioning. When a product is being created, the usability and accessibility for all potential users are important. However, most products are needed by not only abled people but also disabled people, that is why the accessibility should be brought to a high priority when designing the product. Especially for UX designers, the accessibility should be considered more carefully when making websites.

There are a lot of accessibility principles around the world including laws and policies of different countries. For example, the section 508 of the US, which was issued in 1973 and lately revised on January 2017, is a law applying to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508, Federal agencies must give disabled employees and members of the public access to information that is comparable to the access available to others. A lot of laws and policies related to the web reference the standards of Web Content Accessibility Guidelines (WCAG) which is published by World Wide Web Consortium (W3C) with its Web Accessibility Initiative (WAI) endorsed by The White House and W3C members.

WCAG 1.0 which was published on May 1999 is a set of guidelines for making web content more accessible to people with disabilities. The latest version WCAG 2.1 was updated on January 2018 based on WCAG 2.0 published on December 2008.

In WCAG, three levels of conformance are defined that are A (lowest), AA, and AAA (highest) in order to meet the needs of different groups of people and different situations. I am using a simple example to demonstrate these three levels. If a time-based content (video & audio) is only video and only audio, it is considered a level A (Fig. 1); if the content has a prerecorded caption, it is still a level A (Fig. 2); if the content has live/in sync caption, it can be considered a level AA (Fig. 3); if the content has prerecorded sign language along with it, it can be considered a level AAA (Fig. 4). One thing worth mentioning is that even the content that conforms at level AAA will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas.


Fig. 1

Fig. 2

Fig. 3

Fig. 4


WCAG has very detailed principles of accessibility. For UX design, these key points of WCAG below are useful for making the content on the web more accessible. I try to use examples to explain each principle.

1. Perceivable information and user interface

a. Text alternatives for non-text content

The purpose of the text alternatives is to provide an equivalent user experience for disabled people. The text can be presented in varieties of ways such as being read aloud or displayed on braille devices.
For example, an appropriate text alternative for a search button would be “search” rather than “magnifier” (Fig. 5).

Fig. 5


b. Captions and other alternatives for multimedia

The text transcripts, description, or sign language can provide an alternative to the audio content.
The caption or sign language in the video is a good example (Fig. 5).

Fig. 6


c. Create content that can be presented in different ways.

The structures in the content shouldbe marked-up properly; the sequences of information or instruction should be independent of any presentation; browsers should provide settings to customize the presentations.
The automatic reader mode on Safari of iPhone is a good example of the different ways of presentation (Fig. 7).

Fig. 7


d. Make content easier to see and hear.

Do not use color as the sole way to convey information; use sufficient color contrast; use resizable text up to 200%; make audio and video pausable and make volume adjustable.
I created a heat map as the example. People with normal eyes can easily distinguish different colors on the map. But for people with color blindness, they may see red and green as the same color (Fig. 8).

Fig. 8


2. Operable user interface and navigation

a. Make functionality available from a keyboard

All functionality available by mouse should also be available by keyboard; browsers should provide keyboard shortcut support.
For example, if users want to confirm the text they typed in, they can either click on the button on the website or push Enter on the keyboard (Fig. 9).

Fig. 9


b. Give users enough time to read and use content

Some users may need more time to read or type the text, understand instructions, operate controls or complete other tasks on the website.
It is important to provide mechanisms to adjust time limits, pause the scrolling content, postpone interruptions, re-authenticate when a session expires without losing data.
The example I use here is the slideshow on the websites. Usually, the slideshow is rolling automatically. Some users may have difficulty to finish reading the text on the slide before it changes. When hovering the image, the rolling will stop, then the users can have enough time to finish reading (Fig. 10).

Fig. 10

c. Do not use content that causes seizures

Content that flashes at certain rates or patterns can cause photosensitive reactions, including seizures. The flashing content is better avoided or only used in a way that does not cause known risks.

d. Help users navigate and find content

The clear titles and organization should be provided; there should be multiple ways to find relevant pages; users should be informed about the current location on the website; users should be able to bypass repeated content.
The breadcrumbs navigation is a good example. Users can know where they are and go to the previous pages at will (Fig. 11).

Fig. 11

3. Understandable information and user interface

a. Make text readable and understandable

There should be a primary language of a web page and consistent language of a paragraph; the unusual words should be defined; the use of language should be as simple and clear as possible.
For example, on Wikipedia, the unusual term always has a link to another page to explain the term. And Wikipedia always tries to use the simplest language to interpret things (Fig. 12).

Fig. 12

b. Make content appear and operate in predictable ways

The navigation mechanism should in the same place on multiple pages; UI components that are repeated should have same labels; there should not be significant changes on a web page without the user’s content.
On Google, the category bar is always under the search bar and above the search results. The search results are always displayed in the same layout (Fig. 13).
This is similar to the Neilson’s heuristic 2: match between system and real world and heuristic 4: consistency and standards.

Fig. 13

c. Help users avoid and correct mistakes

The descriptive instructions, error messages and suggestions for correction should be provided; context-sensitive help should be provided for more complex functionality and interaction; users should be free to correct, review or reverse the submissions.
For example, When deleting emails on Gmail, there will be a message with an undo button. When you enter the information that does not match the requirement on a registration form, the error message will appear.
This is similar to Neilson’s heuristic 3: user control and freedom, heuristic 5: error prevention and heuristic 9: help users recognize, diagnose and recover from errors (Fig. 14).

Fig. 14

4. Robust content and reliable interpretation

a. Make content compatible with current and future tools

Robust content should be compatible with different browsers, assistive technologies, and other user agents.
For example, the websites should be viewed on Chrome and Firefox. The text should be read by different assistive readers (Fig. 15).

Fig. 15


By researching WCAG, I learned the importance and principles of accessibility. The U.S is doing a great job on accessibility, but it is not enough. However, in some regions, the accessibility is a serious problem either in the physical world or online. In conclusion, we should make more effort on the promotion of WCAG and other accessibility policies.


Web Content Accessibility Guidelines (WCAG) 2.1:

Accessibility Principles – How People with Disabilities Use the Web:

Section 508:


Design Critique: Steam (Mobile App)

Steam is the largest PC gaming platform with over 125 million active users. It has a mobile app that enables players to chat with friends, view profiles, discuss in communities, verify accounts, and shop games, software or other digital products on their phones. The app is functional, but the user experience needs to be improved.

In my personal experience using the app, I found this mobile version Steam has almost all the functions of the desktop version, which is laudable. But the usability is relatively poor. With Don Norman’s The Design of Everyday things, I will apply the concepts in the book to critique the app.

1. Market

In the Market, users could sell or buy items which could be used in games online. Every time you try to sell an item in the market, whether using the PC or the phone, you have to confirm the trade in the mobile app (that might be the main reason for people to download the app). In this case, many users choose to sell items on the phone directly. In the app, the Market is a subtitle under Community that is a little hard to find. The discoverability here is not satisfying.

1) When the tabs are all closed, people will misunderstand where they are going. Regularly, we might suppose the market should be under “Shop” tab using our knowledge in mind. I recommend moving the Market to a higher level since it has a higher using frequency.

2) When choosing the item to be sold, there is a drop-down list of different item categories on the top. But another list below that is used to sort items of one category draws more visual attention. So the user would be confused (I was at the first time) about how to switch to another category. I suggest keeping the visual consistency to make the list more discoverable. The recommendation is in the picture below.

3) When finishing choosing the item, there is a prompt telling you that you should confirm the trade in the mobile app. The good constraint keeps the transaction safe. But even if you are using the mobile app, you still have to manually switch to another page to process. Also, there is no feedback on the confirmation tab. I suggest adding a small reminder as feedback on the confirmation tab, and also change the buttons on the prompt to offer users a good affordance.

2. Store

The Store page has a good mapping. The arrows show the directions that you can scroll. You can scroll down to view all the categories, and you can also scroll left and right to see the items of each category. When you access this page, the menu is hidden on the top. It shows when you slide down. The visibility here is poor. The menu has too much text with no good signifier shown. In comparison, the iPhone Appstore has a better conceptual model. My recommendation is to arrange the options of navigation horizontally fix the navigation bar position on top of the page, and add icons for subcategories.

3. Friends

In the menu, there is a “Friend” and a “You & Friends.” And there is another “Friend” under “You & Friend” which has almost the same function. The only difference is you cannot chat in the second “Friend.” The better constraint is needed to reduce the unnecessary options for users. I suggest getting rid of the “Friend” on the main menu and move its interface to “You & Friend.”

4. Error Report

When using the app, I experienced multiple types of errors. Almost all of them are because of the connection problems. These error reports have different designs shown below. The one in the middle is not an error, but it shows as an error and gives me a “Go Back” button which does not go to the page I view before. In this case, the error report itself is an error. Considering the discoverability, I would recommend the one on the right with a “try again” button which gives users a straightforward direction of what to do next.

Hope Steam could improve its UX soon!

Thank you!