Categories
Online Marketing

Hitchhikers Guide to Web Standards

This is my first time using a clicker, so bear with me here. The talk is called Hitchhiker’s Guide to web standards and to kick things off, I’d like to introduce myself, my name is DOM fairly. No, yes, I’m named after the platform that we all know and love, I’m a senior at the University of Cincinnati in Ohio, and previously I’ve held internships at Microsoft and Mozilla working out in Firefox, and I’m going to be doing a final internship at Google in Japan.

Actually, working on chromium in the web platform, so currently I’m a chromium committer, which is basically fancy speak for someone who has write access and you can approve certain stuff and I’m also what working group standards editor. So if you don’t know what that last one is, that’s that’s primarily we’re going to be talking about. Today. I said from that you can follow me on Twitter and check out my work on github and feel free to email.

Me anytime. You know, during or after the talk, Dom a crummy org, there’s any questions about getting involved in the web platform at web standards and browsers stuff in general. So I want to talk about what this talk actually is. I kind of have three overarching goals that I wanted to reach when working on this talk and the first one is just provide a background in history and to web standards and some of the organizations that are responsible for their governance and their authorship.

This could really be an its own talk, but I know we didn’t come here for a history lesson, so I’m just going to give a brief, a brief history on this to kind of set the stage. Next I want to talk about. You know as a web developer, how can you actually make use of a web standard right? A lot of us go to mdn or Google some API and figure out how it works. But I kind of want to talk about the technical bits of web standards and show how you can make use of them and how to read them and how to navigate that space.

Finally, I want to talk about how you can get involved. I want to share a bit about my own story of getting involved with web standards and working on the web platform and hopefully encourage some of you to do the same so to kind of set the stage for the talk I’d like to propose. You know the idea that we need a definition of a standard. Now largely this depends on context. If we’re going to define you know a new word, and so I’d like to propose my own definition for the purposes of this talk, it’s a little bit wordy so bear with me a document specifying observable effects of technology with multiple independent implementations.

Now it’s kind of wordy, like I said so, let’s just focus on some key points right we care about the observable effects of technology. What are the side effects of it? How if I run something, what does it do, how does it look and feel? How can I actually use it, and, and does it change depending on you know where I’m where I’m using it from, and this last part is multiple independent implementations technology with multiple independent implementations? I think this is really important and it’s it’s far from a new concept.

In technology you know, we’ve seen this with like UNIX operating systems, for example, I can kind of make my own version of you know my own of Linux distribution. You can have your own Linux, distribution and, and you get one and you get one and everybody can have their own. You know separate distribution with sugar on top of it, but what I really care about as a desktop app developer. If I were one is you know, can I write an application that works once everywhere and no matter what operating system I’m using for you know, that’s in the UNIX family of os is that it’s going to work uniformly so to kind of make that environment conducive To that you know: interoperable behavior among the different operating systems we’ve had the set of plastic standards developed to kind of unify this observable behavior.

The same thing goes for web tech, and this is primarily what I’m going to talk about today. Those these are not actually to scale, though, but I happen to know for a fact that you can’t go to the store and you buy one HTTP. You know it’s a protocol, it’s just it’s just an idea and it’s something that you can implement to kind of make it compatible with other versions of this. This protocol and the same basically goes for JavaScript as well right.

We can run JavaScript in a bunch of different places, unlike maybe Python, it’s kind of like we have one Python. We get from the Python people and that’s kind of it, but with JavaScript I can run it in chrome. I can run it in an edge on the chakra engine and I can run it a node in all kinds of different places and the same goes for kind of the star of the talk today, which is the web platform API.

So I’ve gone through a career change, I’m now no longer a UNIX app developer, but I’m a web developer. And so I need to know that the same api’s that exists in chrome also we’re going to be there in Firefox and, more importantly, that they’re all going to work the same and kind of function uniformly. That’s really important, probably the biggest thing I learned when making this slide is, though, that keynote is really cool and has a bunch of different goofy symbols that you can use.

So I thought that that little dude look like a face, so I dressed him up getting some underwear and a hat and stuff like that. So let’s talk about where web api’s come from right. This is important. We are. We are web developers and we kind of want know where the stuff comes from and how we can make more of them. I personally think the logical answer probably is JavaScript right. We use Web API when we’re using JavaScript.

For example, here’s a snapshot of the chrome dev tools and when I’m you know right, I can write things like a for loop and a while loop, but I can also fetch you know super prominent websites on the internet like that one and I can use set Timeout and all kinds of stuff like that, so it stands the reason that this kind of stuff is part of the language. Now we have to talk about what is the language or what does JavaScript I’m just going to fly through this slide, because we all know the big story of Brendan Eich and he created it in 10 days and whatever, but it’s just a general-purpose programming language.

That is created for the purposes of the web. I was plopped into netscape 2.0 and that made it a really interesting thing. It made it a candidate for Standardization because there was going to be multiple independent implementations of it, and so we needed some group that could come by and pick up. The task of standardizing and Ekman did this. They stand for the European computer Manufacturers Association and they created ACMA script and we’ve had some success with this with the various engines.

