4. Accessibility
Accessibility is a general term used to describe the
degree to which a product, device, service, or
environment is available to as many people as possible.
Accessibility is often used to focus on people with
disabilities or special needs and their right of access to
entities, often through use of assistive technology
http://en.wikipedia.org/wiki/Accessibility
5. Universal Design
Accessibility is strongly related to universal design when
the approach involves "direct access". This is about
making things accessible to all people (whether they
have a disability or not).
7. Increase user/customer base
“Most studies find that about one fifth (20%) of the
population has some kind of disability.” - WebAIM
20%
8. Legal Liability
Section 508 (US)
Rehabilitation Act in US
Applies to all Federal agencies when they develop, procure, maintain, or use
electronic and information technology.
DDA (UK)
Disability Discrimination Act (DDA is replaced by Equality Act 2010) in UK.
Applies to all websites, not just those that are government-funded.
More…
http://webaim.org/articles/laws/world/
12. for people with different Disabilities
Have different difficulties access
content or information
Rely on
Assistive Technology (AT) to
help access content
13. visual: Color-Blind
Problem distinguish colors (/hues):
Red – Green
- Protanopia
- Deuteranopia
Blue – Yellow
- Tritanopia
Override with high contrast style
sheet
14. visual: Low Vision
Difficult to read small texts
Problem with low contrast
contents
Use screen magnifier
Enlarge font size
Use special style sheet
18. cognitive: ADHD (/ADD)
Attention Deficit Hyperactivity Disorder
Hard to focus and
comprehend information:
Inattentiveness
Over-activity
Impulsivity
Use Text-to-speech (TTS)
Reading pen
Screen reader, etc.
22. We grow old…
Low vision
Hearing problem
Slow input
Failing
short term memory
23. We access web with
mobile phones…
Small text on small screen
Noisy environment
Mute sound
in public environment
Keyboard inputs only on some
phones
Hard to read low contrast
contents under bright sunlight
24. How to make web designs more
accessible?
Some basic techniques for starter
25. General design principles
Use semantic markups
Make content accessible to AT (Assistive Technology)
E.g. <title>, <h1>, <h2>, <li>, etc.
E.g. <nav>, <footer>, <header>, etc. in HTML5
Separate visual style from contents
Easier to be overridden or controlled by browser settings
<link rel="stylesheet" type="text/css" href="style.css”>
Keep clean and consistency
More predictable
Can be ignore and skipped when necessary
E.g. consistent navigation or menu structure.
26. design for the Blind
Provide text alternative for images
Describe image content with <alt> tag
Help screen reader ignore decorative images
Assign null value “” to <alt> for decorative images
E.g. bullets, icons, spacer (/separator) images
27. design for the Color Blind
Use sufficient color contrast
At least 4.5:1 contrast ratio
Use additional cues if color contains information (i.e.
color coding)
E.g. shape, text, etc.
28. design for Low Vision
Use sufficient color contrast
Avoid fixed font size
Adjustable to machine/browser settings
29. design for Hearing Loss
Provide text alternative for video/audio contents
Provide subtitles/ captions/ transcripts
Don’t rely on only acoustic feedback
Use extra modalities
E.g. visual, tactile, etc.
30. design for Motor Disability
Provide keyboard access
Maintain logical tabbing orders
Provide access key shortcuts
Give user enough time to read and use content (if you
need to have timeout)
31. design for Cognitive Disability
Illustrate complex concept
Use direct and simple writings
Direct attention with design
Highlight content that needs to be focused on
Organize and structure information
bulleted lists, spacing
Avoid constant moving (blinking, scrolling, flickering) object
that distracts
Don’t loop playback
Enable users to turn it off
32. W3C Standard
WCAG (Web Content Accessibility Guidelines) 2.0
Follow WCAG ensures law compliancy
It overlaps with guidelines in Section 508.
It will be used to assess a website’s accessibility by those
regulations that don’t define specific guidelines. (e.g. DDA)
33. Resources
Web Content Accessibility Guidelines (WCAG 2.0)
http://www.w3.org/TR/WCAG20/
How People with Disabilities Use the Web
http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/#retiree
Web Accessibility In Mind
http://webaim.org/articles/
Target lawsuits news/articles
http://webdesign.about.com/b/2008/09/05/reader-
commentary-target-accessibility-lawsuit-settled.htm
http://2008.gr0w.com/articles/design/target_sued_for_poor_we
b_site_accessibility/index.php
Accessibility is about how accessible your product, service, or environment is available to as many people as possible. It is often used to focus on people with disabilities or special needs.--Content source:http://en.wikipedia.org/wiki/AccessibilityImage source: http://www.agiledesigngroup.com/Portals/0/Accessibility.gif
Accessibility and Universal Design are somewhat related because Universal Design not only benefit people with disability but also convenient to those with no disability.Making a thing not only accessible to people with disabilities, but also benefit people with none.So, maybe we can say Universal Design = Accessible Design
There are about 20% of population has some kind of disability. So, if our design is accessible to those people. That means we can increase our product’s user/customer base.--The figure is based on information provided on WebAIM (http://webaim.org/intro/). It’s only an estimated average percentage based on different studies.
Some countries required your products must be accessible to all people without discrimination.In US, section 508 applies to all Federal agencies when they develop, buy, or use electronic and information technology.UK has DDA (Disability Discrimination Act). It applies to all all websites.There are other countries have similar laws. I will not go through them here. Although Taiwan has not yet developed specific laws or regulations regarding Webaccessibility, it has enacted several legislations and governmental regulations similar to the ADA. Until recently these laws and regulations were mainly concerned with the topics of employment, transportation and public facilities. However, it is only a matter of time before the governmental Web sites in Taiwan come under political and legal challenges for not being accessible to the disabled. It seems likely that in time the Web-based services will be held to the same standards as the services or facility architecture of the physical world in the courts.
If you don’t make your site accessible, then you will be sued.Target.com was sued by National Federation of Blind in 2006, because their website is inaccessible to the blind. It violates California civil rights and disability law.They didn’t provide <alt> tag for images, mouse is required to complete a transaction.This case was settled for 6 million dollars in 2008.--Resources:http://webdesign.about.com/b/2008/09/05/reader-commentary-target-accessibility-lawsuit-settled.htmhttp://2008.gr0w.com/articles/design/target_sued_for_poor_web_site_accessibility/index.phpImage source: http://www.brandchannel.com/images/FeaturesWebwatch/196_webwatch_img1_target.gif
We could get sued too. We are still safe simply because no one sued us yet.
So, let’s see what kind of people we also need to design for when we talk about accessibility.
Basically, we need to design for people with different kind of disabilities.They have different kind of problems access or use the content or information.They reply on Assistive Technology to help access content. Assistive Technology are devices like: screen reader, screen magnifier, or Braille Display.
When talking about accessibility on design, color blind is usually the one people first think of:Color blind people have problem distinguish certain kinds of colors. (or it’s called hue in graphic design)Protanopia: less sensitive to red (they have problem distinguish between red and green)Deuteranopis: less sensitive to green (they have problem distinguish between red and green)Tritanopia: less sensitive to blue (they have problem distinguish blue and green)Some of them use specialized style sheet that has high contrast to override yours. ---Image(http://www.zeldesoptometry.com/color-blindness.gif)
People with low vision have difficulties reading small text or contents with low contrast.So, they will use Screen Magnifier, or enlarge font size with machine/browser settings. Some also use special style sheet that has bigger font sizes to override yours.However, if you put style together with your content. Then they will have problem to be overridden or control by machine settings.
People who are blind cannot see anything at all. So, they don’t use mouse at all since they cannot see where the mouse cursor is on screen.Blind people usually use Screen Reader like JAWS to read out screen content for them. Or they use refreshable Braille Display, so that they can touch and read.
People with hearing loss cannot hear sound, so they must rely on visual information.The common problems they will have are video/audio recording with no caption, subtitles, or transcripts.Also, audio only feedback message is a problem to them as well.
Some people who has physical disabilities have problem using mouse. It might be because they don’t have hands or their hands are shaking (like Parkinson diseases). So that they cannot use mouse to do fine control.They rely on keyboard to use computer. So, even need to use mouth or head stick to use keyboard because they have no hands or cannot control their hands. It makes them even slower to do the input.Some also use voice input or voice recognition to input and use computers.---Image source: http://c.photoshelter.com/img-get/I0000OBY_ObQMSzI/s
ADHD or ADD is the acronym for: Attention Deficit Hyperactivity DisorderIt refers to people who have problem to focus and comprehend information. People who have ADHD doesn’t mean they are not smart. They are simply hard to focus and sit on doing one thing for a period of time, because they are easily get distracted. So it makes them hard to learn. It is counted as a kind of leaning difficulty.To help people with ADD to read, they usually use Text-to-Speech devices: like Reading pen or screen reader. So that they can not only read the content but also hear the content at the same time.----ADHD is a problem with inattentiveness, over-activity, impulsivity, or a combination. For these problems to be diagnosed as ADHD, they must be out of the normal range for a child's age and development.The symptoms of ADHD are divided into inattentiveness, and hyperactivity and impulsivity.Some children with ADHD primarily have the inattentive type, some the hyperactive-impulsive type, and some the combined type. Those with the inattentive type are less disruptive and are more likely to miss being diagnosed with ADHD.Inattention symptoms:Fails to give close attention to details or makes careless mistakes in schoolworkHas difficulty sustaining attention in tasks or playDoes not seem to listen when spoken to directlyDoes not follow through on instructions and fails to finish schoolwork, chores, or duties in the workplaceHas difficulty organizing tasks and activitiesAvoids or dislikes tasks that require sustained mental effort (such as schoolwork)Often loses toys, assignments, pencils, books, or tools needed for tasks or activitiesIs easily distractedIs often forgetful in daily activitiesHyperactivity symptoms:Fidgets with hands or feet or squirms in seatLeaves seat when remaining seated is expectedRuns about or climbs in inappropriate situationsHas difficulty playing quietlyIs often "on the go," acts as if "driven by a motor," talks excessivelyImpulsivity symptoms:Blurts out answers before questions have been completedHas difficulty awaiting turnInterrupts or intrudes on others (butts into conversations or games)Many ADHD children have a difficult time learning because they have a hard time comprehending the reading material. For many students, having the material read to them will help them comprehend the material better.Image(http://previous.presstv.ir/photo/20100930/torabi20100930014924653.jpg)
People with Dyslexia have learning difficulties: like Reading, Writing, or Spelling. They usually have poor short-term memory too. There are actually many different kind of symptoms.Like people with ADHD, TTS people with Dyslexia not rely solely on reading.Also, Spellcheckers help them to prevent errors.---"Dyslexia is a brain-based type of learning disability that specifically impairs a person's ability to readAlthough the disorder varies from person to person, common characteristics among people with dyslexia are difficulty with spelling, phonological processing (the manipulation of sounds), and/or rapid visual-verbal responding.In adults, dyslexia usually occurs after a brain injury or in the context of dementia. It can also be inherited in some families, and recent studies have identified a number of genes that may predispose an individual to developing dyslexia"---image(http://mta.hu/data/cikk/12/60/78/cikk_126078/dyslexia.jpg)
Some of you might think that those are their problems, they have less concern to us. However, the truth is…
We all might get injured sometime.---Image source: http://www.wordpress.tokyotimes.org/archives/arm.jpg
We grow old some day.When people get old, we will have : low vision, hearing problem, and we become slow. Our short term memory is failing as we grow old. It is said that the magic number of 7 about people’s short term memory decrease as we grow old.
We also use mobile phone to access the web.Mobile phone has small screen, so the text could be small.We use mobile phone in different kind of environments. The environment could be very noisy; like in public places. We sometimes mute sound because we don’t want to bother others or draw attention from others. And that make us like people with hearing loss.Not every phones have touch screen input like smart phone does. Many feature phones still have only 5-way navigation keypad.Also, when we use phones under bright sunlight. We will have problem reading the contents if it doesn’t have enough contrast.We called these as “Situational Disability” We all might or will become disabled under certain situations.--Image(http://www.textually.org/textually/archives/2010/06/10/Visor%20hands%20on_JPG_autothumb_w-550_scale.jpeg)
OK, so if you are convinced that we need to make our design more accessible. Let’s see some basic techniques.
These are general design principles that apply to most of the people with different kind of difficulties.We need to create our web content with Semantic Markups. So that the content will be more accessible to Assistive Technology that is used by people with disabilities. Semantic tags tell machine what’s the purpose of those content. So that machine can decide how to do with them.For example, using heading tags will enable the blinds to ‘skim ‘through information on screen with screen reader. Screen reader can read through only headings so that the user can have an overview of the content. It’s the same way we skim through headings on screen, and then decide which one to dig into and read more in detail.Also, if we use the new tags in HTML5 like <nav>, <footer>, or <header>. Then people who use screen reader can skip them when necessary. If we only use <div> tag, then the user and machine don’t know what they are.People that can see rely on the visual styles that are used on the headings. Headings are usually carry more visual weights; they are usually bigger, bolder, or applied with prominent colors. However, for people who cannot see they cannot perceive those visual information at all. We need to separate visual style from contents by not using inline style. So that the visual style can be overridden or controlled by machine settings.We also need to make our design have consistent structure. So that it’s more predictable. Consistency design benefit people with learning disability. Also, for people who use screen reader they can be more easily to predict and decide whether the same content can be skipped.
Screen reader will read content in <alt>When writing <alt> content, describe the content of the image. It should be the same information as you intent to communicate to those with no visual problems.Not all the image should be tagged with <alt>. Those images used simply for visual decoration with no useful information should be make with empty <alt>. So that screen reader can ignore and not read those decorative images.Better yet, use CSS instead of putting them in HTML. So that decorative images are defined in style sheet; not in HTML that contains content.---http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/image-alt-text.shtml
Contrast is the key for color blind people to tell the difference. It’s still possible to use red and green color and still can be read by red-green color blind. For example, use orange red with green. W3C standard suggests that the contrast ratio must be at least 4.5 to 1. So that the information is more readable and can be distinguished.Also, if you try to use color to communicate information. It is better and safer to use additional cues like: shapes, text, etc. So that the difference is more noticeable.
For people who have low vision, high contrast is still necessary for them to read.Also, we need to avoid use fixed font size. So that it is adjustable to machine or browser settings.
Hearing impaired cannot hear audio in audio or video recording. So, subtitles, captions, or transcripts should be provided. Also, when you try to communicate feedback (or alert). Don’t rely only on acoustic feedback only. Use other modality of feedbacks too. Like visual and tactile (vibration).
We need to make our design accessible to keyboard as well. Don’t rely on mouse input only.To do that, we need to maintain logical tabbing orders, so that user can tab through links or input fields with Tab key.It’s better that we can provide access key shortcut. So that it is easier for users to jump to or launch a function.Also, if you need to have time out on your design. Ensure that you have provide enough time for users to read and use the content. Remember, some people have slow input.
When we are design for people with cognitive disability:Try to make things easier for them to understand:We can use illustration to show complex concept. Not just textWe can write direct and simple sentences. So, the information is communicated directly without extra interpretation.We can also use design technique to have user to focus on important information. We can organize and structure information to make it more readable and digestibleConstant moving objects draw user’s attention. However, if you have an item that keeps moving on screen. It makes people hard to focus on anything else on screen. Especially for those with ADD. If you really need to use the technique, make it play only for limited times. Or allow users to turn it off.Also, the flashing image not only distract people. It might also cause seizure to some people if it’s not used properly. A famous case is that Pokemon caused many people seizure in Japan, because of the flashing.
All of above are just small parts of design principles covered in WCAG. A W3C standard. WCAG on W3C site not only provide guidelines but also techniques about how to do it.WCAG is the standard we can use because:It overlaps with guidelines deifined in Section 508.Also, It will be used to asses a website’s accessibility when you get sued.I think next time my topic will cover detailed guidelines listed in WCAG.
