Categories
Online Marketing

Testing Web Accessibility – Adrián Bolonio (A11yTalks – August 2019)

To accessibility talks where every month virtually and talk about all things, Accessibility focusing on website usability Each month. We invite a speaker To present an accessibility topic and afterward, we invite the community to ask Questions and participate in discussion. So if you have a question for our Speaker or for anyone on the blog, please post it in the zoom chat window.

Or with the hashtag a-1-1-y-t-a-l-k-s in Twitter, That’s A11yTalks, I’m today’s Host AmyJune, I’m the open source community ambassador for Kanopi Studios and our speaker today is Adrián. Bolonio, Oh and I might have messed that Up He’s a front-end developer and web team Lead in this month’s talk, which is testing web accessibility, Adrián will Speak a bit about automated accessibility tests and how they can Free up our QA team for manual testing every part of the application, but they Cannot do that automatically and magically to make our site accessible so He’s going to show us some testing tools, libraries and techniques to increase the Accessibility test coverage of our code And he’s going to do that by using a Simple react, application, so that’ll be great, So Adrián.

I wanted to ask you a Little bit about yourself, you know we had some discourse in email and you Mentioned that you had a love for traveling and that you recently went to Italy, with your girlfriend um, do you want to share with folks the exciting News that happened in Italy Yeah well, thank you for having me here. First of All Yeah we’ve been in Italy for a couple of Weeks and then yeah we’re engaged now so so all happy nice, but yes yeah.

I love Traveling, actually, that that’s your your your right, every time that that money, Allows it and time allows it, then I’m I’m traveling Right. Where is your next Trip my next trip is to Colombia, I’m going to be speaker in the JavaScript Conference in Colombia, Yeah, and so I can, I spend a week in Colombia, so it’s going to be very exciting, Fun, fun and when you get married, did you Guys pick a location, are you going to travel for the wedding? Not yet it’s Going to happen next year: yes, Oh, Oh fun! Okay! So um are you ready to get started? Absolutely yeah Perfect, take it away.

Yes, So it’s all good! You see my so. You see The presentation Yep Perfect, so yes, I would love to talk about testing web Accessibility today, So, let’s start again, my name is Adrián or Adrián Bolonio, I’m From Madrid, I’m from Spain as AmyJune said, I’m a web team lead of the front-end Developers in my company I’m a front-end developer of that team and you can find Me under my surname in Twitter Instagram keep health everywhere.

So let’s talk About web accessibility in the real world, we can see here three cases that Is obvious that are not implemented and build correct to the people that are Targeted to so Probably because they were built by not disabled people Or Maybe because they didn’t thought to put in their shoes, But it is very clear that Those three cases are wrongly done. Another is another case that that I can Show you in the real world from the wheelchair user perspective, this is Completely wrong and it’s clear that this was not tested from the end user.

Perspective, no one thought about sitting down and clicking the button and opening The door and see that there are stairs so why is it so clear in the real work But not in the online world, so let’s see how how can we translate this? This Reality to the online world, because it’s not so obvious and not clear when we not Visually impaired people when we see a website that is not accessible, so, let’s Make it an example: if you, you are in an online e-commerce and an online shop and You want to you call the IT support.

You want to know your latest purchases, so a Typical answer from the help desk would be: you need to click on the button in The top right corner – or you want to change your password, so they can say you Need to click on the button with the engine icon. The problem here is that People with visually impaired disabilities or blind people will not See anything there’s no such as tab top right corner, there’s no such as engine Icon, so we need to get these reality when we develop applications.

Why so? Important what accessibility? If we look at the numbers last year, we were around Seven point: six billion people in the world. The problem comes because more Than 1 billion people live with some form of this one impairment from light. Two hundred percent, which would be blind people, so we need to make our back Accessible as for as much users as possible, so my team and I, as I said, I’m We are working in a platform that allows people to sell secondhand goods, so we Are the second largest Austrian website in traffic? That means we need to to Reach these people and we need to to make our website accessible for for all These people, so we are not going to throw I’m not going to talk about developing Web accessibility today I gave a talk some time ago about developing web Accessibility is called, how does your website sound like, and anyone can read? It but today I want to focus in testing web accessibility, so, as you said in the Introduction automate tests can free up your your QA team for manual testing Every single bar of your application, but it cannot automatically make it Accessible magically, so we need to think about this ultimate accessibility test.

As one step of a larger testing process, so we don’t, we cannot forget about the Fact that only twenty to fifty percent of all accessibilities can can be Automatically detected, so we don’t. We cannot skip this this manual part so as I said: we’ve been using some libraries, some tools that I would like to show you A introduction about the tools, so we we will start or I will start talking about. Testing the code, so I create a very, very small react application with three tiny Components, one is the button.

One is a fake button, which is an anchor link and One is an image and I put a bunch of errors in the HTML, so the first one is Reax, which is built by the Qin and is probably one of the one, the the tools That I use more so is install as a developer dependency in your react. Application – and you can call it passing the react on object. Why so? Because it Scans, your code, and it keeps you in the chrome, dev tool console in my case.

I’m Using Chrome all the issues that your website does, the good thing is it’s: if The issues are group and it’s group as well by severity level, so you can have Front minor, which could be the warnings to critical, which is the things that you Need to tackle first so again you can automatically see while you are Developing in the in the browser, what issues to have Another thing, another tool that I that we use and we have in our code – Guidelines is the es link plugin for accessibility for JSX, which is the react Language, you need to configure the es lint our situation file and you can Configure the rules that you want to use as we see in the line 12, we extends they Recommended rules by the accessibility, all the accessibility rules as well.

We Can extend the a strict at once so instead of warnings, you will see errors So your application will not be able to build, and in the code you can see what Errors, viewer, you are having and basically hovering the the line that you Have the earth as well, when you run the application, you can see these issues as Well in the terminal so again very very helpful. While you are coding, you don’t Even need to pass any test, you will see them automatically one of my favorites Because we tend is Jax just acts because we tend to to forget the test in writing.

Test is part of the development process. It’s not a post development process is a Part of the development process, so you can write unit tests with just and with This library just acts as well as a developer dependency. You can render into A string the whole application and you can check if the application have Violations so again, if you pass the test in the terminal, you will see pretty much The same issues that you will see in the chrome tools in the ultimate tests, this Is very helpful in your testing.

I belong if you have end-to-end test With selenium or you can have unit test you will, you will see how the Application would not build or will not be deployed to production if the tests Are not fast and with the results you can build reports to your to your Product team or to your development team, so this we’ve seen how to test in the Code so let’s see, how can we test in the Dom structure, mainly from the terminal So again, acts library has an CLI in the terminal, so you need to install it.

Globally, to be able to use it and you can run the command in the terminal. Followed by the URL of the page, you wish to test as well. You can pass localhost, so you can test in your local environment or you can use The flags, the rule flags, so you can test only one rule, in particular in the Second example: I’m testing only the color contrast, so if it I want to test If it’s compliant with a double A or the Triple A the good thing for this library, Is that it gives you the issue, the violation give you why in and where and Give you an link to the deck where University, so you can read more about How to fix this issue? There is another library which is very similar to ax Which is pa-11? Why and it basically does the same so you can.

You have to install It globally, yes NPM package and you can run it in your terminal, followed by the Url of the page, do you wait to test again? You can test against localhost and You will see all the issues listed. What years? What are the issues? Where are the Issues so it will see, it will show you the HTML, where the issue is was found. And a bit of information for me, one interesting thing about this: Library is that it has a CI in the so you can use it in the code, so you will Have to create a P, a PA 11 y CI dot JSON file, and you can pack and the URLs that You want to test, you don’t need to test one by one.

You can generate a full Reaper so in the URLs you can use it blind. I have plain you can use it as a conflict, so you can see down about or You can screen capture, so you will at the end of the test. You will see the Results and you will have a screen shot of the page, so you can test the visual Inconsistency as well and for me again, one of the interesting things about this When is, are the actions, so not only you can load the page and see if the Accessibility tests are passed, but you can perform actions so, in the sake in The third case I’m calling the Drupal group’s website and I’m waiting for the Element with the class menu three four, seven, three, which I expect the element I Know is the event link to be visible.

Then I take a capture. I click the Element and I take another capture so at the end I will have a screenshot of both Hamza and google provides a library which can be used from the dev tools as Well, so you can run this directly from the browser, but in this case i’m running This from the terminal, so I will show you the article, so you can see how how it Runs so lighthouse run a drum instance and it Will start performing tests not only accessibility but performance and SEO Because it’s my experiences SEO as a accessibility and performance both has a Very huge impact in SEO for google, so at the end of the test you will see all the Tests at the pimple and it will generate a report inside the Report, you will have the accessibility tab and you can see the score that you Have and again some information about the issues where and how to fix them.

So This is how this is some tools that you can use to test the Dom structure and, as Well, you can test in the browser, and now we are going out of the out of my tester To go to the manual testing, because all these tests that I’ve been talking about Can be automated in scripts or in the pipeline of the of building and Deploying so in a in a continuous delivery and continuous deployment, System but in this case I’m going to talk a bit about manual testing in the browser So I just selected three like a three plugins that I think I I used quite Often so this is the small react, application that I create and created, and I’m going to show you the Okay, first riad acts as we as we said, so you can see the the element and they are Highlighted so you can see.

