Download to read offline
Uploaded byTomáš Muchka
Accessibility of Common Web Applications
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.
Accessibility of Common Web Applications
- 1. Accessibility Mostly on webapps Tomáš Muchka tomas.muchka@hpe.com
- 2. Accessibility is thinkingabout all kinds of people
- 3.
- 4. Blind people (0.5%) Visualimpairment (4.39%)
- 5. Blind people (0.5%) Visualimpairment (4.39%) Color blindness (10%)
- 6. All disabled people(15-20%) Blind people (0.5%) Visual impairment (4.39%) Color blindness (10%)
- 7. How is itto be visually impaired? Around 10 – 15% of all people
- 8.
- 9. Age related Maculardegeneration
- 10.
- 11.
- 12.
- 13.
- 14. How do wefeel colors?
- 15.
- 16. Achromatopsia Around 0.1% ofall people
- 17. Protanopia Around 1% ofall people
- 18. Deuteranopia Around 1.3% ofall people
- 19. Tritanopia Around 0.02% ofall people
- 20. How is itto have a motor impairment? Up to 5% of all people
- 21. Imagine there isno 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.
- 22. What element isfocused at the moment?
- 23. Browser could helpus a little bit.
- 24. It was theDesktop category.
- 26. Tab through allthe links in the left menu
- 27. Tab through allthe links in the left menu And all the interactive elements in the page body
- 29. Tabbing the elementswith yellow borders in cycle. No chance to escape.
- 30. Don‘t reinvent thewheel…
- 31. Section 508, WCAG,Mandate 376
- 32. What properties musthave web content?
- 33. Information and userinterface components must be presentable to users in ways they can perceive Web content must be perceivable
- 34. All non-text contentthat is presented to the user has a text alternative that serves the equivalent purpose. Text Alternatives
- 35. Could you describethe buttons bellow?
- 36. And now? Disabled persondoesn‘t have this view!
- 37. Create content thatcan be presented in different ways (for example simpler layout) without losing information or structure. Adaptable Content
- 39. Make it easierfor users to see and hear content including separating foreground from background. Distinguishable
- 40.
- 41. Text size scaledto 200%
- 42. What you seewhen you don‘t have any disability
- 43. What you seewhen you need a little accessibility help
- 44. What you seewhen you have strong accessibility impairment
- 45. User interface componentsand navigation must be operable Web content must be operable
- 46. Make all functionalityavailable from a keyboard. Keyboard Accessible
- 47. Do you rememberkeyboard traps? That‘s when you cannot leave a limited area on the page.
- 48. Provide users enoughtime to read and use content. Enough Time
- 49. For some peopleare real-time data difficult to read.
- 50. Give them achance to stop updating the content so they have enough time to read all the important values.
- 51. Do not designcontent in a way that is known to cause seizures. Seizures
- 52. Sometimes it ison purpose, but don‘t do it in someones future work tool.
- 53. Provide ways tohelp users navigate, find content, and determine where they are. Navigable
- 55. Information and theoperation of user interface must be understandable Web content must be understandable
- 56. Make text contentreadable. Readable
- 57. Make Web pagesappear and operate in predictable ways. Predictable
- 58. Help users avoidand correct mistakes. Input Assistance
- 60. Visit the pageand try to find all accessibility violations.
- 61. Content must berobust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies Web content must be robust
- 63. Try your creations http://www.elsa.cvut.cz/http://carolina.mff.cuni.cz/
- 64.
- 65.
- 66. How blind peopleuse smart phone?
Editor's Notes
- #7 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/
- #10 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.
- #11 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.
- #12 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.
- #13 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.
- #15 Slide about How do we feel colors Rods – contrast perception and peripheral vision Cones – color perception
- #17 Slide about Achromatopsia Achromatipsia – missing all the cones
- #18 Slide about Protanopia Protanopia – missing the red cones
- #19 Slide about Deuteranopia Deuteranopia – missing the green cones
- #20 Slide about Tritanopia Tritanopia – missing the blue cones
- #21 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.
- #26 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.
- #29 Slide with an example of a keyboard trap An example of a keyboard trap
- #32 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.
- #35 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.
- #39 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
- #40 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.
- #41 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
- #42 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
- #43 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
- #47 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.
- #49 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
- #52 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.
- #53 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.
- #54 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
- #57 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.
- #58 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.
- #59 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
- #60 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.
- #62 Slide about robust content Valid code and semantic web pages
- #63 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 -
- #64 Slide about tesing the software Test your software for accessibility Browser add-ons Accessibility tools Specialized centers