SwiftUI simplifies UI development for Apple platforms, but it’s not without its flaws, especially in terms of accessibility. One notable issue is the inability to access internal links Text View – Screen readers do not recognize these inline links as actionable elements. In this article, we’ll dissect this issue, explore its impact on user experience, and provide guidance on how developers can enhance accessibility (a11y) in their SwiftUI app.
question
Let’s start with some simple code to illustrate the problem. This is a simple link in the text, rendered using Markdown.
let url = URL(string: "https://developer.apple.com/")!
Text("Please review our [Terms and Conditions](\(url.absoluteString))")
This should look like this:
As you can imagine, inline links with text are a common use case across applications. They are used for user agreements, deep links to other pages, and simple links to external articles.
However, when links are added like this, screen readers don’t know that they are clickable. Using the Accessibility Checker, we can see this issue in the code above:
“Please review our terms and conditions” is a label of type “text” (bad) (good). Screen readers won’t announce it as interactive.
solution
Solution 1: Add button feature
Add button feature Text element will ensure that screen readers know that the element is interactive. Here’s how to achieve it:
let url = URL(string: "https://developer.apple.com/")!
Text("Please review our [Terms and Conditions](\(url.absoluteString))")
.accessibilityAddTraits(.isButton)
However, when a text field contains multiple links, distinguishing them becomes a challenge. The entire text block is treated as a single UI element, which is not ideal when you want the user to choose between multiple links. This solution can make the text look like a button to a screen reader, but it doesn’t provide the granularity needed for multiple links in the same text.
Solution 2: Redesign the user interface
A more powerful but labor-intensive solution is to redesign the user interface so that links do not have to be appended with additional text. By isolating the link from other text, you can define each link as SwiftUI Linkwhich is inherently more accessible. (one Link will be used as button.)
Link("Terms and Conditions", destination: URL(string: "https://developer.apple.com/")!)
This approach maintains the visual and functional distinction of each link, improving accessibility by making each link individually selectable and actionable.
However, redesigning the user interface may not always be possible. It may involve significant changes to the application design and layout, which may impact project timelines, resources, and even the overall user experience.
(For products intended for public use, ensuring accessibility should be a priority from the beginning of the design process, as retrofit solutions often result in compromises in user experience and functionality.)
in conclusion
Both solutions provide ways to make inline links more accessible in SwiftUI, although each solution comes with its own set of tradeoffs. The choice between adding button features to the entire text block or redesigning the UI to isolate the links should be based on the specific needs of the project, the frequency and nature of the relevant links, and available resources. Of course, there are probably many other solutions, and I hope this article helps you explore them!
About the author
coriander (Like “corian” in “coriander”) South is an accomplished iOS developer with a passion for creating seamless and accessible user interfaces. Since joining Intuit in 2022, she has played a key role in the development of the company’s design system, ensuring it meets the highest standards of accessibility and usability. With a keen eye for detail and a commitment to inclusivity, Koriann’s work helps ensure that Intuit’s products are accessible to millions of users around the world. In her spare time, Koriann enjoys exploring the latest technological advancements and sharing her knowledge with the developer community.
Artificial Intelligence Acknowledgments
This was written with the help of ChatGPT. I wrote a rough draft and then used ChatGPT to rewrite my sentences, then I rewrote what I wasn’t happy with and added a few more sentences to spice it up.