Where are we? Where are we, then? The first one is acts So if you click in an allah ice, you will see again the issues that you have some Information about the issue: where is the issue found, and the good thing is how to Solve it and if you want to learn more again, there’s a link to the tech way. University, the second one is the art and our so a RC toolkit. So if you run test Then you can see group pi test and, for example, and they the red column, is Errors and the yellow columns are warnings and, for example, let’s take aria Usage, the good thing of this library is that they are highlighted in the code as Well, in the interview – and you can highlight where you are inspecting so in The in this case, there is a fake button that has a role and any set in valia Invalid aria role specified and if you click, you will directly go to the Element in the HTML inspector other thing that the chrome dev tool has is Enact a new accessibility panel, where you can see the whole accessibility tree Which is the Aria tree, so you can see what the screen readers will read when When the element will be focused, I think Sergey hey, I know Sergey.

I talked about This a couple of months ago, very interesting, so really read this Talk because it’s really interested and some other manual testing the rice that I tend to do is climbing a Chrome extension called no coffee. Which is a vision simulator, so you can simulate how what what can happen when I When a person has a kind of blurry vision, so this is how your website will Appear for them or someone with protanopia.

In this case the colors are Different, so it’s very interesting how to to to simulate the disability of Someone so you can develop this application in a better way, so yeah Those are three extensions that you can use to test your application in the Browser again manual testing, the small react application that I create again is Just a test to to to use these tools, you can find it in the repository in github.

In my in my profile, and I want to leave with with the sentence that I found and I really really like it, which is it says it just it’s not just about disabled Users being able to access your website is about everyone being able to assess Your website, so when we develop and with web accessibility in mind, we just we Don’t develop for disabled people, we develop for everyone, so so we need to we Need to to think about this, and that’s it! Okay, thanks Adrian, do you want to put us On you know, stop sharing your screen there.

You go So are there any questions from anyone on the call today? I know that there was A question from from Andrew he was curious to know which Jas X, Alli air as You extend beyond the default recommended ones, yes, so the errors that I am used for this example and again you can see it in the in the repository. Are All tasks, and you can say which elements you are looking for alternatives in this Case I use image, object, area and inputs with the type image no interactive tab.

Index so I want to avoid table indexes and different numbers, so not interactive. So in a div or in a label, no static element interactions, so I don’t want to I’m looking not to have on click on mouse down on Mouse up on creep press on Key down and on key up in a non static element. So only the the elements that Could have on click should have on click, so no thieves that looked like a button. That you can click on them.

No redundant rolls label has associated control again. Labels with an input so no input without labels, interactive support, focus again. Focus focus of all elements should only be part on check box link search boards. Switch text box le Phaedra Phaedra, the anchor link is Valid – and this is very interested because you can specify here the Components do you looking for, so, if you remember at the beginning, I I create a Tiny component called fake button, which is an anchor link, so in This case, I’m extending anchor is Bartlett and I’m passing the component Fake button, so every time that in react, I’m using this fake button, the Linton Will say, look, this is not.

This is not an phallic anchor and I can look for Special link so href left and HOF right and no ATF. Obviously, anchor has content. So, for example, the most typical example for this is you have the logo of your Website and is wrapped into an anchor in the image or you have an anchor with Nothing inside so the every Ankara should have an a Content. I’m looking Forward language Aria roles, so in heaven heaven has content, so I’m looking for as Well, heading so h1: h2 that has content no empty h2 host because of we are Things you want to use it as separate or whatever things that you should not to That’s that’s the the extension.

So I’m doing but again, if you, if you want to Take a look of the of the repository you can find everything specify the labels So to one it depends on critical minor, whatever you want to do to treat them. Perfect um so certainly has a question for you. You wanted to know if you use Cypress js4 accessibility, testing and if you have yeah no, no, we don’t. We don’t Use Cypress, we use react testing library from Kent, art asked he said.

No, no. We Don’t use Cypress we evaluated to use Cypress at the beginning, I mean we use Playing just and and now we are starting to use, react testing library. If react. Used to have a react, thus I eleven, but it was deprecated Towards react, ax well done liquid, because hopefully it Will be included in further versions of react um. What do you do when the Different tools give you different reports or conflicting reports: sorry ii, What do you do when different tools give you different reports or conflicting Results: okay, it depends on first, you will.

I will check how each library Is configured so, for example, maybe in the linking that we were talking before I I was looking for Encore not valid in in my component, which is the fake button. But if I don’t specify that this, but because I’m specifying explicitly this Component is wrong, but react. Acts in the browser will not say anything because I’m not specifying to this library a this component is not a nun.

It’s not a Valid anchor so for other libraries will be a valid anchor. So first you need to See the configuration of each one if you have a conflicting one, I normally go to The w3c specification and read about like okay, what is the best practice and Why is this not correct in this library and wise is correct in this library or What is the levels? Maybe one is a warning and one is a error. I normally go.

Directly to the specification so and has a couple of questions in the chat Window, the first one he asked was: do you normally test the entire application for Violations in one assertion, as opposed to testing specific components or Screams we do we do both, so the test that you’ve seen is rendered the whole Thing and and pass it through the through the testing library text, yest Acts and we test component by component, but the problem with component by Component is that if you have a component, I receive an alternate test: For an image as a prop and the prop is not passed, you would need to have Several tests for this with the application you just know what is what Is there unless is obviously coming from database or an API The other issue for us is that we are a service site application based, so we use Next J’s, sometimes we have data render in the server that are not coming in the Client, so sometimes the data is not coming, so we sometimes we have Components that we cannot test, unfortunately, his second question in the chat was: do You ever find their violations that fail the test, suite that you need to write.

That you want to skip or ignore, and is that possible on a one-off basis or do You always need to make code changes to address accessibility, test failures and Then, following that up with, how do you account for testing the rendered app in Different states: okay, for the first question: yes, there’s violations that Fail the test suite that we need to ignore sometimes pick it again. There’s Something that I always say to my team, and not only the team that I that I Developed with, but product team in general is that we need to be the most Accessible as we can it’s very difficult to be hundred percent accessible, Unfortunately, but I can tell you an example because it happened today, we Have an image gallery and some of the thumbnails are not images – are our Background images, the good thing is that all the thumbnails are in the gallery, so All the images have their correct alternate test.

So if I look for images This thumbnail will not appear in my test, so it’s not that they failed. It is Just literally, they are not found so, for me is a failure, but I just keep it Because in favor of the other images, and sometimes we have to ignore them – the Better example for us is as our logo, the colors of our logo are not three pelican Compliant so it’s like our our corporate log, our corporate colors, it’s just blue And white: it’s something that I cannot change, because the board will kill me if I change the logo.

This is something that we need to ignore. How do you account for Testing the render up in different states mocking we normally model data That we pass to the test, so we mark some 500 errors. We mark some success. We mark Errors – and we test as much we can – is obvious that sometimes we miss Some stuff, but this is, I guess, that’s obvious and Kari asked in the chat if what you Thought of and I’m going to destroy this last name man, not you this article on Building the most inaccessible site possible with the perfect lighthouse Score, did you read that yeah absolutely absolutely, of course, actually actually He lives in Vienna and we are going to.

We are in the process of found in the Accessibility cloth, Vienna together so yeah, absolutely I mean again know all the all the libraries, the tools that we have seen. They are not perfect manual show us perfectly how to how to score 100 % with The list with with the worst website possible but yeah if you find the hole The best thing they can do or the best thing you can do – maybe it’s reported and Try to make this tool better, so yeah we need.

We need to use the tools knowing That it could happen and and again, as I said in my slide ultimate test, it’s just One part of the whole testing process, so manual test is very important as well. And I think manual said it in in a talk and Sergei as well the best testing tool That you can do is just is close your eyes and try to use your website with The screen reader, if you’re, able to perform an end-to-end action, you can log In you can purchase you can whatever Pro you’re selling or service, then then can You good yeah, there’s definitely limitations to automated testing, so this Is like a really broad question, but do you find that there’s one tool, that’s Better than another for finding certain issues, not not better but different, Situations so, for example, I use react, acts in the Browser instead of the acts, chrome, chrome, plugin, because I normally have The console log open, so for me it’s not that one is which is totally wrong.

Both Are developed by the same company, but one is better in one situation for Example, just I use testing in the terminal instead of using the CL eyes or The CI, so I prefer to write my own tests than to run PAE them in Y or or acts Directly in the terminal both are going to most likely most likely are going to give Me the same result but yeah I can run tests continuously and and the other one Is their one-time thing so yeah, it’s not it’s again, not not better than the other One, but with their situations Carrie asked well, she stated we captured A lot of the links, but do you have any other resources you want to recommend to The group for yes definitely, I mean a linear project.

Carrie, your your blog literally Scott ohhara Twitter account any any Accessibility guru, let’s say in Twitter, follow them they will. They are Continuously, sharing blog, post and and and tools to use in our development. Process you mentioned manual mitosis, which the His blog is a huge inspiration as well. He has a very cool section, which is Today I learned field section and every day is he posted he posts and heals Anything so my biggest resource is Twitter, follow probably the hashtag 11y And you will find would find a lot yeah.