For example, there’s a bunch of different implementations of the same sort of technology, and you probably have seen this list or something similar to it before the standard looks something like this. It’s really big, it’s really hard to read, but it’s on github and it’s hosted under the tc39 s. Github page tc39 just stands for technical committee 39. So when we’re writing the standard writing atma script, how does it work right? What are we going to put in the standard we’re making a new language, so we have to make them make it really general.

So we need a really strict separation of concerns between all the contents in the standards in the standard. We just need to be dealing with the language syntax in the semantics and then some of the constructs and the primitives and that’s the true scripting language. It should be able to be plopped into any host environment, but the language itself shouldn’t actually have to know anything explicit about that environment.

Now we’re really used to using that language in a web browser, so we’re used to web api’s and stuff like that, but the language itself doesn’t actually know about those things. So web apos are not part of the ACMA script language or the jour JavaScript language they’re. Effectively, mix-ins and they’re baked into browsers and browsers, can support, basically, a version of echo script as their JavaScript engine and a bunch of web api is that we can use that kind of tag along alongside this version.

Rackham script, that kind of interplay with it, and so we have hakama right there responsible for and tc39 are responsible for standardizing ACMA script and javascript that we all know and love so who’s responsible for standardizing the web api. So we’ve kind of heard a little bit about this today from some of the talks. There’s two big groups right now that are responsible for this primarily you’ve, probably seen at least one of these logos before we have the w3c and the what working group and the what working group denoted by the question mark on the right is what I’m going to Be talking about primarily today, this is the organization.

I told you all that I was a part of at the beginning. So the what working group stands, it’s just an acronym. Unfortunately, so it stands for a long string of text that kind of summarizes what we do. It was formed in 2004 after a w3c workshop. Basically, they decided to kind of branch off from the w3c and create their own canonical standards that specified the web platform. So they have an HTML standard, which kind of defines HTML language and the parser and the event loop and a lot of the it’s.

Basically, the kitchen sink of the web platform is actually what it calls itself to, and they have. You know they specified the Dom API is the interface that we use to talk to the web and and some networking primitives like fetch and streams, and a lot of really cool things like notifications and primitives. But how are these things actually written right if we’re going to write a browser and we want to write ACMA script? You know we start with the JavaScript engine.

Okay. Now, if we read the ACMA scripts back, there’s a lot of stuff in there, but there’s also a bunch of exposed objects that would get for free and JavaScript. We get things like the array, constructor and you know date, objects and week, maps and all kinds of data structures that are natively exposed through ACMA scripts, but we want our browser to be a little more powerful. You know we want it to have me the Dom.

So we give it, you know a document object. We can add a couple more paragraphs onto the end and give it a query. Selector method and we’ve kind of extended our language a little bit more, the documents getting bigger, but it’s getting more powerful. So we also would love to to you know, contact the network as well, so we’ll give it some networking primitives things like fetch things like request and it’d, be really cool.

If we could do ourselves a good service and debug our code, so we’ll maybe give it a console object as well a bunch of methods. On top of that, this is one way to write. It just keep appending text onto the same to the same massive documents, but it’s going to get pretty lengthy and unmaintainable. So the what working group maintains separate standards for each of these kind of ideas that have a separation of concerns and each standard is responsible for talking about how they enter leave with the other specifications and the web as well as that can script and things like That and as a result, we get web api is alongside ACMA script and java script.

Now, if we want to read these web api’s as web developers as web developers, we want to make use of them. We need to kind of know the anatomy of a standard. We need to know what is actually in these documents, because it’s kind of a mystical thing in mystical process and and it’s actually really – you know not too difficult to get involved and it’s it’s all very open and happening right under right under our noses.

So I was thinking about this a lot for this talk, and I kind of came to the conclusion that there are two big parts of standards to kind of be aware of. The first is algorithms, so I don’t know about you guys. I love algorithms spend many. An evening as it were working on leet code and hacker ranked stuff – and I really like algorithms and data structures stuff, I think that kind of theory of computation is really really cool.

Algorithms are really just a set of steps to perform a task. So let’s go ahead and take a look at an algorithm inside a web standard right. We have the console standard and there’s a bunch of different methods on there. If you haven’t heard of it, there’s one called console dot count and here’s the algorithm specified in the standard. There’s five steps that run every time you invoke console dot, count, there’s a couple that we really care about.

For the purposes of this talk, though, you can see we’re given something called a label, and basically the idea of this algorithm is, if we’ve seen this label before, when we’ve called this in this function, then you know increment some number that we have that we have Associated with label, otherwise we can set it to one. This is the algorithm and then eventually we want to just print it to the screen.

This logger thing is just abstract text for saying, hey browser, you know show this to the user in whatever way you see fit. This is nice because I kiss a web developer. I could come in here check out the algorithm and it answers a couple questions for me. Like you know, what is the initial value of the number that is associated with a label and what happens every time? I call it and what can I expect, and so we can read the algorithm and kind of understand what’s going on now.

