So yeah, what's up? I'm Doddle Max of Bob Dodd. And today, I want to talk to you about how we can make sure that, as we build our progressive web apps, that all of our users can access the content in those apps. Now, Paul just showed some really cool examples of how to build amazing components. And as he hit on repeatedly in his talk, we know that performance is not just a nice to have. Performance is kind of a crucial aspect of a good user experience. We know that users will actually abandon an application if it doesn't have the performance that they expect. But it's often the case that when we're designing these components and these applications, we're doing so based on our own experience and our own physical abilities. So we're designing for the range of users who really see and interact with the world as we do. Meaning anyone who falls outside of that range is going to be excluded from our design. So these users aren't abandoning our app. They're actually prevented from using it in the first place. And so as designers and developers, it's important that we not only consider how we interact with the world, but we really think about the full range of human abilities. And this becomes especially important when we're talking about mobile. Because as we use our devices in different contexts and in different environments, we may, too, experience situational or temporary impairment. So to give you an example, I'm sure many of you have had the experience of trying to use your phone or some electronic device outdoors when it's really sunny. And you need, like, you can't really read the screen, so you're kind of like doing this thing, right? You need some additional contrast on the screen so you can actually read it. So if we have a design that also factors in the needs of low-vision users, folks who also benefit from increased contrast in their reading experience, then what we end up with is just sort of a more robust application. It works well for those users. It works well for us as we take our mobile devices out in the sun. In other words, accessibility just equals good UX. I'm getting the crazy slider, too. There we go. Accessibility is just good UX, right? So this is what I want to talk about today. How do we make sure that all of our users can access the content in our apps? I'm going to do this by splitting this talk into three parts. So the first part is looking at really the diversity of users that are out there and touching on the accessibility topics that affect them. Then I want to look at two big areas that developers often miss, which are particularly focused on focus and semantics. But I want to start just by understanding who our users are and the kinds of business technology that they use. Now, I'm going to focus on users with permanent disabilities. But again, I want to reiterate that issues of accessibility really do affect all of us, ensuring that users with disabilities can access the content in our applications. It's just going to make a better experience for everyone. But having said that, let me get some numbers out there, because I think these are pretty fascinating. So according to the World Health Organization, about 15% of the world's population lives with some form of disability. So to put that another way, we're talking about around 1 billion people worldwide. And we can roughly split these into about four different categories of impairment. Those affecting visual senses, those affecting motor and dexterity, auditory senses, and cognitive senses. And I want to cover each of these individually, starting with visual senses. So users with visual impairment, you can kind of split them into two groups. Those folks who might be completely blind and have no vision, which are those folks who might have limited or low vision. Someone who is completely blind might use a screen reader. This is TalkBack on Android to interact with their device. They may also use a Braille reading device to access their desktop and have it sort of translate the content for them in that environment. So that's users with no vision. Users with low vision, they may also use a screen reader, or no, go back, there we go. They may also use a screen reader, or they may choose to use screen magnification. They might use built-in zoom that's at the operating system level, as you're seeing here. They might use browser zoom, just command plus to zoom in the page. They may also use something like high contrast mode. So here you're seeing that the background and the foreground colors have been swapped to increase legibility. So that was vision. For motor impairment, these users really span the gamut of folks who maybe would prefer not to use a mouse, because they have something like repetitive stress injury, something like carpal tunnel syndrome, or maybe even just a broken arm or sprained wrist, all the way to someone who might be physically paralyzed and have a limited range of motion. So for these users, they may be using head or eye tracking devices. This is an example of a program called Dasher, which uses a webcam to track the user's head and eyes and help them type. They may also be using a keyboard or a switch device, as you're seeing here, to actually drive their computer. They may also use voice control. So there's a lot of different mechanisms that they can use. For auditory impairment, these users range from those who are profoundly deaf to someone who is hard of hearing. So I'm actually in the hard of hearing camp. I've got about 90% hearing loss on my left-hand side. So for these users, you want to make sure that you're not relying solely on sound to convey information in your app. So making sure that if you have a video, right, you've got captions, that you've got transcripts, that you're providing some kind of alternative if sound is part of your interface. And finally, for cognitive impairment, this is really a broad area that can be difficult to quantify. But it spans conditions like ADHD, dyslexia, autism, just to name a few. And while the accommodations for these groups are obviously extremely diverse, we definitely find some overlap with things like zooming to make it easier to read and easier to concentrate on the page. So this is a Chrome extension for someone with dyslexia. It applies color gradients to the text to aid in their reading order and help them read in kind of a more linear fashion. So broadly speaking, these are the four categories that we need to think about when we're working on accessibility in our app. Now, because accessibility is so broad and the usership is so diverse, it can be helpful to have a guide to make sure that we are covering each of these groups. And we can find that in the form of the web content accessibility guidelines 2.0 or WCAG. WCAG is basically a set of best practices which have been put together by accessibility experts to really try and explain what it means for something to be accessible. And WCAG is extremely comprehensive, but it can also be overwhelming. I know some folks look at that and they're like, that is not a thing I want to read right now, right? So to help mitigate this, the WebM group has actually taken WCAG and distilled it down to a very easy to follow checklist, which is targeted specifically for web content. So if you were watching those videos earlier and you were wondering, wow, how am I going to possibly cater to all of these different users and all these different assistive technologies? I think the short answer is to nail that checklist, okay? Figure out what the primary user journeys are in your application. If creating a new account is an extremely important process that you want all users to complete, then take that user journey and for every step along the way, make sure you can check off those relevant checklist items. And do this for every phase of your process, right? So get your product managers bought into it, get your designers bought into it and make sure you're having accessibility audits in your design review, get your developers bought into it, get your QA team bought into it and checking these things to ensure that the burden does not rely on one person. So with these checklists in hand, we're actually ready to start exploring some of the fundamentals which we'll need to actually complete those checklist items. And I want to start by looking at focus and really like, what is focus? Like what does it mean for something to be focused in the browser? If we really try and get down to first principles. So in a nutshell, focus determines where keyboard events go in the page. To give you an example, if I go and I click on this text field, that act of clicking on it actually focuses it and from then on as I'm typing on my keyboard, all key events are directed to that element, which in this case knows to display the characters as I've typed them. Now some users drive their computer entirely with a keyboard or some other type of discrete input device. So for these users, focus is absolutely critical because it's their primary means of reaching everything on the page. It's also really important for our screen reader users because if we're building something like a single page web app and we're adding new content to the page, right, we're fading in a new page or something like that, then we need to direct focus to that page so the user knows that it's loaded. They know it's available and their screen reader can announce it and we'll talk about that a little bit later on. Now, a lot of the controls that you're familiar with working with, things like button, input, select, all these elements are implicitly focusable. What that means is they are naturally inserted into the tab order so user can reach them hitting the tab or shift tab keys on their keyboard and they have built in keyboard behavior support. So if you take a select element and you hit the up and down arrow keys, right, you can select something. If you hit space or inner, it'll select something, right? So they have a lot of goodies built into them already but not all elements are focusable. So for instance, this header here, this paragraph of text, this image of a cat, these are not focusable because there's generally no need to focus something if a user can't interact with it or provide it some sort of input. Now, if you're worried that someone with a visual impairment might miss some of this important content, don't be. That's why we have tools like screen readers. It's a screen reader sole job is to read headings and read text and read the content of an image using alt tags. So don't make something focusable if the user can't interact with it. That might seem like you're helping out but it's actually detrimental to the user experience. And this brings up an extremely interesting and important point, which is that if you build your interactive controls out of these sort of non-focusable elements, a div for instance, then your users may not actually be able to interact with it at all. So I'll give you an example using Paul's side nav. This is actually not Paul's exact side nav. I've modified it a little bit. But you can see here that I've got my little hamburger menu up there in the top left. And obviously I want to tab over and click that to open my menu. And right now my focus is on that little start anchor up there in the header. So as I'm tabbing around or hitting shift tab in this case, you'll see that my focus never lands on the hamburger menu because it's a div and a div is not focusable. So if I am a keyboard or switch device user, I may potentially never be able to click on that menu ever. So how do we fix this? This is obviously a bad user experience. Well the straightforward thing to do is instead of using a div, we can just use a button element, right? So now when the user goes to tab over to it because button is easily styled, we can make it look like a hamburger menu. Now they're inside of our drawer, things are all good. A side benefit of using a button element in this case is that the browser actually has built-in magic that you get for using certain tags like button. So a button element, if you give it an on click handler and someone lands on it, they focus it and they hit enter or space bar. Even though they didn't click with their mouse technically, the browser will just say, enter your space bar, yeah, I'm gonna run your on click handler for you. If however, you have a div and you make it focusable and I'll talk about how to do that later and you have an on click handler on that and someone hits enter or space bar, nothing happens. You actually have to add an additional key down handler and then you have to check which key was clicked inside of the key down handler. So there's really no benefit to using these kind of like less or non semantic elements to do this kind of work. In other words, don't fight the platform here. So the browser has a lot of built-in stuff. It's trying to save you from having to write extra code. But I realize, you know, there's not always a native element that has the behavior that you need or as is often the case, there might be a native element but it might be really hard to style. Things like, you know, checkboxes and radio buttons, input file, that thing's impossible. So if you are gonna go and build a custom control, it's important to remember that you just have to add that keyboard support back in. And you can do that using the tabindex attribute. So tabindex lets you kind of configure the focus behavior for an element. And it can be applied to pretty much, I guess, many or most HTML elements. A tabindex value of zero is gonna just insert that element into the natural tab order, meaning someone can hit the tab key on their keyboard and they'll easily reach it. It also means that we can call its focus method to programmatically focus it. So here I've got this very fancy button that I've created. Right now if I press tab, focus is just gonna move right past it. So I give it tabindex zero. Now when I press tab, focus lands on it and we're all good. Tabindex negative one means that the element will not be in the tab order. But this can be really useful if you still need to programmatically focus something using JavaScript or if you want to like temporarily disable a control. So what I've got here is kind of a list control and I might have like a hundred items in this list. So I wouldn't want all of those to be keyboard focusable because a user's gonna hit tab over and over and over and over and over again to get through them. I'd like the entire list to be a single tab stop so user can just like move into it and move out if they need to. But when they're inside of it, maybe if they hit the up and down arrow keys or something similar, maybe then I can change which item is currently selected. So to do this I'll use a technique called roving tabindex or roving focus. And you can see here in my markup, my currently selected item has a tabindex of zero. And so what I'm gonna do is listen for the user hitting the up and down arrow key. When they hit down, I'll just move the tabindex zero to the next element. I'll call focus on it. That directs all of our attention to it. But if the user wants to, they can still tab out of this control. But when they tab back in, right? The last thing they interacted with is focused for them. This is an extremely useful technique if you're building sort of complex controls and other elements. It has obviously great browser support because we had tabindex for quite a while. So definitely commit this one to memory if you're building anything advanced or super fun like that. Now you can also have a tabindex value of greater than zero. You can have a tabindex of like five, which just means it's gonna jump that element ahead of everything else in the tab order. And this is basically considered an anti-pattern, but I wanted to include it for completeness sake so that you know that it is the thing that you could do. The reason why this is an anti-pattern is you can end up creating a super confusing tab order if you do this. And you're mixing matching components, maybe by different authors and they're using tabindex greater than zero. Things could get wild pretty quickly. So in general you wanna avoid tabindex greater than zero if you can help it. Now I wanna revisit the side nav that Paul showed earlier because it presents an interesting couple of use cases for tabindex. If we think about a side nav, when we open it, we want the user to be over there, right in the drawer. Either clicking a menu item or dismissing it. We definitely don't want them over there behind the overlay, maybe interacting with the page when they shouldn't be. But if someone is using a keyboard or a mobile screen reader to open our drawer, there's really nothing that automatically moves them into that side nav drawer. And I'll show you an example of what I mean by this. So this is mobile Safari running voiceover. This is hands down the most popular mobile screen reader setup out there. About 70% of the people surveyed who use mobile screen readers use mobile Safari and voiceover. And you can see this little black rectangle up there on the reload button. So that is where my screen reader is currently doing its thing. And I want you to watch what happens here. So I'm gonna start swiping to move the screen reader. I'll land on the hamburger menu. I'll double tap to select it. It looks like I'm inside the hamburger menu, but I'm actually, or sorry, it looks like I'm inside the drawer, but I'm actually still just in the header. I was still sitting on the hamburger menu. Now I'm just moving through the header when I probably shouldn't be. I might be interacting with the page when the author isn't expecting it. So my user's context hasn't been updated. They're not even sure if the menu is open yet. And if you have a site that has one of these kinds of menus and you have not done any work to direct the user's focus into your drawer, this is probably how a blind user or a screen reader user is gonna interact with your app. So how do we fix this? This is obviously not a good situation to be in. Well, one approach is to find a suitable heading inside of that drawer. I've got this one right here that says menu, and that seems like a good one. And I'll give it a tab index of negative one. So remember, when I give something a tab index of negative one, it's not in the tab order. The user can't reach it hitting their keyboard, but I can programmatically focus it using JavaScript. So now when the drawer opens, I can call its focus method, and now the user's gonna be directed inside of here, and they can start acting on the drawer very easily. So I'll show you an example of that. So same experience, we double-tap the drawer, and we just move right to the menu, and the user can keep moving with their screen reader. They know exactly where they are, and they have that nice sort of continuity to their experience. So this is a technique called managing focus, and it can be extremely, extremely valuable for your user experience. It's useful for situations like this. It's useful if you're building a single-page web app and you're fading in a new page. So super good technique to have in your back pocket. Now let me show you another issue that I found, specifically relating to tab index and this side nav. So this is more of a kind of a desktop, say, version of the site, and I want you to pay attention to what happens to my keyboard focus as I tab around the screen. So I'm gonna focus those two things, and then it kind of disappears, and then it focuses that anchor. So watch that again. We're kind of moving around in the header, and then we just disappear for a little while, and then we focus that anchor in the page. Now I'm actually hitting tab the whole time we can't see our focus ring anymore. And what's happening is because we have that drawer off-screen and because inside of that drawer we have anchors and things like that, focus is just moving off-screen. It seems like it disappeared, but it's actually just over there somewhere where the user can't see it. Now we probably don't want someone to be able to interact with off-screen content, especially if we're kind of trying to hide it on purpose. Again, this would cause sort of an error state in our application possibly, and it can be very confusing for the user. So how do we fix this? By the way, I see this all the time. You should go to some big websites and start tabbing around. This will totally happen to you. Okay, so how do we fix this? Because it's a super weird situation to be in. Well, the first idea is like, well, the thing's off-screen, right? So let's set it to visibility hidden, you know? It's off-screen. That makes sense. It is hidden, anyway. And this would totally work. But if you recall in Paul's talk, he talked about primed elements, and he talked about flip, and he talked about this idea of having your elements already kind of like in the DOM, already like ready to go. And if we set them to visibility hidden, then we're gonna destroy the compositor layer, right? We're gonna have to do all that work all over again every time the user presses a button. So that seems like maybe that's not the best solution. And to me, this is really frustrating, because I feel like developers and users should not have to choose between 60 frames per second animations and good accessibility. So I tried to come up with two solutions to this problem. The first is to ignore Paul and say, I win and I get what I want and set it to visibility hidden, anyway. And the reason why this is potentially workable is because, as Paul mentioned in his talk, you do have about 100 milliseconds from the time a user clicks on something until the time you need to start animating. So if our drawer is simple enough, then maybe we could get away with actually setting it to visibility hidden and recreating that layer. So the way we do this is we listen for the transition end event for when that drawer is off-screen, right? I checked to see, hey, does it have the side nav visible class, which was how I know that it was either on-screen or off-screen. If it doesn't, I'm just gonna set it to visibility hidden and do you sort of like vice versa for when we animate it on-screen. So what does this look like in the timeline? Here's Paul's original version. And the time that I am interested in is this little block right here. So that's the time. The yellow bit there is the click. The end of that blue rectangle is sort of when we ship the next frame. So right now it's about eight milliseconds in Paul's current version, well within that 100 milliseconds range, right? And if you look down here, you can see the amount of painting that we're doing. So I've got these two little chunks of painting that are happening, because this thing's already in the, but now we don't have to paint it much. So here's the version where I set visibility to hidden. You can see that there's definitely more paint work going on. But if we look at our time range here, it's about 10.4 milliseconds. So we added a little bit of time, but not too much. And a lot of that time was actually idle time. So in terms of how this frame stacks up with Paul's version, they're pretty similar. And again, it's because we can get away with this because the drawer is super simple, right? It's a very simple element.  So this leads me to option two, which I am calling the Detabinator. Unfortunately, there's really no easy way to remove all focusable children of an element from the tab order. You have to go to every single child and set it to tab index negative one. You can't just set it at the parent and have it cascade down, which is a bummer. So that is basically what this library does for me. I created Detabinator, and I give it the side nav element. And when I set it to inert, I set all the children to tab index negative one. I set it to inert false. I restore all of their tab indexes. The way that I do this is really gross, but I wanted to show it. So I have this query selector all, right? And I have this lovely query selector string inside of there to select everything that could possibly be focusable inside of an element. And this is not entirely bulletproof. There's weird quirks here. If you have links inside of SVGs or stuff like that, it may not be bulletproof. It may not be perfect, but it does probably, for general use cases, do the right thing. Then for each of those children, I'm going to loop through them. If they already have an explicit tab index, I'm going to save that. Remember when we set that menu to tab index negative one, because we wanted to manage focus, so I'm going to hold on to that so I don't lose that information. And then I'll set everything to tab index negative one regardless. And when we're going to open the drawer, I just restore all those values, okay? So here's the Detabinator version in the timeline. You can see our little block of time right here is back to about eight milliseconds, 8.4 milliseconds. So we're pretty similar to where we were with Paul's original version. And if we look at our paint time, we're back down to sort of like two little blocks of painting. So hopefully we're in sort of the same ballpark. Now again, there's sort of trade-offs to each of these. The visibility one, you have to do a little bit more work there in terms of painting. With Detabinator, you would also have to add things like are you hidden to prevent a screen reader from going in there, so there's additional work that would be required in that case. But again, what I'd say is, maybe if you're running into this problem, try one solution or the other, measure it, see which one works better for you and which one your team prefers. Okay, we talked a lot about focus. I'm gonna switch gears now and talk about semantics. So this is the other half of ensuring we have a good user experience. Semantics is really crucial for making sure that our screen reader users can understand the content of our page. And the first question that comes to mind when I think about semantics is like, well, what does good semantics mean? Like again, let's get to first principles. What the heck does it mean if something is semantically rich or right or whatever, right? And how does it actually benefit someone? And I answered this question and it helps us think about this idea of affordances. So an affordance offers or affords a person an opportunity to perform an action. And a teapot is a really great example. So a teapot just based on its physical design has affordances, it has a handle. And because I've seen other things in the world that have handles, I know that I can walk up to a teapot and pick it up by that handle and interact with it. No one has to explain to me how a teapot works. Now, when it comes to graphical user interfaces, affordances still represent the actions that we take, but now they're kind of more metaphorical. So a button is a good example, right? Someone can't like go, you know, touch the screen and feel the button.  But the obvious problem with this is that if someone can't see the screen, then they're gonna miss out on those visual affordances. So we need to make sure that the information in our application is expressed in a way which is flexible enough to be accessed programmatically by assistive technology, which can then create an alternative interface for those users. So I'll give you an example of what I mean by that. Here I've got some semantically rich markup. So I'm using a select element to create a list. And this is gonna generate a visual UI, right? But because I've used good semantic elements, it's also gonna produce this alternative UI. It's gonna produce a spoken UI for a screen reader user. Now, roughly speaking, for just about any element, you can expect some subset of the following semantic information to be expressed for it. The element will probably have a roll. So the select element, in this case, its roll is pop-up button. It will have a name. And I don't mean like a name, like the HTML name attribute, but you can think of the name kind of like its label or the sort of the computed text value of that thing. The element may also have a state. It's optional. Some elements have states, some don't. And it may also have a value. Again, that's optional. But in this case, we have a value of no preference here. So what's happening is when we write HTML, the browser does two things. It generates a graphical user interface and it generates a separate accessibility tree, which is just a collection of all that semantic information that I was just going through. This tree then gets handed to assistive technology, like a screen reader, and then that produces a spoken UI for our user. So this is actually why semantics really matter. Even though Nav and Div look the same, right? Because they don't look like anything. They just look like a container. Semantically, it produces something very different in the accessibility tree. So as I mentioned, just like with focus, native elements, many of them have implicit semantics. So for example, a voiceover on Mac when I focus an input element with type equals password, it's going to announce secure edit text to the user. And just like we saw with focus, when we try to bolt functionality onto non-semantic elements like a div, then we end up missing out on all these goodies that the browser is trying to give us for free. So here's another div button, another very fancy button, and it's got tab index zero, so it's focusable for sure. But when a user lands on it with a screen reader, the screen reader will say group, because it is just a grouping thing. It's a container, right? But that definitely does not say to me that I should click on it. So again, don't fight the platform here. Whenever possible, use native elements because you're gonna get good, rich semantics for free. And just as an aside, like I hope at this point, no one is considering writing a div button ever again. If anyone leaves here and writes a div button, I have failed all of you. But there are times when you're gonna need to build something that just doesn't have a native element equivalent, or you need to just go off-road and do your own thing. And in those situations, you can use the web accessibility initiatives, accessible, rich internet application spec, or ARIA. So ARIA allows you to specify attributes on an element and then basically modify that element semantics. You can think of it like doing surgery on the accessibility tree. However, semantics is the only thing that ARIA changes. ARIA does not change behavior. So I used to think if I put like a roll equals button on something that it magically became focusable and worked awesome with a keyboard. It's not the case. All it does is change the semantics to get expressed to assistive technology. So let me give you an example of using ARIA in practice. So here I'm gonna build a custom control. I'm gonna build a checkbox, a custom element checkbox. And in this box down here on the bottom right, I'll show the output from my screen reader, just the textual output, right? And the first question when I look at this checkbox is, hmm, okay, I'm building a checkbox. I want it to be accessible. What do I need to add to this? What sort of ARIA do I need to add? Now there's two approaches here. The first, you can go look at the ARIA spec, which comes with this very helpful diagram. Or you could go check out this document called the ARIA Authoring Practices Guide. And this document is a bit of a hidden gem. It is pretty freaking cool. So over on the left-hand side there, you see all the UI patterns that you could probably imagine. There's a ton of them in this document, right? Grid, dialogue, tree, whatever you're trying to build. Checkbox, for instance, is included in there. So you click on the UI pattern, and I'll take you to a little section, and it's just gonna walk you through all of the support that you need to add to that element. In particular, there's a whole section down here dedicated to the ARIA that I need to add to a custom checkbox. So it says it needs to have a roll of checkbox, it needs to have an accessible label, which we'll talk about, it needs to have a state of ARIA checked if either true or false. Okay, cool, so let's add this to our checkbox. I'm gonna give it a roll of checkbox, and you can see now my screen reader is announcing unchecked checkbox. Nice. Now in the world of ARIA, roll is the absolute most important attribute. Everything falls out of the roll, okay? There's a lot of ARIA attributes which don't even work if they are not paired with the proper roll. So, and you can also see that now my state is just defaulting to unchecked because of the roll, right? So it's like trying to start doing stuff for me, it's like coming alive, which is cool. But you see that my checkbox actually is checked, so I need to change that state. So I'm gonna add ARIA checked, and I'm gonna set it to true. And ARIA is sort of unique in that you always need to pass it like a literal string value of true or false. Most HTML attributes do not work this way, but this is the case with ARIA, it's kind of a weird quirk. Now the design pattern doc also mentioned I need labels for this thing. And there are a couple options for how I can label an element. The first is ARIA label, which is really just a label that you can apply directly to an element. A good use case for using ARIA label is something like a hamburger button where I probably wouldn't have any other text on screen to explain this thing, but I need to explain it for assistive technology. So what I can do is take that button and add an ARIA label of main menu. And now it'll announce main menu button. Okay, that's good. That's one option. The other option is ARIA labeled by. So ARIA labeled by lets you specify another element to act as your label. It's sort of similar to using the label element like it might do with a native input, but that element really only supports a few kinds of children, whereas ARIA labeled by can be applied to just about anybody. And the cool thing about ARIA labeled by is that it can be composed. So I can take other elements and combine them together for a bigger label. In this case, I got this button that says shop now and if you look at our text up there, the screen reader is just gonna announce shop now button. I don't know what I'm shopping now for. I'd like to combine it with that header. So using ARIA labeled by, I can take both the header and the ID of the button itself and compose them together to create the label men's outerwear shop now button. Nice. So this is what I wanna do in my checkbox. So I have this little span here. I'll give it an ID of sign, drop it into my labeled by, and now the screen reader is gonna announce that I have sign up, checked checkbox. There we go. Nice. Now if you are building controls and you want to verify your work is correct, I highly recommend you check out the Accessibility DevTools extension created by my teammate, Alice Boxhol. This thing is awesome. It lets you inspect your element's accessibility properties the same way that you inspect CSS and other things like that. So here's our sign up button. I'm gonna open it up, go to my elements panel, find this element, and then I can go check out its accessibility properties and see now its role and its values and its name and all these other cool things. So I don't have to go around with a screen reader and manually test every single element. So this is super handy to have. You can find it at bit.ly slash a11y-devtools. Another cool example in the Progressive Web App space is this app created by the Polymer team called Shop. I really love this app because I think it shows off that you can build these bleeding edge beautiful experiences using web components, all the Progressive Web App tech that we're talking about, but still have it be really accessible too. So you can see the text down here. This is the output from my screen reader and as I'm navigating around, it's giving me lots of really useful actionable feedback. It's telling me the proper thing that I'm interacting with. So definitely go check out Shop. You can find this at github.com slash Polymer Shop. If you find any accessibility issues, please file them. We want this to be like a show piece of web components and a good accessibility. All right, we covered a lot. Let's wrap it up really quick. Three big things that I want you to take away. When you're planning your applications, make sure that you're really nailing that web-aim checklist. Familiarize yourself with WCAG and ensure that you can go through those user journeys and for every major primary use case, you can check off the relevant checklist items. If you're building controls, you want to ensure that they have good keyboard support and that everything is focusable.  If you need to create your own elements, use something like Tab and X to make sure that the user can interact with them. Also, make sure that you're offering the right affordances in your app. So again, use native elements because they have rich semantics for free. But if you need to go off-road, you can use something like ARIA and that ARIA design pattern stock. Seriously, that thing's a lifesaver. So definitely check it out. Now, if you're interested in learning more about accessibility, myself and Alice Boxall, we have put together this entire Udacity course. It's launching today, I think, actually. So if you all go sign up, it'll be some of the first people. So it's bit.ly-slash-web-a11y. This is a multi-week course. It goes super in-depth on all of these topics. So definitely please go check this out. Finally, the main takeaway that I'd like for you all to leave here with is this idea that accessibility is just fundamentally good UX. Ensuring as many users as possible can access our content should be our primary goal at all times.


