Accessibility issues in User Interface DesignCompliance with Section 508 accessibility standards
Abbas Moallem, Ph.D.
COEN 296-Human Computer Interaction
And Usability Eng
Overview
What are Disabilities?
Laws and Regulations
Categories of Disability
Different Types of Disabilities
Accessibility
Physical disability
Hearing Loss, Low vision, Blindness, Colorblindness
PIA Accessibility Standards & Guidelines
People with Disabilities
Approximately 40 million Americans have a disability of some kind.
As the population ages, more and more of us will develop age-related disabilities (25% by age 55, jumping to 50% at age 65).
1.5 million people in Californiahave vision disabilities
People with Disabilities
32.1 million working-age people (or 18.7% of the population age 15 to 64) have a disability.
What Is a Disability?
Under the Americans With Disabilities Act an
individual with a disability is a person who:
has a physical or mental impairment that substantially limits one or more major life activities;
has a record of such an impairment; or
is regarded as having such an impairment.
Americans with Disabilities Act (ADA) (42 U.S.C. 12101 et seq. 1990)
The ADA is a federal anti-discrimination statute designed to remove barriers which prevent qualified individuals with disabilities from enjoying the same employment opportunities that are available to persons without disabilities. And requires that State and local governments give people with disabilities an equal opportunity to benefit from all of their programs, services, and activities
The ADA was signed into law on July 26, 1990.
Many other countries have similar laws.
Compliance with the ADA
It is a requirement in all current federal contracts to comply with the section 508 of the Federal Rehabilitation Act and the Americans with Disabilities Act (ADA).
Categories of Disabilities: Physical Impairment
A physical impairment is defined by the ADA as:
"Any physiological disorder or condition, cosmetic disfigurement, or anatomical loss affecting one or more of the following body systems: neurological, musculoskeletal, special sense organs, respiratory (including speech organs), cardiovascular, reproductive, digestive, genitourinary, hemi and lymphatic, skin, and endocrine."
Categories of Disabilities: Mental Impairment
A mental impairment is defined by the ADA as:
“Any mental or psychological disorder, such as mental retardation, organic brain syndrome, emotional or mental illness, and specific learning disabilities."
Impairment under ADA
Does not include:
Simple physical characteristics: eye or hair color.
A physical condition that is not the result of a physiological disorder: pregnancy, or a predisposition to a certain disease.
Personality traits: poor judgment, quick temper or irresponsible behavior.
Environmental, cultural, or economic disadvantages: as lack of education or a prison record .
Reasonable Accommodation
Reasonable accommodation is any modification or adjustment to a job or the work environment that will enable a qualified applicant or employee with a disability to perform essential job functions.
Reasonable accommodation also includes adjustments to assure that a qualified individual with a disability has the same rights and privileges in employment as non-disabled employees.
The Rehabilitation Act Amendment(Section 508)
Section 508 is a part of the Rehabilitation Act of 1973 that requires all electronic and information technology developed, procured, maintained, or used by the Federal government to be accessible to people with disabilities.
On August 7 1998, President Clinton signed the Rehabilitation Act Amendments of 1998 into law .
Different Types of Disabilities
Physical Disabilities
Visual Disabilities
Hearing Disabilities
Language, Cognitive Disabilities
Communication and other Disabilities
Accessibility
Accessibility means removing barriers that can prevent people with disabilities from participating in substantial life activities, including the use of services, products, and information.
Removing barriers often benefits to a wide range of people other not only those with disabilities.
Accessibility Solutions for Physical Disabilities
Accessibility Guidelines for Hearing Disabilities
Never assume a user will hear an audible notification.
Where appropriate, allow users to choose between audible or visual cues.
Do not overuse or rely exclusively on audible cues.
Allow users to configure frequency and volume of audible cues.
Accessibility Guidelines for Visual Disabilities
Visual Disabilities: Low Vision
A person with low vision to be someone who can only read print that is very large, magnified, or held very close.
9-10 million people with low vision (USA)
The common issue for low vision users is to read what is on the screen.
Users with low vision may have a limited field of view.
Visual Disabilities: Low Vision
Accessibility Issues for People with Low Vision
All fonts, including those in text panes, menus, labels, and information messages, should be easily configurable by users.
Even with magnification hardware or software to enlarge view, performance & image quality are improved if larger font sizes are available prior to magnification.
Providing redundant audio cues (or the option of audio) can notify users about new information or state changes.
Visual Disabilities: Blindness
A blind person is considered to be anybody who does not use a visual display.
Screen reader software provides access to graphical user interfaces by providing navigation as well as a Braille display or speech synthesized reading of controls, text, and icons.
The blind user typically uses tab and arrow controls to move through menus, buttons, icons, text areas, and other parts of the graphic interface.
Accessibility Solutions: Screen Reading Software
Accessibility Issues for People with Blindness
Screen reading software can read the text contents of buttons, menus, and other control areas.
Screen readers cannot read the contents of an icon or image, only the descriptive label or accessible name associated with them.
Accessibility Guidelines for People with Blindness
Meaningful names should be provided for user interface objects in their code to provide useful information to users with visual impairments.
Rather than naming an image “Widget5”, for example, the code should call it “Eraser” or some other descriptive name, that users will understand if spoken by a screen reader.
Visual Disabilities Color Blindness
Red-green color blindness is common — about 4-5% of the population.
8-10% of the male population is “red-green” colorblind.
Many people with low vision are also unable to distinguish among some or any colors.
A significant portion of any population is “color blind”.
When someone is colorblind, there is something wrong with one of their groups of photo pigments, usually the red (L) or green (M), which is why they are called "red-green" colorblind.
Type of Colorblindness
Trichromats (normal color vision) have their color vision based on 3 different types of photo pigment, one from each of the L, M, and S group.
Dichromats (severely colorblind) are missing one whole group of photo pigment. Most mammals (including cats and dogs) have dichromatic color vision.
Type of Colorblindness
Monochromats (very rare) cannot distinguish between any colors.
Anomalous trichromats (mildly or moderately colorblind) have color vision based on 3 different photo pigments, but from only 2 of the photo pigment groups.
Colorblindness
The spectral sensitivities of the cone pigments and spectrum in color normal trichromats are compared with those of a color blind person:
Accessibility Guidelinesfor People with Colorblindness
Use of Color
Color should be used with care to ensure that color-blind people can view the information.
Color should not be used as the only way to convey information.
Pages that are printed on black and white printers can also become unintelligible if color is the only way information is being conveyed.
Accessibility Guidelinesfor People with Colorblindness
Use of Color
Do not use color only to change backgrounds or text color to red to indicate an error.
Do not use an icon that changes color based on status but is otherwise the same. Make sure the icon changes shape as well.
Accessibility Guidelinesfor People with Colorblindness
Do not hard code application colors.
Do not hard code graphic attributes such as line, border, and shadow thickness.
Do not hard code font sizes and styles.
Provide descriptive names for all widgets and any widget using graphics instead of text (e.g., palette items or icons).
Graphics
Clear graphics are very important because graphics are often the source of the most difficulty. Here are two examples showing the difference between good and bad use of color:
Accessibility Standards & Guidelines(Compliance with Section 508)
Standards and Guidelines include:
Guidelines to comply with Section 508 accessibility standards.
Solutions to critical usability issues for users with disabilities.
General Guidelines
The Standards and Guidelines include:
Things that must be done to comply with Section 508 accessibility standards.
Things that are critical for usability of application pages by users with disabilities.
Labels
All functional images must have labels.
Labels must effectively communicate the purpose of the image.
All data entry fields must have labels near the entry field.
All grid columns must have labels (excluding columns with buttons or links).
Label for Functional Images
Functional images are image buttons, image hyperlinks, and static and dynamic images that convey meaningful information.
A good label is vital for blind users to understand the meaning of the image.
Label for Functional Images
Labels also clarify the meaning of images for sighted users, since the labels are displayed as mouse-over text using the Alt-tag.
Images, which do not need a label: spacer gifs ("invisible" gifs); adornments (images which serve no functional purpose other than to provide visual interest).
Labels for Data Entry Field
Data entry fields should have labels near the field.
All edit boxes, check boxes, radio buttons, and long edit boxes should have labels near the entry field. Proximity to a group box label or page title is not "good enough".
The label can be the actual label for the field (preferred), the label from a hidden field, etc.
Grids
All grids must have meaningful titles.
All grid columns should have a label except those containing buttons or hyperlinks.
Showing Status
Colors should not be the only indicator of status.
Use a text field that describes the status.
Example: “Status: Error”
Use differently shaped and colored icons for each status.
The icons should have descriptive mouse-over text.
Critical for usability
All grids should have titles.
All the buttons and links on the page should have unique labels.
Adornment images should have labels turned off.
The tab order should be correct.
Foreground and background colors should provide sufficient contrast.
The abbreviations for labels should be kept to a minimum.
Label for buttons and links
All the buttons and links on the page should have
unique labels for two reasons:
While a link may be visually associated with an area, it may not be apparent to a screen reader.
Screen readers have the ability to pop up a list of all links on page.
Labels for Adornment Images
Adornment images are images that serve no functional purpose other than to provide visual interest. If the images have no information to convey to users and do not serve as navigation, then they should not have a label.
Images used as spacers (e.g. invisible gifs) should not have labels.
Tab Order
A logical tab order is critical for blind users since they cannot see groupings and field proximity on the screen.
Tab order is also important for sighted users, since it is jarring to have items tab in a different order than they appear on the screen.
Deferred Mode Processing
Use deferred processing whenever possible.
If deferred processing is not “on”, field processing should be kept to an absolute minimum.
Deferred Mode Processing
Every time there is a trip to the server, the page is refreshed.
This refresh can make the screen reader lose focus of the field that the user was on.
The screen reader will start reading the page from the beginning, including navigation links and all the other "noise" on the page.
It may takes users using screen readers a while to find their place after a screen refresh.
Colors
If color is used to convey meaning, the same information must be presented in another way as well (e.g. with text or shapes)
Foreground and background colors must provide sufficient contrast.
Foreground and Background colors
Provide sufficient contrast:
Text and background colors need to have sufficient contrast to be viewed by someone with low vision or color blindness.
If you are using the standard corporate style sheets, the contrast should be fine as the styles were developed with this in mind.
Background and Text
Whenever you use a colored background for a page or a graphics, make sure the text message on it has strong contrast to the colored background.
Black will work on light to medium colors, but is difficult to read against medium-dark to dark colors and red.
Use the corporate style sheets.
Background and Text
Use contrast in shades as long as the difference is strong.
Be careful using white text on a pale background at it can disappear.
Example: Never use pale green text on a similar shade of green.
Instructional Text
Instructional text is very important for blind users.
Instructional text gives a brief overview of the page so that blind users can get a general idea of the page content and what can be done without having to hear the entire page read aloud by the screen reader.
All self-service pages should contain at least a line or two of instructional text.
Abbreviations for Labels
Keep abbreviations for labels to a minimum. Screen readers for the blind have difficulty reading abbreviations aloud.
Abbreviations should be avoided for field labels and grid column labels.
Conclusion
You should create an accessible product because:
People with disabilities will benefit.
A wide range of people without any disability will have a better user experience.
It’s the law!
1
AM/SCU/COEN296