1"use strict";(self.webpackChunkreact_native_website=self.webpackChunkreact_native_website||[]).push([["12402"],{63611(e,t,a){a.r(t),a.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>p,frontMatter:()=>s,metadata:()=>o,toc:()=>l});var o=a(58700),n=a(62540),i=a(43023);let s={title:"Making React Native apps accessible",author:"Georgiy Kassabli",authorTitle:"Software Engineer at Facebook",authorURL:"https://www.facebook.com/georgiy.kassabli",authorImageURL:"https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A",hero:"/blog/assets/blue-hero.png",tags:["engineering"]},r,c={authorsImageUrls:[void 0]},l=[];function d(e){let t={a:"a",blockquote:"blockquote",code:"code",em:"em",p:"p",pre:"pre",strong:"strong",...(0,i.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.p,{children:"With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired."}),"\n",(0,n.jsxs)(t.p,{children:["For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the Android and iOS APIs. If you've developed accessible applications for Android, iOS, or the web before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element ",(0,n.jsx)(t.em,{children:"accessible"})," (therefore exposed to assistive technology) and use ",(0,n.jsx)(t.em,{children:"accessibilityLabel"})," to provide a string description for the element:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{children:"<View accessible={true} accessibilityLabel=\u201DThis is simple view\u201D>\n"})}),"\n",(0,n.jsxs)(t.p,{children:["Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the ",(0,n.jsx)(t.strong,{children:"Ads Manager app"}),"."]}),"\n",(0,n.jsx)("footer",{children:(0,n.jsx)("a",{href:"https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/",className:"btn",children:"Read more"})}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsxs)(t.p,{children:["This is an excerpt. Read the rest of the post on ",(0,n.jsx)(t.a,{href:"https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/",children:"Facebook Code"}),"."]}),"\n"]})]})}function p(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}},43023(e,t,a){a.d(t,{R:()=>s,x:()=>r});var o=a(63696);let n={},i=o.createContext(n);function s(e){let t=o.useContext(i);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:s(e.components),o.createElement(i.Provider,{value:t},e.children)}},58700(e){e.exports=JSON.parse('{"permalink":"/blog/2015/11/23/making-react-native-apps-accessible","source":"@site/blog/2015-11-23-making-react-native-apps-accessible.md","title":"Making React Native apps accessible","description":"With the recent launch of React on web and React Native on mobile, we\'ve provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.","date":"2015-11-23T00:00:00.000Z","tags":[{"inline":true,"label":"engineering","permalink":"/blog/tags/engineering"}],"readingTime":1.19,"hasTruncateMarker":false,"authors":[{"name":"Georgiy Kassabli","title":"Software Engineer at Facebook","url":"https://www.facebook.com/georgiy.kassabli","imageURL":"https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A","key":null,"page":null}],"frontMatter":{"title":"Making React Native apps accessible","author":"Georgiy Kassabli","authorTitle":"Software Engineer at Facebook","authorURL":"https://www.facebook.com/georgiy.kassabli","authorImageURL":"https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&oh=d7a500fdece1250955a4d27b0a80fee2&oe=59E8165A","hero":"/blog/assets/blue-hero.png","tags":["engineering"]},"unlisted":false,"prevItem":{"title":"Introducing Hot Reloading","permalink":"/blog/2016/03/24/introducing-hot-reloading"},"nextItem":{"title":"React Native for Android: How we built the first cross-platform React Native app","permalink":"/blog/2015/09/14/react-native-for-android"}}')}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.