Testing for Proximity and Zoom Accessibility
Proximity issues can arise when interface elements are designed far apart from one another. This mostly affects people with low-vision who rely on zoom software.
What happens when someone uses zoom software is that they only see a small fraction of the screen at once. Usually, the zoomed portion of the screen follows the current position of the mouse pointer or keyboard cursor.
As a result of someone only being able to see a small section at a time, oftentimes when attempting to complete a task, content is difficult to find or may be missed entirely.
How do we test to ensure there are minimal to no proximity issues with our design? One relatively simple and effective method is to perform what's called, "the straw test."
The straw test
How do you perform the straw test? Take one hand and make a fist. Then, you open your fist just enough to let a "straw" through. From this point, hold your fist up to one of your eyes, closing the other, and attempt to view your design.
Poor proximity
When it comes to reviewing a design or reading content on the web, the typical reading flow is top-to-bottom, left-to-right. With this in mind, get your straw tests ready and attempt to fill out this form:
Was it easy or difficult to accomplish? Did you find yourself going back and forth to make sure the field you were viewing matched up with the label it was intended for? How long did it take you to complete?
This is a prime example of poor proximity.
- The form
labelelements are much too far apart from theirinputelements. - The submit
buttonis on the bottom right, which would be much more difficult to locate than if it were placed on the other side.
Better proximity
Let's revisit the same form but with its proximity issues fixed:
How was filling out this form compared to the last when testing with the straw test? Much faster and easier to fill out? Less frustrating?
This demonstrates why, ideally, forms are designed with the form label directly above the related input field. This way the form is much easier to consume for people with low-vision who may be using zoom software. It also makes things easier for everyone else in the end, as making things accessible often does.
The main purpose of the straw test is to ensure related elements are easily discoverable for people with low-vision who rely on zoom software. Even with 20/20 vision, items which are located far apart can be difficult to find.
Let's make sure the user experience we create is easily discoverable and comfortable for our users.
WCAG success criteria
This comes back to 1.3.3 Sensory Characteristics which states:
"Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound."