One of the main goals of the Instagram Accessibility team is to work on system-wide accessibility problems that no single product team can solve. For us, accessibility development often centers around improving the experience for screen-reader users. We believe that by improving this experience, we can also improve the experience of other accessibility cohorts including users who are visually impaired and people with limited mobility and dexterity.
In this post we’ll share some insights on our experience of crafting an accessible Instagram Feed.
Why Feed?
While prioritizing surfaces for accessibility we focussed intently on the user. Instead of making a series of one-off changes to UI labels, which is typically how a lot of accessibility development is driven, we wanted to take a holistic approach. We considered how all users, not just screen-reader users use our app and prioritized surfaces that everyone uses, so everyone can benefit from more accessibility-minded development. Based on this approach, the feed, which is the first surface users interact with was the ideal place to start.
Our approach
On using TalkBack to navigate our feeds we discovered that it could take over a minute to swipe from one post to the next, since each visible UI element received individual focus. The ability to rapidly explore posts, which is something that we normally associate with the Instagram experience, was completely missing. This was definitely not ideal and we wanted every user to enjoy the same feeling of discovery when they land on Instagram’s feed, whether they use a screen-reader or not. In order to accomplish this, we worked on optimizing a few different areas:
Labeling
We made sure that feed UI elements had appropriate accessibility roles and labels. We fixed many labels and aggregated labels for feed posts, putting the most relevant information at the beginning, such as the author, type of post (e.g. image, video), and a description of the post. Getting this order correct turned out to be very important and impactful and gave screen-reader users more control, enabling them to quickly skip over a post they were not interested in, to find posts that are more engaging and maintained our theme of seamless navigation.
UI element grouping
The most noticeable change we made was condensing the focus hierarchy to represent each post with only two elements: the media and the post actions. These improvements simplified navigation by representing each individual post as one focusable element and reduced swipe time between posts from minutes to just seconds. By grouping focus elements more intentionally, we reduced the number of gestures it takes users to scroll through a post from as many as 30 swipes to just 2. This was crucial to achieving our goal of giving screen-reader users the experience of rapid exploration and discovery available on visual interfaces.
Before: no clear focus hierarchy
After: 2 focus points per post
User controls
The UI element grouping made the feed scrolling fast, but also removed focus on all post actions. In order to solve this and provide an optimized experience for screen-reader users, we moved all main post actions (Like, Comment, Send Post and Save) into one bottom sheet that can be accessed via custom actions on iOS (a feature that is well known and used by VoiceOver screen reader users), or a separate button between feed posts on Android. We also made sure that users could easily return to the previous, familiar, experience of interacting with each of the individual UI elements on a post if they want by double-tapping on the media object when the screen-reader is activated. This takes the user to a new screen containing a single post where every UI element is focusable again.
Android:
This post only describes how we’ve improved Feed for screen reader users. There’s there’s still more work to do to on other Instagram features, but we’re excited to continue improving accessibility and create new experiences that make all of our users feel welcome.
If you are interested in joining one of our engineering teams, please visit our careers page.
RELATED ARTICLES