Hans Hillen (TPG) Steve Faulkner (TPG) 02 / 25 / 13 Accessibility of HTML5 and Rich Internet Applications - CSUN 2013 1.

Slides:



Advertisements
Similar presentations
JQuery UI A11Y Tips, Tricks and Pitfalls jQUery UI ARIA Hackathon 2011 Hans Hillen, TPG.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
MS® PowerPoint.
Step-by-Step: Add a Graphical Hyperlink USE the Special Events Final presentation that is still open from the previous exercise. 1.Go to slide 4, and click.
MS Word Advanced Training
Chapter 3 Creating a Business Letter with a Letterhead and Table
Microsoft Office XP Microsoft Excel
The Paciello Group Accessing Higher Ground, 2014.
ARIA Web Design and Development Patterns KEITH HAYS IT Accessibility Specialist CITES / ITaccess
Overview Lesson 1. Objectives Step-by-Step: Start Excel 1.Click the Start menu, and then click All Programs. 2.On the list of programs, click Microsoft.
1. Chapter 29 Creating Forms 3 Understanding Forms Word enables you to create fill-in forms to eliminate the need for storing pre-printed forms. Add.
EXCEL Spreadsheet Basics
Microsoft Word 2010 Lesson 1: Introduction to Word.
Chapter 2 Creating a Research Paper with Citations and References
Office 2003 Post-Advanced Concepts and Techniques M i c r o s o f t Word Project 7 Creating an Online Form.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Hans Hillen (TPG) Steve Faulkner (TPG) 03 / 15 / 11Accessibility of HTML5 and Rich Internet Applications - CSUN
ARIA Support on Mobile Browsers
Using Microsoft Outlook: Basics. Objectives Guided Tour of Outlook –Identification –Views Basics –Contacts –Folders –Web Access Q&A.
CPIT 102 CHAPTER 2 USING INTERMEDIATE FORMATTING TECHNIQUES.
ARIA + HTML5 Steve Faulkner & Hans Hillen. DIVING IN TO SOME HTML5 Details/summary Dialog Spin button slider ARIA rules HTML/ARIA validation Tools.
LOGO Chapter V Formattings 1. LOGO Overview  Conditional formatting  Working with tables  Filtering  Sorting  Freeze panes  Pivot tables  How to.
Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus.
© 2002 ComputerPREP, Inc. All rights reserved. Word 2000: Working with Long Documents.
An Introduction to WAI-ARIA Dan Jackson Web Team Leader City University London.
© 2008 IBM Corporation Emerging Internet Technologies Real World Accessibility with ARIA Becky Gibson Web Accessibility Architect.
Real World Accessibility Becky Gibson Dojo Accessibility Lead IBM Web Accessibility Architect.
Development of Accessible E-documents and Programs for the Visually Impaired WAI-ARIA (V2011)
ARIA + HTML5 Steve Faulkner & Hans Hillen The Paciello Group.
Chapter 2 Creating a Research Paper with References and Sources Microsoft Word 2013.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.
Hans Hillen (TPG) Steve Faulkner (TPG) Karl Groves (TPG) Billy Gregory (TPG)
Accessibility of HTML5 and Rich Internet Applications (Part 2) Hans Hillen Steve Faulkner.
Website Development with Dreamweaver
CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page.
Microsoft Word 2000 Presentation 5. Major Word Topics Columns Tables Lists.
IC 3 BASICS, Internet and Computing Core Certification Key Applications Lesson 10 Creating and Formatting an Excel Worksheet.
This tutorial teaches Microsoft Word basics. Although knowledge of how to navigate in a Windows environment is helpful, this tutorial was created for.
Accessible DOM scripting with ARIA Léonie Watson
 Whether using paper forms or forms on the web, forms are used for gathering information. User enter information into designated areas, or fields. Forms.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
