So. Hello, everyone I'd like to welcome you all to accessibility. Talks every, month virtually, we, get together and talk about all things accessibility. Focusing, on website, usability each. Month we invite a speaker to present an accessibility, topic, and after we'd afterwards. We invite the community to ask questions, and participate in the discussion, so. If you have any questions for our speaker post, them in the little zoom chat window or on twitter, with the hashtag alli talks that, spelled. A11y. Tal. KS, alli talks I'm. Today's, host Amy, June, Heinlein, I am the open source community ambassador. For canopy studios and our, speaker, today is Sergey. Krieger. He. Is the front-end developer, center, schraeder in this, month's talk, we're. Going to talk about time control and web accessibility Sergey. Will speak to how time, a plain. Web pages and dial-up internet is, gone forever we. Live in the world where our devices are able to simultaneously, operate. With tons of data tweets. Notifications. Alert, messages, progress, bars all the components. Appear on the webpage asynchronously. Which makes the user experience, more convenient, than ever being. A developer in 2019. Means being able to make beautiful, fast, and fully accessible user interfaces, in this, talk you. Will learn how to apply the best accessibility. Practices, when making asynchronous. Components, and how to test these components, with modern, assistive, technology, now. Before I hand the keys over to UC or gay I wanted. To ask you about hiking, in the Alps. What. Is your favorite part about it because me it seems pretty, treacherous, in, the right conditions, am I wrong, about that yeah. But I usually like, I use. It up for that and there are like three, rotations. Leveled with every code like. Easy intermediate, and like really high key I use, usually something. Like easy or intermediate. So it's nothing super. And yeah. It's here I live in Munich south, of Germany, it's like ups are right, here, hour, by, train, and your other, so. It's just more activity. Than climbing. The. Air must be nice and cool and clean up there huh mm-hmm. Nice, okay. So are you ready to take it away, yep. Okay. Let's start them hello. Everybody and thank, you. For joining us today and I'm, really glad to have a possibility to speak. In. Front of you because the topic, I'm gonna speak for me it's quite important, and challenging and interesting and, I really wanna. Share what I know regarding. This topic and, let's start. My. Name is, Silvia. Kruger I'm a front-end developers, from. Front-end developer, from the company, called sinner shudder it's.
A One, probably, one of the biggest. Web. Studios in Germany, with the offices, in Hamburg, Berlin Frankfurt, Munich. Where I'm from and also we have an office in Prague, Czech Republic. And we, are making web, applications, for the clients like early on so, the BMW. And many, others and, besides. Front-end development I'm very. Interested in web. Accessibility. Topic. And this is something we are going to, talk. About today, and let's. Take a look first at a page lifecycle. But not as we developers, see this lifecycle. But how our users, would see it so let's imagine that we are our users and we need to see. A page any web page from the internet right so. What do we need for that first. Of all we need a browser of course and then we need to type a, URL. In the browser address, bar and then we click enter, and for, us as we understand. A browser go, somewhere. Takes a page and brings, it back to the browser window, and then renders that and after. Some point when all the resources, like phones. Scripts. Styles, images. Are loaded browser will tell us hey, you wanted, to see a page now you see it my, job is done here. That's pretty nice. But. What is the chance that this page will stay exactly as, we see it now after page loading, until, we close that page well, actually the, chances, are really low because some. Sites at some point can, kindly. Offer us to login or register for, example, or if, website supports, private messaging, some websites can, send us some messages, or notifications, somebody, liked or post somebody followed, us so all this things, can be, can. Be shown at some point or maybe suddenly, we can see a lot of burners, advertisement. Burners which, will disturb us to read the content from the website or, maybe we will see a model. Window with a cookie notification. Or some, other information, or maybe if we are lucky enough we. Can see even a customer, support job and look. At these elements, on the screen now all, of this elements, they don't, appear on the page immediately after, page was loaded right they, appear, after some, time or maybe after user. Does, something on the page and I. Call, these elements, a synchronous. Elements, or are synchronous components, because they, appear in the page a synchronously, and the. Funny thing is that it. Doesn't matter if we as. Users or as developers, like this elements, or not like this elements, it doesn't matter because. The. Reality is that nobody will, get, rid of these elements easily, because these components, they help to promote website, they. Help, to sell, stuff and people, will use this and we. As. Web developers we, need, to know how to build this elements but actually. Not only how to make. This element like. A. Show. Thus elements on the page but also how to make this elements, convenient. For our end-users and. Now. Let's take a look at this a synchronous, elements, from a little bit different point of view what. If we don't see a screen how, will we get information, from these elements, well. If we see the screen when new elements, like a model window appears we can simply see. It and read the information but, now we cannot even see it right so, there is no way to get information from those elements and here. You can ask or, why. Would we turn off the screen because usually we don't do that right we simply use the website and that's it and this, is correct we usually, don't do, that but, there. Is a big group of people who, use, the web exactly, that way they, don't, use the screen they don't. See the screen they. Use a keyboard and they use a special software like, screen readers and these, users, are. Visually. Impaired people for example blind, people, or maybe people. With very low vision, or any with, any kind of visual impairment. And these people don't see the screen and that's, and that's, pretty much it so our components. We that, we are making they can, be, good. And accessible, for all the people who see the screen but totally, unacceptable for, people who don't, use a screen and today. In this presentation I, will show, you how, we can. Build. This, synchronous. Components, in a way that they are. Accessible, not only for people who see the screen but also for screen reader users and we, will start from a very simple component, very, simple element, as, like, button. Probably. Everybody, knows what like button does right so, you can click like button and like button change, a state from inactive, to active and that means that we like something, and also.
If We click it again its inactive, and that. Means that we either dislike, something or unlike, something, or whatever you call it so this is all about, like button but, now let's imagine the situation if, I, when I click a button and nothing, happened look I click it nothing, I click it again and nothing again and what. Would this mean for me well. Either, I need to continue, clicking which. Looks. Really weird because I already did it like a couple of times or, maybe I lost the connection I don't have internet in my machine or maybe, there is an error happened, and I don't even know about that and. Here. We came to the very important. Topic. Very important, thing we as developers need, to inform, our users, about, everything. That happens on the page like. Literally, everything because, it's very important, for the users to feel comfortable, in our websites let's. Take, a look how we can improve, our like button look I click at the button and now. I see a notification you liked, it and that. Would mean for me that. I, did. What I wanted I wanted to like something and I liked something and I would click it again and, I. See, another notification that I unlike, something, so we not only see, that, button changed, a state, but also. Kinda. Approve, that everything, went well, but. Remember our goal is not only a notify. Users visually. About everything. That happens on the website but also update. Screen reader users with a new information, so, now let's take a look how. This. Like button works for a screen reader users, let's, imagine let's pretend to be a screen, reader users and probably if I'm a screen reader users I looked in the screen right so, I simply, turn off the light on the screen and now, I start, a screen reader. Voiceover. And. Now. With the keyboard I will jump. To the leg button. Screen. Screen, video tells me that now I'm in the like button and now with the screen reader I will click this button press. Like and. Screen. Reader told. Me that I clicked, a button but. Does that really mean that I liked something screen, reader told that I click it yes it was, so but I'm, not sure if my like was, really working, well so look I'm turn on the light and see that nothing happened because. There. Was an error and screen. Reader users didn't even know about that. So. Our next goal is to teach screen reader how to pronounce, information, with it and to. Do so there are two ways and we will discuss about both. Of them today and we will start from the easiest way to control. Screen, readers and, this technique called live regions, life, regions, it's. A simply. It's a set of attributes we can add to any elements. To, somehow control. What screenreader is saying and. We. Will start from the very, popular. Probably, the most, common. Life original, attribute, which called our real life area. Life has three values polite, assertive, and often a little, bit later we will discuss about all of these values but now let's, actually take, a look how we can update screen reader users with new information well. First of all need to create an element simple, eighty empty. Element, in. My case it's a deef but you can use any other elements, and then, you, need to add a, live, region attribute, we in our case we are adding area. Life attribute, with a value polite. And this, is, a, signal. For a screen reader that now it needs to listen to this. Element constantly, listen to it and then, at the time when I want to update.
Screen. Reader users I simply, use a JavaScript. To, update the content of this element, and screen reader will, automatically. Pronounce, all the content, I'm adding, to this element let's, see how that works in practice the, same like button turning. Off the lights starting, my screen reader. Focusing. On the button like. Application. And click, it, press. Like you. Liked it and, what happens now I clicked, a button and, screen reader told me that yes you clicked a button and, then, screen, reader told me that you liked something and if I turn on the light I see exact, same text in the net visual notification, I saw that, means that our like button now accessible, not only for people who see the screen but for all other people as. Well. And. Now let's discuss about different values, we can use in, the real life attribute, and there. Are three values as I already said polite assertive. And off and the simplest one like easiest, one out of these three is off because off literally, does, nothing, an. Element. Without a, real life and element with area life and value, off, they. Do the same screen reader doesn't do anything about that the. Next value is polite. Polite. Value, and it's so-called polite, way of notify, users, let's see how that works in practice first and then I will explain what I did him how it. Works, in. Detail. Now. On the screen you see a button which. Named polite and when, I click this button a polite, notification. Will be triggered and you will see how screen readers screen my screen reader behavior, when. Notification, appears. I'm. On the button now and now I'm clicking it, presently. Polite my. Mom always said life was like a box of chocolates you never know what you're gonna get hi you just got 1000 subscribers, okay. What happened now I clicked, a button and, I figured, a pro identification. This certification appeared. Not immediately, but after some, delay and then, in the meanwhile I started, reading a text, and then, when screen reader was reading somewhere in the middle of this text a new notification appeared. And what's, convenor did it found, a place, when it could be so. To. Say politely. Okay. To stop, reading, in this case is just the end of the text and string, me the read to, the end of the text and then, he pronounced. A. New. Notification this is a called polite, way of notifying users in, addition to polite way there is an assertive. Free and assertive. Way works totally. Different, let's, see in practice, how assertive, way of notifying user works. I'm. On a button now I click it again and then I will start reading the text. Service. Is unavailable please, try again later, what, happened now when, screen reader was, reading somewhere in the middle of this text, a new notification appeared. And we consider, this certification as very. Important. Notification, services. Are available so, maybe something, Linsey. Oops. Somebody. Left the meeting good. So. We. Consider this error notification is, really important, and we used assertive. Way of notifying users screen, reader was reading somewhere, in the. Middle. Of the text and then you notification, appeared and screen reader stopped, immediately, reading. And pronounced. Us our, message. And this is in so-called. And race, if we have any define users I would not recommend to, use this a lot but in some cases as you seen for, example in, the case we have now when a, really, important notification, comes. To the browser we can use that way because, this is a quite important, for the users Roth, and. Other. Very set life region, it's not only about a real life attribute, there are many other. Attributes. And values and, we, will not talk about all, of them today instead. I would recommend, you to check, out an article in there on the mdn website about life regen technique you will find there a lot, of information, about this topic and. Even. If this, technique, looks really simple there are a couple of things we. Need to know in other ones before there are some. There. Are some tips I would like to tell. You first, of all technically. It's possible to, add any attribute, and assign any attribute, value with, the JavaScript. Dynamic dynamically, but in the screenreader, world. It doesn't work because if you add I, real-life. For example with a set attribute, method, technically. It's gonna be correct it's gonna be in the Dom tree and this element will have this attribute but screen reader will not update it with a new information there's a way how screen reader works in, order to control screen readers we really need to add, this. Value and. Attribute, at the very beginning. When page is just loaded, and then, update, dynamically. Content. Of this element so that's the first thing the, next thing is, browser.
Support, For better compatibility I, would. Recommend you to use, not. Only area. Life with value polite when you wanna try users politely but, on, you you can add another. Attribute with the role status in this way. Most of the browsers, and screen readers, and operating system most of this combination will pronounce whatever, you want because otherwise, not all the screen readers not all the browser's work. Well with the area life alone and the, same way with area life and value assertive, if you want this combination. To work in as many browsers and devices, as, possible. Please. Use roll. With. Value alert in addition to our real-life assertive, this way you will. Support. Many. Browsers. Almost. All of them at. Least popular, combinations, and the. Next thing is that we can of course create. These. Elements, with the area life attribute manually, but there are already several. Tools. We can use for example on-demand, life region which was, created by Haydn Pickering and no. Need to create any elements, if you use this tool you will simply create an object live region, and then when you want to update screen, reader with some information, you will simply call a method say. With the text you. Want convenor to pronounce for you and it's gonna work really nice for example in this presentation, I'm using this tool and it. Works nice. Now. Let's take a look at another example let's. Imagine that our websites, have Ward's, private. Messaging, and now. We need, to send an email and, we already know that the defying users is quite a good thing and also we need to care about screen, reader users and we already using, all, techniques. We discussed so far and now let's see how the sending, email, will work for us I saw. Background I'm focusing. On the, send email button send, email and. I click it with the scheduler Polonia has joined a meeting. Okay. Clicking. The button press send email button, he, now is successfully, sent, what. Happened now we clicked a button and, then at some point a new notification came. To the browser which says. Which. Has a confirmation, text email was successfully, sent and this is really nice because we, not only see, this notification visually. We, also control, a screen reader screen reader pronounced on this text and this, already this. Makes our send. Email button accessible. For all the users but. If you look a little bit more carefully. On the at. The notification. You will see that in addition to confirmation text, there are some more, elements, for, example you can see three, buttons there, undo, button which will, simply. Cancel. Our, net our our email, for example if you send an email by, mistake there is a possibility, to cancel, it quickly you can click an undo button and you will not send any information, there. Is also a view message button you can click it and open your message. You just send and there is also closed notification. Button and this, is a really common practice, for example we will use this, notification. A lot in all the services, like YouTube Gmail and, other services, and this, is really nice if you see a notification. Physically. See the identification, you can see, those buttons and click any button you want right and it's, not the problem to use a mouse to click them but if you are a screen reader users.
First. Of all you don't. Even know that this button exists in the page because screen reader in our case didn't tell us anything about that right. Second. Thing is even if you know that these buttons are in the notification. You need to spend, some time in order to find this notification because, with. A screen reader you need to really navigate, through all the page and then find out if occation and then find those buttons and then click any, of this button if you want but, this. Notification usually. It doesn't stay on. The page forever, it appears stays for some second and then, disappears, and if, you are not, able to find the Santa fication in these buttons a wild, enta fication is staying in the page he lost the possibility, to use those buttons right and this is a problem, so as we can see now life. Regions technique works but, it doesn't do all the things we want it to do. And. Here, we came to, another. Important. Point. All. These, a synchronous, components, they are not only bringing a new information. To. The browser but they can contain some. Elements. Which, will allow user to perform some actions, on the, webpage so. Our job as developers. Also to make. All. Potential. Actions, in the webpage accessible. For all the people and we. Need to use another technique, because, as we just saw in the previous example averaging. Technique doesn't. Really help in this situation, and the, next technique we will use for making a synchronous, components, accessible, is to control a focus, we. Need to understand, that most of the browser's they. Work in a way that once, you, move a focus. From one element to another element, screen readers will automatically. Pronounce a. Content. Of a new focused element, and we will use that. String. Reader feature to controls, convenor and also view their focus, we. Will make our components. More to. Say user friendly, let's, see how we can improve our send, email but I'm, starting, screen reader again. I'm. Focusing. On the button. Application. And. I click 'add press, send email button. Email. Was successfully, sent you. A message close notification, group, so. What happens now I click the button and then again a new notification appeared. And this, time instead of using a real life attribute, we simply, moved a focus from a button, to the new. Notification. And now you can see this purple. Or. Pink. Border. Around notification. That means that this element got, focus, and screen, reader automatically, pronounced, all the content, from this element including. The button. Text and in. Addition, to screen reader update what, we have now with this focus that now. Notification. Is focused and now if you want to jump, to undo. Button or view message button we simply need to click a tab key, one time look, and clicking dunkey no undo, and, I'm, on the first interactive. Element inside of this component, I click it again and. I'm. On the view message button and now I'll click it again, and. I'm, on the close and if occasion but let's say I don't want to use. All this two previous options I simply want a close notification. Like nicotine and. The. Focus moves, back to the. Send. Email button and this behavior was, not done. Originally after you created element you after. You created, these elements, you need to implement, all this behavior yourself but look with, a simple focus. Control we made our send. Email button not only accessible for screen reader users but also more. Convenient, for all the users more user-friendly to, say San, Dena, okay. Okay. And. A. Couple, of tips, about. Focus control. Technique. First. Of all some. Of the elements like interactive, elements, such as a button linked inputs, to external and some other elements they are focusable, by default so you don't need to do anything in order to move, focus to one of these elements, but. If you want to move focus to any other elements. For example to, add if that's what we did in our case because notification. Is not a button it's a simple diff and we, made. It focus ado by adding a top index with value, either the, either, a zero or you can use any positive, numbers and so. We making, a, deep. Focusable, this way but. If you use this technique you need to be sure that it's. Working in all the browser's because unfortunately all. The browser's, different browsers, and different screen, readers they are handling.
Focus. Move a little bit differently, so if you use that technique please, make sure that your feature is working still in all the browser's. You need to support in the application, and that was. A theory, and now at the end I would like to show, you three examples how, we can use either one or another or, even both, of. These, techniques we discussed today and make. Accessible. And user-friendly interfaces. And first. Example. Will be really simple, let's imagining, it and our website supports a private messaging, which, doesn't, actually mean, that once. We get a new message we want to open, it and read it right we just I. Don't. Know we are just getting a lot of emails. During the day and we read them when we have time for that. But, it's really nice to notify, users about, upcoming emails, and usually it's, already, done. Usually we do that with their pages or some other visual. Notifications, but with the screen reader we, can use a live region technique in order to update screen, reader user suppose incoming emails let's, see how that works, I, saw. A croc I will focus on the update email button now. Click. It, and start reading a text that's. A big email my. Mom always said life is like a box of chocolates you never know what you're gonna get you have one unread message you and. What happened now I click, the button updating. Mail and then I started, doing something on the page in, this case I simply started, reading, the text and then at some point and, you know a new email came, and, I. Didn't. Want to notify, my users immediately because, it's not that important, right it's. More important, to make a user. Experience, in the page as smooth as possible so, interrupt users it's not a good practice but it's, nice practice, to notify. Users. Politely. That. Yes, now you have a new message and with a screen reader case I simply use a live, agent technique, and I really, live with a tribute polite and one screen reader decided, that it's time to update screen reader users with new information, it simply pronounced at you you now have one unread. Message, which, is good for. Our next. Example oh, sorry. Email. Is not the only case when, you can use life regen technique for example if you have a couple of like. Different widgets, on your web page for example a weather widget if weather. Is changed. It's nice maybe to notify, users that hey the weather is now different. So it's kind of good. Way of doing that of updating, users or if, you. Have. Widget. About a stock market some I don't. Know how much. Some papers cost or whatever I'm, not really, deep in that topic so it's nice to update. Users, when some, values in this videos are changed or maybe if we have a sport, widget, and we are, following. Some much, life, it's nice to mattify users, when desk, we stitched so you can use your like. Imagination. And implement, this practice in any case in your website so just be. A little bit more. Creative. And this technique will work for you the, next example is a registration. Form, that's. A really common practice, because we used forms, a lot in our webpages either it can be a registration, page login, pager, form. Sorry or any other form on the page you can implement this. Practices, I'm going to talk about now for. Every form and, what. Is good about this form that we will, use both, technique. In the combination, so let's. See how that works first so. I'm starting, a screen with a friend and, now my goal is to, register. Register. To, a website and now I need to. Fill. Two. Inputs, with email and with a password so now I click top and I focus on email first you. Know any text. Application. Okay, and now I need to enter my email and. Let's. Say I. Comma. C oh and. Look, now I made. An a mistake. On purpose. But let's say we don't, know about that and now we want to jump. To the password but instead, of sending this wrong email to the server and then validate it there usually what, we do in our websites, we validate. We are validating in, the browser these kind of simple things we can validate in the browser and we can do it for example on the blue, event. Look now I'm licking tap again and jumping to the password and what happens now. What. Happens now we. Validated. In. An email and we figured, out that it's wrong and now we need to show user notify, users that email is wrong, usually, we need it with the text. Validation. Text and also we used. A red color to show. That this kind of important this is an error it's not gonna work and now we, updated screen reader with.
By. Using a live region technique, with the text, of notification, now it's gonna be there users know that there's an error and, now I want to fix it there I simply, click shift up to a little bit mr., nail. Some. Text. And. Change comma, 2 .. L Korean. Oops, comma. Period, L, good. And now I clicked, up again and jump. To the password field, password. Please use at least one character one number one symbol and keep your accounts for at least eight characters long secure. Data text well I call it when. We jump. To the password field and when email is valid you sure that screenreader pronounce not only a label, of this field like a password but, also pronounce, some additional, text about what password. We expect, and what, are the rules for the passwords, and we see that now we need to use at least one character one number symbol and also, keep, the. Passport long enough and now I'm starting. Typing, my password for now, I will simply. Type Latin. Latin, letters, there. In a pattern, very. Matter what's. Happening, now on the every keystroke we, are making a validation, for password, and we updating, users immediately, so in. Addition to using for example a blue event, we can use any. Other events, like keydown event in this in this case so we can use, a key press or any other update. Event and this. Way we simply checking, the password, every, after. After. Every keystroke validating. It and notifying, users just immediately, ok now I will type a number. Now. It's not all not, bad already. But still not that good and now I will type a symbol. And. Now, I will make my password eight characters, long good, password good, password good, password, great password so, now it's good, enough and now I'm going to jump, to the button register and click it register, button I click. The registration, button, press. Register button. There's. One validation, error both left dizzy now is already registered please try another one so. What happened now we, clicked, register. Button and then there. Was a request to the server and then we. Figured out that this email was already used and, in order. To notify, our users, of. This error first of all we displayed. A visual notification. So now there is a visual confirmation, that we have an error and this. Error also is explained there so now. People. Who see the screen they know about that but for a screen reader users, we made. This. Validation. Text focusable, and we moved a focus, there and please. Make sure that we put this element. With the validation text, before form, and I did it in we, did on, purpose, because look now we have a focus, on the. Validation. Text and we already know what is this text about because can be there pronounced, everything. And now, in order to jump back to the form and change. Our Amahle you simply to click top, key one time so, we put a. Text, focusable. Validation, text before forum and user, experience is. Really nice because of that look I click on top. And. I am in the email filter and now I'm changing my mail and. Of. T-h-e. Or and. Then click. Register button, characters. Register button. Press. Register button. You. Have been successfully, registered and here. We used a simple, life regen technique in order to notify users about, successful, registration. Voiceover. Off and this. How, our with a simple. HTML. Javascript. And area. We made the, complex, form. Accessible. For all the users which is really nice in the last example for. Today let's. Take a look how we can notify, users. When. We applauding, the file from them. On. The website for example if your right email you can attach some file so this file. Uploading, is quite common technique. And. There, is a lot of things we can notify users, about let's. Click the button upload file and see how that works. Application. Click, it 0. 10 % loaded. 60%, loaded, 86%. 100%. File document, ATF was successfully, located and. After. We clicked a button upload, file a lot of things happens first of all screen reader told us that we are clicked, button. Then, uploading. Started, and then, screen, reader notified, us that yes now we are plotting a file and then screen, reader constantly, notify us about the status, of this applauding, like, 10%, level that 50%, level at 90%, level and once file, was loaded, we displayed a notification, visual. And screen video notification.
With, The confirmation text and now this, component. Is ready to be used by all the users isaura. And. That's. Pretty much it, what I wanted to show you today and let's. Recap what we covered, today, first of all informing, users is quite important, thing our users. Should. Feel. Comfortable on. The websites and we can make, a user experience much. Better by, notifying users and informing. Users about everything, that's happening and in. Order to control a screen reader for screen reader users there are two techniques first technique it's a live region technique for example we can use a real-life attribute with a polite or assertive, value, or, we. Can use a focus, control technique, in order to not only control, a screen reader but making user experience, better, if. You want to know more information about. Accessibility. I would recommend you to read one of them. Official. Documentation, sites about. Accessibility, and this side. It. Contains, a lot of small, examples, with the source code and some explanation, some references. To. Accessibility. Rules, which is really nice I use this website a lot every day every, day basis if, you don't, know anything about accessibility, I would recommend to start with a book. Accessibility, for everyone written, by Lau or a call back you will get more than enough information in, order to start making accessible, components and also. For a little, bit more advanced. Developers. I'd recommend to check out inclusive component, website made, by hidden pickering, in. This side here. Created a list of elements and he made them accessible. And not only made them accessible, and showed, it, in the demo examples but also explained, how and. Why he used, different. Accessibility, techniques and that's. Pretty much it thank you very much and if, you have any questions. I will, be glad to answer and also, I will publish, these. Slides. In. The Twitter somewhere, you will find it so, you have.
All The links that's. Pretty much it thank, you. Thanks. I'll. Give you a chance to catch your breath, we. Did have a couple questions for, you. One, of them was how, do you decide, when something, is polite. Versus. Assertive, for, screen reader users oh, that's, a good question, I have, a simple, rule for myself it's my own rule I I, don't know maybe it's not actually my rule but I use it I figured. It out myself for, me everything is polite and assertive. Is only, when you really, need to. Disturb. People and notify, about important, things, that's. A thing, so, I use polite and. If. Some. Cases, if. I have some cases on the website very important, stuff like error messages, and stuff I use assertive, but usually it's really rare case. And. I have a question I'm not sure how to frame this but is there a use case for, programming. The. Voice on the voice over to, have a different, tone or inflection, or a whole different voice when a notification pops, up oh. Good. Question. I. Have. Never used it and I'm pretty sure that it's not possible at the moment but. Maybe, I'm wrong because I have, I have never had this goal to control something usually what I'm doing when I want to control somehow a, speech. For, example if you use two. Sentences. And you can catenate them and use like one screenreader. How. To say it a session, once can be there start something and end something like a channel. Usually, if you don't use a comma or period, between. It's really like a fast and you will never figure. Out the differences, so for example if I want to have skin, video to stop something at least for some time of a kind of pose, I use either one period or two. Or three even then screen readers can. Kind. Of identify these kind of things but about intonation. I'm not true, usually. They are really smart to pronounce like. Question. Intonation or statement, intonation but.
I. Don't, know probably. There is nothing, about like really controlling that okay, so, punctuation, seems. Pretty important, I use portation a lot for example in the passport full edition there. Is a label, like a passport and there is a password, rules and what, I did I put a column in this case or. I could I could put a like, a period and this convener would say password, and you need to blah blah blah rules right in, to follow those. So. Because. I've noticed that screen readers will sometimes ignore things like when it's installed. Control. That then. Yeah. I guess, there's, nothing but I would, say if, screen reader tells. Everything. This. Is a really like 80%, 90% done, and now we are talking about like a chair on the top right oh it's nice to have it but, I would, say I. Know, a couple of blind people and, they told me that they just used to use, it they. Know House can either works and is conveyed or does something it they, are know already, the tool. Also. Is. There a suggested. Pause link, in between, an announcement, verses other elements, on the page I'm sorry, could you please repeat the question is. There a suggested. Pause length. Between. An announcement, versus other elements, on the page I don't, know. I'm, not sure, don't cannot say anything about that because I. Didn't. Actually have that question for myself I. Don't know okay. Adrian, asked, here, on the chat, how about hidden, inputs. In sections. When do you use them and. He's talking about Aria, hidden only hidden for screen readers. Not. Visually. Do, you mean something. That is visually. Present. On the page birds convenors are ignoring that right or backwards, the. First. At. First I used, this, technique for icons for example if. Let's. Say our send email button, right, remember it is like a text and icon, I used. A roll presentation. Which literally, means for screen reader just don't pronounce it I use. The icon, there it. Like. Technically. It's an image this can either have, something. About image but I explicitly, told him it's. Just for, making. Stuff beautiful nothing more for, example this one what else. Can. You remember it I use, it sometimes I most. Often I use like backwards head technique for hiding, stuff what make it pronounceable. A screen reader and, readable. Sure. I don't know how to say this person's, name but, they're. Asking are there any special techniques. Or considerations. For using Aria live, with. Asynchronous, elements. Inside a shadow DOM.
Maybe. I'm not, the best person to ask about that because I, usually use. The simplest, technique I can find and shadow Dom is something that's it's quite complex. I don't, know. Never. Used it. Seems. Like I don't know how to answer any questions today, right I. Just. I, don't. Know maybe, more practical, person. Than theoretical, because for me if shadow Dom doesn't bring a value for me in my userís I don't use that. Sure sure. Um, Carrie. Asked. Do. You run into issues with different screen, readers when it comes to announcements. Or. Behaving. Vastly, different from others yeah. That's. A that's. An, issue actually because, I can tell the short story I was. Working. For one project. And. This project from, the beginning had really, strong. Accessibility, requirements, like a double-a and we, had to achieve it and I. Did. Like almost, all the job because I was quite a fun of this topic and I it was nice in my voiceover, and mag but then there. Was a person, like. A third party person who, simply, tested, our website. For accessibility, and I got back, a couple of errors. And I tested them and it worked for me in my, voiceover. And Mach and then I figured out that he is talking about jaws or a video for example and there's something for, me the biggest issue is when you're trying to control a focus for, example Safari. Or Firefox there. Are some problems not, problems they are handling. Focus. Move, differently. And once. A new, element gets a focus different browser who promotes different thing things, and sometimes they won't even pronounce, that's, a thing that's the biggest, issue for me at least and I. Do. Like a lot of stuff. Like. A hacks, or work around an order to fix that problem but sometimes. The, problem is solving by checking, one, checkbox and into them, inside. The for examples, browser settings, in Safari for example. So. Browsers. Are different yes focus. Move it's a one technique, then, I. Really. Build by, it. Doesn't work smoothly on all, the. Browsers. In. My, voiceover. You. Can add area labeled by to any element and it's gonna work in, different browsers is on the interactive, elements like a button or. Form, elements a, so. It's important, to test it's important, yes, you. Have a recommended, set of screen, readers to test with oh yeah. Sure. If. You use a Mac you. Don't have a choice, you use, a voiceover, and it's not, that complex, as you can think, about because, it's. Yeah, you will spend, some. Time to figure out what to do but the, main. Thing is to make. It, comfortable for you and actually. Some, years ago maybe last year I guess it, was I even gave, a talk. In the conference, about how to use, basic, screen with your options for accessibility testing, and give some suggestions. How to get. Use of it so Mac and, voice or. Then. If you use Windows you. Can use either NVDA, which is free and it's. Quite popular it's a second place by popularity and a. Lot of people use it it's, not that perfect inferencing. Stuff and you need to set it up because it comes with a really little, set of settings you need to maybe set, it up for your needs but, it works quite nice and, also. You can use Joe's but Joe's has a couple of problems first of all really expensive it's. In. Germany, it's, more than thousand, thousand, and two, hundred years. So. It's quite a thing right but, you can use it for free for 40 minutes and then you can reload the, system. And use it again or. What. We did, in our company. We requested, from the company to buy us a small, USB, dongle it's a simple, security. Key in this USB so, you don't know Joe's you install but it doesn't work because needs authorization right, and then you plug, in this dongle and you, use it and it. Costed for us yes. 1200. I guess but we are many developers, using that so it works its steam you don't have to buy it every time and. Developers can use only one security. Team which works. It, looks like Adrienne might, have a question but they're. Still typing, so we'll see, how. That goes. Wow they're, typing I just wanted to make oh here we go there's. A known bug in Firefox, the, focus, doesn't. Focus on anchor links, yes yes. Yes I know that. This. That's, a common thing I, don't. Know what to do with that because. There. Are some in. This case it's a buck in Safari case it's a ver, vision. How they see you, cannot focus on links, without. Checking. In a chat box these are kind of things yeah I do agree, that there are some stuff in other browsers. I don't. Know wait for fixing. And that's it nothing. New like um. Can, you wrap it in a button to get around that issue yeah. Of course and that's what I did a couple of times but this can be the real pronounce it it's a button right, yeah.
But For me if skin Veeder is pronouncing, something that as a button but this is a link it's already better if you give a proper, description. In the label, or hidden label or whatever, like. Wherever you put this text because the main thing for users to know what this element, does yes. Semantically. It should be linked. But it's a button and it's. It's. Not the biggest problem, if by. Focusing, on the button you know what this button does it's okay why. Why, can't you just add. A URL and, say something hey this is a kind, of link and it's gonna, redirect. You to this URL HTTP. Blah blah blah blah blah so. Even, this solution would work I would. Say it a hug but. Yeah. Adrian, clarified. That their rule was buttons, perform, actions, links lead to new page paths it's okay to have buttons that look like links and links that look like buttons but always following, XS, ability rules Aria, role semantics, that's. What, I wouldn't, wrap in a button so, you. Know yeah. As, I said it's a hawk if there, is a goal -. Yeah. Totally makes sense for me that's my rule personal, rule I would. Prefer I, don't know maybe I will search, for another solution, but. You. Can use that button right but what Adrian, says now I'm totally agree with that because, everything. Which does action it's a button and in. 80%, of, cases it's a button and the, rest is a link and you need to be sure. That, your link is not only a link like an anchor tag but also it has a proper, edge ref even, if you use a handlers, for that for example in. My. Current project we are using react. And you cannot simply click a link as a regular. Link because you need to handle the routing right application, routing you don't have to reload the page and, what. We are doing we are using href. Like, a, real. URL two times first, of all we put it in. Href. Which. Doesn't make sense in the single page application, but we do it only for screen readers because screen, reader users can access that URL right and once, you click this. Button or, link we. Prevent, this. Event. Do, something, and then do simple, react, routing. And that's it so we, are kinda making. The same job twice but for screen reader users it's works really nice I. Totally. Agree with the drill. Good. So. It, doesn't look like there's. Any more questions, I wanted, to change one. It. Says server, size that's, when server-side. Rendering comes in and boom welcome, to front-end development. Do. You have any parting, words Sergei. No. Thank you very much for having me today thank. You for. For. Presenting, I want, everyone to know that the links will be available, on, YouTube on, the YouTube video when it's stood on line later this week and remember, to join us next month to talk about all things accessibility. And. I wanted to kind of give a shout out that we're always recruiting for, new speakers, we, make a conscious effort to include marginalised. Groups and our intech. In our Meetup, so, please, let us know if you have any ideas on how we can make ally. Talks more friendly to everyone and we want to continue the conversation and the questions, and so if you want have any more questions, or people, who watch the YouTube video later, want. To, call. Out questions, on Twitter, just use the hashtag. A11y. Ta. LK s and we can continue, the conversation in. The, days to come so. Thank you see you're gay, thank. You okay. Enjoy. Enjoy, the Alps. Go. To the Ring. Well. Is it better to hike in the snow or the rain I prefer. Sun, I. Think. All of us do rainy or would you like for two weeks. Yeah. Well, you know that's how we get our flowers and our water so. Yeah. Think positive. Thank. You okay thank you.
2019-05-30