It’s it’s social Media is really great for for targeting what you want to learn. The hashtag does Anybody else on the call any questions or discussion points for Adrienne Opening it up for people, no, nothing, okay, so I wanted to ask you something: About your music, playlist, Adrienne, okay, you said you liked jazz, but like what Kind of jazz, like comes you up when you’re doing the accessibility testing Like what like really gets you going like what really helps you get into that Groove, because sometimes you know I hate to say this – the testing can be a little Bit arduous and tedious, you know, so what do you recommend and I I just know, not a Specific art disorder – or I mean probably it’s more into the funk part, so Maceo Parker is my probably my favorite, Frank artist, but any just music is very Relaxing to tour with jazz doesn’t funk yeah.

I am not quite there in the jazz World you know I like the funky side of jazz, but some of the other stuff I Either are not cultured enough or I haven’t been exposed to the right. Artists to really have a deep sense of you know, love for the genre yet, but That’s okay: I can get there. Okay, I just want to give everyone else. One more Opportunity for questions or discussion points there’s a big group today, so I’m Just hoping someone has something to say it might be.

My Yeah, go on under you’re welcome to turn your microphone on to Andrew. If you want To do it that way, yeah! I can do that. Can you hear me yeah, okay, great yeah? This is Easier, so I’ve got lots of test suite questions, I’m in the middle of trying to Set up something for my team as full feature is this so when your tests are Failing that you choose to ignore, is that mean your test? Suite is literally Family, because a lot of test suites are gatekeepers for the CI to build.

So how Do you, how do you deal with that or how does that work? Yes, absolutely There’s this is something that you need to talk with your team of course, and so In our team again, this is what you just said: Our tests need to get to pass to continue building, so we have every pull Request that we make to the code, it has a test and the build breaks. We need to Look where is this the the wait break, what he braked – Oh buddy, Proctor, so Sometimes you need to analyze this this test.

We normally have our UX designer Sitting with us – and we need to talk – is this really a usability test? Failure is It an accessibility test failure is the accessibility. How is the level of Severity, so is it a warning, is in an error, is a huge error. Like okay, you have Links with with no ATF, you have images with no alt text. Okay, you need to fix That again, do you have color contrast that is not compliant with a triple-a or Not even double-a, okay, then we need to evaluate it and, if is if we need to in If we decided to ignore it either you delete the test.

Or either you make it past the test I mean, how can I say it like you: can Reduce the severity your tolerance today today to the test. So if you’re looking For errors in the industry, in in this specific test, you’re looking for Warnings so the error will go or the other around the warning will go: okay, That’s really helpful, so you’re you’re not letting a your test suite fail to be Green, you know indefinitely because that’s one Thing that’s important is that we trust the test suite.

So definitely I mean so In making a test with expect through and and passing to is just delete the test Makes no sense. Okay thanks. I really appreciate that good anybody else. Do you have anything else? You want to say Adrienne, one thing is just we need to understand that the Responsibility of web accessibility is not on the developers it has to be in The whole team so from product managers, product owners, you x-ray designers, UI Designers developers testers everyone, it’s not.

The developers needs to think Of everything, and if it’s not accessible, is part of the developments or the Developers fault, no. This is something that, if you, if your product owner Requests a new feature and if the feature is a button who perform an Action then it has to be a button and if it’s a link who goes to a place, then it Needs to be linked, ok, button against link. We talk about a different day, but But we have so HTML provides us with the correct tools.

We don’t need to download. Any polyfill we don’t need to download any library is everything. Is there to be Used so one is use with what you have correctly and again, it’s responsibility. Of everyone, so to argue, do not fight if it’s possible with your designer and say No, I’m not going to delete the outline of our focus only and an argue it Correctly, I will delete the outline only if we put something else or this this Button I want a button that looked like an icon and in small screens look way.

Way less this if it’s possible, because if it’s not possible, let’s look for a Different solution that that the UX, the user experience is not effective, so it’s Something that is is easy, because it is really really easy, because Aria, give you all the opportunity you have so you just need to do it and again Involve everyone in the process, so if you could involve the whole team, but I Prefer it for for your process, because if you have an accessible product, then Is a better product not again the same as they my last sentence, not for Disabled people, for everyone right – those are great words – well enjoy your time in Columbia, I hope you really enjoy the countryside, along with the conference.

And congratulations on your engagement. That’s really exciting! Thank you thanks for coming on today, we really appreciate everyone: who’s, not Thank you for having thank you for having me


 

Categories
Online Marketing

Web Accessibility: A Catalyst to Greatness #a11yMTL

So what we’re here to talk about today is A catalyst to greatness and accessibility. So, first of all, I want to start out with a little visual description. For those of you who can’t see I’m female and I’m wearing a shirt with Braille across the front across the chest And the translation of the Braille is If you can read this you’re too close [ laughter, ], Yeah yeah, So just a little visual description there.

So what we’re going to talk about is how you Can be great in usability user experience how you can be great in mobile design, how You can be great in innovation on the web. There’s a key to this and That key is accessibility, So we’re going to talk about how accessibility, Contributes to greatness in all these areas. Accessibility is really about user experience. It’s about adaptability, it’s about flexibility and we’re going to talk about That but, first of all a story Back in 1999, which seemed ages ago.

Now some of us started a small company And it was a usability company. We designed the website with A focus on accessibility, so it had to be highly accessible. We didn’t even think about accessing This website on a phone back, then We didn’t think about it, But then the founder of the company. She got one Of those new fangled phones that you can look at a web page on a screen, A little screen, okay, This is a big deal back then.

So, what’s the first website, she Went to look at on her new phone, Our company’s website It worked beautifully. This was before anyone knew Anything about website design, but just the fact that we had Designed it to be highly accessible and we’d, followed some basic accessibility, Principles meant that it was adaptable and flexible enough to be used on This rudimentary mobile browser, and that’s just because of accessibility, So a lot of what we do even today, For accessibility directly relates to what we need to do for mobile design, So a little bit more history.

How many of you have heard Of progressive enhancement, Okay, most Half the people, So progressive enhancement, Was coined around 2003? I — the name that pops into my head is Jeremy Keith’cause, he talked a lot about it, but I actually did some research And found it was coined before then, But progressive enhancement came around as People were designing advanced web applications to take advantage of the latest technologies.

And then were finding it wasn’t working well on older devices, older browsers, Older software et cetera, So the idea behind progressive enhancement was To start at the very basic make sure that say, your web application can be used. In older environments and then to progressively add enhancements, If the web application or the website is being used, In more advanced technology, So that was progressive enhancement of 2003.

Then in 2010 the idea of responsive Web design was coined, I think, by Ethan Marcotte in A List Apart, article And responsive web design is about Designing your website or web application so that it can respond to The device you’re using you’re looking at and on you’re using it with So whether I’m looking at a big desktop Or a small little phone that it will work and that’s responsive web design. I assume you’ve heard a lot about that Now, there’s something that Predates this by quite a bit In 1999, a similar idea came Out way before that, Anyone have any idea what that might be.

That’s the idea of transforming gracefully. So, in 1999 the web content accessibility, Guidelines talked about transforming gracefully, and that was again the idea. That we have the content that can transform no matter how it’s used So, whether it’s on a small device, whether it’s In a big device, whether it’s older technology, whether it’s newer technology, whether it’s Through a screen reader by a user who is blind, whether it’s in large magnification, however It is designed it will transform gracefully.

So the point in here is that These ideas aren’t new, We’ve been talking about those In accessibility for a long time, And when you start to think about Accessibility early, it can lead to a lot of these developments for what we’re talking. About now, for example, mobile web design, So if you want to be great, if you want To be great, get accessibility right And you may be hesitant and you Should be and I’ll tell you why It’s because you really need a Crack [ phonetic, ] accessibility.

You know that word. It means really understand. It really be one with it really understand the concept of accessibility, So that’s kind of the key to the key And I’m going to tell you a little bit about how that’s different than you May think of accessibility right now, So what I want to talk about is understanding. Accessibility differently totally differently than many people address accessibility.

A lot of people came to accessibility because They were forced to meet some standards or some regulations, so the web content Accessibility guidelines came out in 1999, although a lot of people didn’t directly Paid attention to them in the US, Then, when Section 508 came along all Of a sudden, this was a checklist. You had to pass the accessibility and there’s Been other regulations around the world where people then started approaching Accessibility as this thing, I need to do afterwards at the end of my Project I need to pass this checklist, But that’s not the right way to think About accessibility, so I’d like for you to change your mindset about accessibility, And we’ll talk a little bit about that As mentioned, I do work for the W3C the World Wide Web Consortium, and that is the organization that defines the Standards for the web, so html CSS et cetera.

We have a web accessibility initiative. That develops specific standards and guidelines for accessibility. So, given this is my employment, you Would probably assume I would say, step 1, the most important thing for accessibility, Is to know those standards and guidelines, But I don’t, even though that’s my Employment, that’s not the number one thing: If you just start out with the standards. And guidelines, it’s overwhelming You’ll be like a deer in the highlights right.

