Digital Accessibility

Mobile Accessibility Best Practices


Description
In this fast-paced world of smartphone technology, a truly functional website must be easily viewable on a wide variety of platforms. Content, applications, and websites must translate effectively to the smaller screen sizes of mobile technology that includes smartphones, tables, laptops, and netbook computers. However, mobile-friendly design involves much more than just shrinking the conventional desktop version to a smaller scale. While consumers often consider mobile-friendly content, apps, and websites to be more user-friendly, developers must first design around certain limitations and constraints associated with this technology.

Mobile-friendly vs. Responsive Design

There are common misconceptions regarding the differences or similarities of mobile-friendly design vs. responsive design. Responsive content, applications, and websites adapt to fit the uniquely-sized screens of individual mobile devices. Meanwhile, mobile-friendly alternatives offer static content that appears nearly identical on the screen regardless of the mobile device. Other key features of each style of design include:

Key Features of Responsive Design
• Dynamic content that adapts to different sized screens
• Condensed navigational menus
• Optimized touch pad sizing and spacing
• Reliant on mobile operating systems
• Optimized images

Key Features of Mobile-Friendly Design
• Static content remains relatively unchanged, regardless of the mobile device
• Simplified navigational features
• Smaller image displays
• Not reliant on mobile operating systems

As is evident from these brief descriptions, most people prefer viewing content, applications, and websites that are “responsive” compared to those that are simply “mobile-friendly.” As a result, responsive design is the preferred choice among experienced developers.
Content
  • (Section 1) Introduction to Mobile Applications and Content
  • WCAG 2.0 Mobile Applications and Content
  • W3C-WAI Guidelines for Mobile-Related Design
  • Quiz #1
  • (Section 2) Principle 1: Perceivable Considerations for Mobile-Related Design
  • Smaller Screen Sizes
  • Zoom and Magnification Features
  • Contrast Features
  • Quiz #2
  • (Section 3) Principle 2: Operable Considerations for Mobile-Related Design
  • Touchscreen and Keyboard Controls Features
  • Touch Target Size and Spacing Features
  • Touchscreen Gestures Features
  • Device Manipulation Gestures Features
  • Button placement for optimum accessibility
  • Quiz #3
  • (Section 4) Principle 3: Understandable Considerations for Mobile Accessibility
  • Screen Orientation Manipulation (Landscape vs. Portrait)
  • Layout Consistency
  • Page scrolling and placement of interactive elements
  • Optimum grouping of interactive elements performing the same action
  • Clear indication of actionable elements
  • Instructional info regarding custom touchscreen and device manipulation gestures
  • Quiz #4
  • (Section 5) Principle 4: Robust Considerations for Mobile Accessibiliy
  • Coordinate virtual keyboard with required protocols for data entry
  • Provide easy methods for data entry
  • Support platform-specific characteristics and properties
  • Quiz #5
  • Survey
Completion rules
  • All units must be completed
  • Leads to a certificate with a duration: Forever