>> Tune into this week's
Xamarin Show where I have my two favorite monkeys of Xamarin Forms team who will tell
us all about accessibility, and how you can apply it to
your Xamarin Forms App today. [MUSIC]. >> Welcome back everybody
to the Xamarin Show. I'm your host Gerald,
and today I got not one but two special guests on. I have Rachel, and Shane from
Xamarin Forms team,.NET MAUI team. I don't know how to
call you these days, but they have taken some valuable
time from working at.NET MAUI to talk about the other
important thing, accessibility. Shane, Rachel, welcome.
How are you doing? >> Hi. >> Hi. >> Hello. >> Doing good. >> Great, that's good to hear. The both of you, and James
actually, James Montemagno, my best friend in the entire world from the
other examined show episodes, you've been working on
adding some accessibility to examine community Toolkit
for now so that we can already apply it to Xamarin Forms, is that right? Shane. >> Yeah, that's correct. With MAUI, we took a step back
on the accessibility story, and made sure to really
analyze what works, and what isn't working for people
in the Xamarin Form space, and try to make sure to create a story inside MAUI that it's really able to
address people's issues. But we wanted to get
a lot of that code into users hands prior
to the MAUI timeline, so that people would
give us feedback, and so that it could address other Xamarin Forms issues
people have run into. For example, some of the
stuff you'll see are solutions to being able
to use automation IDs, and it won't affect
your accessibility, which has been a major problem
for a number of years, then being able to have a much more successful journey when trying to affect the ordering
of controls through talk back, by using some different
controls that we introduced, versus using the Tab Index APIs. A lot of this is
really just us trying to make that story as
powerful as possible, and getting as much
feedback as possible. A lot of this stuff is
out in pre-releases, and we're excited to get feedback
and see success stories. >> That's great. I talk about what the Toolkit is
exactly all the time, and one of the things is, a project where we can start
developing these things, together with [inaudible] then, we can let it grow there, and hopefully put it back into
dominant value in this case, because Forms is not going to be, a place where this can live. Rachel, you are the latest
edition to Forms, although it's, I think almost a year now, may be even more than a
year, which is really cool. I think you took that focus
on accessibility early on, and that's what you're focusing
on with Forms right now, the Toolkit, and later on [inaudible] >> Yeah. I joined, it hasn't been a year yet actually, around eight to maybe
almost nine months ago now. It's been super exciting
being on the team, and working with Shane, and James, and everyone
on accessibility stuff. I'm super excited to show off the latest work
that we've done on it. >> Great. Well, I have no clue
what you are going to show, so let's just dive
into Visual Studio, and see what you have created. >> All right, here is the latest PR we contributed to
the Xamarin Community Toolkit. Big shout out to James
for making this happen. As Shane has said we brought over
a lot of the new accessibility APIs that people can start working with right now in the
Xamarin Forms Apps. Right here I have the code from the Xamarin
Community Toolkit sample. This is one of the sample pages demonstrating the new APIs
with Semantic effect. Here we have some
labels, and buttons, and images showing
off the various APIs. For example, we have heading level, which is an API that helps us indicate whether control
should be headings. That allows users to skim through content more
quickly and efficiently. We have here Semantic description, which allows us to indicate what we want the screen reader
to read out loud. We have here Semantic hint, which allows us to tell
the screen reader to give more context about
the specific control. There are some of the new APIs. >> This is set up as attached
to behavior thing, right? Is it an attached behavior,
is that the thing? Attached property, that's the thing. Because these are not
properties of the controls, but it's set up like an effect, an attached property
that you can attach to any visual elements I guess, and those maps to the native
platform Accessibility properties that are available. Is that right? >> Yeah, exactly. For example, with the Semantic effect description, that maps down to content
description on Android, and it maps down to
Accessibility label on iOS. Right now here I have an
Android device plugged in, it's my physical device. I'm going to show you how these
Semantic properties work. If I go to effects, then go to Semantic effect, you can see this page that
this demo here represents, I'm going to turn on TalkBack, which is the screen
reader for Android. >> Talk back on, Xamarin
Community Toolkit sample, Semantic effect. >> Now if I click on, for example, this label here with
the Automation Id, and a description, we'll be able
to hear the description properly. This is super cool because, as Shame briefly mentioned before, this is a challenge that a lot
of developers had in terms of accessibility on Android in
the past. If you click on it. >> This is a Semantic description. >> The description is read out. Yeah. Similarly, we can see here the Semantic properties
working on other Controls. Here with a hint on the button, >> Button was hint, button. This is a hint that
describes the button. For example, sends a message. >> We also have, >> Double-tap to activate. >> It working on the image. >> This is a description
that describes the image. For example, image of Xamarin
Community Toolkit logo. >> We also have the heading
levels working here. With headings, if I swipe
vertically on Android, that will allow me to skim through
the headings and nothing else. >> I am a heading 1, heading. >> I'm going to scroll
vertically now. >> I am a heading 2, I am a
heading 3, I am a heading 4, I am a heading 5, I am a heading 6, no next heading, I am a heading 9. >> After it gets to the last heading, it won't let me go to
anything else since the heading level allows us
to access just the headings. >> Super cool. A lot of that, it pronounces Xamarin right. That's [inaudible]. >> Now it says MAUI, we don't have any MAUI [inaudible] >> That's true. All
right, really cool. This is already super-helpful because Accessibility is one of
those things that is super-important but easily overlooked because we are fortunate enough
that we don't need this, then it's not top of mind. I'm so glad that this is
implemented right now. Is there something else that is supporting us in this
scenario, right now? >> Yeah. Actually in that last PR, we also added new APIs
for Semantic ordering, and this was inspired
by challenges with the previous tab index that
we had with Xamarin Forms. Semantic ordering allows you to
indicate the order in which you want their various controls to be
read aloud by the screen reader, especially when that order isn't
as logical or conventional. This actually started out in our exploration repository
that we have called a11yTools. I have here the code for a11yTools. Here we're looking at a page that demonstrates that
Semantic ordering. Here you can see in
this stack layout, that's wrapped by the
Semantic ordering view, we have a label, a collection view, and another label, labeled
first, second, and third. I'm going to show you what
this looks like on the screen. Back to my Android device. We have here the label first, label second, then there's
collection view third. In the code behind, we indicate by those names first, second, third, that we
want the screen reader to read out those
controls in that order. Now, I'm going to turn
TalkBack back on, and we'll be able to see when I navigate by swiping with one finger, that the focus will jump
from first to second, then back up to the top of the
collection view, and go through it. >> TalkBack on, a11yTools,
''Okay,'' button, double-tap to activate element outside the
A-C-C-E-S-S-I-B-I-L-I-T-Y first. >> We're on the first
label, and I swipe again. >> Second. >> Second, I swipe again, it's going to jump up back
to the collection view. >> One, two of 4,000 in
list, 2,3,4,5 of 4000. >> That's the semantic ordering view. >> Yeah, and that's really helpful. This is a good demonstration
here just because this comes up where you have cases where you have a long list in the middle. But you might want that
to be the last thing that it navigates to for the user. That way it goes to whatever
you have at the top, the bottom, and then the list. That way they don't
just get to the list and possibly get stuck in that place. The SemanticView, OrderView on the Community Toolkit is very nice because it's a bit
of a lighter touch. There are aspects of it you
have to be aware of because a lot of constructing your app, so that it's accessible
for users also has to do with being smart about how
your logical layouts work. The idea really is
that the experience you're creating for someone using your app that has accessible needs should be as identical as possible to someone
who doesn't have those needs. So making those experiences as symmetrical as possible
is really important. The tabindex on forms
was a bit more of a heavy implementation or is
this one is a very soft touch. If you have a basic
layout of elements, like here where you have these three controls
existing at the same level, it'll let you change which
one you want focused. There are certain scenarios
where this can't. For example, in your CollectionView, if you had a bunch of elements in there and you wanted it to jump from this first label to something inside the CollectionView and then do something outside the CollectionView, you can't really achieve that
here with the SemanticView. That's one of the
scenarios you have to question if that's actually the correct way to make
your app accessible. Because the idea is that once
you dive into a ScrollView, that's where the user needs to be. That's one of the things to note about the approaches
we're taking here with the toolkit and even with Maui, is that fundamentally
the native platforms know what's best for accessibility. Then all of these APIs are just making it so you can
make a little bit of a tweak, and then we just stay out
of the way of things. That's the mantra a
lot here with Maui, with the Community Toolkit
and the ordering things. >> That's the cool thing. We can
use this now today in examining forms because of the toolkit to be totally clear at
the time of recording. This is all in pre-release, but maybe by the time
you will see this, it will be out in public in a stable release. So
go check that out. Is there any other resources
that we can look into, because I'm really
intrigued by what you say, Shane, you don't have to just
implement this to make it work, but you really have to also
put some thought in it, like what is a natural flow through
your application for reaching those buttons whenever
you have to go through them with a swipe gesture or so. Is there some resources that we
can kick out right now, Rachel? >> Yeah, as I mentioned, this semantic ordering view
originally came from the Ally tools, which is the sample
that I just showed. Actually, in this very
same Ally tool sample, there are additional APIs
that we're exploring that can also be
experimented with right now. Here, if I go back into the sample, I can demonstrate some of
those other APIs we have. Some of those include
an API called SetFocus that allows you to set the accessibility focus
to a specific element. We also have one called
SetControlType, for example, that allows you to
indicate that you want a control to act as a certain
different type of control. These are really cool
and I would love to show you how these work as well. If I go into the sample
and I go to SetFocus, that turns TalkBack on and this demonstrates how if I
click on this button, I can force the focus
to go wherever I want. When I click on it, the
focus will go to this label. >> TalkBack on, [inaudible] tools, "Okay" button,
double-tap to activate. Set accessibility focus
to "Label" button. Hello, I am the label. >> As you can see when
I click on the button, the label control is read aloud. Then that's for SetFocus API. Then if I go to the SetControlType
API demonstration here, I'm going to go here.. Let
me show the sample here. In this first StackLayout, you'll see that the whole
thing is read aloud as a button because we set the
control type to act as a button. >> TalkBack on. I am a button. Double-tap to activate. >> As you can see, the
whole thing was read out as a button and then it
said double-tap to activate, and this is behavior that is only
typical of a button control. Here we indicated that the entire StackLayout
should act as a button, which is why we were able to do that. This is super helpful
when it comes to trying to make grouped elements
more accessible as well. >> We see a lot of cases where
people are using StackLayouts to make buttons because you can
make your content more rich. This is a nice way to now make the StackLayout present itself
as a button at the native level. Because you can go into the
code behind on this one, originally, you can just
see that we're basically setting the control
type into a button. >> Really cool. >> Yeah. Then that studying native Ally properties on the
controls themselves so that the native operating system then interprets those elements with those types of traits
like as a button. There's nothing that we're
doing inside these controls to make it read like that ourselves. It's not like text we're embedding
or anything weird like that. It's very just down to edging
the native along to be like, "Hey, just so you know, you should treat this view as a button," and it does all
the correct things for you. >> That is great. So much stuff to work with to make
your app accessible. I think there's more sessions and things where you can
learn more right now. I think there's a big push going on this month on all things
accessible, is that right? >> Yes. Well, firstly, for those who want
to check out all of these cool APIs I just showed off, you can find the Ally tools
repository on GitHub here and check out all the cool things with
these APIs I was talking about. Then there is also a letslearn.net accessibility
session coming up very soon, and it might have even happened by the time this reporting goes out. That can also be found here. I encourage everyone who's
watching to go check it out. >> Great. I will make sure
that the links will show up down in the video description so
that you can all check them out. Thank you so much, Shane and
Rachel for coming on and adding this in the first
place and coming on to tell us all about it as well. To your viewer, also
thank you for watching. Please go check out all
the other Xamarin show episodes with James or me or both. Of course, click the "Like" button if you've liked this episode and subscribe to our channel to be notified of new
content automatically, and until the next one. [MUSIC]
