Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Web accessibility
Semelhante a Web accessibility (20)
Último
Último (20)
Web accessibility
- 1. Web Accessibility Introduction March, 2011
- 2. Agenda What is Accessibility? Why design for accessibility? Whom to design for? How to make web designs more accessible?
- 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).
- 6. Why design for accessibility?
- 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/
- 9. Target Accessibility Lawsuit .com Sued by National Federation of Blind in 2006 Settled for $ 6 million In 2008
- 10. We could get sued, too We are still safe now simply because no one sued us, yet
- 11. Whom to design for?
- 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
- 15. Blindness Cannot perceive visual information the Blind Don’t use mouse Read content with: - Screen Reader (E.g. JAWS) - Braille Display
- 16. auditory: Hearing Loss Cannot (/difficult to) hear Rely on Captions / Subtitles / Transcripts for Audio / Video media contents
- 17. motor: Physical Disabilities Problem use mouse Slow input Use Keyboard Mouth or head stick Voice input/recognition
- 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.
- 19. cognitive: Dyslexia Learning difficulties: Reading Spelling Writing Poor short-term memory more… TTS Spell checker
- 21. We might get injured…
- 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
- 34. Thank You
Notas do Editor
- 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.