 So the session is mostly about accessibility and I didn't have bus leave last night and I've been speaking a lot of French lately, so if I speak like incoherently, please excuse me. So here's the title. Accessibility is responsibility. It says with Jigarmeta and Maisi Masalto, that's my colleague, but she's not here. She's in Montreal, so I didn't remove her name because we have done this presentation multiple times together. So let's start. Here's a link to the slides in case you want to refer to them later. You can take a picture of this. I'll also show this slide towards the end of the presentation, so if you're not planning to take a picture right now, you can take it later towards the end of the presentation as well. Great, so I'll give you a second for the picture. Okay, let's move forward. Time is 11.18 am and I'm representing Evolving Web. We're a small Drupal shop, not very small these days, we are growing, located in Montreal. We are a team of around 15 Drupalers. We specialize in Drupal, we mostly do Drupal projects. And we also do Drupal training, like Suzanne, my boss is there in the counter. Evolving Web, we are doing a lucky draw for offering one free training session to somebody. So if you leave your visiting card or sign our paper there, leave your name and email, you might win the training session. So we contribute a lot to the Drupal community, like we sponsor a lot of Drupal events and we submit a lot of patches and modules and we do training, etc. So that's Evolving Web. Now here are some upcoming trainings, like I mentioned, so feel free to go to the counter. Now these are some of our clients. I won't name them because this presentation is quite long and I need to hurry up. So this is me. I've been doing full stack development since 2008 and I started doing Drupal in 2013. I was doing like PrestaShop and Code Igniter and then I suddenly found Drupal. And I really liked it, so I stuck to it. I've been learning Python Ruby lately. I have a marketing degree in Bachelor of Business Administration, but nobody cares. And I ran a web shop in Calcutta, India for three years. I speak around six languages, I'm learning two more, and I can solve the Rubik's Cube. So if you want to communicate with me or get in touch, just look for Gigavius Caesar on Google and you'll find me. And this is my companion who's not here, but yep. Now accessibility, a quick introduction. What is accessibility? So web accessibility refers to the practice of making websites usable for people of all abilities and disabilities. So what that means is like your website should be usable by mostly anybody who visits it. Like for example, I don't have good vision. I should still be able to use your site to a certain extent. Then your site is in maybe like English and French, so the language should be in such a way that even if I am like a young, like grade 10 student, grade 8 student, I should still be able to extract some information from your site. Like I cannot control my mouse properly, then I still should be able to use your site to a great extent and have some information. Because everybody has right to information and that's what this is all about. So why accessibility? Like this is basically theoretical, so I'll just zoom through it. And it's like a corporate social responsibility. You're doing something good for the society so that more people can have access to your content and you're making the world a better place by implementing accessibility, by not excluding people who are disabled or people who don't have the same abilities that everybody has. Then it could add to your company's reputation. Like if you want your site to be famous and be used by many people, you can add accessibility to your site. Besides it's becoming a legal requirement in many places. Like I'm from Montreal and in the province of Quebec all the government websites are supposed to be quite accessible. So we are working on a government website right now and we are doing a lot of accessibility stuff. So it's a legal requirement and sites might be fine sometimes depending on the case. Then it ensures better usability for all audiences like I said and it complements SEO. So if you're doing a bunch of stuff for SEO, it might be worth it like going the extra mile and doing some accessibility as well. And yeah, I think Google gives you points to an extent for having an accessible website. So who needs accessibility? Firstly, it's the people with disabilities, so visual disabilities, auditory disabilities, motor disabilities, and cognitive and intellectual disabilities like people with dyslexia, etc. And apart from like not only people with disabilities need accessibility, but people who are without disabilities might also be needing accessibility sometimes. For example, people who are old, like above 60 years old, etc. might have problems with their vision. They might not be able to read low contrast text, etc. And then people who are not very well educated might not be able to understand it. You suddenly start using Shakespeare in English on your site. So like keep your language simple as well. We'll get to all that. Then people who are new to the language, for example, I was learning French last year. So if I found some sites' content to be like relevantly easy to understand, like not very high-fi grammar and very long sentences, I could understand because I was new to the language. And it was easier for me, so I could still extract information. And then people with slow connections or old browsers and new infrequent users, like if your site is doing something really special with the navigation, which is not very common, then a new user might find it completely alien territory. And when he lands on your site, you would think, OK, how do I use this navigation? It looks so new. So if it's traditional to an extent, people can understand. And mobile phone users. That's the flexibility. So principles of reverse accessibility. Like if you want to not spend much time learning about accessibility and still want to know accessibility, then this is like your rule. You could think of it as the French word pour, P-O-U-R. And this is what we'll be learning in the next set of slides. So perceivable. Content cannot be invisible to all of the visitors' senses. For example, if they cannot see properly or if they cannot see at all, they should be able to make something, extract information by listening to your content. So using screen readers, for example, and so on. Then operable. You cannot ask the user to interact with the site in a manner that they cannot interact with the site in. For example, if a person cannot operate the mouse because they have some kind of a problem, then they should be able to use the keyboard. And if they're not able to use the keyboard, then whatever assistive technology that they're using, they should be able to use it to navigate through your site and extract information. Then understandable. So the content or operation cannot be beyond their understanding. For example, if you're making a website about grade 5 physics, you cannot suddenly start talking about string theory and head-run collider, etc. So because it won't make enough sense to them. So try to keep your content simple according to your target audience and the content should be understandable. And robust. So the technology, your site should be built in such a way that all the current technologies of the present day should be able to use it to make the site accessible to a wide variety of audiences. And it should follow all the accessibility rules, etc. And should be built in such a way that it won't become outdated sometime really soon. So it should be nice and robust. So it continues working. And so how do we approach implementation of accessibility? This is again a little bit more of theory. So first, we need to plan. You cannot suddenly decide that, okay, this website was supposed to be accessible. What am I going to do now? I have only two days left for delivery. You cannot be like that. You have to plan from beforehand. You need to plan for your resource allocation and budget. You also need to tell the client, if you need accessibility on your site, then you will need more resources and we'll need more time to develop your site because it's clearly not included in the base package or whatever. And implementation. So for implementation, you need to make the entire team be aware of your objectives that you want to have an accessible website. So you should start with your design team and let them know that we need accessible websites or design accordingly. Then you should tell your dev team about accessible websites, so please make all accessible solutions on this site. And the content team should also be aware of this because you might deliver a website completely accessible, but then the content team messes things up and in a month it's no longer accessible. So you might need to train the content team so that they don't break your site. And evaluation. So like anything, you just do something and then you evaluate and then you iterate to see where you went wrong and fix the errors. So that's also very important. Now, if you decide to go for accessibility and if you have done anything related to accessibility, you might be aware of these three sets of A's. So let's see what the level A, level AA and AAA are about. So level A is the minimal level of accessibility that a website will have. And without it, people will find it impossible to use the site. Some people will find it impossible to use the site. Level AA is generally what most set of websites go for because it's like a nice point of balance between A and AAA. So without level AA of accessibility, it will be difficult for some people to use your site. And you could like be safe if you go for AA accessibility for your site. And AAA on the other hand is like your site becoming extremely accessible. Like it's very, very, very accessible. And you have to compromise a lot on various aspects of the design, et cetera, to a great extent. And this level of accessibility is usually used for websites which know that they'll be like a visit, be having a lot of audiences, a lot of audience from people with disabilities, et cetera. So that's something to note. So the point to take home is level AA is a good point between A and AAA to go for. Now implementation. The time is 11.30 a.m. We are on time. And designers' responsibility in accessibility implementation is very important because any project, usually like web projects usually start with the designer making some things and then the development team like translates that design into an actual website. So as a designer, you must keep an eye on the font because if the font is really small, then people might have a hard time reading it. And it might be painful to the eyes, so that's something to note. Like usually I follow the rule of 14px fonts. So if I never use a font which is less than 14px. And then use web-friendly fonts. So for example, don't use quickly handwriting fonts which are very hard to read or something really, really artistic. Like font that is in English but looks like Chinese or Hindi. So don't do that, which is very hard for some people to read. And avoid too many font variations. Like if you have a bunch of font variations, like if it's anything above a couple of font families, it's like you're overdoing it with font variations, in my opinion. So try to keep it simple. It will keep your website healthy and accessible. So the next point is about contrast. So the higher the contrast, the better. And there are a bunch of tools available these days where you can put a couple of colors and they'll tell you whether the color combination is accessible. So what contrast is for is like people who don't have like a normal vision. They might not be able to read fonts like if you have a white background with a light gray text, it might be very hard. Like I was at one more presentation in the ground floor, or the first floor, whatever you call it. I was there and the lights were on. So the font was not very clear because of the ambient light. So it was not very accessible for me. So here we see the colors of the kebek flag, which is like a 13.25 contrast ratio, which is more than what you need for the triple A level. So keep an eye on the color combinations. Don't go for something with low contrast because it will be hard to read for some people. And next is keyboard navigability. So if somebody is not using a mouse, they should be able to easily use like a keyboard technology to like dab through your links and click around and use the site. So I've been using voiceover lately. It's like a screen reader which comes with the Mac OS. So I just turn it on and start speaking like everything that you tab through. So for example, I'm tabbing through the navigation. It says link, home, link about us. And it will say things like that and then you can press enter to use it. So give it a try and you'll know what keyboard navigability means. And so make sure your site is keyboard navigable. And the next one is like proper flow of content. Like just like we do when we're writing something down on a piece of paper, think about how you're going to organize the elements on your web page. For example, if you're talking about the geography of Canada, you will have an H1 saying geography of Canada. Then you have a small description. Then you will have H2 elements talking about the names of like stating the names of provinces. Then you give a description about each province and so on. So you structure your content nicely, which helps people with screen readers. And it gives like more meaning to your document. And then keep in mind that the design will ultimately be implemented in HTML and CSS. The designer needs to know this because sometimes young designers do like so much frills and decorations in their design which cannot be implemented with HTML and CSS at the end of the day. So keep that in mind. HTML and CSS is what you're going to be using for building your website ultimately. And also keep in mind that someone might be listening to what you're writing because they might be using a screen reader. So make sure your content is screen reader friendly. And design as well. Next is like a bunch of quick points. So the first one I already mentioned. The second one is indicate elements taste properly. Like for example if you have a button on your site then you might want to design all the various states that the button could be in. For example hover will look like this. When the button is tapped upon and focused it will look like this. When somebody has already visited the link it will look like this etc. So with that people will have a clear picture of what they're exactly doing on the site. If you're tapping through the site and you're tapped upon a particular link you'll be able to see okay this link is green and is underlined it means I'm on that link. And if I press enter then I'll be using that link. So that's very important. Then maybe include a text version of your site like for example the CRA website has text version of all their tax laws etc. So you might even go for a text version if you're expecting too many people with accessibility requirements to visit your site. Then again like you can have a high contrast version. I usually use these high contrast versions at night because it reduces screen glare but it's for people who cannot read low contrast things. Like if anyone has read Docker documentation you'll see there's a technology called Docker for those of you who don't know Docker. They have a small button on the side saying like you can click it and the background becomes dark and the foreground becomes white so it becomes easier on your eyes and you can read it easily. So that's the high contrast version. The systems also have a high contrast version. So that's something to keep in mind. And include a printable version if you're expecting many people to print the pages of your site if required. That's why I say if required. And have consistency across pages. This is very important. Like there are many young ambitious designers who make so many changes between two pages of their site that they seem to be like as if you're on two different sites when you're on the homepage and when you're inside. So if there's consistency across the pages then it helps new visitors and people who are not very used to web technology is just easy. Like if you're writing all your... If you're putting the logo on the top left and people expect it there and they always expect the logo to be clickable so that you can go to the homepage. So those things are like minor things like easy for your visitors. Yeah, and remember simplicity is beautiful. So follow the KISS principle and be accessible. So next is development. This is where I'll be doing most of my talking. So what's the developer's responsibility in implementing accessibility? So since you're talking about Drupal here Drupal 8 has taken the initiative of making accessibility very important. Like they are focusing on accessibility, which is a very good thing. And there are teams like Bootstrap which offer even more accessibility than comes out of the box with Drupal. So let's see how you can add to all that accessibility. So first make sure you're writing valid markup because if your markup is wrong then various browsers or screen readers might not be able to extract the same meaning that you're trying to convey through your web page. For example, if you have a heading and make sure it's a heading tag like H1, H2, H3 and so on don't just put in a paragraph or a div and make it bold and big to make it look like a heading because it will not make any semantic sense. So the next thing to keep an eye on is the code to text ratio. So don't write like a bunch of code for something which you can do with one line of code. Make sure you're doing things optimally so it helps inaccessibility as well. Now choose your HTML elements logically like I mentioned, like if you're making a list like there are many people for example and every day example will be when people write Gmail and email on Gmail they tend to make bullet lists by putting asterisks or dashes in front of the lines so it's not very accessible like if somebody was to read that email using a screen reader they won't see it as a list they maybe they'll listen to something like dash 0.1, dash 0.2 so I've never tried that but I think that's what the screen reader will do. So if you have a list then it will say list, two items, item one, item two so that makes more sense when you're using a screen reader so use the elements wisely and like for example if you have a button then use a button element, don't use a link and make it a button using JavaScript etc. The next one is the area role like I learned a lot of things about accessibility after making this presentation so this is not only area role that I'm talking about I mean all the area attributes so area, area, however you want to call it area attributes there's one thing I've heard about them is like it's best if you don't use them if you don't have to use them you're doing just fine with your accessibility and at times when you do need to use those attributes use them wisely and learn about them so that like you can use them like for example area role is for example if you have a link which is acting like a button then you put an attribute saying area role equals button if you have a div which is acting like a section you say area role equals section so there are like a bunch of area attributes you can go through and the next one is avoid absolute positioning unless absolutely necessary because it messes up the flow of content and does bad things I'm against it but if you do have to use it use it wisely and lastly is a general point like use efficient solutions don't just use something because like it's quick etc if you're focusing on accessibility make sure what you're doing is right etc and yeah keep an eye on those like don't take shortcuts which are going to mess up your accessibility the next one again is like html elements choosing your elements wisely so like I said use ol and ul for ordered and unordered lists then ensure proper ordering of the headings to add more meaning to your content and structure to your content and choose these like new html 5 elements very wisely and use them to really add meaning to your content like for example you have a section element which helps you define a particular section in your document you have this article element which tells that this is a standalone piece of content on your site then you have a nav element for navigation header and footer the main which means like this is the main content for this page the rest of it is like navigation and other content but this is the main thing that you want to look at a site is like complimentary content and so on I haven't mentioned all of the new html 5 elements here but you can read about them the next is like use div for design elements like don't use section for everything unless you actually mean a section div is for like creating various like teamable elements on your site and just do some grouping and display block if you know what I mean and avoid using deprecated html elements that nobody uses because it's 2000s and not 90s, the 90s like for example don't use the font element I've seen it like if you create a posting on ebay I think they still have font elements in there in the formatting so don't do that don't use bi, use strong, em, etc and keep best practices in mind like for example if you're implementing a drop down menu then read something about accessibility of drop down menus like there are attributes like area has pop up, area expanded, etc so before you implement a solution know that you're doing the right thing otherwise it will mess up your accessibility then navigation like I mentioned, if you're doing drop down navigation or any other kind of like for example mobile menus then keep an eye on what you're doing because the chances are you might mess up the accessibility if you don't do it right the first point is very important like when you're using a screen reader you usually have to tap through things so in Drupal we have a link at the top of the page which says jump to main content or skip to main content how many of you have seen that? have you seen it? yeah so if you can tap to it and press enter you should be taken to the main content of the page and then you can tap through tap through the rest of the main content of the page so make sure you have that link like don't remove it otherwise people using screen readers will have to tap through all the navigation links and header elements to get to the main content and they'll just leave your site or maybe they'll punch a hole into their laptop and keep the navigation simple like don't do three level or four level navigations like we used to have in the 90s like drop down inside drop down don't do that two levels are the max if you need three levels you should be like thinking more about the first rule that I just mentioned and have meaningful link text like don't make links read like a read more so for example if you're using a screen reader and you tap through that link you'll listen to something like a link read more it doesn't make any sense but if you have some meaningful text in there like for example read more about us read more about our trainings etc and you don't necessarily need to make all that text visible you can use CSS to like put a span inside the anchor tag and have a class name like the visually hidden class that comes with Drupal 8 you can add that to the span and the span will be hidden for screens like people looking at your site won't see that text but if you're using a screen reader it will read like a link read more about us so that will make more sense for a screen reader user now next is sections make sure you keep things organized try to put all your content into some meaningful section if possible and use precise tags like don't use section everywhere there are specialized sections called headers, putters, articles etc so read about them and use them properly and define section labels like if you have multiple sections on your site or say multiple navigations then you need to add labels to each of those sections so a person using a screen reader will be jumping from section to section and they'll be able to listen to the name of the section like you are on the main content section you are on the main navigation etc and it is also possible using certain technologies to see a list of all the sections on the site on the page that you're looking at and then jumping to a particular section so if there is no name how will they figure out what they want to listen to so make sure you have section labels you can do it using the area label or area label by attributes and in Drupal 8 this is very very relevant if you have a bunch of blocks on your site so each block should be a section if you are using the bootstrap theme you'll get the sections but I don't think you'll get the area label and label by stuff so you might have to write some code and then define section labels like I mentioned all content should belong to some sections yep so images and figures like all text websites are quite boring so we usually add images to our content so make sure you do it the right way including an accessible site for example include all attributes for your images and if the image adds some meaning to the content then make sure you populate the alt attribute so if the image is merely there for decorative purposes then you can add an alt attribute and make open and closed quotes with no text inside and screen readers according to the user's preferences will not say anything about the images but if you don't write that alt attribute and keep it empty for those decorative images then every time you tap through those images a screen reader would say like an image like if you say image, image, image every time you tap through it so make sure you don't do that because it's very annoying when you're using a screen reader and don't add any alt text for decorative elements like if, for example, if you're using rounded corners the old school way which means the non-CSS way and you're using images for the corner top left, top right, bottom left, bottom right, etc then make sure you don't have any alt otherwise if you're using a screen reader you'll listen to something like, for example about us, rounded corner, top left which is not very meaningful so make sure you keep that alt empty for decorative images unless they add special meaning to the content just leave it empty and don't use all that abuse for keyword stuffing like I have in 2015 I made a blog site like blog for one of my friends not my friends actually, his wife and she does a beauty blog so she wanted like more SEO and stuff like that so she learned from somewhere that she can put all sorts of keywords in the alt attributes so even if it doesn't make sense she will just write the same set of repetitive words in the alt attributes so please don't do that because it's not very helpful alt attribute is not there for keyword stuffing it's mainly for accessibility and ensure caption for figure elements like in HTML5 you have a figure element so if you're using it then make sure you have captions to go with them if you're using the Drupal 8 Visibility Editor and you insert an image or some entities as well you end up having a figure element in your markup but unfortunately that figure element is not very accessible at the moment if I remember correctly because it doesn't have a caption related to it so it needs an area labeled by or something so I have mentioned it somewhere on Drupal.org I created an issue I don't remember so make sure if you're using the figure attribute on purpose you have a caption wherever possible and next is audio and video usually if you're using embedded audio and video like iframes etc then you should have a title for those like iframes so that it makes more sense and if you're embedding audio and video using the HTML5 audio or video elements then make sure you add a transcript or maybe captions so that people who cannot listen to the audio should be able to read the text and understand what's going on and whenever you upload a video on YouTube like if possible, if you want it to be accessible add a transcript so that people can understand your video like the auto generated captions are good to an extent for some videos but in the accessibility community they are usually called corruptions because they don't make sense at times so if you add your own then it will make much more sense and if somebody is new to a language like for example I was learning French last year so if a video would have captions I would be very excited to watch that video because I could listen at the same time and see the words and improve my French so it helps and whenever possible like you used specialized third party services because for example YouTube is a million billion dollar company I don't know what million or billion but they have spent a bunch of hours doing research work about accessibility which you will never be able to do so if you use their technology then you will get all that accessibility stuff out of the box and your client will be happy so more than the clients the visitors will be happy and tabular data so more often than not we use tables to include a bunch of data on pages so when you are using tables make sure you add a caption and make sure your captions are at the top of the table so that when you tap to that table you listen to the caption first and then you can decide whether you want to read like the entire table or not so if you go to a big table saying annual report for the year 2017-18 I would figure out whether I want to listen to that information or I just want to skip so otherwise I'll have to scan through the table and figure out for myself what's going on which is not very good and don't use tables for structuring pages because it's no longer the 90s I don't think anyone does that but I just mentioned it just in case you're not planning to change or something so use this, no don't use tables then use floating row and column headers for big tables wherever possible for example if you have the annual report that I just mentioned and it has a bunch of rows and you go beyond one fold of your browser then if the header is floating at the top you will be able to see like okay this column is this and so on so it helps a lot now next one is JavaScript so JavaScript can I rely on you and the answer is like you can rely to an extent but not for everything so it doesn't hurt to have graceful degradation in your web page so for example if you're doing a mobile menu then you might be having a button saying menu and when you click on it a menu will pop up from somewhere so without JavaScript what you could do is like just hide the menu, the button and keep the menu in the dawn like visible so that screen readers can jump to it and add a heading to it like for example main navigation so if somebody is scanning all the headings on the page then they'll be able to understand okay the main navigation is there even though I don't have JavaScript I know that the main navigation is there I can tap through it and do my stuff so speaking of menus I was building, I am still like building I have created a module called Cider SIDR which does something like this like mobile menus so what it does is like it creates a button click on it, slide out, pops out of your browser and then you have not only menus but other blocks like logos and other stuff so if you are doing accessible menus you might want to check that out because I spent a lot of hours to optimize accessibility and I was still spending more time on it so speaking of which use accessible plugins if you have to use for example the JavaScript library then read about how it works like implement it in a dev environment and see if it still keeps your site accessible or if it breaks everything for example there's this module in Drupal 8 called a contract module called chosen it makes your select like drop down what do you call them drop down menus, drop down, select elements they make them like such that you can type and you get autocomplete etc but unfortunately the last I saw it like breaks the link between the select element and its label so when you tap to that particular like select the chosen element you don't get any hint as to what form element you are populating for example if you tap to it like an input you listen to something like input element, first name and then you have something else but if you tap to that chosen thing you don't listen to anything because it breaks the link between the select element and the label so just do some research probably they fixed it by now but I'm just giving an example so nothing against the chosen guys and avoid prepping the user into workflows for example when I was new to Canada last year I was looking for some furniture and accidentally I like I was doing some Google search and I landed on a very cool site because they had nice fancy furniture but as soon as I landed on the site they showed me the site for a moment and then the JavaScript started working and they showed me an overlay with like a newsletter subscription dialog and to my surprise it had like a no close button or no way to like escape it you have to enter your email address and name it just to see their site so what I did was I cheated, I used the Chrome inspect element thing and I deleted those two divs and I went to the contact section of their site and I said your site is doing this which is not very good I don't know if they fixed it but yeah I got like I didn't like the site so I just moved on and lastly like write browser agnostic syntax so don't write something which will only work on Chrome and not work on Safari and Edge like they are not as popular but you need to respect them because they're still alive so I wish there were only one browser in this world but we wish for many things so next is metadata the power of the invisible though you cannot see what's going on behind the scenes with metadata but you need to like add proper metadata to your documents so that screen readers mostly can do the right thing with your document and things like search engines etc will pick up the site's language and other things properly so for example if you have your content in let's not say French let's say Spanish so if your content is in Spanish and you're writing something like no hablo español or yo hablo español but you don't say that the content is actually in Spanish then the screen reader might not understand depending on the screen reader it might not understand that it's actually in Spanish so it will pronounce it the English way which is very funny no hablo español I don't know what it will pronounce but it doesn't make any sense imagine if you listen to one line like this it's so annoying to your ears and if you have to read an entire page of French or Spanish or any other language being read in English it will be a nightmare people will just skip the site and go back like look for some other site so make sure you have those things and there are other like tiny attributes like hreflang and like left to right and right to left text attributes etc which we barely use but if you're doing something on similar lines just make sure you do your research and use those attributes then oh we finished the developer section that's great and time is 12.01pm so if you're on time implementation of content so like I said you can do a bunch of accessibility stuff and lose your sleep making an accessible website but the content editor can break your accessibility in a week or maybe less so unless you train them so let's see some do's and don'ts for content editors and there might be more like this list is just inclusive not exhausted so first is you could have accessibility help page like I always give the example of BBC they have a page where they say like we have done our best to implement accessibility if you have like if you cannot read low contrast text then use this and this to improve accessibility there if you think the font size is small do this that and so on so you just tell the user how they can improve their experience on the site and next is like know your visitor editor because content editors mostly like don't write HTML directly they just use visitor editor in case of Drupal it will be ck editor or yeah ck editor fck editor was the old name so okay anyway so ck editor if you're using it then make sure you know all the buttons that are available to you for example the list thing that I mentioned a while back if you're making a bullet list you could just make a bullet list actual bullet list by clicking the right button if you're adding a heading then choose the heading one or heading two et cetera properly and so on like you're adding an image then there's an option to add alt text and like the list goes on so that people know exactly what's going on on your site and they'll be able to have a good picture of how you have structured your content and where they can find something that they're looking for I usually use sitemap pages for just doing command f or control f and then searching for the keywords so for example you just go to the sitemap and then you're looking for building information or something you just do command f you look for building and you find the relevant link and then you can click on it so it's very easy then next is keep your content easy like don't start using Shakespeare in English or like I don't know your own style of creative English which is very hard to understand for people aim for ninth grade reading skills so that way everybody will understand what you're trying to convey besides if they don't understand then the entire objective of having a web page fails so make sure you're clear like in Chinese for example they keep their sentences really short and simple so if you try to do like Chinese people do like keep them short and simple break them into smaller sentences instead of going long and long making them extremely long then ensure proper punctuation because like I said someone might be listening to what you write using a screen reader so if you don't add proper punctuation then the screen reader will just read the entire piece of text as like one long sentence which won't make much sense for people so add commas, add periods etc so that the screen reader can do its thing you can use some text to speech engine to simulate or use a voice like a screen reader to listen to what you've written which will help then look out for spelling errors because not everybody knows the language very well like for example I mentioned my case with French so I'm still not in a position to understand French typos so if you do something weird I might get confused and French for example has a very well known and famous for dual meaning like if you change one letter it might mean something completely different yeah so someone might be listening to the content ok I said it already but this example is really nice so I'll mention it so for example if you are writing this thing which reads like projet énorm it sounds like it sounds like projects instead of sounding like projects and norms so if you flip the word order on the other hand you say it sounds like norms and projects which is like more clear so sometimes like subtle differences like small changes like this one also make a big difference then avoid acronyms or like explain them for example know exactly what you're talking about and you can use the ABBR element in HTML to do that and then ensure meaningful and unique link text like I said if you have a bunch of links saying read more and if somebody is trying to use the list of links option there is an option on some tools to see a list of all the links based on your page so that the person can choose the right link and go to it so if you have all of them saying read more then it doesn't make much sense like everything is read more which one do I click so use some techniques like read more about us read more about my dog and so on and okay so evaluation testing test the output and iterate so you need to pass it on to the QA team or you do the QA yourself and figure out exactly where you went wrong and if everything that you meant to do has actually been done the way you wanted to do it try to use your site with a keyboard and see if you can tap through and use it properly then test alternate versions of your site like if you made a text only version or high contrast version test them as well don't ignore them then test on mobile devices so that you know whether your site is responsive and if everything works as expected test with screen reader like if you are using macOS you have what is it called voiceover I still don't know how to turn on voiceover on purpose so all I do is I click on the Siri button on the touch bar and it will tell her turn on voiceover and she says voiceover, activated or something and it starts so try using voiceover or whatever tool you have available if you don't have any available tools and you don't know where to go for then do some research or you can use this Chrome extension called ChromeWax which I used to use before having a mac laptop then there are companies which outsource their testing to actual people with disabilities who are experienced with using sites using screen readers etc so they know more then you can use automated testing like there's a bunch of tools available out there which continuously monitor your site and tell you if it's still accessible for example we I have used this site improve tool from 0.1 so what it does is it lets you enter the URL of your site and just like Google Analytics or Google Webmaster Tools which is now called search console if I remember correctly it scans your site regularly and it tells you if something has changed during the last 7 days or so so it will tell you if you have any broken links or broken markup etc so it's a good tool to have you can give it a try and next is screen readers I mentioned this already I used voice over now earlier I used to use ChromeWax and that brings us to the end of the presentation you can take a picture of this if you want to see the slides later I'll wait for the ones taking a picture and time is 12.10pm so we are on time so merci beaucoup if you have questions speak now or forever hold your peace pardon? ok I'll make it bigger actually so this is inaccessibility I need to make it accessible ok so do you have any questions great no questions I'm so glad so yeah so thank you very much for being here and if you have any accessibility related questions you can hit me up I'll be around there near the evolving web boot where Suzanne is also there and I hope you have a great day bonne journée