[Music] foreign [Music] [Music] ER which will be about how to optimize web accessibility my name is Mateus and I'm working as a Web Solutions architect in Hamburg in Germany so yeah before we kick things off I would like to share our upcoming digital experience webinars and so yeah as I mentioned today webinar will be about how to optimize web accessibility and if you missed our first webinar introduction to web accessibility feel free to watch it the recordings and yeah all videos are available on demand after each training so feel free to check it out and we will be also offering an office hour on the 27th um of July so yeah if you have any questions feel free to join the office hour and and we will yeah um answer all your questions regarding both sessions and also I would like to invite you to fill out the feedback form which will be on the right hand side of your screen so yeah what we will go through today is a quick introduction to accessibility tooling so yeah what tools can be used to analyze accessibility issues and afterwards you will jump straight into a straight into building inclusive web experiences where I will share some advice on what to keep in mind during the design and development process and yeah afterwards I will share some best practices which can make a huge difference and to users with accessibility needs and we will finish up with a short wrap up for both webinar sessions so yeah let's talk about um tooling so um we will divide this um and part into automatic accessibility testing and also manual accessibility testing and I will tell you in a second what the basically the main difference is so yeah it's very important to point out that automatic and accessibility testing can only cover around 30 percent as it only takes um the accessibility state of your application into account which is yeah on the page load basically so only a subset of accessibility issues can be automatically detected as most tools can simulate user interaction with your page so um this is why manual testing is so important and which on this part I will cover later on and so for example when it comes to automatic tooling I mean you most probably know Lighthouse already which is a like really a variable tool and commonly used when it comes to building for the web and it helps with different audits for example Performance accessibility and yeah it also offers a score for for each check so yeah for when it comes to accessibility and the lighthouse accessibility score is awaited an average of all accessibility Audits and is based on the X User impact assessment and these checks highlight opportunities to improve um yeah the accessibility of your web app and you will basically get an overview of the past orders and also a list of additional items to manual check which is an important Point as I mentioned before and um so yeah what you could also for example use you could use xdev tools browser extension and yeah so as I mentioned X is also what we are basically using with Lighthouse because um access and and web engine to um yeah for automated accessibility testing so um yeah as I told you in previous slides um lighthouses kind of using this um assessment to um yeah calculate the score and um what I pre like pretty much about the access that um you can also see it here and the screen is um that um yeah we'll tell you kind of like okay like is it critical um like is it moderate um like okay like how how bad is this issue really and also like at the bottom which you can see right here you will also get some links which will direct you directly to um yeah how this can be sold and also you can also look up always okay like what is the success criteria of this issue and also X can be seamlessly integrated with any existing test environments so it's um yeah pretty good setup for for your um Dev environment also and also what uh yeah what is commonly used is um The Wave browser extension and which um yeah will also identify many accessibility issues and also weak issues and um yeah it's also very commonly used and also a very nice tool so yeah as I mentioned earlier um all accessibility testing tools also everyone I just showed you before have limitations so all not all weekly conformants and failures can be automatically detected so and also it means that um yeah the absence of detected errors does not indicate where the site is accessible or compliant in the end so this is why manual testing is highly encouraged and also because you really want to understand like okay what are the barriers um which for example um yeah users with impairments and will will um yeah I have to deal with actually on on a web page and so to really understand it yeah we kind of have to use and the tools um on which people with disabilities are relying on and so um yeah for example and we already touched it in the first webinar when I was talking of accessibility needs so um yeah they often rely um on assistive Technologies so such as for example screen readers and also keyboards so it's very important that we also many that we test a page manually exactly with this um with this if this assistive Technologies so for example keyboard accessibility is one of the most important aspects of web accessibility so it's very important to to validate if a page can be accessed just by a keyboard only and also it is essential to check if a screen reader will read out content in a logical order on the web page also if all important information for example interactive elements like buttons links um yeah um will we read out to to a visually impaired user and yeah you can also find a list of some screen readers here based by a platform and also um yeah links for further reading and and advice would be also to really get comfortable with at least one screen reader for example I'm a Mac User so this is why I'm using um voice over and yeah also to include it in in your development and also QA process so that you can really like yeah manually test a web page and it will also and again change how you look at HTML markup and also elements because um yeah it's totally a mind shift and um it will help you to understand and why this is so important another good way is to look at the accessibility of object model and which can be accessed and via the accessibility tree and chrome Dev tools so it's this small icon which I highlighted on the right side where you can click on when you're in elements and it will yeah show you the um um accessibility object model and as a tree and and this is basically a non-visually translation that assistive technology is screen readers for example will then use and which will when we also read out two to the users so it will help you to understand like okay like how is my website structured like um how is it when it comes to what we discussed before um yeah expected roles and if links have a descriptive name and the buttons have a descriptive name and everything um yeah we'll be read out to the user but it's um yeah but the context in the end is um yeah visible to the user or understandable so this is where you can basically check your web page okay like when you go through it do you understand the context of your page and also like the links buttons and also it will show you if you have image with an edge attributes and all this information all this important information so yeah with building inclusive web experiences I would like to share some insights on what to keep in mind doing the web design and web development process to make sure that you end up with an accessible website so for example and I mean you already know this from the first webinar but this is a very important so interactive elements have to be focusable so um yeah ensure that content can be operated through a keyboard or keyboard interface and so that yeah people um with no vision oh sorry um yeah who cannot like use devices that require eye on hand coordination but where you can really use this page just by using a keyboard and also this is also very maybe a good point to point it out is for example if you have a cookie Banner also make sure that this cookie Banner is accessible so but yeah that's all you also have but all the interactive elements like button links are focusable so that you can really see like ah okay like I'm now on the button and so you can change information also if you want to um yeah um give content or like change it so that yeah you can really like make sure that web cookie Banner is also accessible and people can get past the cookie Banner also so yeah also and it's very important that um yeah your page works well when zoomed in and so I wanted devices to never set maximum scale to one or user scale will know so because you will then basically prevent um that people can zoom in which is not nice and they will like maybe they have to use a magnifying glass and or something so it's really important to yeah make it um so people can zoom in when they want to zoom in and yeah also because you don't know like exactly in how people will use your page and which areas maybe they will um zoom in and like yeah into a smaller cradling of the screen so um yeah this is also very important to keep in mind and also um yeah it's very important to consider that um some users may not have um sufficient motor dexterity and they will also maybe have a hard time tapping on smaller touch areas so this is why it's very important to um yeah have have large enough touch area for example in Android material design we say it should be 48 by 48 pixie minimum and we can specifies a 44 by 44 as a minimum and um yeah this is true with both mobile and also with desktop and so um yeah also very important um point to keep in mind also um yeah with success criteria orientation is very important so yeah make sure that your page adapts well to Portrait and to landscape because basically it's impossible to predict how a user will Orient the device like when by interacting with your ex with your web page and so there's like a lot of many like valid reasons um to um yeah to kind of give this kind of freedom to the user so um they can decide like how they want to orientate like the device and so yeah make sure that you take advantage of the media and device queries and like also responsive design techniques uh to really ensure like that you are um yeah users will have a nice experience um no matter how the user device is oriented and another very very important point is also um when it comes to structure like how your content is structured and um so yeah um this is basically um so um yeah I so by using a proper semantic markup so your semantic means relating to meaning so um writing semantic HTML means that using HTML events to structure your content based on each element's meaning not its appearance and you can also like use this um um yeah um Native HTML elements and um um also like a proper semantic markup to kind of structure your page with landmarks for example on the right side we see here like we have we have a header we have an F we have a section and all these and we'll end up as landmarks um for your page which will also be um yeah then visible in in their accessibility tree and also um yeah people um using a screen reader will then also be able to navigate in these landmarks and so yeah very important point and just to give you an example um on what I mentioned before so as a browser passes the content which we received um it yeah it will kind of build the Dom so the document object model and also it will also build with accessibility tree I was telling you about and so the accessibility is like you have this object model I was talking about um is basically um like a semantic version of of a Dom and so yeah as I mentioned before assistive devices such as screen readers have used this accessibility tree or this accessibility object model to pass and interpret the content and yeah as you can see in this example I think it's pretty obvious and from this example that by using semantic HTM elements yeah we get a better structured document and you can see it like on the left where we don't have semantic values like okay the accessibility tree is pretty flat you just see Lego three words one word one with one word and then it goes and it's um yeah um not very nice nicely structured and on the right side where we had where we used semantic HTML elements we can see that the accessibility tree is also um yeah we have Landmark roads and also it's a better structure than we will also be um yeah better yeah can also be better navigated and then afterwards with a keyboard and also and with assistive Technologies so yeah the main advantage is um as I mentioned it's easier to navigate and so yeah this example here this GIF will kind of give you a feeling um how it works so um for example in voice over and for when it's voiceover on iOS for example you can use the router controls where you like when you rotate on the screen and you can then change between for example okay I want to navigate by using the links phone controls landmarks buttons headings I mean you can then go for this list so you don't have to go like through all of the page you can just say Okay I want to go through the landmarks which is basically you have this truck the website very well structured and you can go through all these um yeah kind of um parts of a page basically and so you can yeah easily navigate by using these landmarks and you don't have to go through the whole site which is quite cool because it makes a navigation much easier and yeah also to give you like an example um yeah how for example like maybe a worst case example I would call it um so for example we have this um very simple form and yeah we have to keep in mind that key accessibility keyboard accessibility is um one of the most important aspects of web accessibility so yeah we have these four input Fields here and we have this one button and you see it's in two columns and so yeah normally like a user for example with keyboard would just tap through the page and I would expect it to be like okay I would go from a name to email address and to search collab and to search size and then to sign up but as you can see here like the the HTML structure does not really match the natural flow of a form so in in this particular case here we go from name to short collab then we go to the sign up button and then we go to email address and shirt size it's because um yeah email address and third size so both input Fields have been placed afterwards sign up button and so yeah as you can see here like okay for for someone and for example in a visually impaired user it would be very hard to um yeah to to understand like um what is happening right now and it would be very confusing so um this is very important why um yeah you have to have a logical structure and um yeah kind of make sure that it matches the natural flow of the form and not um yeah but you don't kind of change it with um with with CSS just by applying The Styling to perform and um yeah this is very close for like for over that I also mentioned in the first webinar so web pages should have a descriptive title so for example this is here we can see um yeah we have a title and accessibility which is very important and um yeah it's essential for scripture users because um it will be read out to them and it will describe a topic or purpose of a web page and it will also tell the user in the end and what page they are on and also whether we have navigated to a new page let's say for example you want to check out process and um yeah you're navigating from step one to step two for example where you filled your address and then you're going to like um you want to put in your payment data and so it's very important to know that something changed so that you have been navigated to to a second step for example and um yes it's just a side note for example for Spas this is also um an issue which will um which they will have company like okay because um yeah since you will not have um like you will have rooting and no really like a page reload and so you have to um yeah change the value for example of the document title um manually or also what is another approach for example you could use headings for example you could have a heading after rooting and you just have to make sure that you're putting the focus to the top of a page so with this heading is being read out to the user afterwards so that the user can yeah also know like okay and where I'm now like um like where did the Navigation like happen um as am I now in the Second Step so this is very important when um yeah when um having an spa and you're making sure that is also accessible in the end and also it's um yeah um pages should contain headings and so yeah as I mentioned when it comes to structuring of um of documents and yeah um is the same with heading setting heading is also very important um to give like structure to it to a document and and also to um yeah as I mentioned earlier for sfd Technologies for example as screen readers you can also use them to provide this in page navigation which I like which I mentioned and when talking about um yeah how you can navigate from by just looking at the landmarks you can also just navigate by using the headings of a page and so you don't have to go like through um yeah for the page and you can just navigate by by using a heading list okay and for example also um what you have to keep in mind is when it comes to status messages and let's say for example you have a form which a user can submit or like when yeah a response to a CTA or something but it's um yes also um very important that these daily messages won't interrupt the user from the progress um but um yeah but they will be perceivable to the user and um yeah so basically um but yeah but the user like gives kind of gives the um kind of gets a feedback from from his interaction and yeah so also in the um what is very important um is um because I was talking about um using um Native HTM elements so let's say for example um yeah you have something which can't be done and with Native HTML event and you want to implement it another way so yeah this is what area is used for so area stands for accessibility accessible which internet applications and it's basically a set of roles and attributes um yeah which aims to modify the way an element is then translated into the accessibility tree so for example um on the right side we can see here that we have a list and yeah we have this um I received promotion offers and then on a button you can see like okay by using this um specific attributes for example row checkbox and we say Okay area checked through where we are kind of translating this for the um yeah um to uh um accessibility tree as as a checkbox and also service criminal afterwards will then not read it out as a list as you would have done it before so he will he will basically read it out as a checkbox and so also um this is how for example you could also turn a div into a button which I would not recommend I would recommend to use a button but um for example in this case you can yeah you could translate and list the item and into a checkbox and this is what area is used for and um yeah for example um also on area um let's um think of a worst case scenario which we can we can see right here and let's say for example um yeah we have this layout here where this button at the top is um yeah being used um to use um Google identity services and to log in and yeah as you can see right here it's um it was implemented with um using a div and an SVG just for the icon and so yeah for a browser um when when being translated into an excessive accessibility tree with screen reader would then just without image because for for the screwdriver it would be just an image and this is also what we would then see in the accessibility tree so um yeah what can be done like to fix this issue so yeah ideally as I mentioned you should use um a button another div but as you are using add an icon here so yeah you can kind of use area attributes as I mentioned before to kind of translate it for the screen reader so for example you could add the roll button so the the the accessibility would say okay this is a button now and also um you could span and use an area label to kind of just make it um yeah visible to the stream either bit okay and this um icon has a label which would be then for example we can see in the right side it would be login with Google and also um you would add a tab index 0 which I told you about in webinar one which will then put this element into the natural Focus order so that you when you tap through the page you will um yeah this element would be in the natural Focus order and would also um be um yeah quite enough we are focusable um in the end and um yeah since this is still a div another button as I mentioned the native hm elements they already have a lot of um accessibility functionality built in so when we would tap through the page and we will for example would end up on this um on this um div and you would then use enter nothing would happen because it's still not really a button so you would then have to also add a listener in JavaScript to kind of detect this key down and also to make sure that you can yeah kind of um interact with this button with um using varanta key so you can see from this example that um yeah by using uh not native HTML events it's kind of um yeah you're kind of producing mobile photo on your site so I would say always the main takeaway for for the developers would be from this slide I always try to use a native HTML elements and yeah because they basically have the keyboard accessibility built in already and will also save you a lot of time in the end so and yeah we had this example with um with input and systems on forms earlier so um yeah I just want to point out that um yeah you should just make it as easy as possible for the users for your users so um yeah for example don't make like your users guess what kind of information they have to put into an input field so provide um yeah labels and clear instructions as you can see here in this slide for example foxy security codes like say it um very clearly to the user and also like okay for which kind of free digits you mean so um yeah that the user can kind of um use this kind of an assistance and knows exactly how he she should put it into this input field and also when it comes to error messages um yeah that you're like really make sure that you just not um changing the color of a like of a field or something yeah make sure to to have really like um provide a text error message to to the user for example as you can see like okay please enter a valid email address so the user knows they're going okay like I have to like yeah use an email address and not my name or something so make it very clear to to a user so yeah now um I would like to share also some best practices and which will yeah make a big difference um for um yeah users with visibilities so for example and which yes I think I guess is something which you maybe already saw is um at the skip main content or um yeah skip to content and um yeah it will help um so motor impaired users to navigate mobile pages and we'll also enable them to jump straight to the content they want like without going like let's say for example you have 20 30 Links at the top of the page or something and you would have to like go through all of them so this is a nice thing to just um kind of bypass these blocks by yeah jumping straight into the content and um yeah normally it will appear when you tap um the when you when you when you press the tab button for the first time on a mobileover page for example it will then appear and you can then um yeah skip um right to the main content which is quite cool and which is um yeah come and use them let's practice also what is a very nice is um yeah to kind of um enable the user to report barriers if we went into one for example and so this is um a link which you will just place or in your footer for example or like end of your page and yeah a user can then um yeah click on it will land on the form and we can basically provide some feedback about barriers which exists on your page which is really cool and um also something which is um happily happening um quite often um is that yeah like for example phone numbers are not accessible which is not very nice because um like just Yeah by getting this number read out you can't call it right away and so yeah if you um basically implement it the right way people can yeah just call directly and just by clicking on it the mobile phone will um um yeah kind of um translate it into this um yeah call only click or like I'm not sure like how it's called but yeah so it will basically call um number right array which is also very cool um as practice so yeah um so let's wrap up um both webinars and um so as I mentioned earlier um automatic testing is not a replacement for manual testing and so this is why it's very important to kind of yeah keep these basic checks for accessible design in mind and so that you make sure that a website meets these basic checks for example make sure that your target target size is um yeah 48 by 48 and you can see it in the dev Tools in a browser also make sure that the contrast meets the minimum requirements from recack and as mentioned you can use contrast Checkers also make sure that um yeah labeled interactive elements um I'm place so um but on like when you use a screen reader and they will yeah all the interactive elements will be read out to you and also very important is um yeah to manually test your web page with a keyboard so that you know like okay is a tab order logical and yeah also that was a follow-over visual layout um how is it when it comes to focus indicators are these are clearly visible so yeah try to tap on the keyboard through your page and also use the screen reader and to yeah kind of do this manual check on pages and um yeah the key takeaways basically what I mentioned before is um so use automated tools because um yeah I will they will basically um tell you like okay um on the like when it comes to the page load States what kind of accessibility issues exist so you can also get a good feeling and try already like you can very easily fix these ones and yeah for example um contrast and also empty links empty buttons this is something which automated tools can yeah Will basically analyze and we'll tell you about but also very important is that you do a manual testing and so yeah to really like see when it comes for example when it when it comes to focusable elements but um yeah for example you can get past the cookie Banner but you can get food checked out like all these important functionalities which you will have on your web page so make sure that these um yeah can be accessed um by users with impairments and um so this yeah can just be um basically analyzed with Middle testing and yes always good to comply with these basic checks I just showed you on the previous slide yeah thanks for your attention and as I mentioned before I would like to invite you to fill out the feedback form which will be on the right hand side of your screen and yeah I'm really looking forward to our office hour where you can yeah basically ask all your questions thanks [Music]
2023-07-28