Check out a free preview of the full Enterprise Web App Accessibility (feat. React) course

The "Hybrid Apps" Lesson is part of the full, Enterprise Web App Accessibility (feat. React) course featured in this preview video. Here's what you'd learn in this lesson:

Marcy discusses hybrid mobile apps and the considerations that web developers need to keep in mind when creating them. They mention using web technologies to create apps for native mobile, such as React Native or Ionic, and the importance of testing both the web views and the integrated app. The lesson also touches on WCAG guidelines for native mobile and suggests using various testing tools for accessibility.

Preview
Close

Transcript from the "Hybrid Apps" Lesson

[00:00:00]
>> Hybrid apps. So, we're JavaScript developers, a lot of people are. You can create apps for native mobile with web technologies, so that's happening a lot. And I get questions a lot about what do we need to think about for hybrid mobile apps as web developers. Pure native apps or kind of outside of the scope of this?

[00:00:22]
But if you're doing things with React Native or Ionic, you're starting with a web code base and packaging it out for app stores. There's also progressive web apps, those are cool too. But what I'm really focused on is, you start with a web code base, and then what the users are looking at is primarily a native mobile wrapper around it.

[00:00:45]
There might be some web views in there, but it's like, what is the interface that the user is seeing when they're looking at a mobile app? There's gonna be slightly different outputs, slightly different requirements. So there could be some issues around that translation of going from web to native mobile.

[00:01:02]
And so we can test all the web views, I mean, you think about Storybook, you could fire those up on their own. They're not in the native mobile wrapper, squash any bugs you find there, but test it when it's integrated in the app too. And so, some potential issues could just mostly be things that get lost in translation with the framework.

[00:01:24]
I know Electron, people have had some issues there, where it's like, you don't even know where to go to fix it. So go check their repos, go see if you can find any places where people have asked for help, and then what guidelines apply. WCAG does apply to native mobile, so that's the standard.

[00:01:43]
Some of it's kind of confusing at best and irrelevant at worst. There are a few new success criteria in WCAG 2.1 and 2.2 that are more geared towards mobile, so that's cool. But focus mostly on creating a good user experience, so people use keyboards with mobile devices. Can you navigate with Bluetooth keyboard?

[00:02:05]
Can you use a screen reader? You could consider using some of the testing tools I have here. There's some from Apple, Google for Android, DQ has some native mobile stuff. And then Evinced, the startup, they have a flow analyzer for mobile. So any kind of native mobile tooling is what you would use to test the packaged thing, and there's different ways to do that.

[00:02:31]
But you could test your web views separately too and just make sure those are accessible to start out.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now