Announcing the Accessibility Techniques for SwiftUI/iOS Open Source Project

Paul J. Adam
CVS Health Tech Blog
5 min readJan 19, 2024

CVS Health is releasing a new open-source project, Accessibility Techniques for SwiftUI/iOS, which demonstrates Accessibility programming techniques for SwiftUI/iOS using live good and bad examples that can be tested with VoiceOver and other assistive technologies on iOS.

The GitHub repository and Xcode project include good and bad .swift technique pages and .md markdown documentation for developers explaining how to code accessible patterns for iOS. Each technique is organized under a table of contents linking to pages under categories such as Images, UI Controls, Headings, Dynamic Type and much more. Xcode UI tests are also included for each technique showing how to write automated tests for accessibility properties.

Main index page of the app showing the techniques pages, categories, and disabled pages that are not completed.
Table of Contents of the iOS App

For example, if you want to learn how to code accessible TextFields in SwiftUI you can open the iOS app then tap UI Controls and open the Text Fields page. To see the source code, open the Xcode project and open the TextFieldsView.swift technique file. Open the UITests .swift file to learn how to write automated tests checking for the existence of accessibility elements or if elements have accessibility labels.

On each technique page there is a description of the accessibility coding requirements, good and bad examples, and details accordion under each example that explains why it is accessible or inaccessible.

Both Light and Dark modes are supported with sufficient text contrast ratios in each mode. The app itself is accessible to VoiceOver screen reader users.

Turn on VoiceOver and test the good and bad examples to understand the screen reader user experience. Full Keyboard Access and Voice Control can also be used to test the good and bad techniques and understand their problems and solutions for those users.

Sliders page with a good and bad slider example shown that has a label in the good example and has no label in the bad example.
Sliders technique page with good and bad examples. VoiceOver is focused on the good Brightness slider which has a visible label and .accessibilityLabel.

This is an iterative project which will grow and improve as new techniques are added and old techniques updated. One possible improvement may be to add integrated Test Cases for iOS. We’d love to collaborate with other a11y folks to build this into an excellent training resource for developers, testers, and designers!

GitHub Repo

Locate the GitHub repo link here, https://github.com/cvs-health/ios-swiftui-accessibility-techniques, and give us a Star if you’d like to stay informed of project updates and new releases. The markdown documentation files can be accessed directly on GitHub by going to the /Documentation/ directory.

iOS App

Download the iOS app directly from the AppStore.

Why did we build Accessibility Techniques for SwiftUI/iOS?

  • There is little accessibility guidance available on the web explaining to developers how to code accessible patterns for SwiftUI iOS native apps.
  • Developers and testers have difficulty understanding how to apply the WCAG (Web Content Accessibility Guidelines) to Native iOS apps because WCAG was written for HTML content.
  • Currently there is not extensive detailed accessibility guidance documentation explaining how to build accessible SwiftUI iOS native apps. There are WWDC videos and some sample projects but it’s not enough to give developers all the accessibility guidance necessary.
  • There is currently not an effort to teach developers how to fully apply WCAG to SwiftUI iOS native apps.
  • Developers may not be aware of the new performA11yAudit() automated testing feature included in XCUI Testing or how to write Xcode UI accessibility tests.
Good error validation technique example
Error Validation good example showing VoiceOver speaking the invalid input error message.

Who is target audience for this open-source project and app?

Developers are the main target audience with the project’s goal to teach coders of SwiftUI apps how to apply the WCAG accessibility requirements to their native apps. Designers can also learn how to design accessible views and components that conform to WCAG. Accessibility/QA Testers can learn the expected behavior with the VoiceOver screen reader and other iOS app assistive technologies by interacting with the live good and bad examples in the app.

Who is the creator and maintainer of the project?

CVS Health through its accessibility engineers, including Paul J. Adam, created this project. Paul has specialized in mobile accessibility since using the first iPhone with VoiceOver in 2009, the iPhone 3GS. Paul has been a registered iOS developer since 2011 and has released accessible apps in the App Store. Paul has extensive experience testing the accessibility of native mobile apps and training designers and developers on implementing mobile accessibility.

Why and how to contribute?

This app can teach your iOS developers how to meet WCAG, however, it is not complete and may need improvements. The project is about halfway done and shows other pages listed as placeholders for future techniques that are currently disabled in the app. Those disabled pages need their good and bad example techniques created as the live .swift demo and the .md markdown documentation to accompany the technique. You could choose to contribute a technique that interests you and is not yet completed. To contribute to the project you will need to visit the Contributing page and sign the Contributors License Agreement. Fork the repository and create a pull request with your proposed contributions.

Dynamic Type technique page showing Bad Example 1
Dynamic Type bad example showing truncated text after choosing largest accessibility text size in iOS Settings.

Found issues or have suggestions?

If you find bugs or issues in the app or have recommendations for future improvements then please submit a new issue under the Issues tab in the GitHub repo. Thank you for the feedback!

How do I download the project and test the app?

In the Code tab of the GitHub repository find the Code button and clone or download the project files. Open the Xcode project and you can see the source code and run the app on an iOS device to test the good and bad accessibility examples.

Code menu button expanded to show the Clone options, Open with GitHub Desktop, or Download ZIP
Clone the repo or download a ZIP from the Code menu button.

What are the .md markdown documentation files?

Each technique page has an accompanying .md markdown documentation file that explains to developers of SwiftUI apps what code they need to implement to make that component accessible. Developers, designers, and testers can read the markdown documentation files to quickly understand what is required without needing to open Xcode or view the technique demo in the app.

InformativeImages.md documentation page shown and the /Documentation/ folder structure is displayed on the left.
.md Markdown Documentation Interface

Let us know what you think!

Leave a comment below with your feedback after testing the project or the app. How are you planning to use this project at work? Would you like to contribute but have questions? We’d love to hear your feedback!

© 2023–2024 CVS Health and/or one of its affiliates. All rights reserved.

SwiftUI is a trademark of Apple Inc. IOS is a trademark of Cisco Systems, Inc. The Accessibility Techniques for SwiftUI/iOS Open Source Project is an independent project and has not been authorized, endorsed, or sponsored by Apple Inc.

--

--

Paul J. Adam
CVS Health Tech Blog

Native iOS Accessibility Engineer, Web/Mobile A11y Specialist/Consultant, Austin #a11y http://meetup.com/a11yATX. SwiftUI, JavaScript/ARIA, HTML/CSS, WCAG, ADA