IC 3 BASICS, Internet and Computing Core Certification Key Applications Lesson 11 Organizing the Worksheet.
Lesson 2 Basic editing Word 2013.
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
© 2008 The McGraw-Hill Companies, Inc. All rights reserved. WORD 2007 M I C R O S O F T ® THE PROFESSIONAL APPROACH S E R I E S Lesson 15 Advanced Tables.
Steve Faulkner & Hans Hillen & Karl Groves & Billy Gregory The Paciello Group.
Layers, Image Maps, and Navigation Bars
Key Applications Module Lesson 17 — Organizing Worksheets Computer Literacy BASICS.
Aria Roles Informing assistive technology. What are Aria Roles A way of conveying the role or state of content or functionality. Accessible Rich Internet.
Lesson 1 - Understanding the Word Window and Creating a New Document
Work with Tables and Database Records Lesson 3. NAVIGATING AMONG RECORDS Access users who prefer using the keyboard to navigate records can press keys.
ARIA Support on Mobile Browsers Jonathan Avila Chief Accessibility Officer, SSB BART Group.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
1. Chapter 8 Inserting Elements and Navigating in a Document.
Week 8.  Form controls  Accessibility with ARIA.
Word Create a basic TOC. Course contents Overview: table of contents basics Lesson 1: About tables of contents Lesson 2: Format your table of contents.
Positioning Objects with CSS and Tables
Microsoft Office 2013 Try It! Chapter 4 Storing Data in Access.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Word and the Writing Process. To create a document 1.On the Start menu, point to Programs, and then click Microsoft Word. A new document opens in Normal.
Chapter 11 Collaboration Features for Workbooks Microsoft Excel 2013.
1 Chapter 15 Creating a Presentation. Practical Computer Literacy, 2 nd edition Chapter 15 2 What’s inside and on the CD? In this chapter, you will learn.
Key Applications Module Lesson 12 — Word Essentials Computer Literacy BASICS.
Chapter 8 Using Document Collaboration, Integration, and Charting Tools Microsoft Word 2013.
CARA 3.10 Major New Features
Benchmark Series Microsoft Word 2016 Level 2
DREAMWEAVER MX 2004 Chapter 3 Working with Tables
Word offers a number of features to help you streamline the formatting of documents. In this chapter, you will learn how to use predesigned building blocks.
HIBBs is a program of the Global Health Informatics Partnership Learning the Basics of Microsoft Word 2019 and Microsoft office support TFN
Chapter 8 Using Document Collaboration and Integration Tools
Presentation transcript:

Hans Hillen (TPG) Steve Faulkner (TPG) 02 / 25 / 13 Accessibility of HTML5 and Rich Internet Applications - CSUN

 Keyboard and Focus Management Keyboard and Focus Management  Labeling and Describing Labeling and Describing  Live Regions Live Regions  Form Validation Form Validation  Mode Conflicts Mode Conflicts  Fallback Solutions Fallback Solutions 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20132

02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20133

