Nothing
We transform grand ideas into pioneering products. With the power of design.
Accessibility in
Digital Products
or: Taking a deeper look at Miro's accessibility
Nothing AG, Berne
Josua Muheim
Today's agenda
- Introduction
- General overview on accessibility
- Let's examine Miro's accessibility!
- Conclusions
Who am I?
First things first:
Hello everybody! 👋🏼
- Josua Muheim
- Web developer ~15 years
- Technology should unlock human potential
- Goal: Inclusion of all individuals
-
Accessibility expert ~8 years
- Former employee of «Access for all»
- Initiator of «A11y Dev Guide»
Nothing AG
- Peer to peer (P2P)
- Web agency / venture lab
- Berne, Switzerland
- www.nothing.ch
Goal:
Strengthen reputation of being the Swiss tech leader in accessibility and inclusion
Let us share our skills with you!
- Design reviews
- Semantic HTML prototyping
- Visual and functional prototyping
- Review & optimise existing project
- Presentations and workshops
- Hands-on work on your product
- Written & video documentation
On your accessibility journey
Reach out: josua@nothing.ch
Let us share our skills with you!
- Design reviews
- Semantic HTML prototyping
- Visual and functional prototyping
- Review & optimise existing project
- Presentations and workshops
- Hands-on work on your product
- Written & video documentation
On your accessibility journey
Reach out: josua@nothing.ch
We want to empower you! Let's transfer our skills to your team!
What is accessibility?
Some basic theory, please!
Introduction to accessibility of digital media
or: Inclusive design unlocks human potential
Nothing AG, Berne
Live testing Miro
Let's get our hands dirty!
Quick & dirty battle plan
- Colour & contrasts
- Keyboard-only operability
Semantics (screen reader)
Drawing conclusions
And now...
In the end:
How accessible is Miro?
or: How accessible can a drawing app be?
Nothing AG, Berne
Miro is not a typical website
- Imitates a full blown interactive drawing app
- Rather looks like a graphical canvas
- Pointing devices are crucial for input
- Inherently...
- Consumption of graphical content is
hard/impossible for blind users- <canvas> are rendered pixels => inaccessible to screen readers
- Keyboard-only interaction is limited (drawing, arranging...)
- Consumption of graphical content is
- This raises the big question...
It's a pretty complex thing!
Interactive graphical UIs
How accessible can they be?
For blind users with screen readers
- It offers an accessibility statement
- It has a dedicated screen reader mode!
- It allows to browse the elements in an
additional HTML view
(no editing) - I'm cautios with
"special modes" for
certain user groups
- It allows to browse the elements in an
- It offers an accessibility
feedback survey
First of all, some kudos to Miro!
For blind users with screen readers
- Implicit information through positioning / looks of elements
- Togetherness due to proximity
- Shapes would need alternative description
- Arrows, lines, symbols, grids / table-like structures
- Colours might convey meaning
- Sequence of elements, etc.
- Orientation, alignment (ie. arrows)?
- Bears hate bananas? Bears love berries?
- Bananas are on stock? Berries are out of stock?
But: it's pretty hard - if not impossible
For blind users with screen readers
- Define the data (elements and their relationships)
- Then add visual attributes (aesthetics)
- Traditional website:
- HTML (information, semantics, relationships)
- CSS (visual aesthetics)
- Still: using appropriate semantics is always a good thing
- <button>, <ul>, etc.
We'd need a abottom-up approach
For visually slightly impaired users
- Contrasts of user controls are
very good- Just a few exceptions
- High contrast mode for
drawing elements would be
great!- Add outlines to shapes
Well done, Miro!
For keyboard-only users
- Un-disable default Tab key functionality (at least for general UI elements)
- Simply use <button> elements instead of <div>
- Stop hijacking browser's default keyboard
combinations!- Ie. Cmd-1, Cmd-Shift-A
- Extend existing keyboard functionality
- Toggling through search list
- Implement Esc to reset/close
There's definitely much more possible!
For keyboard-only users
- Introduce keyboard shortcuts for
- Creating new elements
- Resizing elements
- Selecting existing elements
- A dialog with fuzzy search?
- Dynamic shortcuts (ie. Alt+1 - 9)
Introducing new modes of interaction
For keyboard-only users
- Press specific key, ie.
Alt (Option)- For each displayed
element, display its
number key - Press number key to
select element!
- For each displayed
Provide dynamic shortcuts
1
2
3
4
5
6
7
8
To empower people
It ain't need much
That's all folks!
Questions & discussion
Let us share our skills with you!
- Design reviews
- Semantic HTML prototyping
- Visual and functional prototyping
- Review & optimise existing project
- Presentations and workshops
- Hands-on work on your product
- Written & video documentation
On your UX and accessibility journey
Reach out: josua@nothing.ch
Talk to you soon!
Thank you.
Accessibility in Digital Products (Miro)
By Nothing
