All focusable elements need a proper label so non-sighted users and screen reader users know what they’re clicking on. Unfortunately, not everything that’s focusable can have a visual label because this can interrupt design balance and cleanliness.
There are two primary ways to handle this. You can use aria labels and other aria techniques, or you can use text that’s “visually hidden.”
Hidden text has one main benefit over aria techniques in that it can be translated. This is why Frames uses hidden text when possible instead of aria labels.
Thankfully, Automatic.css has a simple utility class for visually hiding text (.hidden–accessible). This class also applies a visual indicator to hidden elements in the builder so you know they’re there when editing your site.
Example
Here’s a profile card with social icons (builder view):
And here’s what it looks like on the front end:
The social icons are focusable, but the icons themselves can’t be read by screen readers or non-sighted users, so they’re not accessible by default.
In the builder version, you’ll notice an “A” icon next to each social icon. This is the accessibility text indicator added by ACSS (you can read more about ACSS’s accessibility features here).
The hidden text is just a simple text box. The text should tell the user exactly where the link goes if they click on it. For example, the hidden text next to the Facebook icon reads, “Follow John Doe on Facebook.”
Hidden text supports dynamic data, so you can even use this technique inside a query loop.