089: Throwback: Implementing Accessibility Across a Large Team with Daniel Schutzsmith

By /

This episode is a recording of a May 2022 WordPress Accessibility Meetup where Daniel Schutzsmith, Website and Digital Project Manager at Pinellas County, shared tips, and tools, and discussed the process of a large government website deployment with thousands of pieces of content across almost 100 stakeholders. WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: Government Website Redesign: Implementing Accessibility: Daniel Schutzsmith.

Listen

Links Mentioned

Transcript

>> CHRIS HINDS: Welcome to the Accessibility Craft Podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin.

And now, on to the show.

>> AMBER HINDS: Today’s speaker, I’m very excited to introduce, is Daniel Schutzsmit. Daniel, I recently found out and I lived in Poughkeepsie, New York around the same time.

>> DANIEL SCHUTZSMITH: Oh, that’s right.

>> AMBER: I have had the opportunity to really get to know him through Twitter and some of the work that he’s doing there with the WP Talks that he is running. I’ve heard him on other podcasts where he was talking a lot about accessibility, and so I just thought it would be really great to have Daniel come and speak to us today. I’m going to stop sharing my screen-

>> DANIEL: Oh, thank you.

>> AMBER: -and I will let him take over. I do have one final announcement real quick, which is that I think we’re going to– Feel free to put questions in the chat. If we do get to a point where we’re open for questions, I’d like to ask everyone if you do speak to start your question by saying, this is, and your name, so just this is Amber or– Because that way, we’ll make sure that people are aware of who they are because our captioner won’t be able to maybe label everyone unless you say your name.

>> DANIEL: Cool. Awesome. Thank you so much for that. I totally forgot that we both knew each other from Poughkeepsie. For those who are watching here, you may have seen my daughter come in and she’s nine years old. She’ll probably be appearing again at some point in the presentation, just so you know. I work out of my home office. This was actually a closet before the pandemic and it turned into my office, so I can actually touch all my walls here. Inside, they’re pretty well, so we should be able to go on and have a good talk.

Amber asked me to come on and talk a little bit about what we’re doing at Pinellas County Government, in the website redesign that we’re working on. We were trying to figure out what the topic would be, and my initial thinking was, “Well, it’s pretty big.” I think a lot of the accessibility projects, a lot of us feel like we’re alone in it, so maybe I try to share a little bit about how we’re handling it as a team and what we implemented there to follow, so everyone’s picking up the pieces to put everything together for good accessible experience.

My first slide here is just showing the title screen. It’s showing a screenshot of our website over here on the right, just a little teaser. Also, a screenshot of the mobile experience on the new website as well. My name, Daniel Schutzsmit, and also I’m the web digital project manager at Pinellas County Government. My pronouns are he/him. After the talk, you can always feel free to find me on Twitter.

I’m usually tweeting about literally about WordPress or accessibility. My Twitter handle is schutzsmith, my last name, which is S-C-H-U-T-Z-S-M-I-T-H. I’m also on wordpress.org, so you’ll see over there, I’m also work camp organizer. I’ll actually be at WordCamp US 2022. I’ve done it a few othere times. If you go, feel free to pull me aside and say hello. I’d love to love to be in person. We’re going to take a look at a bunch of different things. I put together a lot of slides here to give you the whole perspective on how we’ve done everything. I will say that the site’s not live yet, so we’re right in testing mode right now, the QA testing phase basically. The current site is at pinellascounty.org, so feel free to go there, if you want, to just see the current site. This is the one we’re moving away to and to a nice new accessible experience instead of there.

This is what it looks like, so I’m showing a screenshot on here on the slide of Pinellas County’s website, pinellascounty.org. There’s a few things you’ll notice right away, it’s small, so it’s very, doesn’t have a lot of room to work with. It’s a little bit of a dated look in a way so you might say, [inaudible] maybe 2008, 2007, something like that. Right off the bat, if you view this on your mobile phone, you’ll notice straight away that it’s not very responsive, and actually becomes a little bit more difficult to work with, and we’ll talk about that in a little bit.

The next thing I wanted to mention was that the website really acts as our main customer service platform, we average around 7.5 million unique visits per year in the past 10 years. Some years have been more, some years have been 9, almost 10 million a year, some years have been around 6, but the average is around 7.5. Obviously, with the pandemic, we had a much higher demand because a lot of people want to know what’s going on and be able to get information, which is important to them. We also created a microsite, specifically for COVID-19, so people could go to that.

That eased a little bit of the traffic and was also responsive experience, so it made it a little bit easier to work with, and I’ll talk about that in a little bit. The screenshot you see here on the slide is, again, the screenshot of our current website’s homepage. There was a few different things for us that we had to deal with when looking at the current website and what was going on. I was hired literally a month before we shut down for COVID. I was in the office, I think three weeks, maybe tops, it might have been two and a half. My role was really to come on board to help spearhead and push forward this website redesign.

Right away, we started to realize there were certain things that we needed to solve and look at a little bit deeper with a completely new website to work with. I’m just going to go through the bullets here. One of the first things was the completely static and difficult-to-update nature of the website. The website right now is straight up HTML, CSS and JavaScript. It’s edited with a code editor like Visual Studio code, or it’s edited with [inaudible] Dreamweaver, going into Dreamweaver old school and editing some of those parts like that. Part of it is updating those tools.

It’s also not responsive. If we’re looking at it on a tablet, if we’re looking at it on mobile, we’ll notice that it has a really difficult time getting to and looking at certain information inside of the browser. It’s also older branding, so our branding for Pinellas County, Florida has changed a little bit. We still have the same logo there. Some people call it [inaudible] You can see it if you look at it real close, but we still the same logo, which we actually really, really enjoy. The rest of the branding has changed, and so we have a really nice updated brand and that goes with the spirit of Pinellas County.

For those that don’t know, Pinellas County is in the Gulf of Mexico, we have Clearwater Beach, Palm Harbor, we have St. Pete and a lot of great little towns like Tarpon Springs and such. They’re all coastal towns, and so a lot of the spirit of the county is really based around the philosophy of being outdoors, being with nature, being in the water. A lot, it’s reflected on the newer brand I’m going to show you. Then the last thing here is we have found it’s harder to find information on the current site. Many pieces of information are siloed away in PDFs, so it’s been a little bit difficult to work with.

The other big thing is that there’s just so much navigation on the current website if you do take a look at it, and I’m not going to demo any of these sites by the way, it could be too much of a technical challenge right here. If you look at any of the navigation on there in the headers, you’ll notice that they’re really large to work with inside of there. I noticed in the comments someone mentioned that they use a piece Dreamweaver, I did too, so we’re all good company here. This slide contains a screenshot of the Pinellas County homepage as well.

