Recently I wrote a lightweight web accessibility assessment of lambtown.org—really a quick tour of usability obstacles to supporting any of the fifty-two vendors registered for this year’s Lambtown festival: no formal WCAG citations, just what people trying to buy wares would see.
Let’s extend that lightweight, vendor-oriented assessment to the iOS and Android apps released for Lambtown, plus how someone would find the apps via the lambtown.org website. The current post also remarks upon usability issues, not only accessibility-specific ones. I’ve tried to say things only once; the iOS section refers back to the fuller Android one. Here are links to the main headings:
Where to start—a third app?
To help users discover that the mobile apps exist, the lambtown.org website features a “Download the app” link on its home page. Confusingly, it also links to a web-based app, which may be used in standard desktop/laptop browsers or in mobile web browsers. All three use Cvent’s CrowdCompass offering.
Suggestion: if the CrowdCompass apps are considered essential, split content more cleanly between lambtown.org web and CrowdCompass, both to ease maintenance and to help people save time. For example, if there’s some unique information about the workshop schedule in both the lambtown.org website and CrowdCompass, then interested partipants must read some things twice in order to find the info they need.
(Are the CrowdCompass apps really needed? A small advantage to the mobile ones: they retain view details for Schedule and for Event Guide > Vendors even when the device lacks data connectivity (tested with Airplane mode). Disadvantages: we need a reliable data connection to share photos, participate in the unused activity feed, visit a vendor’s website, or especially to use Zoom for events during the festival; people have to be willing/able to download an app in the first place—the iOS one is large; it’s easy to become confused between lambtown.org website and CrowdCompass web app. Anyone who’d like to register for a workshop in a CrowdCompass app view is directed to a lambtown.org page. Therefore, the CrowdCompass web app is useful primarily to people using a phone who would prefer not to install the iOS or Android apps, or people who really enjoy checking in for an event, Foursquare-style. Only the event organizers know how many people that is—I’d guess there are rather few.)
Apple’s App Store detail view for the Lambtown app says that the iOS app has four ratings, is 73.8 MB in size, and is rated for ages 17+. There’s no Version History section, so the current app version isn’t available.
The Google Play detail view gives more info, as usual: the Android app is at version 5.67, was last updated 3 Aug 2020, is 33.40 MB in size, and has been downloaded 100+ times.
Let’s walk through an Android user’s experience first.
Finding and using the Lambtown app on an Android device
My main device for this post is a Pixel 3a, Google’s 2019 midrange offering. It has a 5.6″ screen, and mine currently runs Android 11. I’ve also checked the web parts on a 6.1″ Samsung Galaxy S10 running Android 10, for a sense of the 2019 flagship experience.
These screenshots show the top of the home page, then its second screenful, then a third screenshot with some deliberate overlap. Both the buttons inviting us to “Click here to” do something are cut off along the right-hand edge; the second is guessable, the first less so. In Chrome I was unable to pinch to zoom out and view the page more densely, which I’d hoped would reveal the rest of both buttons.
If we choose the image that says, “Download the Lambtown Festival App,” we land on https://www.lambtown.org/lambtownfestivalapp, a page with the same image repeated and links to video-based app help. The videos are hosted by YouTube, which means they benefit from YouTube’s attempt to provide automatic closed captions (variable accuracy).
If we choose the buttonlike image below it that says, “Click here to download th” [truncated on my screen], we pass through https://crowd.cc/s/3SNic to land instead on https://events.crowdcompass.com/events/iiZWB3OJRl/download/. A mobile web browser shows an interstitial “There’s an app for this event!” page that invites us either to tap through to the Google Play detail page or to use CrowdCompass’s web app; on desktop web, the same download page redirects neatly to the web app at https://event.crowdcompass.com/lambtown.
- Shorten the first button label to “Download the App for iOS or Android.”
- Modify the grid widths on the relevant
divs to be friendly to mobile-device screen sizes.
- Make clearer what someone will see upon selecting a button—consider rearranging content and page navigation a little. For example, a button inviting people to “download the app” should lead to the app, not a page with links to video guides.
Setting the desktop Chrome browser’s developer tools to emulate a mobile device isn’t enough of a test. The page source shows several places where relatively wide widths are specified. Though the largest of them (948 px as of 10 Oct 2020) is formally within the 1440 px width of a Samsung Galaxy S10, the full extent of that button isn’t displayed in Chrome on a physical device, even with font and display sizes at their smallest settings.
Whew, we have the app! …Oh right, vendors
Assuming we’ve been able to obtain a copy of the app locally: what about supporting those great vendors? Let’s run the Android app.
Do I have to log in? (No)
Logging into the app isn’t required in order to see vendor or workshop information. The overlay’s presence means a delay for everyone using the app, therefore. For people using TalkBack, it limits access to the app itself. TalkBack reads, “Event logo, event logo,” plus the “Welcome to Lambtown” descriptive text—but neither the Log In button at bottom nor the Close button in the upper left corner is read unless I tell TalkBack specifically to read the whole screen from the top.
To fix: consider removing the login overlay, since the chance to log in or register is available from the Profile button in the bottom navigation bar. If the overlay is kept, rename “event logo” to “Lambtown logo,” since people may have multiple CrowdCompass events. If Cvent’s app permits it, ensure that the Log In and Close button labels are read when someone first views the overlay—it may be helpful to request the push notification permission after the user has resolved the login overlay.
One reason I wasn’t going to investigate the mobile apps at first is that some issues may depend on Cvent’s decisions. Hopefully it’s useful to know about basic roadblocks, even so.
The CrowdCompass app’s main screen is the Event Guide, always available via the leftmost button in the bottom navigation. That’s helpful: for people using TalkBack with Android, the Event Guide screen is the only way to reach the vendor list, where Admission, Activity Feed, Vendors, and Workshops buttons are shown below the screen title and an advertising banner. When I first reached the Event Guide, TalkBack mentioned the Event Guide screen title and the Notifications component, and TalkBack found the buttons successfully when told to read the screen from the top.
Selecting the Vendors button on the Event Guide screen shows a Vendors screen, which lists four items: Vendors [again], Live Vendor Schedule, Search by Category, and Support Dixon. Yes, please, we’d really like to see the vendor list this time! Selecting Vendors once more shows the list, which works well. Success.
What about finding vendors while not viewing the Event Guide? One item in the More menu links to the Vendors screen, the one with the four-item list. Unfortunately, when reading from the top, TalkBack can’t find the expanded More menu content at all—it jumps from the overlay title to the bottom navigation. For someone using TalkBack, either they remember that the Event Guide has a Vendors button that can scroll out of view, they experiment a little, or the vendor list is unavailable in the app.
To fix: if the More menu’s entry point cannot be coded more accessibly, then make its items available via a link or button at the bottom of the Event Guide. It’s ideal to have one consistent way for people to find a feature in an app—but if that one way is not generally accessible, then it’s important to provide a way that is. People using TalkBack would also have no way to access information about the cook-off, participate in two games, join the attendee list, or run a general search within the app; those features are found only via the More menu.
What about common vision limitations?
I’ve viewed the home page and app info page with the deuteranomaly filter toggled on, and they’re readable. (The filter is meant to help balance red-green vision deficiency; red-green issues are estimated to affect 8% of men of NW European descent.) Color deficiency filters on iOS and Android aren’t captured in physical-device screenshots.
I’ve also adjusted the following settings on Android 11:
- Accessibility Settings > Font Size
- Accessibility Settings > Display Size, which affects spacing between components for both the operating system (e.g. app list, home screen) and within apps
These changes don’t affect the lambtown.org website. They are expected to affect layout within the CrowdCompass app.
Increasing Display Size, a common workaround for limited vision, distorts the layout on CrowdCompass app views. It’s definitely usable, but it looks awkward enough to suggest that people needing magnified or more widely spaced text weren’t considered while the Lambtown app was built. Below are screenshots of one Meet the Vendor detail with Display Size set to Default, then one set to Larger. Note that the default-size detail view suggests looking at the Vendor tab, which is hard to find in the app because it’s not a tab; it’s a button on the Event Guide view and an item in the inaccessible More menu. Note too that the larger view shows awkward line breaks on the overcrowded Check-ins and Bookmark components.
Finding and using the Lambtown app on an iOS device
Getting the app onto my iPhone began the same way my Android test did, above, with the confusing possibility of using the web app instead of downloading an app to install and use locally.
Do I have to log in? (No)
With VoiceOver on, when the app first launches, it shows the same login overlay as the Android app. VoiceOver says, “Lambtown Festival. Close login prompt. Button,” and stops. That’s agreeably clear: if we know there’s a login prompt to close, we can infer that the current display shows a login prompt and have VoiceOver read the rest of the content.
Selecting the Log In button opens the “Log in” screen as an overlay. Though it shows registration fields (first, last, email), the only thing VoiceOver says when this screen appears is “Cancel. Button.” This may be a Cvent issue, not specific to the Lambtown app.
Let’s cancel account registration, since it’s what we’re prompted by VoiceOver to do. That’s when the notification request dialog appears, a better experience than on Android.
When I first reached the Event Guide screen, VoiceOver mentioned the screen title and the Notifications component, and it found the buttons successfully when told to read the screen from the top.
Using VoiceOver with the iOS app’s More menu overlay is a much better experience than using TalkBack with the Android equivalent. VoiceOver can find all of the menu items when asked to read the screen from the top. Success.
What about common vision limitations?
I’ve viewed the home page and app info page with the deuteranomaly filter toggled on—same as for Android—and they’re readable.
I’ve also adjusted the following settings on iOS 13, the operating system version that was current when the Lambtown iOS app was first released:
- Accessibility > Display & Text Size > Larger Text > On, to pick up Dynamic Type support, if any
- Accessibility > Zoom > On
Toggling on Larger Text has no effect, which suggests that the app doesn’t use Dynamic Type. From a usability and accessibility perspective, it’d be ideal to let Dynamic Type handle resizing text. (This may or may not be a Cvent limitation; I lack a MacOS device with which to check.)
Unfortunately, if someone would like the iOS app’s text to be large enough to read easily without reaching for commonplace, middle-aged reading glasses, the main option is to experiment with the zoom-filter widget—possible but harder to use. Using the zoom filter risks missing important information, which is part of why Apple developed Dynamic Type.
Other usability glitches
- The Zoom links for events during the festival (watch the Sheep to Shawl judging, meet various vendors) persist after it. Though it’s our responsibility to understand that the event is over, someone might check whether a recording were available. Selecting a Meet the Vendor link from an event detail view in the Android app tries first to load the Zoom app, then returns to CrowdCompass with an unfriendly error code. It’s interesting that error code 3038 isn’t in Zoom’s list.
For iOS, a Zoom webview loads within the Lambtown app which reports that the webinar has expired. It’d be possible from here to launch an unrelated Zoom meeting, not ideal for keeping our attention on Lambtown.
- If someone skips the login overlay when first opening the app, it’s hard to see how to log in later. On both mobile apps, the bottom navigation’s Profile button leads to a screen titled “Log in” which has links to messages, contacts, settings, and so on. Tap the title component to open a screen also titled “Log in” with common registration fields (first, last, email), which is obscure and not intuitive. There’s also a button in the upper right corner of the first “Log in” screen (Profile)—three-dot icon on Android, exit icon on iOS—which contains a single item, Log In.
- The gamification aspect—you’ve earned points for taking a basic action with the app, such as viewing the schedule for the first time!—interferes with screen-reader support because the drawer grabs focus on mobile apps. It’s part of the CrowdCompass feature set, but is it so important? Screenshots below: web, iOS.
W3C has a mobile accessibility index. Though the mapping for WCAG to mobile devices is outdated (2015, WCAG 2.0), it offers a good summary of basics: WCAG 2.1 builds upon 2.0. Pair it with Glenda Sims’s Deque blog post (Jan 2018), which walks through WCAG 2.1’s mobile considerations.