Microsoft 365 Community SharePoint, 19 Mar 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating accessible SharePoint column formatting definitions with role and aria-* attributes

Description

This PnP Community demo is taken from the bi-weekly Microsoft 365 – General M365 development Special Interest Group (SIG) community call recorded on March 19, 2020.

In this 13-minute demo, Chris Kent shows viewers how to update column formatting JSON schema using ARIA attributes to pass information to the ChromeVox (a Chrome extension for the visually impaired) screen reader that verbalizes value/status of a formatted field. Formatting includes adding color (representing a status) and values which may be verbalized as follows: “Hire horse trainers, Progress 'Getting there!' is 75%, cell read only.” This added information makes your formatting truly accessible to all audiences!

Demo Presenter: Chris Kent (DMI) | @theChrisKent

Supporting materials:
• Column formatting documentation: http://aka.ms/spdocs-column-formatting
• ARIA resources: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• Formatting sample: https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/number-data-bar

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

I'm Christians all right. Let's take a look at some stuff, so we'll go to our classic warrior horse insight that we all have and one of the things people may not know about the warrior horses. They love formatting, but they also love battle and killing and murder and destruction and all those kinds of things, but that doesn't mean that they don't care specifically for the horses among them that are less able right.

A

So the horses that have either been injured in battle- or you know, have different needs for accessibility and everything else, so they want to make sure to be inclusive in their formatting makes sense. So if we go to our classic things list here, all right, we take a look here.

A

We've got kind of a progress bar here, and this makes sense- and here are those of us that can see it's pretty easy to see the percentage of progress and what's going on here now, if I enable something call I'm gonna, do something called chromebox, which is a nice little extension up here that it turns on the voice, recorder or voice my screen reader. Let's turn that on one second, here there we go.

B

Your microphone microphone is working way too. Well, you can't hear the voice. We can't hear the voice the voice I see only in your head.

A

It'll just tell me cell beep, nothing about it being a progress, the value or anything along those lines right so I'm gonna go and turn, but you guys should check out chromebox it'll help you a lot, but I'll still show you what we're gonna do about this. So if we come in here we go to column settings. We have format. This column you'll see it's pretty standard here. We're just explained the length based on the current fields, progress. It is a percentage field right, so zero to one value now will be.

A

The first thing we can do is add something called a roll right. So if we add roll here right in our attributes, say progress bar and then, if I were to click that again, this is generating the voice. I won't. You would actually hear that now it understands that's a progress bar.

A

It's going to pass that information on to the screen reader and that's one step, but the next step is right to tell if the value is so we would come in here and we say aria right and we'd hit and we're gonna say value now and in this case we're just going to put the current field right and the nice thing is it's going to understand. That's a percent, because we also provide these other values.

A

Like Aria value min we say, that's zero, I'm gonna say our aria value max is going to be one all right, so we don't need to do like normally when we display these things are having to convert this. You know, multiply it times, 100 to get to the exact percent feel and everything else, but because we're writing the minimum value in the maximum value. The screen readers going to understand what percentage it should say.

A

So now, if we were to click on that with the screen reader again now, I would actually tell us you know progress bar, you know 75 percent, 25 percent or whatever the values are here, and so that's fantastic right now. If we wanted to take that a little further, we certainly could right. Cuz, that's a little bit disconnected. So if we wanted to add something like say a label, so we could say aria label.

A

All right, we're gonna, make this actually a formula right, so we're gonna reference, the title field, because we know that's what this progress relates to I'm gonna, say title and when it's plus or an ad space when I say progress or column name right, and by doing that now, when it reads it'll actually say things like higher horse trainers, progress, 75% right, which is really helpful when you're clicking on the things and people are trying to understand, what's happening on the page.

B

Sorry, sorry, sorry I know that I'm breaking your flow and this is really well scripted and everything so the moment, but there's a good coin point from our team. Please can you, can you checkbox the system audio when sharing so there's the option of sharing your system audio and therefore we get here.

A

Okay, so let's see I mean some of the stops and we share and said: let's try that yeah.

B

Because Jim that's a good point from Jimmy, it would be crate to crate crate.

A

B

A

Thank You Jen appreciate it. So let's pretend I didn't do this yet alright, just so, we can hear what it sounds like without it.

A

Let's see you do that, let's turn it on use.

C

This dialog to format, Maine lizard, folders, yeah, I, love.

A

Auster's list.

C

Of folders of cell read only so.

A

If we go back a little bit right-click on this silver.

C

A

Cell read all right and that's coming from the Aria labels that are actually being put together by SharePoint on the cell itself right, but it tells us nothing I'm,.

C

So ready holding displayed.

A

Here what we're trying to communicate? So, let's go back in a text.

C

A

Little bit of what we just did alright. So if I add the role of progress bar copy, that, from over.

C

Here, left, brace, quote dot-com and have to watch Bridger again quote role quote: space should turn that out between copy left, brace, comma. So.

A

But maybe that.

C

Preview, the column for progress bar now.

A

We understand it's a progress bar progress.

C

Bar sale, read-only, which.

A

Is great right but again we're now we're gonna get that value. Let's turn that off for just a second while we type.

C

Chrome Vox is now inactive. Alright,.

A

We'll copy over our values and our value amendment and value max that we typed in before it's right and we get our extra comma and what else late? Oh and we add how did I break the format here, anyone spotting it not liking might no right here nice to have a colon there. We go well preview that will turn this back on.

A

That's an alfie.

C

