Unlocking accessibility for UI/UX Designers...AccessU 2019 – Unlocking accessibility for UI/UX Designers Unlocking accessibility for UI/UX designers Today’s agenda 1. Introductions

AccessU 2019 – Unlocking accessibility for UI/UX Designers

Unlocking accessibility for UI/UX Designers

AccessU – Austin, TXDenis Boudreau, Deque SystemsThursday, May 16th, 2019


Facilitator

Denis BoudreauPrincipal Consultant & Training Lead

[email protected]@dboudreau

AccessU 2019 – Unlocking accessibility for UI/UX DesignersAccessU 2019 – Unlocking accessibility for UI/UX Designers

Unlocking accessibility for UI/UX designers

Challenges faced

What are some of the challenges you face:

• Trying to design inclusively for accessibility?• Trying to win designers over to accessibility?


Unlocking accessibility for UI/UX designers

Today’s agenda

1. Introductions2. Working with accessibility heuristics3. Accessibility heuristics evaluation workshop4. Accessibility design review (show and tell) 5. Questions and wrap up


Working with accessibility heuristicsPart One


Working with accessibility heuristics

Interaction methods & modalities

Heuristic #1.Users can efficiently interact with the system using the input method of their choosing (i.e. mouse, keyboard, touch, etc.).



Navigation & wayfinding

Heuristic #2.Users can easily navigate, find content, and determine where they are at all times within the system.



Structure & semantics

Heuristic #3.Users can make sense of the structure of the content on each page, and understand how to operate within the system.



Error prevention & states

Heuristic #4.Interactive controls (i.e. form elements, widgets, etc.) have persistent, meaningful instructions to help prevent mistakes, and provide users with clear error states which indicate what the problems are - and how to fix them -whenever errors are returned.



Contrast & legibility

Heuristic #5.Text and other meaningful information can be easily distinguished and read by users of the system.



Language & readability

Heuristic #6.Content on the page can easily be read and understood by users of the system.



Predictability & consistency

Heuristic #7.The purpose of each element is predictable, and how each element relates to the system as a whole is clear and meaningful, to avoid confusion for the users.



Timing & preservation

Heuristic #8.Users are given enough time to complete tasks and do not lose information if their time (i.e. a session) runs out.



Movement & flashing

Heuristic #9.Elements on the page that move, flash, or animate in other ways can be stopped, and do not distract or harm the users.



Visual & auditory alternatives

Heuristic #10.Purely visual or auditory content that conveys information has text-based alternatives for users who can’t see or hear.


Break! Back in 15 minutes.


Accessibility heuristics evaluation workshopPart Two


Using the three heuristics we’ve selected previously, let’s hash out this design!

Heuristics1. ___________________2. ___________________ 3. ___________________


Design accessibility reviews

https://www.stedwards.edu/

https://www.stedwards.edu/


Accessibility design review (show and tell)

Part Three



Design review show and tell!

So, what have you found?

Let’s go over our findings as a group, and see what we can learn from them. In the spirit of a true heuristics evaluation exercise, let’s see if and how can we harmonize.


Questions and wrap upPart Four


Now’s your chance!Any final burning questions?


Questions and wrap up

What are your top takeaways?Take a few minutes, and write down what you feel are the top3 most important takeaways you’ve gotten from this session.

1. ______________________________________________

2. ______________________________________________

3. ______________________________________________


Documents

Unlocking accessibility for UI/UX Designers...AccessU 2019 – Unlocking accessibility for UI/UX Designers Unlocking accessibility for UI/UX designers Today’s agenda 1. Introductions