It’s too much, That’s not the place to start. Instead, the place to start is understanding. The basics of how people actually use the web: It’s not about standards. It’s about people, specifically people with Different disabilities and how they use web – That’s the number 1 thing and the Most important and the basic thing So, for example, I want to tell You about some people that some friends of mine that use the web One is Glenda.

I first got to know: Glenda Just from mailing list archive She was on a couple of similar mailing — Same mailing list that I was on, And I was just really impressed by how Articulate she was how clear how level headed when the conversation got kind. Of uncomfortable, sometimes she was always just clear and Not getting into the fray Really impressed with Glenda! Well, it wasn’t until years later that I Found out that Glenda has cerebral palsy, [ mumbling ], So that’s how she talks so Actually, interacting with Glenda face to face is much more difficult, but because Of accessible technology, she can contribute to this — the work just like anyone.

She has a blog. She is called the left thumb. Blogger, Because she also has limited motor control and she just types with one thumb. She slides her hand along the keyboard And there’s a article on there on YouTube. I think if you want to check that out, So Glenda is one of the people that we Need to focus on when we’re thinking about — thinking differently about accessibility, Another person who also has motor Impairment is a friend of mine named Carl and Carl lost use of his arms From polio from post polio, So he doesn’t use his arms at all.

He uses a mouth stick to type, So it’s just a dowel with a wooden tip at the End and his typing looks something like this [ Pause ]. He can type pretty fast. I don’t know what his words per minute are. He is also –. He can also Talk while he types as well, So we need to make sure that our Applications work for people like Carl. This is John Slatin John started losing his sight when he was middle Aged and eventually went all the way blind John was a professor English.

Professor at University of Texas, He embraced technology as a way for — in the Web –, as a way for anyone to communicate And John developed, leukemia And John needed to go to do research on Treatment options and what he found was that many of the websites That provided information on treatment for leukemia were inaccessible. He couldn’t get that information, So John is trying to make life decisions.

Life or death decisions literally, but the information is not accessible to Him and we need to make sure that all of our web applications website Is accessible to people like John He –, So people who are blind use screen readers That read aloud the information on the screen. I hope most of you have heard screen readers and Readed someone interact with screen readers. I won’t take the time to do that now.

But if you haven’t that’s top priority, Do it this really will help Change your thinking, Here’s another friend of mine, His name is John as well And John was born blind and he Started going deaf around age 8 All right, So he can’t use a screen reader. How does he interact with a computer Braille exactly? He has a dynamic Braille Display they are so cool, He has this rollup pins and it pops up and provides the Braille — The output from the computer, So that’s actually how John and I communicate.

We just have his notepad up and I’ll type on a Regular keyboard and he can read it in Braille and then he’ll type back in notepad And I can read it in notepad Because of accessible technology. John was Able to graduate top second in his class in Mathematics go on to get a master’s degree. In computer science and electrical engineering, So we need to make sure that all of our Work is accessible to people like John Now, one of the important things Is to be careful not to focus just on screen reader access and People who are blind So, for example, –, oh, you know I started out.

Talking about people with motor impairments, that was on purpose people who Have difficulty using their arms or such to interact with a computer? When we talk about visual disabilities, we Also need to be aware that a small percentage of the people with visual Disabilities are blind, A large percent are –, have low vision. So, for example, I have optic neuritis, It’s remitting, — remission — and comes and goes And a lot of times when I look at the screen, it looks something like this Which is the normal sized text? It is really too blurry to read, but The larger sized text is readable, So I usually use 120 150 percent Zoom in a browser and set up that way, But some people need more Significant screen magnification, So here’s an example of someone with Very significant screen magnification Okay, So they can only see Part of the screen at a time It has some overlap with, say, mobile design, where you can only see part Of the screen at the time, So again it’s really important when we’re Talking about even visual disabilities to realize a huge variation in user needs.

This is Tim Creagan. He is at the US. Access Board – and he is hard of hearing. This is another thing, that’s very important If you have audio on the web, whether It’s a article or a podcast or whatever, and you don’t have transcript or captions. That information is totally Inaccessible to a person who is deaf, A person who is deaf cannot get any Of that information in an audio, So if you’re not providing a text, Description, you are discriminating against those people who can’t hear Another very important thing to consider.

Another thing is this: — I’ve worked With a high school student named Sarah, who is going into a college program, Looking at her, you would not Assume she has a disability, but she actually has a fairly Significant visual processing disability. So when she reads text, she can’t understand it. So she uses a screen reader’cause when She hears text or she you know hears, she can process information, just fine.

She can see just fine, but she just can’t Process the information that she sees as well, So she uses a screen reader People with different cognitive disabilities. Are another group that we need to consider So if we think about all this, we think about People with auditory cognitive, neurological, physical speech, visual disabilities, you See how we can really open up our thinking. So if we think not about the checklist, not About the guidelines and the requirements, but who are we really designing for Who are the people? What are the issues? What are we really designing for? So this is to approach web design differently.

It’s a different approach to web design. Now, if you have a smartphone in your Pocket most of the technology developed for that smartphone came from Innovations for people with disabilities, So even the very basis of a phone — of the Phone comes from developments to accommodate and to help people with different disabilities. Elle Waters will do a presentation later. Where she’s going to talk some more about this, so I won’t go into the many many examples.

Of how something that was developed for a person, sometimes or People with disabilities is now in the mainstream technology. That you have in your pocket, But the idea is that thinking Differently leads to innovation When you’re thinking about all different people, On different situations, it really lead you to think differently and Innovate in new and unique ways, So how do you do that? How do you think differently? How do you consider all these people Any ideas You meet with them? Exactly you meet with them.

You can do very informal meetings. You can do more formal processes So, for example, a user-centered Design or user experience or usability has very specific Processes and techniques that you can use to understand how people use the web ISO has a definition of usability. Anyone know that You don’t have to repeat It but yeah yeah someone Yeah yeah, okay, So it’s the extent to which a Product can be used by specified users to achieve specified goals.

Effectively, efficiently and with satisfaction in a Specialized context of use, So that’s the definition of usability in ISO Now this is achieved through A user-centered design process How many people have heard of — know Basics of user-centered design process About half About half, So here’s the summary UCD is the user interface design. Process that focuses on usability goals, user characteristics, environment, Task and workflow It follows a series of well-defined methods and Techniques for analysis, design and evaluation.

It’s an iterative process with Steps built in from the first stage of projects through implementation, So the idea is that you can Follow user-centered design to understand accessibility, Understand how people use the web Now when we look at that definition, we looked at Earlier the ISO definition of usability. Look if we pick out a few words, so It says “ Use by specific users,.” And all you have to do – is Make sure your definition of those specific users includes People with disabilities, people with a wide range of abilities And then it says, “ In a specified Context of use.

”, So that’s making sure that the context of Use is broad that it includes, for example, assistive technologies like screen readers, And screen magnification et cetera. So if you know any usability specialists Or user-experienced professionals, this should be right up their alley. Now some people are onboard and some People have yet to see the light If you’re a developer and you Want to go beyond the checklists, follow usability principles will help — and Methods and techniques will help you with that.

So if you want to learn more About this, the W3C WAI has some information called Involving users in web projects for better easier accessibility – And this is mostly geared towards developers, Designers developers not particularly Usability specialist, but just you know you said, observe people This talks about finding people and Observing them talking to them, So that’s some basic information. Now, if you know someone who is usability, Specialist or really wants to get involved with this I’ve written a book called “.

Just Ask Integrating Accessibility Throughout Design,.” And the whole thing is online free, So it’s available from uiaccess.Com/justask. So it’s uiaccess.Com/justask And that’s all about –. It’s primarily Geared towards usability professionals, but the beginning is the basics. That you can implement, even if you’re not doing full User-Centered design process, If you’re interested in getting a print copy for those who are here, we Have a discount in November! So from that website you Just enter a11ymtl.

Html and you can get a discounted Version if you want to print a copy, But the whole thing is online for free as it is So that’s another resource We’re going to look at a few Other resources that we have from the W3C WAI on designing for inclusion. We have an extensive document on how People with disabilities use the web. It has several different Sections one it talks about just like the user stories to Help bring those to life.

There is a section on the Technology that people use There’s a section on what are the accessibility, Requirements of websites and web tools, So I encourage you to take a look at How people with disabilities use the web? We have another resource called Web accessibility and older people on meeting the needs of aging web users, So we had a three-year project that Was a European Commission-funded project to look at designing for older users And what we found at the end of that Three-Year project was that indeed, it’s a one-on-one overlap with Designing for accessibility, So we already know how to Design for accessibility And what we found is it’s the same issues.

If you’re designing for older users, because older users have a range of issues, Let’s do a little exercise to that and Give you a chance to stretch your feet So I’d like everyone to stand up. [ Pause, ], Okay. So what I’d like is for you to pick One of the gray figures on the screen, So on the screen we have a representation. Of the percentage of people with disabilities, This is in the age group, 18-24 years, okay And it’s 9.

