Accessibility - The State of the Web

Hello everyone and welcome back to 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. This size of video 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. Show. Off 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're, going 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 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 tees, then. It was going to take you much longer to. Learn, that, word for you because. You don't have the visual cues, that, the sighted person might have the. Placement of icons, the placement, of the different elements or the different buttons you. Don't have a clue. You know you don't get those. Inclues. 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 let's, 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 and 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're, not going to know the bottlenecks, you're not gonna 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 into every column 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 to 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 let's, say minimize. As a video player, we. Don't need to say things like. Collapses. And. Reduces. To a small size the, video, 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. Video. 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. Wanna 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. Aria. 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 wanna enter, a date there is a date control. You, when I use the list, there. Is a 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 you, see an array of rich, form, controls. Is. It 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. In a way 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 it, 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. 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 help, them. 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. That 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 motor. 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 be 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, and. 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 okay that's true and that. Means, that the. Checkbox, is now checked so what. Is. Visually. Represented. With a check mark is now. Also conveyed, in the HTML, 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, reach. Form controls, that you can use and. Those controls, are accessible, by default because they are implemented by the browser. Their. Slider there's 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 then 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 conflict, 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 tester 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. Similar. 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. Put. The information you want in them and expose, them directly. To assistive, software so in 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 gonna see when. They. Try, to read the site using a 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 you 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, load, so let's say if you have an image it doesn't have a description, or we have a video, 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 gonna have difficulties, there so there. Or you're a person, who doesn't. Tolerate. Rapid. 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, videos. 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 to happen 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 do 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. Main. Points. The finger, to, the, big. Changes. That could happen in the lives of people with disabilities if an innovation. Takes place and we are gonna 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 videos that you. Can watch, we. Have a Udacity. Course that some, of. My co-workers. Have created, that, you can watch any, 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 watching and we'll see you next time.

2019-01-05 02:29

Other news