 Thank you. Thank you all also welcome people on the live stream. Hello, Rafaela Okay, thank you for being here. So who is afraid of Aria Yeah on the slide is area Stark from Game of Thrones I'm a read felt I When I'm a senior accessibility Consultant at level level that's our press agency in Rotterdam, the Netherlands And I also give workshops. I teach and I do reviews so everything accessibility related Slides are on slide share Dot net slash the young read felt so if you want to look them up later in the stock I'm going to explain to you. What is area? the first rule of Aria and Examples how to use area and therefore I am going to do a live demo of a screen reader. So wish me luck. I hope everything goes well And after that, I will give you a list of good resources for your own study You want to learn more about how to use area? So first of all, what is area? the official Creationist W AI Aria W AI stands for web accessibility initiative. That's a working crook from the W3C and Aria stands for accessibility accessible rich internet Applications suite so it's actually areas, but whatever This is the definition I had to find a way To make web content and web applications more accessible to people with disabilities So it helps people with disabilities understand the website better It's all about feedback What happens on a page? What does this mean? How can I interact? That is what areas you are used for But the first rule of area don't use area That's very contradicting but I will explain what I mean Don't use area to fix meaningless or incorrect HTML 5 Don't build something and then afterwards think oh it had to be accessible and I'll throw in a bunch of area to make it work That's not what areas for One great example is how we treat hamburger menus. Who does this? Diff with an ID menu to hang the JavaScript on menu and diff I Think 50% of all the hamburgers are made like this if you want this to make this accessible you have to do a lot of work Because if you use keyboard and you cannot use a mouse You tap from focusable control to focusable control and The diff doesn't get keyboard focus So you cannot access the menu and if the menu is the only way to access the rest of the website People who cannot use a mouse can only see the home page That's very annoying So what you do you add tap index zero, okay, then actually gets keyboard focus, but the JavaScript isn't fired You add a rose button You add area pressed is false and you toggle it to true then you make it actually work but Don't do this Don't throw in a lot of area to fix meaning this incorrect HTML. This is wrong Use button Then you get everything for free get keyboard cook up focus the JavaScript is fired you get it over free This is right Saves you also a lot of lines of code Semantics gives you it all for free so learn HTML 5 deeply before you learn area before you learn JavaScript Dig into HTML 5 because that is what put to the browser. That's what interact with all the technology Now and also in the future HTML 5 meaningful code is Sustainable for the future Area is all about feedback What happens on a page? What does it mean? How can I interact? Okay, I Will give you examples on how to use area The code is in code pen bit dot li Slash wc and o dash area if you want to look at it later. I Want to address a few area properties area expanded to tell if something is open of closed Area live tell someone who cannot see what's happening on a page The JavaScript methods WP Ellie speak That's built in into core into WordPress core so you can all use it area label and screen the text class Are labeled by an area described by it seems a lot But I have time to download so I will do that now so the code pen you want to see the code and After that I will have some resources so Oh So we'll start with area expand Show it to you. This doesn't work. Is there a block for the mouse? Oh, here it is. Okay, it's really slow area expanded for example, you have An accordion or you have a menu Then you have a button List of numbers if you click the button Then a list of numbers opens and if you click it again, it will close again But if you are blind We have no idea what's happening so it can be told to you with area expanded So how far up the screen reader voice over on safari area expanded window to bar. Yeah, this Yeah, okay You see on the dark line. There is where the screen reader is announcing stuff. So he is now on the The toolbar if I press tap I go from focus book control to focus book control in this case That's the button. So I do tap list of numbers collapsed button Says listen items numbers. That's what inside the text in the button It says that's a button and it also says collapsed So someone who is blind is notified. Okay, if I activate the button by for example enter or space Then someone is something is showing after that. So I list of numbers expanded button Now I know, okay, if I read further, there is extra information If I don't want to do that List of numbers collapsed button, then I press the button again and I can read without the extra information This is for example useful for a menu Who do I want to read the menu or not menu open or closed? I will show you how the code works PHP storm aria till this voice over off Okay This is how it works You have a button and you have a area expanded and set the default to false and They have a toggle that's with the JavaScript you toggle The list below is hidden. You can use the HTML 5 hidden or display none, whatever you like Then it's very useful is the button is just above the stuff you're going to toggle If you have a menu the button to open the menu, it's very important That is just above the menu you're going to toggle because then the screen reader can read from there To the menu or the thing you are toggling This is clear Now the questions about this Yeah, I will answer questions later So I will show you again with the screen reader Voice over on safari aria expanded window to bar go back button expanded web cop Shelfette list of numbers collapsed button list of numbers expanded button numbers bullet one bullet two bullet three Bullet form now you can read it and the screen reader user knows. Okay. There's extra information That's area X voice over off Okay Next one I'm toggling a bit between screens Very alive Tell me what's changing for example, you have a form and You want to do a submit without a page reload and Then you want to inform the user your changes have been saved successfully If you cannot see those changes are silent Because there's no page reload So what you can do is put the changes in an area life region I will first show you how it works, and then I will show you the code So right off the screen reader voice over on safari your name edit text now I forget focus on your input fields and I do something and team my Submit button Changes saved successfully How this is the announced I will show you Voice over off. This is too small is it? Okay Yeah, okay What you do you put an area and if for example with an area life is polite If you have an area life region that must be present before the changes occur We have area life with an idea and the class and whatever The screen reader listens to an area life region So the element that has an area life in it if there are changes inside that diff Then the screen we will announce You have two different area lives you have area life polite Then the screen reader waits until you stop typing or interacting And you have area life assertive. That's in your face immediately for example for error warnings So in this case the area life is filled with the your changes have been saved successfully This is very small too This is a JavaScript. This is very rudimentary you all can do that probably very well But it gives you an alert to the text content and it says change is safe successfully That is injected into the diff with the area life. I will do it again and I'll do Now I have to do a page reload Okay, because if the area life is already filled with something is the same nothing announces So it only listens to changes voice over on safari your name at a text and a TT Submit button changes safe successfully That's because the area life region is filled with the changes safe successfully text and it announces it That's area life So you can use your own JavaScript, but you can also use the BP Alice speak and then we have a rock star here in the room voice overall called Sami Who wrote excellent documentation about this on his website folks land the original article wordpress.org An example on github how you can do that and also a demo. So let's do the demo and I will try Doing inspect code Can you see this or is this too low small? Okay, if you have the JavaScript method WP Alice speak implemented in your JavaScript When it's loaded it adds two diffs at the bottom of your page just above the end body and There's a diff with an ID and this is a diff area life is polite It adds also a diff area life is assertive And you can choose when you call the JavaScript method if you want to fill the area life is polite or the area life is assertive So this will be static in your page So Voice over on safari WordPress speaks testing kill or in her Select city pop-up button main select city and then the results of the city you are selecting is a Change dynamically and then the menu take your order to co-op you select city pop-up button filtering contacts was successful But screen reader says filtering content has been successful So you announce to the screen reader something has changes change You have don't have to announce everything does change for example if you have search results You don't have to announce all the search results if you have a search and that Dynamically the results below you can say for example new search results have been found or there are 15 souls results or there are no search results and The results can be or something like we have results results. You can read them below something like that Don't announce everything, but that's very annoying Why is it wrong? So thank you, Sammy Yeah, yeah, you can localize area is just text So you can localize it There are in the accessibility handbook or make wordpress.org our examples on how you can localize area and also Localize how you can also can localize the WP at least speak and I yeah So it's just text You can do it in the text of people who read the website No problem Right next one Other questions about the WP I speak Let's go to the next one if you have a link For the example, it's called edit People who are blind can call a list of links to quickly navigate and understand the page And if all the links are called edit or read more or download It's for them very difficult to distinguish which link does what? So you can add area label to a link you can add it to a button to a focusable element In this case first I will read it I will explain it and I will you can listen to it first case no area label It just will say edit The second I have an area label edit my awesome post to the edit and then it will announce edit my awesome post The last one is I have an area label that says something completely different us here in inside So you have to be rare area label and links over rules the complete link text and the other one I will explain later Voice over on safari are a label window to link edit He will tell us it's link and the link text edit Now we put an area label on the link text with a different text link edit my awesome post This is very convenient if your graphic designer says, okay This has been so small buttons your own and it must only see a lot more Then you have now the power to actually have other texts in that for both load more About and then more information It's just giving a different text to a screen reader user with more information But then the visual presentation stays nice and small It's all graphic designers luck But beware You can put text in it. It's totally crap for example Link edit my awesome post and then you're deleting it. So don't do this Okay voice over off And I will show you the text But watch it a bit So the first one was just a normal link Each ref your URL edit. That's how we do links and then It's age ref URL and an area label and then you put the text in it And if you use PHP you can use a whatever a localization you want in this and Then edit and this is the really link text you see So this will announce edit my awesome post And then the last one says to lead but will it will announce edit my awesome post But then there's another way to do You can use a screen reader text class Which one you use depends on the case when you're on the functionality But you can have a screen reader text class that also hides from screen But will it will be announced by a screen reader. I will show you how that looks somewhere in the Jesus This is screen reader text class It says border no zero zero clip and clip path. This is for backwards compatibility Height is zero because if you have site is height is one Sorry, height is one pixel because if you have one height is zero screen reader will not announce it margin minus one pixel overflow hidden padding zero position absolute that screws up a bit and Then with this one pixel and a word rep is normal the last one is necessary for Safari because if you have Space that is one pixel wide Then Safari will read the word letter by letter So if you have word rep is normal, then it will read as whole words So and what does that do so if you have here a Edit and then you have a span my awesome post The advantage of this is that it this is more robust because not every screen reader knows area yet All the screen readers doesn't know no area newer screen readers modern software does So I think area is safe to use but sometimes for very old screen readers areas not supported and then you have One advantage of this you have actually text inside your link Google doesn't index area yet So if for SEO, it's maybe the screen reader text better If you value the text that's inside for your SEO ranking So and but there's a snack if you use Safari voice over voice error on Safari are you able okay edit Edit edit my awesome post link edit my awesome post and then link my awesome post edit Then it switches around That's because of the position absolute So area is safer to announce but maybe more robust for all screen readers and browsers Choose yourself what you like best. It's not always over off. Okay now Are there questions about this? Yeah It's like the edit text is totally the text inside the link is totally different than the area label text if that's a violation I don't know Sammy. I think it's that is that a violation that it has to be the same the beginning Yeah, it's a kind of a new rule that it should be the same because of the different kind of devices might actually see the edit work inside a link For dragon like for targeting a button or link that it has to be the first word has to be the same Otherwise the dragon cannot target it Okay, that's that's that's that makes sense. Yeah that you have the first word must be the same So some assistive technology look for words in buttons and links so they can target it better. Okay. Yeah, that's a good one Thank you. Yeah. Yeah It's a yo sir here I Don't know I'm not an SEO expert. So I don't know that answer. Yeah, okay I will go further with area label and there's another use for that You can overwrite content for a link or a button, but you can add content to landmarks This is a very rudimentary page like I'm really graphic designer as you can see You have here a menu and you have it this is the heading header and you have a menu in the header This is your main yada yada yada, and this is your footer and you have also a menu in the footer Screen reader users can navigate by landmarks. I will show you Voice over on safari. Are you label on landmarks window to bar? They can call the web rotor Window spots many links menu in the web rotor. Do you have links? All the links on page all the headings on the page landmarks menu and landmarks Three minutes. Oh, yeah. Okay. I will just question time will include the question time. Yeah, okay You have a banner That's the heading and you have a main menu navigation and this main menu is an area label You have the main content information. That's the footer and you have a content links navigation. That's also an area label To bar PHP editor Ferrari a little voice over off So yeah, so you have two navigations now No, and you want to give you area main menu and the other nav you give the navigation Area label content links. So then you can distinguish different kind of navigations from each other This gives extra information to screen reader user or so all what's happening on the page How they can quickly navigate then the last one area described by an area labeled by This is very useful in forms As you know, you can tap from focusable element to focusable element and especially in forms blind users or users with Use keyboard only they tap in a form from input element to select from all the form elements But then they miss information For example, if you have Information about how to fill out the form Here you have a name and below that is please give your first and last name But if you tap you only hear name So what you can do is use area labeled by That replaces the label text and You can have area described by but adds content to another element for example here in the input field For the screen reader and then you can hear it 20 voice over on something what okay? Please give you a first okay here name edit text Name edit text. That's all you hear And because you are in form mode, you just tap from focusable element. You completely missed as this a screen reader user So then I use area labeled by on the label. Please give your first and last name edit text So it reads please give your first and last name And then edit text so it replaces the name with please give your first and last name and Then the last one name edit text Please give you first and last name He's a bit slow and and to be honest screen reader users have this like the two thousand times faster So it waits a bit and then I have to screw it very very slow So it announced name and then the extra information when you focus the input field So these are two ways To give this extra information to people who fill out a form and only tap through it. Otherwise, they miss the information Why is it wrong? Okay? This is how it works First is about nothing This label input and we all know an input field needs to label. Yeah, you do that everyone. Yeah, okay And then a label and it has an area labeled by and This is the ID from the paragraph with this idea So this is coupled to each other. So it replaces completely the name with this text and the last one You have a label and input field and an input field has an area described by and then it's adds to the content input field label is Announced and then with the input field when it gets focused, please give your first and last name So more time is gone So this is area Not to fix crappy HTML But to give extra information for people who cannot see the screen resources These are specs Wai area authoriting practices They used to be very hard to read and they are rewriting them into something really good to be done So don't be alarmed. Don't be afraid of specs and And Very passport make where past orc slash accessibility. We have a handbook and There is a lot of information about area and links to other good resources Thanks to Sami Okay then Hayden Pickering Has wrote a book called inclusive components and Hayden does excellent research He uses modern HTML 5 CSS 3 the latest Techniques and he does a lot of research with JavaScript on how to make it work for everyone Inclusive components. It doesn't cost much There's also website attached to it with a lot of example code. I really recommend you buying that look because it's Excellent. It's an e-book. So you can just download it. I think it's $20 or something. It's not much Then the DQ university has a free online Richard code library for Using area and all kinds of different components you may need for your work So there is a lot of good example code If you want to study more my Gifford has His accessibility guy of triple He has a GitHub repository with all kind of different courses online offline paid free Just take your pick if you want to really study further. I want to finish with a quote Make it work before you make it nice Okay, thank you. Thank you. Yeah, we still have Time for questions, but before they move fires the first one. That's just one to know this one important thing about WP Ali speak. It's Already in as a npm package has been a long time already and you should check all the WordPress packages now from the npm Because with the Gutenberg They have been publishing lots of other cool stuff in there also in this case the Ali speak is written by one illa one illa js You definitely want to import only that part of the js into your existing project The reason is that you probably don't want to use jquery library in your sites anymore. So Use the npm package version. I have the in the demo site example of that But it's just basically important package and just use it So now for the questions demo was the first one at least I saw Can you hear me now? Okay Can you give me a one a minute tutorial how to use the voice over? Okay, the voice over is on the Mac. It's built in Command of five it fires command of five it stops That's a manual no Command of five it fires and it It asks you do you want to have a tutorial and there's a short tutorial with it? So I just just spent an afternoon playing with it and it's really simple screen reader blind people use Professional stuff like NVDA if you haven't not if you don't have a Mac but a Windows machine NVDA is free. It's open source project. That's a more advanced screen reader Makes more work to learn, but if you can master that you really Yeah, it's just takes a while to kind of get the hang of the keyboard shortcodes But for example web a.m. I think have pretty good tutorial on the basics of the how we how those all How do you get to set up the rotor? For example that re-answered? Duke University has also Like cheat sheets you can download this PDF with all the shortcodes for Joss Joss is a paid a Page screen reading that's really expensive But for NVDA and for voice over to this DQ lab as you just Google DQ shortcode screen reader Voice over something. I think you will get it for pay yeah for basic testing you basically one of NVDA also not just the voice over and Because what's over even isn't that used with the actual users? Now I would disagree. I know a lot of people who are well people use it But if you check those studies to test with because it's easy to learn So if you are a developer and you have a Mac, it's really good to have an insight on how it works Yeah, it's like a tutorial. Yeah, you have a tutorial build in so you can choose it first time You get such a pop-up window and you want start voice over of the tutorial Maybe about 10 basic comments. Yeah, good start for the basic testing Daniel Don't we have a microphone? Sorry, I didn't see you Hello. Hi, I'm so I Have been used to I'm from a language area, which is like, you know 300,000 people. We've had Speed synthesizers being done that, you know only work on Windows Sometimes they work on Android and sometimes people stick with these Spits beat synthesizers for, you know, 15 years. Yeah, or whatever. Yeah What is the current status of do you know the current status of that in general like with smaller language areas or in general that? Users of screen readers tend to stick with legacy solutions for let's say even decades I think the basic functionality must use with work without how they are to actually for older In the Netherlands they get every four-year money To get a new screen reader. So in the worst case scenario people are working with four-year-old computers and screen readers so You have to have a fullback. I think maybe that's the screen reader text class is very useful for that You don't need to it's for extra information for explaining stuff on how things work. And I think If you have really main functionality that depends on area that that's dangerous, I think Yeah Yeah Oh my old assist technologies like hell It is like and you also have like all the all the browsers to use and then an old computer It's like we always say hell is other browsers But if you work for accessibility you have also all the older assistive technology so Yeah, but on other hand if you never go without a new development and not the new stuff you stick like an old code I think you can also just use CSS 3 and a lot of browsers will from people Maybe don't still support that so and we all use these three I think it's the same with area you just go with the new developments Otherwise, you just stick in in a static HTML Yeah But I yeah, you have a full a valid point, but I also think you don't have to stick in all Yeah Hi, actually just a quick comment to that is that I think if as long as you're like building your site so that they're Not like totally broken in whatever browser Then you're kind of pretty safe On HTML 5d But I was just a comment on screen readers that in like at least if you've got like a windows recent windows 10 Installation it's got narrator built-in which at least I don't know how good it is Testing with narrator. It's very basic. Yeah, very very basic But it's at least about from like a developer's point of view at least it's very easy to to Test with it. So at least so you just sort of babe almost nothing I've heard it's got better of like really really fast. It grows. Yeah But that's built in in the edge or you worked with edge. It's a new windows 10 10 narrator Another one Okay, I'm here all evening and tomorrow morning. So yeah, I think we Need to call for the closing remarks soon. So thanks again, Rian Okay, I have one thing to say before you run We have accessibility cards with tips For how to develop design and to write content accessible to do's and don'ts if you want those These are seven cards come here and you'll get and the first one first go Hahaha