The second important thing about specifying and using web api is understanding the look in the so I think that’s really important. What’s it mean for an API to have a look and feel so I thought of this, and I think it’s kind of like you know: what’s it mean to to use the API as a developer? What’s it called? Where is it hanging off of some other object? Is it just globally exposed? Does it take anything? These are you know a bunch of parameters? How many parameters does it return? Anything? This stuff is really important for us to know, and a lot of us here are used to going to mdn and then maybe googling.

This kind of stuff to find it, but I also want to show that you can just go to the standard. So here’s another part of the console standard that the what working group maintains it’s a big scary block of text. But let’s focus on the bit. That’s complementary to what we were talking about before the count method, so we have this right. This kind of can tell you a little bit about it right, okay, so it’s called count.

It exists under the console, namespace, so console that count that kind of make sense. How I would use it it’s of type void, so I probably shouldn’t expect to get anything from it, just not going to really return anything, but I might do stuff and it takes in a single parameter called label it’s optional and its type is Dom string. So we don’t know what Dom string is right now, but let’s just assume it’s just a regular string.

That gives us some some cool information. It’s pretty expressive, but it’s not JavaScript, because we care about types and and it’s not C++, because we see other invalid things going on around here. So what exactly is this language? It’s called web IDL in a sense for web interface. Definition, language and you’ll see it in a lot of specifications and it kind of forms a contract for this. Basically, the signature of web api is that you use and that contract protects the algorithm, because when I go into the algorithm and I’m running these steps, I want to be able to know what label is I need to you know, maybe I’m making some assumptions that It’s a string and I’m operating it on on that accordingly, and that’s really important for me to know – and so I want to talk about how web IDL actually works in practice.

Okay, so you’re a while ejs dev, you got your Viking hat on and you really care about types right, so you’re going to call you’re going to mash in your keyboard and called console count and you’re going to just give it whatever you want. You can give it a symbol right, you can give it an object, seeing it whatever, but the second you do that the web IDL Sheriff is going to stick in it’s going to come in and it’s basically going to be like hold up.

Hold up, hold up. Hold up, you called console dot count and you could give it whatever you want right symbol if you wanted to be so inclined to do so, you give it a number whatever, but I’m going to make sure that you know this contract is obeyed, I’m expecting a Dom string and I’m going to make sure that whatever you give me can pass as a Dom string and if it does that’s cool, we go to the algorithm, continue with a hopefully successful call and and keep going, but just like a sheriff can throw someone in Jail, the web, buddy el sheriff so to speak, can throw a type error, resulting you in with you in code jail, it’s probably the worst place to be right, you’re staring at the terminal or sorry the dev tools, and you got all this red scary text around You don’t know what’s going on, so we want to stay away from that now.

Real sheriffs in the real world know who to arrest who not to arrest stuff like that. That’s that’s really important something part of their job, so they kind of basically have a rule book of things to follow here and just like they’re the real sheriffs of a rule book the web, IDL sheriff has a rule book in the form of the web. Idl standard and it basically defines a lot of the stuff that that it’s supposed to be enforcing, so we saw an example of conversion.

Here’s a snippet from the web IDL standard that basically is responsible for converting a Tekamah script value to what is called a Dom string, something that the web IDL has defined. Basically, the meat of this algorithm is just to kind of delegate to step two and call this two string thing. This is an abstract operation defined in the ACMA script standard, so we’re just kind of passing through right to the ActionScript spec, and we could of course, write to string everywhere we needed to instead of using web IDL but yeah.

This is really nice, because it’s pretty expressive, it tells us tells us how things should work in a really normative clear way, and if your techs are algorithms, when I get to here, I can know that I’m working on a string and that things have been accepted And the sheriff is okay with it. So why are we using this thing called web IDL anyways right? What exactly is it? So it’s it’s just an abstraction of arachno script text, as you saw all step two was we just kind of delegate to the echo script standard? It’s two string thing.

It does a lot of things for us, so it helps us write a lot with just a few words. Potentially, it takes care of a lot of like type conversions. We saw a really simple example of a type conversion, but you can imagine, perhaps potentially a much more complicated one and we would want to repeat all those steps to you know. It’s convert things and then kind of make our assumptions everywhere, where you need it to.

In the spec, so we can use web be able to kind of just abstract that stuff away. It also takes care of things like property initialization for us and other stuff, like that. It also helps us define where our interfaces are exposed in a really expressive way. It like we like we saw, but I think the most important thing about web IDL personally, is that you don’t actually have to use it. It’s as line1 suggests just an abstraction over action scripts over the ACMA script text and that’s really important, because we have some standards that are written without web IDL and that’s totally valid.

It just kind of speaks within the same language of the echo script. A standard space in that uses the same verbage and the same sort of stuff, but web by DL is just a nice way to be succinct and kind of foster interoperability on the platform, so you can always feel free to you know, hopefully that that little foray Into web by DL makes you a little bit more comfortable reading some of the standards that they that they come with in.