Problem:  Images, divs, spans etc. are not standard controls with defined behaviors o Not focusable with keyboard o Have a default tab order o Behavior is unknown Solution:  Ideally: Use native focusable HTML controls o,,, etc.  Or manually define keyboard focus and behavior needs 4Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

 Reachability: Moving keyboard focus to a widget o Through tab order Native focusable controls or tabindex=“0” o Through globally defined shortcut o By activating another widget  Operability: Interacting with a widget o All functionally should be performable through keyboard and mouse input 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20135

 To be accessible, ARIA input widgets need focus o Use natively focusable elements, such as,, etc o Add ‘tabindex’ attribute for non focusable elements, such as,, etc. Tabindex=“0”: Element becomes part of the tab order Tabindex=“-1” (Element is not in tab order, but focusable) o For composite widgets (menus, trees, grids, etc.): Every widget should only have 1 stop in the tab order. Keep track where your widget’s current tab stop is: o Alternative for tabindex: ‘aria-activedescendant=“ ” Focus remains on outer container AT perceives element with the specified ID as being focused. You must manually highlight this active element, e.g. With CSS 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20136

 Every widget needs to be operable by keyboard. common keystrokes are: o Arrow keys o Home, end, page up, page down o Enter, space o ESC  Mimic the navigate in the desktop environment o DHML Style Guide: o ARIA Best Practices: 7Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

 The ability to skip content is crucial for both screen reader and keyboard users  Skip links are out of date, out of fashion and often misused o But keyboard users still need to be able to skip  Other alternatives for skipping: o Collapsible sections o Consistent shortcuts (e.g. a shortcut that moves focus between panes and dialogs) o Custom focus manager that allows the user to move focus into a container to skip its contents 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20138

 More and more web apps use HTML based popup dialogs rather than actual browser windows/dialogs o Get a screen reader to perceive it properly using role="dialog"  Dialogs should have their own tab order o Focus should "wrap"  For modal dialogs, it should not be possible to interact with the main page o Prevent keyboard access o Virtual mode access can't be prevented  For non modal dialogs, provide shortcut to switch between dialog and main page  If dialog supports moving or resizing, these features must be keyboard accessible  Support closing dialogs using Enter (OK) or Escape (Cancel) keys o Focus should be placed back on a logical element, e.g. the button that triggered the dialog. 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN 20139

 Trees, Lists, Grids can support single or multiple selection o Multiple selection must be keyboard accessible, for example: Shift + arrow keys: contiguous selection Ctrl + arrow keys: move focus without selection Ctrl + space: Toggle focused item in selection (discontiguous selection)  Editable grids need to support switching to edit mode by keyboard 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 All of these must have an accessible name: o Every interactive widget o Composite widgets (menu(bar), toolbar, tablist, tree, grid) o Groups, regions and landmarks  Browsers determines an element’s accessible name by checking the following : 1. aria-labelledby 2. aria-label 3. Associated label ( ) or alt attribute 4. Text contents 5. Title attribute Optionally, add an accessible description for additional info 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Aria-labelledby=“IDREFS” o Value is one or more IDs of elements that identifiy the widget. o The elements ‘aria-labelledby’ targets can be any kind of text based element, anywhere in the document. o Add multiple Ids to concatinate label text: Multiple elements can label one widget, and one element can label multiple widgets. (example)  Aria-describedby=“IDREFS” o Similar to labelledby, except used for additional description, e.g. Form hints, instructions, etc.  Aria-label o Simply takes a string to be used as label. o Quick and dirty way of making the screen reader say what you want. o Very easy to use, but only supported in Firefox at the moment. My Folders Each tree item has a context menu with more options / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Containers such as toolbars, dialogs, and regions provide context for their contents  When the user moves focus into the container, the screen reader should first announce the container before announcing the focused control Confirm Are you sure you want to do that? Yes No 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 still alive and kicking o In HTML5 it’s allowed to nest headings  Summary attribute obsolete in HTML5 Animals Name Age Species / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Problem: content is updated dynamically on screen may not be apparent to screen reader users o No page refresh, no screen reader announcement o Change is only announced by stealing focus o Users miss relevant information o Users have to ‘search’ for updated page content  Solution: live regions indicate page updates without losing focus o Screen readers announce change based on type of live region  Challenge: When should users be informed of the change? o Ignore trivial changes: changing seconds in a clock o Announce important changes immediately / as convenient 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Role=“alert” for one-time, high-priority notifications o Shown for a period of time, or until the cause of the alert is solved o Basic message, no complex content o The element with the alert role does not need to be focused to be announced  Role=“alertdialog” is similar to alert, but for actual (DHTML) dialogs. o May contain other widgets, such as buttons or other form fields o Does require a sub-element (such as a ‘confirm’ button) to receive focus  Live regions ‘built into ‘ roles’ role="timer", "log", "marquee" or "status“ get default live behavior Role=“alert” implicitly sets live to assertive 18Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

1. Identify which part (containing HTML element) is expected to be updated 2. To make it live, add ‘ aria-live ’ attribute with a politeness value: o Off (default): Do not speak this region o Polite: Speak this region when the user is idle o Assertive: Speak this region as soon as possible 3. Choose whether entire region should be announced or just the part that changed: o ‘ aria-atomic ': true (all) or false (part) 4. Add other attributes as necessary: o aria-relevant : choose what to announce: Combination of ‘Additions’, ‘removals’, ‘text’, ‘all’ o aria-busy : indicate content is still updating o aria-labelledby, aria-describedby : label and describe regions 19Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

