January 28, 2023

NewsRoomUG

Technology Room

Making Airbnb’s Android app extra accessible | by Julia Fu | The Airbnb Tech Weblog | Jan, 2023

6 min read

By: Julia Fu, Peter Elliott

Decorative image for the blog post.

At Airbnb, we now have been consciously designing and constructing merchandise to be equally usable by all customers. Making our cell apps and web sites extra accessible not solely aligns with our firm’s mission of making a world the place folks can belong anyplace, but in addition helps the civil rights of individuals with disabilities and complies with the regulation.

On this article, we spotlight a number of the efforts we now have made to make the app extra accessible, for instance, labeling UI components, grouping associated content material, supporting giant font scale, offering heading and web page names. The Airbnb app is likely one of the hottest journey apps with hundreds of thousands of customers and helps many options. Making such a fancy app extra accessible is a big endeavor that we’re constantly engaged on.

At Airbnb, we comply with trade greatest practices to make the Android app accessible. If you’re , you’ll find all greatest practices we comply with from the official Android documentation for platform particular pointers and the Web Content Accessibility Guidelines as an trade customary. Right here we wish to spotlight just a few examples the place we apply the perfect practices:

Finest Observe: content material descriptions

All the pieces shall have correct content material descriptions until they need to be ignored by assistive expertise. In these examples, the share button has a content material description that TalkBack reads aloud. TalkBack skips the home icon.

Share button highlighted on a listing page. TalkBack output says ‘Share, Button’.
Row highlighted with a star icon, bolded and underlined text, another icon with text, and subtitle text on a listing page. TalkBack output omits content for the icons and says ‘Rated 4.88 out of 5 from 203 reviews. Superhost Willington, Connecticut, United States’.

Finest follow: grouping

Components of a pure group will be introduced along with focusable containers for higher usability and accuracy. For example, Talkback reads all itemizing content material on the cardboard collectively.

Listing card with a photo, rating, title, and price highlighted on a listing collections page. TalkBack output reads all the information together.

Finest follow: font scale

UI shall be usable when the person will increase the system font scale.

Default vs enlarged font scale:

A listing search page with a search bar, tabs with category names, two listing cards, a floating Map button, and a navigation bar at the bottom
Same page in a larger font, with only the first listing card visible
Default font scale on the left. Enlarged font scale on the precise.

Scaling greatest practices

The Airbnb Android app is a big app with many screens. It might be exhausting and never scalable if we wanted so as to add accessibility code in every single place. Fortuitously, our Design Language System allows us to broadly apply these greatest practices throughout product surfaces in a extremely environment friendly manner. Each display is constructed with a group of reusable UI elements. Once we enhance the accessibility for one element, the change applies to all of the pages with this element as a part of the view. This has a long-lasting constructive impact on our app’s accessibility enhancements. Right here’s an instance:

The accessibility filters screen for a stay includes a large icon, a heading, subheadings, multiple checkbox options for various features (such as “no stairs or steps to enter”), and a footer..
The same screen with component names overlaid on top, such as DocumentMarquee for the heading, LeadingIconRow and CheckboxRows.

Take SectionHeader for instance. This UI element is used to speak the construction on the web page and group content material collectively. We mark this element to be an accessibility heading within the element code so it’s accessible in all screens that comprise this element.

We invested in automated accessibility testing and linting to run with each code commit, which creates a fast suggestions loop for engineers and empowers them to make the app accessible at code writing time. The checks are quick, dependable, and scale effectively with our fast-growing options within the Android app.

Automated testing

We arrange Espresso-based automated testing to test for accessibility points. Espresso is a well-liked testing library for Android UI with built-in accessibility checks. It helps a complete set of accessibility guidelines and is simple to arrange:

If accessibility checks fail, the take a look at outputs an error stack hint that engineers can use to debug the problem. For instance:

On this instance, engineers can present a content material description to the picture view to fulfill accessibility necessities.

We additionally screenshot take a look at our elements with a bigger font measurement to make sure the conduct is right utilizing Happo.