5 percent. So pick one of the gray figures We’re going to go through aging And if your figure turns Color have a seat okay, So this is 25 to 34 years 10. Percent and we lost 2 3 people there. This is 34 to 44, 14.4 percent, 45 to 54, 21.2 percent 55 to 64 at 34 percent, So more people dropping 65 to 74, it’s 42.3 percent 75 and over 64 percent Now look around the room. We have less than 64 percent, We have four people standing, So those of you who are standing Unfortunately, this isn’t the true predictor of real life, so I can’t guarantee That you’re going to make it without Thanks, you can have a seat, But the point is, most of us will live to 75 and Most of us will acquire significant disability.

Minor disability at first may be from Declining eyesight from declining dexterity from declining hearing all These — cognitive disabilities – All these are significant. This can start out small. It can get really annoying And but can be much more of an impact. On how people use your web products Designing for people, older users is becoming More and more important and more and more of a focus of both government and Industry and on profits and everyone, This is focused on meeting the User — needs of older users And, if –, in order to do that, you can look At what we already know about accessibility, So that’s the –.

We have resource on that. We have another resource on web Content, accessibility and mobile web, So I’ve mentioned some just Briefly, the overlaps, but we have a specific document on that overlap. Now this talks about how the standards And best practices overlap between the two, So I just said that word standards, Even though at the beginning I said that The standards are not the first place and not the most — the first place to go.

They do play an important role, So I still say that the first Step is to understand the basics, But maybe around step 3 is to start Looking at the standards and guidelines and then probably again, maybe at Step 7 or somewhere around there, So they do have an important role. One other reason is there’s no way you Can fully incorporate enough people and enough variety in your design process. So, even if you have a huge budget and a Huge amount of time, there’s so much variety in people in how we use the web and how People with disabilities use the web that you won’t be able to cover it all, And the standards and guidelines do that.

For you, they consider this wide-range, So I’m not going to go into detail on these. I’m just going to make sure you know. What’s There and then hopefully you can –. If there’s any questions, we can Follow up with that afterwards, So again, the W3C defines its standards. For the web and the ones we have for accessibility are an integrated set, So you may have heard of WCAG or the Web. Content Accessibility, Guidelines that applies to websites that applies to web applications.

That applies to mobile applications. Everything Then another aspect of the Guidelines is that users use browsers and other technologies to access the web, And we have guidelines for those called The User Agent Accessibility Guidelines – Another one – is the Authoring Tool: Accessibility, Guidelines and that talks about what the tools that we use to design web content Need to do to support accessibility.

These are built on the technical Specifications from the W3C, We also have some specifically for Accessibility, such as the WAI-ARIA for Accessible, Rich Internet Applications and Indie UI, which is Independent User Interface, and that talks about how to Communicate a user action to an application, no matter how the user did It so whether they scrolled with a gesture whether they used a mouse, whether They used voice input, however, Okay, so just a brief introduction.

Also A note that WCAG 2 is now an ISO standard. So if you’re working on WCAG 2, now you can Say you’re also working on an ISO standard. It’s exactly the same. The same text, It’s just adopted now as ISO/IEC 4500. Again, if you have any questions I’ll Be around at the break and afterwards, So I just want to reiterate that Accessibility is about designing your website so that more people can use it.

Effectively in more situations, It’s much more broad than just Focusing on people with disabilities, that’s the most important aspect that we Focus on but the benefits are far reaching. So if you understand accessibility differently, It’s not about a checklist to do at the end, but it’s a fundamentally different Way of thinking about your web design and your web development It’s not about the checklist, If you understand accessibility differently.

You will approach web design differently And an interesting article from A List, Apart several years ago by John Allsopp, is called The “ Dao of Web Design.”, He says “, Firstly, think about what Your pages do not what they look like Make pages that are adaptable. The journey begins with letting go Of control and becoming flexible.”. So when you change your way of thinking, You’ll understand, accessibility differently, you approach web design differently, and this is A catalyst to greatness greatness in usability and user experience for a wide range of Users, whether it’s on the mobile platform, whether it’s because they are older, it’s All these things that you want to do better at you can learn from understanding Accessibility, So I encourage you to approach Accessibility as a catalyst to greatness – and I thank you for your time – [ Applause & Music, ],


 

Categories
Online Marketing

Intro to ARIA — A11ycasts #13

So, for instance, I’ve got this input here, wrapped in a label and that’s going to produce a visual UI like the one that you’re seeing here this radio button.

But that’s also going to create a spoken UI based on the built in semantics of those native HTML tags. Now, if you’re not quite sure how all of that happened, or why those semantics matter be sure to check out our previous episode on semantic. So I’ll include a link down in the show notes and we can also maybe drop in an annotation up here for you to click on. I just I have some background on how semantics work and why those are important in the first place now.

This is all good and everything, but there are instances where a simple layout in native HTML just aren’t going to cut it and so to handle these situations. We have the web accessibility initiative accessible, rich internet applications, spec, which is a bit of a mouthful. So you oftentimes see this referred to as wai-aria or maybe just Aria, so audio works by allowing you to specify attributes on elements which then modify the way.

Those elements are translated into the accessibility tree. So let’s take a look at a really basic example. Just to show how this works, so, if you create a a plain checkbox a screen reader is going to announce it. As you know, a checkbox it’ll tell you what its label, if it has one like we do in this case, where it says, receive promotional offers and it’ll also tell you the the state of the checkbox right, whether it’s checked or not, but let’s say you’re in A situation where, for whatever reason, you need to implement your own check box using something like like a div right, maybe you need to style it in a really special way.

So, in this case, we’ve got a div checkbox we’ve created here, and the screen reader is going to give the user really like no indication that this element is meant to be a checkbox. It might announce the the text inside of the div there, but it’s not going to tell you the role of the element. I can say it’s a checkbox. It’s also not going to tell you the state so excited you sure is going to be able to see these visual cues and they’ll be able to figure out that this is a checkbox.

But nothing is going to be announced to our screen reader users and that’s a really big problem. So using Aria, we can actually tell the screen reader about this extra information here up at the top, I’ve got some custom checkboxes just created using gives down at the bottom. I’ve got some checkboxes using the native input element so using voiceover. Let’s see how these are announced differently: voiceover, I’m chrome, custom checkboxes in custom check intense group with three items there and then slices group with two items: heading ten times check, check box and then slices uncheck, checkbox voiceover off.

So you see there that the the div elements just are announced as groups. It doesn’t indicate to the user in any way that these are checkboxes where it’s the native element. It indicates it’s a checkbox and it tells you the state whether it’s checked or not. So, let’s see if we can add some Aria to improve upon this so over in my dev tools, I will select these the checkbox elements and I’m going to start off by just giving them a role of checkbox and I’m also going to give them a state Of Aria, checked of either true or false, depending on you know the actual state of the element there.

So if a role checkboxes to the one Aria checked equals false and let’s try it again using the screen reader voiceover, I’m dropping custom. Checkboxes 10 pens check the checkbox and then slices contract checkbox always go over all. So adding that role and Aria checked attribute causes the middle Union accessibility tree to actually have the desired role and state without changing. You know anything else about the nodes, appearance or its behavior, which is pretty awesome right, we’re just adding in additional semantics using Aria.

So in terms of the accessibility tree, what ru does is it really allows you to subdue like tree surgery? So you take the accessibility tree as generated by plain HTML. You add Aria to that, and now you get a different accessibility tree and it may be subtly different or it could be radically different, depending on what attributes you use, however, keep in mind that this is really the only thing that ru changes.

It doesn’t change anything about how the element behaves on the page. For instance, it’s not going to suddenly make your element focusable, it’s not going to add keyboard event, listeners for you or anything like that, or you does not change behavior in any way. It really only is for adding in additional semantics. So if you, you know, if you’re making a custom control, it’s really on you to make sure you go back, and you also add in that keyboard support so you’re kind of like maintaining that that consistent experience for your users.

So now that you understand more about what ru is and kind of some of the basics of how it works, I want to cover some of the things that Aria will. Let us do in our application, as we saw in that check box example. Aria can add semantics to an element where no native semantics already exists. So, for instance, you take a div element, it has no built-in semantics, but we can use Aria to be able to role.

We can use already to give it a check State, for instance, build a custom check, box or radio button, or something like that, or you can also be used to modify existing element semantics. So, for instance, let’s say I’ve got a button element that I want to. Actually turn into more like a toggle button, so I can on/off switch type of control. I can give it a roll of switch. I’m give it an already check state of true or false, and now I’ve sort of modified the semantics of this control, and now it’s more of a even more specific kind of thing.

It’s like a toggle button right to switch button. It’s important to note here, though, that the switch rule is part of the newer aria 1.1 spec. So, as I’m recording this, you know there’s probably a number of assistive technologies which do not support this role. Just yet, just like all web standards. Aria is you know, constantly evolving and advancing to try and keep pace with new UI patterns, so that’s something important to realise as well right, if you, if you come across an aria rule, you also want to check for the support of that role in assistive technology To make sure it’s widely supported, and then you can use it another thing or you can do is it can express semantics and UI patterns which really like don’t already exist in HTML, and I think this is where Aria kind of comes into its own Aria.

