Assistive technologies

The aim for today:

• An understanding of the different types of disabilities.
• An understanding of assistive technologies.
• An introduction to using keyboard-only.
• An introduction to using screen readers.

From a digital accessibility perspective, are four main types of disability:

• Visual.
• Auditory.
• Motor Skill.
• Cognitive.

A. Low Vision:

• Macular degeneration.
• Glaucoma.
• Diabetic retinopathy.
• Cataract.

B. Colour Vision Deficiencies:

• Monochromacy:
  • Rod monochromacy: inability to distinguish colours.
  • Cone monochromacy: inability to distinguish colours.
• Dichromacy:
  • Protanopia: absence of red retinal photoreceptors.
  • Deuteranopia: absence of red retinal photoreceptors.
  • Tritanopia: absence of blue retinal photoreceptors.
• Anomalous trichromacy:
  • Protanomaly: poor red–green hue discrimination.
  • Deuteranomaly: mildly affected red–green hue discrimination.
  • Tritanomaly: poor blue–green and yellow–red/pink hue discrimination.

Side note:

Although “colour blindness” is a commonly used term, it is inaccurate in most cases. “Colour blindness” only refers to people with Monochromacy.

C. Blindness

• Blindness.
• Legally blind.

D. Other visual-related conditions

• Photosensitive epilepsy.

Auditory disabilities:

• Hearing loss.
• Hearing impaired.
• Deafness.

Side note:

A small percentage of the deaf community that cannot read, and rely on sign language alone.

Literacy and Numeracy

A. Traumatic Injuries

• Spinal cord injuries that affect upper body.
• Loss or damage to limb(s).

B. Full-body Diseases & Conditions

• Arthritis.
• Spina Bifida.
• Cerebral Palsy.
• Muscular Dystrophy.
• Multiple Sclerosis.
• Parkinson’s Disease.
• Locked in syndrome.
• Amyotrophic Lateral Sclerosis (ALS).
• Functional Neurological Disorder (FND).
• Stereotypic Movement Disorder (SMD).

C. Arm, Hand and Finger Disorders

