{"id":63086,"date":"2024-07-24T15:39:55","date_gmt":"2024-07-24T10:09:55","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=63086"},"modified":"2024-07-24T16:19:29","modified_gmt":"2024-07-24T10:49:29","slug":"ios-accessibility-strategies-reaching-every-user","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/ios-accessibility-strategies-reaching-every-user\/","title":{"rendered":"Accessibility Strategies for iOS: Making apps inclusive for all users"},"content":{"rendered":"<h3 class=\"graf graf--h3\"><strong class=\"markup--strong markup--h3-strong\">Introduction<\/strong><\/h3>\n<p class=\"graf graf--p\">Creating accessible apps ensures that everyone, including individuals with disabilities, can use our applications. By integrating advanced accessibility features, we can enhance the user experience and make our app inclusive. This blog covers why accessibility is crucial, how it improves our app, and steps for implementing accessibility modifiers in iOS apps<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Why Accessibility is Important<\/strong><br \/>\nAccessibility ensures that people with disabilities can use our app effectively. It\u2019s not just a legal requirement in many regions but also an ethical obligation to provide equal access to technology for all users. Furthermore, accessibility enhances usability for everyone. For example, clear and easy-to-read text benefits all users, particularly in various lighting conditions or for those with temporary impairments.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">How Accessibility Can Help<\/strong><\/p>\n<ul>\n<li class=\"graf graf--p\"><strong>User Reach:<\/strong> Expands our app\u2019s user base by including people with disabilities\u200a\u2014\u200aapproximately 15% of the global population.<\/li>\n<li class=\"graf graf--p\"><strong>User Satisfaction: <\/strong>Improves overall satisfaction and app reviews, showing we care about all users.<\/li>\n<li class=\"graf graf--p\"><strong>Compliance: <\/strong>Meets legal requirements, avoiding potential lawsuits.<br \/>\nImpact on App Quality<strong>:<\/strong> Enhances usability, navigation, and information clarity for all users.<\/li>\n<\/ul>\n<p class=\"graf graf--p\">All apps should prioritize accessibility, especially in healthcare, banking, education, and social media. Government and public transportation apps must be accessible to ensure everyone has equal access to vital information.<\/p>\n<h3 class=\"graf graf--h3\">How to Implement Accessibility Modifiers<\/h3>\n<p class=\"graf graf--p\">To implement iOS accessibility, we will use modifiers like accessibilityLabel, accessibilityHint, accessibilityValue, and others on UI elements. These provide descriptive information, contextual hints, and actionable behaviors for VoiceOver users. VoiceOver audibly describes content and provides tactile feedback, ensuring users with disabilities can navigate and interact with our app. To activate VoiceOver, go to \u201cSettings\u201d on your iOS device, select \u201cAccessibility,\u201d and toggle VoiceOver to \u201cOn.<\/p>\n<h4 class=\"graf graf--h4\">Code Implementation:<\/h4>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*4k9xAiGp1cQ_Hb2xQIP1WQ.png\" width=\"1041\" height=\"942\" data-image-id=\"1*4k9xAiGp1cQ_Hb2xQIP1WQ.png\" data-width=\"2106\" data-height=\"1906\" \/><\/figure>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*JzRlFhIFdtb494E2V4op3Q.png\" width=\"1042\" height=\"1036\" data-image-id=\"1*JzRlFhIFdtb494E2V4op3Q.png\" data-width=\"1840\" data-height=\"1828\" \/><\/figure>\n<p class=\"graf graf--p\">Below is a detailed explanation of all the accessibility modifiers used in the above code. All examples in this blog are presented in SwiftUI, but the principles and techniques discussed are similarly applicable to UIKit.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Label (accessibilityLabel):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> The Text(\u201cProfile One\u201d) uses\u00a0.accessibilityLabel(\u201cProfile One\u201d). This label is read aloud by VoiceOver to describe the text to users with visual impairments. It helps them understand that this is the title of the profile page.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Applied directly to the Text element using\u00a0.accessibilityLabel(\u201cProfile One\u201d).<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Hint (accessibilityHint):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> The Text(\u201cProfile One\u201d) also includes\u00a0.accessibilityHint(\u201cThis is the profile page header\u201d). This hint provides additional context about the text\u2019s purpose or function. VoiceOver users can access this hint to understand more about the profile page header.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Added to the Text element using\u00a0.accessibilityHint(\u201cThis is the profile page header\u201d).<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Traits (accessibilityAddTraits):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> The Text(\u201cProfile One\u201d) is further enhanced with\u00a0.accessibilityAddTraits(.isHeader). This trait informs VoiceOver that this text serves as a header, indicating its importance and role within the content.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Used to add the header trait to the Text element, helping VoiceOver users navigate and understand the structure of the profile page.<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Value (accessibilityValue):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> The Text(\u201cprofile.one@example.com\u201d) includes\u00a0.accessibilityValue(\u201cprofile dot one at example dot com\u201d). This provides the exact email address as a value to VoiceOver users, ensuring they receive accurate information.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Set on the Text element to convey the email address to VoiceOver users.<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Action (<\/strong>accessibilityAction<strong class=\"markup--strong markup--p-strong\">):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> The Button(\u201cLog Out\u201d) utilizes\u00a0.accessibilityAction() to specify actions when activated by VoiceOver. In this context, it\u2019s used to log the user out of the application.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Implemented with\u00a0.<strong class=\"markup--strong markup--li-strong\">accessibilityAction {<\/strong> \/* action code *\/ <strong class=\"markup--strong markup--li-strong\">}<\/strong> to define the log-out action specifically for VoiceOver activation, enhancing accessibility by providing a direct action for VoiceOver users. In this example, tapping the button logs the user out, while VoiceOver activation triggers specific actions or feedback, enhancing accessibility in apps.<\/li>\n<\/ul>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Element (accessibilityElement):<\/strong><\/p>\n<ul class=\"postList\">\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Purpose:<\/strong> Both the profile section and the profile menu list use\u00a0.accessibilityElement(children:\u00a0.contain) to group related UI elements for VoiceOver navigation. This helps VoiceOver users understand and navigate these sections as cohesive units rather than individual elements.<\/li>\n<li class=\"graf graf--li\"><strong class=\"markup--strong markup--li-strong\">Implementation:<\/strong> Applied to the containers (VStack, List) to indicate that their child elements should be treated together as single accessible units.<\/li>\n<\/ul>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*m1w-kzLHYfPjPgATW9OORw.jpeg\" width=\"1037\" height=\"749\" data-image-id=\"1*m1w-kzLHYfPjPgATW9OORw.jpeg\" data-width=\"3870\" data-height=\"2796\" \/><\/figure>\n<p class=\"graf graf--p\">When VoiceOver is enabled and the app is opened, it will audibly describe the elements on the screen. For instance, on the profile page, <strong class=\"markup--strong markup--p-strong\">VoiceOver will read the title \u201cProfile One\u201d and announce it as a header<\/strong>, describe the user\u2019s profile picture, and provide hints such as \u201cThis is the profile page header.\u201d It will also describe the email address in a user-friendly manner and provide contextual hints for the menu items and buttons.<br \/>\nBy grouping related elements using<strong class=\"markup--strong markup--p-strong\">\u00a0.accessibilityElement(children:\u00a0.contain)<\/strong>, VoiceOver will treat these groups as single units, making it easier for users with visual impairments to navigate. This helps all users interact with and understand the app\u2019s content more effectively.<\/p>\n<p>Here are some additional accessibility modifiers you can use to enhance the app&#8217;s accessibility.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">UIAccessibility.post(notification:argument:): <\/strong>Sends notifications to accessibility services like VoiceOver, alerting users about important changes in the UI. This is particularly important in apps with frequently changing content, such as social media feeds or live sports updates.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image alignnone\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*ES898T2Ep3Pc_3600KileA.png\" alt=\"\" width=\"899\" height=\"55\" data-image-id=\"1*ES898T2Ep3Pc_3600KileA.png\" data-width=\"2258\" data-height=\"134\" \/><\/figure>\n<p class=\"graf graf--p\">Ensure that any significant changes in the app\u2019s content are promptly communicated to assistive technologies. For example, if a new message arrives in a chat app, announcing this can help users stay engaged and informed.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Sort Priority(accessibilitySortPriority): <\/strong>Controls the reading order of accessibility elements, giving higher priority to more important elements.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*iNvdVZd1K2ksxqY4hXU5rQ.png\" width=\"736\" height=\"52\" data-image-id=\"1*iNvdVZd1K2ksxqY4hXU5rQ.png\" data-width=\"1934\" data-height=\"130\" \/><\/figure>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">Accessibility Custom Rotors(accessibilityCustomRotors) <\/strong>: enhance navigation for VoiceOver users by creating custom options. Users can swipe through lists or collections by rotating their fingers, ideal for efficient data navigation. Useful in apps like contacts, email, or shopping. Example i<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*G_w_L-s7dovNnQ969CsieQ.png\" width=\"1038\" height=\"367\" data-image-id=\"1*G_w_L-s7dovNnQ969CsieQ.png\" data-width=\"2346\" data-height=\"830\" \/><\/figure>\n<p class=\"graf graf--p\">The\u00a0.<strong class=\"markup--strong markup--p-strong\">accessibilityRotor<\/strong> modifier in SwiftUI creates a \u201cCities\u201d rotor for VoiceOver users. It enables easy navigation through a list of cities using familiar gestures. Entries from the cities array populate the rotor, using the name property of each City object for navigation clarity and usability.<\/p>\n<p class=\"graf graf--p\"><strong class=\"markup--strong markup--p-strong\">MagnificationGesture<\/strong>: allows users to perform pinch-to-zoom gestures on views like images or text, adjusting the scale of the content based on their touch input.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*Pb7pAJiVUwVLW8ShNzK8qQ.png\" width=\"1038\" height=\"442\" data-image-id=\"1*Pb7pAJiVUwVLW8ShNzK8qQ.png\" data-width=\"1710\" data-height=\"728\" \/><\/figure>\n<p class=\"graf graf--p\">The Image uses MagnificationGesture for pinch-to-zoom. During the gesture (onChanged), it updates the scale state and announces the zoom level for VoiceOver users. The accessibilityValue dynamically reports the zoom level as a percentage. Users with motor impairments can activate this via AssistiveTouch by tapping on-screen controls or using a switch device.<\/p>\n<p class=\"graf graf--p\">Explore all the settings available under iOS Accessibility to customize your device experience. Noteworthy features include VoiceOver, Zoom, Display &amp; Text Size adjustments, Increase Contrast, and Reduce Transparency, which improve readability and usability system-wide.<\/p>\n<figure class=\"graf graf--figure\"><img decoding=\"async\" loading=\"lazy\" class=\"graf-image\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*0UVsL2JjEgbz_zPHVNrqrg.jpeg\" width=\"1037\" height=\"748\" data-image-id=\"1*0UVsL2JjEgbz_zPHVNrqrg.jpeg\" data-width=\"3375\" data-height=\"2436\" \/><\/figure>\n<p class=\"graf graf--p\">Enabling VoiceOver in our app without specific accessibility code reads standard UI elements but may not interpret custom controls fully. Adding attributes like accessibilityLabel and accessibilityHint ensures VoiceOver describes actions and content accurately, enhancing accessibility. For detailed information, refer to our app\u2019s documentation at <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/developer.apple.com\/documentation\/accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\" data-href=\"https:\/\/developer.apple.com\/documentation\/accessibility\/\">https:\/\/developer.apple.com\/documentation\/accessibility\/<\/a>.<\/p>\n<p class=\"graf graf--p\">To activate VoiceOver on a simulator, navigate to Xcode &gt; Open Developer Tool &gt; Accessibility Inspector &gt; select the simulator. When VoiceOver or Zoom is active, navigating with gestures is essential.<\/p>\n<p class=\"graf graf--p\">Use Siri if stuck or follow the steps at <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/support.apple.com\/en-in\/guide\/iphone\/iph3e2e2329\/ios\" target=\"_blank\" rel=\"noreferrer noopener\" data-href=\"https:\/\/support.apple.com\/en-in\/guide\/iphone\/iph3e2e2329\/ios\">https:\/\/support.apple.com\/en-in\/guide\/iphone\/iph3e2e2329\/ios<\/a>,\u00a0 if locked out due to accessibility features &#8211; \u00a0<a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/discussions.apple.com\/thread\/6513188?answerId=27944447022&amp;sortBy=best#27944447022\" target=\"_blank\" rel=\"noopener\" data-href=\"https:\/\/discussions.apple.com\/thread\/6513188?answerId=27944447022&amp;sortBy=best#27944447022\">https:\/\/discussions.apple.com\/thread\/6513188?answerId=27944447022&amp;sortBy=best#27944447022<\/a><\/p>\n<p>For a practical example and to see the implementation in action, you can check out the sample project on <a href=\"https:\/\/github.com\/arvindsethttn\/iOSAccessibility\">GitHub<\/a>.<\/p>\n<h3 class=\"graf graf--h3\">Conclusion<\/h3>\n<p class=\"graf graf--p\">Integrating advanced accessibility features into our iOS app isn&#8217;t just about compliance, it&#8217;s about inclusivity and user satisfaction. Enhancing on-screen typing and managing privacy with audio feedback improve the user experience. While VoiceOver aids accessibility, optimizing navigation remains crucial. Prioritize these enhancements to affirm our commitment to user-centric design and ensure our app is accessible to all.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Creating accessible apps ensures that everyone, including individuals with disabilities, can use our applications. By integrating advanced accessibility features, we can enhance the user experience and make our app inclusive. This blog covers why accessibility is crucial, how it improves our app, and steps for implementing accessibility modifiers in iOS apps Why Accessibility is [&hellip;]<\/p>\n","protected":false},"author":1648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14},"categories":[1400],"tags":[6126,6129,6128,6124,6127,5963,6125],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/63086"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1648"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=63086"}],"version-history":[{"count":7,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/63086\/revisions"}],"predecessor-version":[{"id":63410,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/63086\/revisions\/63410"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=63086"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=63086"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=63086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}