 All right. Can you see my slides? Yeah, awesome. So welcome, it's going on. Awesome. So my talk is about accessible design. And I will say sometimes Ali because accessibility is such a long name. And this is because there are 11 letters between the A and the Y. So we just say the 11 and say Ali. So for who is accessibility important? There are different kind of disabilities. For example, cognitive disabilities, which can contain autism, learning disabilities, but also anxiety or epilepsy. There are also physical disabilities where the mobility is limited. So you have maybe struggles to use a mouse or the keyboard. And this also contains audio disabilities where, for example, are deaf or in a really noisy environment and you have kind of troubles to hear the sound of your computer. And visual disabilities can contain blindness, but also color blindness, which are 8% of all men. Then there's also the group between temporary disabilities and permanently disabilities. Permanently disabilities are every kind of things like color blindness where you have it, like permanently. And temporary disabilities can be like you're broken your arm or you're using the screen in a really bright sunlight and you have struggles to see the screen or where you're eating in front of a computer, which we all do sometimes. So every fifth person has struggles to use the internet in one kind of a way. So why is this important for us as a WordPress community? For people without disabilities, technology makes things easier. For people with disabilities, technology makes things possible. This is a quote from 1991 and it's still actual. It's still really important. And we as web designers and web developers, we're creating the web or the landscape of the web. We are responsible how the people can interact with our websites. And especially as a WordPress community, where WordPress right now is 30% of the internet, we have a really big, important responsibility and also influence in the landscape of the website. So we should make sure that everyone can use our website and are not excluded from the task they want to do, from the communication they want to do with the society. So accessibility is for everyone because if a website is accessible, it also helps the people who are not actually needed. And if you want to get deeper in this kind of subject, I can really recommend a talk from last year from Selfish Accessibility from Adrian Rosilli. Like over there. Hey. So what is accessible design? Accessible design supports the content, supports the functionality and provide access to everyone. And a good example where you actually can see where a design is not accessible and breaks the functionality is this batch. It's a batch from a WordCam several years ago and every attendee got a Wi-Fi access on the batch. And there were also a password. The password contains lower and uppercase letters, but the phone itself only had uppercase letters. So you were not able to use the password and you not even can guess it. So the result was that the WordCam team had to reprint all the passwords in a phone which are not uppercase only that you actually can use the password, which was kind of a hassle. So please always have this in mind that a design has to support the functionality and that you don't break it and please don't do this. So I want to come on some most common mistakes and best practices. The really important part is use of color in the Internet. So many times I see that the color is the only indicator for information or functionality. This is not really a good thing. You should always add a style or a shape beside the color. For example, here I have a graph. Can you see the dot? We are on the one side. I only have colors and the indicator. And it's quite hard to see the difference between the green and the blue, even if you're not colorblind. But if you're at the shapes, it's much more obvious where the graph goes. But if you see this in grayscale, it's kind of impossible to see the graph and to actually use the graphic. So it's better to add a shape that everyone can still use the graph, even if you can't see the colors. Or if you see them differently, then a person with auto color blindness can see them. A really good example is Trello. They added styles to the labels so you can add them and still use them if you don't see the colors. Another point is links. I see it really often that links are not underlined anymore if they're contained in text, which is a really big problem because for me, as a person who can see colors, I have to guess, is this just a highlighting word or is this a link? And I have to get over with my mouse. But for a person who can't see colors, they actually don't see a link. So they can't use the functionality which is there. So it's always better to underline the links because then it's much more obvious this is a link. If you really don't want to use underlined links because you don't like them, you can get a bit creative and try to find other styles and other ways to make a link visible. For example, you can say link and then write the link and make it stand alone. So it's kind of obvious. Or if you don't have the control over the style of the link, for example, on meetup.com, like if you're running WordPress Meetup, maybe you know the sassel, you can't style them on your own. So you can, for example, add a little arrow or just write a whole link like Ms. www or HTTPS to make sure everyone can see this as a link. When it comes to colors, there's also the point with low color contrast and a high color contrast. So usually or sometimes the color contrast is way too low. So people with a visual impairment, also if they use the screen in the bright sunlight, are not able to use something or to read something. For example, this, I don't know if you can see this. It's quite hard to read the one side. But if you have a strong color contrast, it's much easier to see the content. And I mean, this is the point, if you're writing text, you want that the readers can actually read the text what you're writing. So please make sure that your design supports this and that you have a strong color contrast. Also, if you choose colors, for example, for button hovers, or if you want to show a functionality, if you can see colors, the difference between the red and the green or the blue and the green are quite obvious. But if your color blind, the color contrast in the grayscale are not high enough. So you can't see the difference. So if you choose colors, make sure that it also work in grayscale and you just use a darker to a darker color, that you also can see if you don't can see the colors. So the color contrast should fit the AA standard. And you can compare between 21 to one and 4.5 to one. So 21, for example, like in white, like this is the highest contrast you can reach. And you should not go lower than 4.5. It sounds a bit mathematical, but the tools that can help you. My favorite tool is the contrast checker dot com. We can just define the foreground and the background. And then you can see how the text looks like on the background. You can even set the grayscale so you can see how a color blind person maybe see it. And if you make the test, make sure the AA is green. Because then you make sure everyone can access the website and invert press core. We also use AA standard. If you're using Sketch, there's a really good plugin that I can recommend. It's called Sketch VCAG. And you can just define some colors, select them, use the plugin. And then you can see, like a seam, how your color palette is working together. So what kind of color combinations you can use, which is still accessible. Beside the colors, the typography and the font is really important for the design of a website itself. So you should always use a color font that it's easy to read. Especially handwritten fonts can be a bit tricky sometimes to greet them. You can still use them, but please choose color fonts that are easy to read and they're easy to access. There's a really good article about fonts as well. It's called Internet is becoming unreadable because of a trend towards lighter and thinner fonts. And this is true. Like sometimes I access a website with really thin, really light gray. And I'm really, I've really struggled to read this. Which is not really the point of article. So I really can recommend the article if you want to get more into the subject. There's also the problem sometimes with over-designed textiles versus a natural textile. For example, here, if you have a text and you use a lot of bold and really heavy differences, it's kind of obvious like they're really sticking out. So you can over scan them, but there can be really distracting if you read the text. So don't do it too much. And also if you use upper cases, it changed the shape of a word itself. So you have to more focus to read a word. For example, if you imagine on the word development, and they're written in lower cases, you just see at the word and you know it's development. You don't have to read every single letter. But if it's an uppercase, you have to focus more on it because it loses the natural shape of the word. So you have to put more energy in it to read it. So I would not say don't use uppercase at all, but make it really like just in short headlines and maybe some text or something, but don't do it for a whole paragraph. And really important is that you just do this over CSS and that you don't hard coding it in because screen readers will read uppercase letters as single letters. And this is also why you should use the hashtag in capitals and not in lower case, because screen readers would otherwise read like they sue or something like this. So this is not really helpful. If it comes to text, you also should structure your text and use text elements to losing up your text. For example, this is kind of the worst case for a dyslexic person because to get information out of this is quite hard because it looks like just a text block. So you really need focus to get into the text and to read it. So it's better to losing it up and using headlines and listing points. So it more looks like this and you really can focus on the most important part. And this is also really important that you use the most important part of the text. So you need to have the most important information that you have this on top and that you may be used to list for the important information and the headlines because they're really sticking out. If you structure the website, if you design the layout of a post, make sure it has a clear side structure and not a messy structure. I think this is a good example how you should not do it because you don't know where to start. You don't know where to start reading. The headline is somewhere on the one side and then it takes us on the other side so you don't know where to start, where to continue reading and where is the end. But if you have a text like this, it's really clear. You have a beginning, it's a headline. You know where you continue reading and you know where the end is. So this is a really easy access. You don't have to think much about it and it's just clear. So it's really user-friendly. If you structure your text, you, of course, using HTML elements, and it's really important that you use them in a semantic way and you don't randomly just put them somewhere where you like it because it looks nice. So you have one H1 for one side and then you continue with H2 and H3 and then you just use them how the content works. So you don't have to use H3 if there's no need for it. But please use them in their semantic way and the content defines the structure and not the design. When it comes to the internet and accessibility, links are really important. And it's really important that you use meaningful and clear links and you don't have just useless link labels like click here. I mean, why are you going when you click here? You don't have information about this. But if you write contact us or see our guidelines, this is a really clear understanding where you get if you click there. And this is important if you just scan a website and you just get over, like with a visual look, you understand contact us by if you have click here, you have to read the whole sentence before. And also if you use screen readers, you can say, please read all the links. And then if you have just like click here or read more, you're not really have information about it where to go beside you have an area label. A really good way to make a website really accessible is if you're using a mix of content formats instead of having just a single content format. For example, there are sticks, images, graphs, videos, and audio. Sometimes people prefer to use a text and some people are more visual so they prefer a graphic. But also different kind of cases need different kind of a media format. For example, if you're telling you in a field, maybe a screencast, it's much easier to understand something because you have no clue. But if you already know something about a subject and you only need one specific information, maybe you don't want to run through a whole video and you prefer the text. So always provide different kind of formats. And a really good example, for example, it's also this WordCamp because right now I talk to you but you can also read it over there. So a big applause for the captioners to make this WordCamp accessible. Like this is amazing. This is a great job. So also if you offer the way to contact you, please offer different kind of ways because different kind of users prefer different ways of contacting you. A big really important part is behavior of elements. It's really important that the user can choose the behavior and control the behavior of the elements by their own. This is especially important for sliders, audio and video. Sometimes if you open a website, a video is starting or an audio is starting and screaming on you or somebody starts talking to you and this is super annoying. But for people who have problems to stay focused, this can be so distracting that they can't use the website anymore. A really big problem is also if you have really like flashing images or flashing gifs, it can cause an epileptic kishir. So this can be a really healthy risk. So please don't do this. Don't make your website in a way that can make people sick. Links are a really common topic about this is don't use target blank. Because a user can always choose on their own if they want to open the link in the same tab or if they really want to have it in the new tab, they can select it by their own. But if you use target blank, you do the choice for them, which is not really nice. So please let the user decide what they want to do. And then it's the interesting part about potential conflicts between user groups. They are best practices and then sometimes you have some cases where it's kind of a balance between user groups. The color contrast is really important. I say don't put it too low. But the problem is if you have a text on black and white, it can be really hard for dyslexic people to read them. And for, for example, the autism spectrum, it can be super bright that they actually have problems to see it. So I would recommend to still have a high contrast, but maybe not on the edge. So maybe not black and white, but better have a dark gray on the, on the off white because it's much more comfortable to see and you still have a high contrast. Also if you use textiles like bold, italic and upper cases, it can really open up the text and it's much easier to just scan the website. But if it is dyslexic and you want to read the text, it can be really hard to, to see it, even if the bold, italic and upper cases can help if you just scan them and you may be just too lazy to read it. So if you want to use them, use them carefully. Don't put them all over the place. But yeah, it's kind of a balance. A really important fact for me is that there are fonts who are specifically designed for dyslexic people, but it doesn't help all dyslexic types. So there are two examples. Their names are dyslexia and open dyslexic. So there are people made some researches how the font can help dyslexic people to read text better and actually really helps some people, but it doesn't help every dyslexic types because they're different types. So if you want to make sure that it's more easy to read the text for everyone, I would recommend to have a large font size and a line height which is high enough that you have just wide space and you can read it. Provide easy access to the important information. Put them on top, put them in the headline, put them in this. So they are just easy to access. Don't be afraid to keep it short. Like you don't have to write 3,000 words if you can do it in 300. If you need 3,000 words to explain something really complicated, do, but don't do it just because you need more words. And use text elements like lists, headlines and so on to really structure the text. There are strategies for accessible websites. And for example, the workflow to recommend or what I do is first I set the content format. So what kind of content formats are meaningful or useful for the specific goal I want to or the content I want to show. And I try to have a mix of it. And then I create a layout in a semantic way. Like I really have a semantic in mind. For example, like this, I just add different kinds of content formats like text and video and images. And then I define what kind of headlines are important. And then you can start designing the text elements and other elements. And really important is to do it in black and white. Because if you first design everything in black and white, you can make sure that everyone who is colorblind can still access the website. And you can see potential conflicts. For example, there are some links who are not underlined. And it's a bit hard to see them in grayscale. So you can see some big points and you make sure everybody can use it. And then on the next point, you can get a bit crazy and add some colors. So here can be really creative in getting a little bit crazy because you already made sure that the color contrast is good enough for grayscale. And now you can just add the colors. And while you're all doing this, it's important that you're creating a style guide and explain what you're doing and why you did it for developers and also for the content creators who add the content. So you can make sure that the website stays accessible when the content gets created. And also like continue. I mean, usually it's a project over a few years and content is always added. So make sure you teach them. And overall strategies for accessible websites is design is not art. Design has to work. If you design something, you have to make sure that your users can use it. And if you want to create something that you like it, but maybe it's not useful, just do some art. But design is not art. Form has always follows the function. The form has to support the functionality and not the other way around. Integrate accessibility from the beginning on. If you do it on the end, it's kind of a hassle. But if you do it from the beginning and you think about it in every design decision you do, it's much more easy. It sounds a bit hard, maybe, but this is the next point. Training accessibility thinking muscle. If you're really aware of accessibility and you learn a little bit more, it gets supernatural. So if you make design decisions and you get into accessibility, it's much more natural just to make the right design decisions on the beginning. It doesn't need more time to choose colors who are accessible than just have colors who don't have a high color contrast, especially if you use the tools. Do best practice in every area you're involved in. There's a reason why we call it best practice. Maybe the most important thing is be empathic. Don't think this is not my target group. Please include people on purpose. Don't exclude them because you're too busy or something. We have the control on the end, not the whole control, but we have a big impact on the internet as web designers and web developers. So please, please, please be nice, be inclusive. Okay, of some resources I want to share. The one I really like is the cheat sheet posters from the government UK. It's called Do's and Don'ts on Designing for Accessibility. It's available on GitHub in different languages. Print them out, put them in the office, look at them. They're really awesome. Then, of course, there's from the WordPress accessibility team. We have a handbook and Sami and Rian did an amazing job. They're rewriting the whole staff in the last month. Have a look at it. It's for designers, it's for marketers, it's for developers. There's a lot of resources in it, a lot of really good tips, how you can make a website accessible, how your code can be accessible, how design should be accessible. It's a really, really good starting point. There's also a book. It's called Accessibility for Everyone. There's available in the e-book and in a printed book, which is really good. And if you have, if you want to get your weekly news about accessibility, there's a really good newsletter which is called leweekly.com. Just sign up and then every week you get really awesome content. Thank you. And I will add my slides later and I will tweet them. This is my Twitter handle, so if you're interested in my slides, you will see them there. Please. Yeah, give a warm round of applause for Maia Benke on Accessible Design. We're going to take questions now. If you have questions, just raise your hand. We have a person with a microphone coming to you. You don't have to go anywhere. Just raise your hand, stand up if you want so we can see you better if you have a question. Right there. Right there is one. Okay. Okay, a lot of the stuff that you talk about is similar to the 508 compliance that they have in the United States. I don't know if you're familiar with it, but it's for people who have visual impairments and hearing impairments. You talked a lot about the visual stuff. How does it, how do you look at things for screen readers, like people who don't can't see it all, people who are blind. Yeah, they're plug-ins or functions or features. Yeah, that's more the HTML area and area, area labels and stuff like this. And I'm more a designer, so I really do the whole design part. But there's under WordPress handbook from Accessibility. There's a lot of content. So if you're interested in this, I would just advise, have a look there. They're great content. Right, thank you. Next question. There was another one. Yes. Hi. So the question, you sort of talked about it there. Once you set it up, it's fine. But then as you go about creating the content, it's a constant struggle to ensure that it's being created in that way. What kind of tips, tricks, suggestions have you had over time for people who are creating a lot of regular ongoing content? I think the most important thing is that you work in a team and for every person accessibility is important because it's also the base, the code base has to be accessible, the content has to be accessible. So I think it's just important that in the part you work, like if you're a developer or if you're a content creator, you have to know your own stuff about accessibility. And if you know this and you care about it, it gets kind of natural to adding it. For example, I mean, the most stuff for accessibility is also important for CEO, for CEO, not CEO. So it's, you know, if you care about CEO, it's also accessible. But maybe just do the other way around, do accessible stuff and it's also good for Google. So just be aware and make it important in a team and everybody should be on the same page when it comes to accessibility. Hi, Maya. I was wondering if there is any kind of a tool we could use to test our accessibility and to basically test how these people see it? Yeah, they're different kind of tools. Right now, I don't have the name, but I can Twitter them later, but they're also all in the handbook from the accessibility team. So if you want to test the color contrast, you can just use the tool, for example, that I showed. But there are also plugins for the browsers, which is WebAIM, for example. And there are different more. So you can just run over them and then they'll show you the HTML problems and the low color contrast and stuff like this. We have time for a couple of more questions. Anyone has a question? Please raise your hand. Don't be shy. OK, nobody has a question. I have a question. Well, that's a question right there. All right. Sorry, I have been late to the event. Maybe I missed this part. But do you think we should do anything to make our content compatible with digital assistants, personal assistants like Alexa, Siri, Amazon or whatever? If it has a real markup and the HTML text is marked probably, you can still read it. I mean, it's like a screen reader. If you say this is a headline and then you're writing a headline, everyone can see it. If you make a picture and you write in the picture the headline, nobody can see it. So if you use the write HTML and then maybe use some area labels on a way we have some struggles, it's accessible for Siri, for Alexa, for screen readers, for Google. So nothing special in order to make it compatible with those platforms, right? No, HTML5 is pretty accessible already. OK, thank you. How is your opinion about minimalistic design on the website? Sorry, I can't see you. Where are you? Ah, sorry. Hi. Can you repeat it again? Sure. What is your opinion about the minimalistic style or design on the website? Usually they're pretty good because you focus on the important things. The problem is if it's got too minimalistic and you're missing out important things, for example, when you fill out a form or you have a clickable button, you should be able to see where's the area where you can click in. And sometimes they don't have a border at all or they have a really light border and then it's quite hard to see. Also this flat design can be a bit struggling because maybe you have a button which don't have a border counter anymore so people maybe struggle to understand is this a button or is this just a field. So being minimalistic is not really a bad thing because you're reducing the content and make it a good overview for the most people but you still should use visual indicators for important things like functionality and, yeah, like, yeah, you have to find a balance kinder. Do we have any more questions? Yeah. Down here. Can a microphone come down here, please? Right, front roll. Yeah, right here. Yeah. This is not a question but actually an announcement. If you want to learn more about good design and about prototyping, there is a very good workshop tomorrow at two from Adrian Rosselli about accessible prototyping and of commercial. Yeah. Thanks very much but please keep it to questions. Not announcements. Thank you. We have one over here, right? Forth roll or something. Hi, how about font resizers or something? Do you recommend using them or do you think it's completely nonsense? Front resizing? Yeah. Like you mean the double, the two A's? I think they're quite of nonsense because, like, usually you just put them in and say, yeah, my website is accessible and usually they're not. And also if you make your phone big enough right away, it helps everyone. So I not really like these kind of things. All right, we still got room for a couple of more. All right, there's one more over here in the front. Yeah. I might miss some in the back. Just a short question. Do you think that allowing the viewport to be Zoom helps the user access the content or we should avoid letting the user Zoom my mobile page? Sorry, I didn't hear the question. Do you think that zooming the viewport on mobile devices restricting the Zoom of the viewport which helps the users or not? You should use their, like the user has to be to use their Zoom. Like they have to control it because the different kind of ways how... Because most of the people disabled on mobile devices. Yeah, but you never know. I mean, like I would not disable something. I would just use the default because some users you know want to have the whole, like the whole website bigger and some just really have to Zoom in like there's a magnify glass to see a specific thing. So I would always use the default and like the best practices in this field. But maybe Rian, you have an addition to this? Yeah, okay. All right, if we have questions in the back please stand up so we can see you. The room is huge. Any more questions? She's still here. Take advantage of her right now. All right. Yeah, we have one right there. So if you have a theme that is not accessible would you consider rebuilding it from scratch or trying to adapt it? It depends on like what is your goal. So if you want having a client website and you have the time and the resources to do it I would say do it. But from the community point I think it would be good if all plugin developers and theme developers make the themes accessible because the problem is if like I had it there was a big theme where I wrote and say hey your menu is not accessible please make it accessible and you're like a huge theme so many people using your theme and I say well if you need it for a specific project use another theme. But the thing is everything should be accessible and not only the specific projects who has the specific target group. So it kind of depends from which point you're looking. So if it's a client website and yet the resources do it but if you want to like contribute to the WordPress I think it's good that the theme developers make their own themes accessible so the whole web or like the whole WordPress project should be accessible because if the core is accessible but then you put a theme on it but just not you don't have accessible website. Any more questions don't be shy just raise your hand or stand up if you're in the back please. That's why I say come to the front. We got one? No. All right I think I'm just gonna ask one last question. This is gonna be your last chance if you want. All right so Maya there has been a lot of buzz around GDPR and privacy as design. No privacy by design actually as a keyword. Would it make sense in your opinion to advocate for accessibility by design as a sort of concept for other stakeholders than just designers to sign up for and get them on board? Yeah definitely. And if so is there any resource you would recommend for that any sort of white paper or something? A white paper? Yeah and it's sort of brochure or an article that people should read to implement accessibility by design to get a grasp of the concept. The handbook? The handbook. The handbook. All right that's what handbooks are for probably. All right people thank you. Please give it up for Maya Benke. Thank you.