Accessibility of HTML5 and Rich Internet Applications - CSUN

 You can used ARIA to make your form validation easier to manage. o aria-required & aria-invalid states o Role="alert" to flag validation errors immediately  Use validation summaries invalid entries easier to find o Use role=“group” or Role="alertdialog" to mark up the summary o Link to corresponding invalid controls from summary items o Use different scope levels if necessary  Visual tooltips: Useful for validation messages and formatting instructions o Tooltips must be keyboard accessible o Tooltip text must be associated with the form control using aria-describedby  Live Regions: Use for concise feedback messages 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Screen readers normally browse in ‘virtual mode’ o Navigates a virtual copy of the web page o Intercepts all keystrokes for its own navigation (e.g. ‘H’ for heading navigation)  For dynamic Web apps, virtual mode may need to be turned off o Interactive widgets need to define the keystrokes themselves o Content needs to be live, not a virtual copy o Automatically switches between virtual and non-virtual mode  role=“application” o Screen reader switches to non-virtual for these elements o Must provide all keyboard navigation when in role=“application” mode o Screen readers don’t intercept keystrokes then, so typical functions will not work 23Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

 For apps with ‘reading’ or ‘editing’ sections o A reading pane in an client o Screen reader switches back to virtual mode, standard ‘web page reading’ shortcuts work again o Read / edit documents in a web application  Banner, complementary, contentinfo, main, navigation, search & form  When applied to a container inside an application role, the screen reader switches to virtual mode. 24Accessibility of HTML5 and Rich Internet Applications - CSUN / 25 / 13

Accessibility of HTML5 and Rich Internet Applications - CSUN

 Role=“presentation” overrides existing role o Useful to ‘hide’ default HTML roles from AT  For example: o Hide layout tables by adding the role to the element o Textual content read by the screen reader but table is ignored 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 In IE, some versions of JAWS currently does not properly announce dialogs when moving focus into them  It's possible to provide a fallback solution for IE to fix this, using hidden fieldsets to apply the ARIA dialog markup to o Hide fieldset's padding, margin, and border o Move legend off-screen Confirm Are you sure you want to do that? Yes No 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Developers often use links as (icon) buttons o Side effect: screen reader will announce them as a link, not a button  This can be made accessible by setting role="button" o Screen reader announces link as button now, but also provides hint for using a button ("press" space to activate) You lie! Links work through the Enter key, Space will scroll down the page o To make sure JAWS is not lying, you'll have to manually add a key event handler for the Space key. refresh 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Three types of hiding: 1. Hiding content visually and from AT: 2. Hiding content visually, but not from AT 3. Hiding content from AT, but not visually 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Display: none; o Hides content both visually and from AT products o Only works when CSS is supported (by user agent, user, or AT product) o Only use to hide content that still ‘makes sense’ E.g. contents of a collapsible section o Do not use for content that provides incorrect information E.g. preloaded error messages that are not applicable at the moment, or stale content Instead, this content should be removed from the DOM completely 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Hiding content off-screen will still make it available for screen readers, without it being visible  Useful to provide extra information to screen reader users or users that do not support CSS o E.g. add hidden headings, screen reader instructions, role & state info for older technology /* Old */.offscreen { position: absolute; left: -999em; } /* New */.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Sometimes developers want to hide content from screen readers, e.g.: o Duplicate controls o Redundant information that was already provided through semantic markup.  Difficult to achieve: o Role=“presentation” will remove native role, but content is still visible for AT products o Aria-hidden=“true” would be ideal, but: Browsers handle aria-hidden differently IE does nothing FF exposes content but marks it as hidden Chrome does not expose content (i.e. truly hides it) 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

A Small Font 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN  JAWS 14 and NVDA will honor aria-hidden in IE, Firefox and Chrome o regardless of whether the browsers actually expose it!  VoiceOver does not honor aria-hidden at this point

02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Some developers will use multiple HTML elements to create one single grid. For example: o One for the header row, one for the body rows o One for every single row  Why? Because this is easier to manage, style, position, drag & drop, etc.  Screen reader does not perceive one single table, but it sees two ore more separate tables o Association between column headers and cells is broken o Screen reader's table navigation is broken 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 If using a single table is not feasible, use ARIA to fix the grid structure as perceived by the screen reader o Use role="presentation" to hide the original table elements form the screen readers o Use a combination of "grid", "row", "gridcell", "columnheader" roles to make the screen reader see one big grid. 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Using ARIA to create a correct grid structure Dog Names Cat Names Cow names Fido Whiskers Clarabella 02 / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN

 Questions?  Additional Topics?  Course Material: / 25 / 13Accessibility of HTML5 and Rich Internet Applications - CSUN