This episode is a recording of an August 2023 WordPress Accessibility Meetup where Elvis Krstulović talks about building accessible websites with the Builderius page builder. If you would like to watch a video recording from the meetup, you may do so on the Equalize Digital website here: Building Accessible Websites with Builderius: Elvis Krstulović.
WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. Learn more about WordPress Accessibility Meetup and see upcoming events.
Listen
Mentioned in This Episode
- aria-labelledby
- Accessibility Ready WordPress Themes
- aria-controls
- <dialog>: The Dialog element
- ARIA: dialog role
Transcript
>> CHRIS HINDS: Welcome to episode 031 of 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.
This episode is a recording of an August 2023 WordPress Accessibility Meetup where Elvis Krstulović talks about building accessible websites with the Builderius page builder. WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/031.
And now, on to the show.
>> AMBER HINDS: I am very excited to introduce Elvis Krstulovic. Hopefully I got that right. [chuckles] I practiced a little bit before. Elvis is a designer and a design educator. Since 2011, he’s worked on web experiences for art and education organizations, and taught graphic and interactive design to BA and MA students since 2013.
Elvis joined the Builderius team in December 2022 to help improve its user interface, while maintaining its power and flexibility. Over his design and development career, he’s seen how an innovative tool can change the way we work. I’m very excited to have him here to speak with us and share some of the efforts that they have been putting in for accessibility into their tools.
So thank you, Elvis, and welcome.
ELVIS KRSTULOVIC: Thank you, Amber. Does everybody hear me?
>> AMBER: Yes. I’m going to stop sharing my screen so that you can start sharing, and then just so everyone knows, I will be watching the Q&A module. If you can try and put questions into there, we will pause and pass those along at appropriate points to Elvis, so I’ll let you take it away.
>> ELVIS: OK, thank you. I’m going to share the screen now, and then give me a second until I move this away.
>> AMBER: Yes, looks good.
>> ELVIS: OK, sure. Hello everybody, I’m Elvis. Amber already introduced me. I want to just warn something. At the beginning of this talk, I have a bit of an accent, and when I get excited or just kind of in the presentation, I tend to speak a bit more faster, and sometimes I even kind of pronounce, very silently, some words, so if that happens, please warn me. I’ll try to not do it, but it could happen.
Also imagine this presentation kind of like a dialogue, so feel free to ask while the presentation is going on. You do not need to wait for me to finish.
On the Builderius team, there’s three of us. It’s Vitalii Kiiko who is our main front-end developer, Volodymyr Denchyk who is our back-end developer, and I who is kind of a product designer, let’s say, but when the team is so small, we also, let’s say, mix what we do, so the presentation is going to be about our idea; why and how a visual tool for building websites or site builder could help make accessible websites, and so that’s kind of an idea that I want to present.
I wanted to say a couple of things about me, so I started my journey into web as an artist trying to make a website for myself. Then I started my education in design, and then moved to teaching at the university, which is both a learning experience and being a teacher as well, and then in some recent years, I started developing WordPress websites for clients, and that’s mainly culture and education, because that was kind of a context that was close to me. I work mostly locally, although I also do some work with international clients.
So I want to just say a couple of words, in general, about Builderius so that you can kind of understand wider context of accessibility within Builderius, so what you see as an image is a screenshot of a new UI that’s not yet there. That’s going to come out with our version one. We are releasing a last version before the new UI next week, so some of the things that I’m going to be using in Builderius is not available in the current publicly available version, so there’s some new stuff, but still not new UI.
Builderius approaches development in a way that kind of is geared towards developers, and wants to help with the workflow and flexibility of the builder, so when we were thinking about the Builder and what it does, it kind of brings website building to the wider number of people. It makes it easier, but it also limits certain things that can be done with builders as opposed to just coding the website, and so we built it in a way that entire HTML language is available to you, so you can basically create any kind of HTML element with any kind of attribute. There is no limits compared to any other way of doing that.
When it comes to dynamic data, we use kind of a different approach in which we keep separate data from the design, so data, we call it data agnostic, so we can take any kind of data. It doesn’t even have to be the WordPress data. It can be coming from rest API, or it can come from… Recently, we did a demo with Google Sheet, giving data for an example of a loop, so when keeping those things separate, we get more freedom as to how to structure the website, so that’s kind of in general.
When I joined Builderius, it actually happened directly linked to accessibility, so I was part of a group, but not yet using the product at all, and we’ve talked a lot about accessibility, so at some point another member of the Facebook group said or asked whether builders could be used to build an accessible menu for keyboard and screen reader, and I’ve never done that in any way previously. I was always using some solution and then tweak it, but I never built a menu that can work from the ground up, so it was kind of a challenge for me, and a challenge for Builderius. I wanted to see if it could be done. It claimed that it can, but no one had done it before.
So that was my intro into Builderius. I spent some time building a custom menu from scratch, and actually, the guide that I followed, I found from Adam Berkowitz [phonetic], if I’m saying it right, and actually heard about this from Amber’s group, from Accessibility Facebook group, and so that was my start, so what I said here was, “OK, so we do it with the builder so that more people can build accessible website.” That’s our kind of idea why builder should even deal with this, and then we provide some tools for it, so this is part of what I’m going to talk about today, is why accessibility in a builder, and how we do this.
So I did a little research and I wanted to see if that makes sense in terms of numbers of users you could affect using builders, and I use this chart to kind of see it in a larger picture, so WordPress, in total, is here, and you can see a lot of these builders occupy quite a lot. Of course, the easier they are to use, the more it’s used, but even, Oxygen, for instance, is here. It’s not like some other on the very beginning, so we were thinking, OK, so this makes sense to focus on this. It might provide really access to accessibility to more people.
So when we talk about Builderius that it works differently, we say something like HTML first, and because we have separate data from presentation or from design, this means that basically you can build any kind of HTML structure without really thinking about WordPress, and once the design of the page or the template is done, you can then choose to pull data where you want, so that’s the kind of a first premise here, is that we want you to be able to build any kind of HTML structure, and then pull data where you need it, and this should, if you know, enable you to really create accessible websites.
So that’s the first stage we consider, which we, in a way, achieved, but this is only targeting people that know how to do accessibility, so this is really for the people who perhaps could really develop it by code and know exactly what needs to be done. Or, I mean, no one knows really exactly what’s to be done, but they have the technical knowledge of how to achieve that, so that can be done with Builderius right now.
I’ve written here that HTML is pretty good out of the box, and this is kind of this position that when you start designing or putting CSS and JavaScript and all of this onto HTML, that’s one way of making it less accessible, and also when you’re not using HTML properly, so when you’re not using semantic markup, when you’re not thinking about structure of the page as a complete thing, this is when it starts to not be accessible, but in essence, HTML on its own, it provides quite a bit of accessible experience, let’s say in general.
So GraphQL is important here because of the flexibility, sorry, I think I’ve never mentioned GraphQL, and now I’m talking about it as if I have, so I’m just going to stop for a second. The way we fetch dynamic data is not with PHP like other builders do or tools do; we use GraphQL, because it’s easier to get exactly the data you want and really transform it into structures of data that you like or that you need, so this provides us with this separation that you can really then use nicely to achieve complex or really just semantic structures with HTML while using dynamic data, so this is the first part.
So when I’m saying sectioning usual approach, I’m referring to most builders. Of course that is not valid for all builders; but in some sense, most of them, so when you open a builder and you look into the kind of sectioning elements or layout or design, these groups are called different ways, you will have blocks or elements or modules with such names: container, section, block, div, columns, rows. I did something here. I’ve written A-dot-button, where buttons are actually links, and then let’s look at this a bit more, so if you look at these elements other than section and div, which themselves are not semantic, or at the least, div is completely not semantic, and section is the least semantic of layout or sectioning elements. Others have nothing to do with semantics; they are really design concepts. These are blocks, columns, rows, containers. It does not seem like someone was thinking about semantics when they made those.
Compared to this are our layout section, which has header, main, footer, div, article, section, side, and button is not from that section, but we actually have a button which is a button, and we also have a way to write any HTML element, so because we list a lot of them and there’s a lot of them, it would completely overcrowd the UI, so you can just start typing, and you can create custom elements, and in fact, we do write a lot of custom elements called Builderius-dash-something, and use them like that as well, so this allows you to really kind of do what you want.
One of the reasons why this is also kind of good.., and I recently actually wrote in the accessibility group question about details element. It was that we don’t have it as a module in the builder, but because you can write custom elements, you can make it on your own, and then you can save it as a custom module and keep using it, so I was thinking, since I kind of believe in this HTML-first approach, it might be the best way to make accordions, and the discussion came out that it’s not necessarily so, but that’s the idea. You can kind of really have access to HTML, and that should empower you to really create an accessible website.
>> 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.
A WordPress native tool, Accessibility Checker provides reports directly on the post edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand.
Accessibility Checker is an ideal tool to audit existing WordPress websites find, accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. Scans run on your server, so there are no per page fees or external API connections. GDPR and privacy compliant, real time accessibility scanning.
Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password protected sites, view site wide open issue reports and more.
Download Accessibility Checker free today at equalizedigital.com/accessibility-checker. Use coupon code accessibilitycraft to save 10% on any paid plan.
>> ELVIS: Although it’s not only elements, so you can really easily add class, ID, any Aria element, role, data, whatever you want, so we make this available for you. You just type it in any element. We also add some of them in some elements because we think we should promote them in a way, so for instance, although you could write any attribute to an image module, image module will have a special ALP field there for you prepared so that it kind of reminds you that you should have something here.
Going back to GraphQL, this is also where we can use dynamic data to generate these values of these attributes, and the way this has proven to be very exciting for me was when I was doing this accessible menu, and when I started thinking about the button that opens up a submenu or the keyboard or a screen reader, and I needed to add Aria controls attribute, which should point to an ID of an exact element, and it should open, and, of course, menu is a dynamic thing, so generating these as someone adds items in WordPress to their menu. I could loop over these items, look up their IDs, and use them to create values for the Aria control, and so that’s easy to do and make a dynamic menu like this, and even further with some new modules, we are now looking towards how to do that even without GraphQL, with some modules that can make it easier for you to do it like that. That’s kind of the approach here, that dynamic data can be put in any kind of micro elements like attributes, but also on elements themselves, generic elements themselves, in order that you can really kind of hook up elements in a way that is going to be understandable for most users, hopefully.
So this is the moment I want to show you a little bit of this, so you’re going to see an old UI, which we still use, and the idea here is, I’m going to show a little bit of how sectioning in Builderius works, how we can use these modules, and I want to create kind of a dynamically-generated list, kind of a menu without styling, to show this thing that I’ve just described, how we can make these attributes come from IDs and so on. I prepared some stuff for me to be a bit quicker, but, you know, you’re going to see… Auto time zone converter. I don’t need. I’m going to make it a bit bigger, and hopefully everyone will see it like this.
So when your Builderius is installed, you will have a menu item here, and it has a couple of items. Components and templates are basically the way you structure templating system. Components can be headers, but it can also be a small reusable element, like a card or something, and templates are the entire pages, so I’m going to open up the one that I’ve already made which controls the home page. We work only in templates, and we expect content to come from either custom fields or the Gutenberg editor, so you are not using this to make pages, but to make templates to create, let’s say, themes of a sort.
So we are now here. The panel is one collapsible panel, and your canvas is blank when you start. You add any element by pressing on the module here, and you get your options, because there’s a lot of them, I always search, and on the top here are custom modules that I’ve made myself. If you didn’t do that, then nothing is here, and it starts layout modules. Here we have header, footer, section, the things I’ve been talking about, so I’m going to just add a couple of them. Let’s say I’m going to add a main after this, and I’m going to add a footer, and then within main will be article, and within the article, I can add a heading, and I can add a div now for all my content.
So if I would now want to populate this with some content, I would go to h1 and delete the placeholder text, and choose post type, and because we’re on the home, it’s going to tell me “home.” So I use this icon, which is next to any field that can take dynamic data, which is almost all, and I’ve just pulled from a list. This is all coming from GraphQL queries that are pre-made for our users, and they are not available in the current Builderius version that’s publicly available. That’s one of the new features we have the opportunity to see here, and then I can do div, and do the same. I can say, content, and content would populate if this homepage could have anything.
So that’s how easy it is, and how kind of front facing these semantic elements are. For instance, we do not have like a main element for us to be a section, and then you go to section, and then you go to advanced, and then you change to header. It’s rather they are right there. Right.
I can also change my mind and I can say, OK, maybe this should actually be a section, and I can do that for most any element, so you can do that, and it then changes the name as well, telling you what is what, but the idea is this should be easy for you. This should be, like, when you want to make a header, you should just type “header,” and it should be here, and you should be able to add it, so that’s something that we, I guess, did. I’ll just remove…
>> AMBER: Can I jump in and ask a question that I’m curious about?
>> ELVIS: Yes.
>> AMBER: If you were to try and add, like, two headers to a page, would the builder flag for people, that you’re not supposed to have two of those tags?
>> ELVIS: That’s a great question. This is something we have planned to do, and it’s going to be a bit later in the presentation, but the idea is, yes, to make those basic audits that can be done by the tool and not by the actual audit person auditing; to build them into the builder. Right now, we don’t have that, but that is our plan. Yes.
>> AMBER: Yes, it’s cool that you’re planning to do that.
>> ELVIS: Yes, so to remind a little bit, the thing that we have achieved right now is make it easy for people that know how to do it. There’s lot in front of us to do more, of course, because if the plan is to actually help people do it, if they don’t really know, then, of course, we have to do much more, but right now, we wanted to start with this foundation where you can do what you want and it’s easy for you, or at least we hope it’s easy, so this was the sectioning element.
Now I want to show you how we can work with attributes. I’m just going to add a section with pinner container. This is a custom composite module that I’ve made that kind of centers things, and for instance, we make this heading, but also to kind of, in the accessibility tree, when you look in the browser, you might want to define this region by whatever is written here, and to do that, to kind of add to the fact that this has a heading inside, you could do that with this guide by attribute, so you can come here, and then, like [inaudible], which allows you to add as many attributes as you want, and you can type Aria labelledby. Hopefully, that’s right, and now I realize I don’t have an ID, so I can come here, add an ID first, and say, section title one. OK.
>> AMBER: I think you need two Ls in your labelledby.
>> ELVIS: Thanks. Let me… label… Like that, and value, so this now, let me test if it worked. By pressing the button to preview in the front, I opened it up, and if I zoom in here, I can press here, this accessibility tree, and the region now has kind of a label, and it should, as far as I understand, help screen readers kind of navigate through this content of the page more quickly and more informatively, so that’s a basic use of a custom attribute. Nothing special there, but it’s here.
OK, hopefully I’m not too fast. If I am, please tell me, so I’m actually going to add this again because I want to actually make this dynamic list within it, so I’m just going to say, list, so we kind of know what we’re doing, and if I want to add an element within another element, I can just use this plus element. I want to use a module we call dynamic list; it’s here, and by default, when you put it in, it’s going to give you some placeholder data, so in this list element here, this is just looking for anything of the data that sits in the actual dynamic list element. This is producing a UL element. Then we have a template, HTML element, which does not render on the front. It gets removed, so you get a pure Li elements within UL, but we use it for conditions and for of this kind of component-based approach and development, in which it kind of makes it flexible to create conditions and different results.
So in order to do this, I want to use this dynamic list to generate a WordPress menu now, so to do that, I need to fetch some dynamic data, so I’m going to remove this placeholder, use, again, that database icon here. I’ve pre-created a custom query before this presentation, so it kind of goes a bit faster, and I have a source of data here called menu items, so I can click this, and at the beginning, I’m going to get everything about each menu item, but if I replace this, this is a kind of a template tag within these two curly brackets, which allows me to fetch any element of an object, like a menu list item is.
Right now, I want to, I guess, print the title within the A tag, and then I want to print the URL as well, so I see here I have Title and URL to reference within this kind of loop context. I’m going to do it like this. I’m going to add a link, simple link, and inside, instead of this, I’m going to pull the title of the link, and then instead of this shebang, I’m going to show the URL, so right now, I’m getting, like, a top level items, which allow me to navigate this as a menu, but I need also to show the submenus, so in order to do that, I need to add another module, and this time a simple list, and then inside of that list, another template, and then a list item.
I shouldn’t have deleted that, but [inaudible] and then I’m going to add template. I’m going to add a simple HTML element, so it’s like any kind of element, and turn that into list element, and then inside, for now, I’m just going to write a link like this, so it still didn’t show anything, but if I come here, right click above the element in the canvas, I right click and I [inaudible], now I’m getting all the links, even the links that are sublinks, but they seem to be on the same level, so I need to make some conditions so that I can say, “OK, so give me these links only when there they are children,” let’s say, so I’m going to do that like this. I think here I need another template within the top list element, and then I put this here.
I put a sublist into the template, so now I can add a condition, and condition is children, so it’s saying, “OK, so give me this only when these are children.” And if you look at the canvas now, you can see that this link link appear only under the blog top link, which is because this is the only link that actually has children, so we have just made, kind of, we said to the loop engine, “OK, show this tab list only when it’s actually a child of another item.” So we now have this. I will indent them just so it’s easier to distinguish, so I can go to CSS settings, add a selector, and say, “Give me a UL element within the UL element.” And I’m just going to use margin to do something like 1.2 rem, just to kind of clarify what is what.
OK, so I want to show now the HTML so that it’s kind of clear where we are in this process. OK, so this is the list, the top level list, and the middle list item has a ul, which then [inaudible], so I am now repeating the ul element, which I shouldn’t, so I need to change some of this, so let me see. Around here, I have list inside… Wait a second, so actually, I think here, I think I need to use in the other line. Oh, it’s different. Where am I? OK.
So right now, I want to hide… No, I need to add a button, sorry. A little bit lost here, so within this, I need kind of a toggle button that is going show only when we have a sublist to open. We will add it, therefore, within the template, and so I need a button, and we need it to be before the list. OK. Of course, when I do the demonstration, I made some mistakes, so just give me a second.
>> AMBER: That’s the fun of a live demo. [laughs]
>> ELVIS: Yes, so I’m getting these repeated. Oh, well, in order to see a bit better how this works, I’m going to add our menu to see how it’s done there, so I got to go here. OK, so we have that children. That works.
>> AMBER: There was a typo in the loop name. Does that matter?
>> ELVIS: Sorry, can you repeat?
>> AMBER: Go back to where you were. Do you see the loop recursive item name? It doesn’t have an E in children.
>> ELVIS: Yes, that’s a different one. Yes, that’s not wrong. This is another attribute that makes it possible to be a recursive menu, which means you can have as many levels as you want. It’s a bit more complex thing to do, so it’s kind of within the menu [inaudible]. It’s done for you.
So we have a top element, then we have a template, where we actually have valid data condition, and this, so this is telling us there are children. I’m going to use this same logic here. Let’s see if it works like that. Conditional. Yes, now it works. OK, so it should be a condition, not source. OK, so this is our custom menu going on.
So now we want to give this button an Aria control that will point to this sublist element, but we want to do it dynamically. I’m going to revisit this, just to check that everything is actually working in terms of the structure of the menu, so we have a list, three list elements which are top here, so they are on the top. The middle one has an A in the link, which goes to Blog, then we have a button, and then we have a UL, but it doesn’t have an ID, so we’ll add that. We’ll go to attributes, and within ID, there’s a dynamic source for that, and we can just say ID. That’s the first step.
So let’s see what it is, so it’s 1275, and it doesn’t have to be entirely dynamic; we can modify it, so it can be something like submenu dash… This has to be in single quotes, and then this, I don’t know how that is called, this wavy character. I’ll zoom in so you can see.
>> AMBER: The tilde, I think.
>> ELVIS: Yes, tilde. Right, so I can now reload again and save to preview the output on the front, and it’s going to say, “submenu 1275.” So this is an ID from WordPress that it gave to this navigation item, and I’ve combined it with some name that kind of makes sense. It’s kind of easier to understand by another developer that comes after you and wants to see what’s going on, and so I can do exactly the same thing on a button, so only on a different kind of attribute.
So I’m going to make a new one and I’m going to call it Aria dash controls, and I’m going to paste this. Save, go on the front, and now the button points to this UL element.
So right now I have demonstrated a little bit how you can use dynamic data flexibly to get various aspects of WordPress data items, and how to link them together. Of course, what is missing here is kind of an interactivity that is usually provided by the JS, JavaScript, so that’s missing here, and that’s something you still have to… Like, if you’re not using our menu, you will have to do that toggle thing that’s going to also change Aria expanded, so on the button, of course, we should also have another element, Aria expanded, and it’s going to be false by default, and then that should… Modify states of other attributes, and some problems we have with just the icon when it’s in the menu, but when we finish this, you will be able to actually build your menu as an accessible menu without writing any line of JavaScript.
Although the difference from just using our menu is that you’re actually going to be able to build any kind of menu you want; while with our menu, there’s a structure we made, right? So you can change it a lot. Just move this on the side, but it’s still set somehow, and it might not work for you, so the idea is, and that’s kind of going back to the beginning, even if we don’t have some element, you should be able to make it if you have knowledge or time.
For instance, I’ve made the Builderius menu before there was a menu as a module. You just take some time, but you can do it, so it’s kind of, in a way, if something is missing in the builder, you should be able to do it with a bit more time on your own.
OK, so that is the first…
>> AMBER: I saw a couple of questions that I wonder if it might be a good time to pause and ask them?
>> ELVIS: Yes, yes, go ahead. It’s perfect. Yes.
>> AMBER: I know you showed just a tiny bit, but someone did ask, “Can you show, again, either styling or how you define CSS in this?” So let’s say you were building your own menu there, where would you go?
>> ELVIS: OK, sure, so before I say that, I’m going to say a bit about.., because I didn’t want to talk too much about CSS, so let me just give a brief.., because it takes CSS a bit differently than WordPress does. Not so much differently from other development contexts, but maybe less so in WordPress. It’s a component-based system, which means that everything you build in Builderius is scoped to a certain scope, so it can be a module scope, or it can be a template scope, or component, or global, depending on what you’re using, so depending on what you want to do with the CSS, you can place it in different scopes; and that way, you almost never loads any CSS you’re not using.
So if I’m making a menu, I’m going to set my CSS within it, especially because that’s going to be a component, so when you place it as a component, it doesn’t have to be global to be able to be changed from one place, because as a component, everything about it can be managed in one place, so in order to show this, I can just make a small detour here and go to components, and I prepared one because I thought it might be useful, so this is the header component, and it doesn’t have anything in it right now, but I’m going to just quickly make up a header, let’s say, and I’m going to show how to do it with CSS, and also how, then, to use it on other templates.
So I’m just going to add a header. Within it, I’m going to add two things, like, let’s say a site title, and a menu, like a typical horizontal bar that we normally use, so first thing, I’m going to use text element, and I’m going to move this over here so you see it, and inside of it, we have kind of a toggle that enables you to transform any element into a link if you want, so you put something, “Oh, I actually need it to be a link,” you can just click here, and then it adds also a URL field for you.
So here I’m going to use a site title dynamic element helper function; and then here, it’s going to be site. I have to type, because it’s… Actually, I put the wrong element. It has to be the site title, not post title, so site title, and then site again, but this time URL. Now it’s a link as you can see. I can hit “escape” to see it better, so it’s a link now, right?
OK, so that’s talking about site title, and then next to it, I’m just going to add a menu. I close this now, you’ll see it here, but, of course, it doesn’t look right. The one is on the top, and the one is below, and the menu is not the real menu, so I’m just going to open my menu builder, go to nav, and then menu element itself. There is a placeholder data here. I’m going to delete that and type nav, and I’m going to get a nav menu option, and then just choose the exact menu I want, and click “submit.” Once I do that, it’s actually a real menu now, and now the last thing is CSS.
So I can do this on the top module that holds the entire structure, and I’ll do a couple of things. I will make the background white, so if there is another kind of background that appears below it, it’s going to still be visible. I’m going to use Flex to make it horizontally organized, and I’m going to add z-index, like, position relative, and z-index high, so I don’t know if I fix it later or something, stuff go below it, so let’s start with this.
All the time, so far, we were in data settings, so data settings are kind of HTML part. This is where you write elements of HTML. The other part is CSS settings. This is not necessarily the best organized UI, but that’s why we’re making a new one, but this is how it is so far, and on the top you have scopes, so component or global, so this is where you can do stuff on the global level, but as I said, since we are now in a component, that’s going to be centrally controlled for everything about this, so we’re going to stay in the component. We want this CSS to not go anywhere, so I’m going to just stay where I am. I’m going to go to header, so even smaller context only within this module, and here, I can go to CSS and I can start styling stuff.
So first, I want my parent element, which is the header, to be a FlexElement and to align stuff within it, so I’m going to do it like this; I’m going to go to layout, and if you don’t know where something is, you can always use a search, so let’s say, display, it just shows here, and choose flex, and something happened, so it works. Then I can just delete this. I know it’s in layout, and I’m going to do two things. One is align center, so now the vertical alignment works, and justify content space between. OK.
I also see there’s padding missing here, which I know is not going to be a problem because menu had it already, so I can just add it to the header, and I’ll do something like padding, and on the left side, I’m going to do 1.5 rem, so it’s kind of not touching the edge. I can now add the background, background color, and paint it white, and I can also say, “color,” so text is black, so that’s working for everything, but, of course, not the link. I can do this the way it makes sense for me. You could do it differently. You can go to the link or something, but I can say any link within this header, make it black color, and I can do that while on the header.
See, here you have all kinds of collectors you might want, so you have the original one, which is this element you’re on, or some server focus, and all that, or you can make new ones, so you can just click on it and start to look for child elements, so space A, so it’s going to tell you there’s eight such elements selected, and I can now go again here and paint this black color, and as you can see, now it’s no longer purple, and I can also say, “decoration,” because, of course, in links in the content, I would say you neyo this, but for a site title, perhaps not, so I’m, in this case, [inaudible], and I could add a focus, and then add a style for that state as well, which might be, let’s say, I don’t know. Outline is going to happen anyway, so let’s say, underline, right?
There’s one thing we forgot, which was position, so position can be relative, so it’s not going to go anywhere; it’s just going to allow me to use the z-index to be, like, [inaudible], so I can now save, and all this kind of works, and component is finished. We cannot preview it now because component itself cannot be shown. It can be shown only when it’s in the template, so I can close this now, go back to WordPress, go to my templates, and I’m going to go to home, back where I was, and now I can add the components. I’m going to type “component,” which is a module, and inside of it, I can choose some of the components I’ve made, so header is one that we have, and now we have the header inside, and in any template we want, we can add the header, and with conditions, we can make one header in one component, offering different options, depending where it is. Or we have really robust conditions, like you can look for whether you’re logged in, what’s your role, cookie states, all kinds of stuff, and it’s all visual, so you can add a group of conditions, choose from a huge list of conditions, and even write a custom expression if you know how to.
OK, so that’s a header. I can save now. I want to preview just to show a little bit the stability of the menu, so we are here, we can click on this, we can come in. If I hit “escape,” it’s going to go back to the button, so I can go back again. If I go to the next one, it closes down, and so on.
So that’s how CSS can be used. Of course, there are cases when you need global CSS, which is why we have it, right? And in that case, you would go to global from any template, or component, like wherever you are, and just make your CSS selectors here, so you can come here and make a class selector, which is, like, sum dash element, and create it, and now you can use your CSS, and it’s going to apply to this class, and whatever has this class is going to get those styles. Also, it doesn’t have to be a class at all. I can edit it and say, Aria expanded equal true, and then it’s going to be for that kind of selector. You can use literally any kind of selector you want.
One thing that’s also maybe interesting to mention; we have custom media queries on module basis, so you do not need to have one media query for the entire template; you can make them per module, so if one module needs a bit of different [inaudible] you change because whatever design, you can do that. You do not have to have these gigantic media queries for the entire page when something like title is changing, you know, whatever size.
>> AMBER: I was going to say I think it’s neat, because I haven’t seen many builders where they put CSS on a component or an element basis, and so, typically, it’s loading massive style sheets on every page, and so I’m assuming from a performance standpoint, this is much more performant and better.
>> ELVIS: Yes. We did, like, a community project called WP Builder Fight club? Within the groups, and so all the users, or even authors, or builders got together and made the same page, and I’ll just say the layers were quite good, so, yes, it is good for performance.
Most builders or frameworks deal with this in something that could be called like, tree shaking, or this idea that it checks what CSS is actually used on a page, and then it ditches the one that it’s not, and that’s good, but it’s also very complex. It’s like a complex engine to do something that, here, it’s just like it goes with the component. You do not have to make complex database relationships to check all these things. This is just like CSS goes with this component. It’s where it is. It doesn’t appear if it’s not used, but we think it can grow well as a system for working with it.
>> AMBER: Yes, so I had two other questions about CSS, and then one more, and then I’ll let you jump back.
So Gerson [phonetic] had asked, “If you’re applying scopes in CSS, does that mean that the style sheets are dynamically generated for each page?”
>> ELVIS: Yes, but that would be a problem if they would be large, but it’s not page; it’s component, remember? So when you work with Builderius, your DOM is super small. You’re almost always in kind of a shadow DOM, if you know the concept. This is like this web components term for, like, in comparison, might be like Iframes used to be, but not the same.
So for instance, if I’m making this, this is my entire… I’m now in component, right? Actually, I’m not. Wait, I have to go to the component, and this is a typical component. It’s a menu, and whatever, and this is all it has, so when I’m doing this component, this is my context, this is the complexity I have. I do not really need BEM or different complex class systems to be able to handle this, because I can have the same class here, and then in another component, and they’re not going to clash because they are isolated, so I can just call it, like, link or whatever, and this CSS gets generated with this component, so we’re not generating for each page, but we’re generating for each component, so it’s small bits that go together quite well. Of course, that’s how do you cache this and so on. We have an internal caching system, so we don’t use any caching plugins with it, so it tends to work quite well, because these kind of little boxes that just get assembled at runtime or at moment when you request a page.
>> AMBER: Yes. He was also wondering, is it possible to write CSS directly instead of using the builder’s UI and have it automatically be applied to the UI?
>> ELVIS: Yes.
>> AMBER: He said, “I think that’d be a cool feature for people who’d rather type than click buttons.”
>> ELVIS: Sure, sure, that’s here, so if you want to write your CSS, you are free to do so. Just custom CSS, you make a style sheet, and add some bugs here, so, like, custom, and, let’s say, I don’t know, h1; color, black. Color menu can [inaudible]
>> AMBER: And it has prompts to help you. You can hit “return” and select the prompts if you don’t want to speed up typing.
>> ELVIS: Yes. Sure. I forgot the name of this editor component, but it’s the one that’s used by WP CoBlocks. Like, everyone uses the same one, so it’s really all the [inaudible] goodness works. Yes, you can use that. I thought I would prefer it, but I really don’t use it a lot for some reason, because of its searching capability, it really works quite fast for me, but it’s there for you.
There are some CSS rules we don’t have, very little, but in that case, I use it, but otherwise, it’s somehow easier for me here, but, yes, we have it.
You might not remember. I’m just going to show it quickly here. Where is it? Oh, yes, here. We go back couple of slides, so in the new UI, it’s going to be a huge, like, a big panel on the bottom. You will be able to drag it, and here you will have the code editor for everything, and you will be able to also scope it, and it’s going to be one click away, whatever you’re doing, and CSS itself, you will not have to push any buttons to confirm. It’s just going to update the canvas, same like when you use the UI, so it’s going to be a bit easier to access.
>> AMBER: All right, so last questions, and I’ll hide myself while you answer it, so you can go back to your planned slides. [chuckles]
>> ELVIS: Yes, no problem. Just ask.
>> AMBER: So someone had asked, do you have.., so I think it came up on the nav when you were building it, and then you did show that you have, for example, an accessible navigation menu, but are there other components that you’ve included, where you’ve kind of pre-built them in a way that is accessible? So for example, if they’re not familiar with using Aria controls, or, like, the Aria, they can just choose that component, and it already has all of the correct accessible attributes on it. Or is that something that they really would have to learn in order to be able to build things like that?
>> ELVIS: So perfect timing. As you can see the slide, interactive modules, so that’s where we are now. The idea here, rebuild accessible by default interactive components, so, of course, there’s a lot of challenges. This is the moment where I’m going to hope for advices and recommendations and feedback.
I wanted to use my Mac because of the screen-reader app, because on Linux here, it’s not really good, I think, but my Mac is so old that everything is so slow, so I use it for testing, but I don’t think it’s good for presentation, so we will not be able to use the voiceover, but anyways, we can see, look at the HTML, and make conclusions on what it would do. I will also tell you where the challenges are for me.
So, the Interactive modules, we have quite a lot of them. We have rewritten a lot of them for this next release before the UI, some, I think, are quite good; some, there’s a lot of challenges, so, yes, let’s go see them, so menu of you have seen right?
Accordion, I think, normally, should be by all the recommendations I can find. I’ll just go into this… Where am I? I’m in the header component, so I don’t need that.
By the way, if you have two screens, whatever you do, it updates on the other. Like, you can open the front-end of any page that uses your template and see the result immediately. You can work in several tabs at once, so there’s no fear there, so this is the front, we don’t need that. That’s the template. OK, so we have components. Let me just refresh that header, and I’m going to save.
OK, so we are now in, I think, home template, and I can name this properly so we know which component it is, like the header, and so I’ll just keep adding modules and comment on that, so let’s start with accordion.
Accordion is an older element, but I think it’s good, so we’re going to update it a little bit in terms of flexibility for design, but in terms of accessibility, let’s try some tabbing, so I tab into it, I click it, it opens up; click it back, it closes, all that, so I’ll now show you the attributes and all that, so this is the Builderius accordion. This is the custom HTML that we produce for dynamic and interactive elements, and so within it, there’s a button, an actual button. We have Aria controls, which looks into the content right after it. Has Aria expanded, and so on.
So if I now click on it, you will see that it gets Aria expanded… Where is it now? True. I’ll just make it a bit smaller so I can see. It has Aria labelledby, it has role, region. I mean, the content just opened up, and so on.
So I think, in terms of accessibility, accordion is one of the simplest ones, I guess, to make, so I believe it works, so when you’re in the builder, you will see accordion has this older approach that we can use, which is to use JSON inside, and Builderius, behind the scenes, everything is JSON, so when you GraphQL something, you’ll get a JSON output. We just use JSON, which makes it super easy to integrate with other systems, so for us, it’s super easy to fetch remote stuff because it’s how we do everything.
So it’s a bit strange for WordPress, but not at all strange for modern web. Like everywhere else, you’ll see JSON. I mean, even WordPress now with theme JSON, and block JSON, and all that. That’s all moving in this direction, so we think we’re on the right track in terms of where the things are going.
Although some older modules, like accordion is, don’t have a UI for it. You just have to type stuff inside. You can do it dynamically, of course, but there’s no modules, so that’s going to be rewritten.
That’s why I was looking into details element to use that, and it can be done. I can show a bit later when I go into the phase, when I’m working with custom stuff. I’ll just remove that and go to tabs, so we have tabs and dynamic tabs, so you can generate tabs from a loop of posts, or ACF repeater, or something like this. I’ll just use a static tabs now because perhaps it’s not important, and we have these tabs here, we can tab into them. Following the guidelines, they should not be used by tabs, but by arrows. I’m now pressing left and right arrows to navigate them, and if I press tab, I’m going to come to content. If I press shift tab, I’m going to go back to them and so on, so I believe it works.
We try to use button and not div role button or something. It seems to make sense having the access to the HTML, so these two, for me, are easy, so accordion and tabs, fine, but where it becomes a bit challenging is, for instance, modal. This is a new one. The tabs and accordion you have from before, but not modal, so I’m going to press here, so this modal builder allows you to build any kind of modal. We will be working more on what kind of triggers work with it, and that’s one of the questions I want to maybe get some answers to, because users want modals that can fire on scroll or time or whatever, and I will be reading on it, but maybe this is a situation to maybe discuss it a little bit. How do these kinds of things that open up not on user interaction, or at least not kind of intentional interaction. You’re scrolling because you want to scroll the page, not to see the modal, I guess, so if modal pops up at that point, yes, what is that for accessibility?
So I’ll just open again. You can even do it in the builder, so I can press and modal will open. I can press “escape” and it’s going to close. Or I can press here. You can do that same thing, so we tried. Just for keyboard, I don’t think it really works in the builder that well, so I’m going to try, so now I have a focus on the button. I’m pressing “enter,” it opens up. I’m pressing “escape,” it closes, and I’m back on the button, so I can open it up again, and then tab. Now, it will be nice to have a screen reader, but basically it should now tell you you’re in a modal, and how I did it is this, so we use a template tag, so you can have, like, huge images here, and It’s not going to load them until you press, so only when JavaScript fetches stuff from the template HTML element and puts them elsewhere in the domain DOM, it’s going to send those requests and get those assets, so you cannot see it now because it’s in the template.
So in order to design it, it’s actually quite easy. You just have to take whatever is in the template, you grab it and take it out, and now you can actually see the modal, and you can design it, you can add stuff to it, you can do whatever you want, but let’s talk about accessibility, important stuff, so for instance, if you…
>> AMBER: Do you have a dialogue tag?
>> ELVIS: No, we didn’t call it dialogue. Yes, you can make it. We can make it.
>> AMBER: Here, I’ll post in the chat. There’s a dialog HTML element.
>> ELVIS: Yes, we know. The reason why we use it for our cookie consent is because Vitalii was excited about it, but there is this trade of, older browsers, newer things, so, for instance, in Safari that is two years old, it’s not working, so we’re kind of still thinking whether we should use it, and because this one…
>> AMBER: Yes, I guess if you put a dialog role on a div, then that would be fine, right?
>> ELVIS: Yes, so I think I have… Wait, where did I put it? Give me a second. They’re not here. I’m thinking I’m missing some stuff, but for instance, I’ve added this paragraph, which is hidden, which is for the screen readers. It appears only for the screen reader. It’s the first thing within the modal, and it reads whatever it tells you here. Or actually not. Wait, no, it should be… Oh, my God, I think this last update is missing some stuff about the modal. I was adding kind of a screen-reader text that announces you’re modal. It tells you, “You’re in a modal; hit ‘escape’ to go out.”
So I like the fact that it tells you this, but once you go out, it doesn’t tell you that it succeeded, so one of the questions, for anyone that might know, is how to do these things. Like, when you open a modal, it actually tells you you’re in a modal, and then starts to read header, the content, whatever, and then it comes to the close button, and you can close the button there, or you can just hit the escape key, which was announced to you in the beginning, so I think that works. Not in this one, I guess.
>> AMBER: So do you know about role equals dialog? You could maybe even open this on your screen and everybody could see it. I posted a link in the chat, so you shouldn’t necessarily need screen reader text to tell them, because if you give the div, or whatever… Is it a div that your modal is in?
>> ELVIS: Yes, I’m using a [inaudible].
>> AMBER: The modal wrapper, basically. Well, not the button, but like the actual modal itself that you’re content is in, or whatever container. It’s a div. If you give it a role equals dialog, and then you can [crosstalk ] add the same thing, like… Yes.
>> ELVIS: So I can come here, do this?
>> AMBER: Yes, and then even if you had the labelledby, and you labeled it by the heading, you could, on that same container, label it by whatever heading is inside that modal when it opens. Then if you have JavaScript that shifts focus into the modal, then when it shifts focus in, it would read as it’s a dialogue, and it would say the name of the heading that’s contained in it.
>> ELVIS: Like that?
>> AMBER: Yes.
>> ELVIS: So I’ve now added this to the dive, [crosstalk ], and h2, it already had an ID, and so now I should be able to just drop it back in template, save, and now that I open it up, that sounds nice. It’s nice if users don’t have to think about this, so by using role dialogue, it’s going to announce it properly.
How does that work with multilingual? Like does it translate well, do you know?
>> AMBER: I don’t think that there is a non-English version of Aria. I don’t know. Like, the screen reader would still probably interpret it as a dialogue, but I have not tested this so I don’t know, and I don’t know if we have anyone in the chat who can add comments about that, but my assumption is that if someone’s using their screen reader in, let’s say, Spanish, that the screen reader is going to take the English Aria, and perhaps instead of announcing it as a dialogue, it might use a Spanish word for that, but you wouldn’t change the Aria attribute to something that’s not [inaudible]
>> ELVIS: No, I’m thinking value. The value of the attribute. For instance if.., so, of course, value…
>> AMBER: I know. I’m saying, like, the value, that dialogue, that is a literal role that aria is. You can’t put anything in role, like, you couldn’t [crosstalk ]. There’s only accepted values, so I don’t think there is a non-English for that.
>> ELVIS: My assumption was that because it’s this kind of attribute, so it’s not Aria label, for instance, it’s role dialog, that it should actually use whatever is the browser’s language to say that, but I’m not sure, so that’s what I’ve asked, but it seems to me it might be very good. Otherwise, if we use Aria labels, we have also integration. We’re multilingual already, so we can capture strings and serve you different output within attributes as well, depending on the language that you’re using at the moment, so in Aria labels, we have tools to do that, but because I can’t do it here, I wanted to know if there’s any information on how it works with non-English or other languages.
However, I like this. Thank you. This sounds like a nicer way. I just wonder how the other thing disappeared. OK. Anyways, it’s a thing to handle later. [chuckles] So that’s the modal. One question is, if anybody has an idea, later, I’m going to check the chat, how to handle going out of the modal. Then, maybe dialogue handled that as well, and when you close, it says, “Oh, you exited” or something. Or if that’s even needed. I’m assuming yes, because it might not work, the escape key, so the confirmation that it worked seems to be something that would be desired, but I’m not sure. Yes, so that’s modal.
Now let me just check what I had just so I don’t forget some modal, so now I want to look at the Swiper module because that’s a slider. I guess most people who make website know about Swiper JS. It’s very well known. It has a lot of features in terms of visual aesthetics, and so we’ve updated it significantly, in part, also because of accessibility, so I’m going to just show what I talk about, so when you click it, it’s just in and it works.
We exposed all the Swiper script settings to the UI, and there’s a whole section on accessibility that they have. I used it previously in my hand-coded websites. I have no idea it has all this. Maybe it didn’t have it at the time, I don’t know, but it’s pretty impressive, so it has, for instance, outer Swiper container message for the screen reader. Then it has message for the previous button when Swiper is on the first slide. Message for describing the role of the slide element. Message for the next button when Swiper is on the last slide, and it goes in detail.
So I have two questions. One is pause button, which it doesn’t have, so it has all of this, but it doesn’t have an option to stop the output, so that’s weird. How do you do all this? That’s weird, so that’s something that we would plan to add to it, just custom thing that we would add, because I guess people would want this at some points at least so that users can stop it, so that’s one thing we want to do.
The other is, like, I’ve researched a lot about sliders and accessibility, and I’m lost, like, I don’t know what should be done, because when I try to work with this, it speaks a lot, and I’m not sure I understand stuff better because of this, so, in a way, any good links that I’ve not somehow found that someone knows about would be really appreciated. I usually also do this in a Facebook group, but I would like to learn, and then, from a user perspective, our question would be, like, we want defaults to be accessible, so when you drop it in, it’s not enough to just have the fields; they should be pre-populated for kind of a common use case. I mean, user can always break it, but at least the thing that we did should work properly, so any kind of…
>> AMBER: And that’s sort of the thought behind the Accessibility Ready tag on “WordPress.org.” It requires that the theme meets color contrast. Does that mean that the person who chooses the theme might change it to fail? Yes, they might, but the idea is, at least the default should be accessible, and then maybe even adding a message.
For example, I see in yours, you have the ability to toggle on and off. If it were me, I would remove that. Users should not be able to toggle accessibility off.
>> ELVIS: Yes. I like the idea.
>> AMBER: Right? But if they do, maybe you have a big warning. This is something I would love to see more plugin and theme developers do: adding guidance into the editor to explain if someone’s making a poor choice. I think it is good that there’s more…
Some feedback that I might put, like, one of the common things that sliders do is, even on the pagination bullets, I think it says, “Go to slide,” and that’s probably going to tell you, like, one of three, but what would be most useful for a user.., because they’re, like, “Well, why would I want to go to slide one?” It would really be better if there’s a heading or something on the slide to say, like, “Go to slide for XYZ. Go to slide for ABC. Go to slide…” Right? Because then they actually know what the point of the slide is? [laughs] And whether or not they would want to toggle it.
Gercy [phonetic] mentioned Gravity Forms. That’s also the only plugin I have seen that, where they are putting guidance in the editor. WordPress Core does it, so there’s some color contrast warnings, there’s explanations about alt text when you’re adding an image block into Core WordPress, but yes, there’s not a lot of plugins that are doing it, but I would love to see more plugin developers adding some accessibility guidance for people, because they don’t. Most average user doesn’t know. Even the average developer doesn’t know.
>> ELVIS: Yes. Thank you for this [crosstalk ].
>> AMBER: We are getting close to time, so I don’t know if there’s anything else that you want to share before… We don’t have our captioner past 11:45, so we’ll have to stop at that point.
>> ELVIS: OK, so how many minutes do I have left?
>> AMBER: About ten.
>> ELVIS: OK. Sure.
>> AMBER: This has been phenomenal, by the way. [laughs]
>> ELVIS: Thank you. Thank you.
>> AMBER: And we can definitely follow up on that carousel stuff in the Facebook group after the meetup, too.
>> ELVIS: OK.
>> AMBER: I’m going to hide myself. I’ll let you wrap. I’ll pop back in when there’s about three or four minutes left.
>> ELVIS: OK, cool, so the last thing is what Amber mentioned many times. It’s audits, so we’re looking at different, let’s say, tool that do audits for you, so right now, I’m showing an image of Lighthouse within Developer Inspector, or whatever tool of the Chrome browser, which does some nice things. Like, for instance, this site that I was checking didn’t have all the attributes on the images, and it passed all the other things that they look at, which is like logical tab, order, interactive controller, focusable, and all of those, so that’s something that we’re looking at to implement somehow in the UI.
When it comes two builders that do this, Webflow has it, so Webflow, for those that don’t know, is like a visual builder that’s not a WordPress based. They’re like their own closed system, but they have some really nice stuff, and this is one of them. They have audits. It’s like a small, subtle, like, an icon here. I didn’t leave because I wanted it to be a bit more visible, but it goes red if you’re not doing it right, and it goes green when it’s done well, and it actually looks at the entire page that’s rendered at the moment, and it looks, for instance, at the sequential ordering of the headings. It looks at alt, of course, again, missing alt text. It looks at nondescriptive link content, so links that don’t have text inside them, duplicate IDs, all of these things. I mean, not all of these things in terms, like… I think that’s all they have, so I don’t think it’s enough, but even just basic stuff.
For me personally, headings seem like super good, because I think they’re done well, but it can get complex, like, “Where is it, h2?” Or, “Add three,” and, “What if this h3 is a bit before h2, does that work?” These kind of checks, I would love to have them, so for us, this is, I guess, the third stage of accessibility within Builderius kind of implementation that we know about so far.
First one was being able to do it alone, if you know how to, using HTML, CSS, all of that, right? Dynamic data. Second one is interactive modules that are accessible by default, which is what we’re doing now, and we have a lot more to do, but this is where we are at right now, and then after this, within the new UI, we will be working on audits.
So I know about Webflow. It’s the first time I hear Core, somehow, I missed that, WordPress Core, but, for this, I wanted to also ask if there are recommendations. If you know about tools that do it well other than Amber’s plugin [laughs], but other tools, especially tools that’s not their only… Like, with your audit tool, [inaudible]. This is why it exists, but kind of implemented into processes, such as building websites, you know? Yes, it’s going to be helpful, because it’s, in a way, you don’t have so many precedents, so it gets harder to design and do well, so any kind of links or ideas about good examples of this, or bad, even, you know, maybe we should see something that should be done, would be really useful for us, but that’s what we plan to do after the new UI comes on. I’m going to devote a lot, so the first version of the UI will not have it, but we want to work on that after the UI goes out.
If you have questions, please ask. I’m kind of done. Thank you.
>> AMBER: This has been great. Thank you so much. It’s so much fun. I love seeing different builders. I hadn’t had a chance to see yours before, and it’s neat to see how you’ve taken a developer-friendly HTML-first approach that still sort of gives you that preview and allows you to potentially not even have to be coding locally, right, necessarily, if you don’t want to. I really appreciate you sharing that, and the effort that you all have been putting into to making sure the components that you include in it follow accessibility best practices, because that’s something not a lot of builders do, or maybe they’re just starting to, but it seems like you’re doing it from the beginning instead of having to circle back and fix things, so I applaud you on that effort.
>> ELVIS: Thanks. We think by doing it from the beginning, it’s going to be easier. Otherwise, you need to put stuff on top of your builder, and the idea here is kind of from the ground up should make it easier long term.
Although I have to say, I understand why other developers maybe don’t do it, because, for instance, menu, without the accessibility part, it would be done, like, in a week; and with accessibility, it took like two months, so it’s expensive to do it for the builders and a challenging thing, but I think it should be done. I’m excited to be doing it.
>> AMBER: Yes, so before we leave off, can you let everyone know how they can get in contact with you, if they have any other thoughts or questions or feedback? And then there was someone who posted; they sent a message only to host and panelists so you saw it, but they’re interested in having someone help them build a website, so I don’t know if they asked for your email address. I don’t know if you want to share that, or you could just message them directly.
>> ELVIS: So there’s a couple of places you can get me, so on Facebook, look up my name and ask me. I’m don’t really saying no to friend requests. I’m active in Dynamic WordPress Group, which I moderate with other people. I’m also following everything in WordPress Accessibility group, so you can find me there as well, especially because we have an event in this group. Feel free to ask me there, and tag me, or whatever. I’m going to try to answer. There’s also Builderius group. There is the link here as well. I’ll post it in chat, or share somewhere, which for those that want to know more about the builder, we’re there as well.
Amber, you asked me in the beginning about GitHub. We have a GitHub repo. I’ll share the link for that as well, so if you have some things to say specifically there, please do, so feel free to contact me. I’ll share my contacts, and we’ll be happy to chat and help, if I can, with something.
>> AMBER: Yes. Thank you, Elvis. Thank you, everyone, for attending. We’re going to sit for just a second so I can watch the transcript, and make sure all of the final words make it into the transcript for people who are relying on that. Otherwise, everyone, have a great day.
We’ll be back with a virtual meetup in September. We won’t have one the Monday evening, US time, just because of WordCamp US. If you are at WordCamp US, come find us and help at Contributor Day.
>> ELVIS: Thank you. It’s been a pleasure. I’m going to stop my share.
>> 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, Google 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.