This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle
Accessibility on small screen devices comes with its own unique set of challenges, such as how people interact with content and usability when accessing content with a mobile screen reader.
The good news is any changes made for a desktop/keyboard/mouse environment will help out with accessibility of a touch device.
Let's review a few best practices when considering mobile users.
1. Provide large touch targets
How many of us have been in a situation where we try to touch/click an element on our phones but it's just too small! Or worse yet, we accidentally tap on something else we didn't mean to click on, resulting in having to find the back button on the mobile browser to try again. Frustrating, right?
Specifically what we're talking about here are user interface components such as hamburger menu controls, social media icons, form inputs; basically, anything that's a stand-alone element on a page., ie, not an embedded link within body content.
Touch target size
When it comes to ensuring usability and accessibility concerns of touch targets, size comes into play. With size, there are a few things to keep in mind, including the availability and physical size of the element and space in between elements in order to avoid accidentally activating something unintended.
Here are a few rules to consider from other organizations:
- Google's Web Fundamentals guide recommends a touch target size of
48by48pixels with at least8pixels in between. - Apple's Human Interface Guidelines recommends at touch target size of at least
44by44pixels. - Web Content Accessibility Guidelines v2.1 also includes the recommendation of a touch target size of
44by44pixels.
What's important to note here is when it comes to design, making the actual icon larger to satisfy these recommendations isn't required. By using the CSS padding property we can make the physical touch area larger without affecting the design or layout of the content.
Touch target example
Review the following code example:
In the example we have the icon links being spaced by the margin property. This will separate the links visually, but the touch targets remain at 24 by 24 pixels in size. This is not ideal for usability.
In order to add the extra spacing required to increase usability and maintain the intended design, we can instead use the padding property. By swapping the 10 pixels from margin to padding we've satisfied our accessibility concern and the design requirements.
WCAG success criteria
This comes back to 2.5.5 Target Size which states:
"The size of the target for pointer inputs is at least 44 by 44 CSS pixels."
2. Add plenty of whitespace
Using white space, which is the blank, empty area in between interactive components, is actually quite critical when designing and creating usable user interfaces. White space helps in a variety of ways, not just for a visual separator but also for navigation.
For example, it's not too uncommon to come across a group of links which are meant to behave as callout actions. Often these will be made up of three or more links in a grid and may feature no whitespace in between. This might provide a certain aesthetic appeal, however, when it comes to someone with a motor impairment, such as hand tremors where they're unable to control the movements of their own hands, the usability of navigating past these callout links becomes problematic.
Let's check out the following video example:
As we've witnessed in this video, the person was having great difficulty when trying to navigate past the large touch targets and repeatedly activated links or context menus by accident. This is why it's ideal to place at least 8 to 10 pixels of whitespace in between interactive elements.
Without white space, usability and navigation could result in a frustrating user experience.
WCAG success criteria
This comes back to 2.4.1 Bypass Blocks which states:
"A mechanism is available to bypass blocks of content that are repeated on multiple Web pages."
3. Avoid 2D scrolling
In the past, if someone with low-vision needed to zoom their browser window in order to read content, traditionally this would result in the poor experience of 2-dimensional (2D) scrolling; having to scroll horizontally as well as vertically in order to consume content.
2D scrolling is not only an irritant for most people, it also introduces a new level of difficulty for anyone with a motor impairment or someone who relies on the keyboard alone to navigate; this requires a shift from using the Tab/Space key to read content vertically, to the arrow keys to read horizontally, and back again.
With the concept of responsive design being the standard method of layout, nowadays when someone zooms their browser to enlarge the content, the layout and styling rules defined within CSS will load as the zoom level increases. In other words, when content is zoomed the person on the other side of the screen will experience the "mobile" layout eliminating the need for horizontal scrolling, resulting in a much more positive user experience.
The viewport meta tag + media queries
This is due to the inclusion of the HTML viewport meta tag and CSS media queries:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This tells the browser to set the width of the content to the width of the device itself and to scale that content to 1 on load.
Working in tandem with the viewport meta tag are CSS media queries. These blocks of CSS are executed when the query requirements are met and typically re-arrange content to be better suited for the size of the screen.
.grid__item {
width: 100%;
}
@media (min-width: 500px) {
.grid__item {
display: inline-block;
width: 50%;
}
}
In this example, the grid__item content container has a width of 100%, filling the entire portion of the screen. If the user were to change the screen orientation from portrait to landscape, or this was a tablet or lager screen greater than the 500px value set by the min-width query parameter, each grid__item would be set to 50% width of the screen.
The main takeaway here is If the site layout has been developed with responsive design best practices, this would be enough to remove any 2D scrolling in order to comfortable consume the content.
WCAG success criteria
This comes back to 1.4.10 Reflow which states:
"Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions."
4. Allow for any orientation
The concept behind Responsive Design is to create a device-agnostic experience. This means content is able to reflow and adjust to any device, used in any orientation; portrait or landscape mode.
Why is this important as far as accessibility is concerned? It's about giving choice and not making any assumptions. Allow the end user to consume your content in any manner they prefer or may be required by their particular computing environment.
For example, a wheelchair user who may also have a motor impairment may prefer to mount their mobile device in a specific orientation that is comfortable for them. Forcing someone to adjust the orientation as a result of not allowing the content to reflow creates an accessibility barrier. This seemingly simple task of adjusting the orientation may result in pain or frustration which could have been avoidable.
WCAG success criteria
This comes back to 1.3.4 Orientation which states:
"Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential."
5. Test with the screen reader
In addition to traditional desktop computers, mobile devices also have built-in screen reader software. The most popular of which, according to the WebAIM Survey results are VoiceOver paired with Safari on iOS and Talkback paired with Chrome on Android.
Let's review the basics on how to start each and a few gestures in order to start testing with each platform.
iOS
Starting up
To start VoiceOver on an iOS device, navigate to:
- Settings
- General
- Accessibility
- VoiceOver
- Enable "VoiceOver" switch
Navigation
Once you've got VoiceOver up and running navigation will be a little different than what you're likely used to. Basically, to activate an item, the item first needs to be "in focus" first, then, double tap to activate the item.
Let's review common gestures when interacting with a web page when VoiceOver is enabled:
| Gesture | Action |
|---|---|
| Touch/single tap | Select and read the element |
| Double-tap | Activate the selected element |
| Swipe-right | Move to the next element |
| Swipe-left | Move to previous the element |
| Two-finger tap | Pause/resume reading |
| Three-finger swipe up/down | Scroll screen up/down |
Shutdown
To disable Voiceover, navigate to the Startup screen outlined above, tap the "VoiceOver" switch control to give it focus, then double tap to deactivate.
Android
Starting up
To start TalkBack on an Android device, navigate to:
- Settings
- Accessibility
- TalkBack
- Enable "Use service" switch
- Click "Ok"
Navigation
Once you've got TalkBack up and running navigation will be a little different than what you're likely used to. Basically, to activate an item, the item first needs to be "in focus" first, then, double tap to activate the item.
Let's review common gestures when interacting with a web page when TalkBack is enabled:
| Gesture | Action |
|---|---|
| Touch/single tap | Select and read the element |
| Double-tap | Activate the selected element |
| Swipe-right | Move to the next element |
| Swipe-left | Move to previous the element |
| Two-finger swipe up/down | Scroll screen up/down |
Shutdown
To disable TalkBack, navigate to the Startup screen outlined above, tap the "TalkBack" switch control to give it focus, double tap to activate, activate "Ok" control to disable.
Resources:
- 1.3.4 Orientation
- 1.4.10 Reflow
- 2.4.1 Bypass Blocks
- 2.5.5 Target Size
- MDN: Using the viewport meta tag to control layout on mobile browsers
- Smartphone Accessibility 101: Mobile Screen Readers
- Hand tremors and the giant-button-problem
- Lighthouse – Tap targets are not sized appropriately
This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle
Scott Vinkle | Sciencx (2019-02-20T14:18:00+00:00) 5 Accessibility Tips for Mobile Experiences. Retrieved from https://www.scien.cx/2019/02/20/5-accessibility-tips-for-mobile-experiences/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.