 Thank you Okay A half year ago. I decided to do a talk at work camp Europe and I thought what should I talk about? Not always the same story. I want something new and I asked it to my fellow humans at human made. What shall I talk about and then the Honoural and Miller? He said accessibility in the age of the headless CMS and And I thought that's a great topic. That's new something. I don't know much about so let's research that so I start reading up and Looking at websites one page websites and then I realized oh My god, I need to learn react and that's really way out of my comfort zone So I studied learning react I'm not an expert. I'm really a beginner. We have the real experts in our firm But I have a lot got a lot of support and while learning I discovered there are three topics. I need to address One is the dome what really is served to the user The other is dynamic content. That's where the real fun is things changing dynamically on the site and The last topic is progressive enhancement So I want you go to go through all those three during my talk. I want you to sit back and relax All text and links is on a blog post Rianne Riedfeld.com. That's my name Rianne Riedfeld.com WC EU 70 so you can find there and also the link to the slides and the link to a github repository First the dumb What's the dumb? If you are a developer you inspect your page and Then you see the processed HTML 5 the CSS and the JavaScript and that's the API that served to your browser Not only to your browser, but all devices that interact with the website So that's the dumb Code is poetry. We know that This is a slogan for WordPress And we take great effort to make the code as good as possible If you take yourself seriously as a developer you validate your code for PHP standards If you work on bigger projects, maybe VIP standards, you validate your JavaScript So why don't we completely forget what ends up in the dumb? That's like a forgotten child We take great pride in documenting or PHP But we totally forget what ends up in the dumb, but that's what served to the user So this is a tweet by Omar Always great to see Rianne Riedfeld rant About the lack of semantic HTML and here it goes Start ranting Get out of your JavaScript bubble Don't JavaScript all the things Okay, when I was learning react I was taking online courses. I was looking stuff up on github repositories I was googling and finding myself on Stack Overflow and What I found on code that people push into the dumb is horrific It's like nobody cares It works with your eyes and with your mouse and if the code is really Semantically corrected to have meaning. It's like a forgotten craft This is what I found in an online course I followed This is a list element From a menu The CSS is inline coded into the JavaScript and there's an on click on the list element These are two wrong things Don't put inline JavaScript inline CSS That's a fundamental rule since the 90s. We have style sheets So at your CSS not in the JavaScript, but in the style sheet and An L E and on click on a list element only works with the mouse Or you have to add a lot of JavaScript to actually make it work But why don't you use just a link instead of a list element? This is what I found on Stack Overflow It's rendering in a diff a function that renders a diff, okay I can understand that but then there's always all then inside There's a diff and inside the diff inline style even style that's static that doesn't change and Also an on click an on click on a diff doesn't work So I made my first react app I Want to show it to you This is code I took from a course and Here are the list elements inside of the on click from the tabs is inside list elements And it works with the mouse if you click it works But if you use the tab key to Go to the I have to tap tap tap Then it doesn't get focused menu get focused because it's the react the Facebook react router But the menu gets skipped so someone who uses a keyboard only only can read the first tap It only counts for people who are using a screen reader or every other device that uses your website So this is wrong. I made one that works and here you see The elements get focus with keyword only. It's just a way on adding a link Making the code semantically correct so I Signed the code of conduct So I cannot swear here But please for crying out loud a Diff and a span do not get keyword focus It doesn't work without a mouse Use an a an anchor for change of location and use a button to invoke an action Because then you get all the functionality for free and it works just works for every device I want to give you an assignment While you're learning JavaScript deeply Learn HTML 5 deeply because that's what served to the user The user doesn't care how good your JavaScripts are The user does care if she can use your website There is a wonderful website HTML 5 doctor.com and There you can see all the elements what they are used for and you can read blog posts About recent Developments and these websites are maintained by the people who also maintain the The HTML 5 specs. So this is really good information If you can learn react HTML 5 is easy But that's what served to your user So it's important Code is poetry Take pride in your workmanship and run Thank you So what should you do validated them? You can do that very easily online By the HTML 5 editor and the CSS validator from the W3C But I'm really fond of the X accessibility validator X can be used as a browser extension or as an npm module to integrate your grant or a GoPro thing And it gives you very good Errors or warnings what things are wrong accessibility wise, but also in the semantics of your code So I want to demonstrate this to you So on the website of WordPress org Because that's us What I did I Installed the browser extension in Chrome No, wrong one, sorry And I inspect the page And what it does it adds a tap to your inspector if you are programming react You probably have already the react tap to inspect your components But X also adds a tap and you can Analyze your page for errors. So if I analyze WordPress org Can you see it a bit? There are three different errors Images must have alternative text On the WordPress org website. There are three images without alternative text. This is basic and In five minutes solved There are elements without in service in a not enough color contrast between text and background If you are a designer you can make other decisions that that will meet the requirements And there's a button Search button without value. So someone with a screen reader doesn't know What the button does It also gives you which violations there are Of which rules here the violations are against like a button without a value is wake up to a basic accessibility And it also gives you why it is and why it is a link to the specifications and also a link to where The violation is in your code So this is where you're building a website a very good way to check if you're checking your react You can also check the accessibility So let's try WordCamp This site how long can you stand this walking looking at the movement Without getting really distracted movement must be stoppable Just say okay Okay, I analyze And I got a lot of violations So the next for next year, I want all these violations gone. Okay. This is how you test Then the dynamic changes and that's well really where the fun is That's why we built in react in a JavaScript to make things changeable to have a one-page website and load the data in with the REST API and Manipulate it and it will be very fast and beautiful and shiny and app like but If something dynamically changes on the site and you cannot see How can you know what's changing? There are special attributes developed by the W3C called ARIA accessible rich internet applications and There are attributes you can add to your elements to give extra information to screen reader users or other assisted technology very useful, but First rule of area Don't use area That's very contradicting But there's really a trend to fix broken stuff or non accessible stuff by adding just a lot of area and hope for the best That's what area is not intended for Area is intended for giving feedback What's happening on the page if you cannot see it will be announced to you What does it mean? How can I interact? Give extra information to assistive technology. It's not for fixing broken stuff There are very useful area attributes like area hidden is true If you want to hide something from a screen reader or For example area required is true for an input field then the screen reader will announce this field is required But for dynamic content The useful area attribute is area live You put it in an element and what changes dynamically inside the element will be announced by the screen reader You have two different ones area live is polite Then it waits announcing until the user stops typing typing or interacting and you have area live Assertive then it's in your face when someone types of it immediately announced changes when they happen What which one you use depends on the application you're building I want to demonstrate this and I hope this works. I Made a video. Oh wait, I can stay in Okay This is an example. I stole from gray Marfield. Sorry What it does you type the name of a length of a country in the input field and Then the country list below gives you the ones who match and this is done dynamically, so When you type things change So I try to Search countries list edit text six countries matched your search string Three countries matched your search string 6196 countries matched your search string Three countries matched your search string one countries matched your search string So if you enter a few letters Then it says okay, so many countries match your search string You can hear it, and also see it, and this is done by ARIA Live. Very useful. Another application is a menu open or closed, if content hidden or exposed. This is the menu of WordCamp Europe, closed and open. If you can see, you see, okay, the menu is open, but it can also be announced to you if a menu is open or closed. That's with ARIA expanded. You put that on the button, and it tells if the button toggle, if what it toggles, it's expanded or not. And then you can read from there if you open the toggle, or you can decide not to open it. So here it is. If I click the create quote, it will announce if the content is open or not. I hope it works. Great quote, collapsed button mean one item. Collapsed. Great quote, expanded button. Oh, sorry. I'll do it again. Great quote, collapsed button mean one item. Great quote, expanded button. And then you can read further if you want. Great quote, expanded button. Make our planet great again. M-dash. Emmanuel Macron. Emmanuel Macron on YouTube image. Make our planet great again. You're president. Excellent. So that's ARIA. The last topic I want to address is progressive enhancement. Because if you JavaScript all the things, you put everything, the CSS, all the HTML in the JavaScript, what will that mean? Look at your site. Progressive enhancement means content first. You first serve the content. Then you add the presentation with the CSS. And after that, the client-side scripting. So this means first the HTML, then the CSS, and after that the JavaScript. But that can be very difficult for dynamic pages, where also the JavaScript of the content is very depending on the JavaScript. So think by yourself, does it all happen if div ID is up? Does everything has to wait until the JavaScript kicks in? If you have a slow connection or are you in the metro, for example, then you have to stare at the screen for a few seconds and then your visitors will be gone. So what should you do? Look at your site. What is static and what is dynamic? And make a decision. This should be in HTML5, just static. And what should be dynamic? Build your HTML5 framework first. After that, add the CSS kicks in. So you have to have the CSS separate and out of the JavaScript because HTML5 loads very fast. Then the CSS kicks in and the user sees the Mac up and decide what changes dynamically and add that as components to your site and also serve initial content. So make it so that the user already has something to see. And then you can replace that content by your React or whatever JavaScript framework you're choosing to do. This is essential. Serve your user first. These are the HTML5 design principles from the W3C. Users over authors, over implementers, over specifiers, over theoretically purity. Your user first. Are you building this big, fancy app and you're really proud of it and you've got a high status as really good JavaScript developer? And you're totally ignoring what's in the HTML or how your user will experience your website. Who are you serving? The user or your ego? I think that's the main thing at the moment. This is a Dutch tile. Yeah, Josie's laughing. Niet onder dat moet, maar onder dat kan. And that means not because you must, but because you can. Look what I can do. I can build this very complicated app. Not because I must, but because I can and I want to show off. I was making these slides and my son was looking over my shoulder. And he said, oh, but that's a quote from Jurassic Park. I said, really? Yeah. And then we looked it up on YouTube and actually it is. So here for some eye candy. Jeff Goldblum. Developers are so preoccupied with whether or not they could that they didn't stop to think if they should. Don't create a monster. Code is poetry. Write a poem with your HTML5. Thank you. Thank you so much. We are so lucky to have people who have the expertise and also the courage to stand up and and tell us the direction that we all kind of know we need to go in. But thank you so much for guiding us through this work. Now I invite questions on the floor. The microphones are here and here. And we have our first question. Yes, please. No, there we go. Hi, Jan. Great talk. Thank you. Music to my ears. I have a question because not everyone here is making their own themes or CSS. And is there a way when people buy themes on like online stores, if they can check whether they're coded well for accessibility? Well, I think the only way to do it is install it and try it out and use, for example, X to see if there are basic errors in it. There is an accessibility ready tag. If you download a theme from the repository and with WordPress, and those themes are checked for basic accessibility issues. So if you want a good start, try to find a theme with the accessibility ready tag. And that doesn't mean that it addresses all accessibility issues, but the basic errors are out. And then you can test further with, for example, X, how to get it perfect if you want to build on that theme. Thank you. OK. OK, another question there. Is that Graham? Do you want to pop up to the microphone? That would be awesome. Hi, Graham. Hello, Rianne. Thanks very much for the talk. Great talk, as always. When you were talking about React, I know nothing at all about React, really. You showed some examples of things that weren't that good in React. How easy is it to get it right when you're using React? Is it a lot of work to actually put the right elements in? My experience is don't Google too much on Stack Overflow, for examples, but really write the HTML first. What you really want to put into the DOM, really write that first and build your components on that. And study area. If something changes dynamically, like it's been, does it announce well? If you really want to dig deep into React, you can go with me to the expert bar, and I have Rianne with me to answer all the questions. But I'm learning React like I think most of you do. But what I learned is what ends up in the DOM is really important. So take pride in that. And also try to study something about area. If you can learn React, area isn't that hard. It's just elements you can add to your code. And I have a GitHub repository I made. It's in the link from the blog post I wrote. And there I've got some examples about use of area. And also, in the blog post, there are links to good information, like example widgets and examples in the specs. Thank you so much, Rianne. OK, thanks. Yes, a question over there? Go on, Tom. Hello. I'm Tom Noel. Thank you for a really interesting talk. I'm really interested in doing a lot more of React. And I never thought too much about accessibility. And it came to these, so we were me. But you mentioned Stack Overflow. I'm a Stack Exchange moderator. And I just want to mention one or two things that many people aren't aware of. So you're on Stack Overflow, and you see an answer. And it does the job, but it doesn't really poorly, say, it introduces all these other problems. We get a lot of these where someone answers, and there's a problem, and it fixes it for them, but they don't realize it will only work for 10 visitors on their site at any one time. And then there's several full-label, or something else like that. So in these cases, sometimes, especially on stackoverflow.com, you can't just answer yourself and then expect that to rise to the top, because that answer might already have, like, 1,000 of votes. So there is an alternative that not many people are aware of. Maybe they don't see it immediately, but you can edit your own answers, but you can also edit other people's answers and other people's questions. Oh! Yes! With great power comes great responsibility. And the thing that most people aren't aware of on Stack Exchange is that that power is gifted to you over time as your reputation increases. So, for example, if you have 300 reputation, which is really easy to get, you can vote moderators in, you can do a lot of things that a lot of people wouldn't expect to be able to do, and one of those things is editing other people's answers. You then go through an approval queue, so somebody else looks at it first and approves it or rejects it, maybe makes their own changes, so you can't just go in there and say, this is my website, it's amazing, you should go here instead. But that is an option. And if you have enough reputation, then you can just edit it outright. So you can actually edit wrong answers instead of a flow if your reputation is good enough? Is that what you want to say? So, for example, at the moment, I am a moderator in the WordPress Stack Exchange, but before I became a moderator, I had enough reputation that I could go in and I could fix things like typos, formatting and other changes. At that point, other people can go through and see exactly what you've changed. So if you've ever had your answers edited or your questions edited, do you know exactly who did it and what they did? And you can see some interesting things sometimes where they've then gone back and changed it back. Well, that's really helpful because when you Google Stack Overflow onClickDiff, you get so many answers of people who are creatively adding an onClick on a diff, and nobody actually says, well, use a button because you get it all for free. So it's like there's a lot of lack of knowledge of really semantic HTML. And yeah, how do you get a good reputation? Just answer a lot of good questions, give good answers. If you ask a question and it's voted up, you get reputation. If you ask a question and you mark an answer is correct, you get rep. Okay, now everybody study HTML5 deeply and go to Stack Overflow and correct all the answers that are wrong. Your answer doesn't have to be marked as the answer as long as it has some upvotes, you'll get reputation. The other thing is you can downvote questions that get it wrong and you can comment on them and people can vote your question up. So you have some time to have answers and it'll be the correct answer, but it will have lots of problems and there'll be a comment underneath saying, no, you really don't wanna use this, use the one below, it's terrible. Okay, thank you. You're just handing out superpowers here, so thank you very much indeed, Tom. We have another question from the floor over here, yes. Hi, thank you very much for your talk, it's really interesting. As a dev, often I will think about accessibility and screen readers and things, but then I won't ever be able to practically test it. What's the easiest way to get a screen reader, which is the best screen reader to do the kind of examples like you had? Test your work? Yeah, as they like to get a screen reader to actually read it back to me to make sure it works. No, I'm really not a good screen reader user, I use VoiceOver to test stuff and it must be announced well in VoiceOver. Well, actually the first thing I do for testing is keyboard testing, see if I can access everything with keyboard and for VoiceOver, I use VoiceOver to see if it actually is announced well in the right order and if all the things I want to change are announced and work. If you want really good advice on how to test with screen readers, you can see Graham Armfield is over there. He knows a lot and Adrian Ruselli, who is in the Nest talk, he knows a lot too. So maybe they will join you later in the happiness bar. Yeah, maybe you guys could all be together at the expert bar later to share expertise, that's probably a good idea. In fact, so could Adrian, Graham, do you want to just stand up and wave so people can see you? There we go. We'll be seeing Adrian very shortly anyway. Adrian will give a talk after this. Okay. Okay, any more quick? You know, I've got a question for those guys, actually. Okay. Okay, quick show of hands. Who's already doing a fair amount of work in React? Okay. If the people in this room, between now and the next word camp, how many of you expect to go through a similar journey to Rian in terms of exploring more React? Be honest, maybe a few more. Rian's done a lot of this journey and she's done it with the most important things in the world in mind. This is a trail that has been blazed that is a benefit for all of us. So let's follow and do our best to follow in your footsteps. I'm going to call it at this point, I think, and if there's any more questions on the floor, you'll be at the expert bar. We will be followed in 25 minutes with Adrian looking at selfish accessibility because it's all well and good being as altruistic as we are being on stage right now, but selfish accessibility will get you even further. Thank you very much for now. Thank you, Rian. Okay. Thank you to our question.