accessibility Archives - Rachele DiTullio

Web accessibility smoke testing

Rachele DiTullio15 October 202615 October 2026Websiteaccessibility

At my work, we struggle with constant turnover of full-stack developers working on the frontend who haven’t been trained in accessibility best practices. We’re limited in what we can teach them due to our team’s capacity so we came up with six quick checks for developers to complete in a web browser before submitting a PR.

Two smoke tests will uncover critical and high accessibility issues that will prevent some customers from using the webpage. Accessibility issues discovered during smoke testing should be resolved before release; otherwise we end up deploying real access barriers into production.

Spending a few minutes to test for accessibility will lead to savings in effort, efficiency and ultimately, money: On average, each accessibility defects costs about $2600 to fix (source: Karl Groves). Smoke testing decreases the amount of accessibility technical debt that many teams end up having to fix as fast followers.

Test 1: Use a keyboard

Keyboard accessibility is one of the most important aspects of web accessibility. Some people only use a keyboard to interact with webpages due to mobility limitations. Some people rely on screen readers which are used by navigating with a keyboard. When people can navigate a webpage using a keyboard only, it’s very likely the webpage will work for people using a multitude of assistive technologies to navigate, like refreshable Braille displays, sip and puff devices and switches. It’s important to ensure that every interactive element in the UI works as expected using only keyboard inputs.

Perform the 4 keyboard navigation checks

Ensure all actions can be performed with a keyboard: All interactive elements can gain keyboard focus.
Ensure there are no keyboard traps: If you can tab to an element, you must be able to tab away from it.
Ensure the focus order is logical: Focus should move left to right, top to bottom following the natural reading order.
Ensure keyboard focus is visible: All interactive elements have a visible indication of keyboard focus.

Keyboard focus examples

See the Pen HTML elements that receive keyboard focus by Rachele (@racheleditullio) on CodePen.

Test 2: Check for text and UI scaling

Good web applications respond to users’ browser preferences, including page zoom. When a webpage isn’t adaptable, users are blocked from accessing the content in a way that works for them. Adaptive content helps users viewing webpages on smaller mobile device screens and users who have scaled the browser or OS settings to view text and content at larger sizes.

Perform the 2 text and UI scaling checks

Resize text: Zoom the browser window to 200% in a 1024×768 viewport or use the browser’s device emulator with a 1024×768 viewport at 200% zoom.
Reflow: Zoom the browser window to 400% in a 1280×1024 viewport or use browser’s device emulator with a 320×256 viewport at 100% zoom.

MacOS browser zoom keyboard shortcuts:

Press command + to increase zoom level.
Press command - to decrease zoom level.
Press command 0 to reset zoom level to 100%.

Windows browser zoom keyboard shortcuts:

Press ctrl + to increase zoom level.
Press ctrl - to decrease zoom level.
Press ctrl 0 to reset zoom level to 100%.

At each zoom level, check the webpage for the following:

Is there a meaningful change in the text displayed onscreen? All text should scale up or down linearly.
Does any content overlap or run oﬀ the screen? No content should overlap, and text should either wrap or (in some limited cases) be truncated. In cases where text wraps, containers should be scrollable if there is a height constraint; text and webpages should not scroll horizontally. Text should not run oﬀ the screen altogether.
Does the screen still make sense? There should still be some visual hierarchy in the relationships between headings, paragraphs of text, graphics, controls and other elements on the screen.

References

Tools for performing the tests

Set your viewport size manually: WhatIsMyViewport.com
Browser viewport resizing extension for Chromium browsers like Window Resizer
The Chromium browser’s device emulator in Dev Tools (F12)

Smoke testing success criteria

Smoke test	WCAG Success Criteria
Ensure all actions can be performed with a keyboard.	2.1.1 Keyboard
Ensure there are no keyboard traps.	2.1.2 No Keyboard Trap
Ensure the focus order is logical.	2.4.3 Focus Order
Ensure keyboard focus is visible.	2.4.7 Focus Visible
Ensure text resizes 200% in a 1024×768 viewport.	1.4.4 Resize Text
Ensure content reflows in a 320×256 viewport.	1.4.10 Reflow

AT for iPhone: Full Keyboard Access

Rachele DiTullio25 May 202627 May 2026Mobileaccessibility, assistive technology, iphone

Your iPhone comes with powerful assistive technology (AT) built in—useful for checking how well your mobile app is supporting accessibility. When mobile apps don’t work well with one AT, they often don’t work with others.

What is Full Keyboard Access?

On iOS and iPadOS devices, people can use a Bluetooth keyboard to interact with the device by enabling Full Keyboard Access (FKA). FKA allows a person to navigate the UI with a keyboard only if the app has been configured properly with interactive elements.

Supporting FKA means ensuring all buttons and controls in mobile apps gain keyboard focus in a logical order, have a visible indication of keyboard focus and can be activated with the keyboard. iOS has some limitations on scrolling content that is not interactive. FKA users must be able to perform all the same actions as tap users without FKA enabled.

Enabling Full Keyboard Access on iOS

Settings app > Accessibility > Keyboards & Typing > Full Keyboard Access > Toggle the Full Keyboard Access switch on or off

