Skip to main content

Search

Items tagged with: adventOfIOSAccessibility

Day 21 - #adventOfIOSAccessibility. There are a few accessibility settings you can check for, or get notifications in case these preferences change. This is especially important when developing custom components as they will mostly work with UIKit and SwiftUI controls.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 21. Honoring users' settings. Display & Text Size Accessibility Settings Screen. There are two examples, Apple's podcast app playing an episode of Swift by Sundell and FaceTime. There are arrows pointing from some of these settings to how they take effect in these apps. When Reduce Transparency is on, in FaceTime you don't see the front camera being previewed and blurred in the background, instead, it is just opaque. When bold text is on, all text in both apps is bold. When Increase Contrast is on, the New FaceTime button is darker. When Button Shapes is on, the button for the podcast show or the playback speed (both consisting of just text with the app's tint color) is underlined so it is easier to be identified as buttons. The sleep timer button, which is an icon, gets some borders around it too. When smart invert is on, the artwork of the podcast doesn't get inverted.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 20 - #adventOfIOSAccessibility. There is an option for the user to request an experience with Reduce Motion, and we should honor it. If your app has animations, make sure to check if the user has this setting on. Here are three examples where Apple does a great job.

UIKit: developer.apple.com/documentat…

SwiftUI: developer.apple.com/documentat…

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 20. Reduce Motion. Three examples. In the App Store app, Apple sometimes has tiles with icons from apps or games that continuously moves for the user to get a sneak peek of all the icons. The second one is the Weather app, where there are quite realistic animations of the weather conditions in the background. The third one is the Stocks app. If you open one of your symbols, there is a banner at the top where your symbols keep automatically scrolling mimicking what you see on tv. In all these three cases, Apple completely stops the animations if Reduce Motion is on.

accessibilityReduceMotion | Apple Developer Documentation

Whether the system preference for Reduce Motion is enabled.
Apple Developer Documentation
#365DaysIOSAccessibility #adventofiosaccessibility

Day 18 - #adventOfIOSAccessibility. When building custom components, or if not relying on UIControl's attributes to configure state, it can be easy to forget to specify the right accessibility traits. These are indispensable for a good experience with VoiceOver, Switch Control, Voice Control, Full Keyboard Access...

#365DaysIOSAccessibility

Calendar of advent of iOS Accessibility. Day 18. Missing traits. Three examples. The first one shows a custom segmented controller. These tend to have a missing selected trait for the selected option. The second one shows a custom page control. These should configure an adjustable trait. The third one shows a button that shows the disabled state by changing the color of the text instead of setting isEnabled to false. This means the button will be lacking the not enabled trait.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 17 - #adventOfIOSAccessibility. Check the traversal order of elements in your app. Sometimes the default top-left to bottom-right order might not be the most logical one. Sometimes you may consciously want to tweak the order. Other times, grouping is the answer.

#365DaysIOSAccessibility