• Osteoarthritis.
• Lymphedema.
• Trigger Finger.
• Thromboangiitis obliterans (Buerger's Disease).
• Rheumatoid Arthritis.
• Boutonnière Deformity.
• Dupuytren Contracture.
• Compartment Syndrome.

D. Other motor-related conditions

• Chorea.
• Tremors.
• Myoclonus.
• Dystonia.
• Ataxia.
• Tic disorders.

A. Intellectual disabilities

• Fragile X Syndrome.
• Down Syndrome.
• Autism spectrum.
• Fetal Alcohol Spectrum Disorder (FASD).
• Williams Syndrome.
• Prader-Willi Syndrome (PWS).
• Phenylketonuria (PKU).
• Cerebral Palsy (in some circumstances).

B. Learning disabilities

• Dyscalculia (related to numbers/maths).
• Dyslexia (related to reading).
• Dysphasia (related to understanding language).
• Attention Deficit Hyperactivity Disorder (ADHD).
• Non-Verbal Learning Disabilities.
• Language Disorders.
• Auditory processing disorders.
• Sensory processing disorders.

The lists above are just some of the possible groups of people who may interact with our digital products.

Disabilities may be spectrums - such as ADHA, Autism, Fetal Alcohol Spectrum Disorder.

Some people have multiple disabilities or conditions such as:

• A person who is blind and also has hearing loss.
• A person with Tourettes with Coprolalia, who also has Absence seizures and Functional Neurological Disorder (FND).

Some disabilities change over time such as:

• Deteriorating eye sight or hearing.
• Improved functionality after a stroke.
• Changes due to different treatment or medication.

And finally, some disabilities may change in nature or severity from day to day or even during a single day.

Making digital products accessible for people with disabilities also benefits others.

For example, some people may experience temporary or situational barriers that are similar to the symptoms of disabilities.

Examples of temporary barriers:

• A broken arm.
• Temporary hearing loss.
• Concussion.

Examples of situational barriers:

• Unable to see a screen due to sunlight.
• Unable to hear video or audio material due to a local noise.
• Unable to use a mouse while holding a baby.

Are people with disabilities likely to access our digital products?

Maybe not all of our products. For example, people with vision disabilities are unlikely to purchase car insurance. However, in general, yes. Everyone needs insurance!

How do these people access our digital products?

With assistive technologies: software and hardware designed to help people with disabilities interact with websites and web applications.

• Screen reader software (eg. JAWS, NVDA, VoiceOver).
• Refreshable braille displays.
• Screen magnifier software.
• Head wand.
• Quadstick - Sip and Puff.
• Head switches.
• Dragon Naturally Speaking.
• Dynavox - Mouse emulation.
• Steve's Story.

These are just some examples of a broad range of Assistive Technologies in use today.

Keyboard-only users include

• Mouth stick users.
• Head-wand users.
• Single switch users.
• Sip and puff switch users.
• Screen reader users.
• Refreshable braille device users.

Because this group includes many people with physical as well as visual limitations, keyboard-only users are a huge audience!

It’s very easy to test sites for keyboard accessibility. All you need to try to navigate/interact with the website or web app without using your mouse or trackpad.

For a website or web app to be considered keyboard-accessible, these five conditions must be met:

1. Keyboard accessible

Every aspect of the website or web app must be completely keyboard accessible - without having to use the mouse.

2. Focus order

Focus order should be logical and consistent. When navigating through focusable elements, users should be able to intuitively guess the next focusable element.

3. Clear focus state

Focus must be clearly visible on every focusable element. All focus states should be very different to static states.

4. Consistent focus state

The styling of focus states should be consistent across all focusable elements so that users are not surprised or confused by differing styles.

5. Ability to bypass blocks

Users should be able to bypass blocks of content that are repeated on multiple pages - such as site-wide navigation. A common solution is to provide a “Skip to content” link on all pages.

Exercise part 1:

Go to this demo page and we'll look at how to navigate using keyboard-only.

Navigating via focusable elements

• The TAB keystroke moves focus to the next focusable element on the page.
• The SHIFT TAB keystroke moves focus to the previous focusable element on the page.

Select menus

• The DOWN ARROW or UP ARROW keystroke will move focus to the next or previous options in dropdown menu.
• The ENTER or SPACEBAR keystrokes will select the option that is currently in focus.
• The ESC keystroke will close the dropdown menu.

Some points on Radio buttons before using

• If all radio buttons have a matching name value, they will act as a radio button group.
• Within a radio group, only one radio button can be selected.
• When a radio buttons has been selected from within a radio group, the group cannot be unchecked without page refresh.

Radio buttons

• The TAB will move focus into and out of a radio button group.
• The SPACEBAR keystroke will select the current radio button.
• The DOWN ARROW and DOWN ARROW keystrokes will move focus to next or previous radio button and select it.

Checkboxes

• The TAB will move focus to the next checkbox.
• The SPACEBAR keystroke will select the current checkbox.

Exercise part 2:

Go to either the NRMA website or the AMI website and try to navigate around the home page using keyboard only.

Check the following

1. Is the site keyboard accessible? (Use TAB and SHIFT + TAB to move around).
2. Is focus order intuitive?
3. Are focusable states clearly defined?
4. Are focus state styles consistent?
5. Is there a “Skip to content” link?

Screen readers are designed to convert web page content into either:

• Synthesised speech so that users can listen to the content.
• Braille so that users can read the content as braille output.

Since the majority of screen reader users don’t use a mouse, almost all screen readers use a wide variety of keyboard commands to carry out different tasks.

There is a common misconception that screen readers “read what’s on the screen”. In reality, screen readers interact with the Accessibility Tree (more on that later).

There are a wide range of screen readers across different operating systems, including the following:

There are also applications such as ZoomText Fusion, which combines ZoomText and JAWS into one application.

A 2019 Screen Reader survey by WebAim determined that NVDA was primary screen reader of choice.

Most common screen readers allow users to interact with web pages in two ways:

• Read mode.
• Forms mode.

In Read mode users can read and navigate the page but cannot interact with the page content (i.e. they cannot enter data into form fields).

In Forms mode, user can interact with form controls. In this mode, keyboard access is restricted to elements that accept focus.

Most modern screen readers automatically switch to Forms mode when they encounter a form control. They also automatically switch back to Read mode when leaving a form.

In fact, you can hear the different types of screen readers switching in and out of Forms modes. The sound is different in each screen reader. In NVDA, the sound is like a camera click.

Screen reader users navigate around web pages in different ways depending on their need.

In some cases they may choose to read the page from start to finish. However, this is rare.

In many cases, they use a wide range of methods to navigate through the page more quickly. This includes:

1. Skip links

Using skip links to jump over content that is repeated on multiple pages, such as site-wide navigation.

2. Focusable elements

Using TAB keystrokes to navigate around the website or web app via focusable elements.

3. Search

Search for specific information within the page using either:

• Browser-based search functionality.
• Specific search functionality within the screen reader.

4. Skimming through content

This is done using Read mode, but jumping onto the next line before the current line has finished being announced.

5. Keyboard shortcuts

Using keyboard shortcuts to navigate quickly around the page, via:

• Landmarks.
• Headings.
• Forms.
• Links.
• Tables.
• Lists.

6. Rotor or equivalent

Using popup menus to scroll through sets of options, such as:

• All links.
• All headings.
• All form controls.
• All landmarks.

The use of semantic or meaningful markup is extremely important for screen readers. We'll look at semantic markup in our next topic.

Go to this demo page and we'll learn some basic NVDA functionality.

The NVDA key is set to the INSERT key by default, but it can be changed to the CAPS LOCK key when installing NVDA for the first time.

This is because a lot of modern laptops do not have an INSERT key.

The NVDA application needs to be manually opened in order to begin reading. I normally open NVDA via the desktop or taskbar icon.

NVDA can be quit using either:

• INSERT + Q.
• CAPS LOCK + Q.

For more, check the detailed list of NVDA shortcuts.

Go to this demo page and we'll learn some basic VoiceOver functionality.

VoiceOver uses “VO” keys, CONTROL + OPTION to control lots of functions.

In order to start VoiceOver, we need to understand the Mac laptop touch bar - a display strip across the top of the keyboard on some Mac computers.

I find it easiest to start by pressing and holding two keys - COMMAND + FN - which will display the function keys on the Touch bar.

When the Function keys are displayed in the Touch Bar, keep holding the COMMAND + FN keys and press the F5 key.

After some practice, the COMMAND + FN + F5 keys can be combined to start VoiceOver.

To stop VoiceOver using the keyboard, you will need to do two steps:

Step 1: Press and hold the COMMAND + FN + F5 keys. This will place a white border around the F5 key to bring it into focus.

Step 2: Double tap this F5 key to quit VoiceOver.

Alternatively, VoiceOver can be started without using the keyboard via:

System Preferences > Accessibility > VoiceOver > Enable VoiceOver

And, VoiceOver can be quit via the mouse by clicking the “X” icon in the top left corner of the VoiceOver panel.

For more, check the detailed list of VoiceOver shortcuts.