Why now? Why would we do it now? Why at this moment? One of the bigger things is that we’ve seen some major milestones happen. I believe it was 2019, I should have wrote this down, too, I’m pretty sure it was 2019, we actually saw the traffic of mobile devices surpass what was being done on desktop. In 2021, we really started to see that increasing. Now in 2022, I think, in some of the months I’ve looked at were like, 65, maybe 70%, sometimes, as far as the amount of traffic that’s from mobile over desktop. The lack of responsiveness in making it more accessible is really important thing at this point to really embark on.

Another major factor is that COVID-19 had showed us all how important online services are. We had made a microsite, COVID19.pinellascounty.org. It’s still up, you can see that we still update it with pertinent information. That really had to be the main clearinghouse, the main place that people were to go to get information on what we were doing in Pinellas County for COVID-19. That site also acted as a proof of concept for the larger website. That’s built on WordPress, it’s built responsibly, it’s built using a lot of the same tools and processes and techniques that I’ll talk through here in the slides.

That as a mini test really also provided us a quicker way to get out information to the public than it was for us to do on a normal static process and flow. It was a nice win all around to be able to really help people get the information they want to get to and for us to be able to show that there is a better a better way for us to be able to do these things. Then the final big thing is that we can use pinellas.gov now. You’ll notice that our main URL right now is pinellascounty.org, but we also have pinellas.gov. We’re slowly transitioning a lot of our URLs and our email addresses all over to pinellas.gov to make it a little bit more official.

Right now, especially, there’s a lot of different phishing, scams that go on and just incorrect information out there. Having that .gov domain really helps us a little bit, so people know that this is our site, this is what we’re talking about, we’re putting out an official message for that part. The new website will be pinellas.gov, the old URL pinellascounty.org will forward to that. In the screenshot on here, on this slide is a screenshot of the current website in a nice, fake mobile format here. Embarking on this, we knew what our issues were, we knew why we have to do it now, so we’re going to focus on what were the goals for this to really take off and to know what our success criteria would be really, what would we want to achieve.

I have five different goals that we did, the first being mobile responsive. That’s not anything unexpected. Really wanted to make sure that we are writing a mobile experience that makes sense, not just necessarily moving things around and making it pushing things around on the page, but also making it so that the mobile experience is a little bit easier to work with than if we had just given them a desktop experience in a mobile facade, so we put that in there now.

The second thing, the second goal was we want to make the content easier to find. Right now, if you were to go to the website, the current website, you’ll notice that the search in the top is actually a Google search, which isn’t a bad thing but it doesn’t always get the information that we want people to get, and also people going to it tend to get frustrated because they can’t find the information they’re looking for.

There’s no faceted search part to it, so you can’t really drill down and content, you can’t look like per department into those types of information or by topic area, and so that’s the little bit that was lacking there. The third primary goal was for us to streamline accessibility compliance. For us, that means getting as close to as possible to WCAG 2.1 AA. I’ll talk more about this in a little bit. For us, I don’t think we’ll ever see a website that’s 100% compliant on a lot of the accessibility things that we’re doing but we’re trying to get it as close as possible. That’s why a lot of the processes we have in place now, so some of the tools that I’ll show you how we use can help us get there, get to that position. The fourth one, fourth primary goal is for us to refresh the design. Again, forward-looking outlook on the way everything looks and putting together the branding and being able to understand a little bit more on how to tie it all together instead of digital space. Then the fifth primary goal is to implement a CMS, so implementing a content management system, so that it makes it a little bit easier for people to be able to edit the information. We all know, right now, when someone has a request the change on the website, they have to send it to what’s technically our IT team. Then there’s a ticket made and they may have follow-up questions, and that whole process could take a few hours, might take a few days depending on what the request is.

Our IT team is very, very good and very fast at what they do, but of course, there’s other things that come up, there’s other priorities that we have on the daily pieces of what they’re doing, and so the website doesn’t become a major centerpiece for what they’re supposed to be doing their responsibilities. By implementing a CMS, we can actually give those privileges to a lot of different people to be able to update their content. That’s what we’ve done and implemented. Then the screenshot here is, again, the homepage for Pinellascounty.org’s current site.

One thing to realize is that for us you may hear me say redesign a lot, and it’s the easiest way for me to explain these things usually is to say it’s a website redesign, but really it’s a website overhaul. We’re overhauling the technology moving from a static environment moving from a very strict way of using HTML into a very fluid content management system and being able to move things around a little bit more gracefully. We’re moving from a place where content was a little bit more difficult to edit or difficult to get to for most folks, and so now putting it in a way that’s going to make it easier for them to work with and share.

We’re doing an overhaul, the design and the user experience and really focusing on making that a more accessible journey for a lot of people to be able to go in there and get the information they need but also get it quickly. I don’t know anyone who really wants to hang around on a government website, we usually want to get in and get out. A lot of that is focusing on that is giving the users that capability to get in there, get the information they want to get to, and go on with their day. Ancillary, we’ll talk about research here in just a little bit, it’s one of the things we saw over and over again, as people were on mobile, because they were just trying to find something real quick and be able to work with it.

All right. My next slide here is about the inclusive approach we’ve taken. We have four bullets here. We did basically four different things that we focused on to make a more inclusive approach for the whole process. Not just necessarily the accessibility side, but the entire process of doing this website overhaul and working across teams. The first bullet is that we had a multi-department team of project liaisons. We call them project liaisons. It sounds snappy. It’s fun.

They’re representatives of each of the departments. I should have this memorized, but I believe we have around two dozen or so different departments and then many different divisions that are intertwined in there. What we did is each department presented one or two liaisons. They had one liaison, it was the main person, main representative, and they have an alternate also, there’s a backup. They’re the folks that have been helping us all along the way from the get-go all the way from design to coding, to content to be a part of this journey with us.

They’re also going to be there as the site goes live. They’re the same people they’re going to be updating the content, they’re going to be training their placements. We’ve included them all along the way. Rather than just making a whole website, coming to them and saying, here it is here, here’s your training, here’s how to use it, they’ve been there the whole time. They’ve seen this journey. They’ve seen how everything’s been put together. They’ve understood the decisions that we’ve made and getting to where we are now.

The second bullet is engaged leadership in regular updates. Every quarter, we were trying to do director meetings. I think it’s more like every six months about that, we do a director’s meeting. This whole project has been about two years in the making, just so you know. Then we also do a monthly update as well with the liaisons. It’s us interfacing directly with them, going over what we’ve accomplished in the past month, talking about the next month of what we’ll be doing, and answering any questions that might have come up.

Right now, we’re at the point where we’re really in the bug QA private testing phase. We’re very far along and very close to launching. Our ETA is basically to say later this year we’ll be launching this. My hunch is it’s going to be sometime around August or September basically, but not tying any specific dates to it yet. The next bullet for our inclusive approach is inviting local accessibility groups and residents for feedback on old and new sites. One of the key things that we found, and it’s really interesting, we have so many different local accessibility groups here.

What we found was that by reaching out to them we were able to have a regular consortium of folks that we can actually share this with and get them to play around with it and tell us what they think that are natively using things like screen readers all the time that are natively using maybe other assisted devices to look at our website. Basically, we have two methods of testing going on. The first method of testing we’re doing right now, and I’ll talk about this more, is action testing. We’re giving people specific actions and things we want them to do and go through and do testing.

