This document discusses accessibility for people with disabilities on web apps. It notes that around 15-20% of people have some kind of disability like visual impairment, color blindness, or motor impairments. It emphasizes that web content needs to be perceivable, operable, understandable, and robust. Specifically, it recommends providing text alternatives, adaptable content, distinguishable content, keyboard accessibility, enough time for users, avoiding seizures, navigability, readable text, predictability, input assistance, and robustness that works for assistive technologies.
20. How is it to have a motor
impairment?
Up to 5% of all people
21. Imagine there is no mouse
• You have at most keyboard to browse a web site.
• You cannot reach non-interactive elements.
• All clickable elements on the site are in a sequence.
• You are dependent on focus representation of the actual element.
60. Visit the page and try to find all accessibility violations.
61. Content must be robust enough that it can be interpreted reliably by a wide
variety of user agents, including assistive technologies
Web content must be
robust
Slide about people with disabilities
Yellow – blind people (about 0,5%, 39 milions)
Orange – decreased ability to see the indelible glasses or lenses (about4,39%, 285 milions)
Purple – color blindness (daltonismus)
Most common are the problems with the perception of green and red colors. Problems with the perception of blue color are quite rare.
9% of men and 0,4% women
Complete color blindness is very rare, 99% color blind persons do see some color.
Also to add:
Hearing disabilities – 10%
Motor functions disabilities - 5%
Total number of disabled people: 15-20%
USA 19%
Australia 18,5%
More statistics on http://www.disabled-world.com/disability/statistics/
Slide about Macular degenerations
Macular degeneration, often age-related macular degeneration (AMD or ARMD), is a medical condition that usually affects older adults and results in a loss of vision in the center of the visual field (the macula) because of damage to the retina.
It is a major cause of blindness and visual impairment in older adults, afflicting 30-50 million people globally.
Slide about Cataract
A cataract is a clouding of the lens in the eye leading to a decrease in vision. It can affect one or both eyes. Often it develops slowly. Symptoms may include faded colors, blurry vision, halos around light, trouble with bright lights, and trouble seeing at night.
Cataracts are the cause of half of blindness and 33% of visual impairment worldwide.
Slide about Diabetic Retinopathy
Diabetic Retinopathy is the leading cause of blindness for people aged 20 to 64 years. Each year in the United States, diabetic retinopathy accounts for 12% of all new cases of blindness.
Slide about Glaucoma
Glaucoma is a term describing a group of ocular (eye) disorders that result in optic nerve damage, often associated with increased fluid pressure in the eye.
Glaucoma can permanently damage vision in the affected eye(s), first by decreasing peripheral vision (reducing the visual field), and then potentially leading to blindness if left untreated.
Glaucoma has been called the "silent thief of sight" because the loss of vision often occurs gradually over a long period of time, and symptoms only occur when the disease is quite advanced.[4] Once lost, vision cannot normally be recovered, so treatment is aimed at preventing further loss.
Slide about How do we feel colors
Rods – contrast perception and peripheral vision
Cones – color perception
Slide about Achromatopsia
Achromatipsia – missing all the cones
Slide about Protanopia
Protanopia – missing the red cones
Slide about Deuteranopia
Deuteranopia – missing the green cones
Slide about Tritanopia
Tritanopia – missing the blue cones
Slide about motor impairment
We will only discuss the disabilities of upper body parts. In such a case the user cannot use a mouse or maybe even keyboard.
Writing a software that is accessible to keyboard helps these kind of people:
Blind people because a reader machine can easier navigate in the application flow.
Motoric disabled people because they can control the application themselves.
Advanced users who thus can use for example keyboard shortcuts.
Slide with an example of proceeding links with keyboard
An example of how many times does a user need to hit the tab button to proceed to the desired link.
Slide with an example of a keyboard trap
An example of a keyboard trap
Slide about existing acessibility norms
Section 508 Standards apply to electronic and information technology procured by the federal government, including computer hardware and software, websites, phone systems, and copiers.
Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible. Made by W3C.
Mandate 376 is a future EU norm.
Slide about text alternatives
Sensory characteristics such as shape, size, visual location, orientation, or sound should not be the only way of conveying important information.
Slide about adaptable content
Meaningful information should not be conveyed solely via sensory characteristics. Sensory characteristics such as shape, size, visual location, orientation, or sound should not be the only way of conveying important information.
If you want to convey that a button will delete content, for example, make sure that this is also written in text. Do not rely solely on color and icons
Slide about existing distinguishable content
Text should be resizable using the default browser mechanisms up to 200% without a loss of content or functionality.
Contrast ratio of text to background should be at least 4.5:1, preferably 7:1.
Slide with example of adaptable content
Text should be resizable using the default browser mechanisms up to 200% without a loss of content or functionality.
Normal text
Slide with example of an adaptable content
200% increased text – you cannot reach the button next to the e-mail input, you don‘t even know there is one
Slide with example of a distinguishable content
Contrast ratio of text to background should be at least 4.5:1, preferably 7:1.
Normal text
Slide about keyboard accessible content
Many people are unable to navigate the web using a mouse. Therefore, all functionality should be operable through the standard keyboard interface without requiring specific timings for individual keys.
Ensure all functional elements have a clear focus state. For people navigating a website using the tab key only, focus states are how they know their location on the page.
Avoid keyboard traps. Tab through the content of your website from start to finish to ensure that the keyboard focus is not trapped on any of the content.
Slide about providing enought time for timed content
Provide controls for timed content. For any interactions related to timing - including moving information, auto-updating, or page time-outs.
Possible implementations:
Users can turn off the time limit
Users can adjust time limit to at least 10 times the length of the default setting
Users is warned before time expires and given at least 20 seconds to extend the time limit with a simple action
Slide about seizures
Flashing light should not occur more than three times per second. Or, the flash should be below thegeneral flash and red flash thresholds. You can use photosensitive epilepsy analysis tools or flash tests to test your site if you are unsure.
Slide with seizures example
Flashing light should not occur more than three times per second. Or, the flash should be below the general flash and red flash thresholds. You can use photosensitive epilepsy analysis tools or flash tests to test your site if you are unsure.
Slide about navigable content
Provide a link for users to skip to the page’s main content. One of the first links on every page of a website should include a link for users to bypass repeated blocks of content, such as the navigation. This is especially important for pages that have large, multi-layered navigation menus. The link itself does not need to be visible when out of focus.
Titles should be meaningful. The title of the web page, as well as the page heading, section headings, and labels, should describe the topic or purpose of the page.
Link purpose can be determined from link text. As far as is possible, the purpose of a link should be able to be determined from the text that is within the anchor tag itself.
Provide more than one way to locate a web page. The same page should be accessible by more than just one link on one page.
Complete site map on a single page
Search function to access all content
Navigation with links to all pages
Slide about readable content
Specify the language(s) of the page. Specify the language of the current page on the HTML element, and any languages of specific parts.
Provide meanings of unusual words and pronunciations of difficult words. You can use the titlea ttribute to provide the meaning of abbreviations and unusual words. For definitions, you can use the dl element to provide a definition list.
Make content available at a lower secondary education reading level. Teenagers aged between 11-14 should be able to understand the content, even if specific terminology and concepts are new.
Slide about navigable content
Consistent navigation. Navigation elements should be repeated in a consistent way throughout the website.
Consistent identification. Terminology and repeatable elements should appear consistently throughout the website.
No unprovoked changes of context. Any changes of context should only happen on request by the user. Things like redirects, popups and other similar interactions should be communicated clearly beforehand.
Slide about input assistance
Provide labels and instructions - Provide labels or instructions for input elements. Where there is a commonly made error, provide suggestions that users can model their answers against.
Error messages in simple language. Errors made should be described to the user in plain, understandable text, not error codes.
Error prevention. Where a user is submitting information, at least one of the following must be true -
The submission of information is reversible
The answers is checked for errors and the user is given the opportunity to correct before submission.
The user is given the opportunity to confirm the information before submission
Slide with an example of not understandable web app
https://www.ruelala.com/boutique/
Focus and context changes right after page was loaded
Body focus means a context change to a place with a keyboard trap
Placeholders are used as labels – bad usability.
Slide about robust content
Valid code and semantic web pages
Slide about robust content
Write valid code. Ensure the compatibility of your HTML by making sure it passes validations checks.
Specify the purpose of elements. Specify the name, role and value for user interface components where appropriate. For forms in particular, labels should be used where possible -
Slide about tesing the software
Test your software for accessibility
Browser add-ons
Accessibility tools
Specialized centers