The Dark Web is a group of encrypted networks hidden on the internet. It is hard to find the origin of the content in these networks as they can only be accessed with special software and configurations. The Dark Web can be used for criminal activities, but it also allows journalists and activists in certain countries to share sensitive information without exposing their identities. However, this blog is not about the Dark Web that enables users to hide their identities; the following posts will examine another hidden internet: the web for the vision impaired.
The World Health Organization (WHO, 2010) estimates that 285 million people are visually impaired, being 39 million blind and 246 million have low vision (Table 1). Vision impairment is the partial loss (from 40 to 60%) or total loss of vision. People with myopia, astigmatism or hypermetropy, are not considered visually impaired.
According to the World Report on Disability (WHO & Vision 2020, 2010), one person becomes blind every five seconds in the world, and 314 million people live with visual impairment worldwide. Of these, 90% live in low-income countries. It is estimated that until 2020, the number of people with visual impairments will double.
Despite the vision impairment, a large number of blind users use smartphones and consume information from the internet. A study in the UK about internet usage (Office for National Statistics, 2018) showed that 98% of all disabled people in the age of 16 to 24 (including the visually impaired) used the internet in the last three months. There are very few reliable current statistics on the use of computers and the internet by the visually impaired. Despite the lack of concern (or even knowledge) about accessibility for the visually impaired from UI and UX professionals, these users still consume digital content and use social networks like WhatsApp, Snapchat and Facebook.
References
Office For National Statistics. Internet users, UK: 2018 (2018). Office For National Statistics. Retrieved from https://www.ons.gov.uk/businessindustryandtrade/itandinternetindustry/bulletins/internetusers/2018#recent-internet-use-by-disabled-adults-increases-across-all-ages
World Health Organization. Global Data On Visual Impairments (2010). World Health Organization. Retrieved from http://www.who.int/blindness/GLOBALDATAFINALforweb.pdf
World Health Organization. World report on disability (2010). World Health Organization. Retrieved from https://www.who.int/disabilities/world_report/2011/report/en/
Accessibility
Accessibility is still viewed as a design made for the minorities. There are different examples of innovations that inverted that scale and reached mainstream status: Apple Siri, Google Home, Amazon Alexa, and the Taptic Engine, which is Apple’s user interface feedback. These are innovations that improve accessibility to a very broad range of users not only the minorities.
Luke Wroblewski (2011) in his book Mobile First explains that designers working with a smaller real estate have to make an effort to be more succinct and to focus on what is important for the end-user, therefore creating a better user experience. Other concepts like KISS (keep it simple, stupid) or Don Norman’s coined term “user experience” are also focused on creating a better experience for the benefit of all users, including the dyslexic, the visually impaired and users with cognitive difficulties.
Gibson (2015) suggests that it is not about “people with disabilities”. It is not about “deaf or visually impaired people”. It is not about “people with cognitive disabilities”. It is about people. People who are using the web.
To tackle the issues that disabled users face on the internet, a set of accessibility guidelines were established under the Web Content Accessibility Guidelines (WCAG) by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). The WCAG presents a series of recommendations to make the content accessible to the users, especially targeting the disabled users. The guidelines are presented within four different principles: Perceivable (information needs to be presented in a perceivable way), Operable (the user interface and the navigation need to be operable), Understandable (the information and the operation need to be understandable by the user) and Robust (the content needs to be robust in order to be interpreted by user agents, including assistive technologies). For each guideline, testable success criteria are provided. There are three levels of conformance for each guideline: A (the minimum level), AA and AAA (the highest level). The WCAG also covers techniques for each guideline and success criteria.
Blind users and technology
While researching, many questions came to mind: how do they navigate in airports? How do they use the ATM? How do they cook (Video 1)? Understanding their behaviour certainly helps UI and UX professionals to create a more accessible web.
Video 1. Masterchef USA winner Christine Ha shows how the blind cook.
Apple introduced back in 2009 a feature in iOS called VoiceOver. When activated, the phone speaks out everything the user’s finger touch on the screen (Video 2). To open an app the user needs to double tap instead of the usual single tap. To navigate between screens, the user swipes the screen with three fingers. Also in 2009, Android introduced the TalkBack, which was initially designed to read the whole screen without requiring the user’s input; the ability to read the item where the user is touching was introduced on a later version.
Video 2. Tommy Edison demonstrates how blind people use the iPhone.
To type, the user can dictate to the phone or they can type using the on-screen keyboard: the phone enunciates the letter that the user is touching; touching it twice types that letter. Some users also rely on external bluetooth keyboards. Options like on-screen magnifier, large text option, and high-contrast viewing mode are also available on iOS and Android to assist people with low vision.
The VoiceOver and the TalkBack rely on the information that is attached in the layout by the developers. In order to work properly, TalkBack and VoiceOver need image buttons or buttons with icons (Figure 2) to have a label attribute attached to them. Image or icon buttons that have no label attributes are simply mentioned as ‘Unlabelled Button’ to the blind user. There are also cases where the buttons are labelled incorrectly so the screen readers will speak-out an incorrect information.
Food Delivery
An assumption made for this project was that visually impaired users use food delivery apps. One of the leading food delivery apps in Ireland and the UK, is called Deliveroo. Customers of Deliveroo browse between different restaurants, choose their food and pay via their app. The food selected is delivered by a courier to the customer’s location.
Deliveroo has no claim on having accessibility features within the app. This absence of experience for a broader user spectrum can potentially mean overlooking a revenue stream. Because of the difficulty of access to users with vision impairment of a specific product, the user research was limited. The focus of the user research was to gather information about what are the best design languages and systems to inform the design decisions at a later stage.
References
Gibson, A. (February 2015) Reframing Accessibility for the Web. A List Apart
Retrieved from https://alistapart.com/article/reframing-accessibility-for-the-web
W3C (December 2008 and June 2018) Web Content Accessibility Guidelines (WCAG) Overview. W3. Retrieved from https://www.w3.org/WAI/standards-guidelines/wcag/
Wikipedia. (n.d.) Web Content Accessibility Guidelines. Wikipedia. Retrieved from https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
Wroblewski, L. (2011) Mobile First. A Book Apart.
Heuristic Evaluation
A Heuristic Evaluation was performed to analyse how Deliveroo complies with recognised usability principles (Table 1). According to Preece (2002), this method is used mainly to find probable usability issues in the user interface by gathering constructive critiques from professionals. The violated heuristics were listed and given a severity rating (Table 2) on a scale proposed by Nielsen (1995). The findings are further discussed in Table 3 and some examples of the issues with accessibility compliance are compiled in Figure 1.
| List of heuristics | |
|---|---|
| 1 | Visibility of system status |
| 2 | Match between system and the real world |
| 3 | User control and freedom |
| 4 | Consistency and standards |
| 5 | Error prevention |
| 6 | Recognition rather than recall |
| 7 | Flexibility and efficiency of use |
| 8 | Aesthetic and minimalist design |
| 9 | Help users recognize, diagnose, and recover from errors |
| 10 | Help and documentation |
Table 1. Heuristics list.
| Severity Ratings for Usability Problems | |
|---|---|
| 0 | I don't agree that this is a usability problem at all |
| 1 | Cosmetic problem only: need not be fixed unless extra time is available on project |
| 2 | Minor usability problem: fixing this should be given low priority |
| 3 | Major usability problem: important to fix, so should be given high priority |
| 4 | Usability catastrophe: imperative to fix this before product can be released |
Table 2. Severity ratings.
| Issue | Heuristic Violated | Severity |
|---|---|---|
| Fonts are small to read. | 1 | 2 |
| Use of grey fonts in white background | 1 | 2 |
| Cards displayed on the page are too large, forcing vision impaired users to scroll frequently. | 8 | 2 |
| Back buttons and filter buttons are unlabelled. TalkBack does not recognise action. | 3 | 4 |
| Images have no alternative text. | 9 | 3 |
| Navigation disappears in secondary screens and the user is unable to navigate back with unlabelled buttons. | 4 | 2 |
| Labels on buttons have incorrect information. (Back button says Order button) | 5 | 4 |
| Input labels are unattached to input. Visually impaired users do not know what information is required. | 5 | 2 |
| FAQ and Help buttons are only available in some screens. | 10 | 2 |
| Filters use emoticons to filter making them inaccessible for visually impaired users. | 2 | 3 |
| Menu list does not display a number of items available. | 7 | 1 |
| Menu list does not mention to the users that a scrollable list is available. | 3 | 3 |
| Navigation menu does not mention how many items are available. | 3 | 2 |
| There are no accessibility options available. | 3 | 3 |
Table 3. Violated heuristics and severity ratings.
Figure 1. Compilation of accessibility compliance violated.
To filter restaurants in Deliveroo, the user needs to use different methods (Figure 2) to scan the screen and select the filters to be applied. Buzzi et al. (2015) point out that vision-impaired users rate gestures with multiple fingers, strokes or greater length as more difficult. In their group study, although 26 participants mentioned that they had a prior experience with touchscreen devices, only half were familiar with the most popular gestures: swipe left and swipe up.
References
Buzzi, M., Leporini, B. & Trujillo, A. (2015). Exploring Visually Impaired People’s Gesture Preferences for Smartphones. CHItaly 2015 Proceedings of the 11th Biannual Conference on Italian SIGCHI Chapter. Rome, Italy: ACM. Retrieved from https://www.iit.cnr.it/sites/default/files/CHItaly2015_23_Researchgate.pdf
Nielsen, J. (1995). Severity Ratings for Usability Problems. Nielsen Norman Group. Retrieved from https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/.
Preece, J. (2002).Interaction design: beyond human-computer interaction. New York: Wiley.
What is the problem?
In order to understand what issues blind users face when using different apps or websites, three different blind smartphone users were sourced to gather further information. A semi-structured interview (Annex 1) was designed to gather initial information about the main problems they encounter using different apps, and also to collect information about the apps and design languages that are best suited for them. Before the semi-structured interview, the users were informed about the project and the goals of the interview. They were later asked to agree with the release of the information. For this project, we will share their information under fictitious names: Annie, Mark and Tom.
Annie has been blind for the last four years. She dropped the use of smartphones for a year after becoming blind, but through friends and family, she learned about the accessibility functions. Since then she has been using the TalkBack functionality available in Android devices. As her expertise increased, she started dropping the feature to send audio messages and started typing to communicate with her friends on different social media.
Annie does not use Deliveroo or any food delivery service. She uses Facebook, Instagram, and Whatsapp to communicate with friends and to update status about her band. One of the features from Facebook that helps her to be included in conversations is the Automatic Alternative Text where when hovering the finger over an image, the software describes the image (Video 1). Another app that is part of her daily life is Eye-D (Video 2), this app describes the value of the money she is holding in front of the camera. Annie mentions that when shopping online, the lack of descriptions about the items is by far the most significant obstacle for her.
Video 1. Facebook Automatic Alternative Text in use by blind users.
Video 2. Eye-D application in use.
The button is unlabbeled. Does it go ahead or go back? I don’t know.
– Annie
Another app that Annie uses is Uber. Uber is a location-based app that allows the user to hire an on-demand private driver. Annie is fully independent with Uber, meaning she does not need any assistance from a third-party. For Annie, consistency is important, user interfaces that are out of the norm require more time to learn.
Mark, the second user interviewed for this project, is a blind PHP and Javascript developer. Mark also uses Android with the TalkBack functionality to aid him on his daily tasks. Mark uses mainly communication and social networking apps (Facebook, Whatsapp, Skype, and Gmail). Mark believes that they have good accessibility.
Some versions ago, Whatsapp buttons had no labels and the vision impaired had to memorise where the buttons were located to be able to click on them.
– Mark
To navigate Mark uses Google Maps and GetThere (Figure 1), an app developed specifically for visually impaired users. He also uses Uber when he needs to go to different locations.
Figure 1. Screenshots of Google Maps and GetThere.
Mark mentions that the CAPTCHA (Figure 2), a security feature that blocks bots from accessing services, is terrible for visually impaired users. He says the audio is often unclear, and some noise is added to obscure the letters and numbers from bots. Mark states that when facing unlabelled buttons in e-commerce sites, he does not feel secure enough to go ahead and proceed with the checkout process.
At home, Mark prefers to use the voice feature when searching, but in public spaces, he prefers to use the keyboard. Mark does not use Deliveroo but uses Uber Eats, and he finds it easy to choose and order food. When setting up Uber, he needed assistance from someone to tell him the card details, even though the card numbers are often embossed or raised, not all visually impaired users are familiar with the Arabic numerals. Mark suggests that a great app regarding accessibility is Gmail, the consistency of elements make it easier for him to operate in comparison to other email applications.
The third user is Tom, he uses the iPhone with the already embarked screen reader, the VoiceOver. To help him type, he uses a physical Bluetooth keyboard. Whenever available, Tom prefers to use the voice commands instead of using the keyboard. For Tom, the biggest usability issues are the unlabelled buttons, the use of icons instead of text in buttons, and images without any description behind them. Tom states that apps using Apple’s graphical library helps to create apps that are familiar to visually impaired users.
I don’t need to scan the screen when the app follows the classical structure of iOS apps.
– Tom
Tom uses Whatsapp, Spotify, Youtube, Netflix and Dropbox. He states that there is a lot of effort behind of the developers to make these apps accessible. Apart from these, Tom also uses BeMyEyes and ColorID (Figure 4) for visual guidance.
Figure 4. ColorID and BeMyEyes.
At the first use of Uber, Tom set up the application himself. He memorised the card number in order to use it in different applications and online shops.
Problem Statement
According to Brown (2016), teams that have a well-built problem statement can align efforts towards solving a problem, define the goal of the solution being designed and make the team care about solving that problem and consequently achieve the goal (Figure 1). For a problem statement to work, it needs to be recognised by the whole team as a focal point thus aligning the stakeholders towards the same direction.
As discussed previously, visually impaired users demonstrated that attention to labelling elements and creating a navigation structure that is somewhat familiar to them is very important. To solve the issues detected, the problem statement for this project became:
“Visually impaired users that use food delivery apps for practicality and independence but face an inconsistent and inaccessible interface that discourage its usage.”
References
Brown, D. (2016, November 11). How to Build a Problem Statement. Medium. Retrieved from https://medium.com/eightshapes-llc/how-to-build-a-problem-statement-d1f21713720b