For our local accessibility groups, we’re going to be starting their testing probably in about a month. That’s specifically going to be just have at it, here’s some example things that you might want to do, but we want to really get a sense of how you usually use the old website and see how it compares with the new website. Some of that will be recorded. Some of that will be having them give us their direct feedback for that. That’s one of the things I’m really excited about, too.

>> STEVE JONES: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. 1000s of businesses, non-profits, universities, and government agencies around the world trust Accessibility Checker to help their teams find, fix, and prevent accessibility problems on an ongoing basis. 

New to accessibility? Equalize Digital Accessibility Checker is here to teach you every step of the way. Whether you are a content creator or a developer, our detailed documentation guide you through fixing accessibility issues.

Never lose track of accessibility again with real-time scans each time you save, powerful reports inside the WordPress dashboard, and a front-end view to help you track down hard-to-find issues. 

Scan unlimited posts and pages with Accessibility Checker free. Upgrade to Accessibility Checker Pro to scan your website in bulk, whether it has 10 pages or 10,000.

Download Accessibility Checker today at equalizedigital.com/accessibility-checker. Use coupon code accessibilitycraft to save 10% on any plan.

>> DANIEL: Then for residents, we went ahead and had them give us feedback in a few different ways. We have residents right now that are testing the site. When I say residents, I mean folks that are located in one of the zip codes that’s in the county. We’ve also had a survey form on our website for a few months, I believe it was two or three months in 2001, where we were asking anyone who’s coming to give us feedback on the current website and what were they there for? How did it work? Things like that. I’ll talk about that in a little bit, too.

Then the last bullet here for an inclusive approach is we’ve acknowledged that we’re all learning best practices and helping each other to progress with accessibility. I’m certainly no expert I’m learning all the time. Amber and I had a call together, I think maybe it was three months ago or something. She taught me something in five minutes that I had no idea about. It’s the kind of thing where we might be in this business for several years, but we’re always learning and we have to be open to that too. That’s also why I say there’s a little bit of flexibility on we’ll never be completely compliant with all accessibility and requirements on a website, it’s more about how close can we get in getting really as close as possible.

The next slide is about the research we’ve done. I have a screenshot on the right hand of the slide that shows the heat map of our current website. For this, we used Hotjar, it’s a service online that allows us to see basically how people are interacting with a website, with a webpage.

For research, we did three basic things. One was looking at traffic. We were looking at things like Google analytics. We were looking at things [inaudible] improve which is another service, which allows us to see a little bit on how people interact with the current website, where broken links are, things like that, and we used Hotjar to see a little bit of that too, on that traffic and how people are interacting with it. That brings me to the second thing we did. There was research, which was user behavior. Hotjar really opened our eyes to see how people were interacting with the site. One of the main things that showed us was really how far people were scrolling and how they were interacting with their mouse or their touch on their phones with different elements on the site. We were noticing there’s actually a couple of things on here, a couple dots on here, that aren’t places that you would click on, but people think you would click on them just because of the way they look. For us, it was really important also in the new design to make sure that we’re focusing on touch points, making sure that when we’re talking about accessibility, it’s not just about the code, it’s not just about the colors. It’s also about when someone’s literally touching something or someone’s trying to work with what are the parameters we give it for people to actually do that.

Then the third thing for research was surveying. Like I said, we surveyed out to the public. We also surveyed internally a little bit as well, but the public’s voice is what we were really looking for to see how people were interacting and working with the current website and what they were looking to achieve and weren’t able to. Frankly, over and over again, it came back to some of the same things.

We also learned from other websites as well. There’s a few different websites, other .gov sites that we looked at. On the screen here in the slide, I’m showing four different screenshots of homepages of the upper-top left is the Miami-Dade homepage. You’ll notice that the Miami-Dade screenshot, they have a big search box right in the middle when you get there. The caveat of that is that you can start a search right away for anything, and it’ll start to auto populate and give you information based on what you’re typing in. On the top right is the screenshot of the San diego.gov website. For that, they took a little bit different approach.

They decided to have it a multi-step process, and specifically for their services. We gravitated towards in real like that as well. The first step is to do something. The text says I need to, and then you can choose a dropdown from there. The second step is to whatever it is, whatever you’ve chosen, it gives you more choices on what those will be, so you can drill down.

Then the third step it gives you is a button, which is linked to wherever you needed to go to, an HREF button, not a button button. It’s nice and accessible. The bottom-left is the government website from Arlington, Virginia. We just liked the way that they were using their menus and their hierarchy of content. The bottom-right is Utah.gov. Utah.gov is pretty widely cited as one of the best examples of government sites out there. I think when I was looking at it, we did notice there’s some accessibility issues. It’s just interesting to see when sites get multiple awards but they have some larger issues to them, but I think those are all been taken care of at this point but again, they did a similar thing of putting a search right, front and center so people could see that as well.

For us, from all that and learning all seeing all the research, understand the situation, understand what we’re trying to achieve with those goals, we really needed to put together our own approach to accessibility and how we would handle it. Pretty soon in that process after I got hired, I think it might have been even within the first two weeks I was there, I was meeting with– We have an actual accessibility director that oversees, just all the accessibility across many different departments, and other places within the county. At that time we had someone who was a former member of the past Yellow Group that actually came on staff for us for a little bit.

We met with them right at the beginning. It was really exciting, because I think everyone was surprised the direction that we were taking, because we wanted to be focused on accessibility from the get-go and include everyone as much as possible, which I think is sometimes unheard of, or maybe people say they want to do it, but they don’t actually do it, but for us, it was really pretty important to do from the beginning. To do that, we had three distinct things we did, and that’s what I’m going to read off here on the slide.

The first thing we did, or the first thing we wanted to do was to approach it as designing the website with accessibility of mind from the beginning, like I said. The second thing we wanted to do was code the website with proper accessibility standards closest to WCAG 2.1 as possible. The third thing we wanted to do was to use technology that supports accessibility when editing. That third one, using technology that supports accessibility when editing, I think is something that tends to get overlooked. We don’t necessarily usually think about it.

I’m both saying in the front of someone who needs accessibility, and accessible devices to be able to edit, so part of that, as well as the editors being able to understand when you put this content out, is it going to be accessible? Is someone going to be able to use this with a screen reader? Is this going to be difficult to actually manage on a small phone with one hand? Those kinds of elements. Feel free to ask any questions too in the chat there, and we’ll address them those as well.

Rebecca Chumley’s asking, “Will we see a sneak peek of a new page?” Yes, we’re going to look at a few designs and if we have time, I’ll just screen share the current staging site so you can see what it looks like. Okay, like I said, we were approaching three different things. We were approaching from a design perspective, from a code perspective and from a technology perspective. For design, for us, that meant first establishing a digital design system. We had had branding guidebook. We had had some types of things like that, mingling around the communications department which is where I sit, but we didn’t have something that was specifically for websites, for microsites and something that we could use internally, but also give to a vendor.