Three examples of traversal order for three pieces of data in three columns. The first one says Followers and 550 underneath, the second one Following with 340 underneath, and the third one Posts with 750 underneath. In the first one, the order is: Followers, Following, Post, 550, 340, 750. This order is incoherent. For the second one, the order is: Followers, 550, Following, 340, Posts, 750. This one has a logical order. The third one's order is: Followers 550, Following 340, Posts 750. Where both name and number for each one of the pieces of data is grouped. It is clearer and the navigation is easier.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 16 - #adventOfIOSAccessibility. A reminder that the more modes we use to convey important information, the more likely it is that all users will perceive it. Consider a combination. of color, icons, messages, sound, haptics, animations, etc.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 16. Multimodal information. One example shows an app where you need to introduce a 6-digit pin. When it is the wrong pin, it does a shake animation on the pin field. It is using one mode: animation. If reduce motion is enabled, or for VoiceOver users, this information will not be perceived. The second example shows the same app but it adds a warning icon and a message that says "Incorrect pin" in red and the device also vibrates and does a sound to indicate the error. It uses several modes: animation, iconography, messaging, color, sound, and haptics. This is preferred.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 15 - #adventOfIOSAccessibility. Touch target sizes are recommended to be at least 44 x 44 points for better usability. Buttons in the navigation bar (especially when not using nav bar button items), dismiss buttons, and custom toolbars, are common examples that often fall below this size.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 15. Small touch target sizes. Three examples of common cases with buttons that tend to have small touch target areas. The first one is buttons in the navigation bar. The second one is dismiss buttons for modal or inline popups. The third one is toolbars, especially custom ones.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 14 - #adventOfIOSAccessibility. iOS and Xcode provide a wide variety of tools and options to deal with color, and help us providing good color contrast ratios. From system colors that automatically support Increase Contrast, to high contrast (and light and dark mode) color asset variants, automatic checks with the Audit feature in the Accessibility Inspector, and even a built-in contrast calculator.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 14. Color contrast. Some of the tools available in Xcode that help you create apps with great contrast are the asset catalog which lets you provide high contrast variants for color sets and assets, and the color contrast calculator. Some examples show how text size also affects contrast ratios. White on Black passes for all sizes. A grey with a 4.5 to 1 ratio over black will fail on small text sizes. A grey with a 2.9 to 1 ratio over black, fails for all text sizes. You can also use system colors an make sure that your app works well with the High Contrast setting.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 10 - #adventOfIOSAccessibility. Toggles or UISwitches are often found separated from the label that precedes (and describes) them; with an unclear label; missing a value, trait, or hint; or even not being actionable at all.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 10. Bad experience with toggles. Very often toggles or UISwitches are not grouped together with the label preceding them or lack of the right values, traits and hints. Three examples. With the first one VoiceOver just says "Shared accomodation" and it is not even actionable. The second one focuses first on the label and then on the switch. VoiceOver says "Event cancellations" and then "Switch button, on, doublet-tap to toggle setting". The third one does a similar thing but treats the switch as a button. VoiceOver says: "Like" and then "Button". All quite confusing. With UIKit you can configure your UISwitch as the accessoryView for a table view cell. With SwiftUI you can use a named Toggle that lets you specify an associated label.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 9 - #adventOfIOSAccessibility. If you have interactions that are hidden or require complex gestures to be performed or that may conflict with VoiceOver, you need to provide alternative ways of executing these actions. Custom actions can help a lot of times, but not always.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 9. Hidden actions not being accessible. Find alternative ways of actioning hidden interactions or that require complex gestures or gestures that conflict with VoiceOver's. Two examples. The first one is swiping left in a table view cell to unveil a delete option. That could be fixed by adding delete as a custom action. Second example is a bottom sheet menu with a grid of options. You need to swipe down to dismiss it. You'd probably need to implement the escape gesture for VoiceOver and it would be a good idea to add a close button anyway.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 8 - #adventOfIOSAccessibility. If a view has isAccessibilityElement to true, assistive tech won't look for any of its subviews. That means that if there are any buttons inside, they won't be accessible. In those cases, you can add custom actions to be able to activate the actions for those buttons.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 8. Inaccessible buttons within accessible views. Example of the Mastodon app. If we make the table view cell representing a post an accessible element so it is easier to navigate, the subviews, including the buttons, won't be accessible anymore. So how can a VoiceOver, Keyboard, Voice Control, or Switch Control user interact with them? Custom actions to the rescue. In SwiftUI there is a new modifier, since iOS 16, called accessibilityActions. Before, you had to add the actions one by one. In UIKit, there is an accessibilityCustomActions property, which is an array of UIAccessibilityCustomAction.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 6 - #adventOfIOSAccessibility. With regular buttons from UIKit or SwiftUI, you are all set. With complex views, headings, or table/collection view cells that, when selected, bring the user somewhere else in the app or perform an action, you'll have to add the button accessibility trait yourself to convey users that it is an interactive component.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 6. Missing button accessibility trait. Four examples of not-so-obvious elements that require the button trait to be added by developers. First example, the collection view cells representing shortcuts in the Shortcuts app. Runs the shortcut when selected. Second example, the table view cell with a post in the Mastodon app. It opens the detail view and thread when selected. Third example, the What to Watch header in the Apple TV+ app. It can be selected and it will open the What to Watch screen. Fourth example, a view that is more complex than a regular button like a notification in Notification Centre that opens the notification.
#365DaysIOSAccessibility #adventofiosaccessibility

Day 4 - #adventOfIOSAccessibility. Important information is often conveyed visually through icons, badges, or progress bars... These details can easily be overlooked. Please make sure they're part of your UI's components' accessibility labels or values for a more inclusive experience.

#365DaysIOSAccessibility

Calendar of Advent of iOS Accessibility. Day 4. Visual cues missing from VoiceOver's announcement. Four examples. The first one is a button with a person silhouette and a checkmark. VoiceOver announces it as "Collaborate, button". It is missing the fact that you are already collaborating with someone. Represented by the checkmark. Second example shows a tab with the title "Coming soon" and a badge with the number 6. VoiceOver announces it as "Coming soon, Tab 2 of 5". It is not conveying that there are 6 new movies and shows. Represented by the badge. Third example shows a chart's title: "Daily Average 1h 55m", an arrow pointing down, and "55% from last week". VoiceOver says "Daily average, one hour fifty-five minutes. 55% from last week". The user wouldn't know if it went up or down. Represented by the arrow pointing down. Fourth example, episode download. The stop button is surrounded by circular progress bar. VoiceOver says "Stop downloads, button" but not how much is left.
#365DaysIOSAccessibility #adventofiosaccessibility

⇧