Can a modal dialog be made to work properly for screen-reader users on the web? | Everett Zufelt A while back I started a discussion in the jQuery Accessibility group: Screen-readers and UI modal dialog. I was really happy with the quality of the discussion that my question generated, and thought I'd take a moment to share some of my thoughts and conclusions. I want to be clear that the ideas that I am sharing here were only made possible through the people who were so willing to collaborate with me in this discussion. What is a dialog? A dialog is a little window or box that pops up over-top of the window that you are currently working in and generally asks you a pretty simple question. On the web there are two ways that a dialog can be generated. Note: that using a client-side-scripting language you can invoke some types of browser dialogs. What is the challenge for screen-reader users? Being a screen-reader user I tested several modal dialogs, including the jQuery modal dialog, with several screen-reader / browser combinations. Technologies Results of Testing Firefox 3.6 and JAWS 11
s WCAG 2.0 Checklist You are here: Home > Articles > WCAG > WCAG 2 Checklist Important! The following is NOT the Web Content Accessibility Guidelines (WCAG) 2. It is a checklist that presents our recommendations for implementing accessibility principles and techniques for those seeking WCAG conformance. The language used here significantly simplifies and condenses the official WCAG 2.1 specification and supporting materials to make it easier to implement and verify for web pages. Guidelines for using this checklist: This checklist should not be referenced in policies or in policy adoption. Success criteria added in WCAG 2.1 are marked as such and have a light green background. A PDF version of this checklist is also available Perceivable Web content is made available to the senses - sight, hearing, and/or touch Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content Guideline 1.2 Time-based Media: Provide alternatives for time-based media
WCAG 2.0 Overview WCAG 2.0 is divided into four principles. Each principle is divided into guidelines, and guidelines are divided into success criteria. All success criteria is marked by a certain level of conformance. Four Principles The four principles are the following: It is not essential to remember the principles, their only purpose is to order the many guidelines into a logical order. Guidelines Altogether, there are 12 guidelines under the four principles. Success Criteria This is where things get interesting. Three Levels of Conformance Each success criterion is indicated by a level of conformance, which could be Level A, Level AA and Level AAA. Level A: when you conform with Level A, it means that you eliminate the major accessibility barriers. Level AA: this conformance level ensures a very good level of accessibility. Level AAA: this conformance level is very meticulous, ensures a very high level of accessibility, but it is also very difficult to maintain.
Mapping Section 508 to WCAG 2.0 Wayne Dick and Tom Jewett This is a summary of a presentation that we gave at the 2009 International Conference on Technology and Persons with Disabilities (CSUN), titled “How to Use W3C Guidelines to Achieve Legally Compliant Web Sites.” Also contained here, but not presented in that talk, is a listing of the suggested WCAG 2.0 techniques for each of the Section 508 paragraphs 1194.22 (a)–(p). Introduction At first glance, the new World-Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 may seem to be “just more work” for developers who believe that they are “only required” to meet legal standards such as Section 508 of the (United States) Rehabilitation Act. WCAG 2.0 techniques can be used to unambiguously meet every one of the Section 508 guidelines. The mapping strategy We state the need for this criterion: “Non textual information like pictures, graphs or charts cannot be perceived by many users. Suggested techniques Text alternatives Multimedia Color Style sheets
Designing for Screen Reader Compatibility You are here: Home > Articles > Designing for Screen Reader Compatibility Overview Screen readers are audio interfaces. Screen readers do not read web content quite like human beings do. Two of the most common screen readers are JAWS, by Freedom Scientific, and Window Eyes, by GW Micro. Content Linearization Audio interfaces present content linearly to users, one item at a time. Skimming Through Content Despite the linear nature of audio interfaces, there are some ways in which screen reader users can "skim" through the content. Headings Another way to skim the page to get an overall impression of a page's content is to jump from heading to heading. Implication: Authors should organize content with headings. Landmarks and page sections Users can navigate via ARIA landmarks and HTML5 sectioning elements, such as <main>, <nav>, <header>, etc. Implication: Define appropriate ARIA landmarks and use HTML5 elements appropriately. Paragraphs and page elements "Skip navigation" links Others Important
Screen Reader User Survey #4 Demographics Region Disability Reported Screen Reader Proficiency Screen reader proficiency of respondents has increased in each successive survey. Internet Proficiency Internet proficiency has generally remained the same across all surveys. Devices Used When considering respondents who indicated that they use multiple devices, 1058 respondents (59%) use both a desktop computer and a laptop. 739 respondents (41%) use a screen reader on all three devices. Operating System Operating system data above was detected from the system used to complete the survey. Primary Screen Reader While JAWS is still the most popular screen reader, it has seen a significant decline in primary usage - down to 49% from 66.4% in October 2009 and 59.2% in December 2010. It is clear that screen reader users are abandoning more expensive primary screen readers for free and low-cost alternatives. Regional differences are also of note. Screen Readers Commonly Used Screen Reader Updates Reasons for Use Braille Output Browsers
Talk is cheap – screen reader testing on mobile | » Henny Swan's blog Testing your content on mobile need not be as painful as you think. If you have an Android and iOS device then you already either have a free mobile screen reader in your pocket or it’s a short download away. This is a quick guide to get you set up. I’ve not covered Nokia/Talks as Talks is costly at over £200 in the UK. There are so many mobile devices, browsers, OS’s and screen readers out there it can be hard to know where to start but you can’t cover them all and you have to start somewhere. The bottom line is that talk is cheap: the screen reader options listed here are free, or comparatively cheap, and widely available so there really is little excuse to not be testing website and web apps on mobile. Android OS: Android 2.2.2 (Froyo), Android 2.3.7 (Gingerbread), Android 3.2.2 (Honeycomb), Android 4.4 (Ice-cream sandwich) Android doesn’t have the best speech output support but is one to watch. Enabling speech output on Android: iOS Devices: iPhone 4, 4s, iPod Touch, iPad and iPad2
Web Accessibility for Designers The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript after a site has been designed visually. Optimal accessibility should start much earlier, as part of the visual design process. We have created an infographic that highlights a few important principles of accessible design. Text Version Plan Heading Structure Early Ensure all content and design fits into a logical heading structure. Consider Reading Order The reading order should be the same as the visual order. Provide Good Contrast Be especially careful with light shades of gray, orange, and yellow. Use True Text Whenever Possible True text enlarges better, loads faster, and is easier to translate. Watch the Use of CAPS All caps can be difficult to read and can be read incorrectly by screen readers. Use Adequate Font Size Font size can vary based on the font chosen, but 10 point is usually a minimum. Remember Line Length Don't make it too long or too short. Design Link Focus Indicators
Accessibility What It Is Web accessibility is ensuring that people with any disability type—including motor, auditory, cognitive, seizure/neurological, and visual impairments—are able to use Web content, and ensuring that content is "perceivable, operable, understandable, and robust." Why It's Important In creating an accessible experience, it's essential to understand the needs of each disability type and build agency sites accordingly. Specific Requirements To meet the mandates of Section 508, Web content managers, developers, designers, and all those involved in building government websites, must endeavor to provide all U.S. citizens with timely, usable access to government information. We recommend you provide your organization's accessibility policies. How to Implement Explore our content for help in creating a rich, accessible experience for your website users.