So. Finally, I want to talk about how I got involved in this and how and how you can do the same and hopefully motivate you to do the same as well. So who knows this logo? Let’s it raise show of hands right, hey a lot of people cool, so this is the angular logo, this flat designer believe this is new since angular 2 and basically, a couple years ago, I was like yeah, I’m going to start like giving more stuff with web Applications so I better learn a big heavy framework that can bog me down and figure out how to write all this stuff, and so angular 2 at the time was an alpha.

There’s a basically mess right. Things were always moving around and I would always hear people say yeah, you know, angular angular is getting uh, you know a new, router or angular is getting a new object or new this kind of stuff, and it was really easy to track the progress of this. It was happening on github. I knew some of the people working on it, so you could always just kind of dig around. At the same time, I heard another camp of people kind of talking about JavaScript there they were saying you know, hey javascript is getting.

You know async iterators or you know, did you know about custom elements? Can you figure out how to use this, and I was like? Well, that’s interesting, cuz! That’s not really angular specific, so I was really interested in digging around figuring out who’s deciding this stuff because, like like, how does this work? I want kind of wan na be a part of it seems pretty cool we’re evolving the platform.

So eventually it came across this guy’s profile. His name is Dominic Nicola and I just learned recently that he was actually a speaker at the first Cascadia j/s in 2012. It’s true that we both have the same name, that’s pretty cool, and so I reached out to him. I was like hey. I see you, you know you’re working on, you know the what working groups bit standards and all a lot of stuff like that big contributor to the tc39 proposals, and so I had reached out.

I was like hey. What do you do really, and how can I do it? It seems kind of cool. Are you actually paid to work on this stuff? It’s it’s pretty cool, and so he was basically like hey. You know. We both have the same name, we’re both Dom’s right and then working on the platform. So I’ll. Let you in on some secrets and the biggest the biggest piece of advice here, is probably to dig around on some of the what working group standards and actually just take a look at some issues.

There’s a lot of issue labels that the issues are kind of fixed if one of them is good first issue and basically, as the name implies, they are good first issues for people to get involved in and a lot of them are low-hanging fruit or some of Them are editorial in nature that you can just kind of go in and dig around in a web standard and figure out how to work with them. I want to cut away, though, from keynote and probably screw a lot of things that up in the process, but let’s see if I can just show what the what working groups page looks like hey.

Do we have it? Yes, okay. Now, if I can figure out where my mouse is, I would also be cool one. Second, all right cool. So so here’s here’s the what working groups github page, basically just to kind of show you you know it’s all open. It’s all happening right in front of you and it’s a very welcoming area you’re allowed inside. Basically, this is this was basically just a list of all the specifications that we maintains giant list of the HTML standard, the fetch standard and stuff like that, and so we can always just go to the one of these repositories and see what’s inside right.

There must be some sort of source code that the standard is you know existent and that it’s written in and a lot of times. This will take form in a take in the form of a BS file. So bs does not stand for we’re. Actually, very serious people here we’re working on standards right we’re on the platform so bs, since our bike shed and it’s basically this language that we kind of mix in with with HTML and pre process.

Before we build a standard kind of helps us with cross-linking and some other fancy things, it’s pretty easy to get the hang of. We could check out the source they’re, all the standards exist at spec or you know something dot, spec org and basically they look like this they’re, the ones with the green logos that the browser is actually trust, and so we go in yeah. We can check out the standard, all kinds of stuff like that and, more importantly, if you’re looking to get involved, you can go under the issues section here and we have a bunch of different labels that we use.

That’s not where I’d want to go so yeah. If we want to check out these issues, this, for example, this is the fetch standard. Where things like the fetch, your method exist and the request, object and stuff. We could go in and try to find the good first issues. You’re like oh yeah. This is really cool right. I can, I can dig around here and maybe help out on some issues, and so now we’re kind of on to evolving the web platform right.

We’re working with a standards body to help fix some of the problems that they’ve identified and the platform is so. This kind of this kind of goes back to interfacing with the community and the community groups online. So I want to talk a little bit about this when dealing with the what working group there’s a bunch of different ways to communicate with us we’re always on get up. Of course you can.

You know chime in on an issue and be like hey. I really want to work on this. This this looks really cool. I think it’s interesting. We’re always super super happy to provide mentoring, mentorship for people that are looking to get involved, also we’re on the really big bad scary place that is IRC we’re in the free. No under free node on the web working group blog, I’m always logged in a lot of us a lot of the others always logged in so always available to you also help with questions and stuff like that.

There’s a lot of information here that have thrown at you and things like that and at the very end of the presentation, I’ll kind of give you with a well one web page that you can go to kind of get a lot of this stuff from. But I want to talk about why to do this. Anyways right, there’s a lot of cool ways to read it, to learn reasons to learn angular until I react and to work on the web, but I think what’s really cool is, is you know? I know we’re in Seattle and Microsoft land basically, but if you have a problem with some Windows api’s, basically you kind of have to work in Microsoft to get them fixed or changed, or do something like that.

