 The topic for the day is to create the components that are accessible, the components making them even richer considering people with disabilities in mind. Who am I? I am RP and I have RP. I am a person with retinitis pigmentosa and I am Rakesh Paladgula. RP is a genetical disorder which diminishes or deteriorates the vision over a period of time. My day job is a training manager for accessibility at Adobe and I am a blogger at MaxAbility, www.maxability.co.n. So how is it at the beginning? All is well. I am like, I am a con in three idiots. I am not a great student but yes, to pass my subjects. As I was diagnosed with the problem of RP, the vision started deteriorating. So what's the problem? It is difficulty in studying my school books. Can anyone of you read this word for me? Nimonia, Altam... Sorry, even I cannot pronounce it so quickly. So it is a 45 character word, Nimonia, Altametric, Silicone, Volcaniconeosis which is perhaps the longest word in English dictionary and many of you took few seconds to read this word. My experience was similar in the beginning, reading few character words like a 45 character word. It used to take some time. I am obviously a slow reader. And to add to this, the other problems that have come together is reading lengthy lines, need more contrast or more light when I was reading my school books etc. So not only for me as a person with low vision at that point in time but also people who have cognitive challenges also usually have the problem of slow reading, understanding the content a little late. So which we call it as dyslexia or learning disorder. So in one of the interviews, Stephen Spielberg says that it takes to read a 120 page book for him, it takes 2 hours 45 minutes whereas any general user takes 1 hour 10 minutes which obviously says that he is a slow reader. Reading takes time and most of the people who have dyslexia have the challenge of understanding the content a little late. So the next comes in is the Facebook how favorite social media app is more in blue color. The reason is simple is that to ensure that the red green color blind people who cannot differentiate between the red and green colors depend on alternative methods or need more better color for their vision to read it. And it is obvious if you have ever noticed that one in 12 men have color blindness and most prominently it is red green color blindness. So if I say people around 8% of the world's population have color blindness and red green color blindness specifically, do you mean that you need to have only blue color websites? Not necessarily. All that we are bothered about is to make enough contrasting between the colors, use colors wisely and ensure that there is no information that is conveyed solely depending on colors. Obviously we do this of user experience of making all the mandatory controls on a form in red color. So which will have a difficulty for people who have color blindness. In addition, if we add a star on a stress or any other programmatic way of identifying that those controls are mandatory, it is helpful. So all that we need to say is have a better contrast and also contrast between the foreground and background colors. In addition to that ensure when you are using colors use them cautiously. So there is this website where you can check what is color contrast and how you can provide a better contrast as per the accessibility standards. So this standard is called Web Content Accessibility Guidelines which are defined by W3C recommends that there should be a minimum contrast of 4.5 is to 1 between the foreground text color and its background so that it will be easy for someone who have color deficiencies to read the content more accurately and easily. So the web aim, the URL here shows how to test that. Let me walk you through this. So here is the website. So where you can give the foreground color. I just gave a combination of red color 00FF00 and a background color, some sort of green and it will show you a contrast ratio currently it is 3.09 is to 1 is what the color contrast that is defined by the color contrast analyzer. All that you need to have is the color codes, color values or the color themselves. You can even pick the color from the pallets and provide the foreground and background color so that the accessibility tool, the color contrast tool will provide you the contrast. And you can also change the color values, the lightening or the darkening of the colors so that to check whether it meets the required contrast ratio of 4.5 is to 1. So here when we are changing the colors as we change the colors it has passed at 4.59 is to 1. Then you can pick those colors and add to your color pallets which will provide you the better contrast. So the math of this 4.5 is to 1 is called luminosity contrast ratio which is a math that is developed or that is created long back with taking different vision challenges into consideration. If you ask me is this the right color or everyone in the world can see with this contrast perhaps not but this is the best one that any anyone can or most of the people can get rid of the contrast in between the colors. So then comes the other problem about the keyboard access. How many of you ever tried just doing some activity on your computer without using the mouse or the mouse pad? Please don't raise your hand say yes if you ever tried doing some action like booking a travel ticket just using a keyboard. There are a few. How was the experience? Not always. Yeah someone of you said it's not working. This is one popular travel website. Maybe you can give it a try once you're back and tweet back with your experience hashtag A11Y which is accessibility or you can tweet at me to note your experience how accessible is it. It's not just this anything that you just give it a try doing some activity as simple as posting something on your Facebook or a Twitter handle and just share your experience. This is just to give it a try but there are people who have challenges because of which they cannot use mouse say like muscular dystrophy or anything that hinders using a mouse. How to depend on keyboard alone day in and day out. Think about those users are you giving enough experience for them to do the activity that you intend to do who creates the problems. So we are talking about the color contrasts. We are talking about the text and we did talk about the keyboard access who are the people who are creating the problems. It is not the people with disabilities who create problems for themselves the environment that we live in and we are the ones who create problems for them out of ignorance of course that we never think that people with disabilities are also the users of the web or the digital assets. Here are the three key stakeholders the content writers who never think about people with disabilities and provide instructions such as click the button on the right hand side or all fields marked in red are mandatory which are dependent on people sensory characteristics such as shapes size visual location orientation sound or color which create problems to the users. Of course the designers as we talk about the color contrasts providing specific cues which are dependent on colors alone also are responsible for creating designs that are usable by everyone. Many of the engineers like all of us out of ignorance we never think about the experiences of people with disabilities and we don't do the programmatic way of ensuring that the applications are available for all the users all the end users. So it is a collaborative effort of making accessibility inaccessible it is not once responsibility. So end of the day what is accessibility accessibility is nothing but just making our products websites designs or whatever that we create accessible or usable by persons with disabilities. If you take it more specifically it is to ensure that people with disabilities can perceive navigate understand and interact with the web. So how do you define that my application is accessible we are standard compliance how do you say that so this is defined by W3C the worldwide web consortium which defined a set of standards called web content accessibility guidelines or shortly called as WCAG the latest version that is recommended by W3C is WCAG 2.1 and the recommendation is to have compliance at level A and AA standards. So that is the W3C recommended but most of the organizations and countries just lean on to the recent past recommended standard that is WCAG 2.0 level A and AA. So here are some links where you can just browse through the standards and how you create a better experiences keeping accessibility standards in mind. What should I do as an engineer? Trust me you don't need to do anything as long as you do the things right. Right things in right place everything is taken care by the technologies that we use. The basic minimum that we do is the HTML and CSS and if you are using these controls elements attributes and properties in the right way how it is intended by W3C or the specifying bodies that means that you are doing you are making the products and websites accessible. If I take this example of a button it is an example of a button that says button submit with an on click event up there all that I have is a button tag with a submit label in between and an on click event on it. When I use this HTML button tag the role is already there it is a button role is nothing but if it's a link it is a button if it's a heading if it's an image or whatever that it is we call it as a role because you are using the native button tag it says the role is up there label equal to label is submit we all define there keyboard navigation comes for free as if you just put a less stable less button tag and press tab to see it yes the keyboard focus goes there and if you press enter as you as you intend to do it of the on click event or whatever the action that your intention is enter or return key will do the action you know need to bother about it the focus indicator the dotted border dotted borders that displays around the button will automatically pop up there from the CSS which is supplied by the browsers of course you can do any additional changes that you want to but if you're just present providing a normal button the as long as you don't remove the outline should also property from the CSS the button will act as a button the focus indicator comes in the tab order comes in you don't need to bother anything about it but when you create a custom button like the one shown up there you what you did here is that you had a div tag and you have provided that on click event and you have had a class from where the image like a button is loading up and you don't have a submit label because you think that the image will be sufficient enough to say that this is a button what happens to a keyboard only user a person who cannot use a mouse because this is a div div is a is not a control that you can tap through keyboard only user is unable to use it because div is a cement non-semitic controls non-semitic element the screen readers will not announce it as a button or the role fundamentally is not available there obviously because you don't the images loading from the CSS there is no way to provide you to for you to provide an alternative text which can convey as a label for certain users there is no keyboard focus obviously there is no focus indicator the borderlines are not up there so you are messing up every possible thing and you are not allowing any person with a disability to use your button because you are using a custom button but is Rakesh saying never use a custom button I am not saying that now let us repair it so the repairing can be done with the technology that is developed by W3C called accessible rich internet applications aria aria is the specification by W3C to ensure that you create custom components that are usable by wide variety of users so here is a table that just shows you what is the equivalent of HTML in aria if you are using these attributes and controls you can make some sense of accessibility and we'll talk about it in detail so because you have used a div and you don't have a button role there instead of less button tag in the div if you can add role equal to button it will say that I am a button and because you don't haven't provided the label for the image or alternative text for the image because that comes from the CSS you can add aria-label which will be acting as a label for some of the ss2 technologies so these are the two properties that you can use in addition to the controls that you already have for a custom button but of course the aria itself cannot provide all the attributes that are required like the tab focus aria cannot give a tab focus so that so that the keyboard user can still don't use though you use provide those you provide role and aria-label in that case just ensure that you have the tab index that is supplied by HTML again because if you are using normal button no need of tab index but because it is a div here you have to provide a tab index and be careful while you are using tab index the negative tab index or a positive tag index may create unnecessary problems or newer problems to the users so in this case to have a normal focus order I provide tab index equal to 0 which will not hinder the tab for tab focus order anyways and but still can get a tab focus when the keyboard only user navigates to it tab index equal to 0 and then the CSS because you don't have a CSS set there you have to add these CSS properties the outline properties to this button as well so that the when when a person who uses only a keyboard switches on to that button it will also show a focus indicator when you provide specifically a focus indicator to this button so finally when you have to make it like a button as simple as a HTML button add role equal to button aria-label equal to the label of the button tab index equal to 0 and the classes where you can continue we can you can provide the dotted focuses dotted line around the button this is all as an engineer you have to take care of so that is how you are repairing an inaccessible button to a accessible button so let us little more understand what aria is accessible rich internet application as I said is what the shortly area is what is called as it's a W3C technology it specifically helps people who have assistive technologies like the screen reading technologies which a person with blindness uses for them it will provide additional labeling without disturbing the existing UI so in the example that we talked about when I use role equal to button in the UI you cannot see anything that is changed but it will convey the semantics to the assistive technology users like a screen reader user and it is also a specification to say how do you define keyboard interaction for custom controls and that is defined in aria so the end users who are going to benefit with aria are the assistive technology users and the keyboard only users so of course every technology comes with set of rules and principles what are the three key things that you have to keep in mind is that the rule one is don't use aria aria's first rule is don't use aria which means as I said before if you are using the native html content or html things it is not necessary that you have to have aria as the first example of button html button you haven't used any aria so as long as you can achieve something with the native semantics use the native semantics instead of aria so that's the reason we say don't use aria as a first rule the second rule is rule is a promise we are saying that I am adding a role to this and I will be ensuring that whatever the properties that the end user needs will be supplied by me the example which we saw role equal to button is what I provided and I am promising that this is a button so I have to give the interaction of a keyboard as to tab I have to give interaction that the UI of a focus indicator through CSS all these as an engineer I am promising that this is a role of a button and I will be taking care of the additional properties as because I have used this role rule 3 aria clan can either clock or enhance the experience of the users as we said aria can additionally give additional experience good experience to the users with skin readers and assistive technologies but if you are not using as per the specifications it is also possible that it will clock the experience of people with disabilities so use it wisely use as per the specifications so let us simply see a small example of a model here as of you know a model window or a dialogue is a piece of window or a window that is overlaid on top of a page or top of another window so when when you see the interaction of a model these are the things that you need to keep in mind tip one it need to be keyboard accessible because when the model is opened the background page is inerted or dimmed only the focus will be within the model so what all things you need to take care of on opening the model the focus should shift to the model the focus should only trigger within or navigate travels within the model unless and until it is closed focus should be available for all interactive controls on the model if there are any focus should be tripped back to the triggering element when the user closes or cancels or submits or at the minimum should go to the most logical control when the model is closed these are the keyboard and focus management systems that you need to take care of when you are creating a model this about a keyboard the next one is the name role value states and other properties so when you are creating the model the initiating element will be a normal button but how does the user know that this button is doing an action that is like opening a model or a dialogue or it is just submitting something how does the user know so you may have to provide additional properties or the labels to the model with the initiating element etc. So the first thing that we need to provide is a title for the model define the roles we can provide the title as as models will have a normal title with with area hyphen labeled by or area hyphen label we can additionally provide a semantic relationship between the title that can be read out by the assistive technologies. Define the roles so role equal to dialogue is what you have to mention to let the users know that this is a model if you are using normal HTML things most of most of the properties come for free all the informative control should have labels add value state or property depending on the necessity of the model like if it there is anything like I expand or collapse within the model you have to provide a state area hyphen expand equal to true or false depending on the state in which it is or for the button that invokes the model you may can provide area has pop up equal to true. So these are the area elements that I have used in the model role equal to dialogue area hyphen model equal to true if you are using area hyphen model equal to true the focus will the screen reader focus or the assistive technology focus will not go to the Inerted page the background page area labeled by or are you described or a title sorry area label depend to read the title when the model is open are you described by if you want to give an additional information of the model. So these are all something which we have defined it is all the working group of area working group at W3C have defined you can have a look at the W3C specifications and the area authoring practices or the design patterns that are defined in the URL specified here. The next one is colors which we already discussed briefly so ensure that the model the controls on the model that text everything had have the required color contrast there is nothing that depends on color or it's all something that designer has to take care of. I will just quickly show you a model how an accessible model will activate or work when you are using when you create an accessible model with the assistive technologies with John just hang on for two seconds. Model dialogue example Mozilla Firefox main landmark apply now button submenu sign up dialogue enter your contact information first name edit required has auto complete blank last name edit required has auto complete blank email address edit required has auto complete submit button cancel button close button first name edit required has auto complete last name edit required has auto complete email address edit required has auto complete submit button cancel button So that is how the focus indicators work and how the model is focused when the user closes it, how it comes back, and if you have heard how the screen reader is reading each control with their corresponding labels. And that will shortly end my talk and any questions you can, we can talk, maybe we can take a couple of questions if we have time otherwise we will meet out there on the BO, what is it called, build up for this, we have the discussion soon. And you can reach out to me anytime as long as it is related to accessibility, Rakesh underscore A11Y, I think you might have seen my tweet to handle, www.maxability.co.in is my blog where you can definitely look for more information on the accessibility content. Thank you. Hi, how do you, how do you like decide, like when you're giving an ARIA label, so for example if you have a table and you can sort the columns, so in terms of the verbosity of that message, like is it two verbose for a user who is using the screen reader, so essentially what are the recommendations for defining those ARIA labels? So if I understand your question, right, you're talking about a sortable table, right. So ARIA-label is just one property we could discuss in the short time we have, but there is a design pattern that comes for a sortable table and there is a concept called ARIA-sortable property and if you are adding this ARIA-sortable property to the column or the cell in which you can do the sortability and as user navigates to that button and press space bar, it will say has sortable property currently set to ascending and if you press again it will switch back as a descending. So whatever the information that is required for the user that the ARIA-sortable property with conjunction with other specific properties for the table sortable grid or sortable table property, it will provide that information. Okay, thanks. Welcome.