 All right. Thank you for being here. So my talk today is about accessible design. I will use a lot the word alley, which is short for accessibility. And it's because there are 11 letters between A and Y. So they got just shortened and then it's short for alley. So why is accessibility important? Accessibility provides access to websites and technology for everyone, even if they have disabilities. These disabilities could be cognitive, physical, audio, and visual. Cognitive disabilities, for example, are dyslexic, H-D-I-S, autism spectrum, and so on. So the physical disabilities, for example, if you have a broken arm or if you have struggled to using a mouse or a keyboard, so for example, you're using just voiceover or a screen reader. All of your disabilities can be hearing impairments. Also, if you're in a really loud environment or you don't want to disturb anyone so you don't want to use sound. And visual impairments could be, for example, if you're blind, but also if you're colorblind or if you're just using a screen in a really light sun. So you can't actually see a screen. If you calculate all the disabilities together, every fifth person has a disability. So if you just check this room, there are a bunch of people who have disabilities. So it's really important to consider this. For people without disabilities, technology makes things easier. For people with disabilities, technology makes things possible. So if you are creating websites, we are responsible for this if people can use the website or not. And it can make a difference for a person who would be actually able to do anything or to reach information and to get information. So we are responsible for our own website. So we have to make sure that everyone can use this. So accessibility is for everyone. So what is accessible design? Accessible design supports the content and also supports the functionality. And it provides access to everyone. A good example where a design can actually break the functionality is two or three years ago. It was on a word come London. The password was printed on the badges. The problem was that there was a phone that only had uppercases and no lower cases. But the password also had lower cases letters in the password. So you are not able to figure out what the password really is. So they had to reprint all the passwords in a phone who also has lower cases. So it's actually a good example of how a design can actually break a functionality and not support it. So the most common mistakes in terms of accessible design is, for example, a color to use as the only single indicator for information. So if you are color blind, you are not able to actually see the information. So you should always add additional style beside the color. For example, if you have a graphic and you only have like different color, like different dots and different colors, it can be pretty hard to really see the difference, for example, between the blue and the green. So if you add symbols, it's easier to catch. But also if you only see the website in black and white, you are not able anymore to understand the information. But if you add a symbol, you are able to really get access to the information. You could also use a pattern instead of symbol. So it even opens up a lot of design possibilities to play around with accessibility design. Which is a really common problem is that links are not underlined anymore or really often. For example, this was a screenshot from the plug-in directory. And it's pretty hard to spot the links over there because the blue has really low contrast to the black. But if you underline the link, it's much easier to spot the links. And also the underline is the most common indicator for links. So for example, you could also use the bold to add as a style for a link. But then it's a question to people that recognize a link if it's a bold word. Because you would maybe just think it's a highlight. But if you use a link, it's more clear, okay, there should be a link. If you don't want to underline links, you can also use other ways. For example, if you make the links that alone, or also if you add the W-W-W, because it's more clear. And also, for example, on meet.com, you don't have influence anymore. You don't have influence on the style of the link. And the links are not underlined. So if you have a WordPress meetup, you just add an arrow to indicate the link. Even it's HTTPS, so it's maybe not necessary. But if you scan the website, it's easier to spot the link if there's an arrow. In terms of colors, also the color contrast is really important. For example, many websites now have really low color contrast. So it's going to be really hard to really see the information, especially if you have sun on the screen, for example. And also if you use combinations of colors, for example, for hover effect for buttons, and you want to indicate that it actually happens something, and there's something active, you should choose a color combinations where you have a clear contrast, or a clear color contrast, also in the darkness, because if you're color blind and you see it in black and white, you not really have a difference anymore, for example, on the third box. But you have on the other ones. So you have to, like, if you pick colors, make sure that also if you only use the website in black and white, they just still can see it. A really good tool for this is the contrastchecker.com. So you just define the foreground and the background, and then you can see the indicator or you get a test for the AA and AA standard if it's high enough, if it's past, and AA and AA indicators of accessibility levels, which is defined from the WCAG standard. And I would recommend to try to hit the AA standard, which is also used in the WordPress community. And if you define colors and you just have a color palette, make sure that you not only have it for large phones, which is like the 18 points, but also that you actually have a high contrast for if you use the phone in a smaller version, because you're not sure if you define the color palette, if you maybe also use this color for smaller phones. If you use Sketch as a design tool, there's a really good plugin as well. It's called Sketch WCAG. And if you install the plug-in in Sketch and you just have a combination of colors as a color palette in which you want to use, you just mark them and then use the tool and then you get an overview about the colors, how you can combine them to hit the accessibility levels. Another point is the typography, because this is the way how you transport content. So you should make sure that you have a typography which is easy to read. For example, here, especially handwritten can be a bit struggling to read, but there are some handwritten types which is easier to read. So just make sure that you can read it. And also the first bad example for some has really thin lines. And this is a common problem now that the Internet is becoming unreadable because of a trend towards lighter and thinner phones. This is the article from the telegraph which I really can recommend. So if you choose phones, make sure that also if you have visual impairments, that you're still able to have a good reading on this type. And other design texts can be also struggling. So you should make sure that you still have a natural textile, especially if you use bold to highlight more like strong, another kind of type for design. And if you use it in a textile, it can be helping to have a good overview and to scan the website, but for people with dyslexic, can be really distracting if you read it because you're jumping over these words. Also if you use upper cases, especially for headlines, but also sometimes I see it for, this is not a real one, I just take it, but if you use upper cases in text, you change the shape of the word. For example, if you take developing, usually if you have the natural textile, you don't have to really read developing, you just look at it and you know this is developing, you don't have to really read it. But if you make the word in all other cases, you more have to focus on the letters and you have to get more effort to read it. So if you use upper cases, make sure it's maybe just for headlines or for shorter text and not really for text blocks. An unstructured text can also be hard to read, so it's good to use text elements. For example, this is a text block and for dyslexic people, it can be really hard to get information out of it because you really have to read it. And also if you just want to scan and just have an overview, it's kind of impossible to really see the information. So for me as a dyslexic person, looks like this. So I really have struggles to get in. But if you break down the text, if you use text elements like list and headlines and other elements, like also I like symbols a lot, it's much easier to see it. And also for people who don't have dyslexia, they can just scan it and just have an overview of the elements. So for me, more looks like this. So it's easier to get it. But you should also make sure that you don't have a messy structure and that you have a really clear side structure. So it's easy to understand where to go. For example, this is a screenshot from Smashing magazine. And I found it really confusing. I don't know where to start, where to continue reading. I'm just struggling around. But if you have a really linear structure, like a really clear one, where you know, okay, I start here and then I continue reading here, and then I'm ending there, it's much easier. So you can really focus on the content and you're not just wondering about the layout. A really problem is a random use of HTML elements. So it's really important to use semantic markups. Especially for headlines, I see this a lot, there's wrong use. That people, for example, are using multiple H1 and then they're skipping some headlines levels. And this can be really distracting for people screen reader users. But also it's just not really good practice. So you really should follow the rules. There's only one H1 per site and then you continue with H2. And then if you're having a lower level, then you're using H3. So don't use the different kind of headlines just for layout or for design reasons. Really follow the real sense or the sense of the headlines why it's there. It's a really big problem. So it's really important to use clear and meaningful link labels. I see a lot click here, follow this link, read more, which is kind of, yeah, not really clear. So if you have a screen reader, for example, you only see click here and then, okay, where I'm going. And also as a dyslexic person or if you just scan a website and you see a link and you just click here, then you have to read the sentence to understand where you're going when you click there. But if you label the link, just contact us or see our guidelines, it's totally clear. So you just scan the website and say, contact us. I don't have to wonder. I don't have to read the whole sentence or the whole part of the text to understand where I'm going when I click there. A really good way to make a website really accessible is if you're mixing content formats instead of just using one. So there is text, pictures, images, graphics, videos and audio. And if you just, for example, if you write a tutorial and you just use like two or three variations of this content format, you have a really good accessibility because the user can decide on their own which kind of format they want to use. For example, if you're really new in something, for example WordPress and you want to learn it, then maybe a video tutorial is a really good thing to learn because a picture can tell more than a thousand words. So you just see it, you know where to click, you really understand it. But if you, for example, deeper in the subject already and you maybe just need a piece of code, a text can be much easier because then you don't have to go through the whole video. You just can scan the text and then found a piece of code and just use it. Also if you use videos, always underline them because it's much easier to read this. For example, I'm not the English native person. So if somebody speaks here with a really hard accent, this helps me a lot because if I don't get a word and I just read it, it's just so much clear. And this is the same with videos. Also if I submit it on Facebook, if you just scroll down and the video starts playing and you don't have to sound on, you just have to subtitle. So you don't need to sound to watch a video. So this makes it really accessible and also easier to translate if you want to translate something. And for visual people, a graphic can be really easy, especially if you want to show complicated information or maybe statistics, a graphic can be a really good idea. And also if you support like a content way, then always support different ways of contacting you. For example, telephone or email or chat because different people always prefer different content formats and also different situations needs different kind of ways to contacting. A really bad thing is if you don't let the choice of users how elements should behave. This is really common, especially for links, that web designers or people who create the content in the website that are forcing the links to open in a new tab, like the target blank. This is a really bad thing because as a user, I can't decide on my own if I want to have a link opening in a new tab or if I just click it, it's the same tab. So this is the default behavior. But if I use target blank, I force people to open it in a new tab and I don't let them the choice anymore. And especially for screen readers can be really hard to get back because I'm disabled to go back button if I open it by default in the new tab and the back button is the most used button in the browser. Another problem is if you visit a website and then the slider or the audio or the video on the site starts right away. This can be so annoying, especially if you open several tabs or if you open several websites and somebody is playing music already or just start talking to you and it's like, where is this coming from? So this can be really hard and especially for people with autism or with HDIS, it can be so confusing that you have really problems to focusing on a task they wanted to do on the website. Okay, now we're coming to the interesting part, which is potential conflicts between user groups. There's a lot of stuff which is good practice, but then there are some points where it's not really clear where they have user groups, they have different kind of needs sometimes. For example, the color contrast, usually the color contrast is too low, that you have really problems to see the colors when you have visual impairments or the sunlight, but there's also some user groups where contrast can be too bright. For example, for dyslexic people, a black fog on a white screen can be really, really hard and really sharp to read and can be really, really frustrating, but also for people with autism, can be really like a high-color contrast can be really so distracting and so painful in the brain, so there's really important to find kind of a balance, so you should make sure that your color contrast is high enough, but maybe not put it to the edge, like not a black or white, maybe just use an off-white and then a dark gray or maybe a dark blue or something, so you don't, you're not on the edge of the contrast. And I think it's the textiles. For example, bold and making like strong words to highlighting something can make it really easy to scan a website and to see the really important informations, but dyslexic people can really jumping over or struggling with these words when they're reading it, because they're so distracted by the styles that they not can focus on the text. So there's a really good solution for it. You just should be aware of it and then find a balance if you use it. There are also fonts who are made especially for dyslexic person or people, but the problem is they're different kind of dyslexic types. So dyslexia is not a visual impairment, it's a cognitive impairment. So this is an example of fonts who are made especially for dyslexic people, but for example I can't read it because for me they're even struggling more, but some dyslexic types are really helping not to swapping the letters and that it's easier to read, but it's not for everyone. So if you want to use this phone, I would recommend to have it as a second option so that you have a default phone and then having maybe providing this as a second option. But there are many ways where you can make sure dyslexic people can still read like a normal phone, which is for example to use like a large phone size and also enough line height. So you don't have to make it too small, just make it a bit bigger, so the risk to swapping the letters, it's less. Also provide easy access to important information, spoilering in this case, it's really good sometimes, so just put the most important stuff at the beginning, or just using like list and subtitles to structure your text, and also don't be afraid to keep it short. I mean if you need a lot of words to explain something because it's complicated, sure do, but don't make it extra long, just keep it short, and use text for example. So strategies for accessible websites is for example that you can also play around and test. This is for example a website where the Thai group are people who had a brain injury, and the web design agency found out if they use rounded corners, it's easier for the people or for the users to recognize the elements instead of having for example a really flat design. So the form should always follow the function, just remember the password. Integrate Ali from the beginning on, so you don't have to think on the end of it, especially if you define the design style guide, just make sure from the beginning that the color palette you're choosing is accessible, and also provide a content style guide for the people who create the content, so you can make sure that also in the future the website stays accessible in the area you're involved in, because there's a reason why we call it best practice, and the most important thing is that you be empathic, and that you don't think out of some Thai group, I don't have to consider this, because 20% of the people is your Thai group. Then I have some resources. A really good one is the cheat sheet posters from the Government UK, they have a blog about accessibility, and there's an article called do some downs on designing accessibility, they have posters with do's and downs, some of them for design, but also content and developing. Then there's a book, it's called accessibility for everyone, which is really good resource, I really can recommend it, and if you live in London, there's an accessibility meetup, the next one is I think in one or two weeks, and I really like the meetup, so if you want to get deeper in it, it's a really, really good one. I'll give you a link to that in a little bit later, which is this is my Twitter handle, so if you're interested in slides, I will tweet the link. Okay, thank you. If you don't force people to target blank, and they're on a mobile device, if you send them away from your site, they drop out of a funnel, we've seen as much as 30% drop off if we don't use target blank, so is it like a hard on fast roll, or is it sometimes that it just makes sense? I didn't get the question. Hence fast roll, I don't get it, sorry. Sorry, I can try again. I'm sorry, I'm not native, I'm sorry I just didn't get it. At the beginning, you mentioned links with target blank. Yes. Yeah, so we've found that on client sites where we don't use that on mobile devices, we don't get a drop off of 20 to 30%. Yeah. So is it a hard on fast roll not to use it? I mean, is it like the worst thing you could do for someone using a screen reader? Well, but then there's the question why they're coming back. Maybe they're just coming back to close the tab. And if they really want to come back, they can use the back button. I mean, I understand this, like I got this point a lot. It's a marketing reason to keep the users, but if they don't, they will leave your site. So you can't make them stick. So just help them to have a good behavior on it. Thank you. Great talk, by the way. Yes, thank you. One point you mentioned in things to do is use text elements. Yes. What do you mean by text elements? For example, lists or also quotes or subtitles and just elements to structure text and to make it a bit like not just a text block, just to, yeah, to lose it over? No, to, yeah. I wonder, is it best to have one design for everyone or to have options so that people with different disabilities can have a different view of the website? So change the fonts if you're dyslexic or change the contrast if you're hard of seeing, or is it best to have one site and try to have a one size fits all approach? I would recommend to do it for everyone because if you write for dyslexic people it also helps everyone else. So just do it for everyone. It's kind of same with mobile and desktop. If you design something for mobile, just make sure you have to, it doesn't make sense to make double content because it can help everyone. It can be maybe hard if you have this point where they have the conflict, for example, with color and they have just found, try to find the balance. So I would try to just do it for everyone because it helps everyone. I mean just like a big text block, nobody likes that. I was just thinking about, I go on the London reviewer website and they give you the option to change the font size. So if you're, you know, a bit hard of seeing, you can increase the font size. It's quite a useful feature, but if you gave it to someone else, you can change the font size. Yeah, I'm not a big fan of this option to make the font size larger because if you just use a font size which is larger enough, everybody have a benefit from it. So I mean there's more stuff you should consider for accessibility just, yeah, so I think it's sometimes not just like an add-on, I just put in okay, now I make it for everyone. Okay, thanks so much. Yeah, the cheat sheet from the UK government is really good. It's on GitHub, it's also in different kind of languages and they also have a lot of articles so this is a really good resource for that. To make what? Oh, yeah there are many tools but usually the tools are more for the dev side and not really for the design. So for a design I only know the color contrast checker but the rest is more like a checking if for example the input fields are there, all the tag is there, so I'm not really a tool for the design checking or maybe Prijan, you know. That's also something like the order of the patient. Yeah. Yeah. Yeah. Yeah. Yeah. Like for design that's not really a tool from that but if you're getting more into it if you start getting know about it you kind of get like a sense for it. Like I don't know if I see a website I usually see immediately three, four mistakes for accessibility stuff. Yeah, if you're getting more into it you see it like you're doing less errors with the time but yeah, that's not really a way to check it automatically I think.