Web Content Accessibility Guidelines

Hello all, welcome back to our course on digital accessibility and Today we will discuss about web content accessibility guidelines or WAG. Probably you might have heard about it. We have also talked about this term a couple of times in the introductory slides and some of the previous slides. But today we will discuss uh the WCAG guidelines and our parallel Indian guidelines etc. in a little bit of detail. So let us start with a couple of digital accessibility background again just as a revision module. So um mobile devices are great examples of um um you know users dealing with accessibility issues just to understand what are the kind of different uh solutions available at a superficial level and a basic level. You can just browse through your uh settings in the You can just browse through your settings in the accessibility part and you can just see the close captioning, the screen reader, the talk back, all of those basic applications you can try and engage with on your phone itself. Many countries designing for accessibility isn't just morally correct, but it is also a legal obligation. That means by law you have to design for accessibility and that is slowly becoming a mandate in India as well. So it is uh high time that uh we as designers and engineers also stop looking at accessibility as an afterthought and embi it in our product development itself in our design thinking itself from the very beginning. But the good news is it's not a complicated thing right it's uh so we've been trying to understand some basic aspects and the need for accessibility and so forth uh in our previous sessions and how we can design uh for better usability what are the principles what are the universal design guidelines uh you what are the universal design principles etc and one more parallel vertical which is there in terms of compliance and laws and mandates is this accessibility standards or guidelines and they're very easy to understand. So it's nothing very complicated. They're very comprehensive. It's almost like a long checklist and you will just have to kind of cross-check your interface and see which ones it is fulfilling and which ones it is not able to fulfill. Uh so let us get started. So before we jump into uh the guidelines themselves, let us try to revisit. So we have already discussed these PUR or POR principles in one of the previous sessions. And why I'm revisiting it before we jump into the WAG uh guidelines and the criteria list is because the criteria list itself is divided into these four chapters. the perceivability, operability, and understandability and robustness of um the you of the interface itself. So let's just browse through uh it a little bit and then we can jump into it. So what is the meaning of perceivability? So perceivability by its its terminology means that the user can perceive or sense the content or the interface elements by the means of multiple modalities or any modality for that matter. Right? So the point being that if we are catering to special population or special use cases where there might be u cognitive deprivation or there might be sensory deprivation uh we have to be careful about using multi-ensory information. So we have to be careful about using multi-ensory information uh display as well as feedback. So either tactile display along with that um your screen based display or talkback which is an audio feedback all of those aspects need to be incorporated. So uh people with varying uh abilities can also access the content and perceive uh um the content itself. So in a forthcoming lecture we will also discuss in detail about these emerging input and output devices. Right? So when we say um uh when we talk about tactile display for example, what is a tactile display? What is the meaning of that? There is a small image here but of course we can learn a little bit more about what are the various companies which are making it what are the um limitations of those kind of input output devices etc. So there is a session uh lined up on emerging multimodel input output devices and uh this would feed into again the perceivability aspect of your technology or your interface and how you can use those input output devices in order to make uh the system highly perceivable or highly operable. So perceivability is uh something which can be enhanced by incorporating multiple output devices right. So basically the system is giving different types of output. So speaker is an output device. Your display, your screen is an output device. Your tactile display is an output device. Other there can be other such smell based or other kind of output devices as well. And so basically perceivability of a system is very much in line with uh output devices or output technologies. Similarly when we'll move into the next uh category which is the operability. Operability means that the user can successfully control the system navigate the system they can use or interact with the buttons or whatever the system is the interactive aspects. So in the operability uh emerging input devices is something which is lined up or aligns uh nicely. So your keyboard is an input device. Your mouse is an input device. Your u um um you know all of those other VR based uh input devices are there. Your gaming console is there. A joystick is there. Touchpad is there like one which is there on your laptop. A mic is also an input device. So all of these um things are input device. But when we talk about say emerging input devices, it can be uh nontactual interaction as well. So for example uh computer vision based camera facial recognition based input device can be there. Iris based recognition all of those input devices can also be there and then of course your mic or voice commands is also a input device. So operability of a system means that it should enable operability uh through various means. Of course all of these are different kinds of tangible uh input devices. But also when we think about your digital interfaces, the buttons, the button sizes, the color contrast and all of those things whether the button is visible or not. As we discussed in the previous lecture about affordances, whether it is giving us enough affordances that we are able to operate, then there is a call to action. So if you think about it, all of this is very much entangled and very much interrelated with each other. So an affordance for example directly links to the perceivability of the uh interface. So if I'm able to perceive an affordance and I then which calls me uh which gives me a call to action and then I am able to operate or uh do that action is operability right if I am able to see or perceive that call of call to action that is the perceivability part of it but if I it is allowing me to complete that action then that is operability. So all of these may seem that oh this is so obvious why is it so structured and while the point is that apparently it is not as obvious because most of the systems we see around us they're not very accessible. So all of these frameworks and all of these models can help us consciously evaluate our systems and see whether uh our systems are actually um contributing or do they have all of these features or not. Similarly understandability. So one is the perceivability. So one is that I can sense the information. I can see it is allowing me to see. So for example um if there is a button if there is a screen based button which has a signifier I think we had a discussion about it. Uh so one is the color contrast the size of the font all of those things are related to perceivability. So like color size of the font so that I'm able to uh sense it then uh whether the whatever is written is it cohesive is it in line with the content of the website or the content of the interaction as well. So for example, if it is a uh an application job application site for some uh CDS for example, right? So at the end of it if the button says click here, right? And or if the button is just blank for example, you have a good color contrast. You have a good size font which is up which is catering to the perceivability part. Your button itself is clickable which is catering to the operability part. But if you just say click here and not the word submit for example then it is not catering to the understandability part. So the uh cohesiveness or the consistency of um you know the your interface with the rest of the context is very important. So appropriate tone of choice of words, appropriate copyrightiting, appropriate um uh you know workflows. If it is too long, too many steps, if I'm not getting appropriate feedbacks at every step, then it becomes non-cohive and nonunderstandable to a lot of audience. And here uh maybe uh so some of the sensory uh difficulties or motor difficulties you can align with perceivability and operability. So for example if I am a person with visual impairment perceivability might be the biggest challenge for me as well as operability that I locating the button and then clicking it can be a big challenge for me. But uh if I am not a uh s I do not have a sensory deprivation but I have other cognitive decline or cognitive deprivation. So for example people with ADHD, people with dyslexia, people who are aging who have limited cognitive bandwidth there in the in that uh in those cases understandability becomes a major uh issue. So perceivability and operability may be uh you know little bit engaged but understandability becomes a major issue. So if you see for different kinds of users all of these four parameters may the importance of it or the priority may vary but from a digital design perspective we have to look at all of these parameters all of the four of them in order to say that yes our system is accessible to a diverse set of audience. So basically the understandability says that users should be able to comprehend the content and learn and re and it should be easy to learn. So basically what when when we say easy to learn or uh a flatter learnability curve for example learnability curve is how much time you take to learn right and so if it is very steep right then it is very uh very difficult to learn but if it is like the complexity is very high and then all of those factors if the complexity is low then the learnability curve can be flatter. factor right and then the time required can also be lesser right. So if it this is called a learnability curve and then remember how to use it also this is important. So if it is easier to learn, onboarding is easy. But then if uh you are not banking your interface on the familiarity or related concepts or cultural contexts or um you know how your users understand a certain set of uh interfaces and you design something radically different then also it becomes very difficult for them to remember. While in design sometimes we are taught that yes think about something out of the box, think about this, think about that. Out of the box doesn't always mean different right out of the box or uh uh in in an attempt to make it very different. We should not dilute all of these factors as well. So we have to be very careful and we have to look for a tradeoff that okay you need uniqueness in design of course but then you cannot dilute understandability you cannot dilute on um the learnability or the memorability of it. Right? So it has to be a tradeoff. Then the fourth is that there has to be maximum compliance with um existing technologies like a variety of platforms such as a laptop or web or non web based offline applications, mobile applications, tablet based applications, different orientations. uh you are able to your tech is able to uh run on all of those platforms and uh it is allowing maximum usability across all of those platforms as well. So if it is if a system is only accessible through a keyboard or mostly accessible through a keyboard then probably its mobile version mobile version will not be as operable. So then uh as the de during the development part itself we have to be very careful about tailoring all of these aspects and looking at all of these aspects before designing or while designing so that the users are able to choose the platform they use they want to use. Right? So uh that that uh opportunity that should be with the user and you as a designer or a developer have to be careful just to make the system as robust that uh it can just fit into any um any kind of an interaction uh device. So with this background let us move into uh WAG guidelines. So again as I said the WCAG guidelines are divided into these four categories themselves. Um and each guideline is called a criteria actually criteria for compliance. So we shall now u move to the WCAG website itself and we'll see how and in what ways it is um divided. So this is the website. I have also provided the link at the end of the slides. So for you to follow and even if you uh don't find the link that's also okay. You can just type uh in uh in a search engine uh WC A WAG guidelines and it will take you to the same website. So we'll just go around a little bit and try to understand. So um it is developed by this W3C organization. If you click here it will take you to the W3C which is the worldwide web consortium right and but we don't want you can explore their work as well. You can see how and where what kind of work they are doing. One of the major contributions of this consortium is that they have developed these guidelines. Right? So um this is an at a so there is a navigation here on the left side. So right now uh we are at this WAC 2 at a glance. So this is just like a summary. So I just wanted you to take uh through take you through these and um uh so there's a set of long list of guidelines and uh they are as I said earlier that they're divided into these four categories which is again the perceivability operability understandability and robustness. same terminologies which are there in the POR principles and uh so under perceivability if we see they ask um there are several criteria for example provide text alternatives for non-ext content so for example if I have um a visual content like a photograph right so as per the perceivability criteria It should always have an alt text or an alternate text which will enable it to be accessed by a screen reader or a talkback module or a talkback um algorithm. So this is like a gist of it. So for example, if you click it, click on it now, it will what it will do is take you to the main document. Right? So now here you can see that the main document itself is also here on the left side there is a navigation long navigation panel. Don't get scared just by looking at it. I would recommend browsing through all of it. You can take your time but don't get scared and we will discuss uh a little bit about each section so you have an idea. It's more of an icebreaker but as in when you will actually implement it you will have to uh go through the required sections whatever applies to you. So for example 1.1 is section 1.1 is say text um uh alternatives. So under this guideline one so uh uh principle one is perceivable under that it is 1.1. So again it is divided and categorized very beautifully. This document itself is very beautifully made. So I recommend uh referring to this. So for example as I said text alternatives then there is a description provide text alternatives for any non-ext content so that it can be changed into other forms people need such as large print braille speech symbol or s uh simpler text. So anything which is um non-ext needs to be there. So again under this um so uh under this there is again a 1.1 non-ext content all non-ext content is presented to the user as a text alternative that serves equivalent purpose. Then it is also linked to there are several resources right here itself. So one is this show full description. The moment you unfold it, there are more details about what is the meaning of non-ext content in different circumstances. So for example, controls. If a non-ext content is a control, it accepts user input. Then its name that describes its then then it has a name that describes its purpose. It has to have a name. So this is the same thing that we mentioned about the submit button for example or the instead of having click here or no uh text on the button itself right similarly timebased media. So if non-cont non-ext content is a timebased media then text alternative at least provide descriptive identification of the non-ext content right so and it also directs you to other um uh other uh guidelines. So for example refer to guideline 1.2 for additional requirements for media. So what is the meaning of time based media like an audio clip or a video clip right which uh starts and ends. So then it has to have uh uh you know a textual description as well. Similarly, all of these like a capture uh if it is just like a decoration, it's pure decoration, it is only used for visual formatting and is not presented to users, then it is implemented in a way that it can be ignored by assistive technology. So this is also important. You as the developer or the designer have to identify that okay this part is just for decoration. This image, this floral uh frame for example is just for decoration then it needs to be tagged as to decoration so that it can be ignored by the assisted technology. So similarly now we can close it maybe you can go uh through it. So similarly there is here another button which is called information or understanding this criteria understanding 1.1.1.1. So if we click here it takes us to a very long document which is particularly about this understanding uh criteria 1.1.1 and it tells us about all of these aspects. What is the intent u of this criteria? What is more additional information? More uh benefits? Why this criteria uh should be used? What benefit will it give us? If we include this criteria, how it will make your uh system more accessible. Then if we you can you can also find a list of examples in order to understand. So for example a data chart if a bar chart compares how many wickets were sold in June, July and August. The short label says figure one sales in July uh June July August. The longer description identifies the type of chart provides a highlevel summary of the data. So this is for the alt text. This is not a caption. This is description of the visual content in a textual format. Highlevel summary of the data, data trends, implications comparable to those available from the chart where possible and practical. The actual data is provided in a table in the form of alt text itself. So it can be accessed by no um like screen readers and other formats also. Similarly there are other uh examples. So and so for example this is a very interesting uh um this is a very interesting example a photograph of a historic event in content discussing diplomatic relationship. For example, the same image is used in different context intended to explain nuances in diplomatic encounters. The image of the president shaking hand with the prime minister appears on the website discussing intricate diplomatic relationship. The first alternative text reads, "President X of country Y X shakes hands with press Prime Minister Y of country Y on January 2nd, 2009. Additional text, alternative text describes the room where the leaders are standing as well as expressions on the leader faces and identifies the other people in the room if they are there in the picture. The additional description may include on the same page may be included on the same page as the photograph or in a separate file associated with the image through a link or other standard pro programmatic mechanisms. So I think this is very important and all of these things you can just like maybe go through in for each one if you have any uh issues uh you can try to click this button understanding and it will take you to this all of this. So um other than that one thing which also you might be noticing this level A it's written here level A if we keep scrolling there is also level A A and level A. So you can apply these filters as well.