Alright, let's talk about integration techniques. So far we've found antiderivatives in two different ways. Either we just recognize them, so the antiderivative of 1 over x, I think about that and say, well, what function has derivative 1 over x? Oh, that's a log of x, plus c, don't forget the constant of anti-differentiation. Or we can do guess and modify, so the antiderivative of 3x, well, that's an x raised to the first power, so I'm guessing there's going to be an x squared in the antiderivative, but if I differentiate x squared, I get 2x, not 3x, so I have to modify that by multiplying through by a constant, again, don't forget that constant of integration. Now if we want to do anything more complicated, we're going to have to develop some integration techniques. This is an important topic in second semester calculus, but there's at least one of the integration techniques that's worth introducing here. Just as a note and a preview of things to come, there's actually only two integration techniques. There's what's called a u-substitution, and then there's something called integration by part. Everything else comes down to algebra or trigonometry. So let's take a look at a u-substitution. So we want to find the antiderivative of e to the power of 5x dx. Now in a u-substitution, what we're going to do is we're going to sweep under the rug a complicated expression. What do we mean by a complicated expression? Well, it's helpful to remember one of the basic guidelines for the chain rule. The type of function that we're dealing with is the last thing that you do. And so the expression that we're going to sweep under the rug, at least initially, is something that's going to make it more clear what type of function we're dealing with. So let's take a look at it. This function here, e to the 5x, well it's actually an e to the something type of function. So the substitution that we might want to try is, well, let's make u equal whatever our something is. And again, we'll apply the kindergarten rule. We'll put everything back where we found it. So we had e to the 5x.  So remember, paper is cheap. So we'll go ahead and write everything down. We'll let u equal 5x. And I'm going to differentiate that. So my derivative is 5. And the reason that we want to do this is that our anti-derivative has this dx, this differential here. Now again, this is not a fraction. We can't really separate it. But notation exists and persists because it reminds us of something useful. And in this particular case, we can pretend that this is a fraction. And I can solve for dx in terms of everything else. Solving that equation, cross-multiplying if you want. du is equal to 5 times dx, which says that dx is 1 5th du. Now this is called a u substitution. So there's my u. And now we'll move on to the substitution part.  Then this anti-derivative, u equals 5x. So I'll replace my 5x here with a u, my dx, 1 5th du. I'll do some really complicated algebra. And then I'll integrate. Now before we move on, here's an important check. Remember the differential controls the variable. So this differential, this du tells us that the only variable we're allowed to have is u. Let me check our expression here. The only variable here is u. And we're good. We're ready to find the anti-derivative. So that's a one-viv. That's a constant multiple. So I can factor that out in front of the anti-derivative. And, well, I do have to recognize some anti-derivatives. So let's think about this. I need a function whose derivative is e to the u. Well, that's the world's easiest anti-derivative. That's just going to be e to the u. And then don't forget our constant of integration. And again, apply the kindergarten rule. Put everything back where you found it. The important thing here is that our original anti-derivative is expressed in terms of x. We don't want to write our answer this way. This is expressed in terms of u.  We want x in our final answer. So I'll make that substitution back. u equals 5x. So I'll substitute back. And there's my final answer, 1 5th e to the 5x plus constant. Now, one last step. I'm not going to do this. But you should get into the habit of always doing this. When you find an anti-derivative, make sure that you check by differentiating and verifying that you actually get what you started with.