Basically, will let you create accessible widgets, which are not possible using plain HTML. To give you an example. Here is like a tree: widget component, okay, we can take an unordered list and add all your rules of we tree item and group and add an already expanded attribute to a few those children and now we’re expressing the more rich semantics of this tree element and Again, there’s no tree tag in native HTML, so it’s something that you know we wouldn’t be able to build otherwise without aria, which is really important.

Another thing we can do and as we saw this in our previous episode on labeling or you can add extra labeling and descriptive text to an element right to give that element an accessible name. So, for example, if you have like an image only button which doesn’t use an actual image element, so you don’t have access to an alt attribute or anything like that to put alternative text on it. You can still use Aria.

You can use Aria label to give that element its own accessible name, and that way you can have it be announced properly by a screen reader to those users, or you can also express semantic relationships between elements which go beyond just like standard, dom parent-child sibling relationships. So, for example, a more complex relationship is something like this element controls that element over there.

Even if they’re not like you know, direct parent-child or anything. So in this case right here, I’ve got a button which controls whether a particular part of the page is visible or hidden, and it does this in the form of kind of a disclosure widget. You can see here where it shows advanced settings. We’ve specified using Aria controls – that’s actually controlling this group of elements down here for these Advanced Settings checkboxes.

So even though they’re not parent-child, they’re, actually sort of like siblings. We can create this new relationship indicating this element over here controls that elements over there, which is really cool and finally, Aria, can make parts of the page live, so they can inform assistive technology right away when something changes – and we saw this in our previous episode On building alerts, so we add role equals alert to some element.

We drop some new content into it and then it’s going to announce that immediately through assistive technology to the user. So are you giving you a lot of tools to make sure the experiences you build? Are semantically rich and can be easily understood by assistive technology? Now we’re definitely going to be diving into the subject more in the future, but that about covers it for today. So if you have any questions, you can always leave them for me down below in comments, or you can hit me up on a social network of your choosing.

As always thanks. So much for reading I’ll see you next time, hey. If you enjoyed this episode of Ally cash, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog. As always, thanks for reading


 

Categories
Online Marketing

Accessibility Testing – Totally Tooling Tips

It’s good. Did you get a haircut? I did a haircut new accent, new new new. Look. You feel it’s good! It’s good you’re, looking better than before. You feel better than before. You’re, not mad. I am NOT no hi, I’m Rob Dodson, I’m a developer advocate on the chrome team, sure Rob just just sell, sell yourself. I mean hello and also uh you’re selling stuff, also host a little show on the chrome Developers.

Youtube blog called alley cast world-renown. Is that what we’re calling it yes well world renowned, I see people around the world have renowned it. I think, okay, all right, believe what you want to believe, but today we’re going to be talking about accessibility, audit, Angley right. What is your workflow for that? Look? Like yeah, so over here on, my laptop I’ve got a site that I’ve been working on.

This is called lifestyle. It’s got some cool like hipster photos and stuff, like that people have styles of the accessible and famous all right yeah, and what I usually do when I’m you know working on improving the accessibility of a site is, I will use the new audits panel in chrome, Dev tools, which is very very nice if you go to create a new audit, you’ll, see that you’ve got like a number of options inside of there, so you could look at PW, anus, best practices, etc.

One of the topic areas is accessibility, so you can just go run, just an accessibility audit. If you don’t, you don’t feel like doing the other tests. Here’s one that I ran against the page and it’s doing pretty. Okay right. It’s got on anyone not so bad, but there’s definitely a few issues that we need to fix and in particular one that I see a lot is, is color contrast, so you’ve got your your your foreground text.

Maybe is a little too light on the background. Color one of the nice things that we can do with the audits panel is we can actually dive in and we can see which elements specifically have failing contrast. So here I can see that I’ve got this like product card price element and if I click on that and stretch this out a little bit, you can see. It’ll take me over to my elements panel and I can actually scroll in to view the actual element that is failing just this price right, y’all, nice and it already selects the domnode for you, that’s cool, yeah, and so one of the things that’s really helpful.

Is you know really this is this? Allow me to sort of quickly identify this node, but one of the things we’re working on, which is over here in Chrome, Canary right now, is actually a color picker. That will make it a little bit easier for you to fix those contrast issues. So if you’re in something like Chrome Canary, you can go into Chrome, colon, slash, slash flags, you can look for the word: developer tools, experiments, oh you’re, in flags and experiments.

You look like to live dangerously, oh yeah, oh yeah, so dangerously, so we enable the developer tools, experiments right. We step into the future, it’ll refresh our browser for us. We can go back over here pop up in as the dev tools click on this little Settings. Menu good, where it says experiments da da and here we can see, we’ve got accessible the inspection as well as color contrast ratio line.

So let’s see what that does so we’ll go, find that same node. That was giving us problems over here. Inspect it and then we can see in our Styles panel I got a little color sread and click on that and you’ll see that there’s this little line inside of my color palettes. This is actually a sea mmmmm-hmm. This was actually telling us like. Where are our colors needs to be in order to have sufficient color contrast? So, since we’re above the line, we get this little warning that says, we’ve got a little contrast.

I happen to know that this is not like the final look for this piece of UI. It’s still being iterated on, but it’ll be something like this, where you’ve got a line and you can sort of tell which side is the good side of the bad side. So I can actually just drag this below the line. That warning goes away. You can see over here. It’s also like updating my element live in the document and it’ll sort of tell me what the good color contrast ratio is.

So I can just grab that value right off here and then go back and just fix it in my CSS. That’s pretty neat, so I was trying this out the other week and something that occurred to me was that you know if, if you use a developer, realize that the contrast is a little bit off, do you need to go back to your designers at that point, And say: well, is this okay for our brand and thing is that’s when they should be factored in earlier on in the process I ideal.

Yeah like this is there’s, there’s definitely other design tools out. There there’s, I think, there’s plug-ins for sketch, and things like that, which will also help you look at the color contrast for your designs and make sure things are not too low. Contrast, anytime, you can catch that earlier in the process, make sure all the designers are on board and all the stakeholders are on board and and that sort of like makes it easier when those things come downstream for folks to implement it, and it doesn’t kind of, Like a contentious issue or anything cool, that’s that’s awesome.

The house audit also had some other accessibility stuff in there as well right. So it had contrast. No, I was highlighting all the tributes to alt attributes, yep yep, so yeah. If we go back to that report, let’s see here so yeah a few of the things that that this site was failing. It’s missing some alt attributes. We’ve got form elements that don’t have associated labels: the big problem there is you land on a control, and maybe it says that it’s a button, but it doesn’t tell you what kind of button right is it the you know, sin my social security number to hackers Button, I don’t want to click that button right.

I want to make sure that I’m clicking the right kind of controls. I know what I’m interacting with we’ve got over. I think 32 tests, or maybe even over 35 tests in in the lighthouse accessibility checker here and under the hood. These tests are all based on a library called axe core which is made by some folks at a DQ so yeah. We we work at the axe, core library we leverage to the test from inside of it and we sort of integrated into dev tools.

You can hop around and inspect the notes. Real, quick, that’s awesome, so this is great again for locally checking on your accessibility issues. What about CI and continuously monitoring your accessibility? Is there a story for that too yeah? Absolutely so the the lighthouse library itself can be used as a standalone node module. So you can pull that into your CI process. If you want to do that or alternatively, you could use the axe core library that is powering these tests and you could use that standalone.

The the nice thing there is, you can sort of decide which accessibility tests you want to turn on or off, depending on sort of the criteria that you’re trying to meet very cool. So we’ve got lots of great tooling for accessibility, auditing. What about docks or education material? Yes, we have that as well. So if you go to developers.Google.Com/live Sunda mental, slash accessibility, we have a whole section there on getting started with accessibility for the web, and it also includes links to our Udacity course.

So that’s like a multi-week kind of hands-on experience where you actually like build stuff and read a bunch of articles and kind of get up to speed on accessibility, very cool yeah. I feel, like my lifestyle, is more accessible, already yeah cool yeah, thanks for having me today, yeah thanks for coming down awesome yeah people should check out ala cast: oh yeah, oh yeah,


 

Categories
Online Marketing

How to check for accessible colors — A11ycasts #17

Really Really different, Whereas if you take two colors that are very Close together on the color wheel, it ’ s, going to be harder to tell the two apart Now the reason why this is important in web Design is because often times our whole goal is convey some information to the user, usually Through text and images, But if the contrast of our text is a little Too subltle and too mixed in with the background, it might be difficult for the user to read.

The page and that might sort of degrade the user experience. So what I wanted to do today is walk through Some of the process that I use to sort of check the page and figure out if it has appropriate Contrast and how to tune it up if I find some issues But to start follow me over to my laptop And I have a little presentation that I want to show you It kind of walks through how we measure contrast.

On the web, So here I ’, ve got a set of text boxes on A white background, and up above you can see, I ’ ve, got these numbers up here for some Contrast ratios, So I ’ m measuring in terms of luminance The difference between this foreground color and this background color Now on the web. We actually have guidelines That try to instruct us what our contrast minimums should be So the web content accessibility guidelines, In section 1.

