Hello, do you hear me? Hello. So I'm a father working for a console in Munich in Germany. And today I'm going to talk to you about how to implement tail minus F, which is actually part of. It was a hobby project of mine. So I wanted to monitor some system. And I needed to parse some log lines. And so I sat down one evening and thought, yeah, I need some functionality to read new log lines written to a file and some other functionality to parse the data and extract some meaningful metrics out of that. And initially when I started, I thought it would be like 15 minutes to just have a small tool to read lines written to a log file. And it turned out that it is actually much more complex than I initially thought. And so I want to share with you the experiences I made. When you start, you need some functionality that reads log lines while they are added to a file. Especially if you don't use Go every day, maybe you start by just googling how to read a file line by line in Go. And if you Google stuff like that, you would find a piece of code like this. Like you open a file and create a buffed I own new reader. And then you read it line by line. And in that case, you just print it to the standard output. So this is obviously more like a CAD functionality. So it just dumps the line to standard out. And then it terminates. So how would we go from this example to some kind of tail minus F functionality? Of course, the thing is here, very exit or loop reading lines. What we need to know is that when we read a line and we hit the end of the file, then the end of file is actually returned as some kind of error. So in that case, when we get an error and handle it, we need to make some distinction. So if this error is just the end of file error, then we probably sleep a second and then try again. And only if it's an other error, we can terminate the program because something weird happened. So that's as easy as I thought it would be, but it doesn't really work. I can show you how. I have here a small log file with two lines in that. And I have the code that I just showed you. And if I say go run tail.go, it kind of works, prints the line to standard out. So if I echo date and hello, force them, for example, to this log file, it also works. The new line appears here, works again. But the problem is with log files, usually you have a tool called log rotate. And so you don't want to have your log files grow infinitely. And so usually, once per night, log rotate comes, moves your current log file into an archive, and creates a new log file for the next day. So what happens if I do this here? Move file log to some file log.1, for example. And then I write my next line to a new log file. So I have a new log file here now with my next line. And this is the archive. And this tool here still reads from the old file that was actually moved. So if you are into Linux and file systems, it's probably not too surprising. So you open the file, and then it has an open file handle. And the open file handle points to the data on the disk. So even if you rename the file or close it, and even if you remove it, the file handle still points to the data on the disk. And you're still reading the same data. So there's no way for this kind of tool to know that your file was actually moved or a new file under the same name was created or something, right? So what do we need to do to deal with that? First of all, quick introduction to log rotate. It's actually pretty simple, but there are two configurations, one that I just showed you, that would move the file away and create a new one for the next day. And there's an alternative configuration which would copy the file to an archive and then truncate the original file. So it sets the size of the original file to 0. So the difference is that here the file is actually deleted. And here it just remains there. It's just truncated. So but I wanted to support both configurations because you never know how somebody configures log rotate, right? So if you want to extend our program so that it can deal with these things, what we need to do is like here where we wait a second and then try again if there are new lines. We somehow need to check if the file was truncated. We need to check it if it was moved. And if it was moved, we close it and open it again so that we make sure that our tool points to the correct file that we actually want to monitor. How do you do these things? It's actually quite simple. So there is this stat system call that gives you the size of the file. And with the current size and your current read position, you can know if it was truncated or not. And in order to check if the file was moved, there is a pretty handy function in the goes OS package. It's called os.samefile. And this gives you true if it's the same file and false if it's not the same file. So in Linux, it's probably compares iNodes which represent the file uniquely on disk and on Windows it does other things, but it works, right? So, and if we put all this into our solution, we come up with something that actually works and that's also implemented in some tools. For example, maybe you know this, there's a tool called FileBeat. It comes from Elasticsearch.  They are called Beats. And these Beats are used to take data and transport it to an Elasticsearch cluster to index it there. And there's also a FileBeat that would be used to index log data in an Elasticsearch cluster. And that's implemented exactly the way that I just showed you, right? Actually, I mean, it works. It's reasonable, you understand what it's doing, but I thought it's not really satisfying because you still have this like one second sleep somewhere in the code, right? And you'd never know, I mean, is one second a good value or why don't you sleep like 100 milliseconds or 10 seconds or something? And actually the FileBeat by Elasticsearch, they don't have a fixed value that they just leave the configuration to the user. So you configure an initial sleep interval between the poles and then if nothing happens on the file system, you configure how much the sleep interval increases and then you have some maximum sleep interval and stuff and you need to configure all these things and I guess most users don't really know what to put there. And so I researched a bit and thought, can we somehow get rid of this polling loop, right? And if you research for that, you probably come across about this little package here, it's FS-Nodify, File System Notification Library. It's also used by some similar tools. So if you start doing this, you find out that there are a lot of file tailors around. There's one by HP, for example, it's called Tail and it uses FS-Nodify. There's also one by Google called MTate doing a similar functionality and what FS-Nodify does is it uses like every operating system has some kind of functionality so that you can subscribe to file system events. So your program is notified when something on the file system happens and FS-Nodify is a library that gives you these events, like operating system independently whenever you're subscribed to some directory, right?  And the events are like this, like create, some file was created, right, is when somebody wrote something to a file, remove is when somebody removed the file and changed mode when like add file attributes have been changed and so on. This looks exactly like what we need to do. I mean, we don't have this nasty poll loop and we don't need to configure anything and we could just sleep forever and once a log file is written, we get it immediately. However, there are some subtle problems with this FS-Nodify library. In order to understand these problems, you actually need to know what it's doing underneath. What is this operating system infrastructure that FS-Nodify uses to implement its functionality and on Linux, it's called i-Nodify. So that's the Linux system call that you can use to subscribe for events in a directory on a file system, right? And this table here is just for an overview so these events on the left is what actually comes out of the Linux i-Nodify call and the events on the right are what it's mapped to in the FS-Nodify library, right? Interestingly, if a file is truncated with this other log rotate configuration, the truncation triggers an i-N-Modify event in i-Nodify which is mapped to a write event in FS-Nodify, right? And one important thing to note is FS-Nodify watches not a single file, it watches a directory. So you subscribe to the directory where the log file is located and then even if it's moved, a new one is created and so you get events for everything that happens in this directory. Another system, BSD, like for example, MacBook here. You don't have Linux, you don't have the i-Nodify event on BSD, there's something similar. It's called K-Event. This is what FS-Nodify uses there. It also generates some types of events. Interestingly, when the file is truncated, it generates an attribute change event which is mapped to change mod in FS-Nodify. So you have kind of different events in FS-Nodify when the file is truncated. And the other interesting thing is K-Event does not support recursive directory watches. So what happens is it kind of simulates this. So underneath, it subscribes the directory where the log file is created, is located and when the file is removed and a new file is created, it gets the create event from the directory and then immediately it subscribes to the new created file so that you get write events when somebody writes lines to this file, right? But there's a small time gap between that. So if the log file is created and immediately after that the first log line is written, then you might miss these first write events because there's a small time gap between the file being created and FS-Nodify having subscribed the new file, right? On BSD. And the problem is that these subtle differences, these subtle operating system-specific things are not really well documented. And also FS-Nodify doesn't claim to be a complete solution. It just claims to be an experimental package or something and so in order to really use it and understand it and get rid of all these errors, you need really aggressive testing because you need some test that does a situation like that. I mean, in order to figure out that there's something wrong and you also need to read about the actual system points to understand what's going on. And so I thought, I mean, the functionality that I really need is a lot less than FS-Nodify actually does because I don't want any kinds of file system events. I just want to know if there was a log line written or not and I'd need to understand the underlying file system points any way to figure out what these subtle differences are. And so what I ended up with instead of having my file system events and then being them mapped to FS-Nodify events and then I have some code working around differences between operating systems, I just used the underlying operating system points directly, right? And it turns out that this is actually much more easy than I thought it would be. So both are structured in a similar way. I mean, the whole thing works for Windows as well. Windows also has some system calls. I just used BSD and Linux here as an example. So you have an initialization phase where you just initialize your watcher, watching for file system events and then you start some kind of producer loop so you start some go routine that runs in an infinite loop. And on both systems this initialization gives you some kind of file descriptor where you can read the events, right? And you read them on Linux with the regular read system call on BSD with some special K event system call. Then you figure out if the event has anything to do with new log lines written to the log file and if so, you just can provide the new log line to some kind of output channel. And then you have like this piece of code as some kind of operating system specific producer giving you an output channel where you can read the new log lines and the rest of your code is then operating system independent consumer subscribing this output channel and just doing whatever it wants to do with the log data. So this is basically the solution I came up with and it's generally like a lesson learned so if you want to interact with your operating system it's sometimes much more easy to read what the operating system does instead of being afraid and looking for some abstract libraries or so. There's little subtle more thing that I then added if you want to just keep your Taylor running until your program terminates you could actually finish here but if you want to have some clean shutdown so maybe you want to make it into a library and you also want to have a shutdown function in a library so that it can stop tailing this log file you need to somehow find a way to stop this producer loop, right? And stopping this producer loop is the critical parts are the two blocking calls here it's the first one that you read from the file descriptor because this read just blocks until an event happens and so if you want to shut it down but it reads there you need to find a way to interrupt this read and the second place that's blocking is when you have log data and you want to provide it to the output channel but you want to shut that thing down and nobody reads from the output channel anymore you have to find a way to interrupt this and it's actually interrupting this read here is quite easy you just have to read the documentation of this file system not to watch us because on all systems there is some method to unsubscribe the directory that you are watching and once you unsubscribe it it triggers an artificial unsubscribe file system event and this will terminate your read and then you know you can get out of your read loop here so you read and then you say if this read returned some kind of unsubscribe file system event you know that you have been interrupted and you return so that's how you can get out of this read system call last thing I want to show you how can you get out of this writing to the output channel thing this has nothing to do with file systems or anything it's just a standard go thing I think but it's still if you do it the first time it's a bit tricky to figure it out what you do is instead of just writing to the output channel you have a second channel which is called done and yeah once this so and within a select loop you write to the output channel and read from the done channel at the same time and once the done channel is closed reading from the done channel will return immediately and then you know that somebody closed the done channel it means yeah you're kind of signaled to terminate the producer loop right so this is you find a lot of these examples but for some reason you never find examples where you write to a channel and read from a channel in the same select statement so you find a lot of examples where you read from multiple channels but it's also possible to mix writes and reach in the select right and that's what you need to have a safe way out of such a producer loop so that's basically my final solution so if you are just interested in looking at the running code you can just take out this little monitoring tool for log data there's a package called tailor that just contains the code that I just showed you yeah so lessons learned I guess don't be too afraid of using system called directly there tend to be much better documented than some experimental libraries and it's also the lines of code you need operating system specific are not so many after all and yeah so thank you very much for listening um... I think maybe I even have two minutes or so for questions is there a question okay thanks oh yeah network file systems on network file systems uh... as he says if I notify on Linux works on network file systems but I'm not sure either I didn't try I just run it on run it on a local file system yeah okay thank you


