Accessibility, Visual Design, and Front-End Development Presented by: Mitchell Evan and Sam Joehl

Formerly Known As SSB BART Group Who is Level Access? Formerly Known As SSB BART Group New Corporate Identity – Name and Branding New Website – Coming Spring 2017!! No Change in our Innovative Technology or Excellent Service CSUN 2017 Assistive Technology Conference

Show of Hands …or other? CSUN 2017 Assistive Technology Conference Developer Accessibility Specialist Designer …or other? CSUN 2017 Assistive Technology Conference

What we’re talking about today Examples of “hard” accessibility problems Color Contrast Keyboard Accessibility CSUN 2017 Assistive Technology Conference

challenge #1 CONTRAST

CSUN 2017 Assistive Technology Conference Contrast It’s easy to flag non- conformant. What solutions can I offer? Text color Background color Font size or weight Remediation may not be obvious. CSUN 2017 Assistive Technology Conference

Not just a Design… it’s a Design System Source: https://issuu.com/bondo/docs/cisco CSUN 2017 Assistive Technology Conference

What the digital world often looks like today CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Better Examples CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Better Examples CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Better Examples Spare, bold text Subtlety among background colors Illustration and circles add some fun Balanced approach to selected and non- selected navigation links CSUN 2017 Assistive Technology Conference

The Development Lifecycle When can I solve color contrast? Inception Design ideation UI dev architecture Accessibility strategy Systems Design system UI components Iterative support Build Design production Primary development Quality Assurance Release If you discover color problems during QA, it may be too late to fix them before release. CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Challenge #1: Contrast Make a Better Plan Talk to each other, and decide on the plan Who: The designer is mainly responsible When: Early in the development cycle Really, you can do it! If you don’t do it, the pain is bad Start small or go big, whatever works CSUN 2017 Assistive Technology Conference

challenge #2 KEYBOARD

Facets of Keyboard Accessibility Tab Order Focus management for in-page updates Visual focus indication Keystrokes to select or activate CSUN 2017 Assistive Technology Conference

Testing for Keyboard Access Where to start? Tab and Shift+Tab Arrow or Space to select Enter or Space to activate Visual focus indication on all tabbable elements Logical focus location at all times CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Demo… CSUN 2017 Assistive Technology Conference

Keyboard accessibility is a shared responsibility Who does it? Keyboard accessibility is a shared responsibility Designer Developer A11y Specialist Tab order medium       high     Focus management Visual focus indication low    Select or activate CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Tab Order Small screens linearize your content So do screen readers and tabbing Mobile-first design often solves your tab order CSUN 2017 Assistive Technology Conference

CSUN 2017 Assistive Technology Conference Focus Management Example: Dialog Example: Navigation inside a Single Page Application (SPA) Who makes these choices, and when? CSUN 2017 Assistive Technology Conference

Visual Focus Indication CSS skills will tell you what’s possible Go with the browser default, or customize Hint: It’s “visual” CSUN 2017 Assistive Technology Conference

Selecting & Activating Elements Plain HTML has always worked great for links and forms JavaScript for custom interactions This is typically a team effort CSUN 2017 Assistive Technology Conference

challenges solved? WHO & WHEN

“Hard” accessibility challenges? They get a lot easier when you make a plan. Who is responsible? What’s the plan for the project lifecycle? Inception Design ideation UI dev architecture Accessibility strategy Systems Design system UI components Iterative support Build Design production Primary development Quality Assurance Release CSUN 2017 Assistive Technology Conference

Level Access (formerly SSB BART Group) Thank you! Level Access (formerly SSB BART Group) Mitchell Evan @mitchellrevan Sam Joehl @mixolydian @ssbbartgroup CSUN 2017 Assistive Technology Conference