But what the web platform all this stuff is happening. Right in front of your face: it’s all in github, it’s all free to participate, and you know anybody. Anybody can do it and just go on and start working on stuff, and I think that’s really really. Cool web developers are in a really unique position of being able to influence and modify the platform that we all develop on every single day and that’s really exciting.

To me, and one of the reasons that I got involved, so I want to leave you with a repository that I just kind of started the other day. Now is the time to take pictures of the slides if you’re interested in getting involved. There’s a lot of information, there’s a lot more information beyond just what I’ve covered in this talk so check out the Cascadia j/s repository that I maintain on github. It’s just kind of got some getting started information and so the links to other talks that people have done on similar stuff and how to get involved in the web community and modify web standards and stuff like that.

Finally, I want to leave you with some of the things that I’ve worked on to hopefully, hopefully provide some motivation to show that you guys that you all can do the same. Recently. I’ve changed helfet works. The fetch API. I’ve worked on Chrome to basically modify when we said credential when we send credentials when we make a request stuff like that. Basically did the same for for module scripts and took part in some of the standardization work for there.

So that required, of course, talking to a bunch of the browsers and saying hey, you know we’re thinking about making this change. It kind of makes sense. What do you guys think and can I do it? I also standardized and implemented the referrer policy attribute. This is security, even private security privacy attribute and HTML. So I did this on the script Elementary simply so I like resource loading and then security privacy kind of stuff.

I’ve also implemented a bunch of console API eyes, so the console standard I mentioned is a really really good one to start getting involved with. So I encourage you to check it out. It’s what I started with and I also started working on Chrome partially. As a result of that, finally, I’ve been working on something called priority hints, which is just a new resource living API. That kind of lets developers tell the browser what priority they would like to be associated with a request.

It’s a new standard and so we’re digging through that I did the implementation work in Chrome and so we’re just kind of doing some experimentation to see if it’s going to be able to pull its own weight, but other than that. I hope I’ve left you with a good taste in your mouth and when it comes to web standards – and I hope that you all you know, feel motivated to get involved and contribute back to the platform thanks a lot.

That’s it


 

Categories
Online Marketing

Accessibility – The State of the Web

The theme for today’s episode is really important because you may have a fast website with the best content, but it’s all for nothing if people can’t actually use it. My guest is nektarios paisios, he’s a software engineer on the chrome, accessibility team and we’re talking about the state of accessibility. Let’s get started, how would you describe your role on the chrome accessibility team? I’m a software engineer.

This means that I’m a programmer. I write code. All day, which is something I enjoy a lot, I implement accessibility, features in chrome and I also fix accessibility bugs. I mostly work on Windows and Mac accessibility, but my team has lots of other people who work on many different platforms and for lots of features that we release as part of Chrome OS. So how would you explain, accessibility to someone who may be new to web development? Well, accessibility is a very important feature.

We should see it as a feature of our website and it’s part of usability the more accessible your website is the more usable it would be to everyone, so it doesn’t only affect people with disabilities. If we want to talk about the people with disabilities, they are according to the World Health Organization, 15 % of the population. So even for business reason you could say that you’re getting more customers if your website is more accessible.

But, aside from that, your website will be more usable if you abide by all the accessibility standards. If you follow all the best practices, your website will be both accessible. I provide better experience for the rest of your customers, so it’s a good business practice. It’s the right thing to do, but also it creates the best experience for everybody and what are the various ways that people with disabilities interact with the web depending on the disability that somebody has.

They used different sorts of assistive software. One of this piece of software is called screen reader, so if you’re blind, for example, you might be using the web through a piece of software that reads to you using synthetic speech, it reads to you the contents of the screen: that’s why it’s called a screen. Reader, if you’re partially sighted, you might be using a magnifier, so you might be enlarging the size of the font, the size of the text, the size of the whole page, the size of the images, even the size of article, so there’s different software that helps depending On the disability that you have, if you’re hearing-impaired, you might be using some captions or some software that can listen to what has been said and transcribe that into text.

If you have another disability like a motor disability, you could use a switch access, which is a device that allows you to move through the interface by flipping a switch or you could use eye tracking devices that track the movement of your eyes. If you cannot move your hands, you might be able to move your eyes. So by moving your eyes, you can move a cursor around the screen, so there are lots of different accommodations depending on the particular need.

So what are some things that you wish? Even the more experienced web developers would know about accessibility. Clearly, the web has offered a big opportunity for companies and organizations to showoff their branding. Different websites have different layouts. They use different font sizes, they use different colors. They have different ways of interacting with them different menu systems, different ways of navigating through them different workflows as a whole.

This is very good for branding every organization wants their website or their web app to differ from other organizations. We don’t want to have a monoculture. We want to have a platform that is full of life and diverse as possible. However, if you’re a person with some accessibility challenges, it takes much longer for you to get accustomed to the different workflows that are presented by different websites.

Let me give you an example: let’s say: you’re blind and you’re using a screen reader. What you have to do most likely is: you need to read the web page that you’re interacting with serially from top to bottom and if to get familiar with it, to familiarize yourself with it. So it takes you time to if the conventions are different from side to side. It takes you time to go through all the content. Just to be able to do.

