Evaluation Tools – Tutorial

Hello everyone, I am V Barat. Welcome to today's session about the web accessibility evaluation tools. So we in this session we will mainly deeply dive into the topics of the wave evaluation tool and the Google lighthouse evaluation tool. So coming to the agenda what are accessibility tools before we jump into the technical details. So accessibility tools are nothing but web. It is there are web services which can be installed or you can also take a URL of any website and through this web accessibility tools you can find the errors and what are the barriers that are facing in the website like the uh elements HTML elements and image elements etc. So basically it is telling about how interactive the website is, how responsive the website is and also how well accessible for the website is for everyone including the users with disabilities, users with cognitive uh defects etc. And also we will be seeing uh in this session apart from not only the web accessibility tools like how it can be extended to mobile interfaces uh like which tools can we can we use in the mobile interfaces like default tools for Android and even in the iOS and at the end of the session we can also compare like uh what are the general differences between these tools. Uh if any tools like uh providing much more effective generated report than other tool or what are the similarities and uh who benefits from these tools and also what are the limitations and all what is the purpose like uh it is mainly used by developers. It can be used by anyone like developers or even students like who want to design a website or who want to test like how the website uh how much the website is accessible how much the website design elements are how effectly implemented and all. So for the testing purposes not we shouldn't rely only on the web accessibility tools. First we generally check up on the manual testing. In every in every scenario of web evaluation manual testing is must and mandatory. Then then we can go for the automated testing. And before this and all we also must check the compiler checking whether it is following the WCAG guidelines and also it is aerance to those guidelines and it is not crossing any limitations apart from the WCAG guidelines and all. So as I mentioned there are many more web accessibility tools uh in the internet. You can also even search it up. But here in this session, we are mainly focusing on the wave evaluation tool and also Google Lighthouse. So these can be installed in the web interfaces from many categories such as the browser extensions and online services and desktop applications and also the command line tools which are defaultly installed in the web services or web browsers and what are the what are those evaluation tools. So how these tools work from the front end or from or how these tools evaluate the whole interface of the website. So basically uh it will do the code analysis of the whole website front end which is basically the HTML part of the interface. uh as you know HTML is a building block of the interface UI and it then inspects the DOM evaluation and the the how how how well the JavaScript elements and CWS elements are well implemented in the interface. Now introduction to the wave tool. So wave tool like web evaluation uh web accessibility evaluation tool is developed by the web IM which is the web accessibility in mind. So wave tool is a free and opensource and also it can be used by anyone as there is no registration or anything. It is a actually free and open source and also it will it has like visual features such that anyone when while testing the website can easily locate or detect what are the errors and what are the barriers in the elements and what can be changed in the website interface. So these these type of categories and these type of analysis can be produced by the wave tool. So it is basically much easier to analysis uh rather than any other tool even the Google lighthouse tool and also it can be installed through multiple ways like it can be of web based or you can also install it from the Google Chrome uh web store as a plug-in to the website and it will automatically generate the analysis report of the interface. that you have installed in the web browser. So why should we use wave evolution tool? Uh first point as it is very user friendly like it has very clear visual cues and clear visual uh explanations and it also locates the uh uh defect elements very properly and in very efficient way. Such that also it can it gives a clear explanation in detail for every element which are causing any accessibility issue or any error issues or even it will alert the uh it it also has alert elements which need which has a potential risk in the accessibility part also coming uh in the educational sense it also like helps many developers and many students to learn what are the accessibility princip principles and also what WCAG guidelines should be followed in while designing a interface uh on any of the websites and also mainly because of its realtime analysis it will generate the instant analysis of that interface uh with much more accurate results than any of the tools that is present in the web services. And coming to its advantages like uh we don't need much technical knowledge for testing the wave tool like it can be used by any of the users like even elders can also understand what are the analysis that is generated by using the wave tool. uh as it has better visual cues and all and also it has multiple report formats for better understanding for any of the user like summaries and details and documentation views. As I said uh like it has open source benefits like uh it is free for all and also the you can also check out the code uh the source code for review and all and it can be also integrated into the development workflows like what HTML code can we manipulate to make the website much better accessible for everyone. uh so also the advantages as I mentioned like explains each accessibility issue uh that is the what errors like uh if the if the image doesn't have any alt attribute type or what are the area issues it has and all so how to use this wave tool so there are two methods as I mentioned there it can be installed through multiple ways uh One is that it we can visit the wave wave.im.org where we can where we can paste the URL of any web interface that we want to analyze and then we can click the vit to start the accessibility analysis. There it will generate the whole report. Second method is the direct web browser extension. We can install the wave extension from the chrome or fire firework store. Uh I can show you the demo now. So as you can see in the in the Chrome web store we can search search it off web evaluation tool where we have installed it as an plug-in. So after the installation the plug-in will be added in the extension session here. So how to test the web validation tool? Suppose let us take an example any web interface. Suppose the passport saver portal as as you know like the government passport sa portal have many accessibility issues and also it is it is much more challenging uh to elders or anyone like comparing to any other interfaces. So in the passport saver website after opening the interface we can go into the extension uh extensions and here when we click the wave evolution tool it will automatically on the analysis report on the left left side of the panel this generated analysis is of the like uh of this interface passport sa portal. So uh as you can see this interface has 36 errors and 36 contrast errors, one or one alerts and four well implemented features and also it it mentions the structure structural components of the website and also the area issues and also you we have to check the aim score here like it is also a main part of the wave evaluation tool. So what is the aim score? Uh it is nothing but the measure of impact of page accessibility issues generally for the users with disabilities. So uh where it has number where it detects number of detectable errors in the interface and the error density which the number of detectable errors by each of the page elements and how much the wave alerts how much the interface have have alerts like like a possible uh accessibility issues or further accessibility issues that can be solved. So if a website has much more like uh AI if a website has much more aim score uh it generally means the website have much more accessibility than that of the any other website which have lesser aim score. But it also doesn't mean that high aim score does not necessarily indicate that the page is highly accessible or compliant with the accessibility guidelines though any website even even the aim score of 9 also have some of the issues in the interface. So it doesn't necessarily mean that much score means not much accessibility. So here you can see how the detailed structure of the defects in the interface. So this website has 36 error elements and each of the error error elements are divided into category. So there are 28 missing alternative text and one missing from form label and one empty form label and six empty headings. So what what does this mean? So coming to coming before. So here is a styles option. When we of the styles option, it will generate it will generally look into it will generally gives a clear picture of the wave evaluation uh markups that the as you can see clearly what each of the element what issue it has been talking about. So uh for generally better view uh visual purpose we we can we can check with without the styles on option. Coming to the missing alternative text what does this mean? So if any of the visual elements suppose here in the language Hindi uh it has missing alternative text meaning the image alternative text is not present when like any users with disabilities when used the wave uh evaluation tool when user with dis disabilities when used the screen reader option they won't able to know what the image alter image text is readed. So coming to the demo uh how we can use the web evaluation tool in the web interfaces. So uh we first I will show you the method one where we can install it through a first I will show you method two where we will install through it as a browser extension. So uh we can check it in the Chrome web store where it is already present web evaluation tool. From it you can install in the in the homepage extension. So here in my system I have already installed the extension. Uh you can also try the extension in your in your browser. So after installation of the extension uh we can take any portal. Uh for example we will choose the passport sa website as it has many challenging elements in the interface UI design. uh as it is a government website many elders and even many uh aged people between 30 to 40 years old also facing those uh accessibility issues in the government websites like passport website and also even even in healthcare websites and other card websites etc. So we will choose passport website. So this is the interface of the passport website. So while while in the interface here you can see in the extensions tab wave evaluation tool. So when we click the wave evaluation tool it will automatically generate the uh whole report of the interface. As you can see the report is in the left panel of the interface where it shows how much defect or how much errors and what are the potential uh risks in the accessibility uh in this interface and also it it also tells like how how well the features have been implemented in the interface and also it it tells about the structural components in the interface and also the area elements. We will talk about the area later. So also uh it also in each of the website it also generates a score which is the aim score. Uh aim score is nothing but it is a measure of impact of uh accessibilities on the web page where any user like user with disabilities or user with cognitive issues uh would like to uh when they access the website like how much it is detecting the errors and also the error density which is nothing but the uh errors caused by the elements in the website and also the wave alerts. Alerts is nothing but the potential barriers of the website which can be solved easily. So uh aim score is generally counted from 1 to 10. So as you can see a score of five indicates that the website is averely accessible for the users. But also we should keep in mind that the higher aim score that doesn't necessarily mean that the website is following each and every aspect of the WCAG guidelines and it has much more accessibility than any of the website. So even aim score of 8 interface it also have contains many issues that we can uh generate through the wave evaluation tool. So uh the it has total of five categories in the as you can see in the left panel of the generated report uh details reference and order structure and finally the contrast. So we'll come into the details. What is this detail session? In the detail session, it will capture like what and how much the elements are causing the uh web access accessibility issues in the interface. So for much more visual view of the detailed report, we can al also uh switch off the styles component which is the which is in the top of the generated report. Here when I off the styles component uh it it is much clarity like it the resource complexity also reduces. So we can have a better view of the elements which are causing the accessibility issues. So uh here it is mentioned 36 errors and also it will give a detailed category of what were uh the error components like as you can see here there are 28 missing alternative text and form label missing form label and empty form label component etc. So what are these missing alternative text? So when we click on any of the components for example, so on the when we click click on the visual element of this component, it will show that it will show detailed uh reference and it will also even show the coding component where the issue is occurring. So what is this issue? Missing alternative text. So basically if any users with disabilities if they try to implement any screen reader access or voice guide access in the interface. So the element doesn't provide the information about the image element. So uh that is the meaning of the missing alternative text. So generally it for every image element or any of the uh text element it should contain a uh alternative text which which we can also call as alt attribute. So uh what it does is when the alt alt text is mentioning what is the image like the image is about the national call center like it should have a alt attribute uh text or even in the even in the technical terms we can call it in the HTML like here there is no alt attribute. So when we call a alt attribute text it will generally mentions that the image is a national call center. So users with vision impairments or user with cognitive uh departments depart department uh when they use screen reader option they will easily uh understand okay this is the image that have been mentioned here. So here the there are 28 missing alternative text meaning that the website should be much more developed developed and improved for the overall universal users mainly impaired users and also the users with cognitive issues. And coming to the next error one missing form label. What is this missing form label? So a form control does not having a corresponding label. So labels in the sense so every any drop-down box or any uh text field box will have a label that mentions that this is the drop-own box. So if uh as I said like if any impaired users using the screen reader uh screen reader option. So when when the screen reader is uh coming from top to bottom, it doesn't necessarily mention that this is a drop-down menu. So for that purpose uh we should also include the form labels for that instance. Mentioning that this is a form label and mentioning that this is a map element in the interface and etc. And coming to the empty form label. So it is generally a it is generally a it is not implying anything on the uh search bar or anything. As you can see uh here in the search bar there is an empty form label meaning the form label is present but it doesn't contain any content in it. What is that content like? It should mention it is a search or form helper label such that when the screen reader option is used it is uh it will tell that is this is a search option. So both are similarly same in the aspect of mentioning the content for the screen reader option mainly which is used by the impaired users and any cognitive uh issue users and coming to the empty heading. So what are these headings? So as you can see uh in the interface there can be headings from H1 to H6 which are arranged according to the uh structural components of the website. So what is this empty heading? Uh here you can see uh the H4 a heading that contains no content. So uh while any the screen reader option is used or any accessibility tool is used, it should also mention that this is the heading and this is the com content part or else it will merge those heading and content and the user will think that okay uh the heading is also included in the content itself. So for differentiating between the heading and the rest of the part of the content these empty heading lab tags are used in the interface. But as you can see these errors like these elements are not implemented well the labels and the alternative text and the alt tags and all. So next coming to the alerts. What are these alerts? So alerts are basically the potential risks in the website but those are not particularly errors but that can they can be solved. For example uh here there are two orphaned form label. So what is this form of orphaned form label? So offended form label is generally uh when the label exists but it is not linked to any of the input field. So the label is there visually but the screen readers cannot contact it to the correct input. like as we can say the label is mapped improperly to the text or any of the image element. So basically uh it is marking wrong and these are the some of the other alert elements like missing first level heading which basically uh the sess the section have doesn't have any uh H1 heading. So H1 H1 is the main heading and H2 is the subheading and H3 goes on with the subheadings and all H1 to H6. So 10 possible heading alerts and for much more uh reference of what it is mentioning. You can also check here. So it will uh go through the reference tab where it uh it will detail explain what it means and why it is occurring and how it can be resolved and what are the algorithm like uh how it is analyzed and all. So text appears to be a heading but it is a not heading element. So uh as I mentioned H1 to H6 providing important document structure and also the outlets and navigation. So uh what to do for solving this issue like uh if the paragraph is in a section heading like the normally the paragraph should be in the below of the heading section. So we should use something H2 or H3 etc. And also you can see the guidelines what it is following and all. So these are the small text uh issues. Uh it can also uh also improve like uh if we increase the pixel pixels amount and all and for justify text. Uh what are these justified text? So if any large blocks of elements or any of the uh word spacing uh and uh like word alignments and sentence alignments. So these are the justified text and these can be changed from the html front end. So coming to the features. So features is a actually positive impact of the interface. Uh where where it generally tells about like how well the accessibility uh features like uh uh the alternative text. Uh here you can see the alternative text has been implemented well uh in these components and also uh there are empty alternative text in the uh without any content like uh uh in the map section for example we don't need any uh alternative uh text for example alternative text is basically a null or empty alt attribute. So what does it mean actually? So uh like if the image like does not convey or any content of the image for example in the here in the map section for example while using any screen reader option it doesn't necessarily uh like mention each of the content in the map right like even even if we use voice guide it doesn't like there will be an error so what does it in to ensure that it is ignored by screen reader and is hidden when the images are disabled. So when we use the screen reader option it will uh generally reads or any causing any uh issue like uh what the screen reader purpose so it will distracts for example I'm using the screen reader option for just reading out of the content but while using screen reader it doesn't only specify to a specific portion of the part it will directly come from the top to bottom where it reads uh wrongly the contents of the image elements which we don't need. So for thus for that purpose we will use the alt attribute as a null value. We should we shouldn't use alt alt attribute as null in the content part. But we can use the alt attribute null in the necessary part where we want the screen screen reader option uh not to read that part for as I told we don't need to read every content here in the map for example Shimla Chandigar and any amala etc. uh it will it causing a time waste. We we are using screen reader for mainly for the purpose uh for the content purpose. So as you can see these are the some uh components in the features like uh a uh image is uh well implemented with the alternative text and also a skip link also used. Uh what does it mean? Like uh the uh link is highlighted uh with the blue contrast as you can see here and also the skip link target and also the lang what is this language uh so identify in the language of the page like uh uh the portal the interface is in the English language or if we change it in the any other languages it will show uh on the top of the web page. So it these features are well implemented. So uh it is much more accessible. And then coming to the uh structural components. So what are these structural components? So uh before the structural components uh like I have to say that uh every interface has structural components like the headers and then it goes to the navigation part uh navigation and then again headers and all. So headers the main portion part and bottom of the website are the footers here as you can see. So, so how well the structural elements have been placeh placed in the interface as I mentioned H1 to H6 H6 are the uh structure structural and headings sub subheadings etc. And uh how well the unordered list have been presented. So unordered list is nothing but the uh set of like u uh for example we can take uh the menu menu header where uh in the menu section like it will it has many options such as login sign up etc. Those all elements come under a unordered list. So that that is what it uh implies. And then four inline frame. As you can see what is this uh inline frame? Uh uh in the bottom of the website any if there any email exit email or contact details exist uh it it generally depicts that the inline frame and so these are the structural components and coming to the areas. So uh there are 157 area issues. Uh so what is basically area? Area is generally accessibility rich internet applications. So uh it is it is basically it is basically a supported element for the accessibility issues. Uh meaning uh if uh meaning if we use area in the element area as a element it will mention like uh uh area label equal to hidden. What does it impact? It will hidden the unnecessary elements in the website. Area label equal to as you can see area labels. So area label equal to footer menu. Uh meaning in the bottom of the web page uh in the bottom of the web page which is a footer section there is the footer menu. You can also check uh the details of the what does the label uh implies and all the attribute is present or not. And also you can al uh on the technical side you can here click on the code code even we can check in the HTML side of the code. uh as you can see uh coming to as you can see in the table index uh so the table index value uh is generally if it is less zero or less is present what does it it mean actually you can you can check in the area tab so basically uh in into in the keyboard navigation order you can easily navigate into any tab key if like a value if it is less than zero or even typically minus one it removes the an element from the keyboard flow. So uh these are the area issues to area button issues where like uh it will so area is generally it is alerting roles to each of the elements in the interface for better accessibility like the role is button and if we coming to the any uh image image content though so it will allert the role as image and if we go into any of the header or even footer part the role is footer and the role is header etc. So these are the area issues. So and as I mentioned the uh it also have the order ordered uh section of the interface. So first the first order comes to the skip to main content. Uh so each are connected in the interface. So how well the website is connected uh to each of the components in the website the register button and also you can see uh when when I click the here the log button it is connected to something and if I click if I clicked view more then uh it will automatically uh goes so how well the interfaces are connected and how well the components are connected well in the website. So, uh the structural part uh which I have already discussed like the headers part and the navigation and the main content part region and uh at the last end of the web interface which is the footer section. So coming to the contrast session. So generally every uh the contrast session implies that uh how well the text and the background color like are well well arranged and is it uh really visible to the any uh user uh for universal users like users with cognitive defects or users with visual impairments etc. How well the contra contrast is maintained in the interface. As you can see here the contrast ratio is 8 8.59 is to1. So according to the web WCAG guidelines the contrast is generally should maintain 4.05 is to 1 for the basic WCAGA contrast guideline. It is the standard ratio like 4.05 is to1. So here what does this imply? WCAG guidelines have like uh structural a components which implies the uh critical mandatory for the contrast issues. For example, WCAG uh it is the basic accessibility contrast that should be implemented in any of the interface. So it is basically a default contrast mode that should follow in the website interface. And next is the WCAGAA uh where it uh it will where in we can see uh if the for the elder users the contrast should be much and much better and we should only mainly focus on the uh contrast issues for the for for users with for aged users and all. So the 4.05 05 is to1 is the standard contrast mode for the WCAGA 4.5 is to1 is the standard A WCGAA. So coming to the contrast session so what does this imply? Uh so basically in the interface where the like text elements and image elements so how the contrast is well settled settled compared between the background and the element. So here you can see so here you can see the contrast is well implemented. As you can see it differs from the background which is white white in color. Uh so how well the back uh contrast uh mode like it is uh you can check in here in here in the contrast ratio. So what is this? As you can see in the WCAG guidelines, it has levels of uh contrast contrast ratios. So WCAG it is the basic level for which a website or uh web interface that should follow the contrast ratios in the website. So uh here the standard standard contrast ratio is 4.5 is to1 for normal text and for normal elements and all and next for large text to meet the next level which is the WCAGAA. So it is like a hierarchy uh where the basic requirements is the WCAGA guidelines and next it goes on to the WCAG AAA guideline and so on. So but the standard structure is that of the 4.5 is to1 ratio and uh for the level A which is the WCAG AA so one for normal text so 3 is to one for large text and all or it will be something like 18 points system 18 points and all uh and uh level Okay. Level WC level. It also should follow 7 is to 1 for normal. As you can see see when I move this meter from 7 above 7 it will show passing. So uh for for the valid of the WCAGAA guideline it should meet the requirements 7 is to one as a basic requirement. This is how we can use the wave evaluation tool in any of the interfaces and also uh you can directly uh use in the wave.webim.org org where we can directly uh paste copy paste the web URL it will directly generate the report similarly uh which we used in the which we uh used as in the extension I don't know why it is uh coming error I think the URL might be wrong but uh you you got the understanding like how the both methods can be used right can direct directly copy paste any of the URLs. For example, other website where you can paste in the URL it should gener it will generate uh generally generate the report by itself. So these are the two methods. So how the wave evaluation tool that can be implemented as I mentioned like the summary panel and the details pan. So five panels where it detail detailedly explain the analysis report like what what elements are causing the issues and all. So uh these are all which I have covered already. The red meaning uh it has the missing alt text and uh what elements are causing and all etc. And yellow causing the alerts alert systems like potential barriers which can be reduced and green uh green visual meaning uh that it how the how it is properly arranged uh like how the elements are properly arranged in the website and all and blue is the structural component in the uh analysis report. So uh for we can of the styles of for better visual view of the uh elements which are causing the issues in the accessibility in the interface and also as I've mentioned area. So area is basically uh a support system for the uh uh elements in in the access for the accessibility purpose. So it will allocate roles for each of the element for example area label area hidden and area footer etc.