Mobile Accessibility, Part 1: Mobile Web Accessibility Testing and Development

In this one day introduction to mobile accessibility workshop attendees will learn Mobile Web Accessibility, How to Test with Mobile Screen Readers, JavaScript/HTML5/WAI-ARIA/CSS3 Mobile Accessibility Techniques, Mobile Frameworks, Responsive Web Design, Mobile Accessibility Testing Tools, and an Introduction to Native iOS and Android Accessibility Testing.

Workshop format is structured to progress from the basics of mobile HTML accessibility through manual screen reader testing, testing of before and after demos of JavaScript/WAI-ARIA forms and widgets, to HTML5 accessibility, and introduction to Native iOS and Android Accessibility Testing.

Attendees should bring iOS and Android devices along with their laptops and headphones as there will be hands-on mobile accessibility testing group projects.

There will be group accessibility testing and development projects to encourage collaboration and networking among attendees. Group projects will include testing mobile websites for accessibility problems, creating a simple report of issues, comparing test findings with group partners, brainstorming recommendations to fix accessibility issues, and sharing results with the class to prompt discussion.

Please note that this class is only available at our training center in Austin, TX or can be delivered virtually.

Groups Activities Will Include:

• Manual Mobile Web Accessibility Testing & Reporting Exercises
• Discussion & Development of Mobile Accessibility Remediation Solutions
• Exploration of Automated Tools & Presentation of Pros/Cons of Testing Tools
• Native Accessibility Testing Exercise and Findings Presentation

1 day

Those who are new to the field of accessibility testing.

None

Knowledge and skills learners will gain from the workshop:

• Hands-On Mobile Accessibility Testing with the VoiceOver for iOS and TalkBack for Android screen readers. Manual Accessibility Testing techniques and Automated Testing tools
• HTML & WAI-ARIA Accessibility APIs applied to Android and iOS Mobile Web and Hybrid Apps. Common accessibility problems and solutions for Responsive Web Design and Mobile Web Apps
• Using HTML5, JavaScript, and CSS3 to enhance the accessibility of mobile sites and apps
• Mobile web accessibility debugging and source code inspection
• Differences between pure native apps vs. hybrid/mobile-framework single page apps
• Introduction to the basics of Native iOS and Android mobile accessibility

Introductions

• Name, City/Country you’re from?

HTML Accessibility Overview

• Images (Active, Decorative, Informational, CSS Icons, Background Images, etc)
• Headings
• Data Tables
• Forms (Labels, Fieldset/Legend, Error Messages briefly)
• Keyboard & Screen Reader Operable HTML Controls (<input> <button> <a href> tabindex=0/-1)
• Resize Text (Pinch-to-zoom)
• Page Titles (Common problem in single page apps)
• Session Time Outs
• Pause, Stop, Hide (Annoying Slideshows)
• Focus Visible
• Use of Color & Contrast
• Language of Page/Parts (lang=es)
• Skip links

Accessibility Testing with Mobile Screen Readers

• Give Attendees Cheatsheets for iOS & Android
• VoiceOver for iOS
  • Gestures
  • Rotor
  • Keyboard (VO Keys, Quick Nav, Single-Key Quick Nav)
  • Data Table Testing with Vertical Navigation Rotor Option
  • Accessibility Shortcut (Triple-Click Home Button)
  • Virtual Keyboard Settings (Direct-Touch, Standard, Touch Typing)
• TalkBack for Android
  • Explore by Touch
  • Gesture Commands
  • Global and Local Context Menus
  • Android Keyboard Accessibility Testing and Differences from iOS
  • Developer settings > Display speech output
  • High Contrast Text
  • Pause, Enable/Disable Talkback (Accessibility Shortcut)
  • Firefox vs. Chrome
  • Android Fragmentation, Nexus vs. Samsung (Android, TalkBack, & Browser Versions can be different)
  • Firefox Android (3-Finger Swipe Gestures, Keyboard & Quick Nav Keys)

Hands-On Testing Mobile Accessibility with Screen Readers Activity

• Give Attendees Mobile Accessibility QA Checklist
• Test Before and After Demos with iOS VoiceOver or Android TalkBack or Both

JavaScript

• Focus Management & Keyboard Accessibility
• JavaScript Frameworks
• Single Page Apps

WAI-ARIA

• Landmarks
• Enhancing Forms Accessibility with ARIA (-required, -invalid, -describedby, -labelledby)
• Speaking Messages Aloud to Screen Readers with ARIA Live Regions (alert, assertive, polite)
• Accessible Modal Dialogs with ARIA (role=alertdialog, dialog, -describedby, -labelledby, aria-hidden)
• Tabs and Expandable/Collapsable Widgets (aria-expanded, role=tab, aria-selected)

Hands-On ARIA Landmarks & Forms Exercise

HTML5

• HTML5 Input Types
• HTML5 Structural Elements
• placeholder
• required attribute native HTML5 validation
• <canvas> <svg>
• <audio> <video> <track>

Hands-On HTML5 Forms Exercise

CSS Accessibility

• Styling Invalid & Valid Inputs with CSS
• input[aria-invalid=”true”]:required:invalid {background: pink;}
• input:required:valid {background: lightgreen;}
• CSS4 alt for generated content
• CSS3 Speech Verbosity for iOS

Mobile Frameworks

• jQuery Mobile
• Sencha Touch
• Bootstrap

Responsive Web Design

• Hamburger Menus
• Expanding/Collapsing Sections
• Live Demo Accessible RWD sites like: (Any Suggestions from Attendees?)
  • http://www.mainlinebaseball.com

Hands-On Expandable RWD Section Exercise

Mobile Accessibility Testing Tools

• Browser Extensions
• Mobile User Agent Switching
• Mobile Web Inspecting to Debug Accessibility Issues
• JavaScript Bookmarklets

Hands-On Activity Test Before & After Demos with Testing Tools

Native Accessibility in Android & iOS Introduction

• Demo Accessibility Problems with Popular Native Apps like Weather Channel, Instagram, Facebook, Twitter, etc.

Native iOS App Accessibility

• VoiceOver On-Device Testing

Native Android App Accessibility

Hands-On Native iOS or Android Accessibility Testing of Popular Apps Activity

Summary Of What We Learned

• Hand-Outs
• Online Resources
• Future Communication/Collaboration

Live Testing of Audience Chosen Mobile Websites or Apps

• Attendees can suggest a website or app to test or specific questions for live demo