We looked at the initial branding of what we had recently done. I’m showing two screenshots here. One is a screenshot of the COVID-19 microsite homepage and what that looks. Again, that’s COVID19.pinellascounty.org. I’m showing a screenshot of the annual report that we did, which is a printed piece, but also distributed as a PDF online. We have some very distinct branding elements that go into there. Our colors are a little bit darker now in the background, so that the white pops more in the front foreground, so it’s easier to read.

We also shifted a lot of color palettes a little bit, these more grays, light grays, things like that, that are in elements that would otherwise not be something we’d be too worried about as far as color contrast, but making it so that the contrasts enough to be reflected when we test it. We also started using more iconography. Doubling up iconography with text so that people can understand more about what they’re working with, what they’re doing. You’ll see that there in the COVID-19 site, that’s something specifically that we tried to utilize there over and over again.

Let’s go to the next slide. This is an example. I’m showing a screenshot of Adobe XD. This is our design system right now. It’s based off of a few different things, but you’ll notice, I’ll just explain this a little bit, on the top-left, we see there’s various logos, we call them waves, logos and waves that we have set the standard here for that people can use. We also have even, you’ll see this like a [inaudible] icon examples in there as well that we went ahead and made sure that everything looks good. Also again, the colors make sense for what we’re doing and color contrasts all work.

In the middle of this document, we also have color and type. We show the different pieces of the color palette, the primary colors, the secondary colors and we show the different pieces of typography and how we might work with them. On the far right, you can barely see it, but squeezing in there is our grid system. This document is much larger. I only took a small screenshot part of it. The grid system allows us to make designs based on mobile view or tablet view, or a large desktop view, or a large, large view, if we’re talking about something else.

We even have a view specifically for just 16×9 TVs, things like that. When we’re thinking about if something’s going on there, what that’ll look like? We have that too. Then we have a whole section of components at the bottom here. The components really make up things from breadcrumbs to alert boxes to collapsing text, and accordions and things like that, but as well as buttons, and being very particular and letting people see what the examples are of what a button would look like and how we would use it. This was the first step we embarked into to be able to put those things together in design. The second thing we did was we knew we wanted design on top of a framework, a front-end framework. As we were looking at that design system, you might have noticed, if you’ve worked with Bootstrap before, it looks very familiar, and so that’s exactly what we did here. We worked with the Bootstrap Framework. The URL for that is getbootstrap.com, G-E-T-B-O-O-T-S-T-R-A-P.com. It’s a front-end framework that’s been around for quite a while, but it keeps evolving and it keeps progressing. It’s probably the most well-known front-end framework.

When I say front-end framework, I’m talking about CSS, HTML and a little bit of JavaScript, but it’s also probably the most hated for an app framework, that people don’t necessarily like to work with it, but here’s my thinking and why we did that. For all of its flaws and for how long it’s been around, the reality is, it’s become just like Microsoft Windows in a way, just like WordPress in a way, that we know that if we use that framework, we know there’s a lot of people that will also be able to utilize that framework.

We also know if something goes wrong with it, we have really an endless amount of options to be able to fix something. We know if we get into a corner or into a deep whole, chances are we’ll be able to find the information online to help us get out of that and find a solution to that. That’s why we go with Bootstrap for this. We’ll keep doing that probably for the foreseeable future.

One of the things that we did is we used a templated system called Bootsketch. It is bootsketch.com, B-O-O-T-S-K-E-T-C-H.com. I’m just showing a screenshot here in the slide of the homepage of Bootsketch. It is a templated system for Figma, Sketch, the design application Sketch, and Adobe XD. What it gives you are all those same components that I just showed you there. Let’s go back to design system. Most of these components you see here in there, so really in Bootsketch, what we’re doing is applying the correct level of styling, colors and emphasis on different pieces of the information. For us, that was the smartest way to go, for sure. It was not going to reinvent the wheel, and what allows us to do is actually get these design pieces into designers hands so they can play around with it, so we don’t have to compare apples to oranges, looking at HTML or trying to build inside the browser, which I know wouldn’t necessarily work for what we were doing.

Then the last thing for us in approaching design was to focus on touch areas, the colors and the text hierarchy and looking at all of that from an accessible lens. Really looking at it of, do these color combinations make sense? Not just do they pass contrast, but do they make sense in what we’re doing? Are the touch areas making sense for what we’re doing as well? Are ARIA labels making sense in what we’re looking to embark on there? Would it make sense all the way from the design perspective? Even before we’ve done code, would these things make sense. We’re going to have to ignore a bunch of stuff on here, that otherwise just shouldn’t be there.

On the screen here, I’m showing a screenshot of our example of a wireframe for an internal page. For wireframes we use Balsamiq. It’s still around, it’s an older wireframe application, but it does a good job of getting rid of the complexities of everything else in the interface of putting together a wireframe and just focusing on the essentials. For those that aren’t familiar, wireframe really is just focusing on where the content is going to go on an example page, and the hierarchy of that content. Really understanding like, this might be an H1, that might be an H2, this might be an H3, and explaining to ourselves what that layout would entail.

We’re not worried about the actual typography of this, like the actual font face. We’re not worried about the coloring on this. You’ll notice in this wireframe. It’s mostly grays or black and white. We’re really just focused on looking at the content where it might go and in relation to each other. We did this, we did wireframes. We did wireframes for several months going through and actually looking at every single example of every piece of content that we would have. Not individual pages, but the types of content. We looked at multiple custom post types and what those would be for the templates, we looked at the pages and what those would be like, even events and news and everything else in between. Even forms to decide how we relay out our forms, how would we put our labels, what would that look like?

As I said, for this whole process, we have the liaisons and the directors involved to see this and evolve and also give us feedback. They were there for the wireframes, from the beginning to see what we’re thinking about for the homepage, what we’re thinking about for these internal pages, and to give us their feedback on it along the way. I’m really excited because I don’t think I’ve ever done that at any other place I’ve been, and I’ve been in a lot of different larger nonprofit organizations before this. This was really something different. I think it was more exciting to see how excited people were the variable to see these pieces coming together.

The next slide, here’s a screenshot of Adobe XD, showing three different designs. One is a responsive mobile version of our homepage and what that looks like on the left. In the middle is a desktop version of the design for what we just saw, the wireframe that we looked at, and on the right is a version of the design without any types of graphics inside of it.

Only text that we were looking at a text hierarchy, what that would look like, what that would entail.

For a lot of this, we were focusing on, what is that content hierarchy? If you look at the current website, I should have put up a slide in here that would show the current website too, we started in 10 slides already, but if you look at the current website, what you’ll notice is that a lot of the headings look to be the exact same font size, they sometimes do the exact same color. There’s no hierarchy visually for anyone to understand what’s going on.

