This is a repost of an old article on the Tenon blog. Since that’s being sunsetted, I’m reposting it below.
Ensuring that your website is ADA compliant on desktop computers accounts for only one piece of the puzzle. With mobile devices garnering more than half of all web traffic worldwide, improving your site for mobile accessibility is nonnegotiable. All users deserve the same level of access to your sites and mobile apps and a wave of ADA lawsuits over the past year makes this even more urgent.
Accessibility issues with mobile devices encompass a range of issues, from touchscreen functionality and small screen sizes, to different input modalities, device use cases in different settings and lighting, and beyond.
Having trouble figuring out what’s potentially wrong with your mobile layout? Proper mobile accessibility stems from several key elements. When reviewing your site for mobile accessibility, you should be mindful of the following components.
Responsive Web Design
Responsive design has a really great side-benefit: a better experience for users with disabilities, like users who are low-vision. Unfortunately, the converse is true. Without a mobile-responsive design, your web page becomes warped, clunky, confusing, and hard to read, thus complicating user experiences across the board. Responsive web design adapts to a user’s screen size, platform, and orientation to optimize their interactive experience. It is better for everyone, but especially for users with disabilities.
Non-responsiveness can compromise accessibility in a number of ways. For example, interactive elements that do not properly scale will make operation needlessly difficult for people with mobility impairments. Similarly, a site that retains a complex layout on mobile screens is often likely to cause considerable problems navigating to & between controls for users who rely on their device’s assistive technologies to navigate the screen.
Flexibility is the name of the game.
Wondering if your site is fully responsive? Check for some common red flags. If a user has to pinch-zoom to properly read your webpage, or make use of a horizontal scroll bar to navigate the full width of your content, your page lacks mobile responsiveness, and therefore compromises accessibility.
Test your webpage in different resolutions to ensure a good user experience. Check for the realignment of columns and headers, identify whether or not your font size adapts to the screen size, and assess both landscape and portrait screen orientations. If any of these elements lack responsiveness or make it hard to find & read content it’s time to tweak your design.
Target Touch Sizes
In the same sense that your font size and layout must adapt between desktop, tablet, and mobile views, be mindful of your target touch size for touch screen devices. For users with motor or vision impairments, access to appropriate touch targets can prove majorly beneficial for navigating your webpage.
The recommended size of touch targets is 7 to 10mm, or the equivalent of the smallest average fingerpad. From navigation menus and call-to-actions to video play buttons and text box prompts, your most valuable actionable controls should be easy to interact with on mobile devices.
Industry standards recommend that all actionable controls have a touch target size of at least 44 x 44 pt or its equivalent in pixels. Not only do your clickable items need to be the right size, they need to be optimally spaced apart from each other to avoid the user hitting multiple buttons at once or the wrong button entirely — not a good user experience.
Relative Units
The root of your issues might lie within your CSS. Pixel-based media queries tend to be unaccommodating of users zooming your webpage, both on desktop and mobile views. Manual zooming impacts the baseline font size you’ve established in CSS; further, any of your pixel-defined content containers will warp and distort against the resized text, disrupting your intended web page layout.
The alternative is introducing relative units to your CSS. Em and rem units are relative to the size of a root element, allowing adaptability and flexibility no matter what screen size or zoom percentage. These units scale up without compromising the readability of your font, even on desktop.
With relative units, at a certain zoom percentage, a user’s desktop browser will take on a mobile layout in order to properly accommodate the sizing changes. This helps to maintain a comprehensible page layout while also increasing the font size as requested.
Consistent Color Contrast
As is true for accessibility on desktop browsers, verify that your color contrast ratios are up to par for your mobile view too. Handheld devices pose the unique challenge of an ever-adapting brightness level on their displays. Indoors, outdoors, under artificial light or in the dark, your users will be viewing your page under lighting conditions across the spectrum.
WCAG identifies a general color contrast ratio of 4:5:1. Large-scale text is easier to read at lower contrasts, therefore requires a smaller ratio of 3:1. Because mobile device displays are inherently smaller in scale, it is best to abide by the standard 4:5:1 ratio across the board.
Don’t forget your non-text content, either! WCAG recommends that user interface components and graphical objects have a color contrast ratio of 3:1 against adjacent colors. Be careful not to overlook functions such as radio buttons, button and hover link colors, and text inputs— for a full list of examples, review the non-text contrast guidelines.