 Welcome to the Cherry Blossom Room. Oops. I am Beth Hannon. I'm your emcee in the room this morning. And we have just one announcement, because it's still early. If you are in need of assistance or information while enjoying WordCamp, we've got you covered. So near the registration area, and it's across the way from that, you'll find the attendee services desk, whether you're looking for directions and trust me, it's easy to get lost, so you might need them. Whether you have accessibility requests or need emergency supplies or just general information, these folks are the place to go. They help you back. So during the event, also, if you need assistance, you can call a 24-7 accessibility helpline at 240-202-5566. That is a WordPress-specific helpline. And if you need that number, you can come find me later. We are excited this morning to be talking about enterprise approach to security. Peter Wilson is our speaker. He is a web developer and WordPress core committer. He's currently a lead engineer for open-source practice at TenUp, a digital agency that specializes in WordPress. He's also worked as a senior software engineer at Nine, an Australian media company. He's contributed to WordPress since 2015 and been involved in several high-profile WordPress projects. He's based out of Melbourne, Australia. And away from the keyboard, Peter is a big fan of musical theater and enjoys catching up with WordPress colleagues over a show or two. So please welcome our speaker, Peter. Good morning. Before we begin, I'm going to ask everyone in the room to give a round of applause to the organizers and volunteers of WordCamp US for putting on the event. As Bec said, I work on TenUp's open-source practice, and they sponsor me to work on WordPress core for about half my time where I am a core committer and a member of the WordPress security team. One of the things I try and keep on mind when working on WordPress is let's use the all sorts of websites. Everything from a completely fictional, and you'll see why it's fictional, family grosses a few minutes from my home to the somewhat less fictional White House a few minutes from where we meet today. For full disclosure, the White House is one of the sites my employer is known for working on. But all that work happened around 12 months before I joined the company, so I have no idea about any of the specifics. I'll be learning about it with the rest of you when the process is discussed later on this afternoon. I'm choosing the WhiteHouse.gov as an example to talk about because it's nearby. We can probably see it if we tried to get onto the roof of this enormous building, but it's also one of those big enterprise builds. For the last eight years or so, it's these big enterprise builds that I've been working on. But in a very real sense, when I am working on WordPress core, I'm working on sites like this, the local small or solo business that hires a freelancer, designer, developer to build a website for them. In my experience, it's the green family grosses of this world whose sites tend to get hacked. Often the problem comes from a theme or plug-in failing to use best practices. To demonstrate this, I've created another fictional site for the talk, the Scarlet Family Grosses. I don't know why, but the green and the scarlet families are sworn enemies. They probably appeared in the Game of Clue together. Now, in my imagination, the scarlet family have ripped off the green family's design, but for the purposes of a talk, I've got to be a little less subtle. For the big enterprise sites, the Hollywood image of a hacker is somewhat accurate. If you take away the hoodie, the skin masks, the gloves, the matrix background, it's people sitting at a computer targeting a particular website, just for the kudos. So the really big sites need to take some steps that not necessarily need to be taken for every site. For example, the White House requires users being on a particular network to access the admin and limit REST API access to these users. They've also gone through a little bit of security through obscurity by removing the generator meta tag and other markup with the version number in it. But if you know where to look, it doesn't take too long to learn that they're still testing WordPress 6.3 and are running the latest 6.2 release, or at least they were when I checked last weekend. For smaller sites, the steps the White House are taking can help, but they're not as necessary. Rather than individuals seeking kudos, a much more likely scenario is another hacked site attempting to share the love around. Why target one heavily protected site when you can hack thousands of smaller sites in a fraction of the time? It's my firm belief that smaller sites tend to get hacked more often than enterprise sites for one simple reason. A failure to follow best practices or, in the worst of cases, a failure to follow even good practices. In my more frustrated moments, I sometimes think that it's only the big enterprise builds that do follow best practices. And I know in reality this is actually a bit unfair, quite unfair. A lot of freelancers do their best to build secure sites. However, I think a big part of the problem comes from educational resources. Much of the content on science aimed at developers doesn't follow best practices. It's not my goal to call out any of the sites with poor quality code on it. The lack of good quality educational resources is so widespread that if I was to call out one site, I'd need to call them all out. And sometimes, frankly, I feel like that could be a session of its own. That is to say that when I've pulled an example from a website, I've refactored the code so that I can make my point while making it more difficult for you guys to go and Google the source. This code sample comes from the developer resources of a fairly popular plugin. It takes some site-specific metadata from the user's profile and displays it on the front end of the site. These are the lines of concern. They take untrusted user data and output it to the page. There's no consideration as to whether the data is safe or unsafe. And unsafe data can actually be intentionally malicious or, you know, it could be someone making a simple typo. Trusting untrustworthy data is an example of why sites get hacked. Let's revisit our friends at the Green Family Grocers for an example of using untrusted data. The Green Family is savvy social media users and promote themselves on Twitter with links containing special discount codes on their site. The discount code is simply a parameter added to the URL of the website. It sets a cookie and applies the discount to the order. Now, to be honest, because this is a fairly quick demo for a talk, I decided to take a shortcut. I used GitHub's co-pilot, and I just wrote this comment and accepted what co-pilot suggested. As co-pilot reached the end of each suggestion, I added in a comment explaining the next step. And co-pilot was great. It did exactly what I asked. And the key word there is exactly. If a query string parameter is set, a cookie is set with the same value. Now, maybe a few people in the room can see where I'm going with this. But please remember what I said a few slides back. Natural language models learn from people. Co-pilots' educational resources are the same as everyone's else's. Code that people have publicly released onto the Internet. For displaying the discount code on the page, I again let my IR friend do that. I've got heavy lifting written here. It's not very heavy. But let's get back to the exciting bit and bison pairs. Try not to notice the slightly different logo, username, or the awkward typo. The important bit is that the site's URL is correct. It matches the original tweet. And thanks to the truncated display, it appears on Twitter exactly the same. Didn't read that. So what happened? How did we go from buying new season pairs to giving another site our credit card details? Let's take a closer look at the discount code. Reformatted for clarity, the discount code is a URL encoded inverted in this. The text is the same, WCUS 2023, but there's a nasty bit of JavaScript in there too. On the checkout page, it looks for the credit card form, and if it exists, alters the HTML markup to send those users to the malicious site's page. The issue comes from the line of code I showed earlier, which prints out the discount code on the site. The easiest fix is quite simple, and to follow the advice of the WordPress developer resources and always escape your content late, your output late. So the fix for our code is to stop the visitors' credit card numbers from being hacked. It's to escape the output. It's an eight-character function, 10 with the brackets. I mean, it works. Our visitors' credit card numbers aren't going to get stolen, but it's not the kind of thing that's going to inspire confidence. And it also doesn't change the fact that every visitor that follows the link has this stored as a cookie in their browser. It's just sitting there as a time bomb that will cause problems if a developer makes a mistake. And developers have to protect themselves from the future selves. The obvious solution is to sanitize the data before setting the cookie. Sanitizing data just means cleaning up the user input so that it's what we expect. In this case, I'm sanitizing it as a text field, which is a built-in WordPress function that strips out any HTML, including completely removing HTML charts, including JavaScript. And it works. We have a clean discount code containing something that looks like the expected value. I'm so glad we have that sorted. Let's move on. I'm going to discuss the data that is considered untrustworthy. I'm sorry, I really wish you could stop that. This is getting ridiculous. I left my computer, I was in New York last week seeing shows, and I left my computer unlocked in the hotel room and I think someone in housekeeping decided to have some fun. I mean, we've fixed this, right? We sanitize the data from the user input before setting the cookie. Everything should be fine and dandy. Well, no, it's not fixed. User data is so much more than form fields and query string parameters. Cookies are user data. HTTP headers are user data. Session and local storage values are user data. Everything, pretty much everything that comes from the browser is untrustworthy. Anything stored as a cookie or in local storage, except from the browser in most cases, the HTTP headers are controlled by the browser. However, it's relatively trivial for someone to set a cookie in the browser console and even easier to alter the local or session storage. In the example I'm using today, it would be pretty weird to set a cookie in your own browser so that another company can steal your credit card. But what if you worked in a hotel housekeeper hoping to find people who had left their credit cards around or, in my case, their computer unlocked? I mean, you'd have a go, wouldn't you? It's important to note that escaping the output has fixed the problem, but it's important to prevent anything unexpected coming from a cookie so we don't end up with the output something like this. It's really trivial to change a cookie's value via the browser console using JavaScript. WordPress even provides a helpful utility file to make it even easier. For things like cookies, which we, the web developer, want to control, I think it's worth going an extra step when checking the data. On the highlighted lines, I'm storing both the sanitized version and the unsanitized version. If those two strings don't match, then it's not a cookie value that was set by the server and it should be discarded. I've been a little light about the specific escaping and sanitization functions to use and that's because it's really complex. So you really need to get to know what each function does and there are a lot of them so you need to do some research. Please do these Google searches. As with the cookie example I use, sometimes you need to compare the user submitted value with sanitized value. Sometimes you need to take the raw input and compare it with a list of unexpected values. In the discount code example, that would be a list of discount codes and that's where the nuance comes into it. If you're running code sniffing software, you get a warning that this is problematic but we're comparing it a few lines later as valid input and that's because the code sniffs don't run code, they look for the best practices and that's not a limitation of the code sanitization sniffs in the software. It's an indication that dealing with user input is really complex and needs to be considered on a case-by-case basis. As developers of websites, we don't get to offload what we are responsible to a piece of software. Just as we can't trust AI to write secure code, we can't trust binary software decisions to understand the nuances involved. Enough thinking about visitor input on the front-end. Let's look at user input for legitimate trusted users. By default, WordPress has four roles that are allowed to post content to the site. There are the high-privileged users, editors and administrators and the low-privileged users, authors and contributors. The high-privileged users are allowed to use any HTML element they wish including Adam Kustin JavaScript to a page to show an alert or similar. Authors and contributors content, on the other hand, is run through an HTML filter that's called cases. This limits their posts to a subset of a loud HTML. Now, this list is still really very generous. I wanted to animate this slide to make that point and ended up crushing keynote. It's generous enough that with enough knowledge to be dangerous, an author can still make a complete mess of things. Well, being restricted enough that the low-privileged users can't actually harm visitors. Now, if you're running a popular website with hundreds of thousands of visitors and then you've got hundreds of employees maintaining that, some of those employees will require editor or administrator roles. And you probably don't want anyone to be able to harm your visitors. Let me correct that. You definitely don't want anyone to harm your visitors. Adding the disallow unfiltered HTML constant in the WP config file was certainly one of the first things that was done when I worked at the newspaper site. This means that even high-privileged users such as editors and authors can only access the filtered list of HTML. Now, I became friends with the product manager, the former journalist, and I quickly learned something about him. He had really strong feelings that he did not want the website to look like this. There's a hodgepodge of colours, no two sections, share the same font. It's pretty ugly. So even the default set of allowed HTML tags in WordPress is a little too generous. At the newspaper, our allow list of post tags basically became quotes, links, bold, italics, and lists. We removed the default attributes so people can add style tags and so forth. If you look closely, you'll notice that images are missing from the allow list. This was so we could use custom short codes and later custom blocks to better encourage the use of captions and alt tags. Now, some of you may be thinking it shows a tremendous lack of trust in the users. Surely you're thinking the national editor of a major news outlet can be trusted not to undermine their own credibility by making their own site look awful. And you're right, they probably can. But good security practices not only protect against malicious intent, they protect against accidents. One of my greatest fears while working at the newspaper was confusing the develop and production environments and suddenly announcing that Alexander Hamilton was dead. I was terrified that I'd be logged in as an administrator and published testing content to the testing section. Now, there were reasons I needed to be trusted as an administrator on production, but sometimes I wish I wasn't. And as an aside, for your own personal financial security, when you're writing test content, always presume you are accidentally logged in to production. If you accidentally publish lore omics into production, you'll probably get a few grumpy comnames. You know, maybe you'll get yelled at. If you accidentally publish swear omics into your website, you'll be lucky if you yelled at. You'll probably get an official warning or, in the worst case, get fired. In retrospect, I should have asked for a role at the newspaper that would allow for us developers to administrate the websites, but prevented us from publishing new content to production. Ideally, the developer team would have been able to edit existing comment, you know, so we could help out journalists when they're having trouble with the feature, but not publish new content to the site. As I said earlier, WordPress comes with a few roles out of the box. Five on a single site installs six on multi-site. And one of those is a subscriber, which comes with only the permission to edit their own profile. If you install certain plugins, you might end up with expert roles. For example, an e-commerce plugin might give you a customer or a shop manager role, or a really complex plugin to configure might give you a configurator role. But really, WordPress doesn't have a role system at all. It has a capability system. Instead of checking if the logged-in user is an administrator, an editor, contributor, or author when determining if a logged-in user can do something, WordPress checks if they are allowed to do a specific activity, such as editor posts, install plugins, or so on. For big enterprise builds that I've worked on, the built-in WordPress roles have rarely matched the various jobs within the company. The items on the list that went past behind me are called primitive plugins. They're general rules as to whether you can publish posts, activate a plugin, or so on. WordPress has what we call metacapabilities. They're used to determine whether you can publish a specific post, activate a specific plugin, and so on. Using the White House as an example, you may wish for the vice president's team to give them permission to edit her biography and publish statements on her behalf. But you may wish to present the vice president's team from editing the president's content and publishing statements and press briefings on his behalf. I don't know if this is the case, by the way. I, like most people, learnt about the inner workings of the White House by watching VEEP and the West Wing. An approach you might take to this is to add a role for the president's editorial team with some custom capabilities for editing content that's deemed presidential. And I'm taking existing post-editing capabilities and adding the word presidential. You don't need to worry about the code too much. The key bit is that I've inserted, as I said, I've inserted the word presidential. And then if the post the user is editing as deemed presidential, we require the user to have those same capabilities we added early in order to modify the content. And the advantage of this approach is it gives me what I asked for earlier or desired earlier when I worked at the newspaper. When logged in as an admin, I can manage the site without editing the content. Let's talk briefly about hosting your site. Back home in Australia, we have a WordPress-focused social slack called WP Australia. And a common question that comes up is where is the best place to host your site if you want to do x, y or z? In the WP Australia slack, the common end of the question is serve content to a mainly Australian audience and avoid the enormous latency between the US and Australia. If you want to keep your site secure, there's no one best answer to this. There's a good answer, however, for the following question. Should you just try and save money and configure a VPS yourself and host your site there? Unless you're an experienced system admin, the answer is no. You may be able to save some costs if you team up a VPS with a service that will configure and manage security updates of the actual server packages, like the web server and PHP, but please don't self-configure. In my view, the ideal situation is to not have your WordPress servers IP address available on the Internet. Let's take a look at the ten-up website for an example. If you look at the IP address of our server, you'll discover that we apparently have three of them, three application servers. And if you visit the website, you get this. Well, not this. I got that error message at the time because I changed my browser's user agent stream to pretend to be Internet Explorer 6 and move it a little bit more junk at the end. It's the little bit of junk at the end that got me blocked. It's a very ham-fisted attempt at an SQL injection attack. And browsing the Internet with that set as your user agent set up... with that set up as your browser user agent results in a much smaller Internet than we're typically used to. And commonly, the sites that you can access look a little bit like the straight out of the 90s. So why are ten-up, NPR and Discord all blocking me from accessing their sites? When you do a look... DNS look up on their sites, you're not seeing the IP address of their application service, the servers that actually render the website. You're seeing the IP address of their web application firewalls. In two of the sites that I visited and included screenshots for, it was CloudFare, Cloudflare providing the application firewall. Basically, they're looking for user input. And in my case, that was the Cousins of Browser's user agent that suggests the browser... the visitor may be trying to hack the site. And it blocks it before it gets to the server. It's not really a snappy headline, but I'd suggest that there's never a really good reason to expose your WordPress server's IP address online. It's one of those features that you may pay as little or as much for as you want. But it is worth mentioning that it is included as a feature within Cloudflare on their free plan. When it comes to keeping your site secure, there's one simple trick you can follow. And that's to remember that there is no single technique that will keep your site secure. If you do nine out of ten things correctly and securely, the one thing you missed may be enough. When working on a large project, including on WordPress, CodeReview is pretty much baked into the process. It's rare that anything gets merged without a second set of eyes on it. But that's fine on large teams with multiple developers. What do you do if you're a freelancer working alone? And in most situations, the answer is to have a nap. Take a break from the code you were writing. Work on another part of the project or switch focus to another client. By taking a break, you have the opportunity to forget about the code you wrote. And then you can review it afresh. When working on WordPress Core or other open-source projects, I'll often leave my own pool requests overnight and come back to them with fresh eyes the following day. And then I'll request someone else to review it. Often enough, I'm happy with the content, the pool request as I left it the night before. But sometimes I realise I've missed something and it needs fixing. It doesn't matter too much whether it is minor or major. And sometimes it's major. I've missed something major. But I know from personal experience that self-reviewing code after a change of context and focus can be effective. If your work situation means that all you have is self-review, then I suggest you give it a go. Even if you continue working on the same project, you can go back the next morning and review the pool requests you merged the day before. And with that approach, you may save yourself from waking up from your client and saying to yourself, oh no, I've made a huge mistake. Thank you very much. Thank you so much, Peter. So many things to think about. We have some time for questions. There are two microphones in the aisles here and here. If you want to take a line up if you would like to ask Peter a question. I would imagine I'm not the only person here that makes smaller websites and needs some best practices for security. Thinking things like CDN and what else? Going through and using a CDN with the web application firewall to block what looks like a malicious attack is one of the best things you can do because it means if you miss something, the CDN with the application firewall might catch it. But becoming really familiar with the escaping and sanitization functions that WordPress provides and if you just Google WordPress common APIs and then just follow that with either sanitization or escaping. I think something there, something you really need to just read and reread. I often find myself on those pages rereading and making sure that I'm using the correct sanitization. Some of them, you know, will strip out the HTML tags. Some of them will, you know, make sure that it only has the characters of CSS colour in there. So, yeah, I think, you know, it's not necessarily easy, but that's something you can do. I was talking about the sort of idea of the code review, something, you know, if you're a freelancer and building very small sites, often, you know, the WordPress Meetup or something like that, you know, and a lot of other freelancers, you know, maybe you can ask someone else to look over a tricky bit of code if you are unsure of it. But, yeah, really, the idea of sleeping on it can help. So I'm curious, you have, like, a set of standard stuff, removing the meta tags, maybe changing the admin URL, but I'm sure you have, like, a standard that you do for every site to keep it consistent. And I'm wondering, how do you do that? Is it a plug-in that every site gets? Is it an MU plug-in? And also, if it is, to follow-ups, how do you keep it up to date as standards change, capabilities change? And if it is, would, is it open-source, like what you do, or are you willing to do that? So something we have at TenUp is what we call the TenUp experience plug-in. So if you go to github.com slash TenUp, you'll find that in the list of our spot repositories, and that is open-source. And the advantage of making it an open-source product and sharing it between teams is that any of our client services team as a new feature is added to WordPress. They, you know, someone can work on that and submit it back as a pull request. But it's something that allows, you know, by making it open-source, it allows freelancers to follow what TenUp considers the best practices and something that's a default for all the sites. Awesome. Thanks again, Peter, for all of... Thank you. Next session started 11.15. Good morning and welcome to the Cherry Blossom Room. I am Beth Hannon. I'm your emcee for the room today. Emcees have responsibility for making announcements and I'm sure the announcement that you will want to listen to is about lunch, which happens right after this. So lunch is right after it's in three different locations. In the back of the sponsor hall is one of them. If you have any dietary restrictions put on your registration, then your meal will be at that lunch in the sponsor area. There's another area that's right out here by Woodward Wilson where we were for the keynote this morning and then there will be one right out in front of this room too. So if you're going to head down to the sponsors area, it can be a little tricky to find, but you're going to from this room go through the hallway that way and look for escalators, there's two escalators that go down with a landing in the middle, not the first set, but there's two sets that go down and then you'll hang around a corner and go down a hallway and you'll find people that I think everybody will be headed that way for lunch. We are excited today to talk about community, community building, making our community a better place. So Aida Korea Jackson is an accomplished multimedia artist who dedicates her work to uplifting individuals from diverse backgrounds through her artistic expression. Her writing, her poetry and other creative endeavors. With her international recognition as a speaker and a workshop facilitator, Aida brings a wealth of expertise to WordPress and beyond. So drawing on her extensive experience, Aida actively fosters inclusion at the intersection of art and technology. I'm really interested to hear about this. She's currently serving as an instructor at the Linwa Rine University. She imparts valuable knowledge about inclusivity, diversity and equality for the web and various technology platforms, including the metaverse while showcasing or empowering her students. Aida shares a deep passion for technology, education, creativity with her husband, William Jackson, who's also here at the conference. Through educational workshops conducted both in person and virtually, they strive to inspire youth, teens, young adults and their parents by emphasizing the significance of STEAM and STEM's careers. So welcome, Aida. So thank you so much for coming. I appreciate it. This is my first talk at WorkCampUS. Thank you for coming around. Thank you. So this slide here was how I started out, because, you know, this is U.S. I was trying to be serious and stuff, but I decided that this morning I'm going to just be myself. Is that okay? So this is more me, okay? So this is a shout out to my black press people. This is us last year. But this is more the kind of slide that I would be putting up. Okay? So I am so grateful and thankful that you guys came this morning. How many here? This is your first WorkCamp ever? Wow. Awesome. Welcome. I love this community. I cannot wait to talk to all of you. And how many of you, this is your first WorkCampUS ever? Amazing. Amazing. So I thank you for joining me. So I put a lot of words on my slides because I am a New Yorker. I speak fast. I have an accent. So you make, you can take all the pictures you'd like. So don't mind me. So I thank you for joining me as we embark on this journey. And I'm so passionate. I want this to be a vibrant accessible community, right? So these are some of my ideas. Now, some of you like stories. And some of you like the facts, you know, I call the numbers. So you're going to get a whole lot of both today, okay? So she already told you about me. This is some of my artwork that's behind me here, but during the day, I am a florist. So I purposely came like this today. And the reason I did is because no one expects a florist artist that looks like me with flowers in my hair with all my latinidad to be into technology. And I am. And this is part of why I really, really wanted to do this talk today. I want to dedicate this talk to my mom. She was into technology. This is a true story. My mom, when we were teenagers, came into the house with a brand new computer. And she said, look what I got. And then she said, how do I turn it on? And of course, you know, when we were teenagers, we started laughing like, ah, you bought a computer, you don't have to turn it on. And my mom was like, okay, watch me. My mom joined a computer club and my mom began building computers from scratch. And before my mom passed away, she had her own computer company where she was building computers. That's how I got into technology because my job was to put the programs on and make sure that they were successful. But this is also for every, and as a Latina, like I said, for every Latina who was told that you need to grow up, get married, have babies, have a good husband, and that would be a good life, was not for me. And I thank God for my mom because she was all about education. I also grew up in Brooklyn, New York. And when you grow up in Brooklyn, you don't have a job. And you really don't strive for a whole lot more than that. So this is for every one of you who may have been told that, that you're too poor to be intact. Or you don't, you know, my husband has been a blogger for years, and that's how we met. And, you know, he was told black men don't blog. So for everyone who's been told that you are whatever it is, this is for you. And he was the first one to tell me about what wordpress was. And he told me about these things called wordcamps. He was like, you ever heard of it? And I'm like, no. And that was way back in 2014. But we did not come to our first wordcamp until 2018. So these are some of the pictures through the years, the one I mentioned before. And he was the first one to tell me about it. He was the one with the smiley face there. That's us in wordcamp Miami. My very first wordcamp ever, where I not only volunteered at the 10th anniversary of wordcamp Miami at the registration table, which was total mayhem. I was like, oh my gosh. And then at a certain point they said, hey, we need to volunteer to be an emcee in the room emcee. And then later on he's like, hey, you're talking with me. And I was like, what? He's like, yeah, you're going to come speak with me. And I ended up speaking. So at the end of the day he comes to me, he says, hey, do you think you would be willing to do this all the time? And I was like, yeah, I sure would be willing to do this all the time. So I came to the city of Costa Rica, to Canada. We just came back from wordcamp Europe, where I was an organizer. So this is a wonderful place to get started. So why do I want to do this? The main reason I want to do this is, and you could read this, but I'm just going to tell you, I love this community so much. And there are so many people here that, as a matter of fact, by a We're like, this is like, I don't even know how to explain. People, someone said yesterday, it's like the WordPress cult. It can be, you know what I'm saying? It's that kind of community. But there's so many things that over the years that I've seen that are starting to change. And I'd like to see us really get back to the basics, back to the beginners and the creatives because there needs to be space for those who are creatives in this community. And if we really want to democratize the web, we need to make sure that every voice is considered valuable and that everyone feels like they belong. So let's redefine beginners and creatives. So these pictures here, if you see the little kids, that's my daughter, so of course, that's one of my daughters, I drag her in on these pictures. There's also my granddaughter all the way on the, to you guys, all the way on the right. She's the one with the little bandana. My husband and I also have done what's called kids camps here. So those are from seven to maybe 14 where they come and they learn about WordPress and we put together activities for them. So in that particular one, the bandana that she has, it was a pirate theme and we had the kids going around talking to the sponsors and to the volunteers and they had to collect pirate booty by taking pictures of it and bringing it back. But beginners to me isn't just someone who doesn't know anything about computers, okay? Or anything about technology. A beginner could be some of you who've been here, this is your first time here. That's a beginner, right? A beginner could be a business owner who's been working on WordPress forever, but now all of a sudden they're like, you know, I feel stuck or they want to be a part of something bigger. So I don't want you to think of beginners as someone who doesn't know anything or someone who's not done this before. It could be someone who's just new to the community. And that's where my focus is, is not just they don't know how to use technology, but more this is someone who's new to the community. And when it comes to creatives, I'm not talking about just artists because even people think, oh, an artist is a painter. I just happen to paint, but I also am a writer. I want you to think about musicians. I want you to think about that person down the street. I grew up in New York City, so anybody here from New York? All right, woohoo, exactly. So you know, I don't know if you remember, but if you go down to certain streets in New York City, you see quite a bit of characters, okay? And they may not be artists, but in their own way, they're very artistic and creative. And like I said, I did all of this not for show because I actually, this is mine and I love it, but I do this because I want you to look at people as people and know that every single person, wherever you are, they're welcome here. Maybe you don't know how they'll fit in, but give them an invitation and find a way for them, and they'll find their way in for the numbers. So 20 years, right? 20 years of WordPress. Let's give them a hand. Yay, happy birthday WordPress. So according to one website, 810 million websites worldwide are on the WordPress platform. 64.2% is the command of WordPress as of 2023, and 500 new websites are made on a WordPress website every single day. That's a lot of websites. That's a lot of people. And while this is huge, imagine how many people don't even know what WordPress is. A lot of people don't even know that their website is being powered by WordPress. So even when we're at and we're talking, people all say, oh, you're a part of the WordPress community, and they'll go, what's WordPress? So how many of you have found that? Have you come across that? Where you were talking to my WordPress? No one knows, right? So I'm gonna do something a little different. I wanted to do the SWAT technique, but not in your traditional. So we're gonna use the SS Strengths, right? So what have we gotten right? And then the W, instead of being on weaknesses, we're gonna use them as warning signs. So what are the things we need to look out for? And then O is for opportunities, overcoming challenges. And then T is for triggers and targets. So recognizing the resistance and how can we overcome it? So one of the things I am gonna ask you today is two things. So I normally walk around, so it makes it easier. So it's kinda, I'm like, I'm stuck here. So I have this thing that we do in the classroom, in my classroom, it's called silent applause. So if something I say resonates with you, this is a silent applause, right? So if you don't feel comfortable, do that. That just keeps me like, okay, it's good. And then also I'm gonna ask you to take notes and be prepared, please, to share. Because this is what makes this community so great, is sharing. So what have we gotten right? So first of all, this community is awesome. I told you about WordCamp Miami. The one thing about it was while it was Mayhem and it was crazy, everywhere I went, people were really friendly. And I was kinda blown away because I was like, wow. Everywhere you go here, everyone's like, hey, how are you? And they'll just sit down with you and then start talking to you. And when you consider how many people are in the room, that's pretty amazing. The WordPress and WordCamp communities are worldwide. So like I said, we just came back from Athens. I have friends here from Costa Rica. I have friends that are in Calgary. And when I say friends, I literally mean, they're my friends. We look forward to seeing each other. I said, I met Ms. Carrie over here in WordCamp US. We look forward. We see each other. We're like, oh my gosh, look. Oh no, and it's not just me. This is everywhere. This is everyone. So imagine the community. I tell people, this is my tribe. I can't remember your name anywhere else. But if I met you in a WordCamp, I remember you. I remember your name. If you're lucky, I remember where I met you. Most of the time I remember where I met you because I placed the camp and I placed your face. And I sometimes even remember what you do for a living. It's kind of mind boggling. For someone like me, that's kind of like, wow. Anywhere else you'd be like, I eat and I'm like, oh my gosh. I don't remember. But here, this is my tribe. And I know that it's not just me. There are many of us who feel that way about here. WordCamp has a code of conduct that is enforced, which ensures a safe and respectful environment. And that's really important. So this is something that's great about WordCamps because everyone here can come and feel safe. And if you don't feel safe, there is something that you can do. There's enforcement here. There are people in place that if you feel like you're on rights or you feel uncomfortable, you can go to them and it'll be addressed. So that's a great thing that WordCamp has. I mean, WordPress has in general. WordCamps are amongst the most affordable in technology conferences and they include delicious meals and a t-shirt. Now, I don't know about y'all, but have you, exactly? I don't know about y'all, but have you looked in the prices of other technology conferences? So when my husband and I started doing this, we were like, you know what? Let's branch out. Let's go check out some others. And then we started seeing the pricing. We're like, oh, you know what? We'll save our money for WordCamp, okay? That's why we travel. We'll just say, you know what? We'll just go to a WordCamp because unbelievable the pricing on those technology. And listen, these are professionals. These are people, oh my gosh, the amount of knowledge and people and they're doing it for free. And they come in here because they love the community. They're passionate about it. My first experience seeing five developers in a room sharing information with one another, not competing, but collaborating. I told my husband, I said, what kind of place is this? Because most of the places I come from, you know, people are like, oh no, no, we don't talk about our proprietary things. Here, everybody's like, oh yeah, you know, you have a problem with that? Let me help you with that. That's incredible. Our sponsors rock, okay? Now, I know some people are like, sponsors, I eat them really? The swag is cool. I ain't gonna lie. It's really nice to go through the sponsor table, you know, sponsor tables and get the swag. But the sponsors themselves are really cool. I have so many that I have spoken to. My very first person that spoke to me in a WordCamp was actually a sponsor. And it wasn't like to come and sell me anything. He kind of saw me looking lost. This is here in Miami. I'm just kind of walking around and he just walked out and he was like, hey, it started talking to me. He didn't tell me about his table. I asked. He just wanted to know why I was there and what brought me there. And I found out recently that he's also was a member of the community before he ever became a sponsor. So that's where that came from. He saw me, he saw I looked a little lost and reached out and I was like, wow, that's really neat. Wordpress and WordCamps promote diverse representation and inclusivity amongst their speakers, their organizers, their volunteers and their attendees. This is an incredibly diverse network of people. You can especially hear the first WordCamp I went to that was a US. I met someone from Turkey. I met someone else from Israel. And guess what? Every time we go to a WordCamp, we find each other. How amazing is that that you can know someone from Greece or Turkey or Israel and they look forward to seeing you year after year. So this WordCamp is live streamed. So if you couldn't be here live, you can be in person watching the whole camp and close captioning. Look at that. Right. Awesome. And not for nothing, I'm a DEI teacher for the web so I'm always trying to teach people how to make their websites and so forth more inclusive or your social media and all of that and close captioning. I tell people that's not just for the deaf community. That's for people like me. So when you're up here and you're talking low like me, I have an accent and my voice turns to get low, I go too fast. I love that. That's like, whew. And accessibility here is a priority all the way across the board. So what are the some of the warning signs? This is why I wanted to do this talk. After 20 years, I think what I've seen a lot of is that in general, it's not everybody, the community has become very complacent. It's kind of like, oh, we've already done that. We've done that. No, we don't want to do that anymore because we've done that. No, you've done that. It doesn't mean that the new person has done that. And that's what I want us to be really very aware of. Though for those of you who've been here that've been doing this for a long time, I've heard over and over when people say like the second one, they already know. So when I was an organizer a few times and I've said, hey, we should put this in the handbook or we should say this and people go, they already know. No, no, no, you know. They don't know. Thank you, thank you. And, you know, but I want us as a community to think about that because just because you know doesn't mean everyone knows. You know, I don't know the name of the movie. I don't know exact the words but someone here I'm sure knows there's a movie where Denzel Washington tells all the people like tell me like I'm a six-year-old. Do you know that movie? Okay, that's what I say. Let's handle this like we're all six-year-olds, okay? So that everyone can feel comfortable. Because you know what, I might know today but one of the things I meant to mention in the beginning is that yeah, I'm an artist. I do all these things but I also am openly neurodiverse member of this community. So today I know and I ain't gonna lie tomorrow, I may not because my brain just went on the fritz and I don't remember so it helps me to have a reminder, okay? The other thing I've seen lately is a lot of camps especially one-day camps are really, really heavy developer talks. Beautiful, I know that more people want to be in a developer talk because there's a lot of developers in the community but there's a lot of non-developers in the community. There's a lot of business people in the community. Like I said, a lot of artists, a lot of creatives. We want to know how to build a website. Yeah, but I don't want to know like from a developer. I sat in our one developer talk and I was just sitting there like okay. And when I left they were like what did you think? I'm like I have no idea because all of it was like you know another foreign language to me. I have no idea what you talked about. I'm like I sat in to be polite but no, I don't know. But the new things that are happening, one of those things that we've gotten right. I know some people don't like Gutenberg and Block Editor but for those of us like me who don't develop it has made it infinitely easier for me to not only build a website but to also teach how to build a website. So that's great. How about in your organizing team? Now I know for a lot of people maybe you don't live in a very diverse neighborhood. You don't live, maybe everyone kind of looks the same in terms of I know in Costa Rica for example mostly Latinos. Maybe I know someone told me they're from the Netherlands and it's very hard to have quote unquote diversity. But do you know diversity is way more than ethnicity? How about making sure that your organizing team is diverse in terms of who comes from the community? Not just in gender, not just in gender. We're talking in social economic status. I tell people social economic status is a part of diversity. And I'm gonna tell you as a teacher and as an educator who works primarily with people in underserved communities y'all have forgotten about us. Okay? Because most of the time when you're thinking about doing things most of my kids don't have a laptop. They don't even have internet. That means their parents don't have a laptop and their parents don't have internet. How can you include them? How can we have them have a seat at your table as an organizer and invite them into the community and tell them hey you may not have this but we in our community in Jacksonville we've asked people to lend laptops. You have a laptop you can lend because some of us have two or three. You have one that you don't feel uncomfortable bring into the camp so that we can have more people here so that they can enjoy this experience too. Your library lends laptops. That's another way. Maybe have a meetup in a library or have your meeting there and show them how to do it because sometimes people don't know what they don't know and they don't know what they need because they don't know, right? Not considering talk submissions because they're not WordPress enough. And I've heard this many times oh well it doesn't include WordPress. Well maybe it doesn't need to because the rest of the talks include WordPress. Maybe this is a talk that's needed for this community. Maybe people need this today. Honestly I didn't know that WordCamp US was gonna choose this talk. I was excited that they chose a community talk. So yeah, thank you. I was really excited about that. Using jargon, WordCamp speak, WordPress speak, tech talk. So things like CMS, LMS, what's that API? I mean these are things that after you guys talk to me I'm like, I'm on the Google like okay, what was that, okay. When you're amongst each other, fine. But if you see someone's face go blank, go oh, do you know what a CMS is? Well let me tell you and explain it. It's okay. We are in a community that this is one of the wonderful things about this community is that we do talk the same language. But if we want new people to come in here and we want them to feel welcome, we gotta remember they may not know that language. We do the same thing in our church. We teach them like hey, there's certain like church speak that you just, people don't know. So try not to use that predominantly. And if you do, explain it. This last one, and this on this page, this frustration when things are explained. Remember when I was saying everyone says oh they already know, they already know. I have heard many times people getting frustrated when you say can you explain that more? Or can you make that clearer? And I've seen the frustration or heard the frustration or they don't want to? Because again, going back to they already know. Please explain. And don't be afraid to explain. Because you know. That's the thing I want you to keep remembering. You know. Going back to the organizer thing with having diverse groups. This is something that happens with organizations, with businesses, and definitely here amongst the community. When you make the best decision for a group of people, without asking said group of people, or asking anyone in that group, if that's a good decision. So this goes back to whether you're, even if you're a business owner, even if you, especially if you're working in a nonprofit and you're working in a community. I have seen so many community initiatives fail. Because instead of going into the community and saying hey what do you need? They say you know what this community needs? And they go and they make all this plans, they put all this money and all this time. And that's not what the community needed. So I say the same thing for here. Let's think more about how do we find a way to ask? Because I'm not saying anything I'm saying here is easy. But let's find a way to ask the very people we're saying we want to serve. Because even in our own form with the accessibility, which is great, you have an accessibility need. Nine times out of 10 when people are thinking accessibility, they're thinking about the person in the wheelchair. But how about the person with the cane? Or the person with the bad knees that can't go up and down the stairs of the very venue that you decided is perfect for the whole community? And they get there and they're like oh my gosh, I don't even know how I'm gonna get around here. Having middle of the week work camps. Have you guys seen that? Oh, we're ready there. So having a middle of the week work camps. This is a very popular thing lately because a lot of people work with WordPress during the day. But this isn't more than that, okay? We have teachers and people that are working during the day who are part of the community that unfortunately cannot be there during the week, okay? So I did not realize, I'm chatting here, but we're running short. So I'm gonna go through these quickly. Having meetups only one time of the day or evening. I want you to think about having them more often. We have one during the day and the evening in Jacksonville. Making sure that your meetups are on some kind of bus line for those who may have transportation issues. I want you to think about that too. Everyone in the team thinks and looks alike. If your team looks the same, it's time to start looking outside, okay? Insisting that you do things the way they've always been done, that's another thing. And then new thoughts and ideas feel threatening. I know that when new people come in and they're sharing their thing, you're like, whoa, we've never done it that way, but it'll be okay. Opportunities, repeat, repeat, repeat. So the announcements that my dear MC made today, remember it's okay, make your announcements, but if you have to make them more often, like she said, you know where to go to the sponsor table. Don't assume that everyone knows. Repeat them if you need to. It reminds people, for some people who actually read, because I know people are like, oh, we sent it in the email, or we sent it on the website. Most people are not even doing that. It informs others who didn't do that, okay? Have opening and closing remarks. For those of us that are neurodiverse, sometimes you guys end the meetings, or you end the work camp and I'm going, is it over? Dude, are we done? It's just easier if you just have a quick closing remark so that I know this is the end of this, okay? Having a quiet space, which we have here, we have a quiet space, a listening room. It's wonderful. These are some great things that we have here. Make space for hallway chats where people can just sit and talk, which is lovely out there. You can sit and chat. Choose a venue on a public transportation route, as I said, and occasionally choose public spaces for meetups. I'm gonna go through these a little quicker because I do really want you guys to share. So if you wanna take pictures of some of this, have a longer call for speakers. Now this I really wanna take one moment for. For those that are running international camps, or you're inviting people internationally to come to your camp, remember people have to get visas and approvals. Let them give a little bit more leeway, give a little bit more room. We've had people who couldn't come because there wasn't enough time from the speaker call to the approval to get the visa to come. Okay, thank you. They could not. So I want you to think that some people aren't even getting that passport or that ticket. Even if it's a plane ticket, they're not gonna get it until they get the approval. Until you say yes, they're not even gonna buy this plane ticket. So give them time to be able to do that, okay? Go beyond social media to get the word out. And I say this because as an older woman working with other older people, some people still read newspapers, okay? They still read the newspaper. A lot of our older population are into technology. However, they're not into technology in social media, okay? They may find a different way. They're not looking at social media. So find other ways to get the word out, okay? Kids workshops introduce to our young, introduce WordPress to our youngest people. Consider senior sessions in your meetups so that seniors can come and feel welcome and that they don't feel like, oh, I'm feeling uncomfortable. I don't know all this. Consider having a senior session. Or consider taking your meetup to a senior group, okay? Videos are a great way to introduce people who may not feel comfortable reading. And then one day word camps have a beginner session in AM and PM sessions. Make sure that you at least have one beginner session for one AM and PM for those who are at your one day camp. And then please bring back the happiness bar. Yeah, yeah, I love the happiness bar. This is a great place not only to talk, but I do have issues with my webpage and I would love to have someone to help me with that. Food, we have great food here, but that's not always the case. And for vegan and vegetarians who are predominantly vegetarian, a salad is not a meal, okay? It is not a meal, I'm right, really? So yes, think about that. They did a great job at U.S., by the way. This is some great options here, okay? So this is mostly to our sponsors. So if you're a sponsor here, please just, you could take a picture of this. The main thing that I want you guys to know is thank you for being so open. And take a picture, because we only have a few, a little bit of time. Wapu, please don't forget Wapu. So I only have a few right here. I actually am a Wapu ambassador. I do have a bag with some Wapu with me, but I want you guys to remember that people, this brings people together. Okay, and when I went to Miami, people said, oh, this is your first camp, and started handing me Wapu pins, and I fell in love with Wapu. That's my boyfriend. So I got my husband, and that's my boyfriend, okay? So don't forget about him, okay? I'm gonna pass this so that you could just see this real quick, but this is just for you, so that you could see if someone is saying one thing, that what we're gonna target is the other. So if someone says, oh, that's too much, like, oh, you're too much, or this is too much, remember, we wanna make room for more aesthetics, okay? These are more pictures, some things that you could do, but I'd really wanna give you just a quick minute. I wanna thank you for coming. I want this in my honey, thank you. Thank you. Thank you. Thanks, Aida. So many practical tips. Yeah. And we have a time for a little bit of Q and A, and we have two microphones, one in each aisle. If you have a specific question that you wanna ask, please start making your way to one of those microphones while we're waiting to see if anybody does that. Do you have one specific tip and actionable item for today? Yes. So for today, so starting today, I want you to look around because you're gonna know the new people because they're kinda looking like they're lost. I say the number one way to meet new people is just say hi. Just walk up and say hey. So today I want you to find someone new and say hi. Even if they're not new, get to know who they are and that starts to build community. Be sure you speak into the mic for our livestream friends. Yeah. Hi, I'm Phil from Picture. I'm interested in your thoughts about people who just have never touched digital at all, you know? And they wanna make something, they got some idea and they're enthusiastic, but they don't know where to start. And I wonder how we could, you know, there's a lot of people like this and they wanna do lots of different things. And I wonder how we could get organized to start doing this. So would you say that they haven't touched anything like digital, is that what you said? Yeah, yeah, you know, they know about digital, they know it exists. Yes, yeah. They know there's this future and they think they're in it. But how do we get there? So I meet a lot of people who've never done anything digitally, they know it exists, they find it interesting, older people, people like I said, underserved communities, low income communities that don't have computers, go out there. And that's the most important thing, just like here, where I'm telling you, go out there to the community, say hello. Go out into the community, go to your local library. Offer a workshop, that's what my husband and I do. We offer free workshops to just let people know, like, hey, come on down, you wanna learn how to, I offer workshops on how to use your phone. You know how many people don't know how to use their phone? They just know how to answer their phone. Just offer a workshop and just offer your time and you'd be surprised how many people will just show up, just to learn. And you're gonna be around for the rest of WordCamp. I am. And I really encourage folks to find you if they have more specific questions and I hope all of us will keep working on building a better WordPress community, but we thank you for your time. Thank you, thank you so much, thank you so much guys. Hello, welcome back. We're about to start our next session. Did everybody enjoy lunch? That was pretty awesome, right? So if you're in the right session, you came for a recipe for accessibility, limiting ingredients for faster design. So our speaker for today is Jen Harris. She's the owner at Anfira LLC and organizes the Baltimore WordPress Meetup. Prior to getting into WordPress development more than a decade ago, Jen was a developer for Boeing on the B1 bomber. She, and was a lecturer at the Ohio State University in the Computer Science Department, sorry. Jen has been featured in podcasts and won the 2022 member of the year award in the number one WordPress community. She is very active in WordPress groups, encouraging other developers and designers. She has been incorporating accessibility into websites for a couple of years now and is a strong advocate of processes that move accessibility to earlier points in a project and make accessibility easier to understand for novices. So welcome, Jen Harris. What this talk is about, this is about faster design processes for accessibility. In fact, some of the processes that I use make design go even faster than it did before I got into accessibility because much of the decision-making gets simplified and pushed forward, saving time and money. Recipe came out of the focused WP Thursday meetup and Andrew Palmer gave me the idea to incorporate my love of baking and my love of accessibility into one talk. So you're gonna see a lot of food, fortunately just eight. So recipes produce consistent results in the kitchen and they can also produce consistent results in our work online, saving us lots of time and money. In fact, I've even done one-day builds to produce accessible websites that worked for people who are completely blind. The outline for the talk today, who is affected by poor design choices, some definitions to keep us going throughout the talk, some good ingredients for different skill levels, tools to help us save time, putting it together in an actual process and a little bit of a wrap-up to help you get going with it in your processes. Quickly about me. I got started at about the end of 2019 into accessibility thanks to Amber Hines and her always encouraging and supporting people to get into accessibility and learn more about it. And as I started down the rabbit hole, I just fell in and kept going. So about a year ago, I decided that many of the tools were not actually great for me. In fact, many of the tools were frustrating. So I started building my own because I'm a developer. And when I get bored, I also organize the Baltimore WordPress Meetup and we are online on Zoom. Feel free to join us. Slides and links for this presentation are available online. So who is affected by poor design choices? And the answer is people. People are not perfect. I know, it came as a shock to me too. But hundreds and millions of us are running around the world imperfect. So as of 2015, there were about 7.4 billion people in the world. And it's estimated that about 4.2 billion of those people were affected by poor vision. That is a lot of people who can't read your website when they take their glasses off at night. In the US, we have some more specific numbers from 2022. 79% of US adults need vision correction. Those are your customers. Those are your clients. Those are your users. Some more stats. About 20% of people are estimated to have some level of dyslexia. Now, like all things in life, it's a scale. Some people are slightly, some people are severely. And it doesn't affect everyone exactly the same. The graphic up here says what we think dyslexia looks like. And that flips the letters around. But that's not the whole story. It's not just flipping the letters around. It's also people who frequently have Erlen syndrome. And in this case, letters shake and bounce. Just like driving down a bumpy dirt road. It can be an extremely unpleasant experience, but good design choices can make it better for them. For example, using a hard black on hard white or 0000 on FFF, that's pretty much the worst for them. Gentle that down, use something like 222 on FFF. It becomes a whole lot more pleasant and a lot of the things stop bouncing. Talking about men, in general, men are significantly more colorblind than women. It affects less than 1% of women. It affects about 8% of total men and closer to 10% of Caucasians. And what happens with colorblindness is basically, they just lose some of the spectrum. So as you can see on this chart, red and green, orange, yellow, green, they look the same. So those people can't differentiate if you just put up a red box and a green box. That doesn't help them. They need icons, they need information. You can still use red and green to help users who do have full color vision. But color alone can't be the only indicator. Synesthesia. Most people have never heard of this, but it affects approximately 4% of the population. And for synesthesia, of course, it's a spectrum. What happens is letters and or numbers take on colors. Now imagine trying to do an hour-long math class when the numbers decided to all take on colors. And some people who are affected by synesthesia, numbers even take on tastes. So imagine tasting numbers for an entire hour. And you wonder why some of these people don't perform well in math classes under traditional systems. In addition to people being imperfect, they also live in an imperfect world. How many of us have gone outside with a smartphone? Basically everyone. It's fun. We like to be outside. We like to have our smartphone. But when you're outside on a bright sunny and snowy day, it is nearly impossible to see low contrast text on that phone, regardless of how good your vision is. We also have a habit of using our devices in poor lighting. And again, that can affect our ability to see colors and differentiate objects. We also frequently are in situations where we have help. We have distractions. We have other people we're trying to work with. And if we're trying to teach someone something or show someone something and something is really frustrating, guess what? We're leaving that website. We're going somewhere else. It wasn't a pleasant experience. They're gone. And of course, we get affected by temporary issues. We get headaches. We get the flu. We just have bad days. We're short on time. We're stressed. And if things aren't easy to read, easy to find, I know I have left many a website because the text was just too annoying to read. Yes, that was how I felt. I felt annoyed by the text on the website. So I left. Simple as that. So what we want to do is consider that the majority of our audience is imperfect. The majority of our audience has difficulties. We are designing for the majority. And the majority needs accessible design. Now, a few definitions. The first one is WCAG, WCAG, Web Content Accessibility Guidelines. And they're maintained by W3C or the World Web Consortium. These are the same people who maintain CSS, HTML, and other standards. And just like the other standards, these are versioned. 2.0, 2.1, et cetera. Unlike some of the other standards, these have levels. Level A, level AA, level AAA. Level A has the fewest requirements and is the easiest. Level AA is considered the standard and in many lawsuits has been what judges have ordered a website to do for compliance. And level AAA is generally considered above and beyond. There are many criteria in there that are very difficult to meet. Also, the abbreviation ALI, A11Y. Sometimes called ALI, sometimes called ALI, tomato-tomato. Doesn't particularly matter how you pronounce it, but I do prefer the word ALI because it means I can say I'm an accessibility ally. I am a friend of people who have challenges in their lives because I have challenges in my life. A quickly about legal aspects of accessibility. More and more countries are putting into legislation specific requirements on web accessibility. Some requirements will go into effect in the EU in June of 2025. The US is pushing more and more accessibility requirements through both the federal system as well as individual states. And as we know, people in the US visit websites from other states. It happens. When there have been lawsuits in the US on almost every single circumstance, they have been ordered to meet WCAG 2.1 level AA. Quickly about an overlay widget because I get asked about this a lot when it comes to legal compliance. It is middleware. It sits between your website and your user. And it basically plays a game of monkey in the middle. Sometimes it helps content get along. Sometimes it interrupts and can even break websites. It's an automated script. And like all automated scripts, sometimes things go well. Sometimes things go poorly. And just as a general reminder, I am a web developer, not a lawyer. Let's talk about ingredients because recipes always have ingredients. Some ingredients are really easy to use. So for example, a giant chocolate chip. Really easy way to incorporate chocolate into your recipe. Just pick it up and pluck. So simple. Other ingredients may look like they aren't that hard to use, but actually are. For example, baker's chocolate. You will see most recipes say, get out your double boiler. And then be very careful about melting your chocolate because if you overdo it, you'll seize the chocolate and ruin the recipe. So it is a deceptive ingredient that can create a lot of challenges for new bakers because they think, oh, that doesn't look too hard. The photo up here is a yule log cake, which is a rather tricky one to make because it is very easy to accidentally crack a cake. And that means that the two pieces just break when you try and roll it up. Let's talk about web design. Colors. Colors are ingredients that go into our websites, just like chocolate goes into recipes. Some colors are great. You can see on the far left, we have a nice oatmeal color. It's a nice, soft color. Lots of things look good with it. It's very easy to read against. This is a great color. Very easy to use. Very few restrictions on where you can use it. Also in the middle. We have a nice charcoal. It's not all the way to black. So it produces a nice contrast with a lot of colors. And then we have neon pink. Neon pink is a very challenging color to work with. People just don't like to read content on neon colors. It's not pleasant. You don't go up to a big sign outside of a bar and stick it in your face. Well, I guess some people do. But most people do not. It's just not pleasant. So how do we take some of these colors that we want to incorporate in and get them to be friendlier, easier to work with, more beginner-friendly? One trick is to take colors in the RGB spectrum and switch them to the HSL spectrum. That is hue, saturation, and lightness. If we reduce our saturation to below 50%, and we take our lightness and we either move it lower or higher, keep it out of that middle range, then we get some very lovely shades that work great for people to read against. And here in this example, I dropped my saturation down to about 49%. And I brought my lightness down to about 40%. And now the color is much easier to read against. Fonts are a great ingredient. They're essential to any website. But if you go to places like Google Fonts, you'll see 1,500 plus different fonts available. It's ingredient overwhelm. It's way too much. So what we want to do is we want to give a much shorter, much simpler list of fonts, especially since we like to have clients participate in the process. It's great to have them participate as long as they have a short list and you give them a specific default. You either pick from this list by this date or you will automatically get this as your font. Another trick for the body font on most websites is add just a little bit of letter spacing. Letter spacing moves the letters just hair apart and can make readability significantly easier. Now, since all fonts are different, this does vary a little bit. But I found that 0.015EM works with a lot of fonts. The next thing to do when you're giving someone a font to consider is to give them text that they can read but are unfamiliar with. So I like to use pangrams. These are sentences that have all the letters A to Z. But they are sentences that people are typically very unfamiliar with. People have to think. They have to focus. They have to really read. So this makes them pay far more attention than if they were reading content that they are familiar with and also if they were reading something like L'Orium Ipsum where they don't bother reading it because it doesn't make any sense. It's also important to always look at your numbers and all of your uppercase letters and to check for combinations like ILLI, willing, billing, drilling. These can look very tight in some fonts. I don't like default aerial on these words because they get too smushed together. But if you add a little letter spacing, it becomes a much more pleasant experience. It's also important to check for ambiguous letters. These are things that look like other letters. For example, I, L, and 1. These three look very similar to each other. But some fonts allow you easy differentiation. Here I have Verdana up. And you can see that the capital I, the lowercase L, and the number 1 are all different. More beginner ingredients for websites. Images. Images are a great ingredient. They're just like our giant chocolate chip. We can just plop them down. The only consideration we really need to look at is alt text. And alt text is context sensitive. So it's always important to consider the context of the image when writing the alt text. Now it looks a little deceptive, popping over to a carousel of images. This is a very advanced ingredient. This is like our baker's chocolate. It doesn't look that hard. Recipes may make it look kind of easy. But it's actually very difficult to make a carousel accessible. And many, many of the page builders and the plugins that are available for carousels do not have accessible carousels. So a little bit more about ingredients. Good ingredients work for everyone. Using basic fonts. Using improved colors. Using simple images. And by using these elements and making these good choices, we can have our designers build us great designs that work for everyone and our developers can easily implement them for accessibility. Now on to some tools for saving time. Because everyone likes to save a little bit of time. Some tools are very simple. Like we have a whisk and a metal bowl. This is used all the time by chefs all around the world. It is a very basic, very useful, but don't try and make whipped cream this way. Your arm will be very tired. So if you want to make something more fun, like whipped cream, we'll use a stand mixer. Big, powerful, tell it to go, come back in five minutes and you got whipped cream. Here's an example of a tool that requires a lot of manual work for accessibility. This is a simple contrast checker. It compares A to B, mixes two ingredients together and gives us an answer. Well, that is good for a quick check. But if I were to do that for all of my ingredients, I'm going to spend over an hour trying to check all my colors because I'm going to make a few tweaks as I go. That's going to be a lot of effort. So what if we could put all the colors in at once? I've built a lot of websites and I typically need two to three background colors on most websites because that's just what design looks good. We also need headings, text, links, hover states, borders. A lot of people forget about borders. But when you have an input box, it's really great if you know where to put your cursor, especially when we're on a smartphone. I've been outside in the backyard with my dog and I'm trying to look at a form and I'm like, where do I click? There's no border. I'm supposed to click somewhere. I don't know where I'm supposed to click. Now, what's the dog doing? Wait, border. Stressful, it's upsetting. People don't like it. So a good tool for saving time is one that allows you to put all of your inputs in and then get an instant result of everything. And it gives you answers saying that you did okay. This meets all of the criteria or it'll flag if there's an issue. Another tool for saving time is to look at all of your fonts on actual examples. And again, we use those pangrams because it requires us to try and read the text and put some effort into it because it's so unfamiliar to us. So the purpose here is that good tools save us time. There is absolutely a purpose for quick checkers. I use them regularly, but there's also a purpose for the power tools that give us full comprehensive answers. Now, we have our ingredients and our tools, but we need our procedure for our recipe to put it all together so that we can actually create accessible designs. As a quick reminder, when we work with copywriters and designers or when we're doing the copywriting and designing ourselves, we always have boundaries. We're always told what audience that we're going to write to. We're always told what colors we're allowed to use. What is the brand? Overall, WCAG has 50 criteria for 2.1 level AA. That's a lot of criteria and a very intimidating list. We can actually handle much of that criteria with processes so we don't have to actively think about it. And the less we have to actively think about it, the more we can focus on our designs. So the first thing I like to do is eliminate criteria. It's my favorite thing to do with them because then I don't have to worry about them. So a number of criteria just don't apply to static mockups when we are building a design. They just aren't relevant. For example, here is an image of a video with a caption on it. Well, when we're creating our static mockups, we're not actually putting the whole video in. We're just putting in a single image so we don't need to worry about captioning. Then a number of criteria we want to just say no to. An example here, we have a moving logo carousel. We don't want to have auto-playing content. It has criteria about it and we can eliminate having to worry about those criteria by just saying no. The next piece of criteria we can eliminate with simple procedures. We just set a rule in our rules and when we follow it, the criteria is automatically met. Yay. So here's an example. One of the WCAG criteria requires that line height be able to be 1.5 times the font size. Well, as you've noticed through most of my presentation, my lines are spaced out at 1.5 times and here you can see a line height of one. It's just not as pleasant to read. So just use 1.5 by default and you're done. Don't do unnecessary work. Quite frankly, most designers have no idea what a focus state is and honestly, they shouldn't be designing for it. Most of the time I use themes that handle my focus states for me so I never even think about them. I never do any work for them because it's already been handled. So don't ask your designers to handle focus states. Don't show them to clients because it just gives clients something random to obsess about and we hide them just like we generally hide the washing of dishes from the main people. Some more criteria to solve in advance. Try to help designers to avoid making unintentionally poor choices. Here we have a dark red background with neon green text and as we already covered, neon colors are not good for primary text or backgrounds. They can be really fun to throw in as accents but people don't enjoy reading neon text and people don't enjoy neon backgrounds. Another criteria that I like to handle with specific to-dos is I tell my designers to account for roughly double the amount of text that is in a box. So here we have a section of text. We have these resized up to 200% and you can see that they are roughly similar. It's gonna vary based on the exact text you have an exact with but if your designer accounts for roughly double the content in their designs then it should work pretty well when you go to test for things like enlarging your text to 200% and it also helps to account for the inevitable content changes down the road. So let's combine it all together. What we want to do is understand that people have different skills and we need to help them by making choices to work with their skill levels. I regularly use a design service to do my designs for me because it's just not my favorite thing to do. Also I frequently get into the weeds on the code and I just can't always think of new designs. So what I do to prepare for my design service to do their work is I select the colors in advance. I use my fancy tools, I get my whole color palette built, I get it all checked and I tell them these are the colors you're gonna use. I pick out my fonts in advance and I let them know what those are. I give them the specific list of what they're gonna do such as setting their line height to 1.5 or what they're going to avoid like not putting any carousels in. The next thing I do is I provide text content in photos because designers are just not great at designing in a vacuum with no content. And I give them a basic wireframe. Now frequently I even do this by just recording a simple screen video saying, oh, here's an example site. It has kind of the overall wireframe that I want and I walk them through the wireframe and how I want that applied to what they're going to build. A last set of instructions I did for an e-commerce homepage and it took me about 30 minutes to get my colors, my fonts, I grabbed my existing to do and to avoid list and gave them the short screen video. The 90% done rule. The reality is something will change down the line. Even if miraculously it doesn't change between design and when you go live, the reality is content will change down the road. So you don't want to focus on getting it 100% correct. 100% done. Because it's never going to be done. It's a website, it changes. So make it clear to everyone involved, designers, developers, clients, that our goal in design phase is to hit 90%. This also helps a lot of people to not obsess over the little details. Font selection. What we need to actually tell our designers when we give them the fonts. We need to tell them a whole lot more than just use Helvetica typeface. We need to tell them which font to use, which one to use for our heading in our body as in many designs we like to mix up two different fonts for those. Occasionally even add in an accent font or use our heading font as an accent. I normally give them headings one through four. I almost never give them any instructions on heading six or heading five. And the reason is if you look at content and you actually make a table of contents of your content, you are almost never going to be dealing with H5 and H6. So I normally just set them in development exactly the same as H4. Because I've had 2,000 page websites and we never used an H5. Be sure to give them the font size and specific font weights. Make sure to include line height and paragraph spacing. Paragraph spacing is that little bit of extra space that comes after the paragraph. It makes things easier to read because they're more broken out. And always check your letter spacing. I almost always include it on body text and occasionally include it on headings. Depends on the font. Colors. As we showed before, we need a whole lot more than just five colors in our websites. So I encourage everyone to get a lot more colors. I've got an example list of CSS variables. And this is actually how I hand things to the designer. The tool I use gives me this entire list of CSS. While most designers have never written CSS, they can read that just fine. It says background color one and it gives you the specific color. And then developers love it because it's just copy and paste. So I make sure to give them the backgrounds, headings, bodies, links, hover states, borders, and accents. And if I have dark backgrounds as well as light backgrounds, I will have to give them a whole list for that as well. It's important to be very clear and specific. I have a reusable set of instructions that I hand out with all my designs that tells them exactly what to do and what not to do. Examples like don't put text on top of an image. This isn't great for readability, especially when the image and the text both change out later. And then it's always important to have checklists. Checklists help keep everyone remembering as many things as possible. Were the correct fonts used? Did they make sure to use line and letter spacing? Did they use allowed elements? Did they use any of the avoid elements? And just go through those checklists after. It makes it a lot less mentally intensive to review work. To kind of summarize what we've done, the earlier in your design processes that you are able to solve for accessibility, the less expensive the whole process is. Just like most things. If you find a bug early, it's really easy to fix. If you don't find the bug to the end, it can be hours upon hours to get that fixed. Recipes are to produce consistent results. The more procedures and formulas we have to make it consistent, the better our output at the end. People are not perfect. Our customers, our clients, they are not perfect. We have lots and lots of people with different abilities in this world, in this room. I see a whole bunch of people wearing eyeglasses. It's because people need different types of assistance at different times in their lives and we want to meet them where they are at. WCAG, this is where we go for our criteria. This is where we go for what we want to meet. It's important to remember that different types of ingredients require different skill levels. Just put in a few images. Almost anyone can get that coded up. But if you try to put in a carousel, that's very difficult to get coded up properly for accessibility. So in general, I avoid it. Better tools for saving time. Some tools are great for a quick check. Some tools are great for a comprehensive build. Using the appropriate tools at the appropriate times is very helpful. And of course, process, process, process. When we build out good processes, when we build out good to-do lists, we save ourselves a lot of time and money. So that they can flip the room around, I planned to take questions out in the gazebo right outside this room. So if you want to meet me out there, then I am happy to answer questions for as long as you want to ask them. I got plenty of water. So I just want to make sure you know you're in the right room. This is crafting seamless experiences, leveraging single-page applications for WordPress integrations, okay? So today's speaker, all the way from Australia, is Ross Mini. Yes, give him a hand, man, listen. That's pretty awesome. Ross is the founder of House Technology Group, an Australian group of companies focused on developing innovative technology solutions for businesses and organizations. He has an extensive experience in the tech industry and is passionate about creating products that make people's lives easier. Ross Mini. Hey guys, how you going? Good? All right, thanks for the introduction. Hopefully this microphone is putting the right direction. Here we go. I'm too short for the lecterns of this size. I'm gonna stand off to the side a little bit if the camera's gonna let me allow. Yeah, my name's Ross. I am your token Australian 230 PM speaker. Apparently there's three of us up on stage, which is pretty amazing at WCUS, 323. So I'm gonna be talking to you about my journey implementing single-page applications and the challenges that we had and how we overcame those challenges. Specifically, we were implementing them into a WordPress environment. So hopefully this will be of value to you. So I just wanted to get a feel of who was in the room. So who would be a complete beginner? Is there a beginner, like a WordPress user? How many of those would there be just here today? All right, none, perfect. Intermediates, who would identify as an intermediate? Okay, who would be a hardcore developer other than the WordPress? Okay. So the majority, all right. So who here knows what single-page application is? Okay, that's cool. Brilliant. Who here is Australian? Nice. All right, clearly at home then. All right, the first thing I just wanted to kind of make clear is that I am not first and foremost a WordPress developer. I am a software developer and kind of business analyst. That's probably the best way to describe. My team doesn't work directly in WordPress, but we do work with our sister business, House Digital, who does 100% WordPress. And we have a lot of cross-server projects. So, cool, moving along. Just got a few housekeeping things that I just wanted to get through first. If you didn't notice, I'm Australian. We generally like to take the piss wherever we can. Taking the piss is definitely different to taking a piss. It's just a translation. It's making light fun of usually ourselves. And Mr. Mullenberg just tweeted, I think, a couple of weeks ago that he wanted more art at WordCamp. So I thought I'd answer that call, and instead of using stock images in my slides, I've got some AI-generated stuff. So this is apparently an Australian writing a kangaroo, which is, yeah, there's a few more to come, but that's just a taste. Second thing is reminder, I'm Australian. So not only do we have a bit of an accent that you might have picked up on, but we pronounce some things differently. So as a bit of a public service, I thought that we would just get a few things out of the way ahead of time. How do you guys pronounce this? We pronounce it Cache, okay? So it's, this is Cache. So I'm gonna say this a few times, most likely. Hopefully you don't get confused, sorry. How do you guys pronounce this? All right, well, ooh, we got a mixed result. Let's say that again. Niche. Ooh. Was that niche or niche? There's no T in there. We say it niche. So it just heads up. How about this one? This is a mixed one, I wasn't expecting this. All right, so we say data. How do you guys pronounce this? It's actually pronounced EMU. You gotta add a Y in there inexplicably. But we get to choose how we pronounce this. All right, let's get to the good stuff. So I mentioned before that my team and I develop custom software applications, mostly for very niche purposes, where there's no existing off-the-shelf platform already available. So usually there has some very sort of, I guess, requirements that are, we work flows that are very unique, that sort of thing. And there's nothing that suits them. So we develop completely custom solutions. We use frameworks like Laravel and Vue.js to deliver that. But the concept of SBAs isn't unique to these technologies. So simple page applications you can develop in React and a number of other JavaScript frameworks as well. But the examples in cases that I'm gonna be using today do mostly use that framework. I was gonna have this slide just say, I hate WordPress, but I thought there might be like riots or something and they might kick me off stage and I thought it was prudent that I'd change it. But the key thing that I just wanted to have everybody take away from this slide is that I think there's a lot of situations where people try and use WordPress and they probably should not. So who thinks that medical information should be stored inside WordPress, for example? Anybody? I was hoping to like, switch somebody out of the room. Who thinks that like firearm information or that type of stuff, sensitive information should be stored there? Probably not, right? Yeah, that's the main thing that I just wanted to sort of sort of communicate. So I guess the question here is so why not WordPress? I mean, there's the obvious one, right? So the obvious one is security. If you're gonna be storing sensitive information in there unless you have the budget of NASA unless you have the budget of the NSA or like that you really shouldn't be storing this sort of stuff in the platform. And the next thing that I just wanted to go through is the performance. So who here loves the meta table? Who think, oh really? Yeah. Okay, let's talk afterwards. The meta table in my opinion is absolutely terrible. I think it's one of the biggest limitations in WordPress and this holding the platform back. But I mean, in WordPress you can do custom tables, even put those tables in different databases if you want. But ultimately, if you're working with large datasets, if you're working with stuff that you want to be secure, that sort of stuff, I still don't think that storing things in custom post types and so forth is always the best sort of solution. And then there's a flexibility side of things. So the WV querying aspect of WordPress is very limiting. And if you really want to be storing your data in the best possible way, so it's normalized and you've got discrete data, then I'm not too sure that WordPress is the best solution on that front as well. So yeah, you can use CPTs, you can use taxonomies, you can even have relationships between them. There's fantastic plugins like pods and so forth that allow you to do that. But from a flexibility standpoint, particularly for a lot of our use cases, WordPress is not always the best way to store that type of information. So is everybody on the same page with me about why we may not want to use WordPress for storing sort of this type of information? Cool? So the question becomes like, you might be sitting there going, well, Ross, if you go into all this trouble making these sort of fancy backend systems for people and custom software and so forth, why the hell are you just making them a custom website? And first of all, I'm a terrible web designer. And I'm a terrible designer just in general. But there's a lot more that goes into sort of coding a website than just doing the actual technical coding itself. And then I'm not an expert in that area. But more importantly, I think we need to sort of consider these types of things. So there's an expectation that things are in WordPress, right? But what's the percentage now? 60 plus percent, what is it, 65% of CMS is a WordPress? Customers are generally, if they're coming to us, they're generally asking for or coming to to our WordPress agency, they'll be asking for a WordPress solution off the shelf. So it's definitely an expectation that if you're building something these days, that it will be on WordPress for the most part. The other aspect of it is that most of the customers at least that we deal with still want to be able to control like the design and so forth of their website. And frankly, we were talking with some folks earlier and everybody is moving towards this aspect of just designing directly within WordPress from the beginning. Being able to use things like the new sort of block builder, particularly with 6.3 just released, be able to use page builders, having all that sort of flexibility. We're not going to be able to build that sort of stuff for a customer in a custom solution. So it just doesn't make sense to try and reinvent the wheel. And then there's a maintainability aspect of it. This is pretty broad, but at the end of the day, the WordPress backend is becoming pretty ubiquitous. We were kind of having discussions over the last year, so that it's almost a life skill these days. Like it's an expectation in some instances that people just know how to update content on a backend. So it just doesn't make sense for us to be creating tools to be particularly if you're updating your blog posts. So if you're creating blog posts, they should be stored in WordPress. It's just the way it is. Would everybody agree? Cool. Brilliant. Here's some more artwork for you, if you want. Apparently, these are platypus's. The AI is just as confused about what platypus's are and how they function as the rest of the world, I think. But they're playing Jenga. There's a bit of roulette in there as well. But hopefully that gives you a little bit of background on what I do and how I do it and why I do it and that sort of stuff. Let's talk about the actual case study that I wanted to go through today. So this particular customer is a collective giving circle. They are a membership-based charitable organization that manages a grant pool each year. And the members themselves are actually the ones that get to vote about where their money goes and where their membership grants go at the end of the year, which is pretty cool, right? But the challenge that they have is that they've just got so much admin overhead. So they need to manage their members and they're using a third-party CRM for that. They need to manage all of their donations that are incoming and they had a specific donations platform that they were using for that, for taking the donations on a regular basis. Then they had their email marketing platform. They had a zillion Microsoft Excel spreadsheets that were floating around. And then they also had their website WordPress. And they were trying to connect it all together with Zapier and it was just creating way more work for them than it was actually saving, frankly, which were trying to connect all this stuff together to fix up all the issues that they had as a result of Zapier not doing its thing correctly. So yeah, I mean, the challenge that they had is they wanted to drastically reduce the number of volunteer hours that we're getting expended on, on managing all of this stuff. And they also wanted to give a good experience overall to their members and hopefully retain more members and grow their member base. And just in general, they wanted to give it, I guess, an overall good experience, particularly on the website and any sort of digital communications that they were interacting with or digital assets that we were interacting with, sorry. So the name of the organization is 100 Women. If you Google them, you'll probably get a US organization, which is not related to them whatsoever. So if you are gonna stalk them, make sure you put the word Australia on the end of it. If anybody wants a website lead, you can go and check out the US guys. They need a website, just saying. Hopefully that was as diplomatic as I could be. But yeah, as you can see, that they came to us and needed a solution for making sure that whatever we built was gonna integrate delightfully with their new WordPress website that was getting built. We accepted the challenge. Is there any How I Met Your Mother fans here? Really? No one watching How I Met Your Mother? Good Lord. Nobody will get this reference then. Geez, I'm so confused. All right, so how could we have built this? I think it was skipped ahead, but how could we have built this? If we wanted to be comfortable, we could have used one option, which was iFrames, right? Who loves iFrames? Perfect, I think I got my message across, but terrible for responsiveness. Questionable SEO, I guess. Design flexibility is just not great. You don't have access to the document object model inside it. They're fantastic. Second option we could have done is built additional API endpoints on our custom software. Then we could have had some sort of code base or plug-in inside WordPress and communicated that way and then presented whatever interface we needed on the front of the Under Woman website. That doesn't sound like fun. We don't really wanna be managing multiple code bases, I guess, unnecessarily, and then we'd have to manage all the API endpoints as well. It would just be a nightmare, in my opinion. And we had a long-term vision for where we were going with this customer and what they were gonna need down the tracks. So if we were just building a single contact form, then API would have made sense, but that wasn't the case. We could have built the entire thing in WordPress, right? That was an option. I sort of explained why that wasn't an option before. We could have built everything with some of these forms and gravity forms, but we just wouldn't be able to have the business logic, I guess, and smarts in the system that we kind of needed or wanted. And that'll become a little bit more prevalent when we look through the things in the letter slides. The other option is just, and this is very common with SAS products, is that you just simply put it on another domain, right? So the problem with that is that it's just a terrible user experience for most of the people involved. So if you're sending somebody off-site for, and just to give you an example, some of these SPAs that we're building are for fairly minor things, like just simply taking a single donation. So who likes being directed off a site so that they can put in their credit card details and make a donation and be redirected back onto a site? Who, everybody love that? We didn't want to go down that route. So through the bin, and we use the SPAs. So just, I mean, it sounds like a lot of people did know what SPAs were, but I just wanted to quickly give a very top-level sort of overview of how they function. So when you have a traditional client, traditional website, rather, so the blue section over here is your traditional website. You type in your web address, browser, which is the client, goes off and gets, or requests, I guess, that website. The server sends back the document, and then if you decide that you want to change page, or you want to interact with it in some way, then it's essentially another request, and then you get back an entire extra page that you then register to the browser. Does everybody kind of understand basically how browsers work? Yeah, well, hopefully that word press conference everybody knows how that works. So SPAs are slightly different. The initial sort of page request is there, obviously, but any subsequent sort of requests are typically done in some form of JavaScript, and most of the time it's returned in some sort of JSON format, but not always. But the point here is that you're able to navigate around the SPA without having to have page refreshers. And this particular architecture just has a lot of benefits, but the biggest one is that it's just significantly faster if you have used an SPA before. One of the disclaimers that I just wanted to point out is that SPAs are absolutely terrible for SEO. Most crawlers won't be able to crawl them, so don't go trying to put actual useful content into SPAs. Most of the time, or all of the time when we're using SPAs, they are being used in situations where we just simply don't care that it's not being indexed. So we do not care that the donation form is not being indexed. We don't even want the member portal back end to be indexed, that seems ridiculous. So from a SEO perspective, it's kind of a non-issue. So I guess the point is here, don't go on create a blog interface, I guess, that is built on an SPA architecture. Disclaimer too, and this is kind of something that was brought to my forefront yesterday, is that SPAs can be pretty terrible for accessibility. And most of the issue comes as a result of the fact that if you could imagine that you don't have vision and you're attempting to browse around an SPA and it is changing what is in the document object model but you're not bringing brought to the place in the form that you would expect to be brought, then it can be very, very confusing. So if you've clicked the next button to move on to the next page, for example, then if you're not brought to the top of that page or you're not even told that you have changed a page, then that's incredibly confusing for a lot of people using screen readers and so forth. So just to shout it out, if you are gonna implement them, try and make them accessible. Please make them accessible. We did a bit of accessibility testing last night and surprisingly, ours are better than I thought they were. So we're gonna be talking with some of the accessibility folks hopefully this afternoon getting them tested out. So that'll be cool. All right, so I mean, this is basically how SPAs are implemented. It's super, super simple. This is what we hand off to WordPress kind of division, I guess, so I'll run through what's here. It's not very much, but you have a container, which is just a div. Generally that container will have a unique identifier on it and then the second part of it is just a single JavaScript file that will render all of the HTML and go and get all of the other required assets and it'll render it inside that div container. So SPAs can be full screen. A lot of them are full screen. They are the actual thing that you're looking at in the browser. In 100% of the ones that we use them for, we actually embed them inside pages because they're generally not an application in and of themselves. They are just a particular, I guess, portal or a component, I guess, of the overall solution. And you'll see that in a few slides. I think I've covered everything there. So let's have a look at some of the results. So this is a screenshot from the become a member. So this is, if somebody wants to become a member of 100 women, they would click on the big purple button that's at the top there. And this is what they would be showing. There's actually some text above this, but we removed it for the screenshot purposes. But I'm not sure where I put my pointer. I was expecting to be walking around, so I put my pointer down. But the area that is around that form, there is actually the rest of the website. In this particular example, it's using the Elemental. And that div that I showed in the previous slide is simply just put into that position. This is a very basic two-page form. And you might be asking yourself, why the hell are you using SBAs to build a two-page form? This doesn't make any sense. But there's a lot of good reasons for it. In this particular instance, we're doing a lot of things like checking if this user might already be a member, for example. We don't want people signing up twice to be a member. It is looking at how they found out about 100 women, for example. And that particular field is something that is managed in our CRM. And there's a lot of business logic also, if we were to go further down, which we can't. There's a lot of business logic around the types of memberships that are available and how they get, sort of, how they sign up for them and what the rules are around them and so forth. So we could do something like this in gravity forms, but we couldn't quite get 100%. We would need to, say, have gravity forms go off and sort of pull from API endpoints to do all of the things that we're doing on this form during the sign-up process. This one's even simpler, frankly. So 100 women, as I said, they're a collective giving pool. They get membership fees and then they all vote on where that money's gonna go. But people need to actually apply for those grants themselves in the first place. So this is kind of the first step of actually applying for that grant. And this is a custom system, which manages all of their grants. There's just one component of the backend system that we've built for them. This is just the front-end interface where they put in a single email address. It will generate a unique token and then send them an email with a unique link, which they can use to either start their application or even continue an existing application. And obviously to achieve that, we would need to have integration with the backend. So that would be another API endpoint if we had to do that with gravity forms. So this is the actual application process itself. There's eight tabs here. There's a lot of stuff here that it's asking for. But once again, there's so much business logic in here that we could do it in gravity forms and visually it's possible to do it in gravity forms, but we just wouldn't be able to have the same types of smarts that we have. Or if we wanted to, we would have to do a lot of gravity forms kind of programming unnecessarily. This is a screenshot of inside their member portal. And it has all the things that you would expect inside a member portal where you can change your details, you can change your membership level, all that sort of stuff. But the key thing to kind of have a look at here is that we have a navigation sort of portion at the top of the screen there that is outside of the SBA. And I was, I'm gonna get into a little bit more details very soon about how we kind of achieve that. But it's an example of where you would want to, you would want to show, I guess, a log out button if they're logged in. You don't want to show that log out button if they're not logged in. You don't really want to show the navigation if they're not logged in as well. And if they happen to kind of log into the member portal and browse around the website, you need some sort of mechanism to allow them to get back inside their member portal as well, right? If they're still logged in as far as the browser is concerned. So, what were the challenges that we had? You can enjoy this artwork of Kermit. I don't know if you guys have seen the meme of this. Like why is my code working? One of the issues that we had was just by virtue of how SBAs work, most of the time, at least in Vue.js, they add this little hash to the end of the URL which is a bit of a pain in the ass, to be honest. In our particular, in this use case, it wasn't an issue because it only appeared on the pages where the SBAs were present. It doesn't really matter if you go into the member portal page and there's a log in there and there happens to be a hash on the URL. But we do have it in other implementations where we have forms, for example, that are on the homepage and we've had to find workarounds for how to remove that hash. So that's something that's just done in the Vue.js framework. It wasn't a huge issue, but it's just something to kind of keep in mind if you are planning ahead to use this type of tech, I guess. The second thing that we had a problem with was caching. And it's in particular, it's not necessarily caching of the content or the delivery of what's coming via the SBA. It's more the delivery of that JavaScript file itself. So by default, WP Rocket and all the other caching plugins and even, say, Cloudflare will cache that JavaScript file, which is fine. But when we're doing fast iterative, I guess, changes to our back-end systems and we're having to deploy or sort of push, or sort of pull regularly, it's a pain in the ass having to sort of clear Cloudflare caching, clear internal sort of site caches as well. So just get that in mind. We actually have it not cached just for ease of use. All right, you guys are not going to get this either because you don't know how I met your mother fans, but I mean, we did have some major challenges though. We're not major challenges, but that's what, it's the reason people are here today, I guess. So how do we make this sort of appear visually seamless? That's kind of the key for the end users. And one of the big sort of keys to that is the CSS aspect of it. We found the best sort of approach to this is to, in our SPAs, just simply not try and implement any CSS whatsoever. Let the website itself determine that. And in our particular case, for the most part, 90% of the design that you saw there is actually being, I guess, rendered from the CSS that's already defined within Elementor. So the button designs come across, all the form fields come across in the same designs, a lot of the padding and so forth between fields looked good. We did have to do some tweaking as you sometimes inevitably have to do, but for the most part, we just needed to make sure that we had sort of unique identifiers and classes on the relative sort of components, I guess, and just make sure that it was structurally good from a HTML semantic perspective and then handle things in WordPress. This is just an example of how it also shows on mobile. So once again, we're showing the member area button, sorry, the my account, which is, I can't even read on any of these screens, the my account button is showing, obviously, when they're logged in. Logged out button shows when they're logged in and they've got a member login when they're not logged in. Pretty simple stuff, right? And we found the easiest way to manage this was in our actual SPAs to store a very deliberate variable in the local storage, which essentially just has a token and when the token is present, it just means the user's logged in and that means that we can just use basic JavaScript or jQuery in this case to determine when they're logged in and then just hide and show each of the elements when we need to. So it's pretty simple sort of stuff. One of the biggest things that I see, so from a security perspective, one of the biggest benefits that we have is the Laravel framework itself. So we don't have to worry as much about things like SQL injection, other types of vulnerabilities because the framework just takes care of it. But one of the biggest sort of security risks that I think is an issue in this type of implementation is just making sure that we have best price practice cause policy. And for those who don't know what that is, it's just a policy that defines who is able to embed and use that application on their website. So we obviously don't want people just being able to grab our code, just punch it into any website and that would be a recipe for disaster. You'd have all sorts of phishing problems going on and yeah, the sky's the limit in terms of what you could do there. The thing is in some situations you may want that being able to be embedded. So there's a lot of companies that just use this type of technology. So HubSpot for example, they have as part of their standard form sort of setup is an SPA. It runs a piece of JavaScript, it produces a form and you're able to embed it on your website. So in their situation it makes sense. I'm not sure how I'm doing for time here. But the question we asked it like, did this implementation work? And I would say that it did. We were able to deliver a solution that works seamlessly with the 100 Women website. And we'll be continuing to sort of use these in future. And just some examples of how we're starting to use those. We've implemented a number of sort of back end portals for our customers now using this technology. Because we think it's sort of the ideal technology to use to implement those. Even sort of basic contact forms as I said do make sense in some instances to use them. If you're doing lead capture and you are having that come into a custom developed back end system, then once again we can implement all that great business logic whilst they're filling out the form and provide the customer with the best possible experience. And then we're also in the process of further fleshing out capabilities of the grant management systems for a couple of clients now. So which is pretty fantastic. So that reaches the end of my talk today. I've got some socials, there's not too much there. But if you wanna connect with me, go ahead. That wraps up today's presentation. Thanks guys. Is there any questions? Sure. Yes, so you are correct. So we're implementing this code in all of those places. So in the donations page, in the membership sign up page and there's probably about, I can't remember them all off the top of my head, but there's about 10 different sort of SPAs that we have implemented so far on this site. But yeah, the website itself is built 100% in WordPress except for these SPAs that appear in various locations. And then the Lyravel site of things doesn't communicate back to WordPress at all. It doesn't really have a need to because most of the important information is stored within the backend system that we have custom software solution that we have developed. Does that kinda answer the question? Yeah. Yeah, so the question mainly is just why don't we build the entire thing in Lyravel? Is that? Oh. Mainly because our team is just more familiar with Lyravel, that's the main answer there. And frankly, at least in the non-Microsoft realm, Lyravel kind of has, in terms of PHP frameworks, it's by far got the largest market share. So we just, there's a clear winner in that space and we prefer to stick with it, that's all. Yeah, cool. Any other questions guys? Cool, okay. Our workflow is not ideal, I'll be honest with you, that's often always the case, right? But in this particular case, we actually set up staging URLs, which to be honest with you, they were just on the live site. There wasn't really any sort of risk of them being on the live site because they're in obscure URLs and there's no data. The database itself was a staging environment for our software application, but the pages that they were on were on the live site. And then, yeah, so we just fixed up all the styling on those pages essentially and then brought all that styling across. So, yeah, of course, there were private pages, yes, correct. Any other questions guys? Yes. What was that, sorry? Oh, taking the piss is very different to having a piss. So having a piss, for those who don't know, is urinating somewhere. And taking the piss is just generally, I don't know, joking around. Yeah, yeah, it's taking and then having it. Yeah, it's okay. It's very clear, I don't understand why there's a communication barrier. Oh yeah, you can also have some piss. Does anybody know what that means? It means you're drinking. Is there any other questions related to the presentation? I'm happy to take other questions too. One at the back. Yeah, so the question was, were we using any sort of member management system on WordPress and the answer is no. So, and that's one of the keys that, like we could have gone down the route of using something like member press or a myriad of other sort of solutions for managing members, but we just didn't want a million users in our WordPress backend. So, yeah, that's obviously one of the solutions that we looked at at the beginning, right? And we weighed up with the pros and cons of doing that. We could have taken something like member press off the shelf and just highly customized it, built all the PHP for the business logic and tried to build the solution entirely inside WordPress. But in this particular instance, we just decided not to. Hopefully that answers the question, yeah? Cool. Yes, 100% of them use Vue.js because they have to for the single page application kind of technology. But the way that they render to the page is entirely HTML. So, when a single page application does eventually render the page after the page loads, the document object model is updated entirely so screen readers can effectively read it fine. No doubt, you can do much more complicated SBAs than the examples that I've given today. And I was grilled by the accessibility team yesterday about how they didn't like single page applications. So, I was sweating while I was going through that process. But it turns out that the way that we've implemented these, for the most part, is reasonably accessible. So, yeah, hopefully that kind of answers the question now. Cool. Any other questions, guys? How far... I don't have a time on me. Five more minutes. Five more minutes, brilliant. Any other questions? Yes, more friendly to SBAs. I don't know. The thing is, SBAs are kind of a technology that you could implement into any platform, frankly. I don't think there would need to be anything that would need to change about WordPress itself. I'm just kind of thinking on the fly here, because most of the challenges that we had were ones that were related to CSS and so forth. So, as long as you CSS is good inside the WordPress platform. Sorry? Oh, yeah, yeah, I guess if we... So our development team is sort of filling in grain with Bootstrap, which is... Yeah, so we started off kind of rendering all the Bootstrap classes to it initially and it was just a dog's breakfast. So, yeah, we had to go through and removal all that sort of stuff. But that's not a fault of WordPress at all, but yeah. I'm not sure if I can come up with any sort of changes. In general, I think if WordPress could somehow work out a way to move away from the meta table, that would be fantastic. But apart from that, no. Thanks, man. Hopefully that answers the question. Any other queries? I thought I saw a hand, but then it was a microphone instead. Cool, all right. Well, I think that wraps this up, guys. Thank you very much. You know, you're in the right session. This is the Web Accessibility is an inside job. Okay. So I am excited to introduce Sumna Davenport. We've met before, so I'm so excited that she's here. Sumna has been designing websites since 1997 and was introduced to WordPress in 2008 and fell in love with it. Web Accessibility is her passion. She's a member of the International Association of Accessibility Professionals and an active supporter of various disability organizations. Her passion is to educate web designers using WordPress on the value and ease of universal and accessible design. Through her longstanding organization, Sumna M. Davenport and Associates LLC, she and her team have built, maintained, evaluated and remediated dozens of WordPress websites to WCAG 2.1 success criteria. Sumna is an active, Sumna is active in accessibility and legal conferences and educational venues, regularly speaking on topics related to compliance issues for WordPress websites. She has been invited to present at Tech Access OK and John Slayton AccessU, Local WordPress Meetup Groups and WordCamps as a founder of WA11YWP, she and her team conduct ongoing educational events. In early 2020, she and two colleagues started a local meetup group to discuss WordPress and accessibility and have been invited renowned speakers on accessibility topics to be guest presenters. And she has spoken at various WordCamps throughout this ecosystem. I'm so excited to introduce you to Sumna M. Davenport. Thank you, Ada. And thank all of you for being here today. I also wanna thank the WordPress organizers and all the volunteers. This is awesome. I am so impressed with everything that you've accomplished. I can tell you've put in some long, dedicated hours. I also wanna thank a couple of people that because of them, I'm able to be here today and speak. One of them in the room is Joe Simpson, Ron Amick, Rob from MainWP and Yoast, and of course the meetup groups in my area, Santa Clarita Valley Meetup and Accessible Web Plus WordPress in San Fernando Valley. So thank you all the people who are in the room today. I know it's been a long day so far and I hope to keep you awake for the rest of the afternoon before we get to the good times for dinner and cocktails. I want to let you know that my slides are available but I also have to warn you, my slides are not full of text. My slides are mostly images. I learned a long time ago that people remember images. So you may not remember the words I say exactly but if you see something that's an image that I used, it will remind you. It's a nice trigger so I happen to use images. So you may find my slides at bit.ly, that's B-I-T dot L-Y forward slash W-C-U-S-23. And I'm going to allow you to know in advance that I may be standing at times, I may be sitting at times. Those of you in the room saw that I walked to the stage with a little bit of assistance. So if you see me disappear behind the podium, I'm still here as the kitten is sitting on the keyboard of a laptop computer looking at the screen. It's a designer and there's a beautiful butterfly with wings of gorgeous several colors. It's a developer and there's a picture of code that is used on a website. There's a silhouette of two people standing in capes. Wait, it's a web accessibility superhero. Faster than a speeding bullet list. Perceivable, operable, understandable, robust. Able to leap tall landmarks in a single bound. Header, section, navigation. Consumes WCAG success criteria with every meal. More powerful than a loco overlay. And on the screen we have a computer screen with the words accessible to all and we have superheroes, avatars, that are showing up on screen. Your web accessibility superheroes are a large group of people, many in this room. It is a group of people of all ages, all sizes, all shapes, all abilities and all disabilities. It is a group of people that you may find your quiet, sweet, mild mannered next door neighbor or it may be your outrageous loud-spoken redhead or someone with purple hair or pink hair that just won't stop talking about it. But that's okay, it's that important. But one thing this entire diverse group of web accessibility superheroes have in common is they all know that web accessibility is an inside job. On the screen I have a beautiful tree. The leaves are a variety of colors but you can also see the roots. When this tree was planted it was very important that that seed be planted appropriately. Those roots now have to be nourished. They have to be tended to regularly. In order for that tree to maintain its beauty and its growth, the roots cannot be ignored. So why web accessibility? This is a question that I do get asked at times and so I'd like you to think. Are you interested in web accessibility because you found out from a web aim report that over 95% of websites when tested were not accessible and the entrepreneur in you said, well, there is a business opportunity. I can make a difference. Or are you one of those people that recognize that it's more than 25% of our population globally that are disabled because it's not just those that are registered on the statistics, it's also those who have friends and family who care and they only wanna do business with businesses and websites that are ethically accessible to those that they love. And that percentage is awfully low because it doesn't include situational disabilities or people like me today who have a temporary disability. In my case, I had a choice to make between falling over the dog or falling off the sidewalk. And you can tell, the dog won. So that number of percentage of people who need a website to be accessible is actually larger than that 25%. Or are you one of those people that is involved with web accessibility because it's the right thing to do? Or is it D, all of the above? Personally, I believe it's D. But there's also a question that I want you to ask yourself. Why is web accessibility important to you? And why do you want to be a part of making websites accessible? Because that affects how you're going to talk about it. The who, the what, the why, and the how make a difference based on how you are committed to or perceive or are involved with accessibility. If you are someone who is passionate about accessibility, you care about the who. And you care about the what, which is making the website accessible, making the internet accessible. And you care about the why because they deserve it. It's the right thing to do. And in some cases, it's a civil right. And you're also the type of person who is going to explain it ethically and you're going to correctly do your web accessibility as part of your baked into the project. It's not an afterthought. When I ask people how they talk about web accessibility, I can get an idea of what kind of commitment they have and the struggles that they're facing in talking to their clients. And in my perception, the more that you're involved with web accessibility, the more you understand its value, the more you feel for yourself that it's a benefit, the easier it is to talk about. Too many of our clients, as we learned from the web aim report, never learned about it initially, never thought about it initially and their web person didn't tell them. And so when web aim does their one million site review every year and they find that over 95% of websites are still not accessible, there's a lot of education that we need to do. I hear people tell me that web accessibility is hard. You know, sometimes getting up in the morning is hard. But I'm glad that we do. I remember when I first was introduced to WordPress and somebody said, hey, it's so easy, you're going to love it, it's great. It wasn't for me. It was hard. I didn't understand what it was I was supposed to be doing, how I was supposed to do it and how come they thought it was so easy. There was a learning curve. And it's the same with web accessibility. If you have not done it in the past and you're just now learning it, it may occasionally seem hard because there's a learning curve. But once you understand it, it becomes an automatic part of the work that you do. You build it into every website from the planning. It's not an afterthought. When I go out and buy a new car, if I at that time say, well, you know what, just give me an old car and don't include any air conditioning, I'm doing okay until we come to a day like today. Here in DC, this humidity is just knocking me out. I like the air conditioning. So now I would have to take my car back to a dealer or a car place and have them install air conditioning for me. They're going to have to take it apart. They're going to have to adjust a whole lot of components that possibly weren't needed if the air conditioning had been installed in the first place. It's the same with web accessibility. When we build web accessibility in the initial stage of our website, it is so much easier than going back in after the fact to remediate and undoing the work that we've done, taking it apart step by step, putting it back together, making sure everything plays well together, and that can be very frustrating. So if you want to make it easy, then we start by letting it be easy. If you're the type of person that talks about web accessibility and on the screen I've just placed a face of a cat and a dog with horrified looks on their face. If you go into a client and say, lawsuit, lawsuit, lawsuit, you're going to get sued, everybody's going to take your money, you're in trouble, I'm here to save you. My experience has been that client is the least receptive. Reason being is now they feel attacked. You may be not the one that's attacking them, but they feel attacked. They feel betrayed because whoever built their website didn't include it. And the people that they take it out on are the disabled community. They blame the disabled community that they're in trouble. It's an emotional thing. So my recommendation is please don't start there. Why would we want to give ourselves something difficult to overcome? Some people think that's the easy way through the door, it doesn't work for me. I can't tell you it will be easy for you not to do it or to do it, but in my experience it is the more difficult way. And I personally like things easy. It's so easy to learn about web accessibility. The information is around us. I always tell people start with the course, the free course on w3.org forward slash wai and it is the introduction to web accessibility and it's free. It will go over the who, what, how, why, give you a real up close and personal look of at people and the struggles that they have trying to access a website. You will be able to witness through videos people that need the website to be accessible and the difference that it makes. I suggest looking on your dashboard of your WordPress site, there are a number of meetups around the country, around the globe that focus on accessibility. Just do a search and you will find them. And they have a number of meetups that focus on accessibility on WordPress. And you can find them through your WordPress dashboard or through your meetup. Obviously, come to WordCamp. We're here, we're working together, we're networking, let's talk web accessibility. And my favorite is the California State University of Northridge, CSUN, has a disability accessibility technology conference once a year in March. Over 5,000 people in attendance over four days and all we talk about is technology, web accessibility and user experience. So if you have an opportunity to be near Anaheim in March, I would suggest don't miss it. And of course, who can forget? We've got the web content accessibility guidelines. When I was first brought to my attention that it was my fault that websites were not accessible. And I certainly was embarrassed and humbled to find that out. I thought I was building great websites. I was really proud of them. But someone that is close to me, who is blind, wasn't able to access these sites, so I would describe them. I thought I was doing a great job. Until someone from Freedom Scientific showed up with a screen reader called JAWS and went to various sites and showed her what these sites sounded like through a screen reader. I was so excited. I said, here, here's one of the sites I built. Please, go there. And he did. And it was horrible. So I thought, well, okay, fine. Here's one I just finished. I'm so proud of this. Please go take your screen reader to this site. So he did. It was even worse. What that screen reader said is it found its way across that webpage was not what I was hoping it was going to do. And I said, ah, your website is really messed up. And he said, no, ma'am, your website is really messed up. I learned that day that I was the person that was causing the issue. And I sought out to find a way to learn. Today, we have a lot more places to get education, but the standards, the web content accessibility standards give us all an even working ground. I would not recommend that you attempt to digest and absorb all of these at the same time. It'd be like having your favorite meal laid out at buffet and you go over there and you say, I'm just gonna have it all, all my food at the same time. Not only is it impossible, you'd be sick at trying. So please do not do that to yourself with the web content accessibility guidelines. Take them, reference them, access them as you need them. And you will find that doing web accessibility becomes easier and easier. However, don't just rely upon WCAG. We have humans that access the web. We need to be concerned about the human, the user experience that's not technical. So there are things that we need to remember to do beyond the technical portion of WCAG. Why would we want to use WordPress for web accessibility? Could it be that the majority of websites around the globe are built on WordPress? Could it be, well, that it's easy to learn? It has a learning curve, but generally easy to learn. Could it be that it is customizable? Could it be that there is a team on make.wordpress.org that is dedicated to the accessibility of WordPress? And yesterday at the contributors day, I had the pleasure of sitting with a number of folks that their passion is web accessibility and making sure that WordPress inside and out is accessible. So is it these four things or is it D? And together now, all of the above. That is for good reasons to use WordPress to build your site. Plus we have all of the support that you get here at WordCamp and beyond. We'd have a lot of AI that is shown up. Some builders are adding AI to their software so that when you build a site, they offer, hey, would you like AI to write your content? Would you like AI to write your alt text for your images? Do you want AI to do your work for you? And there are pros and cons of saying yes. Yes, AI can make our job easier. Yes, AI can write a bunch of content for us. However, I've noticed that when AI writes the content, sometimes it sounds just like everybody else. I'm no longer unique. So my website won't be unique. I also have noticed that my disabled friends have told me about the bias in some AI. I have a friend that asked AI to write content relating to the ease of hiking for a disabled person. What came back, she said, was not only insulting. It was demeaning and it was wrong. I have another friend who is deaf and she asked AI to find her some images of deaf people like her. Every image that AI brought her either had a person wearing a headset or one hand up as if they were gonna do something with that hand. My friend does not wear a headset and she does not do ASL. She, excuse me, sign language, she reads people's lips so those images didn't represent her. But then we thought, well let's try with a blind person. That maybe is more common. We asked AI to show us images of blind people. Every single image the person was wearing sunglasses. I have a number of friends that are blind and none of them wear sunglasses. So AI has a bias. It is very important that if you use AI to write your content, to assist you in your work, there must be humans involved and the picture on the screen is a robot and a human shaking hands. So that if you want to use AI, then please go in and edit what has been offered to you to make sure that it is correct, to make sure that it is accessible. It cannot do our job for us. I realize for those of us who remember that movie that came out a long time ago, about the space Odyssey 2000, it was about a robot that was taking charge of everybody's life on the ship and at some point the robot got so smart that it decided to take control. And when the human told the robot to shut down, it said, I can't do that Dave. And unfortunately Dave lost. So we cannot rely only on AI to do our work. We can use them to assist. I have an experience by using AI to do some alt text for an image. And on the screen you see a skunk in the grass. A couple of flowers. And I had the text auto-generated for this. And AI told me that it was a picture containing grass, flowers, animal, mammal, kitten. I don't know about you, but that's not exactly the kitten I want to take home and cuddle. If this image was on a website about kittens, I think the users would probably wonder what kind of kitten. And if it was on a website about skunks, I think the users would probably wonder why a kitten was on a skunk website. So in either case, this alt description does not work. This is where you would need to go in and correct it. Alt text for all of your non-decorative images. And it is so easy in WordPress to do this. You go into your media library. When you upload an image, there is a field that says alternative text. If you did not add that alternative text when you originally uploaded the image, you can go back into your media library and click edit for that image and you will still find that field. You want to put a short description of the alternative text for that image. You don't need to say it's a photo unless that's important to the content. You don't need to say a picture of. You just want to add descriptive text, short, descriptive, end it with a period, not a lot of text, not a lot of talking. This particular image on the screen is a pink ribbon that has pearls on it and it's on a website that is breast cancer awareness and this image was placed in the content when they were giving away pearls as part of a campaign. So the alt description on this particular item is a pink ribbon with embellished with pearls because it fit the content. Another place on the website, they changed the alt text because it didn't fit the content and they wanted it to fit the content, which is appropriate. Now in order to do that, they couldn't do it in the media library, they had to go through a text field where the alt description was and manually change it for that other page because it was important to them that they wanted to make sure that the images fit the content and the alt description also did. AI is also good at doing captions for our video. We can caption live speaking events, we can caption videos. Doing so not only is now a requirement for a lot of videos, but it also relates to the image and brand of your client. If they put videos on their website, how well done those captions are, says a lot about that client and how well you do that for the client, says a lot about the services you offer. Now my name is Sumner, that's S-U-M-N-E-R and many times AI has said my name is Summer with an M, two M's and I must say I'm not a season. It is also said I am Sumter, which I think is a fort somewhere in the south where some war was. There you go, see? That's not me either. It is also called me Thumper, which I know is a rabbit in a Disney movie, but I also know that there's a video game from the 60s or 70s called Thumper. But my favorite is it calls me Thunder. Now I know at times that I do get loud and people have commented when I get excited that I do, but come on, this one's just rude. So AI does its part, but seldom does it get my name correctly and I personally think I have an easy name. So when you think about what AI will do to your client's voice to the words that they speak in their videos, it's important. A few years ago, we had a presidential inauguration in the United States and Amanda Gordon read one of her poems. What she said was a country bruised but whole, benevolent but bold. And those of you in the room can see that that is not what AI said. It said is bruised but whole, whole, benevolence but bold fierce and. Now it is kind of amusing except to someone who really relies upon captioning. So if a deaf person wanted to know what she really said, that was not it. And we have to be careful if that's the way AI is hearing the voices. Some of our clients may not like that either. So in a live presentation, we want to make sure and we are very fortunate that we have a white coat captioning that is doing live transcript today for you. So we have a human that is capturing our words. So we won't have those kind of mistakes. If you are a person that likes to sing along with music and you like the lyrics, well, don't ask AI to give you the words to root off the red nose reindeer. Because what it says on here in the English language I'll say that R-E-A-D can be read and it can be read. So we'll give them that. But when it says red off the rent, those reindeer, I think it's way off base. So here's where you could use AI to begin with, but now hopefully you're seeing that human needs to get in there and make some changes. AI is also what runs the automatic checkers that so many people use to test websites for accessibility. And on the screen I have an image of what looks like a stamp that says test past, but those that can see this image can see that there's some pieces missing from it. The words kind of aren't filled in all the way. It's kind of scratchy. It's just not as crisp as you would expect for something that had just passed. So what that is telling me is that AI is not 100%. In fact, yesterday when I was in the contributors day at the accessibility table, there was a person sitting next to me who shared an article that the government in the UK ran a test on the 10 most popular automatic web accessibility testers. And they wrote a blog report on their results. So what do you think was the highest level of finding, oh wait, let me tell you, they wanted to make sure that it was a fair test. So they created a webpage with 148 errors, intentionally created these errors. They knew what they were and they knew that they should be easy to find. So of all of these 10 automatic accessibility checkers, some names some of you may know and use, what do you think was the highest level of success? Anyone? 70 you said? Thank you, but. 30? Close. That highest level of accuracy was 40%. It got as low as 19%. And these were common errors, errors that they knew would be found in almost every one of their government websites. So they were appalled to find out that AI could not find them. This is why if you use an automatic tester to test your website, you need to include persons with disabilities. The statement that nothing about us without us means that if you're going to build a website that's accessible and you want to make sure that it is, let us test it and tell you. I feel very fortunate that I have a team of people that work with me and many members of that team are persons with disabilities. So they will give me up close personal experience feedback as to whether or not what we created is actually working. So one of my associates is blind and he will test with the JAWS screen reader. And he will give me feedback as if he went to that website for the purpose of buying or using or gaining information from whatever was posted there. And he will tell me how easy was it able to navigate? Did it recognize the code to tell him what was the most important thing on the page, the H1? Did it tell him how many H2s were on the page, all the subheadings? Was he able to get to the various content that he wanted and use the forms? If not, then we need to fix it. Where the AI may have told us it was okay, always good. He will also tell me if the alt text descriptions were sufficient for the content on the page. AI will not tell us that. It will tell us there is text and text description, but not if it's good, if it fits the content of the page. So we must have the human get involved to let us know that we're doing it right and we're on the right path. When we want to include web accessibility in our satchel and in our toolbox, what we're offering our clients, it is very important that what we offer them reduce so with integrity, that we are able to tell them, yes, this site has been tested, looked at, overseen, participated in by persons with disability, the users that are going to access your website. And so now I know that at this point, people go, well, I don't know anybody. Where am I gonna find these people? Well, while you're here at WordCamp, you could kind of meet a few people and we will tell you where we find disabled workers to work on websites with us. Or you could go to a company site called Nobility, that's K-N-O-W-B-I-L-I-T-Y. They have an entire division where they employ persons with disabilities for the purpose of testing and assisting with remediation of websites. So that now you don't have to employ additional people, but you certainly can have additional people be employed because you use their services. This is very important. My company, the majority of our clients are brought to us by attorneys, attorneys who are representing companies who have either received a demand letter or are negotiating a legal settlement because their website was not accessible. So even though it's not on my list of how I present web accessibility, it's how I spend most of my day. I'm a specialist in web accessibility, I do not call myself an expert. I personally believe that an expert has all the answers or a whole lot more than I do. However, because this is what I specialize in, I know where to get an answer. So I don't have to fill my brain because if my brain gets too full, it falls out the other side. So I do keep people close at hand that can help me when I need an answer. So I wanna share with you quickly the top three things you may not have thought about that we see most often come across some of these cases. Now, I know when I was talking to someone earlier, he said, oh, it's always color contrast and I am here to say, no, it's not. Although color contrast comes in a lot of the time and it appears that web designers are now paying more attention to it, what comes in more often than anything is the structure of the website. The structure of the website that is not accessible to a person who does not use a mouse. Can someone go through that website using only the tab key on their keyboard? And you can test that very simply. You go to your browser bar where your URL is, go to the end of your URL and hit the tab key on your keyboard and keep hitting it and see where it goes. Does it follow the flow of your website? Does it land where you are expecting it to land? Does it go from left to right, from top to bottom? Sorry, I just hit my microphone. If it does, yay, if it does not, then you need to revisit how you structured your website. Are your headings in order? Do you have proper navigation? We have found in our cases a number of sites that the tab will go to a navigation, but if there's drop down and it goes to the first one on the drop down, you should be able to hit your space bar and have it launch wherever that link is supposed to go. If it doesn't, that needs to be fixed. That is the one we see the most. The other one we also see is if the tab lands on a form and it gets stuck, we call that a keyboard trap. The one that we find the most is when you have those dates that have that carousel and you have to find the date for your month, your date, your year, I don't like those because I am spinning forever to find the year I was born. And at the same time, however, for someone using a keyboard, it can be trapped. They can get stuck there and never get out of that field. So unless you can find a way to fix that on your website, don't put it there. Give the user the opportunity to manually enter that date or the time or whatever it is you were using that carousel for originally. If we find that there is a problem with the keyboard only navigation, that's going to be on every single one of your pages in your website. So it's quite global and serious. If they cannot access your homepage, how are they going to access any of the information within your website? And this is what we find is in a lot of the cases. Sometimes it's easy for us to fix by getting rid of a particular plugin they may be using for a menu and finding another one that's better. Sometimes we have to manually have them rewrite their menu. So it really depends on how they built the site, either way we've got to take it apart to fix it. The other thing we see a lot, the issues with is the headings and design. And what I have on the screen is cement blocks in a path in the grass. I personally suggest that the people that work for me before they start working on a website, they plan it. They know what's the most important information they want to convey, that's our header. What's the second most? What supports that header? What are H2s going to be? And do we have information that supports those subheaders that would be an H3? We plan it in advance and that same plan applies to all pages. If we have not planned out our H1s, H2s, H3s and so forth, I saw a site that came across my desk just before I left for this trip and they had their H1, probably about two thirds the way down the page. On the next page they had eight of them. And when I asked why, and in between these H1s they had a few H6s. And I asked why and the designer said, well it's in the style sheet. If I want that size font and that look, well then that's what the style sheet says. So I'd like to suggest to not be controlled by your style sheet, that do not use it to style and design your website. You can change what those H1s, H2s, fonts and such are in your style sheet, but don't let it control you. You are the one that determines what that styling is and make it consistent. That also brings in the design and the colors you use and the layout. We have a site we're working on right now that every page gives the impression it's a different website. They thought it was cool. It gave me a headache. Be consistent in your design so someone knows they're still on your site. And by doing so you make it easy for the user to get the information they came for and follow the path. Some of you may be aware that there is a report. It's called the Pound Away Report. You can Google it. It was done by a UK company and they found through all of their studies and statistics that over 60% of people will bounce from a website within the first four seconds if it's not accessible. So if you have an e-commerce site and somebody lands because they wanna buy a product but in that first four seconds they can't navigate, they're gone. Your client has a very high bounce rate and a very low sales rate. If you have a site that's informational and they cannot get to where they think they need to be on that site in the first four seconds, they're gone. That's a very high bounce. So if you want people to stay on your site make it a design that makes it easy. Make a path so when they land where do you want them to go? What is the user experience? What do you hope they want to accomplish when they land there? Are they looking for answers and information? Make it easy to find. If they want to buy a product make it easy for them to find the product, find the product description, get it into the cart and check out. Play customer and see what obstacles you may find. This is also another area where it's essential to have a person with a disability test that portion of your site. E-commerce sites are kind of in the target right now because they're so popular and people really need the information. But if they can't buy what they're trying to buy when they get to the site, they're gonna bounce. Make it easy for them to find what they want to buy. Have a person with a disability go to the site, try to buy something and tell you what obstacles they had to overcome to do so. I believe I've spoken fast but I promise that there would be 10 things that I would suggest that you do. Accessibility should be at the top of the list. It should be baked into your website. It should be part of your plan. It should be everything that you do with a website should have accessibility in mind. I do suggest that you go visit thew3.org and take that free class that's so essential. And remember nothing about us without us include persons with disabilities in the work that you do. Double check the use of your AI on your alt text. Make sure that your descriptions fit your content unless it's decorative and then make it so. Make sure that your captions are correct. And a friend of mine called Merrill Evans who is deaf has coined the phrase corruptions because if they're not correct they pretty much that's what they are. So make sure that your captions are correct. Even though I will answer to thunder. It's not my name. Do more than auto checkers. They're great to start but don't let them be the end of what you do. Make sure your structure is correct. Make sure that a person with a keyboard only can access your website. Test it for yourself. Make sure your design is consistent. I suggest that you join the make.wordpress.org and contribute. This is not a place that you go post a question and get help and answers but it is a place that you have knowledge and expertise to be able to share with others as well. It is a place though if you wanna get answers you can go peruse what people have posted and you might find what you're looking for but it's not a help desk but it is an opportunity to contribute to WordPress. So you go into make.wordpress.org and you look at all the available committees and see the one that you'd like to participate in. If you really wanna learn how to do captions I suggest you go to wordpress.tv. Pull up a video or two. There are instructions on the website how to do captions for WordPress TV. There's videos there that have been there for so long that they were never captioned. And so that means that certain people cannot watch those videos. Be part of the contribution and go and help by making those captions. You will learn after doing it a couple of times the easiest way to do it. But there are instructions step by step right there on wordpress.tv to do just that. So of all of this that I had said you too can be a web accessibility superhero. It's not that difficult and it's a whole lot of fun. I met someone last night and he said if you had three takeaways from what you're going to share today what would you like people to remember? And I said well, after pondering I would suggest you commit to web accessibility. Make it important. Secondly, do it ethically. Don't be the person just throws in a plugin or something else and tells the client that's as good as it gets. And please, now that I've told you that the AI is not going to do the job for you don't promise a client 100% and certainly don't guarantee. And third, have fun. Web accessibility can be fun. You're making the internet better for everyone. And you will be a person that is standing apart from the crowd. You will gain new clients and fun clients when they know that what you offer is inclusive. You may not know that certain clients have a disability because some disabilities are not visible. I have a client that they wanted to change the colors on their website and I said you really can't do that because the contrast is really bad. And he said this is what I want. I said okay. So we walked around his office with my laptop asking various people, what do you think of these new colors? Okay, everybody gave their input. We walked into his partner's office and his partner said stop. Don't ask me, I'm colorblind. He didn't even know that his own partner was colorblind. And when I showed him the contrast on the colors he wanted to select his own partner would not have been able to read what was on his website. So he would have disabled his partner and his partner's access to that website. So you will get the opportunity to educate clients in a way that no one else will. Be their advocate as well. Make sure that when you make their website accessible it's because you want them to succeed. The better their website is the more users that it will attract and users that will come back. They will be happy with you. If you put them in a position where they don't get the results that they want they will not be happy with you. But they are according to the web aim report over 95% of the websites could use your help. It's a wonderful opportunity to make a difference. I gave my gratitude at the beginning but I have this slide up here at the end as well because I'm very grateful to be here and be able to talk about web accessibility and I haven't seen a sign come up yet so I'm assuming that I have time for questions if someone has a question. Yes. Do we have a microphone or can you yell loud? Okay. I'm just curious if you're aware what is the most common screen reader at the time that people who are visually impaired are using. Back in the day when I first started building websites you had to buy this very expensive thing and are there tools people are using now that aren't so expensive that are built into OSs? Great question and thank you for asking. And here's where I'm glad that we had live captioning because up here I could not hear what she was saying but I could look at the screen and White Coat made sure they understood you correctly. So she asked about the screen readers. The JAWS was the first one that I was introduced to that was introduced to my family and it is the one that you do pay for. However, NVDA is a free download. You can go to NVDA, you can download it to your computer and by doing so you can test it out for yourself and see what it sounds like. You can go through the adjustments of the sound and the speed. Most of the people that I'm associated with that use a screen reader on a regular basis they have the sound very fast. The voice is speaking very fast faster than I can understand but they do and that's all that is important but you can see the controls that they have for their screen reader. There's also the ones that are built into the accessibility features on your Android and your iPhones because they have been upgraded to include accessibility. You can use those to check out your mobile placement of your website. How is it functioning on mobile devices? You can also get NVDA for mobile. So you can see if a person is using a screen reader separate from the one that's built into the phone or the tablet and like I said it's a no charge unless you wanna give them a donation which is always great and so there's that. I've also been asked from time to time the font that I use on my slides is called Atkison Hyperlegible and Atkison is an organization for the blind and the reason that I choose the font it has the appropriate spacing, the appropriate size and all of the letters are very clear that you can read them. So when you choose a font you want to make sure that as many people as possible can read that font and I've received a lot of comments by using this font that it is readable and it's not harsh on the eyes. Yes sir, awesome question. I don't see that it came on the microphone so I'm gonna attempt to repeat your question, okay? You were asking about carousels and when something changes images from one image to the next or when it changes one text to the next? Okay, carousels can be problematic and the reason that they're problematic is first off according to the WCAG standards we need to be able for the person to stop that carousel. So that someone that needs to see what it's on the screen they have the choice for it to be there longer. Most carousels don't have that feature. Most carousels become decorative images because there's no alt description for the images so a screen reader misses them entirely. Most carousels that I've seen done by plugins are not accessible by keyboard only. So you have a large chunk of your website that your user cannot access. If there's a way that you can take the information in that carousel and put it in your content you will find a greater benefit from it. Also there are times that people move the carousel so fast that no one can really absorb what was there. That's a cognitive issue. Anyone with a cognitive disability is going to bounce. That's also disruptive. If there's somebody that has long COVID right now many of them have a cognitive disability that they cannot tolerate something changing rapidly on a website and they will bounce. So we have a new segment of disability. So why would you want a carousel? What are you wanting to accomplish? Multiple, you want to show multiple images of a facility and the purpose is aesthetic. So you want people to be wowed by these images. Okay, so you don't want them to know what else is on the website. Do you want them to sit there and watch this little movie of changing images? When we choose something on our website let's look at the value. The value to the greatest number of users. And let's just take it out of the equation. Let's say that had nothing to do with accessibility. Is that what you want your users to be focused on when they get there and nothing else? Just look at all these pretty pictures sliding by. Not nothing. Not now when you think about it. In addition to, but where do you usually place the carousel? Isn't it in the hero section? Okay, so when they land on your website that's what they get. If it's not accessible, that's when they leave. So all that great information you wanted to absorb there must be a better way to present it. Of course we get these requests from clients. I remember requests I would get from clients and they would say I want you to take the underline out of those links, it's ugly. And I'd go, no it's not. Because if a client talks to me that way I just kind of mimic it back. But I tell them that it is essential that we have those links underlined for accessibility. And so when a keyboard lands on those it also have additional focus. So no, we're not taking the links out but I'll make your website layout attractive enough that you'll like those underlines on links. So I think clients need us to educate them that yeah that's a great idea, can I make it better? Can I take your idea and make it better so the users on your website do what you want when they get there? You're welcome. Yes ma'am, the captioner did not get your question so I will try to repeat what I think I heard. You are talking about a browser when you launch your computer you open up in Microsoft Edge and you get what looks like a news layout of a lot of different sections. I personally don't use Microsoft Edge so I can't give you personal feedback on that but here's a couple of things I do know. Microsoft is a big company. Microsoft has a very strong dedication to accessibility. Microsoft has also said in several of their presentations that if it's not working now it will be. That if we have created something that has a barrier let us know we will do something about it. They have a real commitment. So I can't answer to it because I personally don't experience it. I don't go to Microsoft Edge but I would say that Microsoft has someone that would know that answer since it's their product. You're welcome, thank you for asking. Did I see another hand? I know we're down to the last few minutes. I don't wanna miss anyone. If you come up with a question afterwards, feel free. My contact information is on the screen. Please send me a tweet, send me an email, follow me on LinkedIn. LinkedIn is an excellent place to find persons who are disabled, who are willing to test and work with you on your website. LinkedIn is an excellent place to find individuals that are dedicated to web accessibility and you can network with them. So I encourage you to do that. And if you have a question you may also send me an email I will answer as promptly as I possibly can. But I really appreciate all of you've been here and I appreciate all of your questions.