In the first part of a three-part series, Michael Taylor composes a social media post with a mobile screen reader, and each barrier he hits (unlabeled icon buttons, a text field he cannot get back into, a media picker he cannot see) is something to check in any app or site that lets people write, pick options, or upload media.
One area of the digital world that I consistently feel shut out of is social media. Whether it's a trendy new quote or idea being shared, a funny video being discussed and referenced with family or friends, or an important update from a business, I cannot shake the feeling that I am missing out on a major part of modern technology.
While I believe social media will always have an inherently visual component, social media platform developers and end users alike can take steps to make interfaces and content as accessible and screen reader-friendly as possible. Since most people seem to use social media on the go on their smartphones and tablets, I will spend the next few blogs breaking down different areas of it from a mobile, touch-based screen reader perspective, beginning here with post composition, a task that almost all social media users perform at some point.
Icons and Button Labeling
Social media post composition these days is so much more than creating a title and body text and sending it off to the masses. Modern composition interfaces include a plethora of options that let users express themselves through text styles, colors, background images or effects, post categorization, feeling or mood indications, and more. As a result, post composition screens have become cluttered and complex in recent years.
To save space and improve visual appeal, most composition forms I have used rely on icons and graphical buttons to indicate specific controls or option selections. However, I have unfortunately found that the labeling of these interface elements is often poor. For example, if an icon button has no label, my screen reader will likely miss it completely or announce it as a vague, meaningless term like "Icon" or "Button, Image." Additionally, for the buttons that do have a label, I often find the label inadequate, which I will explain next.
When composing a social media post, the meaning of the option buttons can be quite nuanced. For example, a symbol of two hands clapping may indicate that the user is celebrating or cheering as the purpose of the post. If the screen reader description for that button was simply "Hands Clapping," I would feel confused about the option's function and purpose.
In a case like this, I need the icon button to have a clearer label and an additional description that only screen readers announce. A better label may sound like "Hands Clapping, Selecting This Option Will Indicate To Your Audience That You Were Feeling Celebratory Or Were Cheering When Creating This Post."
Essentially, I'm saying the labels and descriptions need to bridge the gap between the symbol's implied meaning and the literal meaning a blind user gets from a generic text title. This differs from other examples, such as an e-commerce website, where a literal label like "Shopping Cart" for a wagon-icon button is very appropriate.
Text Editing
Inputting and editing text is also a necessary part of social media post composition, and it comes with its own issues for me. Sometimes, if I move screen reader focus away from the body composition field and onto another element, it becomes impossible to reenter the text field for additional editing. This means that I only have one shot to input the post text. If I even accidentally touch another part of the screen, I cannot get back into the composition field.
In other cases, if I use speech-to-text dictation to compose my post, random auditory artifacts appear at the end of the field, commonly announced as "Attachment." With that vague indication and the inability to see what is going on, I have no way to tell what, if anything, is attached to the post. The strange thing is that I never actually added an attachment. Sighted users have confirmed that nothing is visually present in the field, even though the "Attachment" announcement is clearly spoken, which indicates this is strictly a screen reader issue.
On some platforms, a running character count appears somewhere in or above the edit field and updates in real time. My screen reader can almost never consistently find and focus on this important element.
If I try to modify the text or background color on a post, the colored circles or tiles in the color picker often have no corresponding text labels. That makes it impossible for screen reader dependents like me to change the color of any part of the post.
Adding Media
A social media post is almost never complete without supporting media, like images or videos. Adding these is often problematic for screen reader dependents. For one, my screen reader often cannot detect any of the thumbnail previews when I browse the media picker. This is likely because they aren't marked in the code as actionable items a screen reader can recognize.
If I choose media and add it to the post, screen reader focus will sometimes suddenly go haywire. I can't focus on certain parts of the interface, and the uploaded media often acts as a focus trap when I navigate manually by swipe.
If I include a video with a post, it sometimes begins playing automatically once added. In these instances, there is sometimes no screen-reader-accessible way to pause playback. As a result, I must listen to a lot of background noise that interferes with my screen reader's speech until I publish the post.
Where That Leaves Me
Social media accessibility is a very interesting topic. As things currently stand, composing and editing a post can be very problematic for screen reader users. I hope this improves in the future to better include us in the social media game.
Common questions about composing social media posts with a screen reader
What happens when an icon button has no label for screen readers?
An icon button with no accessible label is either skipped by the screen reader or announced as something vague like "Icon" or "Button, Image." Even a label that only names the picture, like "Hands Clapping," can leave a blind user unsure what selecting it will actually do.
Why can a screen reader user lose access to a text field while typing?
Some composers make it impossible to return focus to the text field once focus moves away. In the experience described here, touching any other part of the screen meant the body field could not be reentered, so the post text had to be right on the first try.
Are color pickers accessible to screen reader users?
Not when the color swatches have no text labels. Unlabeled circles or tiles give a screen reader nothing to announce, so users can't choose any colors.
Can autoplaying video interfere with a screen reader?
Yes. A video that starts playing as soon as it is added, with no screen-reader-accessible pause control, plays over the screen reader's speech until the post is published.
What to check in your own app or site
Most business sites aren't social networks, but many share the same building blocks: icon-only buttons, text fields, color or option pickers, and media uploads. Each barrier in this post is a specific thing to test with a screen reader turned on.
An automated accessibility testing tool can help surface missing labels on buttons and swatches across your pages, while problems like a text field that cannot be reentered or an upload that traps focus show up when someone works through the flow by hand. Unlabeled controls can also lead to accessibility complaints, so finding one is a reason to review the rest of the journey.
Clear buttons and links are one topic in our upcoming webinar with OuterBox, Web Accessibility, SEO and AI Search: Building Clearer Website Content, on November 18 at 12 pm ET. Register to get practical tips from Jeff Adams of UsableNet and Colin Gacek of OuterBox on reviewing your existing pages.