The other key issue that we noticed too, is that there’s no landmarks being used on some of the content, and so we wanted to make sure that you can vary– Just looking at this design, if you’re familiar with landmarks and doing things like setting roles, basically, for different areas of content on here, like saying something’s a navigation, saying something’s the main area, saying something’s a sidebar, whatever.

You didn’t see the separation of those pieces right in this visual design comp, so you can really quickly understand how things are put together. It’s a good cue for folks that are seeing a visually, and then coupling that with the correct code behaves of good cue for anyone who’s looking at it audibly, and being able to get that information. The next screenshot is another one of Adobe XD, and this has evolved a little bit more. Now we’re showing the homepage design on the far left, and what that looks like.

We’re showing then two topic page designs, that’s the one where you see with the animals and pets in the middle, and also home and property, and on the far right is one that we started for, I think it was maybe a subtopic alternate at the time. In this, you’ll notice a few things. The hierarchy on the homepage on the left, we still have a lot of content we have to deal with, but we’re focusing on using different things like the separations of colors, the separations of text size as well, and being able to show it in different ways.

The lower you go on the page, you’ll start to see more iconography show up as well, as people get more definition from different elements of content. On the other pages here, the two topic pages on the subtopic page, at the top, you’ll notice it’s a similar user pattern that we have on the homepage as well, but below it, you’ll notice we have a faceted search. This is an element that we put into the site over and over again.

What it allows us to do, I shouldn’t say over, I mean, throughout the topics page and in the search results page. What it allows us to do is having people be able to drill down into the content and to look for specific things that might be looking for. This is really intended to replace Google search, but also provide a real quick method for people looking for a specific topic or looking maybe for a specific piece of information, be able to get to it rather quickly. We’ll get back to that more. I’ll show you a few other things we threw in there as well.

You’ll see that we did a comparison, I think this was the first one which is the topic page alternate to the dogs, and the other one was home and property on the right, you’ll notice we even were doing, this is when we were doing tests on what that sidebar will look like, so you notice the sidebar, and the right one has a grayish background to give it a little more distinction and show some other pieces below it. We really tried to make it so that we were using colors, iconography to create those different areas that would make sense visually as you’re working with it but also coupling it with the code that we would put in there as well.

The other key thing to look at in here too, is that we were really focused on making everything touchable. When you look at, for example, like these results that are going there, when you’re clicking on it you’re not necessarily just clicking on the title there, clicking anywhere in that box is going to take you to that specific thing. When you’re on mobile it makes it much easier to be able to get to specific content rather than having to zoom in or click on a small little link, they’re larger surface areas to be able to work with. Really simple if you’re just doing something one-handed and you have your coffee in your other hand or whatever. All these things make it much more easier to work with.

Then the larger thing that we came up with was this idea of Quick Find which has been renamed to I Want To, so I want to do something on this website, how do I get to do it? How do I do it? How can I get to it the quickest way?

For this, we were finding that, looking at those examples that we saw, so the screenshot here showing the Quick Find, it’s a three step process. It’s mimicking the examples we saw from some of the other websites such as utah.gov, Miami-Dade, and a few others, but it’s going a step further to make it a little bit more just straightforward one to work with. We do it as a three-step process. We also have the search in there as well. This goes right in the homepage, so anyone’s able to get to it.

Some of the things that we found, I mean the main things we found with research was that people were coming to the website, 9 times out of 10, to really just focus on doing a specific task. They were looking to pay a water bill, or to get information on electric hookup, or trying to report a stray dog or something like that. They wanted to get right to figuring out where that information was, and quickly.

What we found of user testing already, is that people are gravitating towards this and basically wanting to have everything in there. They’re really liking the concept, they’re liking that they can go in there, they can find the information real quickly, and now I think to the point of they might even want us to expand it more. That’s what we’re looking at is how, what do we possibly expand it more into other pieces of content across the site there.

All right, so that’s everything we did for design and approaching that. For approaching code, we took it a little bit similar. For us, the first thing was to focus on building on a child of the Picostrap theme using that Bootstrap front end. Picostrap is a WordPress theme, it’s a WordPress starter theme, you can actually just use that if you want to, or you could build a child theme off of it.

We opted to go the child theme route because if there was ever any security updates or anything like that, we would always be able to utilize those, so we built a child theme off of it. Before this, some of our previous websites were built on Understrap. If you’ve done themes in the past with Bootstrap you may have seen that before. Understrap was pretty popular to create WordPress themes with Bootstrap.

There was a little bit of a, I guess kerfuffle, about two years ago or so, where Understrap was going through some growing pains, and changing hands, and no one really knew where the operation was going, it was an open source thing. At that time, we just knew we had to commit to something and Picostrap really looked the best at the time. It’s still really good to use and we really love it.

The big thing about Picostrap and the way it works is that we can still use things like SASS, and if you’re not a developer don’t even worry about it, you don’t need to look it up. SASS just allows us to do some more interesting things, basically with the styles what we’re working with.

Specifically for accessibility, I’ve found it actually to be a really quick time saver for us to understand, if something’s not accessible, to make a whole suite of things accessible really quickly. Especially when we’re talking about colors, or we’re talking about the touch points, and making something larger to work with, so it’s been really a joy to work with it in that sense. The big differentiator in the Picostrap and the way it works for folks that are more technically minded, this does PHP-SASS so you don’t need to install node or anything else to make it work. Basically, you’re just updating your code, you’re just refreshing your browser window, and the code’s updated right there so that’s a really nice way to work.

The second thing we did for approaching code was looking at really implementing the accessibility for WCAG 2.1. For that, a lot of it’s been focused on really looking at everything over and over again, and testing as we go along. I thought I knew a lot about the accessibility guidelines and what the standards were, and this has proved I did not, [laughs] so there’s a lot of things that we had to realize that are way more than just contrast to look at. I think the biggest thing that was an eye-opener for me was the way we worked with landmarks and things, and the way we need to work with different aria labels, and even hiding specific things with aria.

I’m a New Yorker so I always say aria, I don’t know if I say it right but that’s how it comes out. With that we focus a lot on testing as we go along, so this is an example of, oh, I think this is just a page template. This is literally probably an example I had from a real case here. We go through and basically use two different tools, so we use the axe DevTools, which is an add-on for Chrome. In our case, we’re using Chrome, we’re using Edge as well because we’re Microsoft-based for most of the things we’re doing.

I found it really beneficial for us to get very concise information on things that we’re trying to understand and work with, but then we also use the WAVE accessibility evaluation tool which is by WebAIM. This has been around a while, I think. It might have been one of the first Chrome extensions out there basically that could help us do this testing and be able to see these things.

The thing I’ve always liked about it a lot is being able to visually see on the page when we’re testing and looking at things, visually see this iconography of where the issues are. Oh, and sorry, the screenshot I’m showing here is of the WAVE tool and in it we see actual icons of where the alternative text is, or where a noscript element might be, or where a YouTube link might be.

