Making Accessible Links in SwiftUI

Harris Borawski — Wed, 18 Dec 2024 21:41:02 +0000

SwiftUI has streamlined Apple platform UI development, but it's not without its flaws, especially regarding accessibility. A notable concern is the inaccessibility of links within the Text view—screen readers fail to recognize these inline links as actionable elements. In this post, we'll dissect this issue, exploring its impact on user experience and providing guidelines on how developers can enhance accessibility (a11y) in their SwiftUI applications.

Problem

Let's start with some simple code to illustrate the problem. Here is a simple link within 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, inlining links with text is a common use case across apps. They're used for user agreements, deep-linking other pages, and simply linking to external articles.

However, when links are added like this, it is not clear to screen-readers that they are tappable. Using the Accessibility Inspector, we can see this issue in action for the code above:

"Please review our Terms and Conditions" is one label (good) with type 'text' (not good). The screen-reader will not announce this as interactive.

Solutions

Solution 1: Add a Button Trait

Adding a button trait to the Text element will ensure the screen-reader knows the element is interactive. Here’s how you could implement it:

let url = URL(string: "https://developer.apple.com/")!
Text("Please review our [Terms and Conditions](\(url.absoluteString))")
    .accessibilityAddTraits(.isButton)

However, when a text segment contains multiple links, differentiating between them becomes a challenge. The entire text block is treated as a single UI element, which isn't ideal when you want users to choose between multiple links. This solution can make the text look like a button to screen-readers, but it doesn't provide the granularity needed for multiple links within the same text.

Solution 2: Redesign the User Interface

A more robust but labor-intensive solution is to redesign the user interface so that links do not have to be appended with additional text. By isolating links from other text, you can define each link as a SwiftUI Link, which is inherently more accessible. (A Link will be presented to screen-readers as a 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 feasible. It can involve significant changes to the app's design and layout, which may affect the project timeline, resources, or even the overall user experience.

(For products that expect public usage, ensuring accessibility should be a priority from the outset of the design process, as retrofitting solutions often leads to compromises in user experience and functionality.)

Conclusion

Both solutions offer ways to make inline links more accessible in SwiftUI, though each comes with its own set of trade-offs. The choice between adding a button trait to the entire text block and redesigning the UI to isolate links should be made based on the specific needs of the project, the frequency and nature of the links in question, and the available resources. Of course, there are probably many other solutions as well, and I hope this article helps you on the path to exploring them!

About the Author

Koriann (like the "corian" in "coriander") South is an accomplished iOS developer with a passion for crafting seamless and accessible user interfaces. Since joining Intuit in 2022, she has played a pivotal role in the development of the company's design system, ensuring that 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 worldwide. In her spare time, Koriann enjoys exploring the latest advancements in technology and sharing her knowledge with the developer community.

AI Acknowledgement

This was written with the help of ChatGPT. I wrote the draft, then I used ChatGPT to rephrase my sentences, and then I rewrote the rephrasing I was unsatisified with and added a few more sentences for flavour.

Forem: Harris Borawski