Let’s say you might want to sign up for a newsletter or you might want to order or buy something from that particular company’s website. If the workflow for purchasing an item is different for each website, which for each website which most likely it is, then it was going to take you much longer to learn that workflow, because you don’t have the visual cues that the sighted person might have the placement Of icons, the placement of the different elements of the different buttons, you don’t have a clue, you know you don’t get those and clues.

You have to go and discover them by reading the contents of them of most of the website. The same goes: if you have a model disability, for example, you might need to use hardware device like switch access to go through the contents of the side and if you’d have muscle, you have developed a muscle memory that you know, for example, that if you press Your street chip specific number of times you get to a particular feature on most websites that say the top navigation menu.

But now you discover that for each website the navigation menu on the top is not the same location. So you cannot really develop muscle memory with your assistive device and you can imagine the similar issues with other groups of disabilities, so what I would suggest is try to follow existing conventions, and this brings me up to my second point. Not everybody uses the computer using a mouse or a phone using touch, they might be using some commands that come with your assistive software or hardware, and those commands require that your site is accessible using the keyboard and if your site is not accessible using the keyboard.

It’s a pointing device, then it might be hard for this assistive software or hardware to work with your website. Another point is: there are lots of accessibility standards and the web content. Accessibility guidelines is one of the most prominent standards and it’s better. If you go through those standards and try to follow as much as possible the guidelines that are out there, so that’s one of the ways your website will be consistent with established patterns.

The same goes for the keyboard navigation. I described before another thing that you should bear in mind is: if you don’t actually test with assistive software, you are not going to know the bottlenecks you’re not going to know what the issues your users are running into. So you could try some of the assistive software very easily. For example, if you have a Chromebook, you could easily turn on a screen reader that comes built-in to every colon book.

You could turn that on and every command, but the screen reader exposes is in a menu, so you can easily get to all the commands it. Doesn’t it’s not a very steep learning curve. The same goes for every other assistive feature. On that platform. You can turn on magnification color filtering on Android. You can turn on a feature whereby you could use the volume buttons of your phone to simulate a switch access device.

So somebody with a motor impairment that uses a hardware switch device. You could simulate that using the volume buttons of of your phone, so these are some of the tips that you could rely on when developing. What would you say that developers who may be well intentioned and try to be overly descriptive with, for example, their aria labels on elements, and they might just say too much about an element, it’s a bit of funny? But there is this notion that you know: if you have a disability, it means that you’re, you know, you don’t have the intellectual ability to understand what everybody else can understand and that’s actually not true.

We don’t need to go over the top when describing a UI element. For example, we don’t need if there is a button that lets say minimizes a article player, we don’t need to say things like collapses and reduces to a small size, the article player and places it at the bottom left side of the screen. You don’t need to say that just say minimize and people would understand from the context that it minimizes a article player.

Of course, we have to bear in mind that we have a group of disability users that are with intellectual disabilities or developmental disabilities, so we have to make cater to those users by using language that could be understood by a 9th grade level. We shouldn’t use complex and not very well known words, but other than that. We don’t need to go over and above and try to overcompensate. The other thing, though, that you should bear in mind, is what I was saying before with the keyboard.

If you wan na test your keyboard navigation, you should not only use the tab key, because tab is not the only key on the keyboard. So, coming back to your previous question, what I wished with developers knew is tap is not the only key on the keyboard and, if you look through, for example, the area, the rich internet applications practices for keyboard users, there are lots of shortcut keys that are listed In those practices in those authoring practices and tab is just one of them and I’ve cost you the importance of using semantic elements on the web so that the screen reader can understand what type of content is on the page instead of using a div or a Span element that doesn’t convey any semantic information, it’s better to rely on the existing html5 rich controls, if possible.

So let’s say you want the user to enter an email field, use the email input box. There is such a text field because an assistive software might provide autocomplete suggestions to a user, for example, if they detect that they’re trying to enter an email. But if you don’t use the correct control, the assistive software might not know that and offer no suggestions. The other problem is, let’s say you wan na enter a date.

There is a date control you when I use at least the original list box control in HTML try and use those controls. Unless you really have specific reasons, why not most people have issues with the styling? I do understand that, but if you are comfortable using the built-in controls, use them and take your time to read through the new controls that came out in the last few years, there. Instead, an array of rich form controls the number control.

There’s a telephone input do not ignore those controls, they might look the same as a text field, but under the hood they are very useful to somebody who is using an assistive software right. So, as the web capabilities have evolved over the years, people have started using the web in different ways. So what effects have translate these had on the ways that users actually use the web? The development of the web has given people with disabilities a workaround for many of us, including myself, I’m blind myself, including myself.

We have been liberated anyway by the proliferation of web applications, because if let’s say you want to go and visit a bank and make some transaction, you usually go to a bank and you have to complete some paperwork and that paperwork. If you’re blind, for example, you will need some assistance to help you do that if you’re deaf you the person who is at the bank most like it, doesn’t know any sign language, you might have difficulty explaining to them.

