HCI for People with Disabilities

Introduction

Kalyan Vejalla
11 min readMar 10, 2020

Designing a product is very complex. It’s not as easy as asking ourselves, or even people in our immediate surroundings what kinds of designs we want to see in our product. A good design is one which is easy to use by everyone, regardless of their backgrounds, experience, and disabilities. When HCI designers think of ways of how a user can interact with the device they are designing, they think of new technologies they can use so that the device is considered “user-friendly” with the majority of the public. However, often times people with disabilities are looked over and their likes/dislikes are not taken into proper consideration when designing products. Though in the modern era a lot of computer products have ways for disabled people to interact, there are still many which are hard for the disabled to use. Hence, disabled people are highly under-represented in the HCI field even today. It is very important to design products that everyone, including people with disabilities, can use without being excluded. Thankfully, nowadays there exists some basic guidelines designers can follow that people of all abilities can easily interact with the devices.

What is Accessibility?

Designers should aim for maximum “accessibility,” which is a term used in the HCI field meaning the product must be usable by as many people as possible. This may sound obvious or intuitive but often times people forget to design products for people with disabilities and the disabled cannot use those products which lack accessibility. Products that lack accessibility are problematic because they are discriminatory, which is not ethically correct. Products should be able to be used by everyone, not just people without major disabilities. Not designing for the disabled means they will not be able to get the information and assistance that they might benefit from. Designing for the disabled has gotten easier after the existence of introduction of designs standards/guidelines that designers can follow in order to improve the accessibility of their products.

Disabilities

Disabilities are mental or physical conditions that may impair someone’s movements or senses. The percentage of people in the USA who have disabilities is 12.8% according to The American Community Survey (ACS) [9]. As you can see, that is a very large chuck of society. Hence, lack of designing a product for the disabled is not just ethically wrong, but it also means the product cannot be used by a large chunk of the population which is a massive disadvantage in the economics stand-point because the product is losing out on a large number of potential customers.

There are many different disabilities that can be found in society, such as the following:

  • Visual Disability
  • Hearing Disability
  • Physical Disability
  • Speech Impairment
  • Autism
  • Dyslexia

In this blog post, I am only going to discuss HCI guidelines to design for individuals with visual disabilities, hearing disabilities, physical disabilities, and dyslexia.

Designing for People with Visual Disabilities

Visual disabilities are ones that impair people’s vision which can result in them not being able to see well. This affects the way they interact with computers because it could mean they have trouble reading large amounts of text on a page or may have trouble seeing the small keys on the keyboard and the small icons on the computers.

One way to design for the visually disabled is to use components that make sounds when using multimedia interfaces such as video, images, and graphics. Each and every control of the website should make an identifiable sound also contain meta-data. For example, graphics and images should have proper associated al-text, which is a piece of text describing the image or graphic. This is very important because most visually disabled people use screen readers which use this information to describe the graphic and its function to the user.

It is also important to for websites to use standard HTML to construct their webpage or else screen readers could have trouble navigating through the website. Visually impaired people have trouble “scanning” through a website so it is important to follow the right structure — H1 for the highest level of heading, H2 for the second highest level of heading, etc. Headings should be clear and in the heading tags so screen readers can properly identify them and field should also be labeled. The right HTML structure allows visually impaired users to skim a website skipping over perhaps uninteresting sections with the help of screen readers. Poor HTML use could mean the is mean the screen reader could get stuck at a specific part of the page making it hard for visually impaired users to skim the page.

It is also good to avoid having too many links scattered between the texts because screen readers can struggle with links. The links should have text descriptions before the link so the user can know what the link is for. For example, “read more about the Interaction Design Foundation, at their website.”

Lastly, products should have an option to zoom into text or change the text size making it easier for people to read the content and they should also use sufficient color contrast (have noticeable contrast between text, background and graphics) for color blind people.

Below are some examples of good design choices made to assist the visually impaired:

  • iPhone has an accessibility feature mode where all the icons are larger making them easier to be seen by users and also where the text on the keyboards and phone is a lot larger.
  • Keyboards with magnified letters exist for people who have a hard time seeing the tiny letters on the keyboard and now even braille computers exist.
  • Screen Readers, such as JAWS, exist for blind people to navigate through a website. They read the text of the screen and even metadata/alt-text from images on the screen.