Alright, so we reached a stage where we were talking about the moment distribution, the moment generating function for a probability distribution and then I mentioned something about the cumulant. So let us carry on with that. The idea is the following. If you have a probability distribution for some random variable and from now on let me use a symbol capital X for a random variable in general, it could be continuous, it could be discrete. We have looked at discrete random variables, integer valued ones but we are going to extend it to continuous random variables as well. Then you define a moment generating function m of u as equal to the expectation value of e to the u x, where this x is the random variable and of course that is immediately equal to a summation from k equal to 0 to infinity, u to the k, expectation x to the k divided by k factorial and these are the moments of the random variable, could be discrete, could be continuous whatever with respect to, the average is taken with respect to the normalized probability distribution. Now immediately it follows that m of 0 must of course be equal to 1 because we put u equal to 0 here, all terms vanish except the k equal to 0 contribution which is 1, the expectation of 1 is just 1, okay. So that is the normalization of the probability and then one can ask can this quantity, can m of u be written as e to the power k of u, some k of u, okay. Can we do that? What does that mean? It says you are taking this quantity here which is in general going to be some power series in u as you can see and you are writing it as the exponential of another function out here and we will see the advantage of doing this very shortly. Of course this immediately implies that k of u, k of u is the log of, natural log of m of u here, okay and k of 0 must of course be 0, so that m of 0 is unity as we have seen. So in general summation from r equal to 1 to infinity, some constants, some kappa of r, u to the power r over r factorial and these constants, u independent quantities, this quantity here is the so called rth cumulant of the random variable. Now it is not hard to see that these cumulants are going to have interesting properties, kappa 1 equal to, it is just the mean value of x, that is trivial to do, all you have to do is to expand this quantity and pick out the coefficient of u in the power series in u and then you discover immediately it is just the first moment, that is really true, okay. The second moment kappa 2 equal to turns out to be x minus the expectation value of x whole squared equal to the variance, it is just the variance of the random variable. As you know the second moment itself we found was a very inconvenient quantity to use, you needed to subtract the square of the mean from that and then you got a quantity which had physical significance as a scatter of the variable about the mean and that is kappa 2, the second cumulant, okay. Turns out that the third cumulant kappa 3 turns out also to be x minus x average cubed, namely the third central moment turns out to be identically equal to that, okay. Now when you write this in a power series, put that in here and write this as a product of terms and then write the expansion of each of these and collect, compare with what happens here with the various moments, you discover immediately it follows from here that the highest term, the leading term in the arth moment is in fact the arth moment, in the arth cumulant is the arth moment but then things get subtracted after that. Now for instance this quantity here is just x squared minus x average squared, this quantity here would be an x cubed minus 3 times x squared x and then there would be a term which would be plus 3 times x times x average squared and then a minus x average cubed but when you take the average value of that you get a cube here, x average cubed with a 3 and there is a minus 1, so the next termlessness of course be twice x cubed, okay. The fourth cumulant turns out to be x minus x average whole squared to the power 4 but there is a correction to it which is thrice x minus x average squared, this follows the variance squared and of course if you expand this, this is equal to x4 and then plus etc, there is a set of corrections lower moments than the fourth are going to appear rest of it. So there is a systematic way by which you can write the arth cumulant in terms of the arth moment and lower moments and vice versa, right. And the coefficients are standard coefficients, in a sense what is happening? You are kind of subtracting out the lower moments in appropriate combination of lower moments when you do this and you have seen this happen in many many places for instance when you subtract out in the quadrupole moment of charge distribution you subtract out the lower moments in exactly the same so that the whole thing is rotationally it has got interesting definite transformation properties in exactly the same way by doing this subtraction a very important property emerges among other things namely if you just shift the random variable by constant value then the moments of course would change but the cumulants do not change. So if x is replaced by y which is x plus a constant a some constant value a sure value a then the first moment of course will change because the average of y is now the average of x plus a this constant a but all the cumulants remain exactly the same kr for x equal to kappa r for y for r greater than or equal to 2 that is trivial to see it is immediate here for example you immediately see whenever you can write it in terms of central moments this thing the mean value just cancels out the shift in the variable cancels out and then you have this invariance here. So the cumulants of a random variable are invariant under translations of this random variable you shifted by a constant then it does not change at all that is one very crucial property. Let us write down the cumulants for various distributions that you already know about so we have seen a whole lot of distributions for which we know closed form answers so let us write it down if you recall just to recall to you what happened if you recall I defined a generating function f of z this was just a generating function and then I had a moment generating function m of u and we found that this was just f of e to the power u so wherever z appears I just replace it by e to the power u and k of u the cumulant generating function is just the log of m of u now let us see what this turns out to be for various distributions so that you could write the cumulants down for instance the binomial distribution the probability distribution itself we wrote down it is just the binomial the generating function for that was of the form f of z was equal to p z plus q to the power n when you had n Bernoulli trials and p was the probability of success in any given trial then it says m of u is this fellow. So remember that the average value mu the mean was equal to n p so instead of n let us write it as mu over p and if I take logs I put instead of z I put e to the power u and then I take logs I end up with k of u equal to mu over p so that is the cumulant generating function for and remember that the kth cumulant rth cumulant k up of r is d r over d u r k of u evaluated at mu. So once you have this expression it is a very simple matter to write down what the cumulant generating function is and therefore what the cumulants are completely for this binomial distribution what happens in the case of the Poisson distribution for the Poisson f of z was just e to the power mu times z minus 1 so I replace z by e to the u and then take the log to get k of u so this immediately says k of u equal to mu e to the u minus that is it. What can we now say about all the moment all the cumulants all you got to do is this differentiate it set u equal to 0 if you differentiate this fellow you can just e to the u once again you put u equal to 0 you get 1 right so it immediately says that for this Poisson k r equal to mu for all r greater than equal to 1 so the mean the variance the higher cumulants they are all the same it is just one number it is a very special property of the Poisson distribution not shared by others there are other distributions which might display this property you can create them but the fact is that therefore the Poisson the variance so the statement that the variance is equal to the mean for a Poisson distribution is a special case of a more general statement that all the higher cumulants are equal to the mean value in this case. What other distribution did we look at we looked at the geometric distribution right so for the geometric distribution with mean mu the distribution itself was 1 over 1 plus mu so geometric times mu over 1 plus mu to the power n that was the probability distribution of the random variable n which took value 0 1 2 3 etc and now if I find f of z for it it is just a summation of this guy so it is 1 over 1 plus mu and then this geometric series summed from 0 to infinity which is 1 over 1 minus this guy multiplied by a z. So the 1 plus mu will go away and you get 1 over 1 plus mu minus mu z but I got to put e to the power u here that is m of u so it says k of u equal to minus log 1 plus mu minus mu and that is it now we can write down all the cumulants from this directly a sum of Poisson random variables again Poisson so nothing new happens what happens if you have a difference of the two if you had a skellum distribution for instance where you have the difference of two Poisson random variables whose means are mu and mu say what happens then well the generating function was this and then in the other case for the new because of the minus sign when we generated it you had an e to the 1 over z instead of z so it would be just this plus nu times e to the minus nu e to the minus u minus 1 that is k of u okay and of course the first cumulant is the first derivative of this at u equal to 0 and that will immediately give you mu minus nu which we know is the mean the second cumulant you differentiate this twice you are going to get a plus sign again and so on so it immediately it says kappa r equal to mu plus minus 1 to the power r mu so every other moment every other cumulant is mu plus mu and every other the even ones are all mu plus nu and the odd ones are all mu minus nu as you as you would expect in this case we will write down the cumulants of some continuous distributions as we go so the first important property of a cumulant is that it is translation variant the other property that is obvious by looking at it is that the cumulant is a homogeneous the cumulant the rth cumulant is a homogeneous function of this random variable in a strange way that is if you multiply the random variable by a constant then the rth cumulant gets multiplied by that constant to the power r okay and that is fairly straightforward to see so if x goes to c times x k r is multiplied by c to the r so the scaling property is also very immediately obvious here the cumulant has another very crucial property we saw that the variance of two independent random variables and is simply the sum of the individual variances this is going to happen for all the cumulants the additivity of cumulants is a very very crucial property and we can see that in many many ways but one way of seeing it is to say that well if I take the log here this moment generating function just multiplies for various random variables and if I take the log it simply adds up so it is clear that if you have several random variables independent random variables then and they are independent statistically independent then the cumulant rth cumulant of the sum is equal to the sum of the rth cumulants so the crucial property is there for independent this is absolutely crucial very very important property we make use of it as we when we talk about limit theorems we want to make use of this at least part of this property now I have mentioned off and on continuous random variables so let us just say a few words about it and then so you have a continuous let us call X the random variable takes values in some continuous interval of the real axis for instance or takes values of overall real values of overall real numbers then instead of talking about a probability of this X for any particular value which must be defined with infinite precision now it is a set of measure 0 a point in a continuum all you can talk about is the probability density function of this variable that this random variable has a value probability that X has a value in some X X plus DX equal to P of X DX P of X is the probability density function I will call that denoted by PDF that is the probability density function and it cannot be negative this number cannot be negative could become unbounded all you need is normalization so all you need is integral DX P of X equal to 1 over whatever is the range of this variable in general minus infinity to infinity say and you also need P of X to be greater than equal to 0 now we are going to be rather lose in our mathematics if for example you have a situation where there is one particular point in the continuum where there is a finite probability that this variable has a value then we will include it in here by putting a delta function at that point we put a delta function spike in the PDF with an appropriate weight factor so that it gives you the probability of taking on that particular value okay. So we will be a little casual about this I will continue to write integrals but then in here could be delta functions alright now once you have a continuous random variable of this kind the convenience to define and once you have a probability distribution function of this kind which is integrable it is convenient to define a Fourier transform for this variable and the Fourier transform of this quantity P tilde of K equal to integral minus infinity to infinity DX e to the minus I K X P of X this quantity this is called the characteristic function of this random variable but it is nothing new we have already introduced this quantity in a different way this quantity is just the expectation value of e to the minus I K X with respect to this weight factor here but we know what e to the U X is that is M of U so this is nothing but M of minus I K so the characteristic function is just another way of writing of saying that you have a moment generating function okay there are analytic properties of these variables which I am not emphasizing at the moment but you see if you give an arbitrary function P tilde of K I cannot claim immediately that it is the characteristic function of a random variable till a certain set of conditions is satisfied for instance if I want a normalization to be valid for this if I put K equal to 0 here and I want the integral to be equal to normalize quantity 1 total probability then this immediately implies that P tilde of 0 must be equal to 1 but even more strongly given a function P tilde of K it can be a characteristic function only if it is Fourier transform only if it is inverse Fourier transform gives you a non-negative function P of X okay so that is a very strong constraint a real function should be real and it should be non-negative that is a very very strong condition so all functions of K are not going to be even if they are integrable are not going to be characteristic functions okay and that is an important test what follows all right now the additivity of cumulants follows trivially once I introduce the characteristic function as you can see from here because this immediately says that so if I have a random variable X 1 and another random variable X 2 with moment generating functions m 1 n 2 and cumulant generating functions k 1 k 2 etc then it immediately says as you can see the probability density function of the variable let us call this equal to X say then P of X is equal to an integral from minus infinity to infinity dx 1 integral minus infinity to infinity dx 2 P 1 of X 1 P 2 of X 2 where X 1 X 2 are the points in the sample space of these two variable random variables and P 1 and P 2 are the corresponding probability density functions okay multiplied by the constraint that X 1 plus X 2 must be equal to X okay and where does that get us that says this quantity is minus infinity to infinity dx 1 P 1 of X 1 P 2 of X minus X 1 if I use the delta function constraint then this is all it is now it in what form is this quantity here it is a convolution so it immediately follows that P tilde of K equal to P 1 tilde of K P 2 tilde of K by the convolution theorem for Fourier transforms but that is the same as M of M 1 of minus I K and M 2 of minus I K and if I take logs this immediately implies that K of U K of U or minus I K does not matter these are all power series so which implies that the cumulants add up because the cumulant the Rth cumulant of this quantity is the coefficient of minus I K to the power R divided by R factorial whatever right so it says immediately the additivity of cumulants is a trivial consequence of this fact here okay if they are discrete value random variables over some finite range or something like that you got to work a little harder to do this but it is pretty much the same yeah sorry the X there should be additive of both X 1 and X 2 what should I am sorry say that again the X 1 plus X 2 should be equal to X in that case when we are finding the probability density function of X yes what exactly are we doing in this we have written X 1 comma X 2 equals X on top X 1 plus X 2 is equal to X I am sorry I am very sorry yeah thank you yeah X 1 plus X 2 yes now generalization to some constant times X 1 plus some other constant times X 2 any linear transformation similar things would happen but you can check that out directly thank you now we could go back and look at various continuous distributions or even the discrete distributions and ask for sums of random variables and that is going to become very important to understand how the sums of random variables behaves when you have a large number of components we are going to spend some time on it but let us do this in the context of a very famous example the simplest of these examples the most ubiquitous of continuous distributions is the Gaussian distribution so let us write down the answer for the Gaussian distribution what happens to the cumulants and a very important property will emerge so the Gaussian it is also called the normal distribution and it is parameterized by two quantities the mean and the variance the PDF for the Gaussian so first of all you got a random variable X which is an element of minus infinity infinity and the corresponding PDF P of X the normalized PDF is this quantity I should use curly X here the value then the mean value of X this quantity is mu and the variance X equal to sigma square so it is parameterized by the mean and the variance two parameter distribution now this distribution is going to appear ubiquitously everywhere we will see when we look at the central limit theorem how this distribution emerges in a very very general context but right now let us look at some of its properties first of all the shape of this distribution it is quite straightforward it is something which is bell shaped here where this is the mean value it is unimodal the peak is at the mean out here there is a function of little X this is P of X and this width here this half width is proportional to sigma so the full width that half maximum the value at this point and this mu at X equal to mu is 1 over root 2 pi sigma squared and when you go to half that value this quantity here the width is proportional to sigma and sigma is the standard deviation out here okay you could ask what the cumulative distribution function is so the cumulative distribution function let us call it f of well there are various notations used for it let us call it P of X this is equal to the probability that the random variable X is less than equal to some specified number X which is equal to the integral from minus infinity up to X of DX prime P of X prime so the probability that the variable has a value less than some specified value is the area under this curve that is the cumulative distribution function is clear it cannot be a decreasing function it has got to be a non decreasing function in this case when you have a distribution like this as you move to the right the area keeps getting added to so it is an increasing function right and P of minus infinity is 0 P of infinity is of course 1 let us use another symbol for this I do not like this P f out here infinity is 1 and by the symmetry of this distribution it is quite clear that f of mu equal to a half at this point you have exactly half the area is exactly a half can we write down this f of X in terms of some known functions well there is this famous integral it is called the error function error function of X this is defined as an integral from 0 to X dt e to the minus t square and you want to normalize it so 0 to infinity the answer is equal to square root of pi over 2 so 2 over root pi then earth infinity is equal to 1 of 0 is 0 and earth minus infinity it is an odd function so it is equal to minus 1 goes from minus 1 to plus to infinity to 1 at X equal to infinity so this quantity this f of X will turn out to be half 1 plus the error function of X minus mu because I have shifted everything to mu the origin to mu and it should be scaled down I used a dimensional as variable here so what I need is in the probability density I had e to the minus X minus mu whole squared divided by 2 sigma squared so this length scale there was fixed by 2 sigma squared right so I got it kill that and that is all it is okay and this earth x itself is a function which looks like this the function of X this is 1 this is minus 1 that 0 the function goes like this and that is what the cumulative density distribution function of this random variable is okay statisticians like to use the cumulative distribution function rather than the probability distribution function itself for various reasons first of all when you have these atomic probabilities namely you have a given point where there is a finite measure for instance then we need to introduce things like delta functions and so on which are rather singular objects but when you integrate it out things get smooth so people like to use this rather than using you do not mind using step functions but you delta functions are little singular you got to define them more precisely etc so it is convenient in many cases do this physicists generally work with densities probability density functions etc so once we have this we could ask what is what are the various quantities associated with this Gaussian distribution 2 parameters mu and sigma squared the variance we could ask what all its cumulants are for instance we could ask what its moments are and what would be the moments of this distribution we already can predict what is going to happen for a Gaussian we can ask what is X minus the average value the central moment this quantity this is of course 0 by definition because mu is just the expectation of X but we can ask what this is for the kth moment 2k plus 1 say the odd moment what should this be well the pdf is a symmetric function of X minus mu and now I am asking what is the average value of X minus mu to the power an odd number an odd integer should be 0 by symmetry this is 0 the integral exists for all positive k as you can see because there is a e to the minus x square to take care of convergence definitely all the moments exist so this is identically equal to 0 0 2 maybe does not matter and what are the even moments like what would this be what is it when k is 1 it is just the variance it is just the variance what is it when k is 0 you want to be 1 it has got to be 1 average value of 1 now it is clear that the answer depends only on sigma because once you shift to mu the only parameter left is sigma and the only quantity of dimensions sigma of dimensions length is sigma in the problem so this got to be proportional to sigma to the power 2k just pure dimensions multiplied by some factor and that factor is not hard to find you can write down a Gaussian integral multiplied by any even power here and turns out this thing is times 2k minus 1 double factorial this stands for one times this this fellow here stands for one time into 3 into 5 2k minus 1 so this symbol double factorial is very often used for this or you could write it in terms of 2k factorial divided by k factorial times 2 to the k and so on. Now there is a nice interpretation of this combinatorial interpretation which were which is useful in places like field theory when you do what is called wicks theorem it is very useful if you took this thing here x minus mu to the power 2k and wrote it out as factors you have 2k factors each of which is x minus mu then you can ask in how many distinct ways can I pair these fellows can I write them pair wise how many pairs you can independent pairs can I find and the answer is precisely this so this is really a combinatorial factor that arises from the number of ways in which you can pair 2k objects two at a time okay so that is what this is now we could ask what is so the very important property emerges that all the central moments are all dependent just powers of this guy here nothing more sigma squared to various powers now you can ask what is the cumulant generating function of this distribution and a very interesting fact emerges k of u in this case is equal to well first you want the moment generating function but remember this is just a k of minus ik is just log of p tilde of k and p tilde of k is the Fourier transform is integral minus infinity to infinity 1 over root 2 pi sigma squared e to the minus x squared over 2 sigma squared minus ikx it is the Fourier transform of a Gaussian okay and what is that going to be it is also going to be a Gaussian this guy is also Gaussian and all you can all you need to do is to complete squares out here pull out a 1 over 2 sigma squared complete squares here it is also Gaussian but what is the width of that Gaussian going to depend on it is one it is it is sigma squared itself whereas here the width was sigma squared there it is 1 over sigma squared there is this very interesting property of Fourier transforms that the more compact a Fourier transform is the more spread out its function is the more spread out its Fourier transform is and vice versa so the width here if it is sigma squared the width there is 1 over sigma squared very profound implications so this will lead to the fact that k of u equal to mu times u plus half sigma squared square k of minus ik which is p tilde of k will turn out to be minus mu ik minus half sigma squared k squared so what does that tell us about the Gaussian it says of course it is a immediately true that kappa 1 equal to mu and kappa 2 equal to sigma squared that is that is very clear but what does it say about this greater than equal to 3 what does it say about it it is 0 identically because remember it is the coefficient of u to the r over r factorial in a power series expansion about the origin of k of u and this is a polynomial that is it just the first two terms and everything else goes away so an incredible property of the Gaussian is that all cumulants higher than the second one vanish identically there is a first moment there is a second moment and there is a there is a variance a mean and a variance and all the higher cumulants are identically 0 okay so very very basic property of the Gaussian is that the higher cumulants are all identically 0 which again means that if you look at the fourth cumulant for example or ask for the third cumulant that is identically 0 there is a physical meaning to these cumulants the mean is of course going to tell you something about the average value it is exactly the average value the variance tells you the scatter about the mean the third moment gives you what is called skewness it is related to how asymmetric it is this distribution is and when you have a symmetric distribution like the Gaussian the fourth or any other symmetric distribution then the fourth cumulant gives you information about how much it departs from Gaussianity because this relation immediately tells you this relation here it immediately implies that for the Gaussian kappa 4 is equal to this quantity which is delta x that is the x minus average x which I called mu mu to the power 4 minus 3 times the average value of x minus mu whole squared squared is identically 0 for the Gaussian and this quantity in general let me call x minus mu equal to the deviation from the mean then this quantity delta x 4 minus 3 times delta x squared the whole squared and just to make it dimensionless we divide by this quantity delta x squared squared this quantity this is called the excess of kurtosis and for a Gaussian it is identically 0 this quantity could be positive negative or 0 if it is 0 for a Gaussian it is identically 0 but if it is positive what does it sort of imply it says that this guy is dominating over that in some sense and this is the fourth moment so it means that the higher larger values of x about the mean are actually more significant than the smaller values it says something about the shape of this distribution. Similarly if it is negative it says the large values do not dominate the smaller values dominate right so in one case you got a thing which is fatter than the Gaussian the other case you got something that is leaner than a Gaussian and these are important indicators of the deviations from Gaussianity and the reason the deviation becomes important is because Gaussianity is what I expect if you had as you will see a lot of random variables added up in an incoherent sort of a fashion and the limit for suitable rescaling of this sum linear combination it turns out the distribution will be Gaussian and a very very robust conditions. So this implies that whenever you have a deviation of this kind it says something very important about the underlying physics in the problem okay so keep that in mind that you have this is identically 0 for a Gaussian but then there are distributions for which this is not so now pretty much you can ask does this go on forever after all to define the distribution completely I need information about all the moments so is it that I need an infinite set of numbers only then can I reconstruct the distribution for instance suppose I give you all the moments of a distribution can you uniquely reconstruct the probability distribution function or the density function this important problem is a problem in mathematical statistics it is called the problem of moments and there are certain answers known to it under suitable conditions it is a very important problem we will not go into that but let me explain say simply say that for practical purposes very often when you actually analyze data etc the first four cumulants serve to pretty much describe the random process that the random variable more or less completely so the mean gives you some crucial information about what this variable is typically likely to be if it is a simple kind of distribution the variance gives you a scatter the third one tells you about skewness or asymmetry and the fourth one tells you departures from Gaussian so pretty much this numerical purposes they should suffices in most cases but of course from a theoretical point of view you need to know all the moments before you can make statements here you could ask the following question which is an interesting one I am not going to prove it here which is the following are there continuous random variables with well defined probability density functions such that just as a Gaussian had a quadratic cumulant generating function and all the higher cumulants were identically 0 after k3 and onwards is it possible to have a cumulant generating function which is a polynomial of some finite degree greater than 2 and everything else all the higher powers are 0 so the distribution would have cumulants up to some n and then every other cumulant is identically 0 is it possible to have such a distribution the answer is under fairly general conditions no either in principle all cumulants exist barring accidents in certain cases or the Gaussian says it stops at quadratic and that is it nothing more there are other such properties which will also emerge as we will see when we talk about stable distributions we will see there are a certain other interesting properties of this kind which will emerge that either it stops at the second order it goes on forever then only other two possible possibilities we will see where this comes about okay so the next step now is to ask I have some information about the Gaussian other other such distributions there are several but we will talk about it when we come to stable distributions but first we would like to do the following I would like to take a set of some ordinary very simple distributions for random variables add them all up and see where it goes what the distribution of a sum looks like in particular we will undertake a simple exercise we are going to take a whole n random variables all uniformly distributed between 0 and 1 so this random variable each of the random variables takes values between 0 and 1 with a constant probability distribution function 1 and I add up all these fellows and ask what is the distribution of the sum of this thing so we will work that out explicitly here meanwhile one final point if you have functions of random variables their probability density functions can look very different from the distribution density functions for the original random variable if you look at the Gaussian example for instance let us take a Gaussian with 0 mean so you have p of x this guy is 1 over root 2 pi sigma squared e to the minus x squared over 2 sigma squared the Gaussian with 0 mean for simplicity let us set the mean to be equal to 0 right and then I ask what is the density function probability density function of a variable let us call it psi which is equal to the square of this variable and let us call its pdf row of psi now it immediately it is obvious that this psi is an element of 0 infinity unlike the original random variable which ran minus infinity to infinity now you got 0 to infinity what is the distribution pdf of psi going to be like several ways of doing this one of them is to say alright I do it by brute force I do it by saying that row of psi must be equal to an integral minus infinity to infinity p of x and then a delta function which says psi minus x squared x squared is but to do this integral I got to convert this delta function over psi to 1 over x right and what is the first property of the delta function it is a symmetric function so I can write this as x squared minus psi in this fashion and I got a delta of x squared minus as constant squared psi squared root of psi whole squared so I can write this as integral minus infinity to infinity dx p of x delta of x minus root psi plus delta of x plus root psi divided by 2 roots that is the Jacobian which derivative and I do this integral I can now do this integral because I use the delta function and plug it in but you can also write the answer down you see if I say that when x takes a value between x and x plus dx capital X takes a value between little x and x plus dx suppose I take a value between psi and psi plus d psi right then row of psi d psi must be equal to p of x dx in this case we are fortunate because as x increases I also increases otherwise when you are talking about probabilities you have to make sure that they are both positive on both sides so I can write this as these x over d psi but I must be careful to write that modulus sign okay and I must express this thing in terms of psi because that is what a function of so I must write this as p of x is square root of psi and d psi over dx is 1 over twice square root of psi there is no need for modulus because I is not negative so would that be a right answer no because in minus x contributes exactly the same amount to this right so there is a factor 2 that is equal to e to the minus psi over 2 sigma squared over root 2 pi sigma square so this 2 cancels that 2 and this of course you got to check normalization so you got to verify that row of psi d psi equal to 1 integrated from where to where 0 to infinity so it is an exponential but it is also got this factor so this distribution looks rather different from what the original variable was for instance if you wrote down in one dimensional motion if you wrote down the Maxwellian distribution of velocities for velocity component it is going to be e to the minus m b squared over 2 k t or something like that Gaussian on the other hand if you asked what is it for the energy which is half m b squared then it is going to be proportional to e to the minus the energy with some k t factor divided by square root of the energy in the denominator so this factor which came from the derivative the Jacobian sitting there to this factor here is crucial what do you call this in that example which I just talked about in the energy density of states it is precisely the density of states in one dimension for one dimensional motion okay so we will see where that is when we talk a little bit about the canonical ensemble you will see that this density of states plays a crucial role we will talk about that when I mention the characteristic function for this distribution okay alright so the next exercise is to take a set of identical random variables and add them up and see how the Gaussian emerges we will do that next time.


