Evaluation Tools – Tutorial - Part 2

Now coming to the Google Lighthouse uh tool. So uh similarly to the wave wave evaluation tool Google lighthouse is also a open sources opensource automated tool uh mainly uh improve mainly developed by Google for the for better uh web page quality and it can be uh accessed in any of the interface from the front end. So as you can see uh here light uh the lighthouse accessibility features it is following a uh wcag uh 2.1 compliance testing compliance uh testing and uh it it can be also used in the mobile accessibility testing also uh where we can generate the report for mobile and also the uh web browser. So what are the key advantages in the lighthouse which are apart from the wave tool. So it is integrated in the chrome dev tools and uh uh also it generates a comprehensive reports uh like a whole detailed report analysis uh like much more better analysis rather than that of the wave tool. So basically wave tool uh is a basic standard uh visual analysis for any of the users to understand uh the main compon main errors and what are the main elements that are causing in the uh causing issue in the interface. So but lighthouse uh lighthouse on extension it will basically generates a whole uh report uh on each and uh every corner of the interface. Uh so basically it is a much more detailed report uh than that of the wave tool. It is it also have a scoring system which is the main category in the lighthouse. uh it will have a 0 to 100 accessibility score as you can see it also have like C uh CI and CD integration possible which are which are basically the dev tool containers in the HTML session. So uh much more technical report it will generate much more technical report and uh how issues can be solved uh in the technical end of the interface and all. So how to use the lighthouse tool? So it also have two methods actually chrome uh we can go through the chrome dev tools where we can search the lighthouse tool. Uh on the lighthouse tab we can check accessibility. Uh on the category session we can check category and we can choose device which is desktop or mobile simulation like it will generate the report as per the user need like desktop report and mobile report of the same interface or we can use web based lighthouse like uh we can visit uh the page speed.web.dev And we can enter the URL of the website that we need to address and it automatically runs the analysis. And uh we can also install this as uh an extension similar to the wave tools and let meuh show you the demo of how to use the Google lighthouse tool. So for example on the same website passport s website let us take this interface and uh so when we doubleclick and when we go in into the inspect section of the website. So here also it is by defaultly implemented by the Google uh here lighthouse where we can choose the options or choose the mode like uh we need the navigation which is which is the default mode and we can choose the device type like uh do do we need the mobile report uh analysis or do we need the desktop uh report analysis where we can select the desktop here as we need the desktop analysis. So when we analyze the page load it will take 1 to 2 minutes for generating the whole report in in the wave evaluation tool it will generate the report in by seconds but here in the lighthouse it will take some more time than that of the wave tool. We can also like view the whole report in any in in the actual browser like here in the three dots we can click and go into the open in view. Here we can clearly see the analysis report of the interface. So in the lighthouse report there are four categories performance accessibilities best practices and SOS. So but apart from these three the lighthouse report generally focuses on the performance like we should mainly focus on the performance of the interface. So here the website performance is 89 and these performance metrics are calculated from these five components which is the first contentful paint. So what is this first contentful paint? So when the interface is opened in in any of the browser. So the first contentful pain part is that in the interface what is the first resource that is loaded when the interface is opened and next what is the largest contentful paint. For example in the interface if there is any large image or large content or large resource that is opened. So how much time it is taking for the large resource part to load in the website and what total blocking time. What is this total blocking time? Uh so the time to block the JavaScript blocks for rendering the elements. So it is basically for any elements to load and for any elements to how much it is taking to block those JavaScript elements. So here is the speed index. As you know speed index is generally how fast the web web interface is loaded and here is the cumulative layout shift. What is this cumulative layout shift? So basically when any advertisements are loaded in the interface uh if the advertisement is loaded in the interface uh the the web elements that will rearrange when the advertisement is loaded in the uh interface uh which cause causing distraction to the user. So basically uh a shift to shift of the elements in the interface when the ads or any external cookies are loaded into the website. So in the lighthouse report here you you can see it will give a detailed analysis of each of the components like it will run a diagnostics and also it will mention what are the uh insights of the components that are causing the accessibility issues in the interface and uh how what are the audits that are passed in the website for as you can see uh for each of the for performance some audits are run and for the accessibility uh some audits are run. So how much audits are passed and how much are ignored and etc. So performance is basically the whole performance of the interface according to this metrics and uh accessibility uh uh score is generally how much accessibility elements how how much the elements are aligned in the uh how uh like how proper the alignments are made in the website and all and coming to the best practices. So best practices is generally like is the website following standard HTTP compilence and is the website following WCAG guidelines properly or not etc. And SEO SEO is generally uh is the website is mobile friendly or even if the website is uh responsive or not. So basically the technical part of the web accessibility uh accessibility issue. So in the diagnostics as you can see it is literally saying that avoiding large layout shifts meaning if any of the table or anything that is loaded in the website like it it can be rendered or it can be solved such that we can minimize this uh large layout shift. It also mentions that estimated s how much how how the effective it can be implemented and how it can be improved and all uh like uh if the large contentful paint image uh the if the LCP element is dynamically added to the page uh you should preload the image like in order to improve the LCP time it will uh you can save here 350 milliseconds And as I have mentioned the like in the best practices uh we can uh so this website this interface is using HTTP 1.1 server. So for much better improvement we can use HTTP2 server and etc. So here we you can check each of the diagnostics that can that are mentioned here. uh as I mentioned reduce unused JavaScript elements such that the website will reload or load much faster and saving the uh transfer size and uh timing of the time to reload those elements in the interface time to fetch those elements in the interface. So these are some of diagnostics and here are the pasted audits like which are successfully which elements are successfully passing the accessibility guidelines in the website. uh you can also see here area which I have mentioned like uh does not do not matching their roles like uh what what elements do not match their roles in the interface and all you can change in the HTML part or even the JS part code in the interface for a better UI design and all for better accessibility guidelines and all and also the contrast error here. So basically it will generate the uh much more detailed report than that of the wave tool like uh you can see for each of the category like best practices SEO each having passed audits and what can not applicable not applicable and what are the unnecessary elements that can be removed to save the rendering time of the JavaScript elements in the interface and how much each of the category like perform how performance can be improved and how accessibility how best practices can be improved by reducing these loads in the website and etc. So for each of the SEOs for each of the categories it have separate uh components which which are following the audits and which are not unnecessary or not following the audits and which can be improved and etc. Basically lighthouse is much used by developers and wave tool is also used by developers but wave tool is like common for any of the users. Lighthouse is generally used by design developers or web developers etc. for finding out much more detailed insights and diagnostics what accessibility causing elements uh accessibility issue causing elements in the interface and how it can be solved that is how lighthouse uh evaluation works and as I mentioned we can also access lighthouse from the page speed web.dev and even we can it it it also have it also have when we search in the uh lighthouse extension in the Google engine we can also go to chrome web store and add it to the chrome as an extension where we can implement on any interface similar to that of the web evaluation tool as a extension Here it will ask whether the it is for the device mobile device or the desktop device etc. Then we can generate report it will take time and so it is mainly uh by extension uh or by in the page speed.w web.dev dev it is basically uh for much more visual view of the report uh for users who can't able to understand the uh actual report of the lighthouse. So you can use any of the methods like uh either as an extension or either from the front end part in the lighthouse se section which Google have been installed or by default it is actually there in the inspect section or in the p page speedweb.dev. So this is how the lighthouse tool also can be uh used and the evaluation process of the lighthouse tool. As as I said, if the website has 9200 score, it generally means the website is uh website has good accessibility features and if the score is ranging between the 50 to 89. So it has some potential issues that needs to be fixed or it needs improvement in the accessibility features of the uh interface and all. And if the score is between 0 to 49 basically it has poor f uh accessibility elements in the issue and a much longer much much bigger improvement needed in the website as I as I have seen as I have shown like the common audit elements the color contrast and the form labels image al text as I mentioned in the wave tool evaluation part and focus indicators is nothing but the uh the keyboard navigation visibility. basically uh uh the mouse cursor and how how to navigate to the next page, how the navigation elements are well implemented and so uh the report statistics as I have mentioned like it mainly focuses on the performance areas, accessibilities, best practices and SEOs which so uh it also like reports the core web vital Like I have mentioned LCP the large uh uh it also reports the core web vital as I mentioned the metrics which are used for the performance and accessibility and all uh which capture like how fast the content loads how responsive and uh how the JavaScript elements are lo uh loaded in the website and all. So the past audits and the failed audits and what are the manual checks that are needed and the irrelevant part in the interface. So then what differs between this uh wave tool and the lighthouse tool. So basically wave tool is like uh can be used by two methods web based and uh browser extension but lighthouse can be implemented in several ways like the chrome dev tools uh where we you can uh go to the page speed.web.dev dev and uh give the URL of the website. It will generate the report automatically and command line command line interface where I have shown uh the double clicking fe feature where we can go into the inspect se section of the of the front end of front end dialogue box where the lighthouse is defaultly installed by the Google and also the uh it it can be installed uh it can be installed as a browser extension similar to the web. So it has a separate report interface in for the lighthouse tool and uh so wave is like beginner friendly as I mentioned it can be used by any of the users like without the any technical background or technical uh knowledge or how to analyze those reports. So for the for those users wave is better better and much benefited tool for them. So for the and for the developers part uh lighthouse is uh commonly used in the uh developers part and also it wave has limited automation where the lighthouse has the strong CI/CD uh strong de uh Dave tools integration where it generates the whole report like uh covering each and every corner of the interface which is not seen in the case of the web evaluation tool which generates only basic issues in the website causing the accessibility issues. So these are the comparisons between the wave and the lighthouse tools. uh when to use the when to use which tool as I mentioned like for a wave like if we if the user needs quick visual assessment of the analysis report and uh if any non-technical person want to analyze the uh interface of the website and etc and also for educational purposes etc. So and uh coming to the lighthouse uh where we need a detailed and performance statics of the interface and uh for for the design developers and if we need much more automated testing in the CI or CD uh development etc. So basic in simpler terms what is use wave for immediate visual feedback and lighthouse for comprehensive analysis which have different perspectives on same issues. Also these two tools also come with come up with some of the limitations such as like uh where you can only check by page by page not the whole user flow like the login to the uh main page and next to the application page. No, it can only check a single interface and it will generate the report for that report for that page only. Similar case to the lighthouse also but lighthouse focuses more on performance and also best practices uh even in the technical uh implementation uh of the for the accessibility. how much uh we can change in the technical implementation for much better accessibility and also uh it only detects uh code level issues uh but not the content accuracy. It will detect the HTML part of the code but not the content which is present like um uh alt attribute and something much more diagnostic part which uh the dynastic part is only covered by the lighthouse uh uh lighthouse tool. And here are the best practices uh like you can use wave for detailed element element level issues and lighthouse for overall audit and performance issues. So coming to the summary uh of these two tools like accessibility tools are essential but one should not rely only on those tools. Uh what we should first do is that manual testing comes up first and then the automated testing tools. So same points as I mentioned lighthouse provides comprehensive technical analysis apart from the wave tool like uh according to the user the tools can be used on their preference. So that's it for the session on the web accessibility tools. Check it by yourself in the resources that have I have been mentioned. So thank you.