One of the very interesting things too is there’s this little code box you’ll see at the bottom of the screenshot. You can click on the elements on the left side here, and it actually shows up for you on the right side, and it highlights that code there. It hasn’t been updated in, I think two years, but it still works really great. It especially works well if you’re trying to share this with folks that might not understand code as much, because when we’re looking back at the axe tool, you can get it.

If you look at the highlight, this is a screenshot of the axe tool and it’s very dark. The highlighted section has a little bit of code in it, but to anyone looking in the outside, it looks like there’s just this one thing you’re looking at, this one element basically. When you look at the WAVE tool, you see multiple elements on the screen. You see all these icons that are showing up on there. It gives someone the visual sense really of like okay, you might see a lot of sea of red icons, and that means there’s a ton of errors on that page, so it’s a really good way to convey that to someone. I use that internally, I used to use that on my own freelance clients back in the day, so it’s one little trick I think that’s been really valuable and working with it.

I have a visitor. My nine year old daughter’s hovering, the last part is approaching content. For that, we have, the first thing we start with is implementing accessibility checking at the editing level. Like I said before, actually giving them the tools, giving the editors the tools. In our case, it’s department liaisons. We also have what are called PIOs, those are public information officers. You’ll see them around government. Those are usually the people you see on TV that are talking about something going on. A PIO, same thing, so they have access to be able to make edits to the website as well.

For that, we’re actually using Equalize Digital’s accessibility checker. We looked at several different, and this wasn’t planned with Amber at all, it’s just we’ve found it to be a really great tool to use. I haven’t found anything else that was giving us the detail on the back end in a way that was explaining it to non-technical people. This visually, when you look at the screen here, the screenshot I’m showing is the accessibility checker in the block editor.

It’s showing the summary of what things have passed. It’s showing a big red box of the errors. In this case, there was 12 errors. It’s showing a green box of contrast errors, which shows none. 17 warnings on the page, which is in yellow, and then ignored items, which is in blue. It also shows us the reading level. It shows us this is a 12th grade or more reading level on there.

These were all really important things to us because right away, just looking at editing one of these pages, we’ve brought this content from the other website. We’re talking about thousands of pages. I think at one time we were like 4,000 to 6,000 different pages. We’re talking like 4,000 PDFs. There’s a lot of content that we were converting and changing.

We’ve dwindled things down and made it more cohesive now, but it’s still thousands of pages.

The reality is we need to be able to see that and be able to look at that. One of the things the accessibility checker plugin did for us too, is we got the pro version, so we can be able to scan the entire site and see all those elements inside of there. For that, we’re able to really get a good sense kind of what pages we still need to work on and mess around with. You wanna say hi, say hi real quick, real quick, super quick, wave. Say hi. Okay. Wonderful. All right. Good night. Go on. Okay. Thank you. Sorry. The life of dad.

The other thing for this, and now I’m showing a screenshot of the accessibility checker for this, it’s showing just details of what we see on the page, so we can be able to kind of see those specific things on there. Again, it’s just making it a little bit more straightforward for people to see and understand.

The second thing here is, for approaching content, we also wanted to train on the importance of content hierarchy and image alt text especially. Where’s the two places that we see most often that people aren’t doing, the least accessible page, it’s using H1s all over the place. It’s moving headings and directions that don’t work, and it’s not having alt text over and over again. It was important for us to address that and teach people right away.

Some of you may have heard me on the WP builds. Actually, no, it was on the Tavern, WP Tavern’s podcast talking a little bit about this. What I was mentioning was we actually built just a page in the back end. That’s a website admin help page. This is actually a real page that we edit in the back end. We’re set to a private page. It’s using Gutenberg block editor. Anyone can edit this on the admin team but everyone sees it.

The way it’s set up is it’s there, it’s basically accessible for anyone that needs to edit the website to be able to see this information. The screenshot I’m showing here is the Website Admin Help section in the backend of WordPress. It’s like WP-admin/help basically is the location of that. Inside of it, we have two different columns. The left column talks about the recorded webinars we did where we went through these walkthroughs. They’re about an hour long, showing people how to work with content all the way from editing something to understand the accessibility checker, to being able to put their images in there.

The next section is showing a little bit about the block editor, so how do we use it. Those are videos that we made ourselves. Those are quick three-minute videos basically, to understand all that stuff. Then the last section here is, we have a section called Working with Accessibility in Mind, and that really focuses on specific accessibility things for everyone to kind of know. You might recognize some of those links. The first link’s Understanding Web Accessibility, which is a Medium article that I thought was really kind of a great understanding for people coming in at a basic level, to understand a little bit more why we do this, why it’s important.

We also have Using the Accessibility Checker. That actually goes out to a YouTube video. I think you actually did that Amber. That goes out to that video. The third link on there is How to Act and Understand Accessibility Right Now. That, I recently added that’s a webinar from the Past– who was it? Not Pastilla Group. It was Deque. Is that how you say it? Deque or Deque? I always get it wrong.

The folks that make axe, they did a webinar there, but they did a webinar specifically about governments, nonprofits, and COVID. Deque, okay. Governments, nonprofits, and COVID and accessibility, and how to deal with it with the web now that more people are coming in. I thought it was really important for our folks to be able to see that. Then the other links are, there’s a link on why we don’t use overlays, and that’s the more comical one for people to see why we don’t have an overlay on the front end of the website, trying to handle the accessibility pieces.

If you’re not familiar with an overlay, don’t even worry about it. You don’t need to go and do it. Just getting people to understand on our end, why we’re not doing that. Then the last one’s the Ingredients of an Accessible PDF. Like I said, we have a ton of PDFs that we have there. We’ve been going through diligently trying to make them all accessible as well, and verifying them basically in Acrobat to do that, Adobe Acrobat. This is a link out to Adobe’s system of saying how, what are the steps or what are the ingredients you need for an accessible PDF there?

A side tangent, if anyone knows and has data, I would love to see more data on accessible PDFs, or charts that show more about why we make accessible PDFs, how to do it, things like that. I’ve had a heck of a time in the past two years, trying to find really good, concise information like that. Looking at a lot of places where you usually would for research, it doesn’t exist as far as I could tell. If you have anything like that, do feel free to share it with me, I would love to see it.

All right. The last thing we did for approaching content, this is the last whole section of this, so we’re almost wrapping it up, is rewriting content above an eighth-grade reading level. Anything that was basically 9th, 10th, 11th, 12th, we tried to get it to 8th or 9th-grade reading level inside of there. I believe WCAG, I think WCAG wants eighth grade, right? Something like that.

We were really trying to bring it down as much as we could, so that it’s easier for folks to understand. There’s also, the benefit that we’ve talked about internally a lot is that we might have content now. We’ll get dinged a little bit because of the redesign, and the change of domains and stuff for our SEO, but we might have content now that’ll actually play better on Google because we’ve brought down the jargon, because we’ve actually made it more available and accessible to actually read. That type of thing excites me as well, to be able to do that.