Project progress bar 54%, sell, read-only progress, display item form panel, exited dialogue, progress bar 75%, sell read-only, we're.

A

Already, making progress now we're actually communicating to the screen reader? Well we're displaying visually with our column format. Now, if we want to go a little crazy, a little more text, Aryan we're gonna, have the aerial a real aria-label here.

C

Left brace quote comma space, but again quote aria-label, quote comma pre that preview so now preview. Her list of full progress, bar 75% sell Rita progress bar seven progress bar seventy list of folders project. Kickoff progress, progress, bar 54%, sell, read only list of progress bar 75%, sell, read. Only progress bar 75% shows up begin. The chrome progress bar 54% sell, read the project project kickoff progress.

A

Following progress,.

C

Bar 54% sell real list of folders filed chrome box is now inactive, so.

A

Now, what if we were doing something we're trying to play something a little more obvious about what we want to say here, so, for instance, what if, in our style, we decided that dad this background color here we're saying if the current field you know is, is greater than 50%. You know keep this kind of themed. Color we've got otherwise turn it fire brick red. Alright. If we take a look at that now, we've got this nice kind of indicator.

A

Saying like this is not complete enough for whatever it is we're trying to indicate, but when we turn that no screenreader back on use.

C

This dialog list of folders progress bar 44% sale read-only. We.

A

Lose that kind of extra contextual information, so one of the things we can do instead of having you know giving it the value here, text.

C

Area chrome box is now inactive. We're.

A

Gonna instead replace these, these re value, Niles and value mins and instead we're gonna put in value text. This is where you can very specifically control how it describes that value. So in this case, we use an assembler formula and we're going to say when it's greater than 0.5, we're gonna say getting there and when it's less than you know, 50% we're gonna, say not even close and then we're going to say that percentage ourselves right. So this gives us even deeper control over some of these things. So, let's preview that.

C

Preview, the column formatting lick progress bar getting there 75% sell, read only a progress bar, not even close, 44% sell, read-only, chrome Vox is now inactive, so.

A

You can see we're already making a huge difference in the accessibility of our formats and making sure that our formats are not just wow that have the ability to see them, but also are interacting in a way that other people can take real advantage of our values and the kind of you know, dynamic definition. You know the visualization ourselves that were trying to express through this could be translated over there. So we just need to be a little bit careful about using our Aria labels and so on. This becomes really important in things like.

A

If we take a look at the FAQ list we did last week, we've got some. You know text on the screen like this or if we did something like. Let's turn it back on here,.

C

Microsoft Office through fa Q's all right, so it's starting one man.

A

Things, but if we were to do a heading.

C

A

Warrior horse accuse anyone. Man list like this to become press.

C

Enter to accept or escape to cancel it down for next and up for previous q can I have a hug. Hugs are from the devil. How do horses even perform hugs q, chrome Vox is now inactive. Well,.

A

Turn that off for a second, but the idea here is we want to provide that kind of navigation that you know screen readers to you, so it doesn't just have to read through all of the fa Q's right if they're trying to be able to navigate by heading now. Normally you would do things like that by specifying an actual heading element right and it would automatically pick up on that like an h1 h2. That kind of thing, but those are not part of the whitelisted elements that are available in list formatting.

A

So this is again where we're gonna use something like Aria labels here. So we're going to format this view and if we just go down to where that title is right, where we're actually putting so we got our queue here and we have the title of the question and instead we add scroll back up. So you can see that our own attributes here attributes little curly brace up here and now. We're gonna add a couple of things here.

A

So we're gonna, add roll again or this time we're going to say it's a heading and then we're gonna. Add one more Aria label, so we're gonna, say Aria level and in this case we're gonna say it's a heading one. So this allows us to communicate to the screen reader, though, although this is just a div or a span in this case, this should be considered an h1 element. No, if we preview that which we did, that will turn this thing back on use.

C

This dialog to format them use list of folders heading list banner banner weird: when is it okay to murder a horse right? So.

A

Now I'm heading we're already starting to press.

C

Enter to accept or escape heading it.

A

Allows some other kind of navigation and we could start marking elements the page for screen readers to pick up on that information. Okay, all right, so we're gonna prove a lot of our samples are missing. The text.

C

Area now chromevox is now inactive. We've.

A

Started the process of adding some of these, in fact, you'll find even the out-of-the-box kind of design wizards aren't putting some of these Aria labels in like they should, but we'll see if we can work on that, but the background of the samples will be going through and adding a lot of these elements as well for accessibility- and in fact that's one area if you're looking to contribute, would be very, very helpful to do that. So, let's go back. Let's review, just real quick, so our accessible, rich internet applications there's several guides out there on.

A

You know one of the different roles that are available. You know what are the different Aria things that are there and list formatting supports both the role and Aria, so you can put Aria anything. So all of those will pass directly through to your element so make sure you're taking advantage of that over here. Here's a really nice guide by the Mozilla organization right, you can check out this link and they go in-depth about why you want to do it. What's the best way to do it.

A

If you want to use the tool, I was using, chrome, Vox is just a Chrome extension makes it freeze test, and you could always, of course activate your your navigator. If you can Windows 10, but that's very, it controls everything. So chrome Vox is nice because again we can narrow down to just the specific elements we want to test, and then we've got a couple of formats that are already showing what I show.

A

Today the number data bar and the FAQ format that are available in our formatting repo, so check those out and that's all I got Thanks.

B

Excellent Chris, thank you for that one, and that was a funny one Thank You team, by the way for sharing how to get the system audio to work.