Hybrid App Accessibility 101

A hybrid mobile app combines the elements of a native application developed for a specific platform like iOS or Android, and a web application built with HTML, CSS, and JavaScript. Hybrid frameworks provide tooling to write code in JavaScript and generate a native app without having to write the whole thing in languages like Swift or Java. (There are also Progressive Web Apps (opens in a new tab).)

Hybrid apps present multiple avenues where accessibility issues could crop up.

Webviews would have all the same requirements as websites would have, and web accessibility issues that could be tested in browsers.

Meanwhile, native mobile views would have tested with mobile tooling and would have slightly different terminology. Web-views would also have to be tested inside of the native mobile app to ensure no integration issues.

Potential access issues with hybrid web apps

Frameworks hopefully provide some guardrails with reusable components that have accessible defaults, such as buttons that output the right roles and require labels and accessible names. But that means you’re really relying on the framework to help you get accessibility right.

In hybrid apps, you’re also writing code in JavaScript but targeting a native mobile device (or Electron on the desktop). That means you have to test in that environment, including using a screen reader and other accessibility test tooling.

If you find an issue, you have to translate it from what the end user experiences in the mobile app to something you can fix in your source JavaScript. There could be some complexities there, as I’ve seen teams encounter with Electron.

What guidelines/rules apply?

WCAG (opens in a new tab) applies to native mobile, even though the terminology and some of the requirements are confusing at best and irrelevant at worst. There are a few new success criteria in WCAG (opens in a new tab).

We need better guidelines for native mobile specifically. We’d still have to parse them to figure out what we can do in a hybrid development environment.

It’s best to focus on creating a good user experience. Can someone with a Bluetooth keyboard reach and operate every interactive control (sound familiar)? Can a screen reader user understand where they are on the screen and complete tasks without assistance?

Tools for testing hybrid apps

While you could test webviews within a native app on their own using regular web testing tools (and your keyboard and screen readers), any tools for testing native mobile apps will apply for hybrid mobile apps:

What to Look for in a Framework Exercise 4