FKA is a setting you can leave on all the time once enabled. You can also add it to the Accessibility Shortcut menu to turn it on and off quickly. Pair a Bluetooth keyboard with the device to use it with iOS. By default, a blue keyboard focus indicator will appear around active groups. Active controls will have a light blue overlay.

Screenshot of the iOS Full Keyboard Access screen with the Full Keyboard Access toggle switched on. — Full Keyboard Access settings

Screenshot of the USAA app landing screen with a blue focus indicator around the content pane indicating that a keyboard is active with the device. The "Log on" button is currently in focus. — Keyboard focus active

Using a keyboard

Using a keyboard with iOS/iPadOS is very similar to using a keyboard with a desktop machine. When in doubt, try navigating with arrow keys. For more information on using a keyboard, check out these common keyboard shortcuts.

Keyboard stroke	Action
`tab` / `shift tab`	Moves keyboard focus forwards and backwards
`arrow` keys	Move focus around the active group
`space`	Activates buttons, links, controls

Keyboard navigation example

A keyboard user opens the USAA app to the landing screen. She uses the TAB key to move focus from the USAA logo to the content area. She then uses the DOWN arrow key to move focus through several buttons and links on the screen. She lands on the “Log On” button and presses the SPACE key to activate the button.

The screen switches to the Products screen with a heading, close button and four products to choose from. She use the TAB key to move focus from the “close” button into the content area. She then uses the DOWN arrow key to move focus between the four buttons. She moves focus back to the “close” button and uses the SPACE key to return to the landing screen.

Screenshots and videos taken on an iPhone 16e running iOS 26.4.

AT for iPhone: Voice Control speech input

Rachele DiTullio18 May 202618 May 2026Mobileaccessibility, assistive technology, iphone

What is Voice Control?

All iOS and iPadOS devices include Voice Control (VC) speech input functionality. Enabling VC allows a person to speak commands to interact with the screen instead of tapping on the screen directly. VC users can say, “Tap $Name” to activate interactive controls without speech flags enabled. To see speech flag hints, VC users can say, “Show names” to display the first word of the accessible name. They can say, “Show numbers” to display a numbered speech flag next to each interactive control instead. For greater control on tight screens, VC users can also say, “Show grid” to display a grid from 1 to 36 squares and say, “Tap $Number” to tap on a square.

Supporting VC means ensuring all buttons and controls in mobile apps have accessible names and that the accessible name contains the visible text label. Speech flags should not appear next to text that is not interactive. VC users must be able to perform all the same actions as screen tap users without VC enabled.

Enabling Voice Control on iOS

Be cautious when enabling any AT on a mobile device. Make sure you understand how to disable it again so you don’t get stuck, unable to navigate the device.

Settings app > Accessibility > Voice Control > Toggle Voice Control switch on/off
Settings app > Accessibility > Accessibility Shortcut > Select Voice Control from the list
Ask Siri, “Enable/disable Voice Control”

My preferred way to turn VC on and off is to ask Siri to “enable/disable Voice Control”. Once VC is enabled, a circle icon appears to the right of the phone time in the upper left of the screen. When this icon is blue, VC is listening for commands. When this icon is gray, VC is sleeping but the microphone is still on which is displayed with a tiny orange dot above the cellphone strength indicator.

screenshot of the iOS Voice Control screen with Voice Control switched on. There is a blue icon next to the phone time indicating that Voice Control is listening. — Voice Control settings

Screenshot of the iOS USAA app login screen with name speech flags displaying next to 7 interactive elements. — Say: Show names

Screenshot of the iOS USAA app login screen with numbered speech flags displaying next to 7 interactive elements. — Say: Show numbers

Screenshot of the iOS USAA app login screen with a grid of 36 numbers displaying over the entire screen. — Say: Show grid

Using Voice Control

Say: Show names
Say: Tap $Name
Say: Show numbers
Say: Tap $Number
Say: Show grid
Say: Stop listening to keep Voice Control enabled but not active
Say: Start listening to wake up Voice Control

Video: Voice Control navigation example

A Voice Control user opens the USAA iOS app to the landing screen and says, “Start listening”. The command appears on the screen and numbered speech flags appear next to the interactive controls like a “Log on” button. Next the user says, “Tap 4”. The number 4 speech flag is on a button labeled “Browse USAA Products”. The Products screen opens with numbered speech flags next to the interactive controls. The user says, “Tap 1” to active the close button and return to the previous screen.

The user says, “Show names” and the first word of the accessible names of interactive controls appear as speech flags. Next the user says, “Tap log on” and the login form screen appears with speech flags with words next to the interactive controls. The user says, “Tap Close” to active the close button and return to the previous screen.

The user says, “Show grid” and a grid from 1 to 36 numbered squares appears on top of the screen content. Next, the user says, “Tap 22” to activate one of the grid squares overlaying the “Join USAA” button. The Join USAA screen appears with a grid of numbers. The user says, “Tap close” to activate the close button and return to the previous screen.

Screenshots and videos taken on an iPhone 16e running iOS 26.4.

Tag: accessibility

Web accessibility smoke testing