Perhaps the earliest ambassadors from India were the fishing boats that inadvertently reached distant shores. They carried with them stories of a temptingly rich and prosperous land. Indian spices dominated ancient trade. If the mountains of the north were purple with saffron flowers and were part of the silk route, the tropical hills of the south were redolent with cardamom and were part of the sea route. Products at that time were not only commodities which were grown, agricultural produce like spices, but also very beautifully manufactured items, various kinds of gold and other metal ornaments. Very highly developed pottery, various kinds of utensils made of different metals, household decorations, architecture, building materials and textiles. Indian textiles have made a special mark on international fashion ramps. When Mahatma Gandhi picked up the spinning wheel as a symbol of freedom, he liberated a thousand looms in every part of the country. The mechanized mills of Manchester had forced Indian looms to remain silent for centuries. Perhaps that is the reason it has taken time for Indian fabric to recover its self-esteem. But the wheels are spinning again and the fabric that was once coveted by aristocrats of the Roman Empire is once again ready to take on the world. India had, according to economic historians, at one point, 25% share of the world trade. Burton Russell has several times deeply appreciated that the Indians contributed zero in mathematics. And it is a profound contribution. Like nothing. Param Ten Thousand, a supercomputer, indigenously developed by CDAC, is one of the largest computers in Asia. Weather computing, seismic data processing, medical imaging, geomatics, the uses of the supercomputer are immense. And it has put to rest any doubts about India's capabilities in the field. The Indian technological juggernaut is picking up pace. And all these faxes and emails and internet systems is the resultant effect of the short-millimeter wave which was discovered by an Indian scientist in India, Jagadish Chandra Bose. If you want to see where we have had real great successes, I think those were the areas in which outside health was not easily available. Despite trade sanctions by developed countries and despite its limited resources, India has a broad-based space program which, in the words of Dr. Vikram Sarabhai, seeks to apply technologies to the real problems of man and society. 1946, Anand Gujarat. In this sleepy cattle-rearing district, farmers from two villages pooled together 247 litres of milk and formed a cooperative. Today, Amul has become a billion-litre cooperative giant with two million farmers as members. It has catapulted India to the position of number one producer of milk in the world. Its benefits are percolated right down to the people and brought social change and progress in real terms. Iron and steel are today the backbone of Indian industry. Established only in 1904, India now has a capacity of making 16.1 million tonnes of integrated steel, ranking it eighth in the world. Ispaat International, the brainchild of entrepreneur Lakshmi Mittal, has a network of steel-making facilities in seven countries. This helicopter, taking off from a base in Mumbai, is headed out into the Arabian Sea. Forty-five kilometres from the shore in the middle of choppy waves and high-speed winds stands a mammoth metal construction, the Bombay High. This offshore oil rig accounts for over 70% of the total production of the Oil and Natural Gas Commission of India. Ten-thousand kilometres of pipeline wind their way in and around the platform carrying crude oil from the seabed onto the refinery at Urand. This expertise and technology is now exported to other developing countries.