Learn for Access

Description

Lack of understanding and clear guidelines are the main reason for developers to make inaccessible or user unfriendly web environments. The project is to analyze online education methods to design a tutorial platform for developers to create an accessible environment for vision impaired community. This is my graduate thesis project, I choose accessibility design for vision impaired community as my topic, starting from field research and interview, defining the problem, analyzing the possible cause and developing the solution. The final product is an online educational platform that teaches programmers to do accessible web design when programming.

Needfinding

The research starts on topic related to "vision impairment accessibility". During the interview with low vision people and social workers, I discovered that one of the most important thing for this community is to help them establish a sense of confidence through doing things independently. Nowadays a lot of the daily work could be complete by Internet. So it is important to have an accessible web environment for the low vision people.

However, the current Internet environment is quite inaccessible because 

For Companies:

  • Worry about increasing time and budget
  • Didn't take action until get sued

For developers:

  • Unfamiliar with the concept “web accessibility” 
  • Cannot find a place to systematically learn how to do it 

Based on the research, I set the goal of this project to be a study of online education about web accessibility design. Click here to learn more about my preliminary background research.

Comparative and Competitive Analysis

I create a comparative and competitive analysis focusing on four current accessibility education websites. The quality of each feature is scored from 0 to 5.  

Usability Testing

In order to better understanding the efficiency of these four websites, I create a usability testing using 2 scenarios. People attend this test are:

  1. Developer, 4 years working experience with front-end developing

  2. Software engineer, working on back-end developing now, learned and did front-end developing in college

  3. Undergraduate Student, just start to learn html coding

  4. Developer, Self-taught front-end developing by making project, searching for random guideline for specific question online

I document the time each user took to finish their task under each scenario, and observe their behavior 

 

Scenario 1:

 

“Imagine in the real world, you are trying to make an accessible button. This website is the only source you can use, find the place to learn how to make it”

 

According to the table, TeachAccess takes the least time to navigate, while W3C guidelines takes the most.

Observation:

  • Most of the users eventually give up on W3C after trying all possible searching methods because of the difficulty extracting the information in their pool.
  • people seems to rely more on searching the keyword “button” even if there is a clear side navigation bar.
  • But, if the side navigation is clear and short, like in TeachAccess, user feel comfortable to navigate without the keyword searching functions.

 

Scenario 2:

 

“Imagine in the real world, you are trying to make this feature (below). This website is the only source you can use, find the place to learn how to make it”

 
 
sample.png
 

Because the task has been presented as a picture instead of an instruction with keywords, people spend extra time searching for the correct representation of the pictures in each website. Especially for user 3 who has less experience of html coding and user 4 who has no systematic front-end developing education experience.

Observation:

  • After failing to find the information he need by looking at the categories like he did for task 1, user 4 turned to search the keyword “input” on WebAIM
  • User 3 gave up on WebAIM because he lost the keyword due to the font small and close font
  • Most users spend much longer time to find the answer in TeachAccess this time for there is no search area
  • User 1 and 2 admit they find the place because they notice in the previous website, the solution is related to label.

Most users believe they would choose 18f guideline or TeachAccess in future if they need reference guideline for web accessibility. Reasons include the clean layout of webpage, effective examples to explain solutions, easiness of navigation. 

 

Conclusion

Based on the research and user testing feedback, an efficient accessibility education platform should be:

Proper Length

Ideally, the length of each section would allow users to complete in it 5 to 8 minutes

Interactive

A quiz, a hands-on coding task, or any other form of interaction practice would be useful for users to keep track of what they have their learned.

Empathy Generating

An efficient accessibility education should evoke emotional empathy with the disable community, educate developers about the lived experiences of them. 

Accessible

Many people who worked in the accessibility field have some certain degrees of physical challenge. An education platform about accessibility should be equal access for all people

 

Solution

The project is a tutorial website that contains instruction, sample code and images, and interactive feedback developed using HTML5, CSS and Javascript. The website contains information talking about the general importance of web accessibility, links for external testing tools and instruction for accessibility web design including: heading, images, forms, tables, list, text, color and multimedia.

The topics are choosen from the most frequent topics mentioned by guidelines we have looked before, including W3C guidelines, WebAIM, 18f guideline, TeachAccess, Google accessibility guideline and Lynda.com. Instead of making a comprehensive site with all possible accessibility related topic, we decide to focus on creating an effective learning experience. 

Click the button below to play with the final product

 

Important features:

Navigation Indicator

Navigation.gif

A focus indicator is presented in the navigation bar. This would point out which section user is looking at. Unlike the traditional navigation bar which only changes the background and text color, this indicator has two colored bars before and after the section block, the text is also indented.

This design is user friendly to people with low color contrast. When users with low color contrast looking at this page, they could easily find their current location by the appearance of bars and the asymmetry alignment. 

 

Interactive voice response

Inspired by W3School html/css tutorial, this website contains an interactive coding section that user could type in their own code and see the result. In this project, not only users could see the result virtually, they could also hear how the screen reader would respond to the code they typed. This would enhance their impression and understanding about the change they make before and after adding accessibility features in their code.

 

Font and Color

The website is using "Helvetica, Arial, sans-serif", This is a commonly using font that could be easily read and recognized by both eyes and screen readers. For simplicity of design and recognition, the website is designed to be white background with black text

The button was designed in green with Hex Color code #69c773 with white text. However, this combination failed on WebAIM color contract checker in both WCAG AA and WCAG AAA stardard. This indicate the button might not be user friendly to user with low color contract. Therefore, we change the text to dark gray with Hex Color code #1e1e1e. 

 

Quiz

quiz.gif

After reading and interact with the learn module, users would see a quiz section with one to two question related to the information they just learned. Instead of a pop-out window, in the final project, answers and explanation will automatically display after user’s selection. The quizzes are optional so users could decide to finish it if they want to spend time learning. They could also skip it if they are only landing this page for answers about a specific goal. 

If you would like to know more about this project, click here to read my whole thesis paper.