4.3, they say for body text: you want to aim for a contrast: ratio of around 4.5:1, for, like smaller text or your general body copy For larger text, something that is 14 point. Bold or 18 point you can ratchet that contrast ratio down just a little bit to 3:1. So if we go back and we look at our image – Of contrast, we ’ ve got these first. Two examples would meet that minimum contrast requirement.

So this one is just pure black on white, so its 15.9:1 Thats really high contrast. This one is a little more of a subtle grey But we still have 5.7:1, which is pretty nice. These last two, though, are just a little too Low contrast, so they wouldn ’ t quite meet that requirement. We can also actually bump this up, though Theres a enhanced contrast recommendation in the web content accessibility guidelines, As well So this is for situations where you know you Might have either an older audience or a low vision audience.

In that case, we can bump the contrast ratio. Up to 7:1 or 4.5:1 for the regular body text. So if we go back – and we look at this example – Here, really only this first one would meet that enhanced contrast, ratio requirement So consider who your audience is going to Be when you ’ re, building your site or application, and that can help decide where you want to Aim on the contrast ratio scale, I use a number of different tools to try to Figure out, if I ’ m nailing those contrast, ratio, minimums And actually my friend Louis, has done this Really cool thing where he has put together this accessibility testing for the web handbook.

Called OATMEAL, which stands for Open Accessibility, Testing Methods for Experts and Lay folk. He actually has a whole guide in here about How he measures color contrast and the folks on his team do that, And so we ’ re going to kind of follow this Guide a little bit, We ’ re not going to use all the exact same Tools, but this is a really cool methodology that you can check out and use in some of Your own apps to maybe figure out your process, So what I ’ ve got here is a website called The accessibility blog and we ’ re, going to follow two of the steps in that OATMEAL Guide doing a sort of semi-automated check using a tool like aXe And then we ’ ll, do a more manual spot.

Check using a WCAG, color contrast analyzer, So starting on this site, the first thing: I ’ m going to do. Is pop open, my DevTools, I ’ ve already installed the aXe. Extension For Chrome, If you actually check out our previous episode, On A11ycasts and I’ll leave a link to this down in the show notes we covered all the different Ways that you can install aXe on your system, So I ’ m just using the extension for Chrome Here – and I ’ m just going to open it up and check out this page and hit the analyze button, And you ’ ll – see that it tells me over here.

On the left that I have a few elements that do not have sufficient color contrast, I ’ ve. Got about 7 issues here: It ’ ll! Try to give me a CSS selector to the Elements that need some work, but there ’ s an inspect button that I often use to just Inspect the element in the Dom – and I can scroll up and say who exactly is this Alright, so we ’ re starting of with these Little anchors up here in our navigation – and this is one those areas that I see a lot where It looks like we ’ re, actually pretty close to having good contrast here, but we ’ re.

Sort of on the bubble – it ’ s, a little unclear. Are we hitting that or not So? What I ’ ll often do. Is I ’ ll. Take this Foreground color and I ’ ll, take this background color and I can use another tool this one That I often use is called Lea. Verou: ’ s, Color Contrast Checker, so I ’. Ll also include a Link to this down in the show notes, And then we can just drop in our foreground.

And that background color, and we can see that the contrast ratio of these two is 3.6 So its not quite where we want to be for smaller text Again, we want to bump that up to about 4.5. So this is an area where I know that I need To go back, and since I also have some of these elements right here that are even lighter, And since I know that this is pure white text – and I can ’ t make it any brighter, my only Real option here would be to make this header bar a darker blue, so that all three of those Links pop a bit more Another thing that we might notice in our Tool, if we step through some of the options, is that we also have areas down here like This little sub-heading, which we ’ ve, got a kind of subtle, grey on white thing, going On and again we can take that into Lea Verou: ’ s, Color Checker and we can figure out.

You know, Are we on the bubble One option if we want, we can make the text Bigger so we can maybe hit 3.0 contrast ratio That ’ s one option we just make the text Sort of larger, if we ’ re on the bubble Or we darken the foreground text because The background is pure white, so we can. ’ t really make the background any lighter, So we can go through and we can work through. Our CSS and tune those colors up and that ’ s really what a tool like aXe is doing It.

’ s actually, looking at the CSS values, For background and foreground, But there are some situations where a tool Like the aXe inspector is not going to be able to tell us if we have contrast issues And that ’ s in situations where we don ’ t have clearly defined foreground background. Colors So, for instance, over here on the right, I ’ ve, Also got this advertisement, and these are pretty common, where you have some text over An image background and the text itself might even be an image right So for a tool like aXe.

It can ’ t pick out. Two distinct foreground background colors, so we ’ re going to need to use another tool. To figure out, if we have contrast issues over here, So the tool that I like to use is the WCAG 2.0 Color Contrast Analyzer, It ’ s, another Chrome extension and I ’ m. Going to warn you, it ’ s a little bit buggy, but I ’ m going to walk you through how I Use it and maybe point out some of the issues, so you can work around those, But basically what we do here is after we ’ ve.

Installed the extension we ’ ve got this extension up here in the top right click. On that, What I found to be sort of an issue here is On retina monitors, if you try to tell it to analyze a region and you select a region, It ’ ll, be sort of off Like it sort of zooms in and it doesn. ’ t. Seem to be able to handle retina that well, So, instead, I ’ ll tell it to capture visible Content And what this is going to do, you can see That it ’ s already sort of zoomed in what this is going to do.

Is it ’ s going to try To scan all the pixels on the page and it ’ ll highlight the contrast between that pixel And the ones next to it, So you can pick out those areas that have Low contrast, While it ’ s scanning, so it will take a while Right, it ’ s, only up to 27 %. So far, so I can walk through some of these settings for You, though, So the first one here is asking us what level We ’ re measuring at So again.

I mentioned that we have the minimum Contrast ratio of 4.5:1 or we can take it all the way up to the enhanced contrast ratio. Of 7:1 right So again you can choose your target there. Then there ’ s. Also this pixel radius option And at first I wasn, ’ t quite sure what this was for by default, it ’ s set to one. So it ’ s. Going to compare the two pixels next to each other, but it goes all the way up to 3 Often times when we ’ re working with text.

On the page, it ’ s, not a clearly defined. The text ends here and the page starts here. Instead, it ’ ll, do a sort of anti-aliasing Thing So if we go and we look at the image of our Text this D: here it ’ s, actually sort of three colors. So we ’ ve got a couple greys and then the Solid white and that ’ s, what forms the body of that character When it ’ s, asking us what pixel radius that We want to use it.

’ s, basically asking us what sort of anti-aliasing range do you want? To accommodate, for So what I do is I tend to set it to 2. That way I can analyze a couple pixels next To each other, Alright cool, so it looks like it just finished. And what it ’ s doing here? Is it ’ s drawing these white outlines to show us areas of high Contrast And any place where it gets sort of noisy Kind of like right in here we can tell that we have slightly lower contrast If we go over and we look at that ad, we can See that yeah we definitely have some issues here So up at the top, where it says developer.

Friendly, it seems like it: ’ s, doing ok.. We can toggle this mask on and off. So when We hide it. We can see that when we get to the body text inside of this ad, it actually Is even more translucent than the header and when we get down to the bottom and it Mixes with that background, it ’ s, really really tough to see. So this is an area where we know we might Have to go back to the designer and say “ Hey, I can show you this and I can definitively Prove that there is a contrast issue here, and this is a place where we need to maybe Tune it up Either give the text a backing, so it pops A little more or figure out if we can use a different background image, something that Doesn, ’ t interfere with the text as much ” So yeah using these tools and using a guide.

Like OATMEAL, you can, through you, can analyze the contrast for your site or application. Maybe look for problem areas tune. It up make sure users have a better experience That about covers it for today. So if you Have any questions for me, as always, you can leave them down below in the comments Or hit me up on a social network of your choosing, As always. Thank you so much for reading. And I ’ ll see you next time.

If you want to learn more about color contrast, We ’ ve got some additional articles. You can check out in our playlist Again thanks for reading and I ’ ll see You next time,


 

Categories
Online Marketing

How I do an accessibility check — A11ycasts #11

So today I thought it’d be fun to go through my process for doing a simple accessibility audit a lot of times I have teammates or even like third party partners who reach out and they say hey. You know. I’ve got this site that I built, I’m not deeply familiar with accessibility, so can you give it just a once-over, and let me know if there’s any sort of like major gotchas I should be looking out for so I wanted to cover my process today.

This is not, you know, an exhaustive review or anything, but this is generally the stuff that you can do to find some obvious high level issues. So, if all the way over here to my laptop, usually the first thing that I do on any website, I’m going to use webbing as an example here, webbing is an awesome site for web accessibility. Usually one of the first things I do one on any web site is: I want to ensure that I can navigate using the tab key on my keyboard and that there are discernible focus styles, as I move around the page, so in the case of webbing, if I start tabbing through here, you’ll, actually see the first thing that it does the very first time I hit tab.