A screenshot test of the marquee component using a larger system font. The marquee component contains a vertical stack with an icon, smaller kicker text, larger title text, and smaller subtitle text.

Linting

Along with automated testing, we additionally enabled linting, together with Android Lint guidelines for accessibility and customized lint guidelines constructed with Ktlint.

Right here is an instance of an Android accessibility lint rule:

Apart from the built-in Android Lint, we additionally use Ktlint to construct customized lint guidelines. For example, when a person navigates to a brand new display, we offer a web page identify for a display reader to announce. We use the next rule to be sure that the web page identify is localized.

Lint guidelines are simple to arrange and supply well timed suggestions, however linting has limitations — it may solely carry out static code evaluation.

Right now, these automated checks run as a part of CI (Steady Integration) checks for each code commit. If a pull request doesn’t cross the checks, it is going to be blocked from being merged into the first code department. We nonetheless use handbook testing to cowl the areas that automated checks don’t cowl, such because the traversal order of UI components on a web page. Automated and handbook checks complement one another effectively.

Over the previous yr, we now have been integrating Jetpack Compose into our app. Google’s Accessibility in Compose documentation has been an important useful resource to make sure our Compose elements and screens stay accessible. Whereas there are some notable issues lacking that existed with Views (e.g. focus order modification), Compose remains to be a younger library and we look ahead to future enhancements. Listed here are a few issues price mentioning about our Compose-specific accessibility tooling:

Proactively encourage content material descriptions within the API

Certainly one of our pointers for UI elements is that content material descriptions uncovered through a perform parameter shouldn’t use a default worth. This brings accessibility to the highest of thoughts when an engineer makes use of the element as they should contemplate what worth to cross. A null worth remains to be acceptable in circumstances the place that UI component will not be essential for accessibility.

A screenshot of an IconRow component that shows an icon beside two lines of text.

Web page identify bulletins

A screenshot of several photos of a listing with the up button focused in the toolbar. The TalkBack output says “Photo tour of the listing”. We allow hosts to add captions for photos. If captions are provided, they are announced by Talkback when a user clicks on the photo. If no captions are provided, we do not generate them.

When utilizing Fragments and Views, we use the View.setAccessibilityPaneTitle() and View.announceForAccessibility() APIs when navigating to a brand new display to announce a descriptive web page identify to the person. These APIs don’t exist in Compose however we needed to maintain the performance because it helps to offer extra context as to what the brand new display shows. Our present workaround units sure semantics on the display’s outer composable:

We use the liveRegion property so adjustments will be introduced when the content material description adjustments. That is helpful for pages whose whole content material is decided by a response from the server. On this case, TalkBack would announce “Content material Loading” whereas the community request is pending, adopted by “Content material Loaded” when it completes, and at last the web page description outlined within the server response. One draw back of this method is that it requires the outer container to be focusable, which requires a further navigation motion to get to the content material.

Making our Android app extra accessible has been an impactful journey. Enhancing app accessibility entails following greatest practices, including rigorous enforcements, regularly studying from errors, and placing within the work. All of those are worthy efforts to verify an app works for all customers.

If you’re enthusiastic about constructing extremely accessible merchandise and the framework to help them, try a few of our associated open positions:

Staff Android Software Engineer, Guest

Senior iOS Software Engineer, Infrastructure

It’s a large endeavor to make a fancy app just like the Airbnb Android app extra accessible. This work wouldn’t be attainable with out the large efforts from the digital accessibility group and the close-knit Android group at Airbnb. Each engineer has contributed to creating the options they personal accessible. Making the Android app extra accessible is an ongoing effort and it couldn’t succeed with out all of them.

All product names, logos, and types are property of their respective homeowners. All firm, product and repair names used on this web site are for identification functions solely. Use of those names, logos, and types doesn’t suggest endorsement.

All bookings included on this weblog publish are supposed for instance. Airbnb doesn’t endorse or promote these listings or another lodging or experiences on the platform.

Copyright © All rights reserved. | Newsphere by AF themes.