Introduction DEV UX EDITOR CJE
Functional testing for Inclusive Design
The accessibility features and basics of how to functional test content using heuristic analysis, tools and screen readers are covered here for Web, Android and iOS.
Basic testing steps:
- Visual Inspection
- Page Structure
- Composed Widgets
At each step you'll perform the following actions.
- 1. Heuristic analysis
- At this first step you'll start guessing what the functional expectation is. Identify what you see, what should be read aloud, what should happen step-by-step, and how this should be constructed. DON'T use a mouse, keyboard or other input method yet. In principle this information must already be present at the Design Annotation fase.
- 2. Write down possible focus points
- For each focus point where you're not sure if this is done properly put it on paper:
- Name and place
- Focus point and expected result
- 3. Start inspection
- Next we start the actual inspection. For latin languages this means we start from top to bottom and from left to right. We will use the tab key on the keyboard, see what will happen when we use the mouse and with screen readers we'll use the left and right arrow keys on a keyboard or swipe left and right with a mobile device. Tools will be used to support the inspection. Is everything communicated as expected and logical?
- 4. Annotate failures
- When the result is NOT what's expected, note the possible fail. Please make sure it's clear which part may have a fail, where this exactly happens, under which conditions, and how to reproduce.
Test Procedures & Results:
At each step you'll find the most common accessibility checkpoints with a short explanation on what's expected. When not sure on how to test these, there are links for each checkpoint at the "Test Procedures & Results" sections where you'll be taken to the guideline with an explanation on how to test.
Which Tools to use:
1 Visual Inspection
What you see is what everyone should get
On basis of the visual appearance you'll start guessing what the functional expectation is. Identify what you see, what should be read aloud, what should happen step-by-step, and how this should have been constructed.
Essential content communicated visually MUST be heard by a screen reader. Thoroughly examine the visual design, states and processes using different input methods.
Responsive / Content resizing
Color / Contrast
2 Page Structure
Well-structured content enables more efficient navigation and provides simular experiences for everyone
Looking at a page provides lot's of clues about it's structure and relationships. This enables to quickly judge the content and focus on the parts we're interested in.
All these clues must also be present in a similar way in the code so everyone can experience this. The functional outcome of this structure can easily be tested with a screen reader.
Containers and Landmarks
Unique Titles and Headings
Links Vs. Buttons
Lists, Tables and Semantics
Images and Text equivalents
3 Composed Widgets
Composed widgets define how the outcomes from its atomic components are aggregated into a single outcome
When multiple small components are responsible for a single user experience and function we should carefully test them in a linear and dynamic flow.
The grouping must be clear, the focus management must be logical and dynamic updates must communicated for everyone at all times. Never deviate from known patterns for personal gain or preferences. Don't be in the delusion you're able to adjust global conventions.
Examples for composed widgets are: Menu's, Sub-Menus, Modals, Carousels, Datepickers, Sliders, Collapsibles, Combo Boxes, Expanding Accordians, Error Messaging and more.
Standards and Global conventions
- 3.1 Heuristic analysis
- 3.2 Write down possible focus points
- 3.3 Start inspection
- 3.4 Annotate failures