Web Content Accessibility Guidelines

[music] So what um what is the meaning of this level A and level a AA or level AAA this is also important. So um the the criteria itself they are divided into three levels. So A being the lowest double A in the middle and AA is the maximum U compliance or the highest quality of compliance. So even in the list of guidelines you can see that the basic bare minimum is categorized as double as single A level A and if you keep scrolling you'll get an understanding that okay in case of double A or uh a little bit more technological uh soundness is required it is uh if double A is also there then it is more accessible uh to a wider set of audience. So it is basically the entire criteria is divided into a AAA and double A. A being the lowest level of compliance, double A being a mid-level second level compliance and AAA being the highest level of compliance. So if your technology is uh fulfilling all A's and all double A's and all triple A's then it is completely accessible by law. So this is required uh this is why why it is divided in this manner is because the mandates because the laws have to mention that it should be at least double A compliant in order to be published or whatever it should be at least a level compliant in order to be published uh etc. So the moment um and then who decides whether it is not. So one is of course you have this checklist. So if your interface is able to has all of these um features which fulfill all Alevel com uh criteria for example in that case your website or your application is Alevel compliant and an auditor or an accessibility auditor can give you that A-level certificate and then uh if the the law of the land says that it has to be Alevel compliant then you're following the law. But if your if the law of the land says it it is double A it has to be double A compliant but your auditor has given you only Alevel certificate because some of the double A criteria are not getting fulfilled then you have to ensure you have to make the changes you have to ensure that the double A criteria also gets fulfilled in order to make it compliant and in order to f you know follow the law of the that otherwise there can be monetary fines, there can be other uh punishable uh consequences as well. [snorts] And even this uh this level is divided by the W3C understanding the technology or the need as well both sides that something which is very complex to do as well as uh it is not very frequently usable that feature or if that feature does support accessibility but for a very small percentage of people uh or uh that is uh something which is not frequently used then they have put it in the highest quality of compliance. So they also based on their understanding they have u uh divided it into these levels. So now let us uh see how so we are still here we are trying to understand the interface and what all information is here. So we have seen this full description. We have seen this understanding um uh button which takes us to a long description. Gives us examples and all of those things. We have tried to understand what is the meaning of level A, level A and level AAA. Now let us see what is there in this dropdown. So this called techniques and failures for 1.1.1 this criteria. So what are the sufficiency techniques? So for example um in order to meet the criteria what all you have to do. So we will uh discuss these aspects of area labels. Um so in area 6 so it gives you uh code patches. So area library itself is um is is an assisted technology uh based library and uh these are the list of techniques which uh you can use in order to make your code comply with this uh criteria for PD. PDF. It can be this applying text alternative to images uh with alt entry in PDF documents. How to uh you know add all text in PDF documents. It is an entire um you know to-do list how where to go what to click. So I think this itself is a very useful repository. So for example technique H2 so H2 ETA are HTML based um um repositories and these so HTML and CSS based layouts. So if in case of web etc you can use these techniques. So here also these are HTML based rating system. So there are several examples like um star rating in HTML, how to create buttons with groups of images, conformance level, etc., etc. All of these resources are available. So it also has like all of these situations. So right situation A if a short description can serve the same purpose and present the same information as the non-ext content then you use these techniques. If a short description cannot serve the same purpose and present the same information as the nonext content then you use these techniques. If a short content is a control or accepts input in this case you use these techniques. So depending on your design it whatever applies you will have to click and use that technique. Basically situation D if a non-ext content is timebased media like a video or an audio clip then you use these techniques. If it is a nontext content is a capture. If it is a capture then you use this technique. If a non-ext content should be ignored by the assisted technology such as a screen reader, then you use this technique to um basically make it skip other advisory techniques. Then it also gives you a list of failure failure of success due to using CSS to include images that convey important information. So for example, if you have done this then you will get an error or you will get uh you will get an uh um success criteria failure. So it also gives you a possible list of failures which are you know common list of failures. So it is a very useful resource in itself and this is just one criteria right this is just the one criteria that we talking about. Similarly in every section. So this is guideline 1.1 text alternative. Similarly for guideline 1.2 timebased media 1.2.1 there is all of this again full description understanding techniques all of this different situations. If the content is pre-recorded, if the content is pre-recorded video, if the content is pre-recorded audio, how to do it, then what are the possible failures? Then all of this is here. All of these resources are there. Similarly, you can, you know, go through and then uh the so we can just kind of see here. So as as we are moving it is also moving in the um also moving in the in the navigation [snorts] and each section is very beautifully divided. So now we move to say 1.3 we are still in the main section one which is perceivability. So then each one is described beautifully. Content create content that can be presented in different ways for simple uh for example simpler layout without losing the information and structure. So if you show here all of these resources are there again situation A the technology provides semantic structure to make information relationship conveyed through presentation programmatically deter determinable meaningful sequencing sensory characteristics orientation all of these aspects are there identifiable purpose markup languages and all of that. Similarly, it has to be distinguishable. So, use of color, color contrast and all of those things are basic uh important. So, this is again that's why it is level A. All of these are level A. Contrast is double A. Text size. It should be uh open to resizing. It should be adaptable to interfaces. [snorts] Contrast enhanced, background sound, visual presentation, all of these are there. Now we move to principle two operable. So now it goes into talking about keyboard access. So here till here one section one all of this distinguishable adaptable time based media text alternatives are part of perceivable. Then we move to operable in which they talk about keyboard accessibility. Again each one how to make it keyboard accessible how to what are the different techniques to make accessibility you can go here uh in the understanding 2.1.1 again and try to understand why and how it is needed what are the different cases use cases why when it fails and all of this enough time enough time means that there should be enough time to react so if there is a task that needs to be done uh there is enough time to complete the task. So if you see what is the timing adjustability so turn off the time limit or adjust the time limit extend the time limit realtime exception um or uh essential exception 20 20our exception. So all of these are there you can just click and try to understand what is the meaning of this pause stop hide. So I would suggest that you explore this entire document. It's in a very nice accessible format very beautifully um coded very nicely appended with all of these techniques and descriptions and follow-up pages etc. >> [snorts] >> No timing interruptions again inoperability, seizures or physical reaction. So uh three flashes or uh you know flashing uh content etc. are there uh may cause seizure. So that needs to be you know removed or limited. It cannot be beyond three flashes navigability. So uh blocks, page title, focus orders. So particularly in navigation, link purpose. Multiple ways uh to locate a web page etc. Location, headings and labels. Focus appearance. then goes in input modalities. So, so for example pointer, gestures. So, we will also discuss about particular input uh devices and output devices uh in in one of the following lectures. Then goes principle three understandability. So if you see that's what I think we discussed uh in the slides as well that uh operability caters to or uses input uh devices perceivability uses output devices understandability all of these cognitive aspects like readability like language unusual words abbreviation if you have abbreviated something and there's no full form form available. All of these uh aspects are there. Predictability that what is going to happen next or the the theme or um the um you know what kind of response is going to come is either consistent uh throughout your website that okay whenever I click there is some particular kind of sound which is coming or some particular color which flashes or particular u similar kind of behavior is happening. So if there is a loading thing, it has to be consistent. If it is um some focus or some kind of a button which is again and again coming in different steps of an application for example, it should look the same. It should uh you know take you to a similar looking uh next page and all of those things. So uh predictability is also very important. Input assistance again um how we can prevent error. This was also very important aspect of universal design principles was room for error, tolerance for error. So um error identification is first labels and instructions have to be very clear suggesting that this may be an error or possible chance of an error or preventing an error particularly in legal financial or important like biometric data I think it is very important um error prevention uh redundant entry all of these aspects are there you can go through this then the fourth section is robustness uh maximize compatibility with current and future user agents including assistive technologies. So uh for all the interfaces components including but are limited to the n no uh the name and the role can be programmatically determined. So it is very important you can go through these again and try to understand what is the meaning of um of this particular criteria as well. What are the different examples? What are the what is the intent behind it? What are the possible failures? So I think this is a very important document which uh will take you which will help you a lot. What we'll do is we'll um go back to our slide. So again we are again back to the main page which was wagg 2 at a glance. There is also WAG 2.2 which is a uh few guidelines have been added. So what is um what are the new uh criterion which is added? Then there is also a draft WAG 3 which also has a few more sections which will be published uh soon. So again this is the same uh document but just at a glance. So as soon as you uh you can just land here and try to maybe read one uh section at a time in order to understand it fully. So give one one section of each uh a day in order to understand all of them completely. So just say for example uh if you want to say uh provide captions and other alternatives for multimedia, you can just click here. This is that means these are just this the set 1.2 and all of these are part of it. So you just go through 1.2 uh.1 up till 1.2.9 and similarly you select one every day and just go through that is how I would suggest you interact and learn about these guidelines. So web content accessibility guidelines also have uh uh an Indian parallel. It is called guidelines for Indian government websites and apps. It's called GIGW. So I've added in link to it as well. Uh and u you can see what all focus areas are there. So quality uh accessibility and they have also been um developed. So if you see the introduction they also uh say evolved by uh the same W3C or WAG guidelines. They they clearly say that these guidelines have been framed with the objective to make government websites and apps conform to the essential prerequisites of the UU trilogy of usability, user centricity and universal accessibility of uh uh interaction design. The guidelines is based on international guidelines W3C's web content accessibility W CAG rights of persons with disability as well as the in information technology act of 2000s. Further the longstanding experience of authors in the design development etc management of uh government websites and apps challenges faced by the government organization developing these guidelines also form the basis of web quality certification from the STQC directorate. So as we were talking about uh the there there are some empanled companies uh with these either matey or government of India entities which can audit do an accessibility audit of a product and give it a certificate whether it is uh a compliant level a compliant or level AAA compliant. So you can see uh uh all of this also has uh several sections. So here the important thing that uh needs to be uh known about the GIGW particularly is that it only ensures conformity with level A of WAG guidelines. So that means that the W that according to GIGW all our government websites should be at least double A conformity compliant as per W CAG criteria and it has you know all of these nonconformity or risks associated. So um so it also uh tells you you know gives a question and gives answers as well risk associated with nonconformity. Risk associated with nonconformity. So why what are the questions? What are the answers? You can go through this document as uh as well. Then we also have uh the um the BIS or the Bureau of Indian Standards which have also developed a list of requirements as well as also has a list of checking uh different use cases etc. Bureau of National Indian Standards is a national standards body. I'm sure you have heard about uh BS6 etc. which is there at the back of the car. So these are emission standards which are also made by BIS. Uh and each car for example is then evaluated and audited and give is given a stamp based on its conformity of the standard and then laws uh around it are built. So for example uh in the government of NCT when there is grab 4 you cannot drive any vehicle which is below BS6. So that means it is emitting a large amount of uh CO etc emissions right comparatively above uh BS5 or BS6. So similarly they have these gold uh standards as well. I'm sure all of you are available about the BIS gold hallmark, the BIS woolmark. So all of these are quality standards. So similarly they have ICT products and services uh accessibility standards which is there in these documents. So this is the link which is also provided uh at the end of this document or the slides and you can go through uh these documents. So if you see go here and you say click to download you can uh you can just download it in a form of PDF right and it will tell you about software content and all of those contents a wide range of ICT products including telecom services web- based services digital and virtual services which includes all your mobile applications and web applications. ations etc. So you'll have to log in to download. So you all you it's a free registration you can register and log to download. Similarly they have an active assisted living a use cases. So if you see here they they are in the category of standards and this document AAL use cases is a method of testing conformity. So you can refer to both of these documents and they again are based on the WAG guidelines. So WAG guideline document which I showed you is a open source. All of these are actually as well open source. They're all on the website and uh all of them actually can help you to understand what is the meaning on of conformity what how we can evaluate our digital products and how to make it accessible. So as we saw in the WAG uh guidelines uh document even the tools to techniques to make it more accessible techniques to uh understand failure use cases as well all of those are mentioned other than that there are also a set of accessibility evaluation techniques. So for example, if I've made something uh if there is a faster so one is you read the entire document and see whether your script includes all of those techniques or not. The other way is that there are several automated um conformity audit or an accessibility auditing tools or softwares which are available and we will have a discussion about that in the next session. uh and you can do uh a quick check of your digital um interface and it will give you a list of conformities or nonconformities. How much percentage of compliance is there? In what category your work is falling a few things because by default also are there in our code but we may not be aware that okay this is a criteria for compliance or it may be something which is not as obvious. So do that needs to be included otherwise it is not even uh level a compliant. So all of those uh there are tools which can just give you a list and it can be a quick reference to fix while development or think about while development as well. Uh or if you are looking at an existing product an existing website those tools can again come in handy. So and it can direct you to the respective area library or respective area labels etc. all of those uh things are also there in those tools. So we will discuss those tools in an upcoming session. So other than that uh why compliance is important is because there are legal regulations around accessibility and I'm sure many of you are are um aware of them that is why you are taking this course uh on digital accessibility particularly in EU for example there is legislation uh to prevent discrimination etc and uh failing to which like if your website is not compliant or if your digital product is not compliant with the WCAG guidelines uh then they even not allow it to publish right. So um that compliance testing happens before the website is published and there are laws against it. If you do it without getting that license, it is almost like uh other um mechanisms like I'm sure you are aware that in order to get a building built, you have to uh you know check uh get a stamp of security compliance, fire safety compliance, etc. on the blueprint itself before you start building the building. Right? So similar laws are there in place in case of digital products as well uh in the EU and several other um western countries and it is going uh to happen in India as well very soon and recently. So government of India if you see the GIGW it is it is actually a mandate that it has to be compliant all government websites have to be compliant up to doubleA level of compliance as per the WAG guidelines if not they are getting reprimanded they are paying fines etc. Similarly, SEBI has recently mandated that all uh banking interfaces, banking websites, etc. are also compliant. It's a mandate. So they are suddenly have uh so all of these companies as well as government bodies are utilizing uh accessibility tools or doing accessibility audits uh of their products or their websites in order to understand how they can make it more accessible or whether they are compliant or not. Uh so it is also very important to understand that just by looking uh at it or just by interacting with the website you may not know what is what whether your website or product is following the criteria as per the legal mandates. So it is important to check it and crossch check it with the WAG guidelines. The WCAG list of guidelines, each criteria, each script needs to be checked and cross-cheed before saying that yes it is compliant. Otherwise the auditing companies will do it and not give you the compliance certificate. So it is very important. Just to summarize this session, we spoke about accessibility guidelines, criteria for compliance. Now India has its own guidelines and set of standards and there has been a lot of push uh and mandates around accessibility which is going to increase in the upcoming years which is a good thing because we want our digital infrastructure to be accessible by as many people as possible of varying uh abilities of varying languages of varying uh economic uh or class. So that is very important. So links to all of the three the BIS standards the uh the government guidelines which is GIGW and the uh WCAG guidelines are provided in this slide. So we will see you in the next session possibly talking about the accessibility valuation tools. Thank you for joining us in this session. >> [music]