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

2. 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

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

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

5. challenge #1
CONTRAST

6. 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

7. Not just a Design… it’s a Design System
Source:
CSUN 2017 Assistive Technology Conference

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

9. CSUN 2017 Assistive Technology Conference
Better Examples
CSUN 2017 Assistive Technology Conference

10. CSUN 2017 Assistive Technology Conference
Better Examples
CSUN 2017 Assistive Technology Conference

11. 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

12. 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

13. 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

14. challenge #2
KEYBOARD

15. 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

16. 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

17. CSUN 2017 Assistive Technology Conference
Demo…
CSUN 2017 Assistive Technology Conference

18. 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

19. 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

20. 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

21. 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

22. 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

23. challenges solved?
WHO & WHEN

24. “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

25. Level Access (formerly SSB BART Group)
Thank you!
Level Access (formerly SSB BART Group)
Mitchell
CSUN 2017 Assistive Technology Conference