With all that, those are all the big things we did. With all that, where are we now, what are we doing? Right now, our progress so far, so we’ve done thousands of posts rewritten and tweaked for accessibility. We’re currently user testing. Most of that user testing, like I said, is more functional testing, like, tell me how you go ahead and set up a new bill with your water system type of thing. Then we’ll start doing very aggressive kind of accessibility testing soon with folks using screen readers specifically, and other assistive devices.

Then next thing we’re looking at is possibly kind of a wide public testing phase as well. It all depends on our timing, when we think we’re going to go live, but the chances are, is we’ll probably try to do something where the general public can also come and give us more feedback on what we put together. If anyone here’s interested in testing, I’ll put you in now. Not tonight, but soon to be able to kind of play around that, and I’ll give you the URL and all that stuff, so you can give us feedback on that as well. I’d be forever grateful for any other feedback I get from folks, especially from this group.

I thank you so much. That’s the bulk of everything I have to share. like I said, I think the site will probably be launching later this year. I know it will because I can’t go on another year with this not being launched. Just let me know if you want to test it all and I’m happy to answer any questions and things like that.

>> AMBER: This was a fabulous talk. Thank you so much.

>> DANIEL: Oh, cool.

>> AMBER: It’s so interesting. If anyone wants to throw some questions in the chat, there was one or two and I wrote down a few while you were talking. One easy one maybe is what were you using to customize the admin dashboard? Did you style that and move things around yourself? Did you use a separate plugin for that?

>> DANIEL: Yes, so I have these little tricks that I’ve been tweeting about. There’s a larger thing that I’ve been kind of starting to trickle out to folks, to show my tricks of the trade. For that I’m using Admin Menu Editor Pro. I believe it’s adminmenueditorpro.com, so just like it sounds. The site looks kind of sketchy. It doesn’t look like it actually works, but it’s a fabulous tool. It’s still being maintained, and it really allows you to control the entire admin section. I must have used 20 different admin overrides basically over the years, trying to do different things. Different plugins, different frameworks, or whatever. Every time it would slow something down or mess something else up, out of many other approach, the only one I’ve seen where it’s focused on what it does, that’s it, it’s straight-up PHP, it doesn’t mess with any of the plugins that are in there. You can basically turn things on and off as you want to and it’ll control everything. Not just the colors and such, but it’ll turn off blocks, it’ll be able to add in new pieces, new styles into the admin section without having to do it in your theme at all. Does a lot of different stuff.

>> AMBER: I really liked when you were showing it that you had grouped certain post types under Evergreen Content as a heading. Then there were other post types that were under a heading of Timely Content. I feel like I’m constantly explaining this to clients, why you would make something a post and not a page. You doing this, I think really helps to funnel people into putting their content in the right place, I think.

>> DANIEL: It’s so funny because we’re so used to it now and we’ve been doing this for eight months, so I totally overlooked it. That was one of the first things we put in there was differentiating that content so that our folks knew like, when would I use this? Why would I use this? There’s also a hierarchy. I’m showing right now the screenshot of the WordPress admin and showing the sidebar there with those groupings of Evergreen Content and Timely Content.

Under Evergreen Content, it made sense. We put it in the order of the importance. Pages is the most important thing, most of the content goes in there. The second one’s Services, the next one’s Parks. Parks is the third because it gets almost all the traffic for a lot of the things that are going on a typical day. The hierarchy makes sense in the back end as well for what we’re doing.

>> AMBER: That’s really cool. I’m definitely going to have to go check out both the sketchy website and the plugin that is awesome.There’s a couple comments that, “It looks so neat and organized. Thanks for sharing.”

>> DANIEL: Peter mentioned too this, that he had read before, or they had read before about high contrast can also be a problem. We’d seen that too. Basically, whenever we’re using contrast of a light color and a background, I’m really just going to color analyze just to make sure that I’m passing all the different sizes, basically, that you’d see in WCAG. As long as I’m passing them and we’re not hearing feedback from folks saying that the color’s reverberating and it’s too difficult for them to read, then we’ve been okay with it.

>> AMBER: I’m curious. Maybe I have some rapid-fire questions while we give people a couple more minutes to type any other questions they might have. The first one was you mentioned thousands of pages of content. How many content creators do you have on this site?

>> DANIEL: [laughs] Oh boy, I had this. The total liaisons was over 50, but I can’t remember how many. I don’t think we were at 100 but I’m sure we were over 50. Actually, let’s play a game. I’m not going to share my screen for this because I’m going to go into the back end and look at that.

>> AMBER: You don’t want to show everybody’s email addresses.

>> DANIEL: Exactly. I’m just looking around my camera here. It’s 55 total liaisons inside of there, and then about 12 different PIOs, the public information officers, and then you have six admins. It’s a good amount of people

>> AMBER: Had most of them never used WordPress before?

>> DANIEL: Yes. Out of 70-something, 4 have. It’s a large percentage of people who had not used WordPress before, who had not even looked at code before, who basically live in Microsoft Word or Excel spreadsheets. That was also a big thing of, “If we’re doing this, we’re doing this the right way. We’re not using classic editors and such, we’re doing this with the block editor. They’re going to get used to it that way.” There’s a little bit of learning curve for some folks, but now everyone would not go back. They like doing it this way, working with it.

>> AMBER: That’s good to hear. Jean asked, “Does each town have a section and access to the county site?”

>> DANIEL: They do have sections. We do have a little overview about each town, like a landing page basically, but they don’t have access and it’s not more than a link out to their places. I think most of that’s just, we’re a county government, and they’re local government. Those two things usually don’t go together that way as far as access. We have reached out to them before, and we have regular liaisons to talk to them, or our PIOs talk to them to get that kind of information and put that on there.

>> AMBER: Thomas was wondering, regarding your three steps design that you have on the homepage, have you A/B tested having that three steps versus one single search box to get user feedback?

>> DANIEL: We haven’t yet. That’s actually a good question because we were talking about that last week. We saw some folks– this is interesting. Let me just share my screen now so you can actually see that part. Let’s see. I’m going to share my screen of the actual site. Just make sure this works, and I’ll change the ratio here a little bit. Does that seem like an okay size?

>> AMBER: Yes, that looks a little better I think. Not quite so zoomed out.

>> DANIEL: For that, we were thinking the same thing. One of the things we’ve noticed is that people tend to want to look for the word “find” in here. Like, “Find the adoption center for dogs,” or find whatever it is. For some reason in folks’ minds, from what they’re telling us, and what they’re writing, and what they’re showing us, it’s weird. We gravitate towards the word find, the actual word. We did have that in here before and took it out because people were just going to that, over and over again. Find this, find that. Rather than pay for your water, find where to pay for my water bill, the way people think about it.

To which we started thinking about maybe we should actually just have one search and try it that way because we do have the Ajax going here already. They could be able to start typing something in and they’ll actually give them different places on there. We’re still refining this, too. We actually can bubble up specific ones we want to show here. That’s all done with Search WP, which is another plugin in the back end.

