By: Julia Fu, Peter Elliott
At Airbnb, now we have been consciously designing and constructing merchandise to be equally usable by all customers. Making our cellular apps and web sites extra accessible not solely aligns with our firm’s mission of making a world the place individuals can belong wherever, but additionally helps the civil rights of individuals with disabilities and complies with the legislation.
On this article, we spotlight among the efforts now we have made to make the app extra accessible, for instance, labeling UI components, grouping associated content material, supporting massive font scale, offering heading and web page names. The Airbnb app is without doubt one of the hottest journey apps with thousands and thousands of customers and helps many options. Making such a fancy app extra accessible is a big endeavor that we’re repeatedly engaged on.
At Airbnb, we comply with business finest practices to make the Android app accessible. In case you are , you could find all finest practices we comply with from the official Android documentation for platform particular tips and the Web Content Accessibility Guidelines as an business customary. Right here we need to spotlight a number of examples the place we apply the most effective practices:
Finest Apply: content material descriptions
All the things shall have correct content material descriptions except they need to be ignored by assistive know-how. In these examples, the share button has a content material description that TalkBack reads aloud. TalkBack skips the home icon.
Finest follow: grouping
Parts of a pure group could be introduced along with focusable containers for higher usability and accuracy. As an example, Talkback reads all itemizing content material on the cardboard collectively.
Finest follow: font scale
UI shall be usable when the consumer will increase the system font scale.
Default vs enlarged font scale:
Scaling finest practices
The Airbnb Android app is a big app with many screens. It could be exhausting and never scalable if we would have liked so as to add accessibility code all over the place. Happily, our Design Language System allows us to broadly apply these finest practices throughout product surfaces in a extremely environment friendly method. Each display screen is constructed with a set of reusable UI elements. After we enhance the accessibility for one part, the change applies to all of the pages with this part as a part of the view. This has a long-lasting constructive impact on our app’s accessibility enhancements. Right here’s an instance:
Take SectionHeader for example. This UI part is used to speak the construction on the web page and group content material collectively. We mark this part to be an accessibility heading within the part code so it’s accessible in all screens that comprise this part.
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 examine 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 straightforward to arrange:
If accessibility checks fail, the check 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 check our elements with a bigger font dimension to make sure the habits is appropriate utilizing Happo.
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:
In addition to the built-in Android Lint, we additionally use Ktlint to construct customized lint guidelines. As an example, when a consumer navigates to a brand new display screen, we offer a web page title for a display screen reader to announce. We use the next rule to be sure that the web page title is localized.
Lint guidelines are simple to arrange and supply well timed suggestions, however linting has limitations — it could possibly solely carry out static code evaluation.
Immediately, these automated checks run as a part of CI (Steady Integration) checks for each code commit. If a pull request doesn’t move the checks, will probably be blocked from being merged into the first code department. We nonetheless use guide 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 guide checks complement one another effectively.
Over the previous 12 months, now we have been integrating Jetpack Compose into our app. Google’s Accessibility in Compose documentation has been an ideal 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 continues to be a younger library and we stay up for future enhancements. Listed below are a few issues value mentioning about our Compose-specific accessibility tooling:
Proactively encourage content material descriptions within the API
One in every of our tips for UI elements is that content material descriptions uncovered by way of a perform parameter shouldn’t use a default worth. This brings accessibility to the highest of thoughts when an engineer makes use of the part as they should contemplate what worth to move. A null worth continues to be acceptable in circumstances the place that UI ingredient will not be essential for accessibility.
Web page title bulletins
When utilizing Fragments and Views, we use the View.setAccessibilityPaneTitle() and View.announceForAccessibility() APIs when navigating to a brand new display screen to announce a descriptive web page title to the consumer. 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 screen shows. Our present workaround units sure semantics on the display screen’s outer composable:
We use the liveRegion property so modifications could be introduced when the content material description modifications. That is helpful for pages whose total content material is set 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 eventually 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 an extra navigation motion to get to the content material.
Making our Android app extra accessible has been an impactful journey. Bettering app accessibility entails following finest 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.
In case you are 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 enormous endeavor to make a fancy app just like the Airbnb Android app extra accessible. This work wouldn’t be potential with out the big efforts from the digital accessibility workforce 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 house owners. 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 meant for instance. Airbnb doesn’t endorse or promote these listings or another lodging or experiences on the platform.