I get this thing called a skip link up here in the top left hand, corner skip links are super useful. You know on sites where you might have heavy navigation. You want to let the user skip immediately down to the main content, so webaim implements the skip link. Some other sites, like github, have skip links. If you actually go to github and hit tab, you might notice, it says, like you know, jump to your repositories or whatever so skip link is kind of a cool thing to look out for, but then, as I’m tabbing around the page, I want to make sure That I see a focus ring on different elements on the page now web aim actually does a cool thing here, where they animate their focus ring.

So you can even see it moving across the screen, which is pretty cool. They highlight their focus States. This is, you know, just about the best link, a tab focus behavior. I think I’ve ever seen really, but I just tab through the site, and I make sure that you know I can reach everything that is interactive using the tab key on my keyboard right. So that’s step one tab through your experience, so the other thing that I like to look out for is, as I’m tabbing around the page.

I want to make sure that there’s no off-screen content that can accidentally be focused so follow me over here. I’ve got this. This material design, Lite sort of like template site that the the team has created and notice that it has this sort of like sidebar over here and, as I’m focus moves into that sidebar right now. Let’s say I shrink the page a little bit right. So it’s totally possible that someone could have their browser this size on their desktop and let’s try it and tap through this now.

So I tab through this write. My focus is over here on the top left or sorry top right in that search field. Now it’s on that button. Now, as I’m pressing tab, though we don’t see the focus indicator, it’s as if it has disappeared and we keep tapping, we keep chatting and eventually it’s going to show back up. Ah did you see it down here at this? Like read more button, so what was going on there? Well, if we expand again, we can see that actually, what was happening was focus was sort of hidden in these off-screen fields was over here in our side nav, and so I see this on a lot of websites, and this can trip up.

You know anybody who’s using a keyboard to navigate and I can come trip up mobile screen readers because you have something off screen, but it’s still in the tab, water, it’s still focusable, so a screen reader might travel into those off screen elements. You know you might have dialogues off screen, you might have side nav off screen and you don’t actually want the user to be clicking on those during that current state.

So that’s another thing that I look out for. I want to make sure that people are disabling off, screen, interactive content, making sure it’s removed from the tab order. The next thing that I look for is I want to make sure that I can do kind of like a simple navigation of the page using a screen reader, so for this demo, I’m going to use the shop app by the polymer team. This is a pretty cool site that I work with that team, a lot to try and make sure that this was a good, accessible experience.

So, in the previous few episodes we covered how to use NVDA, we covered how to use voiceover on a Mac. I really recommend all web developers familiarize themselves with the basics of at least one screen reader just so they can quickly move through a page kind of like what we were doing with the tab key – and this is just sort of like a sanity check to make Sure the screen reader can actually like land on controls and they’re, announcing things that they should.

So let me turn on voiceover and all kind of like move through this page quickly, to show you what I mean by that all right. So I’m just going to use the vo Keys to kind of like quickly move through some interactive stuff visit, link, home link, shopping, cart, zero items, link where link ladies outerwear link men’s t-shirt. I might you know, try and move down to like Lane section. I want to land on an image right.

I want to make sure that that image has alt text. That’s really important a lot of websites, especially like e-commerce sites and things like that, you’ll move through and because they haven’t provided alt text for any of the images it’ll oftentimes just read like the file name for an image. So that’s another thing that I often look out for as and as I’m going through, this phase, you know, did the the person building the site use proper, alt attributes.

I also want to make sure that if there are custom controls like buttons and things like that, that have been implemented using either custom elements or using like divs with a bunch of JavaScript, that those are interactive with a screen reader. Okay, so we’re on this drop down, it says size collapsed, pop-up button. Let’s try and use voiceover to interact with this, so I’ll click on it. Okay, it’s reading me the number of items, and now I want to use just like my regular arrow keys to move around inside of this control.

So up down right, left right things like that, so go down to extra-large, hit inner right. Okay! That’s something that I look for right. Any custom control is working as I would expect with the keyboard. The other thing I know about this site is when I add something to the cart. It’s going to sort of add like a little sort of a like modal pop-up type thing that’ll show up on screen, and so I want to make sure that the screen reader user is notified of that, possibly by moving their focus into that item.

So let’s do that item added to the cart added to cart for items interact without it took our view. Cart, don’t close dialogue voiceover off, so you can see that when the item was added to the cart, the screen reader focus was directed into that thing. That just slid out on screen, so I know the way the polymer team is doing this, if I recall, is they’ve got something in there with the tabindex of negative 1 and they’re, focusing that element just to direct our focus.

So that’s another thing that I read out for making sure if, if something is being dynamically added to the page, that focus is directed to it. So that’s a quick pass that we can do with the with screen reader. The next thing that I do is I try and check the page structure, so I wan na make sure that the page is using appropriate headings and that there are appropriate, landmark roles or landmark elements on the page, because those help with screen reader navigation as well.

So, let’s look at something like Wikipedia which does a really good job of this. So I’ll turn my screen reader voiceover on Google and what I often do is I just opened the the rotor inside of voiceover in NVDA. There’s the. I think it’s called the web elements thing. I think we showed it off in the last episode. Basically, it’ll give you kind of an outline of the page in voiceover. You can open it by using a ctrl, alt or a control option you and just hitting, left and right to menu all right.

So we can see all the headings on the page. We can see that they’re doing a really good job of using. You know. H1. H2, h3, going all the way through the hierarchy of headings they’re, not just mixing and matching H tags based on like the size that they are, which I see a lot of developers do, which can generate kind of like a broken document outline for the screen reader. I want to make sure that when they’re using heading tags they’re using it to basically build the skeleton of the page, so you know we can right move through this content in a sort of a logical way.

So if I wanted to jump down to this, the section I can easily do so. The other thing that I look for again is is landmark elements. So, let’s, let’s go back and look at webbing, so webbing does a really good job of using landmark elements on their site. So again I open my web Roder. I look for landmarks and here we can see that there’s things like banner navigation search main. So if I wanted to bypass all the navigation and get right to the main content, I can do that right.

So that’s another thing I look for you know there are sites out there, which really don’t include many landmark elements at all and again, that’s sort of an efficiency feature that you can very easily add in use, use main tags, use, nav tag or use like you Know, role attributes to create those landmarks, somebody users who use screen readers can, you know, just navigate around a lot faster fashion, so that covers a focus that covers basics of screen, readers that covers headings and landmarks.

The next thing I check for is color and contrast. I want to make sure that you know if someone who might have a low vision impairment, it’s going to be able to discern the text on the page. So again, you know looking at a site like material design lite. This is a really attractive website, but there are areas where I think some of the texts could be a little low contrast and maybe a little difficult to read.

So there’s a really great Chrome extension that you can install on the Chrome Web Store. We can look for axe extension, so acts like a like a chopping axe right, so this is by DQ systems, and basically this is a simple extension that you can add to Chrome, which will sort of run an audit against the page and flag. A number of accessibility issues, but one of those is color and contrast. So on this site I can just open my dev tools after I’ve installed that audit.

You can see it’s right here in my dev tools panel, there’s this big analyze button. So I click on that and it goes through. It looks at the page and can tell me right here that there are some elements which need better contrast. So I click on that and it’ll actually give me kind of like a path to reach that element in CSS. I can actually even click on it and it’ll highlight that element in the dev tools for me.

So, in this case, for instance, this might be a little hard to see, but maybe I’ll try and boost the page. But you can tell that uh that these footer links down here right where it says right under this github logo, wears like web starter kit and help. These are low contrast texts that the audit has highlighted for me. So that’s something that we can read out for. There’s another extension: the let’s see the the chrome, accessibility, dev tools extension here we go so we’ll include a link to this as well.

It does very similar stuff to the axe extension, but one of the nice things that this extension does is when you highlight something that is low. Contrast it’ll actually give you a color suggestion, so it could be like you know. Maybe if you make the links, you know this different hex value you’ll be able to meet the what tag minimum. So, let’s see if we actually highlight these guys right here and then our dev tools, I’m going to go to where it says, accessibility, properties and see right here, lists this warning for contrast, ratio and I can actually click these color values.

And it’s very subtle, because this one’s actually like almost perfect – it’s not quite clicking these little sreades will actually change the text. Value on sites and it’ll apply an inline style for you, and that way you can see. You know what a better alternative color would be. The last thing that I try to do after I’ve done all of this is I try to recommend that you know whoever is building this site, integrate some excessive regression testing into their build process.

Again, if we go to github and we look up acts core, so this is the library that powers that axe extension, but you can also use this library as part of your build process right. So, as you’re running your automated tests, you can have a sample page. You can have axe core, look at that page and flag in accessibility audits, and you know those could then call your tests to fail. At which point you know you got to go back and you got to fix those issues.

Okay, so we we’ve covered a lot, but this is basically how I do my accessibility audits, it’s by no means exhaustive, but on many of the websites out there. This is how you’ll catch some of the major issues that folks need to work on. That can take their experience from totally broken to. You know at least sort of like a decent baseline experience for folks. If you have any questions, as always, you can leave them for me down in the comments.

Otherwise, you can contact me on a social network of your choosing, as always thank you so much for reading so yep hey. If you enjoyed this episode of alley cat, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog, as always, thanks for reading


 

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.