Example of Alt-Text on https://www.ed.ac.uk/

Designing for People with Hearing Disabilities

A hearing disability is the partial or complete inability to hear. In order to make products accessible to people with such a disability, they should offer transcripts of audio files. Many times, websites or products have videos or speech embedded into their User Experience or User Interface. Spoken audio clips should have transcripts and videos should be made available in versions with subtitles. This is an example of a guideline that benefits not only people with a hearing disability, but also many other users; for example, a user without any disability may benefit from the subtitled video option when trying to watch the video in a market, bus, train, or any other noisy environment. Also, a general rule of thumb is to avoid words, including speech and text, as much as possible and replace them with graphics to represent actions or information.

A new technology that is still in the early stages of production is Sign Language Recognition and Synthesis. Sign language recognition uses computer vision techniques to convert sign language videos into written/spoken language. A user with a hearing disability who knows sign language can wear a glove with sensors on it and use it to communicate; the hand gestures they makes while communicating in sign language is converted to written/spoken language. Sign language synthesis (signing avatars), on the other hand, are machines that convert written/spoken text into a video of the translated content in sign language using graphics for people with hearing disabilities to understand. However, this technology is not 100% accurate and is still in the testing phase in order to be built to near-perfection.

Singing Avatars image by Cagatay Goncu on ResearchGate.net

Designing for People with Physical/Motor Disabilities

Motor Disabilities is known as the partial or complete loss of function of a limb, limbs, or other body part(s). People with physical/motor disabilities can have trouble interacting with computers the same way the general public does. For example, when using tech devices, people with motor disabilities generally struggle with complex mouse movements and holding down multiple keys on the keyboard which can be taxing on them. Because the physically disabled may find it difficult to proficiently use a mouse, it is a general guideline for websites to make all their functions/actions be accessible through the keyboard alone. There should be some kind of graphic that notifies the user which component/link in the webpage is in focus while traversing through the webpage with a keyboard. The tab key is used to move to different labels/parts of the page and the enter key to click a certain part.

Because people with physical disabilities lack the precision that general tech users do when using a mouse, products (in this case websites) should be designed for users to have the have the least precision as possible. For example, buttons with small hit area can be difficult to access for people with motor disabilities; buttons should have larger hit areas/radius. Also, on any interface, interactions/actions (such as buttons) should not be bunched up close to each other as the disable user might make the wrong action by mistake (i.e. click the wrong button).

Lastly, interfaces should avoid long periods of typing and scrolling by providing shortcuts for users to navigate to different parts of the products or to perform various tasks. For example, there may be buttons to go to the top of the page, go to the bottom of the page, or suggestions to complete the search bar.

There are many examples of design choices implemented in products to help people with physical/motor disabilities. Here are a few good examples below:

  • Apple’s Assistive Touch: This is a feature on the iPad and iPhone that lets people with motor disabilities use the device in another way, by simply tapping on the screen. For example, the norm to zoom in is pinching the screen, to increase/decrease volume is pressing the volume buttons on the side, to turn off the phone is hold the power button.
  • Eye Gaze : This technology in which the eyes movements are tracked allows users to communicate with a device with eye movements. For example, user can move the mouse by simply moving their eyes.
myGaze image by Inclusive Technology on Youtube.com
Eye Gaze image by Indigo on Youtube.com
  • Mouth Stick : This is a stick that goes into a person’s mouth and it has a rubber end on one side. The user can use this stick to press keys or move a trackball mouse.
Mouth Stick image on mouse4all.com
  • Single Switch Press : Let’s say a person has very little mobility i.e. he can only move his head. Then a single switch press is put near his head so the user can hit/click the switch with his head. These clicks are interpreted by software allowing users to navigate through web pages, type with the assistance of auto complete which tries to guess what the user is typing (allowing the user to choose between the words guessed).
  • Sip and Puff Switch : This is similar to Single Switch Press. The user’s breathe signals are interpreted as on or off and they are generally used for controlling a wheelchair or navigating a computer
Sip and Puff Switch image by Origin Instruments Corporation on abledata.aci.gov