Hello everybody. Welcome to the second talk in this in track two. It's right here. Yeah. Jen Harris is a WordPress developer specializing in helping clients solve and prevent WordPress problems. She works with a wide range of website clients from multi-million dollar companies to solopreneurs maintaining WordPress sites with care plans, helping them with website accessibility. Her talk today introduction to is introduction to web accessibility. So everybody give Jen a warm welcome. Technology. Come on. There we go. Excellent. Alright, so I like to do a little bit of audience participation. It is of course voluntary. But if you want to volunteer yourself to participate, put your hand in the air. Most of it is in fact putting your hand in the air. Come on. Let's go. Hands up. Thank you. Alright. Today's topic is introduction to accessibility. Maybe. Technology. Okay. We're gonna go this way apparently. I'm Jen. I started my career as a software developer at Boeing working on the V1 bomber project. And one of the interesting things about my time at Boeing was I didn't end up on one team. I ended up on all the teams. I was in test. I was in development. I worked in prototyping. I worked on trying to literally create new systems to solve problems. I worked with the requirements team. And I worked in specifications. So what I ended up doing most of the time was what's frequently called glue work was I looked for and found problems and then looked for and found solutions. So finding and fixing messes kind of became my thing. And if you've never heard of glue work before, there is this really great presentation. No idea dot dog slash glue. It's one of those URLs you just can't forget after you learned it. Then after Boeing, I got involved in WordPress. And I have been involved with WordPress for over a decade. And I've worked on literally over 1000 websites during my career. I've done everything from new builds, remodels, e-commerce, learning, membership, security work. And now I've gotten quite a bit into accessibility work. So I started getting into accessibility about the end of 2019, which was great because COVID happened in 2020 and everything went online. And accessibility really started getting pushed forward a lot because everyone needed to be able to access everything regardless of their abilities. And since I have become frustrated with the lack of a number of available tools for accessibility, I decided to go solve that problem too. And so I have started working on building accessibility tools. And because that's not enough to do, I also organized the Baltimore WordPress meetup. And we are online on Zoom for all of our meetups, including our very fun Ask Me Anything where I literally let you ask me anything WordPress on Zoom live answered. So you can patch us on meetup.com and just look for Baltimore WordPress. Quick disclaimer before we get into accessibility because this is an area of many legal cases. This is general information. I'm not a lawyer. This is not legal advice. Now that we've covered that, I'm going to go over the definition of it, the laws, what it is and how to get started. So before we get too far into it, who's actually heard of accessibility? Excellent. Who is still mostly clueless about it? Good. So the first definition is WCAG or Web Content Accessibility Guidelines. So just like HTML, HTML5, which you've probably heard of, those are standards.  And those standards are maintained by W3C, the World Wide Web Consortium. And just like HTML is versioned, these accessibility guidelines are versioned. We have version two, which is what we are currently working on, specifically we are on version 2.1. And within these guidelines, we have levels. And basically, it's how hard it is. Level A is a shorter list of requirements. And these are considered basically the bare minimum. Level AA includes everything from level A plus an additional set of requirements. And this is basically what's been considered the standard. Then there is AAA, which is really above and beyond and very, very few websites even attempt AAA. It's hard. Alley. A11Y. This is the abbreviation for accessibility. What it means is between A and Y, we remove 11 letters. This is just like how I18N stands for internationalization. Because no one wants to spell that out. The next definition is something called an overlay widget, which you will frequently hear talked about with regard to accessibility. This is basically a technology that exists between the website and the user. So it's a lot like a browser plugin. You've probably added various extensions maybe to Chrome or if you use Brave, Safari, Mozilla, all these different browsers have various extensions that you can add to customize the experience. And if you've installed enough of them, you've probably broken webpages before. Maybe who's broken a web page before. Excellent. What happens is these overlay tools act very much like the extensions. And they can have many unintended side effects and break things out a little bit about laws. And this is specific to the US because we're in New Jersey. The ADA is the Americans with Disabilities Act. It was passed in 1990. And it applies to places of public accommodation. Now, if anyone actually remembers 1990, the internet was not public. Most people didn't really hear about the internet until about 95 with AOL or American online. Right? Who's who's with me on that? Yep. Okay. So the ADA says zilch zero, nothing about websites because they weren't public. There were only a very tiny number of research places, government institutions, a few academic institutions that had anything. So it has become a mess. The Department of Justice is in charge of what is called rulemaking. So in physical places, like these physical buildings, we have things like a wheelchair ramp. And the Department of Justice has gone in and said, if you have a wheelchair ramp, the angle must be between A and B. If it is outside of A to B, it's wrong. If it's within A to B, congratulations, you passed. In order for someone to say that you fail, they have to prove that you are outside of the allowed range. So it's very easy. You can go to a general contractor, you can have them build something that's ADA compliant, because they can specifically say I checked off all of these boxes, it meets all the rules done. The Department of Justice has made words saying that they might do this for online accessibility. And then it has been crickets. Absolutely nothing. They haven't actually made any rules. So it's a mess. However, there is something called Section 508. This is a federal law, and it applies to federal organizations. And it applies to federal websites. So if you go to White House dot go, that's a federal website. Therefore, Section 508 applies to it. And Section 508 has what we're looking for that specific checklist of things. So it can say yes, we passed. In order to get upset, or to file a grievance about it, you have to show which item on the checklist it failed. Hopefully at some point, this will happen for the rest of the internet. But at the moment, it is only for federal websites. Now, New York and New York City specifically have their own laws. I'm not going to get into the details of them. But this big trend that has been happening coming out of New York City is that websites and about 80% of the websites that they are suing are e-commerce. These websites are being sued by people in New York City, in New York City courts. And these are websites that are in Iowa, California, Texas, all over the country. These people there are basically doing this opportunistic lawsuit, trying to go after what is considered an easy target. Think of it kind of like speed traps on the highway. If you're flowing with all the main traffic, you're not really an easy target for the cops. But if you're that one guy speeding down the left lane or swerving around, you stand out like a sore thumb.  So what they do is they get a whole pile of things from various different sources. And then they go through the list. And they say, uh, it's okay. It's okay. It's okay. Oh, it's a mess. Let's go after this one. So they go after that. So now that we're done with kind of the legal stuff, let's get into what accessibility is. So who here has ever been to a website and it didn't work the way you expected? Right. That pretty much is what website accessibility is. It's you go somewhere and it doesn't work how you expect it to. And by conforming with these accessibility guidelines, conforming with WCAG, you actually make things more predictable and easier for people to use. Because regardless of your ability, the biggest complaint is always it doesn't meet my expectations. Let's talk about those expectations. Who here has been to a website and there was this little tiny text in like light gray on a white background at the bottom? Yeah. And who could actually read it? Basically no one. So, you know, our expectation is that when we arrive at a website, we can read the text. It's not some crazy curly font. You've seen those before you're like, no, I have no idea what you wrote on this page. None no clue whatsoever. Next expectation is that I can find links. So tell me quickly, what color is a link? Thank you. So what happens if there's a whole lot of blue everywhere? Everything's a link. Exactly.  Wait, it doesn't work. And now the website has not met my expectations. I'm frustrated and I leave. The next thing is videos have caption. Did you know that the vast majority of the younger generation people in like the 10 to 30 range use captions on just about everything? So Netflix actually published a study of their own user base because they know whether people click captions on or not. It is huge. Over 80% of Netflix users are running captions almost all the time. So people want captions, but there's also a bit of the older generation who hates them. So they want the choice. They want the ability to choose the ability to set things up to their own preferences, and use things in the way that serves them best. Who's ever been to a website and there was like a bouncing video on the right. And exactly what did you do? You wanted to leave, right? Okay, so stopping unwanted moving content. Big deal. And one of the WCAG guidelines. And who's got, you know, one of these and actually search surfs the web with it? Everyone? Yeah, you want your put your page to work on a phone. You want it to work outside in bright daylight. So if you're outside in bright daylight trying to use your phone, you actually have pretty similar vision to someone with glaucoma. So if we make a website that suits people at everyday people using their phone outside, we also help people with glaucoma. So it's not just about trying to find these these little small groups, it's about trying to help lots of people. Order of elements. Nice logical orders of elements. And that also helps your SEO, you know, good clean page structure, tell search engines what your content is. It's like having a good table of contents for a document. People can actually find contact information. Who's been trying to go to a business and you cannot for the life of you find the contact information. Exactly. Buttons are consistent and do things consistently. You know, you've got you've been to the website and you're like, Wait, I don't.  There's a whole lot of squares here. menus are easy to navigate.  Form fields have labels. Who's ever started to fill out a form and then been interrupted by something in life. Then you go back to the form. And if there aren't labels and everything, you're like, No idea. No idea what I was doing. And clear error messages ever been to a form and you're like, I click submit. Nothing happened. What's going on? And colors are logical. While you shouldn't use color alone to tell what something is. Most of the color blindness is red green. It is roughly 10% of men, roughly 1% of women. You should use logical colors. So let's take a look at this. What is your first instinct when you see today's payment in red? Yeah, it's it's bad. You're like, Oh, no, orange and red.  Oh God. Well, actually, everything's okay, because the payment is due in July and it's June. But do you God, I panicked for a minute. It's like, it's overdue. It's overdue. No. Um, and then over here, speaking of the blue, I had first clicked to the WordPress 20th website from email that went out to WordPress Meetup organizers, if I organize Baltimore.  I'm like, Oh, this is bad. So not my most polite email ever. I replied to them. And you know what, about six hours later, the website was not blue. I also posted on one of my groups on Facebook for there's a WordPress accessibility group on Facebook. It's a great group, fantastic people who run it. And a bunch of them also emailed. So I think they just got like a whole inbox flooding. And yes, we got change. Let's talk a little bit about types of disabilities. So there's three types of disabilities, temporary, situational and permanent. And something that just about everyone is going to experience is temporary. Who here has ever had an injury? Okay, most people have had some sort of injury.  Okay, well, now I have an injured thumb. And this is my mousing hand. Okay, okay, I'm gonna try a mouse with with my left hand now. Okay, this is hard.  But if you go with large tap targets that are easy for many people, you just help the person who jammed up their thumb. And you also help the person with multiple sclerosis. You help both people by doing the same thing.  Ever noticed how your tension span is just a little bit shorter when you have a headache? And it's just a little harder to find what you're looking for? Well, you have a temporary disability. And the same thing that helps you help someone with ADHD. It helps people with all sorts of issues. It just makes it easier. Lots of things like medication side effects, those can impair you. Substances, lots of people, you know, have a glass of wine in the evening, you are slightly impaired after that. Things, you know, not quite as easy, you don't have quite as much dexterity.  You know, these are temporary disabilities. But most people are going to experience these basically every single month, you know, at least at some point in the month, I get a headache, right?  That's at least once a month. And yes, I do take, take out my phone and try to use the internet while doing that with varied success. But you know, these are things that happen to real people all the time. The next one is a situational disability. Who here has ever pushed a shopping cart? Come on, a couple of more people push the shopping cart. Okay. So you have this wheeled vehicle that you're now kind of driving around. And there's a curb between, you know, the store and the parking lot. Well, you got to specifically steer towards those curb cuts, because you know, a six inch drop, when you just bought eggs, it's not a good thing. It's just not good. Don't do that to the eggs. But this is a situational disability.  And you can't have anything with audio playing on your computer. You can't hear a darn thing. There's noise everywhere. So you can't hear. Basically. So that's a situational disability. And as we talked about before, bright sunlight, being in a moving vehicle, you are not going to be using that phone for very long in a moving vehicle before you get nauseous. So most people are going to be encountering situational disabilities, at least monthly, and plenty of people, you know, people commuting in on trains and buses, all sorts of people are going to encounter this literally every day. The next type of disability are permanent disabilities. And these count as both not counted and counted. So there's about 27% of the adult US population, and about 40% of those over 65 who have a permanent counted disability.  Over 60% of adults have prescription eyeglasses. But they're not counted. 60 is a whole lot more than 27%. They're not counted. But if you know, they take off their glasses, they're squinting at the computer screen trying to read it. Guess what? They have poor vision. The same thing that helps them help someone who's actually legally blind. And in the counted group. Lots of people have something. I have an issue with my hands. I can't use a mouse. No mice. I actually have a tablet on my desktop, and it has a pen. And I literally grab the pen without using my thumb. And I'm very accurate with it. I can tap I'm actually faster than most people with a mouse. But because it's not actually a mouse, it doesn't have a scroll wheel on it. So if I get to a website, I just grab that bar on the right hand side and move it up and down. But if I get to a website and they style that bar to be this itty bitty super skinny thing, I'm like, okay, well, now I have to go to my keyboard and use my keyboard to navigate up and down this page. It's annoying. I don't like it makes me not like these people. But I'm, I'm in the not counted group, because it's not a big enough disability to cause a significant hampering to me doing normal activities. I can still drive a car, go around, use power tools, all the good stuff. So people who need accessibility are Joe. He's having a party, football games, blaring on the TV. He's had three beers already. He's now trying to order pizza. And of course we need pizza delivered because everyone's had at least three beers. So he's got to use his phone because he can't hear a thing with, you know, four friends yelling at the TV, everything's blurry, dogs barking next door, everything. He's got to use his phone to order it. So if it's not easy to use, it's not intuitive. He's not going to be able to make that pizza order. He's going to go to the next place that does have an easy pizza order. Or what about Susan?  And she needs to find out how late the pharmacy is open because she needs medicine because the screaming toddler has an ear infection again. You know, she has so much trouble focusing, so much trouble actually completing even a simple form and a simple thing because it's hard. Who's commuting 45 minutes on the metro every day. And he's trying to, you know, order a gift for someone trying to get in product information about it.   You got to solve them. And of course, people who are, you know, Leslie, legally blind screen reader user. So they are using assistive technology on desktop computer or on a phone because they're screen readers for phones. And, you know, they're trying to find a wedding venue. You know, they want to get married. It's not a crime, right? But they're they're trying to get information about the venue. You know, just because they're legally blind doesn't mean they are totally blind. They can still see a little bit. They can still get a little bit of information, but they need to see descriptive information about the venue so that they get a much better picture of what it looks like so they can talk to everyone else about it. So what really happens is everyone benefits from these accessibility things. So how do we implement it? Accessibility is about removing the barriers. Instead of intentionally making our buttons super small, we make them bigger. A basic plain HTML website with no CSS is accessible. The browser has done the work to make it accessible. There are lots and lots of tools out there to assist people with reading that basic HTML website. So we don't need to make the tools. We don't actually have to solve the problems. We just have to make sure that we aren't creating the problems, that we aren't adding barriers. So these sites become accessible because people don't know better. For some unknown reasons, someone thinks that baby pink on a white background for text looks good. Don't know where they got that idea, but they apparently got that idea in their head. They apparently love pastels. Unfortunately, that's just not a good combo. So they just don't know better. The next thing is a lot of developers start adding CSS. They start adding JavaScript. They start adding various types of little features and doodads to everything.   You basically started adding hurdles to the race. It's not fun. So now we talk a little bit about how we test for and how we measure that accessibility.  We all want the computer to do things for us. It's nice. So a couple of tools that do this is WebAIM has the Wave tool that is pretty much considered the standard. It's pretty much the most popular and it is used by most people as the standard. The company called DQ, which has a whole bunch of accessibility learning information online. You might want to write that down DQ. They have a tool called X. It's a little more challenging to use. You have to go watch that watch some YouTube videos about how to use it. Wave is definitely much easier to just hop in and use. Google has the Lighthouse tool. It's built into the Chrome browser. It's available on any Chromium version browser. So if you use Brave or one of the other alternatives, it's right there in the browser. You right click, go to developer tools, look for Lighthouse. Then once you've done that, that's going to be able to test roughly 30% of that whole list of criteria in WCAG 2.1 level AA. So we got this whole list of items and about 30% of them can be effectively tested using an automated tool. At least 70%. Now there are some tools. The DQ-AX tool does have what is called guided testing, which can help you test some more criteria. So basically it kind of points you at things and says go test this, but you as a human need to determine yes or no. Did it pass or fail? And then we have full-on manual testing. So the easiest kind of manual testing is to open up a website and hit the tab key on your keyboard. And tab should allow you to go between elements. And by hitting return, you should be able to select an element like a link. Buttons should also be able to be opened with the spacebar. And then you can of course do shift tab to go backwards. And this is all falls under the human testing. And I do have a link at the end of this for a basically a meetup tutorial where someone went through and did a bunch of accessibility testing on a website. So how accessible is the internet? There is a group called WebAIM. As we previously mentioned, they make the wave tool. And they tested the top 1 million home pages on the internet. And over 96% of them had a failure detectable by automated scans. So in that 30% of the criteria that we can test, they had a failure. Most of them failed 50 times on a page. And that's not 50 types of things. That's just 50 individual instances. So let's say you made your paragraph text light gray on a white background. And you have 20 paragraphs on your page. That's going to flag as 20 errors. So even though it says there's 50 errors, you could have only had two criteria that that you failed and it might be four lines of CSS to fix them. So of these errors, nearly all of them fell into six categories. And this has maintained very consistently for the past five years. The biggest problem on the internet is low contrast text, which is why I always harp on it. Because it's that that very light text on, you know, white background, dark text on a dark background. You just can't read it. The next one is missing alternative text on an image. So if there's an image and someone is using a screen reader, the screen reader will read out the alternative text if provided. Well, as you can see, over 50% of the images don't have anything. So that's not a great experience for people who can't see the screen. Next one is empty links.  It's JavaScript. People have used JavaScript to create these links. And because of the way they've coded those links, you can't get any information about the link when you're using assistive technology. The link has no info, which means that someone who's using a screen reader just hears link. That was so not helpful. Next one, missing form labels. Again, we got a whole bunch of form fields and nothing is labeled. They they use that very light gray placeholder text, which no one can read. And then as soon as you type in the field, it goes away.  So you can settle your dog down. You come back and you're like, I have no idea what this feels like. Delete the field. Okay. Read the hard to read placeholder. All right. Now type the text in and hope I don't get interrupted again. Again, empty buttons are very similar to empty links, except empty links is going to be the anchor tag or the A tag and empty buttons is going to actually refer to the button tag. So as you can see combined, that is a lot of JavaScript going on that is basically making it very, very hard for people with assistive technology to use the site. Of course, we have missing document language. For some reason, people have not yet learned how to declare their document language in their HTML tag. Should be easy, but not. And that is very helpful for people who are trying to browse a website in a second language. So for example, I do baking. So sometimes I end up on French websites to do some bread baking and I use the translate tool to, you know, translate it for me because I don't speak French or read it really except chocolate. I can read chocolate. So I just wrote out what those are. So briefly I'm going to talk about the accessibility overlays. So as we just talked about, they are a tool that lives between the website and the user. Very similar to a browser extension. And since we talked about the automated tools and that they can find 30% of the criteria, they can find this many. Even if the overlays worked absolutely perfectly, and as we know no browser extension works perfectly, how much could they actually fix? Not more than they could find. You can't fix what you can't find. The next one is they require user configuration. You have to go find the little widget, which is normally the very last thing on the page. So a user would have to literally go through every element on the page if they were using keyboard navigation. They'd go through every element on the page where they finally get to the configuration widget. Then they have to open it. Then they have to go through its settings panel and configure it. It would be very similar to wanting to walk into a grocery store and being told, oh you want the door to open automatically. Okay, well we're going to have to configure the door over here. So first you got to go over here to the side, open the panel, press three buttons, wait a moment, now the door is going to open automatically. Like no? That's not nice. So the next thing is they cause conflicts with many of the tools, just like your browser extension. Sometimes you have one on and you have the other on and they're both trying to do the same thing and the website just doesn't work anymore. So you got to open incognito where you have them both set to off and now the website works. And the other one is they just create this middle layer. So they're just getting in there and mucking about and they can actually take a website that is functioning properly and cause problems. I had built a website for blind golf Canada and I had a whole bunch of their users who are all legally blind test it. And what happened was they wanted to add this little feature widget to it. It wasn't a full-on accessibility overlay, it was a feature widget. I told them we shouldn't do this. They said do it anyway, we'll have our users test it. They had their users test it. It broke several screen readers. So it was working fine before but they thought well wouldn't it be cool to have the widget? No, no it wouldn't be. So we immediately deleted the widget, the users tested it and it worked fine. So now how you actually get started. So the first thing you can do is today start entering content better. It's an easy place to start and just start entering better content. So the first one is don't put in a whole bunch of inline styles. I have remodeled so many websites and we're in those databases trying to do massive search and replaces because there's that span style with 15 things in it on every paragraph and line item. Not fun experience. So don't cause your future self rework. Don't cause your future developer rework. Just don't bring in all that extra HTML. Goodberg does a pretty good job of stripping it out but there's also a whole bunch of websites where you can just paste stuff in and you can just use paste and match format. You just when you go to edit menu there's paste and then there's paste and match format, paste and match style. Click that one and it won't bring in all the extra content. Use proper headings. You have one h1 on a page then you have an h2. You do not then suddenly go to h6. You go to h3. If necessary you go to an h4. In actual real content I almost never see an h5 or an h6 actually needed. Make your links clear. Don't say click here 15 times on the page. Say you know WCAG 2.1 level AA guidelines. Have that be your anchor text. This is also going to help your SEO because click here not great for SEO. Have appropriate alt text on your images. Now this is a little more complicated. There's an actually an entire diagram and system on getting good alt text but at least start to think about it. Forms with labels. Most form tools by default will put in labels. Don't change it. Leave the labels. Don't add placeholder text. Just labels and don't automatically start videos or animations. Stop embedding animated gifs. Please. Especially on emails because they literally cannot be stopped on emails. So just don't. The next thing once you start just entering your content going forward a little bit better is to add an accessibility statement to your website. It literally takes about 10 minutes. The next thing is update your colors and fonts so that they can be readable. So that we're not dealing with the light gray text on the white background or the light pink or the yellow or the orange on yellow. And then make sure that you're not relying upon color alone to indicate important information. For example you have a pricing table. Make sure that it's not a green block to say yes included and a red block to say not included. Because about 10% of men are red green color blind. So a green check mark and a red X. Perfect. You didn't use color alone. Color is helpful. The people who can see color get additional benefit. But it's not color alone. Make sure that your website works with text size and zoom. So in your browser you can hit the you know command or control and plus and the whole website zooms in and gets bigger. You've ever gotten your eyes dilated by going to the eye doctor. You do this because you can't read a darn thing on the computer screen. So make sure it works with that. The next thing is you can actually set a minimum font size in your browser. So if you never again want to see you know size 10 text you can literally set size 14 as your minimum font size and all that super tiny text gets bigger. It's great. You can also set a general size preference on your text.  I just like big text. You can just say I want larger text and it will on every website that's coded properly will give you larger text. So start checking your websites for things like that. If you have a reasonably well-coded theme this is actually quite quick. If not it might be faster to change the theme. Now we start getting into more manual work stuff that takes up more time and that is adding proper alt text to images that already are on the website. And quite frankly that can take a while because alt text is context sensitive. I have a photo of a girl with a dog. Well that could mean many different things. The breed of dog may be very important. The age of the girl may be very important. That may be an entirely irrelevant. It depends on the context in which the image is used. The next thing is of course go through existing content and make sure your headings follow a logical order. And again this helps not only people but also search engines. And as a quick pro tip nearly every theme out there in the repo that is listed as accessible has issues with their heading order in their sidebars and putters. So you may need to have that corrected in your child theme. I don't know why these people can't figure out that you can't suddenly jump to an h4 or an h5 but that is not actually tested by the theme testing team under the accessibility. More manual work making sure that your videos include captions and transcripts. Again the captions are important because quite frankly lots and lots of people want them. They're also good for people who are deaf but mostly because most people want them. And transcripts because there's a whole lot of people out there who want to be able to skim through your content or who want to be able to do a find on your content. They want to go in and be like oh yeah I heard someone mentioned that presentation and it talked about this topic. It's an hour long video. I'm not watching the whole video. I just want to know about like these like three paragraphs. So they do finds in the transcript. Then you find the content you're looking for and great move on and make sure that your transcript is not hidden. Sometimes people have made transcripts and they hide it behind an inaccessible button. Well good you made a transcript unfortunately I can't actually access it because again like we saw with that links and buttons. Most of them aren't accessible. And then you can start getting into more detailed checks ensuring that your online forms have clear error messages. Making sure your website can be used with a keyboard and testing with automated tools such as wave. And then you can proceed to get to some of the more detailed WCAG criteria. In general when the courts have had an accessibility case in the U.S. the court has ordered the website to make the website compliant or pass WCAG 2.1 level AA. And there are usually an annotation saying within reason occasionally you can meet the intent of a guideline but not necessarily the letter of the guideline. You know for example when driving we can meet the intention of going with the flow of traffic even though we have technically violated the speed limit. Because if you're driven on the garden state you will be run over for driving the speed limit. And of course accessibility is an ongoing process. You continue to do SEO work. You continue to add content. You continue to make updates to your design. You continue to update plugins and themes. You do have to regularly check the accessibility to make sure nothing went pear shaped. And the more you understand people. People just like people in this room. The more you understand people the more you understand accessibility. So here's some facts about tools. There are tools for people which can pull every heading from the website and basically give them a table of contents. This can be really helpful for everyone from screen reader users to people with ADHD. This can just grab a table of contents so now they're like oh not not information overwhelm just a simple list okay i want to go there. That's great but it only works if the headings make sense. There are tools to instantly pull every link from a page. This is great unless every single link on the page says click here. And again using devices outside it's just like having poor vision. There are many people who use screen readers who can see just fine but they have cognitive or learning disabilities. There are a lot of people with dyslexia who prefer to use a screen reader because it reads everything out to them. They don't have to worry about angel or angle. Which one is it? It reads it all out to them. Many of them will actually select the text as it goes to make it even easier for the person. A bunch of people who are learning a new language a second language they will use a screen reader tool because again it highlights every single word as it says it. This is fantastic for learning a new language. And many people who have dexterity issues, arthritis, multiple sclerosis, all sorts of issues use keyboard navigation and will use voice controlled computers. So the links from this presentation are available at this website. EasyAllieGuide.com slash learn and questions. Those are two months right? Yes. Yes just like accessibility it's abbreviated as A11Y. So why is using a video that for example say you have your own page and then consider having just a simple color background. Is that a scenario where that's susceptible to have auto management video? Only if it can be stopped by the user. So only if it's user controllable. Yeah. You know there's a lot of tools now people that have kind of like slide in the place and stuff. So entrance animations basically. Would you suggest having like a link somewhere that like floats in the side that says stop all and is that the kind of. So for entrance animations there is actually a function on your computer and all your other devices where you can say prefers reduced motion. Many browsers even have it available as a setting but most people will set it across their entire system and again it's called prefers reduced motion and that is actually detectable via CSS and JavaScript and so what you need to make sure is that you have obeyed that preference. So if someone has turned on prefers reduced motion then you need to stop all animations and some of the builders will do this by default but always always test. Can you tell us more about all the text for images in terms of the context but you have a good example of what to do and what not to do. Yes so don't repeat surrounding text. For example if you have a caption below the image that does honestly a very good job of describing it you would have what's called a blank alt text which is ALT equals quote quote so blank alt text because the caption below the image provides a clear description. If you have immediately surrounding text that provides a clear description it's probably just a decorative image.  That's a purely decorative image and again it's ALT equals quote quote then for things like you want you have a photo of a house and you're specifically talking about the shutters that are used you would want to make it specific to what is the purpose of this image. I as a sighted person am seeing this. What is relevant about what I'm seeing? If I'm talking about a list of like a photo gallery of people who work at a company you might want to actually describe the person because that is what I as a sighted person see. You know I see okay older white male younger Asian female that that's what I'm seeing as I quit glance around. You know I might see someone wearing you know a specific hat or what is my am what am I seeing as a sighted user what do what feelings what what am I getting out of this content. Thank you. Yes. From the work I've seen if you um you're building a plugin or building a site. Yes. I know in Media Library you can certainly control that. You shouldn't. I do recommend that that you add alt text to your media library within reason because alt text is context sensitive you need to be able to control the alt text when you're inputting the image because on one location it will have one meaning on another location it may be purely decorative on a third location it has an entirely different meaning. Yes. So as a plugin and theme developer you need to be able to allow alt text per image. And it drives me nuts tons of plugins and themes don't allow this adding captions per image so if you have if you're making a gallery plugin allow people to set alt text and also allow them to set a caption per image stored just to that gallery because again it might be different in another location. Are there any plugins out there? I haven't looked at clients. So are there general plugins out there that make that easy for people to kind of call out you know here? The default Gutenberg gallery does alt text well but it has no captions. Um honestly it it is a fight I don't want to actually build that kind of a plugin but I know it would be hard to build that because like you said you have to account for so many different scenarios. Yeah I I haven't tested all all of the various gallery plugins but yes it is definitely a real challenge trying to get a good gallery in there. And last question. Kind of along the same line so in an effort to make things easier for the clients update on the day-to-day basis they want to put an image in a blog post. Yep. So if they have uploaded their image they put in the appropriate alt text for that image hearing that now it's context sensitive. Is there is it perform to not adjust the alt text if they use it in like say a decorative instance later on? Yes so it so what you'll do if you're using the Gutenberg editor you can click on an image and in the sidebar you can select your alt text per that image. Okay so they could set it on upload but then adjust on a case by case. Exactly. And you should. Yes. Thank you. All right and my time is up. Thank you Jen.