 Okay, so I do think it's related these topics of accessibility, the internet and a topic which is fairly close to which I enjoy or which I believe in is the topic of web standards and I think that's going to be part of what today's discussion hopefully will be focused on what web standards are, what they enable us to do and perhaps what we can do with them over the course of the next couple of years because we're basically building a web and to be able to access it, we need to have a common platform with which we can talk to each other about. So how does this particular topic in terms of web standards relate to people with disabilities? Have any of you seen people with disabilities using the internet or using computers? A few of you, so some, a large majority not. Okay, so interestingly enough it's actually possible for people with a wide range of disabilities or abilities rather to use the internet and to access it. So just before that we'll just jump into what are the ranges available. So we're talking about a term, there's a term which I like to use which is impairments as opposed to disability. And impairments refer to medical conditions that people may have. You can see a whole bunch of you wearing glasses here. Would you consider yourselves disabled? Not anymore. Not anymore. Yeah, so okay, now take off your glasses. I don't think I've got my glasses. I can see now. There you are. So it is an important thing. I mean most of you who need glasses to use the computer would probably agree with me. But you wouldn't consider yourself disabled because now you're able to use everything exactly the way anybody else is able to. So you go from having an impairment to being disabled and then to being non-disabled by having this little bit of technology, little bit of curved glass between you and the world. It ranges from being, having glasses, having poor vision, perhaps being colour blind, unable to distinguish between important colours to being completely blind. You have, some people are unable to hear. Perhaps you can't hear very well or you're completely deaf. People have different abilities in terms of moving around. So you have physical impairments which would range from perhaps being temporarily disabled. So for instance if you broke an arm or if you strained the leg, which is pretty likely on these roads, you might be temporarily disabled for say a couple of weeks. Or you might be using, you might use a wheelchair or you might not have access to one of your limbs. So these are the five broad classes of disabilities and they span a wide spectrum. You might have a particular cognitive impairment which could learn from having dyslexia. I know a lot of people have undiagnosed dyslexia in fact. To perhaps being a slow learner to actually having say, having something like cerebral palsy which actually affects, then it's a motor neuron disease essentially. So how does this in fact relate to us? Because we're hardly, at least I don't think many of us are in the medical profession here. So how do we actually cater to what is essentially or what is seen to be a medical condition? How many of you are doctors here? And the medical sort, not the fake sort, but the PhD thing. None of us. So we had this body which was the W3C or the World Wide Web Consortium which came up with a bunch of standards. They're the ones responsible for HTML, CSS, a whole bunch of others, XML, RDF, the basic building blocks of the internet, the URI structure, URLs, etc. It's a public body. Any of us could join technically. It's got all the big draws of vendors like Apple, Opera, Mozilla, Google, all of them. And they came up and they created a particular standard which they called the WCAG which is the Web Content Accessibility Guidelines which essentially consists of four principles. That's it. Four principles, fairly easy to memorize and a useful acronym. So the first one relates to perception or being able to, I'm not going to say see, but being able to experience. So that's the first principle of the WCAG. You need to be able, all your users regardless of ability or disability need to be able to perceive your interface. So it could range from, perception can span a wide range of things. You might be able to see an interface. You might be able to hear an interface. You may be able to feel an interface. There are different ways in which perception can happen. But we need, as developers, as designers, we need to actually build our interfaces in such a way that everybody can perceive them. The second principle is they need to be operable. What does operable mean? It basically means the ability to operate it. To turn on a switch, you need to be able to actually do so. If you need to open a door, you need to turn a door handle. In the same way, controls on the internet need to be accessible to everybody. You need to be able to select your gender in a sign up form. You need to be able to put your name in when the people ask you for it. You need to be able to use, say, a navigation menu. You need to be actually able to hover over a drop down menu and select one of the items there. So it ranges over those. The third principle that the W3C came up with was things need to be understandable. You need to be able to understand what, now that you're able to see it or perceive your interface, now that you're able to operate it and move around it, you need to then be able to understand it. So they have a bunch of guidelines under this and they have a bunch of rules for ensuring that your content is understandable. Simple things like making sure that the language of your text is declared programmatically. And then lastly, what they talk about is making robust interfaces. And I think this is a theme which is going to become more and more important as we have a wide range or a diversity of interfaces to actually use any electronic network. These days you can talk to your phone with Siri, with Apple Siri, and it will talk back to you. Essentially the internet is talking back to you. That's one way of interfacing with the internet. Now we all have, as I'm fond of saying, we all have the internet in our pocket. That's a pretty interesting thing if you think about it, especially if you were on the internet 10 years ago. So essentially they say that you need to ensure that things that you build today, things that you design and build today, need to work in the future. They need to work with things that came before, because there are people, trust me, there are still people on IE 6 on Windows ME. I'm sure there's some user. I'm sure some of you were looking somewhat pained, have seen those in your server logs back then. So you need to make sure that you ensure compatibility with a wide range of devices and with what are called user agents. A user agent could be either a device that you use to access the internet, or it could be devices which plug in and allow people to use the internet. So then there's a bunch of guidelines which I do not want to get into, but I do want to show you perhaps one example of ways in which people with disabilities can use the internet, and so what I'm going to do is that I'm going to... So, for instance, somebody who can't see, actually I don't know if I need to show this to you, somebody who can't see, how do you think they would experience an electronic interface? Anybody? Screen readers. Okay, excellent. Is that a familiar word for all of you? Anyone? Not familiar? Somebody saying, yeah. Okay, so let's see what a screen reader looks like. From the term, from the phrase, it's fairly apparent. It looks at your screen and then it reads things up to you. So, let's see. I think we should be able to hear. So, it's built into this machine, but you have other ones on different operating systems. Welcome to iOS 10. VoiceOver is running. System preferences. Universal access. Window. Toolbar. That basically is to show you exactly what is being read up. It's useful. You are currently on a toolbar. To interact with the items on this toolbar, press Ctrl, Option, Shift, down arrow. Ctrl, Option, Shift, down arrow. Interact with toolbar. Four items, back button. So, somebody who can't see, for somebody who can't see, this is a means of accessing a computer. You actually listen to what's happening and you can navigate your user interface just by moving through it. Search, search, test field. And you'll notice that as I move through a diversity of like interface elements, you are currently on a test field. It gets a little verbose sometimes. As you navigate through different interfaces, it'll actually announce exactly what kind of element there is there. So, it said for instance here, I don't know if you heard that. Search, search, test field. It actually tells you there's a text field, which implies that you can enter something. You are currently on a test field. A, F, A, R, A, F, A, A, A. Sorry. System preferences. Prefer. Right. So, you'll be able to use entire websites just with it. I'm not online now, so I can't actually demo that. But you can actually move through, navigate, interact with, and give your input details into web pages using tools like this. So, this is for instance an example of assistive technology which somebody who can't see would use. So, that's one quick thing. So, that's just a quick introduction to web accessibility. Do you have questions about this? Anyone? Do you want to show us how it's defined on the webpage? Yeah, sure. Since we're all developers here, we can talk a little bit about the technology that goes into this. It's actually very, very simple. Let's see, question. How many of you here are designers and not developers? Quite a few. Do you guys care if you see code? I don't like code. Yeah, so, in fact, HTML is very easy to make accessible. And really all it involves doing is to make sure that you apply common sense to your work. Basic principles. In fact, it's all about going back to the basics. It's about making sure, for example, that your code validates. Making sure that you write well-formed HTML. Making sure that you use the appropriate HTML tags when you're trying to add semantics to a document. Semantics, it means associating, for instance, naming all your elements. So, for example, if you have input fields, you need to describe them. You need to say that this is where you put your first name. This is where you put your second name. You need to make sure that you associate labels and controls. So, let me see if I have something. Are you guys, do you guys want to see this? Yeah. Yeah, okay, so we can go ahead. So, I'm just going to jump in here. So, for example, the first guideline refers to text alternatives. Text is the most universally accessible form of content that there is. And so if there are other types of content, for example, videos, audio, interactive elements, the best way to ensure that your content is available as wide an audience as possible is to make sure that it has text alternatives. So, this is the guideline, essentially. It says provide text alternatives for any non-text content. If you have an image, make sure that you have what's called an alt tag for that, which actually describes an image or describes the content of that image in text. And, in fact, accessibility is excellent for business because one of the biggest blind users in the world are your search engines. Google is a huge blind user, right? Google can't see an image. It can't understand an image yet. Anybody from Google want to contradict me on that? As far as I know, Google cannot understand, cannot parse images and understand what's going on there. So, you actually have to tell it, okay, this is an image of, in this case, I have selected a picture of the Prime Minister of India and they are visiting the Ministry of Social Justice because for one, they are the ones responsible for electronic accessibility guidelines in India. They are trying it with Goggles. With Google Goggles, yeah. But I think that I'm not sure how far along they are with that. That's one thing. Doing one image at a time is a completely different thing and crawling the entire time. Understanding Google, which is a completely different list altogether. Well, I wouldn't underestimate them. Yeah, but as of now, my, anyway, key point to take away from today is that you should have all the tags on your images, right? These describe your images. They're great for search engine optimization. In fact, a lot of your SEO can come from basic accessibility principles if you like doing that sort of thing. Typical sign-up field, yeah, our friend at Google. They ask you for a bunch of inputs, right? They ask you to talk about who you are. They ask you to, they have different controls. They have a whole bunch of things. It's a good idea to associate this input field with this label. So when they talk about your first name, you need a way to programmatically associate these two items together. So you need to, in your HTML, make sure that labels and input elements are associated. So you do that by saying you have your input element, which has a unique identifier, and when you talk about what label, what input element the label is for by using the for tag. So fairly basic stuff. It's all in HTML 101. Unfortunately, this isn't followed so closely these days. More text alternatives for videos. Captures. So captures are sort of an unsolved problem as far as I remember in the accessibility world. So I will desert by letting you hear a sort of incomprehensible audio equivalent of a text, or the capture text. Yahoo! allows you to actually call a number. Some of the newer human understandable captures, I don't know how good they are at stopping spam, but they at least are available to everybody. So they will ask you what color is this guy, or do a math problem, or what kind of thing. Have you seen those around the web? Of course, I don't know at the scale of Google whether those are realistic. Yeah, so there's a bunch of stuff around media accessibility, which I'm not. There's also one interesting thing is to make sure that your content is adaptable so that it works on a wide range of devices. So make sure that you pay attention to the semantics of what you're putting on a web page. Use, for example, a well-formed markup. Use markup, which actually means what you're trying to say. So if you're trying to structure a document, use headings, use appropriately nested headings, use tables only for tabular data. I don't know if there are still people... I don't think so. You'll be surprised enough, right? You'll be surprised. You'll be really surprised. People still design websites with tables. It's true. CSS is a little bit hard to get in the beginning, but it's worth making that effort. Yeah, essentially this is about adding semantics to your document structure. So anybody want to... Okay, you don't have to tell me if you use tables for designing, but maybe you know a friend. You have a friend or a friend, maybe, who admitted once to using a table to design an equal height column, perhaps. I was about six, seven years ago. Six, seven years ago. But you've quit now. I mean, it's not just about the meaning also. It's also about the performance. Making large pages, tabular, and structure just goes everything up because it waits for the entire content to load. Absolutely. There are definite performance benefits from going to a semantic market, right? Yeah. So there's guidelines about how to make content distinguishable, about how you use color. So I'm not going to go into these things in detail. Please, please. You don't want people mixing up green and red. You know, people are going to stop doing that. Using green and red together to change the shape. You're not bad. You're not bad. You're the wrong example. You're not the wrong example? The projectors helping you. The color profile is not correct. Yeah, that's possible. So a lot of people, men especially, a person of all men cannot see red and blue properly. I mean, so red and green properly. Traffic lights are usually tolerable because they're in order. You mix up traffic light and order, it's bad. But veg and non-veg, red and green parts are the worst. I can never tell the difference between what is veg and what is non-veg in a menu because the same damn color to me. So what I do is take a photo of the damn thing and look at the photo because the camera will compensate for the color and make them look separate. So please, do not make such mistakes. Do not mix red and green, okay? By the way, you've just been nominated for an entry on first-world IR problems. You know, when it's distinguished, there are veg and non-veg labels and supermarkets. Anyway, so yeah, there's... Yeah, the guideline is very simple. It basically says, you know, make it easier for people to see, to distinguish between your foreground and your background, right? So for example, if I'd used a white background on the slide, it would not have been a good idea to use white text here. So I've used a very dark color. It talks also about the background, the audio, which is perhaps not so relevant, but basically makes sure that the primary audio content is audible and is clearly distinguishable from your background. It talks about ensuring that your interface elements and your content has adequate contrast. So it specifies certain ratios for ensuring that there's sufficient contrast between your various bits of text. It also says, please allow people to resize text, right? This is essentially the core of web accessibility. It's about not making assumptions about your users. It's about not making assumptions about the fact that everybody will be able to see 12-point text in light gray on a white background, right? It's about not making assumptions about the fact that everybody will be able to use a mouse or will be able to see your interface, right? If you say, please click on the green button. Please click on the red button. Yes, somebody who's colorblind cannot do this. Somebody who's blind can definitely not move through your application, right? So that's essentially if I were to wrap up now. That would be what I'd ask you to do. Make sure that you don't make assumptions about the user groups that you are targeting. Anybody questions? There are some automated accessibility testing tools, which, for example, the W3C publishes something called the HTML and CSS validators, which will go basic code check and ensure that your HTML is well-structured and well-formed. There are automated tools which I'm reluctant to recommend because automated accessibility testing is never 100% foolproof. For example, one of the guidelines says make sure that you have text alternatives for your images. If you just put blank, blank, blank, blank, blank for your images, those would technically pass an automated validation test, right? But it would not actually be accessible. So the web accessibility in mind publishes a tool called Wave. I forget how it expands here. But it's a Firefox plugin which you can install. You can just put your URL into a little bar. It'll indicate whether you have certain errors. It'll also provide alerts for things which it can't test reliably. So in your talk, you did a bit of covering the so-called concepts in the theory, right? So what I was curious was, if you're aware of the initiatives or the level of awareness, at least in the Indian context of accessibility and whether people actually care and what level do they care and whether that's sort of increasing. Well, there are different ways of tackling this or ways of looking at this more appropriately. One is you can look at it as a sort of at the level of social phenomena accessibility. You can look at it from a legal perspective. You can look at it from a business perspective. Those are the three I look at or I go into looking at. I lost a year of my life trying to get the government of India to pass a policy on electronic accessibility which became a watered-down bill which mandates that all government websites should be accessible to people with disabilities. Any of you try to use a government website? I think we already talked about working on the website for the Centre for Physical Disabilities. I'm not accessible. I have to read the website because of that. At least that website should be accessible. So there are efforts. It's fairly disheartening. The CIS is a big pusher of electronic accessibility. I did a lot of my work through them. They recently, a couple of days ago, published a study on government websites in India. They did a study of 1,500. The results are completely unsurprising. This is the one place where the government of India actually got six sigma compliance. Not being accessible. So yes, at a policy level, we do have a little bit of a framework which says you should be accessible. There are no penalties for not being accessible. What's good is that the private sector has a strong motivation to be accessible because it makes great business sense. Writing well-structured HTML, making sure that your code is optimized for search engines, etc. or accessible which means that it's SEO. It does make good business sense and people are starting to see that. A lot of the frameworks that are coming out have people have thought about it at least. So it's becoming better. It's not great yet, but it's not as bad as it was five years ago. Can gesture-driven interfaces solve the problem? Or what's the problem? So gesture-based interfaces have their own set of problems. They've increased accessibility for particular user groups, most definitely. Especially, say, people with different sorts of cognitive disabilities, different sorts of physical disabilities do enjoy gesture-based interfaces. On the other hand, for different sorts of people with different physical disabilities, they may not be able to actually use a gesture-driven interface. You can easily imagine somebody who has poor motor control using an interface like the iPad. Whereas, on the other hand, it has made it far more accessible to people who have different sorts of cognitive disabilities because of the interface, because of the lack of disconnect between, say, a keyboard and mouse and your screen. You touch an icon on the iPad, it does something. That disconnect is removed. It has its pluses, it has its minuses. Apple is doing some exemplary work in the accessibility sector. The first ones who came out with a completely accessible touch screen. I don't know what the situation on the Android front is right now, but in any Apple product, the iPhones, the iPads are completely accessible. Actually, it's a huge hit in the blind community. You talk a lot about most content being accessible. Is there any application being accessible, like Gmail or any of those things that basically are happening? Yes. The thing is, web standards cannot keep up with the pace of innovation that's happening on the Internet today. So, in response to web applications, which are responsive applications, interactive, what are called desktop-class applications, you had a new standard or a new framework, ARIA. So, it's a web ARIA which stands for Accessible Rich Internet Applications. It's a language for describing repurposed HTML elements and interfacing them with your accessibility APIs. So, you can technically make a response to an interactive environment even like a Gmail chat page. So, there are efforts within it and they're not doing so badly. There are definitely issues that these rich Internet applications throw up for the accessibility world. So, I'm going to stop now because we will actually try to start on time for Divya. But before that before that one presentation I was ready to make. So, before we go on a quick word from our sponsors. So, Hasgeet is a small organization. It's a small community organization which is trying to create discussion spaces for geeks for everyone actually, not just geeks we have special exemptions everybody is a geek. We're trying to do this by creating a topic that we think people are interested in and having a mechanism for everybody to come together participate in deciding what gets presented at these events and then creating online spaces as well for discussion around this. So, our team members are at work trying to take the computer away. These are some of the events that we've organized. We did a series on HTML5 a couple months ago nearly a year ago. Exactly a year ago. Doctorate HTML5 we then did a quick android camp which was on the first of April we did an event called Scaling PHP in the cloud we did most recently an event called JSFOO which some of you may have attended which was about JavaScript and Ninjas I don't understand JavaScript Our next event which we'd all like you to come for and also buy a ticket is DroidCon we're pretty excited about this because this is the first time that we're going to have an international android event in India. This is a worldwide series of events that's happening happening in London Eastern Europe Germany Other places Other places The Netherlands So, we're the first outside of Europe So, this is going to be our biggest event it's on the 18th and 19th of November that's next month exactly a month from now and it's going to be in Whitefield There's a new convention centre up there which has plenty of space it's got great sound our last few news have had some issues with the sound this one should be fun it's going to be targeted at android app developers people are interested in the android ecosystem so if you are there's going to be a wide variety of topics design, development where android is going to be going so please do come and tell your friends and even people who don't like but the event that I'm sure that all of you are far more interested in and this is the first time we're talking about this is an event that we like to call Meta Refresh which is an event that we're holding early next year and this is really going to be talking about the future of web interfaces we're going to be talking about what it means now that we have this wide diversity of devices or ways of accessing it it's not just about devices anymore interfaces are many and they're just growing all the time so this was the original iPhone which started a lot of this we're talking about situations where you go from having one way of accessing things one way of getting at content to having a wide range of actually getting into stuff so big buzz word this year of course has been HTML5 which we're going to talk about but interestingly they dropped the 5 from HTML so it's now a standard it's now an evolving standard it's changing all the time things are changing all the time and as designers and developers we're doing exciting things so we'd like to talk about that and we'd like to invite all of you to come in so this is the future we have flying cars so thanks for watching see you next time