What needs to be done? If you have a model disability, it might be, there might be, no ramp is hard to get into the bank, and then you can go in there. So there are sort all sorts of issues when it comes to physical world that they completely disappear. When you use a website a website, also – and that’s also ever that’s another great point to remember – doesn’t have a bias. If you visit a place and you have a disability and people there, they don’t want accommodate you.

You might have a hard time convincing them that you have the right to be offered services, but a website doesn’t know that you have a disability, and this has also opened up the employment market to people with disabilities who can, through their computers they could perform the Tasks that before they needed, for example, a secretary or an assistant to help them perform their work duties. Another thing is reading books.

Let’s say you have learning disability, for example, or blindness. It would have been hard for you to read a book now with their software. That can read the book to you over the web and also for people with dyslexia. For example, there are tools that break up syllables or read the book using text-to-speech or have a dictionary that is on demand and easy, easily accessible on the computer or on your phone.

So it’s really easy to to get accommodated through the web and you can also feel very independent in that way because you’re using the same websites and the same web apps as everybody else. So this is a very nice feeling. You feel that you’re treated the same as every other customer of that particular business. However, on the negative side, the more complicated the web has become. The more important is for web developers to take care of accessibility challenges because on the flip side, if you do visit, let’s say a supermarket and you’re in a wheelchair, and you have trouble going through the aisle or the supermarket.

Unemploy might help you by fetching an item from the shop. However, if the website is inaccessible and you’re, a person with modern disability that is relying on eye tracking device to use the website and the website doesn’t have very good – let’s say, keyboard navigation or some kind of navigation that the functionality that would allow that assistive software To interact with it, then this person is stuck.

They can’t really negotiate with the machine because the machine is inflexible. So, yes, the web has removed a lot of the accessibility challenges. However, if we don’t pay attention to the accessibility of our websites, we’re going to erect much higher barriers that are inflexible and cannot removed by talking to a human being right and one of the solutions to that is standardization and the w3c web accessibility initiative is to Define strategies, standards and resources to make the web accessible to people with disabilities.

So what kinds of things have been done from the standardization side of things to make the web more accessible to people? There have been a lot of efforts, and actually I have been involved in the chrome accessibility team for a few years now, and we have a steamed colleague on the team that is part of has been a part of the standards for many years now and what They have been telling me is that at the beginning there was nothing and then they worked really hard for a few important standards to be put in place.

The accessible rich Internet application standard area for short, it’s very extensive and it defines specific attributes that you can add to your HTML that enable HTML elements that do not have any semantic information attached to them. It’s what I was describing before the use of divs and spans with visually, with visual information that conveys to the user what they do, for example, it might be a deed that represents a button check bar or a check box, but it doesn’t convey that to the Assistive software, it’s only conveyed visually.

However, if you use the Aria standard, there are some attributes. For example, rule you can say: role equals checkbox and suddenly all the assistive software knows that this is a checkbox. And then there is another attribute called aria checked and you can say: ok, that’s true, and that means that the checkbox is now checked. So what it is visually represented with a check mark is now also conveyed in the HTM and the assistive software can get to that information.

Another standard that has been evolving is the HTML standard itself. So, as I said before, in html5, there are new form controls, rich form, controls that you can use and those controls are accessible by default because they are implemented by the browser, their slider. There is a time range. There is email input, telephone input, etcetera. There are lots of controls, another standard is the web component standard and that’s an evolving standard, and that one enables you to create components and widgets that could be packaged as a unit and used in other web apps.

This is very helpful because once somebody creates an accessible widget, let’s say we want to create an accessible calendar widget we can create that publish it on the web and people can easily include it in their web apps before this web component standard it’s hard. It has been hard to include components from other sites, because when you paste in HTML and CSS, there might be conflicts with your own CSS, with your own HTML with your own JavaScript.

But this web component standard enables those widgets to isolate themselves from the rest of your web app. So I think that would help accessibility by enabling people to create accessible components once and distribute them to be used everywhere. And what is the accessibility object model? It is a standard that would enable web applications to expose some of the accessibility information and perform some day of the accessibility actions that were only available to desktop applications in the past, not only desktop, but also, I should say that we’re only available to native applications In the past, I’m talking about things like if a user performs a gesture, a specific gesture or uses a specific command with their assistive software, this command could be communicated to the web app itself and the web app could take action based on that command.

That came from the assistive software native apps could do that before web apps. Couldn’t we’re trying to create a standard to solve that? Another thing that this standard is trying to solve is the ability for the web app itself to create accessibility, information. That would only be visible to users of assistive software in the past. You couldn’t easily do that now. You can, if you have a complicated up that presents things using, let’s say converse or some other kind of graphical technology, but you want to create some equivalent semantically rich representation of what is visually conveyed to users of assistive software.

With this new standard, the accessibility object model standard. You can create your own accessibility objects, food, the information you want in them and expose them directly to assistive software. So, in effect, you can tell the assistive software what exactly exactly what you want did to see. So what types of tools are available for developers to understand how accessible their website is? Chrome actually has a lot of built-in tools.

