 Okay, now it works. Okay, so a few words about me Hi, I'm Mika. I'm the CEO of G-Works and pointed two weeks ago and before that I worked as a project manager and I'd be working with WordPress for about three years and I'm come from a technical background I'm not a developer and it would be kind of hard stretch to call me even a designer I'm kind of the business end, you know in our company doing stuff like Selling WordPress and doing concept design this kind of thing You can find me at Twitter By that handle if you want to follow me I'm actually a very lazy Twitter But if you feel I feel like it you can follow me you probably want to follow the company as well so This actually works There we go I'm gonna be talking about four topics today all related to the same subject. So I'm gonna be going over the Generals of the accessibility directive. I'm not going to go into detail Directive itself is like 80 pages long and so on but I'm gonna just Tell you what's it mostly about then I'm gonna be talking about the double WCAG guidelines, which are the Well guidelines that you use to create develop design accessible websites and They also apply to applications as well, but I'll be focusing on web development mostly Then I'm gonna talk a bit about a project we made for our client that actually had the accessibility as a Probably the most important thing in the project itself But we'll get back to that later And then I'm gonna throw in some tips and I promised in in the description that I will also be giving some contradictions in the guidelines themselves But we'll get to that later First of all, I want to talk about the accessibility directive made by the European Union and Actually want to stop here for a while Because there's been a lot of fuss about accessibility in general and and it's been a hot topic, you know So I mean has been doing some some good representations in on on Meetups and so on but I actually want to talk about it because we here as a community represent the very large part of websites or web applications that are made in Finland and as a human being I want to Press the importance of the matter that we have the possibility to create accessible web web in itself has has brought the world together and and We have in our hands the possibility to make web accessible even for those with severe limitations to their ability to Well see or or people who have cognitive disorders and so on so I say to you Please focus on accessibility. It's very important because that brings the world closer together So about the right active itself. So directive you 2016 slash to 102 of the European yada yada yada This is the accessibility directive and in the short short version of this is that every single website and Actually mobile application as well has to be accessible and You have to each European country has to adopt the directive into the legislation before 23rd of September 2018 and I call this the a day This would be cool if it had like an explosion sound effect or something with the tech guys didn't come through with that No, really. I didn't even ask for it. Okay, but the a day So called a day is 23rd September 2018 and what this means is that Our news so-called new services web services released after a day must be accessible by 23rd of September 2019 a new services means services that don't exist yet, which are being developed and You you don't have have anything to work on and then we have old services services that exist already and these must be must be accessible by 2010 2020 sorry and The thing is that that especially in the old services to when we're thinking about stuff like Like vero hollanda for example the tax-exministration in Finland They have a very large system which needs to be remade almost completely at least in the front end perspective So we're talking about kind of a moving train that if you start By 2018 when the directive comes through you're already late So you have to take into account that services that are accessible are actually Very difficult to make and and they take time. We usually give an estimation that that a regular service or compared to an accessible service the Accessible service actually takes about One and a half or two times more to develop single simply because it has a lot more code and accessibility is hard like like really hard and Why is this a simple the fact that we have a lot of variables? first of all we have all the different operation Operating systems and the different software that are used to make things accessible So for example in our windows environment, we have nv nvda jaws and supernova. These are all screen readers and Most most common of these is the nvda mostly because it's free and it's at least partially funded by the Mozilla Foundation so they're kind of the forerunners in trying to make accessible services for everyone This system works on Firefox Chrome and in Explorer, but it doesn't work on edge Then we have jaws which is kind of a Windows specific doesn't limit itself to any browsers, but this software is really expensive It's like I think it's like 1500 or 2,000 euros or something like that And then we have supernova, which is a bit cheaper, but still about 200 euros or something like that Mac OS and IOS have voiceover which is built in and and that's I think probably the second most government common Software used mostly because well it comes built in those machines and a lot of People with disabilities actually use use Apple devices And we have orca, which is for Linux. There are probably more more software for Linux But orca is probably the one used the most and and then we have Android which has software called or an application called talk back and This is this is just a scratch in the surface of these applications. I think when I tried to search for these I came up with like 50 different kinds of software and The problem with this is that none of these work similarly So if you get something that works on on voiceover and you're like, yeah Now we have a nice and accessible service Then you pop up your NV a NV da and realize that no it doesn't work the same way So in addition to the testing that you have to normally do With different machine kind of operating systems and browsers you actually get like another another set of variables Which you have to test But it's not really just the software because we have we have a lot of different users as well who are Disabled in some way and the thing is it's just not about the blind blind people Blindness is the most common reason for accessible services and and using voiceover and other other screeners But we also have things like partial blindness extreme nearsightedness Even color blindness this deck dyslexia attention to physical disorder and all kinds of other I'm not I haven't watched enough house to pronounce that but We are like we are talking about physical disabilities like people who cannot use a mouse for example And they they can perhaps use use a tablet and do slight swipes or something like that but we're talking about the people who have a trouble raising their hand and It's estimated that that about about 10% of people suffer from some of these conditions and Obviously, we have some people who might have rheumatoid arthritis and They might not be as disabled so they don't have to necessarily use the services But we're talking about a pretty high number here in Finland. This is about 500,000 people and Then we are I'm gonna talk about the guidelines themselves are Most of is there someone who is already familiar with the WCA guidelines The way to hand if you are well, I'm glad that our employees raised their hands as we have been working on this but this is a guideline made by the W3C and it's an essentially a collection of best practices recommendations to creating accessible code and content and It's managed by the World Wide Web Consortium and The original guidelines were published in 99 so they are quite old and then revision version 2.0 was published in 2011 and 2.1 is currently in its first first public draft stage and it's actually you can go see the new guidelines at World Wide Web Consortium site and And the guidelines apply to design they apply the code and they apply to content and We have three different levels for for the guidelines and The following is my own personal into praise interpretation of them So we have level a which I've dubbed accessible So that's your basic basic level This this means that it's usable but not necessarily very pleasant to use So that that's the bare minimum that is required. Then we have a for advanced accessibility and this is actually the level in itself that Usually is recommended. So in a you have some things that are already Like really usable and actually pleasant to use and then we have the AAA for absolute amazing accessibility and This is a very hard level to reach because In addition to having to feel all the previous requirements So if you want to get to level AA you have to feel every single requirement in a But then in the AAA you actually have things like which are related to the content and the production of the content itself So you as a designer or our developer cannot actually do anything about that and there's a lot of things in there that are Kind of hard to do for example. We you have to take into account that these directives also Include sound so so they technically You we know talking only about screen readers We're all talking about people who are deaf and and you have to create For example, you cannot use sound to convey information or if you have a video you must have text for that and these kind of things and Now about the project that we went through and this project was started in in 2016 and we actually did it for quite a long time and The project self was made for Celia formerly known as The library for the blind nowadays the National Center for Access Accessible Literature So what we did was that we created a WordPress based user interface for Celia's new library system. These library Deals in ebooks or audiobooks. So The project itself consisted of two main elements. We had the WordPress and then we had a really big API to Aurora, which is the library system itself. It was provided by Web library systems specialist called Axial The site itself was hosted at Walter and the streaming and download services for the audiobooks were provided by Pratsam And then we had the the user interface which had the cover images and that was provided by BTJ Finland and Then we had the testing which was done with Celia and other get so as we say in finish We had a few variables This Was an actually very interesting project because we were kind of a central hub here and and we had a very difficult user base People with varying degrees of disabilities. We had completely blind people. We had people with dyslexia. We had people with maybe physical problems who like I said before cannot use a mouse and The communication between all these different parties was difficult and I don't know if any one of you have worked with Walter before but they have quite strict requirements for different kinds of software Right, we'd like you to try it, but you probably can't unless you have one of these disabilities So it's not open for the general public You actually have to have some of some kind of disability to use this use it you have you can go check it out at selly Annette dot fi and You can get somewhere with that but mostly it's just for the client base of Celia itself Okay, so Few pointers towards designing Accessible services, I'm gonna do some tips which are we found out during the project with Trial and error and then I'm gonna talk about some myths as well which We kind of encountered and which have been going on Recently that you can or cannot do so the first thing is simple keep it simple and It's actually in in a system that We had we had a library library interface that you used to borrow books so we had to figure out that what was the most commonly used and the most important element and bring it up to the front page and we brought the search in itself to Kind of being the first thing like literally when when you're browsing something you use Perhaps you use a tap index or or simply go through it visually the first thing you encounter is the search and We received a good a lot of good feedback for not having like a big hero image or something like that but instead like keeping it simple and Using the most important element first And then there's the thing about graphics You cannot use any kind of graphic to deliver information and if if a graphic doesn't have any specific Value you should leave it out and this is a special especially when talking about hero images for example if it doesn't have any other purpose than perhaps being like a nice image or or Developing the brand you should leave it out in these services And same goes for shape. So you cannot use for example certain kind of triangles or or circles to convey any kind of information and you should also consider that that you can make a lot of different kinds of views but You have to use less elements rather than more. So the less elements you have on the page the more simpler and as such accessible it gets and One thing about this thing consistent in the design So if you're using for example a certain kind of subnavigation that same subnavigation has to repeat on every page in the same way Also different button styles for example keep using the same colors keep using the same Functionality tab if something opens in a new window or a new tab every button has to do that the same thing Another thing that we noticed actually during the testing was that Most blind users want to get a hold of the whole site before they actually navigate further So it's kind of they have to see a map before they go anywhere because it's a maze for them They can they don't have any of the visual aids that we normally do so they want to listen through the site map and users are Used to going to a footer to find the site man site map So put it there just just do it like you know she'll above style like just do it Okay, then the tip number three is to use really visible focus elements And this this is actually the search that we did and as you can see there's a pretty big Green green focus there and this it could actually even be bigger like it could be like even five or ten pixels more than then it's there so For those with partial blindness or cognitive problems. It's really a lot easier for them if you're like really highlight the element that you're on And one thing which is kind of sad is that you shouldn't use any page load animations while it is possible to create animations that work and are user user and screen reader friendly Users with cognitive disorders or attention deficit disorders can get really distracted and that may even cause nausea So if you have like a big animation that swoops the screen every time you switch the page that Actually make the user feel physically ill and I have some Myths and the first one is that Simple doesn't mean boring so you can actually use a lot of different kinds of elements and you can Have an interesting layout for those who use the service to the vision But the thing here is that you cannot cannot have like too much moving elements So as long as you remain static you can actually create a really different different kinds of pages and layouts The color scheme doesn't have to be simple But there are a few things that we have to take account when we're talking about colors So let's do a little test You'll see two buttons and two Style buttons here and one of these buttons is Done accordingly to the guidelines and the other one is not and if you take into consideration that which one of these You think is more accessible which one of these has more contrast and is more easily to view Let's do a little poll who would say that the white text is better One two three, okay, and who would say the black one is better Yeah, most of you congratulations. You passed the test Yeah, the blacks text is according to the guidelines the better version, but When we did the testing about these colors the white one us was actually more pleasant to the users themselves So we have a contradiction here This one is correct according to the guidelines and technically we are getting to the point where we actually have by Legislation we have to do this, but most of the users with problems with the vision think the other one is better This is kind of a kind of a Hard problem since this is the way we have to go But that one would be better for the users with limited vision Okay, something is for developers and I'm not a developer. So please be kind on me on these ones The first thing is one of the most important things about making things accessible is the white area labels And these are hidden texts for screen readers. They tell the screen reader user more than the site visually shows And they can be used to identify different kinds of elements on the site such as navigation and also explain Buttons drop grounds, etc. And consistency is again the key here. So talk with your designer when doing the labels Here's an example of how the screen reader works when when using labels So we would have a text called which goes like local breweries or micro brewers have taken a significant market share from large corporate breweries And then we have a link which is learn more Then you would create the real label and give it a very specific Explanation so when a voiceover does this it reads the text in itself and when it gets to link It says link learn more learn more about local breweries and this helps the user that doesn't see that it's a link To understand it better Then we have use cases such as model windows I'll go later on to the model windows themselves, but we have a model window close Close button and the worst case which you can do is that you have an HTML entity Which is a multiple sign and then when a voiceover user comes there. It says multiple sign the user has no idea What the hell is happening a decent version here would be closed a model window But your user doesn't necessarily know that he is in a model window So what we want to do is explain what is actually happening, which would be exit the loaning options The same thing goes with there are these buttons on the bottom that say line, which means borrow and or loan and Instead of having it say that it would be link line You want to have it to say borrow the book and listen to it in salient The other thing is that Skip to content is typically first in your tab index And it's kind of the first sign that you see that our website has been done at least somewhat accessible And you can see when you go to a page and press tab if you get a small button in usually in the left-hand side In the left upper corner, then it's usually usually at least somewhat good But the second one should always be skip to sitemap and as I talked about before blind users want to use use sitemaps to make kind of sense of the whole site before navigating further then we have the issue about radio buttons and checkboxes and This is really about preference the rule of the tomb is if you can narrow an option for example into a simple Yes, no answer you should use checkboxes and if you have more complex options You should use radio buttons with highly informative descriptions And this is this is difficult because the screen readers So actually go through those and it's hard for the user to tell which option is limited to which button So if you have a button and a description and a button and a description or a checkbox and description It's actually hard for the user to figure out which checkbox is which so In our user testing we received mixed feedback about this. So if you can just avoid both one of the myths is that you shouldn't use JavaScript and and This is actually Partially true. You shouldn't use any obstructive JavaScript and you cannot convey any information using JavaScript alone again JavaScript mostly used for For visual visual cues for the user So you should always always avoid that But and the other thing is that if you have Some element or functionally that it's only reachable by JavaScript You have to provide it in some other way that being said 98% of the programs used to Read screens actually support JavaScript. So this is kind of a Kind of a seesaw there All selection must be visible This means that drop-downs are generally hard because usually Most most screen readers actually read all the things in a drop-down menu before actually opening it. So You have to be very careful when using the things like this because they are easy for the User that sees but they might be very difficult for a screen reader user There are some libraries which make make accessible drop-downs But they are quite rare and they are quite old. So you might have some Some compable compatibility issues with modern browsers And the third is that don't use model windows. You can use model windows But you should always treat them as sort of a different page So for example in the earlier earlier example, we had the issue that you don't want to Call it close model window. So make sure you label label it so that the user understands what he's actually doing So what would be next To get started on accessibility and and and I really recommend for all of you to get get to know The web accessibility guidelines you can go go to this address and there's actually tips for getting started There's tips for designers. There's tips for developers and there's tips for content producers and Further reading and other useful stuff, too. We have the a one-one why project that actually that word means accessibility and It's kind of an old project that has been going Back and forth and I'm not even sure if it's maintained anymore, but there's some basic reading over there Then we have a contrast checker checker Which is useful one when you want to see if a color combination actually matches the guidelines Then you have the accessibility checker, which is very good for validating your code And one of the rule of the thumbs really here is that if you write good code It's usually at least somewhat accessible and then the guidelines itself you can find at the w3 consortium site All right, I think my time is up and I thank you at this point and perhaps we move on to questions And before we move on to the questions, I would actually like to say that we need The visual add-ins in for cellular as well So you don't have to limit your questions necessarily to this presentation or or this project but in Accessibility in general Thank you so much Mika. I had one question How long did you have this project for like what was the length of time well to understand that kind of context? we had Some issues during the project about we actually have to move into a complete different development Stay so we we started this doing this at our own own environment And we actually had to move to the Walter so so that made made some delay But I think we did this for about a year and maybe three months or so We're actually still doing kind of the last version. So we this has this was published I think a month ago or so, but we're still kind of making lay less tweet tweaks there How do you feel about the project itself like not having maybe being a developer? But just being part of the project. How do you feel about it? it was it was hard and it was a lot of trial and error and and Believe our developers agree that that this has caused some gray hairs To them because there's a lot of things to dig into account But at the end where we managed to do this and now we can say that we know a lot more So this was actually very good for for the development of our developers and and for me personally I find the issue itself very important and and trying to make their world and the web more accessible So so I like the project itself. Okay, great. Thank you very much Maybe a round of applause for me And we have our next speaker Lisa, can I have a question? Hi me Yeah, thanks. Thanks for a great talk. I had just one pretty easy question Do you have some kind of deep or a condemnation for? auto-generate the site map or is there even tools for that or do you just? Create it like handmade Yeah, that kind of kind of depends on how you're developing WordPress, so I Think actually I'm very good to answer this question in itself since I'm not the guy who makes it But usually you want to do something that gives out the whole site map in itself So not just the uppermost levels, but actually all of it I'm not sure if that answered your question, but Talk to talk to Thomas or henna. They actually know a lot more about this Were there any other questions? Yeah, two questions first you mentioned about the accessibility of deadlines and the first slides Is it a regulation you you have to do that or you just like? Advisory you just good if you do that and the second question you mentioned a few conditions That should be taken care of can you really integrate all of them into one website and just one website would be Accessible for everyone, you know within this condition range. I mean how hard is that is it possible? Thank you answer the first question. Yes, this is a directive, so it becomes sort of Criminal activity to have a service that is not accessible during kind of after the deadlines that I showed so the ad plus one for old services and a different story for new services and ad plus two for old services and Probably as usual in the European Union We in Finland probably are the only ones who actually make the deadline and the other ones come like three or four years after that and Your second question was that can we actually make make a make a make a service that accessible for everyone. Well That's what the guideline really is for obviously we might have some scenarios where a user has such Such a hard time using a service that we count 100% be sure that that it's accessible for everyone, but if you if you can Do the triple a level accessibility and you match all the requirements in that there's there are many requirements Then yes, technically we would have a service that accessible for everyone Hi there. I Just wondered about that because I'm a newbie in this area and you mentioned about the area label Is there some reason why I shouldn't should use that instead of just title attribute? I think it's about how the screen readers read them. So if you use titles and so forth Most of most of the different screen readers might read something like title or h1 or something like this And the why area has been created. It's a kind of a standard to At least try to make all the different kind of services Or the applications and programs similar But you you should probably go check out This because there's a lot of a lot of things things that help you getting started understanding and this this is actually very simple I understood most of the things over there. So I think most of you will as well Hi Actually just a comment to that one I think I my understanding is that some screen readers don't read the title attribute at all So that's one reason not to use it. But my question My understanding was that for the triple a it's really not even meant You're not really expected or meant to have a site that Is triple a in every respect that it's more kind of meant my at least that's what I Thought is that it's sort of meant for specific areas that you might have a Double a website overall, but then you'd have like some specific sections that of for some specific group it might Be triple a but but I don't think There it you're expected to even try to reach that level Yeah, so just by the way was the that The directive is it's is it double a or is it specified what accessible means in in that directive? It actually specifies that the services must be at the double a level So so you're correct in the fact that the triple a is very specific to different kinds of function For example, if you have a video you have to have I don't know what's cuba tulik cause in the English But but you have to have like an audio description of the video itself not just That's the sound in it, but this is one of the things in the triple a and it's kind of Not even like reasonable to do that for everything like like if you imagine that you had to make a service service like like we have For example companies like dream broker that they would have to provide Tools to everyone through to be able to describe a video But you're incorrect in that you're correcting that the double a level is kind of the standard So that's where you have to get and after that the triple a is only like bonus We have a question upstairs. All right. It's the microphone away green. Okay You mentioned that the big loading animations are a no go. Could you clarify what is okay like a regular spinner? Yeah Using kind of moving images is the thing you can use Small animations like like you can use a small spinner of this But like big animations that take over all the screen might might be like you can imagine getting like sea sickness When it when you watch what something like that? So if you have a little slow load animation, that's fine But having like a swoosh all over the screen might induce nausea Yeah, parallax crawling is another one too. I actually get nausea from it anyway, even then being disabled Did we have any more questions? Okay, well, I guess Thank you, and we'll have our next speaker