Doing Responsive Right: Accessibility Lessons for Mobile Design

Overview

Explore accessibility challenges and solutions in responsive web design through this conference talk from Mobilism 2013. Learn how mobile computing devices utilize technology originally designed for accessibility, and discover the significant overlap between mobile and accessibility best practices. Examine why using responsive web design techniques doesn't automatically ensure accessibility, and delve into the deep analysis of design patterns, layout, and interaction required to create truly accessible responsive designs. Gain insights into common accessibility issues in responsive designs, learn practical solutions, and understand guiding principles for optimizing user experiences for everyone, including people with disabilities. Cover topics such as mobile-first design, web standards, proximity, vertical stacking, quick consumption design, effective use of headings, redefining ease of use, and the impact of layout changes on interaction, markup, and accessibility properties. Investigate challenges with sliding animations, flexbox implementations, and orientation changes in responsive designs.

Syllabus

Intro
The web's greatest strength, I believe, is often seen as a limitation as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all
Mobile First Design
Using Web Standards
Understand Proximity
Embrace the Vertical Stack
Design for Quick Consumption
USE HEADINGS TO YOUR ADVANTAGE
Redefine Easy
LESSON Change layout? Change interaction
A change in layout/display may require a change in: interaction, role (markup), source order, alt text, state or other property
Change orientation? Beware of overlap
LESSONS Sliding animations: lost focus.
LESSON 10 Flexbox. Screen readers see the source.