We have the chrome, developer tools and inside the chrome, developer tools. If you go to the main panel, the panel where you can see the Dom tree, there is also a tab in there that allows you to see the accessibility tree. The accessibility is not the same as the Dom tree. The accessibility tree is the tree that is presented to assistive software and it is created based on the Dom tree and the layout tree.

So your HTML, your CSS, your JavaScript. All of that is used to create the accessibility tree which conveys the information about the page to assistive software and that’s the tree. You can manipulate with using them directly using the accessibility, object model standard that I have mentioned before, and also that’s the tree where in which all the Aria attributes you might have added to your website.

That’s where those attributes would appear. So, as you can see, the history is created from many different sources, but ultimately that is the information that assistive software sees and you can see it as well. If you go to the developer tools, there is a tab there. That shows the accessibility tree and you can use that to see. Let’s say if you have a screen door user. What are they going to experience if you visit your website, how are they going? What information are they going to see when they try to read the site using the screen reader? There is also another panel in the chrome developer tools.

It’s the audits panel and as part of the audience we have lighthouse lighthouse, can perform audits on your website and give you a list of errors or recommendations for to improve. So it’s very easy. You could go and click and run an audit accessibility audit on your website. I have to point out that it doesn’t catch all the errors. You ultimately do need to test with some assistive software or rely on user feedback, but it does help write a score of 100 percent doesn’t mean your website is fully accessible yep.

So the HTTP archive tracks, lighthouse accessibility, scores on over a million websites. The median lighthouse accessibility score is 62 % and another interesting stat, 42 % of pages correctly use alt attributes on images and only 12 % of pages correctly label form elements. So the state of accessibility right now shows a lot of room for improvement. Unfortunately, we do need to redouble our efforts and perhaps we need to provide more automated solutions for making web apps accessible.

We do need to pay attention to the web content, accessibility guidelines and there are three axes in those guidelines that I think everybody can understand. The apps in the app should be the website should be perceivable, so you should be able, as a person with disability, you should be able to perceive content that your disability prevents you from receiving low. So let’s say you have an image, it doesn’t have a description or we have a article that has only audio.

It doesn’t have captions for people who are deaf if you’re a person with some developmental disability, and there is language there that is not as to advanced and too complicated, or you have very long and long winded text and you’re unable to you know, read long pieces Of text and you’re going to have difficulties there, so there or you’re a person who doesn’t tolerate rabid animations. So it’s not hard for somebody who is developing a website to understand if they try and put their themselves in the shoes of a person with disabilities.

For a few minutes, it’s not hard of them to understand what it means when we say that your website needs to be perceivable. It just takes some time to put yourself in the shoes of this other person and then realize oh wait a moment. This might be. Might create some trouble for for people another thing in the web content. Accessibility guidelines is your app needs to be. Your website needs to be robust, so the HTML needs to validate.

You need to be using the correct attributes and form labels is actually part of that. You need your your forms to have labels your your form fields, to have labels to indicate errors in a clear manner and to suggest corrections if possible. So I I don’t think it’s hard for somebody to follow those standards if they try and get in the shoes of the user that is trying to use the website. I do realize that some of the standards are vague and too technical.

They use complicated language, but I think, if you’re a developer, that wants to learn how different people with accessibility needs use your website, you could try and find articles on how different people use assistive software and then try and imagine yourself being in the shoes of those Users, so, as web capabilities continue to evolve, we have technologies like AR and VR around the corner. How do we make sure that we’re not leaving people with disabilities behind a lot of the changes happen organically? They grow from past experience and slowly-slowly solutions get developed.

For example, assistive software has been developing for 25 or 30 years, and it has been a gradual process. However, if there is a technology shift like the move to a touchscreen mobile phone, for example, or the use of VR AR virtual reality, it would be very difficult for somebody to wait for this progress that happened gradually, because then you would expect a big gap in The number of the amount of time that you have to wait, if you’re a person with disabilities to get your hands on this new technology, so here is where we need a new research.

The innovation! That’s why I to encourage people who are interested in the field of accessibility, to pursue a career in this field and also get a degree on accessibility. There is a notion that accessibility is easy, that you just add some labels and some alt text some keyboard navigation. However, your question about virtual reality: they points the finger to the big changes that could happen in the lives of people with disabilities.

If an innovation takes place and we’re not going to get an innovation, if people are not going to work hard and try to be creative, with the accessibility with providing solutions to those accessibility challenges. Finally, what resources would you recommend for web developers who want to make the web more accessible? My program manager, Laura, has produced a few articles that you can read. We have a Udacity course that some of my co-workers have created that you can read on.

It explains to you how you could add accessibility to your website, also, the web content, accessibility, guidelines from the w3c and the Aria standard, accessible, rich Internet application, standard, the authoring guide for the area standard and the examples and are provided so nektarios. Thank you again for being here my pleasure. You can find links to everything we talked about in the description and also share your perspective on the state of accessibility.

In the comments below thanks for reading and we’ll see you next time.