Designing for People with Dyslexia

Dyslexia is a learning disability that can impair an individual’s reading and writing skills. This disability can make it hard can make it hard for a user to read the information a product has to provide. Even auto-correct and spell corrector features are not useful to dyslexic users because these programs are not trained on dyslexic people’s spelling patterns. For example, a dyslexic person may not be able to select the right word from a list of suggested words presented by auto correct programs or spell checkers.

A design idea to help dyslexic people interact with the interface is allowing users to view text in different fonts. Something as simple as the font type can make a big difference to a dyslexic user. For example, Sans-Serif font is easier for dyslexic people to red when compared to other fonts, such as Serif. The hooks on the main stroked of the “serif” font may create problems for dyslexic users by distorting the shapes of the letters.

Interfaces should also give the users the tools to edit the text in various ways to make the page more readable. This not only includes changing the font (as mentioned above), but also the font size, line lengths, line-spacing, and letter spacing. This is called the typography of the text. Typography is the technique of making text more readable by adjusting typefaces/fonts, point size, line-lengths, line-spacing, and letter-spacing. Typography plays an important role for dyslexic users; for example, when letters between words are closer together and the space between words is larger, dyslexic users have a much easier time differentiating between the words and reading the text. Dyslexic users also find it difficult to read italics which could be replaced with bold text.

Another way of interfaces more accessible to dyslexic users is providing usual and auditory alerts instead of text-based alerts and the user can spend less effort identifying what the alert is about. Interfaces should also provide functionality to convert text to audio making it easier for the dyslexic user to receive the information on the screen (text-to-audio).

Conclusion

Though we have improved a lot by making more and more products accessible to a wider range of people, we still have a long way to go. The best way to design to maximize accessibility of the product is to envision all users as people with disabilities. This is because designing for the disables not only benefits the impaired, but benefits any user. Even “fully able-bodied” users may benefit from physically disability designs when their phone goes off and they have to use a product with one hand. Or when a user is watching a video but is having trouble understanding the speaker’s accent, they benefit from the subtitles video or video transcript option. We live in an imperfect world and hence we should design products to be used by everyone with various different flaws, backgrounds, disabilities, and experiences.

Sources

  1. World Leaders in Research-Based User Experience. “Accessible Design for Users With Disabilities.” Nielsen Norman Group, www.nngroup.com/articles/accessible-design-for-users-with-disabilities/.
  2. Soegaard, Mads. “Accessibility: Usability for All.” The Interaction Design Foundation, Aug. 2019, www.interaction-design.org/literature/article/accessibility-usability-for-all.
  3. “Key Considerations for User Experience for the Disabled.” The Interaction Design Foundation, BBC, 2016, www.interaction-design.org/literature/article/key-considerations-for-user-experience-for-the-disabled.
  4. liam900, Liam900. “How Developments in HCI Can Help Those with Visual Impairments.” WordPress, 17 Oct. 2012, liam900.wordpress.com/2012/10/17/how-developments-in-hci-can-help-those-with-visual-impairments/.
  5. Stephanidis, Constantine. “Design for All.” The Interaction Design Foundation, www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/design-4-all
  6. Reason Digital. “Four Ways Technology Can Help Disabled People on a Daily Basis.” Reason Digital, Reason Digital, 22 Sept. 2017, reasondigital.com/insights/four-ways-technology-can-help-disabled-people/.
  7. Morris, Alex B. “Designing for Dyslexia.” Medium, UX Planet, 3 Aug. 2017, uxplanet.org/designing-for-dyslexia-6d12e8c41cd7.
  8. Colligne, Robyn. “How to Design for Dyslexia — The Latest Voice of Customer and CX Trends: Usabilla Blog.” Usabilla Blog, CX Insights , 2 Mar. 2017, usabilla.com/blog/how-to-design-for-dyslexia/.
  9. US Census Bureau. (2018, August 3). Anniversary of Americans With Disabilities Act: July 26, 2018. Retrieved from https://www.census.gov/newsroom/facts-for-features/2018/disabilities.html

--

--

Kalyan Vejalla

Hi. I am here to post things related to the HCI class I am taking in college right now.