>> AMBER: I wonder if you could resolve that by changing the wording on your label for your dropdown, instead of just saying, “What would you like to do?”, it would be, “What would you like to find?” Then they won’t look for the word find because you’ve already suggested find to them. Now they’re moving on to the second part of that sentence in their head. I don’t know.

>> DANIEL: Amber, you’re probably right. That’s actually great. I’m going to suggest that in our morning meeting tomorrow.

>> AMBER: I was curious, going back to the design, because you did a very intense design process where you did wireframing, and you built out all the components and did your accessibility testing then, which is awesome. I’m curious, did you do that? Do you have an in-house designer? Did you contract that out through, I guess an RFP process? What was that like?

>> DANIEL: Most of this was me. We have a very small team.

>> AMBER: You’re multi-talented.

>> DANIEL: I’m one of those generalists that can be a lot of things because we’re– what are we, Gen-Xers, where we get lost in between generations, but we were able to do a lot of things and able to adapt to whatever we got to adapt to. I started out as a developer, and then quickly moved in to design, and then moved in to project management. All these things are already things I’m already well capable of. We did have in-house designers, and what we did was have them help us with the branding aspects to that. They’re more print-based and video-based.

It made sense for us to get those branding aspects from them. Like, what are our guidelines? Do we have constraints we need to work within? Then how can we apply them to what we’re doing digitally? Just getting their approval on that, just getting the okay to, this makes sense. This is a good embarkment and journey we’re going on. That’s really what it’s been

>> AMBER: That’s cool. Did you know at the beginning of the process that it would take as long as it has taken? From a timeline perspective, has it always been like on this timeline?

>> DANIEL: Pretty much. I predicted it would be about a year and a half. COVID obviously messed us up. I think it was the first week I started work was February 2020. Even then, my main task was the website redesign at that time, so I had started right away figuring these things out and planning things out, and then COVID happened. We were basically stalled for about, I’d say maybe six months where it was just focusing on COVID. Because you got to remember, we had the COVID website to put together, which we flew by that COVID-19 website and put it together in, I think, three weeks.

Everything from a completely unique design, to building everything in, to figuring out what servers would make sense, and because we saw so many sites having issues, a lot of different governments were building COVID sites. A lot of different governments were trying to do this thing. All I kept seeing and I kept hearing was, “What if we try to build this site and it goes down, and we get a flood of people and we can’t deal with it?”

Right now this is hosted on a normal WordPress host, but when we originally created it, we put it on Netlify. It was a static site, so it was WordPress, but we pushed out static code into Netlify to actually put it out there, so when we made updates, we were using WP to Static was the plugin. I think they may have renamed it now. That was pushing out the code up there and it worked really great, for about, I don’t know, maybe a year, year and a half, something like that, and then we decided to actually put it on WordPress because the traffic died down and it made just made more sense to be a little bit easier to work with.

>> AMBER: That’s cool.

>> DANIEL: It was WordPress all along. It’s just, now it’s what you see is what you get.

>> AMBER: It was more of a headless implementation of WordPress.

>> DANIEL: Yes, exactly.

>> AMBER: I do wonder how do we all get clients that understand that it might take a year for them to build their website, [laughs] as opposed to, “I need my website in a month from now and it’s going to have 40 different unique page designs.”

>> DANIEL: We could talk forever, too. My background was in advertising in New York City. I did that for about nine years, maybe a little bit longer, but you get used to being laid off, losing clients, going through ups and downs, ebbs and flows basically. I moved to focusing more on nonprofit work and working with nonprofits, and that’s where I started working with Greenpeace, and Oxfam, and Amnesty, and doing large implementations, and large websites, especially on WordPress or Drupal.

What I noticed was that, in the ad world, it’s all about you’d never tell the truth. If you think something’s going to take three months, and the client wants it in a month, you say, “Okay, we’ll get it done in a month,” but in the nonprofit space and what you’re doing, if you say that you’re going to lose the client because they don’t want to hear fluff, they want to know the reality. Like, “If we have to get this out the door, we need to make fundraising season, would this be done in time?”

Really quickly I learned that I just literally had to be upfront and just say, how long you really think things took. I’ve gotten pretty good at estimating if something’s going to take a long time and just explain that ahead of time. I had a great boss at Amnesty, that taught me to really set expectations for a lot of the meetings I have with stakeholders so that people really understand and get it in their heads of what we’re talking about

We talk about a new website, we’re not necessarily talking about this done in, two months or something. We’re talking about this is a long-term haul that we’re going to need your participation in, where we’ll need some of your employees participation in to be able to help us really achieve this together as a team. It’s interesting.

>> AMBER: I will say because it was in the chat, was there an overlay on that website, on the COVID one?

>> DANIEL: On that one, yes. On the COVID one, yes.

>> AMBER: But you guys have decided not to do that on the new site?

>> DANIEL: No, not on the new site. That one is. Yes, that has no errors though, too, so it’s just like an extra on that site.

>> AMBER: Is that a WordPress overlay or that’s an outside of WordPress?

>> DANIEL: It was, no, it was–

>> AMBER: Oh, someone said UserWay. We’ve got a couple people on–

>> DANIEL: UserWay. It was, at the time, I think it was just like an add-on, and folks liked how it worked, but I was like, we’re not doing this on the main website. It should pass if we look at all the pages, unless people messed up content, I didn’t see it. Every single one of the pages should pass.

>> AMBER: Even, yes. You don’t think the overlay is necessary on that website, is what you’re saying?

>> DANIEL: Yes.

>> AMBER: Well we’re pretty much at our time. I don’t think there’s any other questions in chat. I really appreciated getting a look at this process and how detailed you were. I feel like it’s been a great opportunity. Can you say again, there were a couple people who did post that they’d be interested in helping you test and giving you feedback. Is Twitter the best way to get a hold of you? What’s how can people get a hold of you if they want to follow up?

>> DANIEL: Actually let me paste my contact info.

>> AMBER: I think Paola just put your Twitter back in.

>> DANIEL: Twitter’s good. I know not everyone goes to Twitter, but Twitter’s good or you can contact me. I just put my email address there, too. It’s dschutzsmith@pinellascounty.org. I just say Twitter usually because I know that I’ll get it. Sometimes, our spam filters are really heavy at work, so it tends a little bit more difficult sometimes with folks from the outside sending us stuff, but you can try email, and back it up with a tweet, [laugh] for sure.

>> AMBER: Well, that’s awesome. Thank you so much. Thank you everyone for coming, and I hope everyone has a great evening. Do not forget about Thursday at 2:00 PM Central Time. We’re going to have a really awesome panel discussion for Global Accessibility Awareness Day and you can get information off our media page. Thanks, everyone.

>> DANIEL: Great. Thank you. Have a good night.

>> AMBER: You, too.

>> CHRIS: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple podcasts. Accessibility Craft is produced by Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones. Steve Jones composed our theme music. Learn how we helped make 1000s of WordPress websites more accessible at equalizedigital.com.