{"id":2463,"date":"2019-08-21T13:54:44","date_gmt":"2019-08-21T13:54:44","guid":{"rendered":"https:\/\/alexandremagno.net\/?p=2463"},"modified":"2019-08-22T11:15:56","modified_gmt":"2019-08-22T11:15:56","slug":"react-native-accessibility-beyond-the-guidelines","status":"publish","type":"post","link":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/","title":{"rendered":"React Native – accessibility beyond the guidelines"},"content":{"rendered":"
\"\"
User with some vision restriction needs to have a special treatment when using an app with the accessibility capabilities from React Native<\/a>.
Photo<\/a> by Josh Calabrese<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n

When you’re talking about accessibility for React Native<\/a>, we have\u00a0as our primary source\u00a0the\u00a0Accessibility guidelines for React Native<\/a>, which covers what we need to implement accessibility features in any React Native project. But in a real world, the accessibility requirements for a real product that\u00a0needs\u00a0support for accessibility it goes far beyond accessibility labels. I will discuss more advanced topics based on my experience working with the Danske Bank Mobile app<\/a>.<\/p>\n

So here I will cover from the basics about accessibility that would be an extra resource beyond the docs and go through concepts and decisions\u00a0beyond the development and\u00a0beyond the\u00a0API documentation<\/a>. We need to take accessibility serious\u00a0from the design process to the code implementation.<\/p>\n

\"\"
Mobile Bank experience from Danske Bank<\/a> for an app using the accessibility features from React Native<\/a><\/figcaption><\/figure>\n

 <\/p>\n

What is accessibility?<\/h2>\n

The accessibility is a set of options to assist deficient users. The accessibility is an option activated on IOS with Voice Over option<\/a>, and on Android with\u00a0Talk Back feature<\/a>.<\/p>\n

Using accessibility labels<\/h2>\n

The accessibility labels is your best friend when we’re implementing the accessibility on mobile apps. We need to use it to provide meaningful messages for voice over to communicate with your user in the UI, as the example:<\/p>\n

<<\/span>TouchableOpacity<\/span> accessible<\/span>=<\/span>{<\/span>true<\/span>}<\/span><\/span> accessibilityLabel<\/span>=<\/span>\"<\/span>Tap me to execute some action!\"<\/span><\/span>><\/span><\/span> \r\n  <<\/span>View<\/span> style<\/span>=<\/span>{<\/span>styles.<\/span>button}<\/span><\/span>><\/span><\/span> \r\n    <<\/span>Text<\/span> style<\/span>=<\/span>{<\/span>styles.<\/span>buttonText}<\/span><\/span>><\/span><\/span>Press me!<\/span><\/<\/span>Text<\/span>>\r\n<\/span><\/span>  <\/<\/span>View<\/span>><\/span><\/span> \r\n<\/<\/span>TouchableOpacity<\/span>><\/span><\/span><\/pre>\n
But before that, you will need to mark a view as accessible. The TouchableOpacity<\/em>\u00a0element\u00a0is accessible by default, and here we need to add the accessible property to a view:<\/p>\n
<<\/span>View<\/span> accessible<\/span>=<\/span>{<\/span>true<\/span>}<\/span><\/span>><\/span><\/span> \r\n  <<\/span>Text<\/span>><\/span><\/span>text one<\/<\/span>Text<\/span>>\r\n<\/span><\/span>  <<\/span>Text<\/span>><\/span><\/span>text two<\/<\/span>Text<\/span>>\r\n<\/span><\/span><\/<\/span>View<\/span>><\/span><\/span><\/pre>\n
On the first example, the accessibility voice assistant for IOS and Android will read aloud what is on the accessibility label (Tap me to execute some action<\/em>), in the second example, as we marked the parent view as accessible, it will focus in the whole block with these two texts.<\/p>\n
Meaningful labels<\/h3>\n
When we need to provide a good and accessible experience, we need meaningful labels and use React Native components to provide the right message, as the example below:<\/p>\n
<View accessible=\"true\" accessibilityLabel={`You typed ${current} of ${left} characters in your password`}>\r\n  <Text><\/Text>\r\n<\/View><\/code><\/pre>\n
Here we provided a message in order to let the user know how many characters was typed in a password, so he knows how to proceed through the UI.<\/p>\n
Common issues<\/h2>\n
Numbers and date formats<\/h3>\n
This could be an issue, cause you need to pass the right formats to voice over and talk back in order to recognise numbers, dates\u00a0in a way that is intuitive to the user. There’s different setups for voices reader on IOS and Android, as well languages, so we need to pass into the properties the right formats but we cannot guarantee that the reader will read as we expected, but it will read based on the user settings.<\/p>\n
Non default elements<\/h3>\n
When you try to create\u00a0any user interface on React Native<\/a>, there’s some situations that you need to create a non default experience and a design system that matches with your brand. But this can increase the effort to provide the best accessibility, cause we need to emulate all the behaviours that usually is built in on the platform. So take this into\u00a0the account when you create your own keyboard, input fields and so on.<\/p>\n
Different navigational patterns from the ones you expected<\/h3>\n
If you create special flows maybe the accessibility features from IOS and Android can be confused, so when you think about navigations you will need to consider that you don’t have control over the order, so let’s try to fit in the regular flow instead of create complex navigations that can’t be confused when we navigate through our app with the screen reader enabled.<\/p>\n
We need to consider there’s different approaches of navigations when Voice Over or Talk Back is activated, and this can be tested only by who uses these features day by day, and that’s all about this on our next topic.<\/p>\n
Beyond the guidelines – users first<\/h2>\n
Test with real blind users, cause they have their navigational pattern that can surprise you. As an example, I was testing the scroll function using three fingers, when actually they use in our tests swipe to scroll. So don’t assume how to use before explore how the real users do.<\/p>\n
How to test it<\/h2>\n
On IOS, the accessibility could be tested using an accessibility tool with the emulator, but you cannot test the voice over, so for a more accurate testing, you need to deploy the app on a real device.<\/p>\n
For the Talk Back for Android, you can easily activate on the emulator by dragging the Talk Back for Android<\/a>.<\/p>\n
Conclusion<\/h2>\n
Think about your users and a new way of experience with the voice assistant, from the concept of the UI to provide an accessible app. Take advantage of the guidelines but consider the issues that may arise that goes beyond the implementation, thinks more related to design decisions.<\/p>\n","protected":false},"excerpt":{"rendered":"
When you’re talking about accessibility for React Native, we have\u00a0as our primary source\u00a0the\u00a0Accessibility guidelines for React Native, which covers what we need to implement accessibility features in any React Native project. But in a real world, the accessibility requirements for a real […]<\/p>\n","protected":false},"author":1,"featured_media":2471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[214,287],"tags":[288,293,290,291,294,292,216,289],"class_list":["post-2463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-react-native","tag-accessibility","tag-danske-bank","tag-development","tag-guidelines","tag-mobile-app","tag-practical","tag-react","tag-react-native"],"yoast_head":"\nReact Native - accessibility beyond the guidelines - Webpoint<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native - accessibility beyond the guidelines - Webpoint\" \/>\n<meta property=\"og:description\" content=\"When you’re talking about accessibility for React Native, we have\u00a0as our primary source\u00a0the\u00a0Accessibility guidelines for React Native, which covers what we need to implement accessibility features in any React Native project. But in a real world, the accessibility requirements for a real […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\" \/>\n<meta property=\"og:site_name\" content=\"Webpoint\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-21T13:54:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-22T11:15:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2019\/08\/josh-calabrese-qmnpqDwla_E-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"5235\" \/>\n\t<meta property=\"og:image:height\" content=\"3490\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"alexanmtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alexanmtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\"},\"author\":{\"name\":\"alexanmtz\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\"},\"headline\":\"React Native – accessibility beyond the guidelines\",\"datePublished\":\"2019-08-21T13:54:44+00:00\",\"dateModified\":\"2019-08-22T11:15:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\"},\"wordCount\":965,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"keywords\":[\"accessibility\",\"danske bank\",\"development\",\"guidelines\",\"mobile app\",\"practical\",\"react\",\"react native\"],\"articleSection\":[\"React\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\",\"url\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\",\"name\":\"React Native - accessibility beyond the guidelines - Webpoint\",\"isPartOf\":{\"@id\":\"https:\/\/alexandremagno.net\/#website\"},\"datePublished\":\"2019-08-21T13:54:44+00:00\",\"dateModified\":\"2019-08-22T11:15:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/alexandremagno.net\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native – accessibility beyond the guidelines\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/alexandremagno.net\/#website\",\"url\":\"https:\/\/alexandremagno.net\/\",\"name\":\"Webpoint\",\"description\":\"Weblosofia com desenvolvimento web\",\"publisher\":{\"@id\":\"https:\/\/alexandremagno.net\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/alexandremagno.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/alexandremagno.net\/#organization\",\"name\":\"Webpoint\",\"url\":\"https:\/\/alexandremagno.net\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"contentUrl\":\"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png\",\"width\":35,\"height\":31,\"caption\":\"Webpoint\"},\"image\":{\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af\",\"name\":\"alexanmtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g\",\"caption\":\"alexanmtz\"},\"sameAs\":[\"https:\/\/alexandremagno.net\"],\"url\":\"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native - accessibility beyond the guidelines - Webpoint","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/","og_locale":"en_US","og_type":"article","og_title":"React Native - accessibility beyond the guidelines - Webpoint","og_description":"When you’re talking about accessibility for React Native, we have\u00a0as our primary source\u00a0the\u00a0Accessibility guidelines for React Native, which covers what we need to implement accessibility features in any React Native project. But in a real world, the accessibility requirements for a real […]","og_url":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/","og_site_name":"Webpoint","article_published_time":"2019-08-21T13:54:44+00:00","article_modified_time":"2019-08-22T11:15:56+00:00","og_image":[{"width":5235,"height":3490,"url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2019\/08\/josh-calabrese-qmnpqDwla_E-unsplash.jpg","type":"image\/jpeg"}],"author":"alexanmtz","twitter_card":"summary_large_image","twitter_misc":{"Written by":"alexanmtz","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#article","isPartOf":{"@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/"},"author":{"name":"alexanmtz","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af"},"headline":"React Native – accessibility beyond the guidelines","datePublished":"2019-08-21T13:54:44+00:00","dateModified":"2019-08-22T11:15:56+00:00","mainEntityOfPage":{"@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/"},"wordCount":965,"commentCount":0,"publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"keywords":["accessibility","danske bank","development","guidelines","mobile app","practical","react","react native"],"articleSection":["React","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/","url":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/","name":"React Native - accessibility beyond the guidelines - Webpoint","isPartOf":{"@id":"https:\/\/alexandremagno.net\/#website"},"datePublished":"2019-08-21T13:54:44+00:00","dateModified":"2019-08-22T11:15:56+00:00","breadcrumb":{"@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/alexandremagno.net\/en\/2019\/08\/21\/react-native-accessibility-beyond-the-guidelines\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/alexandremagno.net\/en\/"},{"@type":"ListItem","position":2,"name":"React Native – accessibility beyond the guidelines"}]},{"@type":"WebSite","@id":"https:\/\/alexandremagno.net\/#website","url":"https:\/\/alexandremagno.net\/","name":"Webpoint","description":"Weblosofia com desenvolvimento web","publisher":{"@id":"https:\/\/alexandremagno.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexandremagno.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/alexandremagno.net\/#organization","name":"Webpoint","url":"https:\/\/alexandremagno.net\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/","url":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","contentUrl":"https:\/\/alexandremagno.net\/wp-content\/uploads\/2021\/12\/cropped-cropped-logo-1.png","width":35,"height":31,"caption":"Webpoint"},"image":{"@id":"https:\/\/alexandremagno.net\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/88a94d0648dd15b6080f207b6b2156af","name":"alexanmtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/alexandremagno.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/03b43dc8e6881b6af6fbbffd7465227f2d5b0648ba6646a0174a79811ecb6cde?s=96&d=mm&r=g","caption":"alexanmtz"},"sameAs":["https:\/\/alexandremagno.net"],"url":"https:\/\/alexandremagno.net\/en\/author\/alexanmtz\/"}]}},"_links":{"self":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/2463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/comments?post=2463"}],"version-history":[{"count":10,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/2463\/revisions"}],"predecessor-version":[{"id":2486,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/posts\/2463\/revisions\/2486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media\/2471"}],"wp:attachment":[{"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/media?parent=2463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/categories?post=2463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexandremagno.net\/en\/wp-json\/wp\/v2\/tags?post=2463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
If we don’t provide these properties, the voice reader will read the content of focused texts. Sometimes (and in an ideal world) you don’t need do nothing, but in other cases, to make a navigation easier for screen reader, you will need to set parent blocks in a logical way and mark as accessible to create a reader experience.
\nAny other properties and pattern\u00a0that would take advantage from\u00a0accessibility you can easily find on the Accessibility Guidelines for React Native<\/a>. So I will not move forward around this here and I will jump to the practical information when you’re are implementing these features in your React Native<\/a> project.<\/p>\n