WEBVTT 00:00:00.000 --> 00:00:02.250 >> I am Alexandre Costa, 00:00:02.250 --> 00:00:03.630 I am from Brazil. 00:00:03.630 --> 00:00:06.360 So sorry for my English, 00:00:06.360 --> 00:00:09.400 if you had some issues. 00:00:09.440 --> 00:00:14.475 It's my Twitter handle. 00:00:14.475 --> 00:00:17.130 So feel free to follow me, 00:00:17.130 --> 00:00:18.660 to keep in touch. 00:00:18.660 --> 00:00:21.030 I am very active on Twitter. 00:00:21.030 --> 00:00:24.660 So it's a great social network to talk. 00:00:24.660 --> 00:00:27.120 There I talk about Xamarin, 00:00:27.120 --> 00:00:28.980 I'll talk about accessibility, 00:00:28.980 --> 00:00:31.950 and almost about technology. 00:00:31.950 --> 00:00:35.170 I am really passionate about technology. 00:00:36.110 --> 00:00:39.935 Thank you for our sponsors, partners. 00:00:39.935 --> 00:00:44.360 Thank you for the organization of the conference. 00:00:44.360 --> 00:00:47.930 When I saw the opportunity 00:00:47.930 --> 00:00:53.420 to talk here with you guys, it was great. 00:00:53.420 --> 00:00:56.600 So thanks so much for you that are here now 00:00:56.600 --> 00:01:01.680 and people that will watch it later from the recording. 00:01:04.100 --> 00:01:08.300 Here's the agenda. It's a little long list. 00:01:08.300 --> 00:01:10.610 So I don't know if the font is okay. 00:01:10.610 --> 00:01:14.950 But if you are not able to see it, don't worry, 00:01:14.950 --> 00:01:21.860 so do I. I will talk about what is accessibility. 00:01:21.860 --> 00:01:24.245 I think that should start. 00:01:24.245 --> 00:01:29.375 We have to get a sub content B on the same page. 00:01:29.375 --> 00:01:33.370 After that, talk about assistive technology, 00:01:33.500 --> 00:01:37.670 that thing that make me use the computer, 00:01:37.670 --> 00:01:40.970 the smart phones and other devices. 00:01:40.970 --> 00:01:43.429 Talk about Xamarin and accessibility; 00:01:43.429 --> 00:01:47.360 how Xamarin handle accessibility APIs and 00:01:47.360 --> 00:01:51.350 discuss about things relate to it. 00:01:51.350 --> 00:01:54.020 So how can we implement 00:01:54.020 --> 00:02:00.180 the small things in your labs to have it accessible? 00:02:01.750 --> 00:02:05.410 So what is accessibility? 00:02:05.410 --> 00:02:07.830 Every morning in my day, 00:02:07.830 --> 00:02:13.410 I wake up, I get my smartphone, 00:02:13.410 --> 00:02:15.015 I read the news, 00:02:15.015 --> 00:02:18.585 I go to my kitchen, 00:02:18.585 --> 00:02:20.415 I prepare my coffee, 00:02:20.415 --> 00:02:22.605 I watch some TV, 00:02:22.605 --> 00:02:27.695 usually some streaming, I ask for 00:02:27.695 --> 00:02:33.705 a ride on Uber to go to the work, to the office. 00:02:33.705 --> 00:02:36.080 There on the office, I work with my colleagues, 00:02:36.080 --> 00:02:42.295 I write code, I do code reviews. 00:02:42.295 --> 00:02:48.545 So I do all kinds of things and it's completely normal. 00:02:48.545 --> 00:02:51.755 But we have a different thing, I am blind. 00:02:51.755 --> 00:03:01.110 So how can I how do all of these things without anybody here? 00:03:01.110 --> 00:03:06.495 So how can we give this experience for a user? 00:03:06.495 --> 00:03:11.090 So I have a small definition for accessibility, 00:03:11.090 --> 00:03:14.810 that is you have a product or a 00:03:14.810 --> 00:03:19.130 service accessible when you remove any physical, 00:03:19.130 --> 00:03:22.700 sensorial, or cognitive barrier for the user. 00:03:22.700 --> 00:03:23.000 [FOREIGN]. 00:03:23.000 --> 00:03:32.400 So I said that 00:03:32.400 --> 00:03:35.045 I could speak in Portuguese here. 00:03:35.045 --> 00:03:39.405 But the problem is that doing that, 00:03:39.405 --> 00:03:45.715 I'm not getting touch with all of you that don't speak Portuguese. 00:03:45.715 --> 00:03:51.669 When I create an app beautiful with lots of the images, 00:03:51.669 --> 00:03:56.585 photos but I don't put description of what is in the screen, 00:03:56.585 --> 00:03:59.780 I'm not accessible for everyone. 00:03:59.780 --> 00:04:03.420 When I'm speaking in the event and I say, 00:04:03.420 --> 00:04:09.174 "When you can see in that code or as you can see in that image, 00:04:09.174 --> 00:04:13.115 I am not thinking that there can be 00:04:13.115 --> 00:04:17.825 people watching my presentation that can't see. 00:04:17.825 --> 00:04:22.565 So I am real accessible when I do something 00:04:22.565 --> 00:04:27.830 that everybody can use without any restrictions. 00:04:27.830 --> 00:04:32.340 But I place here in the slide are 00:04:32.340 --> 00:04:37.645 words that in my opinion is the most important. 00:04:37.645 --> 00:04:42.560 That is the same experience. 00:04:42.560 --> 00:04:47.370 Making something accessible is not, for example, 00:04:47.370 --> 00:04:55.070 on my website creation whereby flash 00:04:55.070 --> 00:04:59.300 accessible and make something completely different 00:04:59.300 --> 00:05:04.905 with very simple HTML, 00:05:04.905 --> 00:05:07.705 just links, no interaction. 00:05:07.705 --> 00:05:10.820 No, to be really accessible, 00:05:10.820 --> 00:05:16.340 you and me must have the same experience. 00:05:16.340 --> 00:05:21.605 So just before starting the new project, the new screen, 00:05:21.605 --> 00:05:24.175 the new feature think, 00:05:24.175 --> 00:05:31.310 "How will be the experience I am offering to my user? 00:05:31.310 --> 00:05:33.995 Oh, it's an experience that I have 00:05:33.995 --> 00:05:40.500 to do something with movements and so on. 00:05:40.500 --> 00:05:44.345 Okay. It's the experience I want to offer. 00:05:44.345 --> 00:05:49.720 How can I make this experience enjoyable for everyone? 00:05:49.720 --> 00:05:53.625 Oh, I can make 00:05:53.625 --> 00:05:57.270 some hackings here to 00:05:57.270 --> 00:06:01.965 detect if the movement is low and compensate each other? 00:06:01.965 --> 00:06:03.720 No, I can't create 00:06:03.720 --> 00:06:10.380 an alternative path so the user can experiment it." 00:06:10.380 --> 00:06:16.250 But never do something just to be easier. 00:06:16.250 --> 00:06:21.300 Think how can you share the same experience between everybody. 00:06:23.810 --> 00:06:28.240 How does assistive technology works? 00:06:28.880 --> 00:06:35.285 It's very interesting because I am using a computer. 00:06:35.285 --> 00:06:36.845 I am giving my presentation here. 00:06:36.845 --> 00:06:38.240 I will be opening 00:06:38.240 --> 00:06:43.790 the Visual Studio to show some code in your future. 00:06:43.790 --> 00:06:49.450 But how does it works? 00:06:50.480 --> 00:06:55.860 We have four properties that the assistive 00:06:55.860 --> 00:07:02.540 technology hook from the system and give to the user. 00:07:02.540 --> 00:07:04.730 So first is their role. 00:07:04.730 --> 00:07:09.440 So what is this control that I am using right now, 00:07:09.440 --> 00:07:11.585 I am interacting with now? What is it? 00:07:11.585 --> 00:07:15.374 It's entry texts, it's a label, 00:07:15.374 --> 00:07:17.610 it's a button, it's a switch, 00:07:17.610 --> 00:07:21.635 it's something else, it's a carousel, it's a list. 00:07:21.635 --> 00:07:23.585 I need to know, 00:07:23.585 --> 00:07:28.770 what is the element I am interacting with? 00:07:28.770 --> 00:07:30.975 The second thing is the name, 00:07:30.975 --> 00:07:33.075 the identifier of this. 00:07:33.075 --> 00:07:34.500 What is this? 00:07:34.500 --> 00:07:37.530 It's the username entry, 00:07:37.530 --> 00:07:39.990 it's the password entry, 00:07:39.990 --> 00:07:43.005 it's the logging or a sign-in button, 00:07:43.005 --> 00:07:47.955 it's the movers list. 00:07:47.955 --> 00:07:52.595 So I have to give a context to my user, 00:07:52.595 --> 00:07:54.935 so it's the names, the identifier. 00:07:54.935 --> 00:07:57.980 The third property is the state. 00:07:57.980 --> 00:08:00.495 If it's active, if it's inactive, 00:08:00.495 --> 00:08:02.955 it's enable, it' disabled, 00:08:02.955 --> 00:08:05.490 it's checked, it's unchecked, 00:08:05.490 --> 00:08:09.180 it's filled with some value, 00:08:09.180 --> 00:08:11.430 it's not filled, it's focus. 00:08:11.430 --> 00:08:14.520 What is the state of 00:08:14.520 --> 00:08:17.700 that component in the moment of the interaction? 00:08:17.700 --> 00:08:19.755 Interaction the value. All right. 00:08:19.755 --> 00:08:22.180 If it's a entry, 00:08:22.220 --> 00:08:26.415 I enter it with some text in that or not. 00:08:26.415 --> 00:08:28.620 It's a checkbox. 00:08:28.620 --> 00:08:31.750 It's checked true or false. 00:08:31.750 --> 00:08:37.890 It's spinner, what is the value in the spinner? 00:08:37.890 --> 00:08:40.380 So I have to give this foreign information. 00:08:40.380 --> 00:08:43.350 It's incredible because our platforms, 00:08:43.350 --> 00:08:47.845 and as we saw in the keynote, 00:08:47.845 --> 00:08:50.560 we are cross-platform developers. 00:08:50.560 --> 00:08:53.595 It's because we use and love Xamarin. 00:08:53.595 --> 00:08:57.415 Our platforms offers APIs 00:08:57.415 --> 00:09:01.305 that send this information for assistive technology. 00:09:01.305 --> 00:09:03.210 As I'm blind, I am, 00:09:03.210 --> 00:09:07.555 I use screen readers that 00:09:07.555 --> 00:09:13.245 convert any text in the screens to voice. 00:09:13.245 --> 00:09:17.055 But we have people that use different approach. 00:09:17.055 --> 00:09:20.070 In Brazil, we have specific, 00:09:20.070 --> 00:09:23.265 and any country have different sign languages, 00:09:23.265 --> 00:09:25.500 in Brazil it's called LIBRAS. 00:09:25.500 --> 00:09:33.720 We have some software that converts text to this sign language. 00:09:33.720 --> 00:09:37.970 We have other people that can't move. 00:09:37.970 --> 00:09:41.560 So they use their eyes and 00:09:41.560 --> 00:09:46.410 their head to move a cursor or use a joystick. 00:09:46.840 --> 00:09:51.550 These technologies depends on 00:09:51.550 --> 00:09:57.850 that info that I listed to work properly. 00:09:59.770 --> 00:10:03.615 As a blind, I have to use screen readers. 00:10:03.615 --> 00:10:08.125 In mobile world we have two, 00:10:08.125 --> 00:10:10.590 that's VoiceOver for Apple system, 00:10:10.590 --> 00:10:13.995 and TalkBack and Voice Assistant, 00:10:13.995 --> 00:10:19.435 it's not listed here, but Voice Assistant [inaudible] to Android. 00:10:19.435 --> 00:10:21.610 What they do is, 00:10:21.610 --> 00:10:23.700 as I told before, 00:10:23.700 --> 00:10:26.605 they convert any kind of texts on 00:10:26.605 --> 00:10:30.385 the screen to voice that to read it loud to me. 00:10:30.385 --> 00:10:36.269 So I can interact with any app that implement accessibility, 00:10:36.269 --> 00:10:42.805 and use it as an impaired person. 00:10:42.805 --> 00:10:47.995 It's great because I can, as I told you, 00:10:47.995 --> 00:10:54.780 use Uber or use Netflix or other products as all of you, 00:10:55.500 --> 00:11:01.540 but why I am talking about these two here, 00:11:01.540 --> 00:11:04.420 because it's something that we 00:11:04.420 --> 00:11:08.370 have to keep in mind during our development. 00:11:08.370 --> 00:11:09.795 I know that we are 00:11:09.795 --> 00:11:12.085 responsible developers and we 00:11:12.085 --> 00:11:14.860 test our products in all kind of device. 00:11:14.860 --> 00:11:16.230 We test on iPhone, 00:11:16.230 --> 00:11:17.980 we test on Android, 00:11:17.980 --> 00:11:24.550 we test in different versions of the OS, and so on. 00:11:27.830 --> 00:11:34.135 With accessibility, we have the same need. 00:11:34.135 --> 00:11:37.770 We need to test it on VoiceOver in different languages. 00:11:37.770 --> 00:11:40.190 We need to test it on TalkBack, 00:11:40.190 --> 00:11:44.820 in different phones because sometimes 00:11:44.820 --> 00:11:53.935 some manufacturer personalize the way TalkBack read things. 00:11:53.935 --> 00:11:57.150 Sometimes you have some strange behaviors 00:11:57.150 --> 00:11:58.695 that you don't understand, 00:11:58.695 --> 00:12:03.445 and it's caused not only by the TalkBack or VoiceOver, 00:12:03.445 --> 00:12:05.310 but sometimes it's caused by 00:12:05.310 --> 00:12:12.435 the synthesizer that convert the text to voice. 00:12:12.435 --> 00:12:16.045 It's something funny that every time 00:12:16.045 --> 00:12:21.355 Apple release a new iOS version, 00:12:21.355 --> 00:12:27.565 I discovered that words that was spoken right 00:12:27.565 --> 00:12:31.540 is broken because they 00:12:31.540 --> 00:12:35.650 changed something on the internal dictionary. 00:12:35.650 --> 00:12:42.090 You have to make some hacks to have the app saying that thing, 00:12:42.090 --> 00:12:47.510 usually when you have small words or things like that, 00:12:47.510 --> 00:12:50.640 you have to make some hacks. 00:12:50.640 --> 00:12:55.870 But it's okay, and it is discovered when you touch your app. 00:13:00.130 --> 00:13:02.695 It's a small video, 00:13:02.695 --> 00:13:05.970 first of all, my friend Roberta told me that it's broken. 00:13:05.970 --> 00:13:12.910 Reflector didn't require the screen, 00:13:12.910 --> 00:13:16.485 but it's my iPhone using 00:13:16.485 --> 00:13:20.280 the Uber app and navigating on the screen. 00:13:20.280 --> 00:13:22.300 >> 1422. 00:13:34.780 --> 00:13:37.075 >> No it's on the screen. 00:13:37.075 --> 00:13:39.110 It's the funny [inaudible]. 00:13:39.110 --> 00:13:40.190 >> Not having a tray for 00:13:40.190 --> 00:13:43.490 your most used apps that persists on all your- 00:13:56.090 --> 00:14:01.950 >> So as I told you on the screen, 00:14:01.950 --> 00:14:07.260 the screen reader first reads' what is on the screen, 00:14:07.260 --> 00:14:14.580 that element, that label or that control that I selected. 00:14:14.580 --> 00:14:19.035 If I want to interact with it I have to double tap on it. 00:14:19.035 --> 00:14:22.000 So when you use a screen reader, 00:14:22.000 --> 00:14:24.470 we have different gestures. 00:14:24.470 --> 00:14:27.265 For example, to scroll, 00:14:27.265 --> 00:14:33.585 it is done with three fingers on iOS and two fingers on Android. 00:14:33.585 --> 00:14:42.055 When I want to do something like drag and drop, 00:14:42.055 --> 00:14:45.970 I have should do a double tap and a long press on single tap. 00:14:45.970 --> 00:14:50.145 There are a lot of custom gestures, 00:14:50.145 --> 00:14:55.300 but it's great because many users go over how does it works. 00:14:55.300 --> 00:14:58.530 You don't have to worry about it on your app. 00:14:58.530 --> 00:15:05.785 If you give to your user the real mobile experience using tabs, 00:15:05.785 --> 00:15:08.815 double taps, swipes, and so on, 00:15:08.815 --> 00:15:10.615 the user can use it. 00:15:10.615 --> 00:15:13.705 Another different thing that 00:15:13.705 --> 00:15:17.805 almost visually-impaired people use is they 00:15:17.805 --> 00:15:22.925 swipe with one finger to the right or to the left, 00:15:22.925 --> 00:15:27.360 X-like tab on the computer. 00:15:27.360 --> 00:15:30.300 So it's moving the focus to the 00:15:30.300 --> 00:15:34.465 next or to the previous element on the screen. 00:15:34.465 --> 00:15:36.535 We can explore the screen, 00:15:36.535 --> 00:15:38.940 touching on it, as I told you guys, 00:15:38.940 --> 00:15:43.525 that if I touch it reads, 00:15:43.525 --> 00:15:45.975 it don't execute the action. 00:15:45.975 --> 00:15:49.700 But usually we navigate 00:15:49.700 --> 00:15:53.490 using swipe so we can go to the next and the previous control, 00:15:53.490 --> 00:15:56.715 and no worry, [inaudible] intellectually fit. 00:15:56.715 --> 00:16:00.070 It's great. For TalkBack it's the same. 00:16:00.070 --> 00:16:02.815 >> Wallpaper button. Actions, double tap 00:16:02.815 --> 00:16:04.110 and hold to show "Contacts". 00:16:04.110 --> 00:16:05.535 >> I am on the main screen. 00:16:05.535 --> 00:16:08.320 >> Double tap to activate "Phone" apps, one of five. 00:16:08.320 --> 00:16:10.820 "Messages" apps, two of five. 00:16:10.820 --> 00:16:13.160 "Apps" button, three of five. 00:16:13.160 --> 00:16:16.200 "Internet" apps, four of five. Actions, double tap to launch. 00:16:16.200 --> 00:16:20.350 >> So it reads, and as you can hear- 00:16:20.350 --> 00:16:22.765 >> "Phone" apps, one of five. 00:16:22.765 --> 00:16:24.850 Actions, double tap to launch. 00:16:24.850 --> 00:16:26.535 Double tap and hold to reorder. 00:16:26.535 --> 00:16:29.250 Double tap and hold to show "Contacts" menu. 00:16:29.250 --> 00:16:35.790 >> It's not only say what is the control and read its text to me, 00:16:35.790 --> 00:16:41.560 but they give me a tip on how do I have to interact with it. 00:16:42.230 --> 00:16:45.115 All of this is custom, 00:16:45.115 --> 00:16:53.980 so you can interact with some APIs to work with it. 00:16:58.390 --> 00:17:02.690 What about Xamarin in this world of accessibility? 00:17:02.690 --> 00:17:09.440 We work with a technology that is 100 percent native. 00:17:09.440 --> 00:17:13.640 So we have access to all native APIs, 00:17:13.640 --> 00:17:17.120 including APIs for accessibility. 00:17:17.120 --> 00:17:23.180 So when you worked with Xamarin [inaudible] and you work 00:17:23.180 --> 00:17:30.030 with native Android XML or IRS storyboards, 00:17:30.030 --> 00:17:33.260 we have on the "Properties" panel, 00:17:33.260 --> 00:17:35.840 all the properties related to accessibility in 00:17:35.840 --> 00:17:38.709 that platform and how the properties, 00:17:38.709 --> 00:17:42.275 how the methods are completely documented. 00:17:42.275 --> 00:17:49.915 The docs of Xamarin related to the APIs are very good, 00:17:49.915 --> 00:17:54.240 and when you don't find something on that, 00:17:54.240 --> 00:17:58.570 you can go straight forward to the API documentation 00:17:58.570 --> 00:18:03.830 on Google or Apple's sites. 00:18:03.830 --> 00:18:10.970 It's there and with lots of examples and varies to read. 00:18:10.970 --> 00:18:13.115 We have also the guides, 00:18:13.115 --> 00:18:16.945 the human interface design guides that help a lot 00:18:16.945 --> 00:18:20.510 because accessibility is something 00:18:20.510 --> 00:18:24.470 that's nowadays is by design on their platforms. 00:18:24.470 --> 00:18:26.770 But it's good to know, 00:18:26.770 --> 00:18:30.640 good to see, good to read it. 00:18:30.640 --> 00:18:36.450 All the time I use access technologies out during my day, 00:18:36.450 --> 00:18:41.870 and sometimes I start reading some new docs or watching 00:18:41.870 --> 00:18:47.360 some videos from Google IO and from WWDC and, 00:18:47.360 --> 00:18:50.470 discover something new that they introduced and 00:18:50.470 --> 00:18:54.705 don't made marketing about it. 00:18:54.705 --> 00:18:58.470 It's really helped me during my day. 00:19:02.330 --> 00:19:05.415 One concept very important 00:19:05.415 --> 00:19:08.490 about accessibility is the accessibility tree. 00:19:08.490 --> 00:19:16.170 So it's really a hierarchical view 00:19:16.170 --> 00:19:19.650 of the elements on your screen, 00:19:19.650 --> 00:19:23.490 and the sequence that will be shown to the user 00:19:23.490 --> 00:19:27.585 that you used in assistive technology. 00:19:27.585 --> 00:19:30.945 It's a good thing to show or hide 00:19:30.945 --> 00:19:35.940 information that's not useful for the accessibility. 00:19:35.940 --> 00:19:39.955 For example, if I have an image on the screen, 00:19:39.955 --> 00:19:45.425 and this image is not important for the content, 00:19:45.425 --> 00:19:50.330 it's not worth for the user to know that image is there, 00:19:50.330 --> 00:19:55.365 it's something just for a decorative image, 00:19:55.365 --> 00:19:58.575 we can hide it from the user. 00:19:58.575 --> 00:20:05.310 Or for example, we have a label or some other info 00:20:05.310 --> 00:20:08.235 that we included inside the description of 00:20:08.235 --> 00:20:12.839 the element or with the accessibility properties, 00:20:12.839 --> 00:20:16.965 and we want to hide that label, it's possible too. 00:20:16.965 --> 00:20:19.200 The TabIndex is great. 00:20:19.200 --> 00:20:24.885 So I can manipulate the way the user interact with that screen, 00:20:24.885 --> 00:20:30.615 when they navigate using [inaudible] previous movements. 00:20:30.615 --> 00:20:38.565 So we really can make the experience easier. 00:20:38.565 --> 00:20:41.200 So let's try to show it. 00:20:48.770 --> 00:20:55.480 First of all let's run Vysor. 00:21:26.440 --> 00:21:29.390 >> "Time and Weather" for screen wizard. 00:21:29.390 --> 00:21:32.030 Double tap and hold to long press. 00:21:32.030 --> 00:21:34.070 >> Is Vysor showing my screen? 00:21:34.070 --> 00:21:34.865 >> Yes. 00:21:34.865 --> 00:21:36.390 >> Thank you. 00:21:56.050 --> 00:22:00.220 Okay. Let's run the app. 00:22:00.220 --> 00:22:04.110 It's just a playground with a lot of code here. 00:22:04.110 --> 00:22:07.515 I will try to describe most kind of code, 00:22:07.515 --> 00:22:09.300 but after the presentation, 00:22:09.300 --> 00:22:11.340 if you publish it on a repo, 00:22:11.340 --> 00:22:12.840 that you guys will have 00:22:12.840 --> 00:22:17.775 access with a lot of material from the conference. 00:22:17.775 --> 00:22:20.805 There we will have access to all the codes. 00:22:20.805 --> 00:22:23.685 But what we will show are 00:22:23.685 --> 00:22:27.990 simple attributes that you can introduce in your interface, 00:22:27.990 --> 00:22:33.370 and with that, you can have your app more accessible. 00:23:09.560 --> 00:23:12.315 >> "Phone" apps, one of five. 00:23:12.315 --> 00:23:14.415 Actions, double tap to launch. 00:23:14.415 --> 00:23:16.095 Double tap and hold to reorder. 00:23:16.095 --> 00:23:19.570 Double tap and hold to show "Contacts" menu. 00:23:30.380 --> 00:23:35.115 Purple. Blue. Dark gray. 00:23:35.115 --> 00:23:38.990 Blue. Purple. 00:23:38.990 --> 00:23:41.045 >> So what I have here. 00:23:41.045 --> 00:23:42.185 We have three bars, 00:23:42.185 --> 00:23:44.045 color, one purple, one blue, 00:23:44.045 --> 00:23:52.965 and one gray, they was due to using BoxView. 00:23:52.965 --> 00:24:00.555 BoxView is something that it's only visual. 00:24:00.555 --> 00:24:03.810 We don't have any info about accessibility 00:24:03.810 --> 00:24:07.710 for these kinds of control. 00:24:07.710 --> 00:24:09.885 But if you notice here, 00:24:09.885 --> 00:24:12.510 I don't know if you can see on the screen. 00:24:12.510 --> 00:24:14.070 >> Purple. Purple. 00:24:15.320 --> 00:24:18.075 >> When I select the BoxView, 00:24:18.075 --> 00:24:23.035 TalkBack puts on ring rectangle around it. 00:24:23.035 --> 00:24:26.900 It's the TalkBack focus. 00:24:26.900 --> 00:24:32.580 How can we achieve it? What I did, 00:25:36.080 --> 00:25:39.910 if you go to the right code, it appears. 00:26:00.500 --> 00:26:03.885 So it's a little bit different here. 00:26:03.885 --> 00:26:10.800 But I create here 00:26:10.800 --> 00:26:15.060 a custom control that's like accessible bar. 00:26:15.060 --> 00:26:19.570 Let's see accessible bar, that's yes. 00:26:46.730 --> 00:26:49.500 So on the constructor, 00:26:49.500 --> 00:26:52.680 I am setting the IsInAccessibleTree, 00:26:52.680 --> 00:26:57.645 AutomationProperties.IsInAccessibleTree for true. 00:26:57.645 --> 00:27:02.669 So with that, I am saying to the assistive technology, 00:27:02.669 --> 00:27:08.145 hey, there is an control here that you can access. 00:27:08.145 --> 00:27:12.810 When IsInAccessibleTree is the way that you show and you 00:27:12.810 --> 00:27:17.475 hide a control from the assistive technology. 00:27:17.475 --> 00:27:19.965 It's the first step you have to do. 00:27:19.965 --> 00:27:22.630 The second thing I did, 00:27:28.430 --> 00:27:31.620 I created a property called label. 00:27:31.620 --> 00:27:35.565 What it will do is set 00:27:35.565 --> 00:27:40.410 the AutomationProperties.Name to that control. 00:27:40.410 --> 00:27:42.600 So with these two properties, 00:27:42.600 --> 00:27:45.675 IsInaccessibletree and name, 00:27:45.675 --> 00:27:49.965 TalkBack now is able to read these bars to me. 00:27:49.965 --> 00:27:53.430 >> Blue. Dark gray. 00:27:53.430 --> 00:27:55.950 Blue. Dark gray. 00:27:55.950 --> 00:28:00.170 Blue. Purple. Purple. End gain. 00:28:00.170 --> 00:28:05.290 >> Right. Related to TabIndex. 00:28:05.290 --> 00:28:08.205 >> Selected "Accessible Tree". 00:28:08.205 --> 00:28:11.250 Double tap to- Selected. 00:28:11.250 --> 00:28:14.925 Selected. Access. Have index. 00:28:14.925 --> 00:28:18.040 Have index. Selected. 00:28:18.220 --> 00:28:22.880 >> I have the buttons here with a number on the end, 00:28:22.880 --> 00:28:28.085 and it is in a completely different order, 00:28:28.085 --> 00:28:30.840 and I will try to swipe left and 00:28:30.840 --> 00:28:34.540 right to read what they will say to me. 00:28:34.700 --> 00:28:39.210 >> Automation at X label. End gain. 00:28:39.210 --> 00:28:41.610 Double. Welcome to Xamarin Forms. 00:28:41.610 --> 00:28:45.495 Welcome to Xamarin Forms and Prism. "Three" button. 00:28:45.495 --> 00:28:46.350 >> Three. 00:28:46.350 --> 00:28:50.265 >> Welcome to Xamarin Forms and Prism. "One" button. 00:28:50.265 --> 00:28:50.970 >> One. 00:28:50.970 --> 00:28:54.720 >> Welcome to Xamarin Forms and Prism. "Zero" button. 00:28:54.720 --> 00:28:55.440 >> Zero. 00:28:55.440 --> 00:28:58.050 >> Welcome to Xamarin Forms and Prism. 00:28:58.050 --> 00:29:02.430 "Three" button. Welcome to Xamarin Forms and Prism. 00:29:02.430 --> 00:29:04.695 "One" button. Welcome. 00:29:04.695 --> 00:29:06.450 >> So it's in 00:29:06.450 --> 00:29:10.780 a different order that I put on the code. Let's see the code. 00:29:30.780 --> 00:29:33.025 Well, sorry. I didn't ask if 00:29:33.025 --> 00:29:36.290 the size of the font is okay to read. 00:29:39.870 --> 00:29:43.210 It's because to me, don't make any difference. 00:29:43.210 --> 00:29:55.070 So I create a grid, load off. 00:30:07.080 --> 00:30:11.935 So here I have the tab index set to three. 00:30:11.935 --> 00:30:14.920 So the tab index, it's incredible. 00:30:14.920 --> 00:30:17.380 The default value is zero. 00:30:17.380 --> 00:30:24.520 When it's zero, the control will appear in the tree, 00:30:24.520 --> 00:30:28.705 in the position it's defined in the XAML. 00:30:28.705 --> 00:30:32.095 So if it's the third element in the XAML, 00:30:32.095 --> 00:30:36.700 it will be the third element that will receive the focus. 00:30:36.700 --> 00:30:38.485 But we can manipulate it, 00:30:38.485 --> 00:30:46.090 if we put a positive number starting in one, 00:30:46.090 --> 00:30:49.645 each will be the position of that element in the navigation. 00:30:49.645 --> 00:30:53.530 So one will be the first element to receive focus, 00:30:53.530 --> 00:30:54.955 two, three, and four. 00:30:54.955 --> 00:31:00.610 So here I just mess at the sequence and it's 00:31:00.610 --> 00:31:07.015 that sequence that my app will respect when I navigate. 00:31:07.015 --> 00:31:13.360 It's great because sometimes you have some fields that are 00:31:13.360 --> 00:31:21.820 not required to the user to go to the next screen. 00:31:21.820 --> 00:31:28.370 We want to make it easy to navigate, thank you. 00:31:33.240 --> 00:31:37.040 Let's return to the slides. 00:31:43.020 --> 00:31:48.700 AutomationId and automation products dot name. 00:31:48.700 --> 00:31:50.920 It's used to identify to 00:31:50.920 --> 00:31:55.315 the user the control that he's interacting. 00:31:55.315 --> 00:31:59.800 But we have a bad thing here. 00:31:59.800 --> 00:32:04.825 I know that we have issue open on XAML forms, 00:32:04.825 --> 00:32:09.625 because they use the automationId for Android. 00:32:09.625 --> 00:32:13.765 It uses the same information about accessibility. 00:32:13.765 --> 00:32:19.015 By the way, if you want to make your Y automation, 00:32:19.015 --> 00:32:21.160 it depends on the technology, 00:32:21.160 --> 00:32:26.590 you use Y automation is done using accessibility APIs. 00:32:26.590 --> 00:32:31.795 But here we have an issue that, 00:32:31.795 --> 00:32:40.990 if you put an automationId that is not understandable by the user, 00:32:40.990 --> 00:32:45.055 like a code or something like that, 00:32:45.055 --> 00:32:48.580 in Android it will replace the text 00:32:48.580 --> 00:32:52.345 that will be spoken by TalkBack. 00:32:52.345 --> 00:32:56.500 So it's good to really 00:32:56.500 --> 00:33:02.500 think what is happening on the automationId, 00:33:02.500 --> 00:33:04.975 and what do you want that should be 00:33:04.975 --> 00:33:07.765 read to the user on the screen. 00:33:07.765 --> 00:33:10.490 Let's see that. 00:33:15.870 --> 00:33:18.400 First of all this screen, 00:33:18.400 --> 00:33:19.645 so we febrile here. 00:33:19.645 --> 00:33:26.440 >> Selected, tab index. 00:33:26.440 --> 00:33:29.140 Automation index label. 00:33:29.140 --> 00:33:31.090 Use name container. 00:33:31.090 --> 00:33:33.100 Username. Edit box. 00:33:33.100 --> 00:33:35.530 >> So it reads to me "username". 00:33:35.530 --> 00:33:36.925 >> Password. Edit box. 00:33:36.925 --> 00:33:37.975 >> Password. 00:33:37.975 --> 00:33:39.655 >> Login button. 00:33:39.655 --> 00:33:43.600 >> What is the text of the button? 00:33:43.600 --> 00:33:46.705 The first one? Signing. But-- 00:33:46.705 --> 00:33:50.360 >> Login. Create an account. Login button 00:33:50.360 --> 00:33:50.970 >> Logging. 00:33:50.970 --> 00:33:52.230 >> Double tap to activate. 00:33:52.230 --> 00:33:55.770 >> The second one is Sign Up, right? It reads? 00:33:55.770 --> 00:33:57.365 >> Create an account button. 00:33:57.365 --> 00:33:58.120 >> Create an account. 00:33:58.120 --> 00:33:59.200 >> Double tap to activate. 00:33:59.200 --> 00:34:01.180 >> So we have to pay attention to that 00:34:01.180 --> 00:34:04.810 because it can make lot of confusion to the user. 00:34:04.810 --> 00:34:11.260 Let's see what I did here. 00:34:37.260 --> 00:34:42.550 So I have an automation here saying something different. 00:34:42.550 --> 00:34:46.660 So it's something that you have to pay attention. 00:34:46.660 --> 00:34:49.015 But at the same time, 00:34:49.015 --> 00:34:51.560 it's very useful when 00:34:54.330 --> 00:34:58.290 you have another profits that help that you 00:34:58.290 --> 00:35:02.010 can use to give more context to the user, 00:35:02.010 --> 00:35:06.045 but it's great to have read-in texts, 00:35:06.045 --> 00:35:07.860 captions, and so on, 00:35:07.860 --> 00:35:10.995 that guide the user to the best experience. 00:35:10.995 --> 00:35:17.350 But at the same time pay attention to don't mess with the text. 00:35:17.350 --> 00:35:19.540 Do something that is good for 00:35:19.540 --> 00:35:22.700 automation but it's not good for the user. 00:35:36.480 --> 00:35:39.550 LabeledBy and HelpText. 00:35:39.550 --> 00:35:44.020 It's used to give more information to the user about that control, 00:35:44.020 --> 00:35:47.455 and we can use it to referencing another control 00:35:47.455 --> 00:35:52.880 or putting more information we have here. 00:35:54.300 --> 00:35:57.050 >> End game. Selected. 00:36:02.040 --> 00:36:06.475 >> We have here three circles. 00:36:06.475 --> 00:36:11.200 I know because I created it. When we navigate-- 00:36:11.200 --> 00:36:21.460 [FOREIGN]. 00:36:21.460 --> 00:36:21.970 >> One up. 00:36:21.970 --> 00:36:25.360 [MUSIC]. 00:36:25.360 --> 00:36:31.120 >> One up. Accessible tree. Power up. 00:36:31.120 --> 00:36:34.000 [MUSIC]. 00:36:34.000 --> 00:36:35.680 >> So I can play Mario, 00:36:35.680 --> 00:36:37.700 but in odd sounds. 00:36:38.700 --> 00:36:42.110 So how I did it. 00:37:16.380 --> 00:37:19.345 So I have a label, 00:37:19.345 --> 00:37:22.099 I have a BoxView, 00:37:25.380 --> 00:37:27.940 and a gesture recognizer, 00:37:27.940 --> 00:37:32.335 and a native Android call to play sounds. 00:37:32.335 --> 00:37:34.555 So it's great. 00:37:34.555 --> 00:37:36.520 So as you can see, 00:37:36.520 --> 00:37:39.250 it's very easy to do things. 00:37:39.250 --> 00:37:42.340 Usually, when you use 00:37:42.340 --> 00:37:48.700 native controls or the controls that Xamarin Forms give you, 00:37:48.700 --> 00:37:52.900 almost all accessibility is implemented or you have to make 00:37:52.900 --> 00:37:58.480 just a few refinements like adding easy accessible tree. 00:37:58.480 --> 00:38:01.540 For example, when you use Box, which represents something, 00:38:01.540 --> 00:38:09.950 or giving a better label to it or mixing the table order. 00:38:21.210 --> 00:38:24.910 Tips and tricks. First of all, 00:38:24.910 --> 00:38:28.400 learn how to use assistive technology. 00:38:28.410 --> 00:38:32.080 Don't be afraid of turning on 00:38:32.080 --> 00:38:36.860 TalkBack or turning on VoiceOver on your device. 00:38:36.990 --> 00:38:40.540 The first tip here is, 00:38:40.540 --> 00:38:46.570 before activating it, activate the "Accessibility" shortcut. 00:38:46.570 --> 00:38:48.910 For example, on iPhone, 00:38:48.910 --> 00:38:52.495 you can activate for three tabs or 00:38:52.495 --> 00:38:57.295 the "Home" button or the "Side" button in the new devices. 00:38:57.295 --> 00:39:00.084 Activate or deactivate VoiceOver, 00:39:00.084 --> 00:39:03.490 because as it change the gestures, 00:39:03.490 --> 00:39:05.965 the first impression is that 00:39:05.965 --> 00:39:10.555 you have an iPhone that doesn't work anymore. 00:39:10.555 --> 00:39:14.200 The second thing is testing different devices, 00:39:14.200 --> 00:39:18.355 test it in different OS, 00:39:18.355 --> 00:39:21.235 because sometimes it's good for 00:39:21.235 --> 00:39:25.610 iOS and not so good for Android or vice versa. 00:39:26.040 --> 00:39:30.400 Before thinking in the feature, 00:39:30.400 --> 00:39:32.770 thinking about the experience, 00:39:32.770 --> 00:39:35.920 understand how the platforms works, read the guides. 00:39:35.920 --> 00:39:37.540 I know that they are long, 00:39:37.540 --> 00:39:39.430 they are sometimes boring, 00:39:39.430 --> 00:39:45.370 but it's good to know and it's makes 00:39:45.370 --> 00:39:49.420 a big difference because when I 00:39:49.420 --> 00:39:55.130 want to go to simply- and I don't know that I can count on Uber, 00:39:57.030 --> 00:40:00.130 or when in Brazil, 00:40:00.130 --> 00:40:02.755 we use a service called iFood to call 00:40:02.755 --> 00:40:05.950 for delivery food at your home. 00:40:05.950 --> 00:40:09.100 So it's a big game change in 00:40:09.100 --> 00:40:12.880 the life of people with disabilities when you can use a product, 00:40:12.880 --> 00:40:14.620 you can use a service that you can 00:40:14.620 --> 00:40:17.600 count on because it's accessible. 00:40:18.330 --> 00:40:23.320 I know that I don't have so much time, but, any questions? 00:40:23.320 --> 00:40:24.860 >> I have a question. 00:40:24.860 --> 00:40:28.860 So we have app that's only translated to Spanish. 00:40:28.860 --> 00:40:31.030 One of the [inaudible] we have with [inaudible] 00:40:31.030 --> 00:40:33.910 phone in whatever language it is. 00:40:33.910 --> 00:40:36.310 In our App, we let you pick a language, 00:40:36.310 --> 00:40:40.495 but we do not change the [inaudible] basically. 00:40:40.495 --> 00:40:43.735 We'll TalkBack and/or VoiceOver, 00:40:43.735 --> 00:40:49.270 work on translating text on the screen in a different language, 00:40:49.270 --> 00:40:53.320 a different phone or the current [inaudible] filter do not set. 00:40:53.320 --> 00:40:56.530 >> No, unfortunately not, not yet. 00:40:56.530 --> 00:40:59.860 I know that in the new versions of the iOS, 00:40:59.860 --> 00:41:05.800 you can set a language for depth and it would change. 00:41:05.800 --> 00:41:09.640 Because today on macOS and on Windows, 00:41:09.640 --> 00:41:14.140 the screen reader can detect the language. 00:41:14.140 --> 00:41:16.945 For example, in a webpage, 00:41:16.945 --> 00:41:20.905 you can mark that element with the attribute Lang, 00:41:20.905 --> 00:41:23.305 and put the language and it 00:41:23.305 --> 00:41:25.915 changed the synthesizer out automatically. 00:41:25.915 --> 00:41:31.000 But on mobile it don't happen yet. 00:41:31.000 --> 00:41:36.960 So unfortunately, you have that the user can buy and sell. 00:41:36.960 --> 00:41:39.674 I have this problem because my phone is 00:41:39.674 --> 00:41:43.230 setup for English and Portuguese. 00:41:43.230 --> 00:41:46.665 All the time I am browsing the web 00:41:46.665 --> 00:41:50.560 or doing something with an app that is in English. 00:41:50.560 --> 00:41:54.640 I am with the setup 00:41:54.640 --> 00:41:58.870 to English or I am talking with my mother in WhatsApp, 00:41:58.870 --> 00:42:02.815 for example, I have to switch to Portuguese and read. 00:42:02.815 --> 00:42:08.695 Sometimes the user is so- it's everyday. 00:42:08.695 --> 00:42:11.560 Sometimes I even reading things in 00:42:11.560 --> 00:42:14.485 English while using Portuguese voice, and so on. 00:42:14.485 --> 00:42:20.095 It's really bizarre, but that's because I have no time. 00:42:20.095 --> 00:42:22.900 But I know that it's something that we ask 00:42:22.900 --> 00:42:26.320 a lot for Google and Apple, 00:42:26.320 --> 00:42:28.630 and I read something about that 00:42:28.630 --> 00:42:32.860 the new release of the system will have it. 00:42:32.860 --> 00:42:36.220 For Apple, I know that as 00:42:36.220 --> 00:42:40.405 VoiceOver is incorporated into the system, 00:42:40.405 --> 00:42:43.675 it will work system wide. 00:42:43.675 --> 00:42:48.745 But TalkBack, as it's external app, 00:42:48.745 --> 00:42:51.490 it's natively installed in 00:42:51.490 --> 00:42:54.565 almost all phones but it's external app. 00:42:54.565 --> 00:42:56.740 I think that is something that they will 00:42:56.740 --> 00:43:00.070 create a kind of settings to enable it. 00:43:00.070 --> 00:43:01.090 >> Next question. 00:43:01.090 --> 00:43:03.550 >> I have a two part question. 00:43:03.550 --> 00:43:04.910 The first one is, 00:43:04.910 --> 00:43:09.475 are the properties, the accessible properties fully binding? 00:43:09.475 --> 00:43:11.650 >> Yeah. Fully binding. 00:43:11.650 --> 00:43:12.880 >> The second one is, 00:43:12.880 --> 00:43:14.410 if I have a chat and people are 00:43:14.410 --> 00:43:16.840 talking to you in broken English or in slang, 00:43:16.840 --> 00:43:19.600 that type of thing, is it accessible at that point? 00:43:19.600 --> 00:43:24.040 Does it translate those not so good words? 00:43:24.040 --> 00:43:27.610 >> No, what it use, 00:43:27.610 --> 00:43:36.040 I like to say that we have some words, some conventions, 00:43:36.040 --> 00:43:41.320 for example, when you are talking on the Internet, 00:43:41.320 --> 00:43:44.950 you know that people say different language,. 00:43:44.950 --> 00:43:50.185 In Portuguese we abbreviate lot of words, 00:43:50.185 --> 00:43:52.870 and I know that. 00:43:52.870 --> 00:43:55.135 So sometimes the user adapt 00:43:55.135 --> 00:43:58.450 themselves to read that and try to understand. 00:43:58.450 --> 00:44:04.840 But it depends on the way that the person is writing, 00:44:04.840 --> 00:44:11.380 it's sometimes really hard to understand what's happening. 00:44:11.380 --> 00:44:15.595 But I don't know if really it's easy to 00:44:15.595 --> 00:44:20.020 create that translation for some things. 00:44:20.020 --> 00:44:25.375 Usually, what we do as [inaudible] people, 00:44:25.375 --> 00:44:32.830 is we try to adapt the workflow to work on it. 00:44:32.830 --> 00:44:37.585 For example, in the company I work for, we Forbidden. 00:44:37.585 --> 00:44:42.080 Forbidden is the guy that loves to send gifts, 00:44:43.020 --> 00:44:45.565 and it's not accessible. 00:44:45.565 --> 00:44:49.330 But usually on the name of the image or, for example, 00:44:49.330 --> 00:44:55.959 in the Slack, on Slack emojis, 00:44:55.959 --> 00:44:57.100 you have a code. 00:44:57.100 --> 00:45:00.505 So I usually translates that code. 00:45:00.505 --> 00:45:03.355 It's talking about juicing, 00:45:03.355 --> 00:45:05.530 and get along with the joke. 00:45:05.530 --> 00:45:06.850 >> Yeah. Thank you. 00:45:06.850 --> 00:45:08.180 >> You're welcome. 00:45:08.180 --> 00:45:10.840 >> [inaudible] doesn't support emoji. 00:45:10.840 --> 00:45:16.320 They want you to read innercode name or just the- 00:45:16.320 --> 00:45:17.620 >> No. There's like one, 00:45:17.620 --> 00:45:22.225 the native ones for the platform they converge to the text. 00:45:22.225 --> 00:45:27.520 Apple is very funny with the way they translate the emojis. 00:45:27.520 --> 00:45:30.235 Sometimes people send the emojis to me 00:45:30.235 --> 00:45:33.805 thinking that did it explain one emotion, 00:45:33.805 --> 00:45:36.655 and it explain a completely different one. 00:45:36.655 --> 00:45:38.080 It's really really fun. 00:45:38.080 --> 00:45:41.073 >> [inaudible]. 00:45:41.073 --> 00:45:45.340 >> Yeah. It's fun. 00:45:45.340 --> 00:45:49.940 I really like it and I use emojis a lot. 00:45:55.200 --> 00:45:58.550 So thank you, guys.