USA:+1-703-445-4802
India:+91-8143111555 / +91-8790216888
Whats app: +91-8143110555
Uncategories Mobile Web Accessibility Testing and Development Training in Hyderabad India

Mobile Web Accessibility Testing and Development Training in Hyderabad India

Mobile Web Accessibility Testing and Development



Duration: 10hrs

Course Content:

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)
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)
ARIA Landmarks & Forms Exercise
HTML5
  • HTML5 Input Types
  • HTML5 Structural Elements
  • placeholder
  • required attribute native HTML5 validation
  • <canvas> <svg>
  • <audio> <video> <track>
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?)
Expandable RWD Section Exercise

 Mobile Accessibility Testing Tools
  • Browser Extensions
  • Mobile User Agent Switching
  • Mobile Web Inspecting to Debug Accessibility Issues
  • JavaScript Bookmarklets
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