About the Topic
Thanks to Our Sponsors
WP Engine, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local, and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.
About the Meetup
Learn more about WordPress Accessibility Meetup
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Links Mentioned in This Video
The following resources were discussed or shared in the chat at this Meetup:
- WordPress Accessibility Facebook Group
- Equalize Digital Web Accessibility Resources
- Equalize Digital Focus State Newsletter
- Equalize Digital Website
- Equalize Digital on Twitter
- WP Engine Website
- Follow WP Engine on Twitter
- Empire Captions Solutions Website
- Follow Empire Captions on Twitter
- Danielle’s Slides
- Figma
- Damon Cook: Block Theme Builders – Design with Figma
- Customizer Will Disappear for Some Block Theme Users With WordPress 5.9
- WordPress Plugin Simple CSS
- Danielle’s Website
- Find Danielle on LinkedIn
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Read the Transcript
>> AMBER HINDS: I’m going to officially get started now. Welcome. Feel free to continue talking in the chat if you want. I have a few announcements and then I will introduce our speaker. Let me just make sure. If this is your first time here, I always like to tell people that we have a Facebook group that you can join to connect between meetups, get questions answered, talk about accessibility and WordPress.
You can find it. If you go on Facebook and you search WordPress accessibility, otherwise we’ll probably toss up a link in the chat as well. If you are interested, this is a question I get asked every time and I’m sure that someone’s going to ask it in the chat later. Who’s coming in new or a little bit late, but this is being recorded. The recording will be available on equalizedigital.com/meetup.
You can find all of our past recordings on that place. See upcoming events, sponsorship information all of that there. This is being recorded. It takes us about a week and a half to two weeks to get corrected captions and a full transcript done and then the video will be available there. Bookmark that.
If you are interested in getting notified, we send emails twice a month typically on Wednesdays and they have information about upcoming events, the links to recordings from most recent past events as they become available, and news from around the web related to accessibility. You can join our email list. There’s a link to it that I think we can maybe toss in the chat, but it’s equalizedigital.com/focus-state.
That’s a great way to just stay in touch with what’s going on with meetup if you on our email list. We are seeking additional sponsors for our daytime meetup. If you or your company would be interested in helping to support the cost of our live captioning and helping to ensure that our content can stay accessible for everyone, please reach out to us. You can email us at meetup@equalizedigital.com.
That is also the best email address to use if you want to contact us, if you have any recommendations or questions. I think we have speakers through the end of the year which is super exciting because Paula has worked really hard on getting all that lined up. If you are interested in speaking at any point in time, please do contact us because we would love to get you on the schedule as well.
Who am I? If you haven’t come before I’m Amber, I’m the CEO of Equalize Digital. We are a certified B Corporation and a WordPress VIP agency partner. We’re also a member of the International Association of Accessibility Professionals and we really focus on WordPress accessibility. That’s what we love and it’s our passion. We have a WordPress plugin called Accessibility Checker. There’s a free version on .org.
Basically what that is. It’s a little bit like those SEO plugins that put reports on your post or page edit screens to help, whether or not you’re doing a good job with SEO. We do the same thing only for accessibility. You can learn more about that on our website if you’re interested. We have two sponsors this evening. The first sponsor is WP Engine. WP Engine is a WordPress technology company. They used to just be a hosting company, but they’ve gone quite beyond that.
They do managed WordPress hosting both through their WP Engine and their Flywheel brands. They also own a tool for building locally on your computer called Local. They’re the makers of Genesis software or Genesis themes, I should say. They recently acquired a lot of other developer tools including advanced custom fields and some other plugins from delicious brands.
They are @WPEngine on Twitter. We always like to encourage people to tweet a thank you to our sponsors. It helps to encourage them to want to continue sponsoring our meetup and helping us to make it accessible for everyone. If you want to learn more about them, you can learn more about them at wpengine.com. Our other sponsor this evening is Empire Caption Solutions.
Empire Caption Solutions has very kindly donated their services to us for post-event transcription and creating our SRT file which is the file we need in order to put correct captions up on our YouTube videos and our recordings. In addition to doing post-event transcription and captioning, they also do live captions, audio description and provide ASL American Sign Language interpretation services. They are super great to work with really, really friendly, and super and very knowledgeable.
We highly recommend them. You can tweet a thanks to them @EmpireCaption on Twitter or learn more about them on their website, which is empirecaptions.com. We have a couple of upcoming events that I want to mention to everyone. The first one is on Thursday, September 1st at 10:00 AM central. We’ll be having Nick Corbit coming, talking about training screen reader user testers, he’s from Carroll Center for the Blind and he’ll be talking about that.
If you want to learn more about using screen readers to test websites and what that training process looks like come and attend that meetup. Then later in the month, Glenn Walker will be back to speak with us to do a follow-up. He did a talk on some of the settings he uses in the NVDA screen reader last year and he’ll be back and he will be doing some basic accessibility testing with the screen reader and going through a real website.
We haven’t decided on the one yet. If you’re interested in having him audit one of your websites or one of your client websites, let us know. I’m probably going to shout that out in the Facebook group too. He’ll be going through a real website and testing it and providing all the information that you would get to give people a feel for, how do you test, what do you look for those sorts of things which will be very interesting and that’s in the same time slot on September 19th.
This is my last call. As soon as you get off meet up, if you have not applied to speak yet, today is the last day but we are hoping to get more speaker applications for WordPress Accessibility Day which is a virtual conference that will take place November 2nd through 3rd, it’s a 24-hour event. You can learn more about that at wpaccessibility.day. If you are interested in speaking, sharing your knowledge all levels, you don’t have to have any speaking experience, we’d encourage everyone to apply.
Go submit a talk idea. I am very excited to introduce you to our speaker this evening, Danielle Zarcaro. Danielle partners with agencies, entrepreneurs, and large and medium business owners in complementary fields to implement marketing plans and strategies and does custom WordPress website development. They have done some work for us and I’ve really appreciated getting to know Danielle over the past year, first through the meetup and our Facebook group and some of the dev work that they did for us as well. I’m very excited to have Danielle here talking about full-site editing which as I mentioned earlier if you were joining, I have almost no experience with, I’m going to learn just as much from this talk as everyone is.
Thank you, Danielle. Let me stop sharing and then Danielle can take over sharing. If you do have any questions during the meet up there is a Q&A down below, it helps me if you can, I will try and watch the chat also. If you can put questions in the Q&A, that helps sort them out as well and I think Danielle said that you’re okay with us interrupting and–
>> DANIELLE ZARCARO: I think it would probably be best so that we can make sure that we’re asking the question about the right thing and don’t have to go back. Just interrupt me. I’ll try to pay attention but I think I’m going to keep the chat close, but I’ll have you up here and so just flag me down. [laughs]
>> AMBER: Yes. I will.
>> DANIELLE: We’re good to go?
>> AMBER: Yes. I think we’re all set.
>> DANIELLE: I’m in the process of my third whole full site editing theme. I’ve played around with them for a while. I’ve learned a lot and felt like it was time to share all of that information. We’re going to be talking about making accessible WordPress websites using that Full Site Editor that is still in beta technically but is available for us to use. A little bit more about me, I founded Paperback Web Development & Overnight Website.
I’ve been working with WordPress for somewhere around 10 years. I specialize in untangling and supporting existing websites as well as building awesome hassle-free websites overnight. That is where I’ve started to implement some Full Site Editing features. If you’ve never had hot chocolate in your coffee, I would highly recommend it. That is my go-to drink and makes me very happy.
If you’re looking for the best hot chocolate, I would recommend trying dunking hot chocolate inside of your coffee, black coffee, nothing else. It’s my little off-topic tip for you. Also on this slide here, I have links to my LinkedIn, Facebook, Overnight Website, Paperback Web Development to these slides and then to the code that’s in the screenshot. The link to the slides I think is going to be put in the chat, but it’s overnightwebsite.com/wpa11ymeetup. That’ll get you these slides if you want to follow along.
There’s the code that’s in these screenshots in case it’s easier for you to absorb code in text form rather than screenshot form, I did put those on GitHub. You can find all those links if you download the slides, you can then click on these links rather than reading them all out. Today, just to go really quickly, I have a list of the four main things that we’re going to go over. We have keyboard users and semantic elements, images, heading order and font sizes, and color contrast. These are a good mix of both most common things I see on websites that are issues and things that are newly available to us to make our lives and our client’s lives and our own lives easier.
As a little side note, FSE is going to mean either Full Site Editing or Full Site Editor, depending on the context I’m using it in. I may say it out as well, but if I say FSE, or if it’s seen on the slides, that’s what it means. As a developer, I am acutely aware of the drama that is associated with the Full Site Editor, whether it was implemented correctly or too early or whatever the problem is that you felt that was surrounding this it’s here, and it’s been here for a few years now. There are benefits and I wanted to highlight those, we all can read about negatives, but I think there’s a lot of really cool benefits here.
I wanted to highlight those. On this slide, I have here streamlined markup, modular development through blocks that can be implemented as needed. You get to separate the styles, templates, content, and advanced functionality, and you can make changes to any part of the site without impacting the original theme. These are all really cool, fun things that I’ve enjoyed playing with as well.
We’re not going to be over how to develop a full site theme, I’ll be giving resources at the end that has, I’ll mention it now, fullsiteediting.com is the place to go if you want to learn how to develop Full Site Editing websites, it’s a phenomenal resource. We’re not going to go over how to develop a full theme, but we will go over some specific things within them to keep in mind. I’ll be showing code examples.
As a quick intro into what that means, when creating an FSE theme, you using a lot of the block markup within your template files. A lot of these things that I’ll show you are available, whether you’re using just the block editor or Full Site Editing. Some of it may look familiar to you, WordPress is aiming to make a more consistent experience throughout. That’s good news for all of us.
All of these things that I’m going over today are things that developers had to take extra care to do correctly, and if a developer didn’t know or didn’t care, the site then wouldn’t be accessible. Things that are important, but were difficult and left up to theme developers, this new FSE approach means that the pain points have become a lot easier to address and are more likely to happen on a larger number of sites. That makes things more streamlined and up to standards and you don’t have to rely on each individual developer to implement them.
We have WordPress as our base and as it should be, our platform should be doing a lot of the heavy lifting and implement some of these sitewide things. One side note, as a big pain point for developers, you don’t want to give your clients access to everything, because they’ll mess it up. In the resources section, I do provide a couple of strategies to be able to block some stuff off. You can create user levels, you can allow them access to certain things and not others.
You can do anything basically with Full Site Editing the sky’s the limit. One thing I did want to mention here is that the Full Site Editor itself is not actually fully accessible. Now as a developer, you can develop a theme without having to touch the editor. You can start to practice some of these things and technically it does still have the beta tag on it, but it’s a pretty big thing and I don’t have any push or pull within the WordPress community. If anyone is around that is watching this can make a big push to make this a big thing. I did try it using like just a keyboard nav and some parts that they’ve used that they’ve pulled from the block editor are accessible, but it’s just not.
That’s a pretty big problem. Luckily we can start to play with some of these things because we don’t have to touch the site editor, but if we have a client who needs to use the site editor, we’d have to be doing the developing for them in a different way. That’s a pretty big problem straight off the bat about the Full Site Editor and accessibility. With that, we’re going to go over some improvements that have been made and hope that by the time it becomes no longer in beta, it will be accessible.
Our first topic here is keyboard users and semantic elements. I’m going to go through a few different points, this topic has six items in it. Our first item here is skip links. All you need to implement a skip link on a website is the main element on the page. This was something that each developer would have to implement within their themes and make sure they did it right and make sure that all of the styles were correct. Now, all you need as shown in this screenshot here of code on this slide, the whole screenshot shows a general idea of what a template might look like with three dots to truncate it a little bit, but you have your template part for your header.
You have your group for your content, you have a main element, which is selectable, you can change, a group can have any number of tags. You choose the main one and then you close it off with a footer. Now you’ve implemented a skip link, that’s it. It takes care of everything for you. I find this to be one of the most exciting things because I had a whole host of CSS and other things that I just no longer need. This is one of the easiest things to you can go do this now, just add a main element, it’s done.
The next item that we have here is navigation block. Navigation blocks are keyboard accessible by default. The work is done for you. No longer have to implement all kinds of weird things. Multi-level navigations are accessible by keyboard. On this screenshot, on this slide, I have two different navigation blocks. I have just a generic general one that you can add, and then the second one here that has some extra options.
This gives a good overview of what blocks look like. You basically have your block name and then some options that are on there. That FullSiteEditing.com website has a block reference that gives you a list of everything that’s available in these options for each of the blocks. You don’t have to remember. You can also go into the Full Site Editor, again, it’s not accessible itself, but you can go into a page, you can go into anything that has a block, copy the block, and paste it and it’ll paste the block mark up for you.
You can do some visual building and copy and paste things into your theme. Navigation is one of the tricky things because now you’re building navigations in a different way. You will have to learn, make a little bit of effort to learn this new thing. You can still add navigation locations to your functions file, but that just confuses things. I did that on one of them and there’s now two areas to edit. Navigation, I think needs a little bit of work, but from the front end, it’s fully accessible. You don’t have to do anything and it works. I tried it.
This is an example on this next slide of a bit of a more advanced navigation block. For instance, on the code here, I have a group and then inside of that group block, I have the navigation and then you have individual links with the site logo and then more links. Now, this was one of the harder layouts to implement because you’d have to implement navigation on the left, navigation on the right, have a logo in the middle. Now, all you have to do is lay out the baseline.
Now, what’ll happen is they’ll go into the site editor and click on these items and add a link to that. They’ll go into each one and add the individual links and then add the site logo. If they don’t add one, it won’t show up. You don’t have to worry about empty links or balance or anything like that. It will stay accessible. This is an example on this slide of the markup. I’m not going to read out what’s here.
My recommendation would go to the GitHub and take a look at this if you wanted. Basically, it just shows the example of how the markup becomes accessible. We have a nav element, buttons do what buttons should do and links do what links should do. We have aria labels and tags and hidden things. It implements the mobile menu for you so that it still becomes accessible.
This is just an example. There’s a lot of classes. Everything is a lot more class-based but this is a pretty good baseline. Then you can come in here as the developer and tweak this however way you see fit.
>> AMBER: We had a question about nav if you don’t mind me asking. Sandy asked, does the navigation include arrow keys? Have you tested this to go back and forth along the top-level nav? By default, can you use your right and left arrow keys? Then I have a follow-up on that, which is, do you know how the dropdowns engage?
>> DANIELLE: It’s hard for me to explain. It works, yes. I believe that the arrow keys work and then you go down as well if you want.
>> AMBER: I put you on the spot. Do you have one? [laughs]
>> DANIELLE: Can you still see that I’m going on a tab here?
>> AMBER: Yes.
>> DANIELLE: I don’t have anything actually implemented, but what I can do is build a nav real quick. Let’s see. I think it’ll let us add a sample page multiple times. Let’s see here patient, and then let’s just add a link, and then we want to go in here and then we want to add–I think navigation is one of the things that need the most help in my opinion. It’s not the easiest to work with.
>> AMBER: Is that in Full Site Editing is the back-end menu editor completely gone? You have to do front end to build your menus.
>> DANIELLE: If you have a location added in your functions, it’ll add the menu. Right here, there’s no menu, but if you were to go into the functions and add a location, and then when you go into the site editor, it’ll let you select that menu. Then if you make changes to it, it then creates it as a new menu. It’s not great. Then let’s see if we go around here. Now, I’m using Firefox.
I need to use Chrome to tab through things. I don’t know if that’s something that you’ve found as well. I have trouble figuring out Firefox. I wonder if I can share. Can I share my whole thing?
>> AMBER: Probably.
>> DANIELLE: There we go. Does that work?
>> AMBER: We can see a Chrome.
>> DANIELLE: You have that skip the content item. We have our site title and then it looks like the arrows don’t work. I was incorrect about that, but I can use the tab. If I were to be here and hit enter, and then tab, I guess it’s not–
>> AMBER: Doing the current behavior where it doesn’t show the dropdown under, you have to actually open the dropdown as opposed to showing it on focus, which would be correct, but the– [crosstalk] is
>> DANIELLE: This has a whole accessibility page, and I think there are some ways to mitigate some of those issues like keyboard navigation and navigation menus. It tells you a whole thing about what some potential issues are. This is a good resource that’ll like stay updated.
>> AMBER: This is on FullSiteEditing.com just in case com anyone can’t see the–
>> DANIELLE: Yes, sorry. We go to FullSiteEditing.com and I search for accessibility and it gives me this whole page about full site editing accessibility issues basically, and features. It tells you what is here in the navigation block and what issues might be and this whole page does that for all different things. It’s at least marginally accessible, and you can then further this with some JavaScript, just like we had to do before to make any accessible at all.
We had to implement a whole bunch of things. Now, at least if somebody does nothing, we at least have some way to navigate throughout the page and we can still go through. It has some default focus date, links, have default underline, and things like that. To answer the question, it looks like the arrows don’t work, but that could be something that– I can’t remember if there’s somewhere it’s like a full less, a whole big lesson thing on fullsiteediting.com.
At one point, she walks you through navigation. I think I remember there being a JavaScript file, if not, then there’s one out there that I can’t quite remember at this time. Hit me up later. I think there’s a script somewhere that helps mitigate some of those things about arrow keys and the menu opening when you want it to and things like that. That can all be done, just including a JavaScript file without having to filter through, because the markup is correct.
You don’t have to filter through the nav to generate the right markup. The markup is there. You just have to add JavaScript on top of it. That’s how you do that. Works still some room for improvement as always, but way better than nothing. Let’s see. Let me do a new share. We’ll go back to just sharing the slide for clarity’s sake. Is that everything for nav? Are we good on that?
>> AMBER: I think so, yes.
>> DANIELLE: Another semantic element is the button block, a big issue is developers using buttons for things that should be links and usually links for things that should be buttons. A button block is machine-readable text with the correct markup. No, we don’t have to worry about things. It’s wrapped in a div button block to give it the style, but a link is a link just to style to look like a button.
That’s just something I wanted to identify same with the spacers and separators. In this previous slide, sorry, I have the screenshot, it has a button wrapper block with the single button on the inside with the correct markup of a link as the link. Then on this next slide, we have spacers and separators. In this screenshot, again, I’m showing a spacer block and a separator block with the correct markup that’s inside of it.
These are all just things that you build in the block editor, copy it, and paste it and this is the markup that shows. An empty div is arguably not the best way to handle space. In the Guttenberg plugin right now, you can enable padding and margin. There are ways to not have a spacer block. There’s also a way to install a plugin to have a responsive spacer block. Space is still an issue that we’re dealing with, but it is aria-hidden, and it has the correct semantic choices.
The separator block in the screenshot has an HR. The spacer has an aria-hidden div. As I was saying before, certain blocks have the ability to select what type of element it is. Now, you may look at this and say why would you want to have a main or header available for some random person to select? If you have a blank template, for instance, this allows you to create that main element on the page without having to not have one. It enables that response, accessible skip link and all of that stuff, and select the item that you need. Better to have the choice there and not use it than to not have the choice.
The screenshot shows the HTML element panel with the select open to show your div header main section article and aside. The fullsiteediting.com block reference gives you information on which blocks allow you to select the elements. For instance, group, a group block let you choose what element. There aren’t many, which is good. Those are semantic elements. Everything is really easy, headers allow you to easily add a header. Footer allows you to really easily add a footer element, everything is semantically a lot easier to implement.
This is all really exciting stuff because we’re no longer just having dibs all over the place because the developer didn’t feel it or was in a time crunch, or whatever it is. There’s many reasons why you might not be able to do it. Now, it’s done for you. Our next topic is going to be images. This one’s a little bit shorter. We have two or three items here but again, alt text in our next slide is one of the biggest issues with images.
People not adding alt texts. Well as shown in this screenshot here, not only does it have the box for the alt text right in that side menu in the block editor but it has a description that says under the box, describe the purpose of the image and that’s a link that links to information about how to do that. It also instructs them to leave empty if images purely decorative.
Now some of the education is being done on our behalf. We no longer have to explain to people why they need an alt text, how to put one, when do they put one. It’s a lot more obvious. Right now in a classic editor, you have to click on the image, open the image, add the alt text, click away from it to save. Now it’s all right here, you just click on the image block and it gets added.
This I think address is one of the biggest issues with images by making it easier to add alt text. Unfortunately, we can’t add it for them programmatically right out of the box but this does make it a lot easier. A couple of types of images would be a featured image block and then a regular image block. In this screenshot, we have a featured image block, which is the same thing that you would do for a function to grab the featured image.
It does all of that grabbing of image sizes and source files and alt tags and all of that stuff it does programmatically just like it does with this block here. Then underneath that we have just a regular image block as a placeholder. What’s really interesting about this is it will show up on the front end, whereas some of those other nav items and other things won’t show up if they don’t add one.
If you have a placeholder image, it will show but since it doesn’t have a source file, it shows a little differently, it doesn’t show us a broken image, it just shows us a box. If you’re going to create some kind of pattern that goes along with your theme, or maybe an area in the footer that has a spot for some kind of alternate image logo or something that you’re doing, and you wanted to add a placeholder image, this is a cool way to do it because you don’t have to add any kind of actual placeholder image and clog everything up. You can add an empty alt tag, no source add a height and width and you’re good to go.
We have our image block always with that information added into that HTML comment and inside the markup. An interesting thing that you can do with the theme development is include a block with a placeholder, an actual image instead of just a gray box. When you do that, you can add an alt tag if you want. You don’t have to because the idea is that they would replace the image but if it’s an image that you think somebody might leave there, you might as well add an alt tag.
All of this will get replaced, the height the width, the source, the alt as they interact with this element in the block editor all this stuff will change. This just an out-of-the-box feature. It’s kind of a neat thing that you can do with ensuring that there’s at least something there, especially for client sites. This might not be as handy for a marketplace theme, where you’re using more placeholder images that they’re intended to be replaced for. For a client site, this is kind of a really cool feature because you can stick all the default images in there for them already. That’s it for images. Do we have any questions about that?
>> AMBER: I think we do. The first one is, is it better to add alt texts in the media library, or directly on the page or post?
>> DANIELLE: If you’re building the theme and putting images, just as here’s where an image is going to go, then don’t put the alt tag. If part of your process is to build the theme, and then go into the pages and add the content, definitely add the image so that you can add the alt tag and replace it and change it. Anytime you can add stuff into the media library itself, that’s going to be a lot more dynamic and a lot easier to edit.
I would say do that as often as possible. If we’re talking about trying to make it so that the client doesn’t have to interact with it and they’re tech-phobic, or they aren’t great at it, or they don’t want to do anything with it or the idea is to make a theme that is as close to custom as we did before where we were sort of implementing everything, almost hard coded in a way but this at least gives you the option to change it in the future, then yes, I would say add the alt tag so that you can at least make sure something’s there. I would just add it in the content.
A lot of times, when you have a page template, you’re going to just have page content in there as you put the page content in there, and then you’re going to go into the block editor on the page and edit the content in there. That’s where you add your images. This is for very specific templates, or a header or footer, or something very specific that wouldn’t necessarily be touched.
>> AMBER: I think too when it comes to actually building out the page, if you’re thinking from more of a content building perspective, you add it in the media library, then that alt text would be there for you every time you insert it into a page. If you’re using the same over and over.
>> DANIELLE: These images aren’t in the media library at all. They’re in the theme folder. This alt text is stuck to this image in this place. You can replace it.
>> AMBER: Everything’s just thinking about her question. I’m thinking if she’s thinking from a content perspective, and Lisa, feel free to correct me, but I’m thinking you might be thinking from a content perspective, or the user coming in adding it like what would we advise our clients to do? I think for me, the way I visit that is, is it contextual fault.
If you put in the media library, anytime you insert that image anywhere, it would use the exact same alt text, which might be correct for that image or it might not be. If you just add it on the side in that box, then it’s not going to save it to the media library and it would only apply to that image there.
>> DANIELLE: One way to look at it is, you can add it in the media library, and then this way you can edit it after, but at least you’re ensuring that something’s there. It’s really just about what you think is going to be the best workflow. Unfortunately, there’s no right answer, because they’re all valid.
>> AMBER: Do you know, because I don’t know if this is the case. Let’s say you have a block link just in the content, an image block, and you’ve added it, there’s no alt text input there. If you go add it in the media library, is it going to add it to that image already inserted somewhere else in the block editor or is it too late? [laughs] Do you need to go add it on that page? Because I don’t know the answer.
>> DANIELLE: I don’t know the answer either. My instinct is to say no.
>> AMBER: I know from a theming perspective if you’re pulling it with code, with PHP like get image, get all then it would, but if it’s been added in the content, I don’t know.
>> DANIELLE: Say does this come with any?
>> AMBER: Danielle, even tried it out for us, which is awesome.
>> DANIELLE: Why not? Right. It’s a good question. Let’s see what images- I don’t even [laughs] see. Let’s go here. Let’s do an overnight website one. Let’s add this image. We’re not going to add an alt text and we’re just going to stick it in there and we’re going to polish the page and then we’ll have this page here. I wonder if it’s going to show you my inspector window? Probably not. Right now there is no alt. Now if we go here, we say, awesome banner. Terrible, terrible on texting and we click away.
>> AMBER: It’s probably not all caps. [laughs]
>> DANIELLE: It’s all caps and it doesn’t do anything and then we refresh the page. I’m going to say, no.
>> AMBER: Yes, we can’t see your window.
>> DANIELLE: Yes, there’s no alt there and then if we click on this, you can see there’s no alt, so we would have to say this is–
>> AMBER: I think this is one of the downsides of images that have already been inserted versus images that are likely coupled with a function or– I don’t even know what those full site editing options are called if they’re function or they are just HTML. Your first one that you had on your side. Go back when the WP Post featured image up there, where you were saying you can just put that in it will get it. I bet it would.
>> DANIELLE: Yes.
>> AMBER: Get the alt text from the media library, but the same one down below might not, they’ve gone in and replaced it.
>> DANIELLE: Yes. Unfortunately, I don’t even know that that would be something that would ever be addressed either because you’d have to have a check in there where if image doesn’t have alt, add alt, only if it’s not decorative like there’s too many conditions that they wouldn’t be able to– if there was no alt there, it’s sort of implied that it’s decorative because you’re not adding it all and then to then retroactively, add in and alt, does that mean, all of the images and all of the places aren’t decorative or it’s just– and then do you update the ones that already have alt text?
I think, unfortunately, it’s just more of a process implementing the right process, and then that’s why care plans exist. Somebody did something wrong, or the hard way, or there needs to be something fixed and unfortunately, you have to fix it. I’m sure there’s a script somebody could write for a database to find all with image ID this and add alt if empty. I’m sure somebody can write something but it might take just as long to go through the pages and find the images and make sure that there’s an alt, use your plugin, and then it’ll tell you this image doesn’t have it alt, or whatever.
>> AMBER: I think that does mean though, that when you’re remediating a website, you can’t just go to the media library and add alt, use that to edit all your alt text because it won’t actually solve the problems on the pages per se you do edit that page.
>> DANIELLE: Right, but it will edit it going forward.
>> AMBER: Yes, going forward they wouldn’t have that problem.
>> DANIELLE: Right.
>> AMBER: On the purely decorative note, someone asked if the image is purely decorative, shouldn’t it be marked as they have double quotes? I’m guessing are the images with no entries coded so that assistive tech automatically skips these?
>> DANIELLE: In theme development, if it’s something that is a purely decorative image that you want to make sure is never– I guess I don’t have an answer to that. No, I don’t know that that’s a thing that you can add, I would have to look up this block and see if there’s an option for adding something because basically, what happens is when you have the block markup, which is the HTML comment, that has to match the element that is inside of it.
You can’t just add stuff in the HTML element if it’s not in the block markup. It has to be available to the system to be able to read it. I don’t know if adding some kind of aria-hidden or whatever but I was under the impression that if you have an empty alt, that’s at least sufficient in most cases.
>> AMBER: If there’s an empty alt like you have right there in your second section, the alt=”” then it would skip it. I think if they put an image in and they left it blank because they thought it was decorative then it would persist with that empty alt.
>> DANIELLE: Yes.
>> AMBER: It would only be a problem I suppose if– if you were to put the code this and not put alt equals at all.
>> DANIELLE: Yes, you have to have an empty alt, always put an empty alt.
>> AMBER: If you don’t, will WordPress fix that or no?
>> DANIELLE: Yes, with the caveat that I haven’t tested it but yes, if you add an alt basically this whole thing gets replaced. It’ll still have a figure and an image inside of the figure, but it’ll replace everything because maybe you’ve chosen a different size and so it changes the size full to size medium, everything in here gets changed as you interact with it. Yes, if you add an alt tag, it’s going to add the alt tag to the image. You don’t have to have the alt but if you don’t– I don’t know if you don’t add an alt tag if it then adds alt equals nothing, I’ll have to try that.
>> AMBER: If you left the attribute out in your code but somebody added in alt types when it replaces this, it would put it in, it’s not like you have to have it in your code necessary.
>> DANIELLE: Yes but to be confident about the MTL, they probably have to test it but it’s just do it, [laughs] just put the alt in there but yes, if we’re talking about a developer who doesn’t know or didn’t do it because they forgot, I don’t know, we’d have to test it.
>> AMBER: Sally commented in the chat that very few images are truly purely decorative and we did have a meetup, if you’re interested in alt text, all about that just recently. It was really good. I think we’re about to have the recording for that or maybe we already do but go check out our website. We have two more buttons, images always gets lots of questions. Sandy is wondering, is the image always wrapped in a figure tag, and then is it possible to take that out?
>> DANIELLE: Yes, it’s wrapped in a figure tag. If you’re using it as a block, then no, there’s no way to take it out. You can add an image on a page somewhere in a template, you can do whatever you want in a template, but then it wouldn’t be part of the block, you have to be careful, because if you’re building a page with the block markup, and there’s something that doesn’t have block markup inside of that, it may show up with invalid, something, something where it’ll try to recover it.
Then it might turn that into an image, so it could if it understands it, it tries its best to turn it into block. Having that hybrid approach does get a little bit trickier and I think would probably be the most buggy. You’d have to really do a lot of testing to make sure that if you added that image outside of a group wrapper, or if you just plopped an image on a page, you’d have to see how that reacted. The first answer is yes, it’s wrapped in a figure. The second answer can you not have one? Yes, but it best when done in certain specific instances.
>> AMBER: I think that part of the way WordPress uses that figure tag is it uses it to group if you have a caption or other information.
>> DANIELLE: Yes.
>> AMBER: I’m not sure. Feel free, Sandy, if you want to add more information in the chat or somewhere else. I’m not sure why we would want to remove it, I don’t know if it would cause any styling issues or anything like that, right?
>> DANIELLE: Not that I know of, and if anything, it’s best practice anyway. It would be a very specific reason why you would need to remove it because you can basically– basically you can remove block styles, you can like D style things. If you needed to remove styles from stuff, you can just do that globally, and then you don’t have to worry about it, then it’s just a wrapper.
>> AMBER: Oh, yes. Sandy said that a guy that she works with who is a JAWS user and JAWS is a screen reader for people who aren’t familiar, it hates them. I will say I don’t use JAWS too much myself, it’s mostly our testers. I don’t know if they get rid out but that makes me want to go back and read and see.
>> DANIELLE: Yes, it’s definitely worth investigating for sure. I’m going to write it down and I’ll try it out.
>> AMBER: I think there’s one more question and then we’ll let you go on. Patricia asks can the same image have different alt tags depending on which page it’s on like sometimes an image is used as a link and other times it’s not?
>> DANIELLE: Yes, you would do that in the block editor. I’m going to go back to the slide that has the screenshot of the alt text box and if I go over to our page that we were working on, and I click on the image, it has the Alt text box here. Basically, you would just add whatever specific Alt text was for that specific page in here. It won’t affect the rest of the images. That’s one of the reasons why I do like the block setup for it because I found more classic type website Alt tag boxes to be very finicky. Sometimes it would change it and you’re like, “No, I just wanted this one page.” I find this to be a lot more reliable. You don’t have to worry about it affecting globally if you change it on the page itself.
>> AMBER: That was our last question. I’ll hide myself and let you take back over.
>> DANIELLE: Images are funny because there’s very little that we can do programmatically. It’s all as you go, but it’s always got the most questions which is probably why. Our next topic is heading order and font sizes. This is a pain point that is sometimes hard to get around depending on the platform you’re using. I know Squarespace people tend to like using their specific headings because they’ve styled them in a specific way. The new WordPress way is so much better. It solves all of these problems. I find this to be the biggest issue out in the wild and one that can so easily be fixed that I just want to do it, just fix all of the websites.
Our first item here is heading order in code. In our screenshot here, we have a few different heading blocks and there are more. You can set a heading level, and then you can set a font size or a font style or anything like that. It’s all done really easily. In this screenshot, I have a site title block, a heading block with the default Level of 2, and then the font size as large. Then I have a heading block that’s Level 3. We’re still adding headings and divs and paragraphs to our pages even if it’s going to eventually be interacted within the block editor. We do have to still consider our heading order. The way we do that is through these additional options.
For instance, in the site title block that I have here, I have different styles of typography and font weight. Then you have that font size definition as well. That’s a site title, which defaults to H1. It’s the only one that I know of that defaults to H1. There might be one more, but I don’t know that I necessarily agree with that because we should be having a page title as our H1 rather than the site title. You can set the level on the site title to be whatever heading you want. You can set it to– Then the good thing about– Again if I had any pull in the WordPress world, I would say change that to not default to any heading at all, make a paragraph.
I don’t know that that’s something that we can do with site title right now, but at the very least, we can do it if we wanted to. What I like to do is use the page title block and set that Level to 1. It’s very easy to do. For most sites, I’m not including a site title necessarily maybe as an Alt text. Then you can do that through PHP still. I don’t use a site title much unless it’s in a title tag which you do on SEO. I just wanted to throw in the H1 level block that’s in here, but most of the time you’re going to be dealing with other alternate headers. If you’re in the block editor, you still can select H1. When you add a heading, it defaults to H2.
Again a use case could be a site that doesn’t have, say you want people to be able to set a page title as something, and then have a page Heading 1 as something else. This way you have a page template called page without title. This way, it allows a little bit more control without having those things tied. There’s a ton of use cases for all these things. This is one of the most exciting things to me that you get to play with all this stuff and not affect the markup at all. In our next slide here, we have a screenshot of the, I guess it’s page information box. If you click the little ⓘ at the top nav next to the W. I don’t know what that’s even called this thing.
The details window in that top menu, it shows a whole bunch of information about the page as well as notices about heading order, which I think is really cool. It’ll give you characters words, number of headings, number of paragraphs, number of blocks, and then a document outline. It gives the title of the page. It gives your H2s and then I have an H5. It informs me that it has an incorrect heading level. I think that’s really great to at least make people who are editing these pages aware like, “Oh, what do you mean incorrect heading level?” Even if they don’t know what it is, they’re at least now informed that something’s wrong without having to use additional plugins or anything like that.
It’s all built-in here and inform you that you’re doing it incorrectly, and you should probably do it the right way. How do we adjust all of these headings and fonts and paragraphs without adjusting the markup? We have typography in the block editor. All of these things are enabled or disabled in your theme.json. WordPress as I mentioned earlier is more of a class and style-based approach and that applies to typography as well. In these two screenshots, we have the advanced panel open in which there’s the HTML anchor, and then the additional CSS classes. That is front and center. To me, that was the biggest thing.
I loved the fact that people could add classes to stuff, specifically me, without having to toggle to a code editor. Then in our second screenshot, we have the typography panel open. Then I’ve opened the additional menu to show the other options that are available. By default depending on your settings, the typography box will show font size and appearance. Then the other options if you enable them are line height, letter case, letter spacing. I think there’s a couple more options too that you can enable. That allows you to interact with the text without adjusting anything else.
You can set a few default things. If you’re using a heading, use this particular font family. If you want to override that, then you make it available to select in the typography box. If you set the default H2 to font size 40 but somebody wants to make it 100, you’re like, “I’m not designing that but go for it.” You can enable things like custom font size. You can also define specific font sizes for people, and then enable or disable that as well. There’s a ton of control here for clients, for building websites, for making everything available to you as the developer, and never giving your client the login.
There’s a ton of things that you can do here with typography including colors, which I’ll go over in a second. This is one of the more exciting things because it makes it more likely to keep that heading order. This slide has another couple of screenshots on it where you can select options without typing in all caps or using headings for style like I said. The first screenshot’s an example of the size dropdown in the topography panel that has the default. Like I said, you set the default, and then you can add your own sizes. Then it tells you what that size is. You can set it in any measure as well. You can do pixels, EM whatever it is.
Then the same with the second screenshot, it shows the size, appearance, and letter case options. Then letter case is selected. It capitalizes everything or it capitalizes in title case or all lower case. Then this way it doesn’t affect the screen readers because you’re not typing in all caps. You just push a button and it’s done for you. This slide shows how you do that where you set the values or disable options in your theme.json. The first screenshot here is default font sizes where I’ve identified small, medium, and large.
Then the second screenshot has disabling all of the typography features where you are setting specific things and you don’t want anyone to mess with it. You have all of these options where somebody can do a custom font size, font style, weight, letter spacing, et cetera. All of these things are done through theme.json, and all of it is done for the betterment of websites. That does it for the heading order and font sizes. Do we have any questions about that? I think that one’s a little more straightforward.
>> AMBER: There were two. There may be giggles in my background. I don’t know if you can hear them. I hear kids running around back there. The first one was, can you go back to where you were showing the heading outline? We had an attendee who asked on this particular screenshot that you have, there is a title and it says sample page. Then we’re seeing two H2s and an H5 with a warning incorrect heading level. They asked where is the H1 on that page? Is an H1 missing or–?
>> DANIELLE: That’s the title. It doesn’t account for every case. I had mentioned before about, you don’t want to use the title as the H1 and you want to add your own H1. I don’t think that that does that. If we look at this local example that I have live, and I click the details, you can see, I don’t have any headings. The page title is that H1 presumably on the page. I think that’s sort of the intended use. I don’t know. I’d have to test out if a page template that we’re using, doesn’t have a title on the page, if that panel knows that you have that have, that is not the title. I’m not sure for all the use cases, but in this screenshot example, title equals H1.
>> AMBER: I looked at this on our site and when they asked because I was like, “I wonder what it shows on ours.” I’m trying to get a screenshot uploaded to drive that I could just share with everybody real quick. Maybe if you don’t mind me booting you, I could share for one second and show-
>> DANIELLE: Yes go for it.
>> AMBER: -them because it might answer that question. Let’s see.
>> DANIELLE: Before you do that, when I didn’t have any headings on here and I clicked the details panel, it had no headings. Then when I added a heading and then I clicked the details, I now have a Heading 2 and it’s showing me the title as the H1. I don’t know if the page template doesn’t have title as H1. I don’t know. I don’t know what it does.
>> AMBER: This is our site and what I noticed about this, what I think is important, and actually this is something that I only just recently discovered was here. It’s cool that you pointed it out, but it’s not the full page. It’s only telling you what headings exist in the blocks or the content because this is a heading, but it’s in a footer. It’s not actually in this particular block editor. It’s not showing up there. What I noticed is we don’t have our H1 because the page is just titled home. [chuckles]]
>> DANIELLE: Yes, exactly.
>> AMBER: We don’t output that, we are using in the block editor, and so it’s warning me. Your theme may already use an H1 for the post title.
>> DANIELLE: Yes. Perfect.
>> AMBER: I think that’s maybe like, “This is super helpful,” but I think people probably need to be aware that it’s only your content area. That’s why I think your title, it shows the title. Depending on how your theme is made, it might be out outputting the title and it might be tied as an H1, but it won’t know.
>> DANIELLE: Yes, correct.
>> AMBER: It’s only looking at what’s in the editor. I don’t know, sort of a thing that I thought was interesting once you shared that, it made me want to go open.
[laughter]
>> DANIELLE: It’s hard because it’s like a global widget that’s trying to account for as many use cases as possible. I think it does a pretty good job of that.
>> AMBER: If you’re editing the header or the footer in full site editing, does that same eye thing exist? No, because it’s like a front-end view of editing. That doesn’t exist to warn you if you’re– [crosstalk].
>> DANIELLE: That’s why I mentioned that we’re still adding headings to our themes and templates and template parts and all of these things. We do still have to pay attention to it. It’s just easier to implement now.
>> AMBER: Jean’s question was, do you need code snippet plugins for adding custom CSS? Do you recognize it?
>> DANIELLE: There is a plugin. I don’t know it off the top of my head that adds that box. I think it allows you to style. If that’s what you’re specifically doing, that’s probably the best way to do that. There are– [crosstalk].
>> AMBER: Even the customizer is gone now, right?
>> DANIELLE: Yes. If you wanted global custom CSS, you mean? I don’t know. You probably would add a snippet plugin, which you do most of the time anyway because I find it very rarely does a site not have some kind of tracking code. I’ll usually install some kind of header or footer script plugin. Then you would just have to do it in there I guess. There might be a way to do it and if there is, I’m not aware of what it is.
>> AMBER: One quick follow-up before you jump back. I guess I should finish on the code snippets plugin. I guess it depends on your use case and who your client is, and whether or not they’re going to add CSS. I would guess as a developer, you’re probably not using a snippet plugin. You’re just editing the theme. I noticed in the chat as a follow-up on the title, it says I can delete the title, so then I don’t have an H1.
My general recommendation to everyone is that is the incorrect way of removing your title. Frequently what happens then is you have an H1, is just empty. You have an empty H1. Then also just from the back end, I’ve logged into websites before that had 500 pages and 30 of them had no title. I was like, “How do you even know which one you’re supposed to edit?” Definitely not good practice.
>> DANIELLE: If it’s a classic theme that is being used, I would do some kind of child theme where you’re changing the template. That’s where full site editing and the power of all of this comes into play. If you take a look at this demo site that I’ve got and I open up the side menu, it gives me templates and template parts. All you would do is create a new template and add it. You’re not interacting with the theme. You’re not messing anything up. You’re simply adding a new template, and you’re not adding the site title to the page. If you wanted, right now there it’s only available for these items. Again, that’s why it’s a beta. In the future, you would then be able to just add whatever page template you wanted.
If we did like a front page and then when you’re editing the pages, that’s the next step of this. As much as it’s released, you can’t do everything with the site editor yet. That’s the intent of the full site editor is not only can you now then edit your 404 and your archive templates but that you’d be able to then add on as many page templates as you wanted so that you can then do that. If you had a full site editor theme, just add a template that doesn’t have a page title. It makes it just a lot more modular like I was saying. It makes it a little bit easier to implement those things. SEO plugins will take title sometimes. Don’t leave the title blank. That would not be my recommendation.
>> AMBER: I did get a follow-up on the custom CSS question. You had mentioned that there’s a lot of classes used and things like that. Can you explain, where would you put custom CSS related to any of those individual things? If you’re sending a class of whatever, where do you put the attributes for whatever, in order to style the things that are in the block?
>> DANIELLE: There’s a few different places. You can put styles, fullsiteediting.com, when you go there and walk through that whole thing. It doesn’t take very long to go through it. There are a few ways you can do it. There are a shared style place that you can add CSS, but it depends on how you code. If you stick everything in your style.css, put it in your style.css. If you have multiple CSS files that you use and then Minify or whatever it is. Maybe you want to add a postlaunch edits or however, you organize your CSS, you do it just like you would anything else.
>> AMBER: I guess if you weren’t a developer and you were playing with 2022 or something like that, then that’s where you would probably maybe need to install a custom CSS plugins.
>> DANIELLE: Yes. Basically, anywhere you add a class, any of those plugins are going to be showing that CSS on your front end. It’s going to target those new classed elements.
>> AMBER: It looks like Jean said that they’ve been using them theme.json.
>> DANIELLE: Yes.
>> AMBER: That was the last question for now.
>> DANIELLE: Cool. I believe that this is the last one that we’ve got. It’s got a little bit more screenshots in them of non-code things. There are a couple of caveats in this one. Our first color contrast item in the Color Selection Tool. I enjoy playing with this one. Again, it’s going to depend on your clients and your use cases. In these two screenshots on the first one, we’ve got a color palette that we’ve defined. You give it an ID, a slug. You tell it the color that you’re using, the hex code, and then you give it a name that would show up in the editor. Name as many palettes as you want.
You can then limit options or disable areas of color selection. If you wanted to disable allowing people to choose a background, you can do that. Not every block allows you to choose a background, but if you wanted to disable it for the ones that do, you can do that. If you wanted to disable allowing them to enter their own colors, you could do that. If you wanted to disable the default palette that comes with WordPress, you can do that. You can do all of those things and really control everything. One thing that you can’t do is set a different color palette for text and set a different one for background. I will mention that in a second. All of these things can be adjusted for individual elements as well.
On this next slide, two things. We’re talking about hover states, but it’s also an example of how you can– In this screenshot, we’ve got a style section of our theme.json. This is where you select specific elements that you’re defining. You can also target specific blocks. If you wanted to make certain things, certain colors, to make sure that the defaults were all lined up, you can do that. Then in this specific example here, you set your hover states. You can’t currently edit hover states in the editor. That’s a pretty big issue to me. It’s something that could be mitigated by having some kind of hover. We should be identifying hovers by something color and non-color anyway.
To me, at least, you’re if you do both if somebody happens to pick that one color that you’ve got for your hover elements, and they choose that for the text color, at least you’ve got that secondary thing happening. Just make it known or you can remove that color entirely from the palette if for some reason. It’s a very small use case, just depends on do you know your client best. If you say, “Hey don’t use the blue for something that’s a link,” but like I said, you can disable things. You can also disable choosing of a color of a link, then they can’t change it. Also, in here is an example of links come with underlines. If you’re going to remove that underline, then you need to replace it with something.
This screenshot shows how it’s removing the text decoration and adding a bottom border. I don’t know how aligned that is, but I’d have to read up on hover states and if that’s sufficient. As long as you’re giving enough of a border and enough of contrast, then that’s it. As long as you’re following all of these practices, do something. If you’re going to get rid of the underline, do something other than just changing colors. You cannot change hover states in the editor, maybe one day you can. Again, that could open up a whole another jar of worms. Our next color contrast is going to start off our little series on global style variations.
I don’t know how applicable this is to client work, but the closest one I can come up with is a magazine. I did a website for a magazine once, and they changed the colors on their website based on the colors that were in their current issue. If they had red as their main theme for that month and then green the next one. You can create global styles. It’s obviously most used in more marketplace-type themes where you get to choose the styles. The really cool thing about this is now you get to choose a light and a dark mode or choose different colors and still keep a color contrast baseline going so that you can at least give somebody a choice but still mitigate some of those common issues.
In the two screenshots here, we have a default for I’m using Jace Theme as the source for the screenshots. In this Jace Theme, we have on the left our default, which is a dark mode and then on the right, we have the black and white, which is the light mode for this. This next slide is just four more screenshots. On the left, we’ve got dark mode, on the right, we’ve got light mode. The two top images are of the background color. If you remember a couple of slides ago where we were defining our colors, you can set primary or secondary or foreground and background. Then what you do is you then set a variant JSON and use those same color IDs and give them new hex colors.
This way if you wanted to have your palette, and you’re giving somebody specific options, then if they flip it to a different style variation, then that’s how it still keeps those color contrasts. The top two are background. The bottom two screenshots are foreground. Just examples of how basically, the dark mode has dark background, light foreground. The black and white light mode has those flipped. If we go to our next slide here is about warnings in the block editor. That’s why if you give somebody access to the text in the background because maybe they need to be able to set different background colors, you don’t want to disable stuff, at least it’ll give them a little bit of a notice.
These are most accurate when the text and the background are both defined. If somebody is selecting a text color, it’s going to be most efficient if they also select a background color. It does a pretty decent job of knowing what elements it is and trying to figure out which is the background color. Like I said, it’s most efficient when both are selected, but it does a pretty good job. In these two screenshots on this slide, we have a default and light mode version.
If you choose your dark mode version and then have dark text, it’s going to give you a notice. If you have your light version and have white text, it’s going to show the message. It gives them the message of this color combination may be hard for people to read, try using a brighter background color and/or a darker text color. I find this really fascinating. It’ll go away if they choose a different color. I think this is really cool feature because we can’t mitigate for every option.
If we enable custom colors, it allows us to at least say, “Well, did you read the message that I gave you? This is not correct.” It also helps us when we’re reviewing the site where we can say, “Oh, it’s got this message. Does it just not know what the background color is? This is something I need to go double-check.” It’s good for troubleshooting as well. That’s it for the color. I don’t know if there were any issues or questions on that one as well.
>> AMBER: I did not see any questions coming in about colors.
>> DANIELLE: One thing I wanted to mention really quick that I don’t have a slide for necessarily. If we go to this little example thing I have here, and we go to a page. We’ll go to the sample page. One thing I like to mention as far as accessibility for people who have focus issues, there’s a way to have a spotlight mode. If you go all the way to the right and click on that Options menu that you expand. The second option down you have Top toolbar and then you have Spotlight mode. If you click that on, it only highlights what you’re looking at. I find this helpful if there’s a lot on the page and it’s overwhelming to edit. It at least gives you a focus to be able to see what you’re clicking on.
It’s good just for anybody anyway, but I find that to be pretty helpful, so I did want to mention that as well. We’re reviewing what we’ve got here. We have keyboard users and semantic elements. We went over images. We went over heading order and font sizes, and color contrast. I think I have links and resources. I want to just do a quick wrap-up. There’s a lot more to do as we’ve encountered, as we’ve gone through this like making the actual editor accessible. There’s a lot of possibility here, and I find that really exciting. It creates a lot of hope for more accessibility forward sights. It allows for more awareness and limited or endless choices without falling back to bad habits.
It’s so much easier to implement things as a developer like those Kipling’s and the keyboard nav. This way we can improve upon them and do the little things that will hopefully not be needed. It’s things in the meantime that we can do that just gives you hope. You don’t have to code everything yourself now, allowing the platform to make things easier, to set a great baseline, just like it’s supposed to do. I find that really exciting. Now is a good time now that it’s a little bit more stable. There’s some bugs still. It’s not accessible, but we can start playing with the code and learning some of how this works. I’m going to stick up the links and resources, and I’ll just go through each of the items.
Again, I would just recommend downloading the slides and tabbing through this as you need. I have the full site-editing link up here, and then I have the page for the accessibility in full site editing themes, that page that we had briefly looked at, and then that block reference that I mentioned. I find that to be an invaluable resource. Then I have the Jace Theme, which is one of the only accessibility-ready full site editing themes, if not the only one. Then there’s some information on the requirements for themes to have that tag, what’s required, and what’s suggested.
Couple of handy plugins, there’s a screen reader text format. There’s disabled full site editing, which is really interesting, because what you can do is have a dev version and a live version, and then only have the full site editor active on the dev version. Then when you push your changes to a live version, that will disable the full site editing experience, but still, keep everything the way it is. It basically just turns off the ability to edit stuff on live. I think that’s a cool concept. Then the user role editor that I mentioned, what you’re going to be looking for is the permission for edit_theme_options.
If you create basically a parallel admin user but disable that option, then they get access to everything other than the full site editor. There’s some accessible theme patterns there. Then you have the code from the screenshots that I’ve re-added on this slide, and then the slides that I’ve re-added on this as well. Then, I find the equalized digital plugin to be a pretty handy resource. I figured that you’d be mentioning that anyway, so I didn’t add it to the slide because I’m running out of room. That also goes under handy plugins as well. That’s everything for now.
>> AMBER: Thank you for such a great presentation. We did get one question about that Spotlight or focus mode, does that work for keyboard users like if you were just tabbing through rather than clicking on a block?
>> DANIELLE: Yes. Basically, all it does is adjust what it looks like. You’re still going through, tabbing through any kind of other editors. I don’t know how accessible the block editor is. It’s more accessible than the full site editor is, but it’s still not fully accessible. We’ve got problems that we need to fix for this to actually be– Basically what my purpose in talking about this is that, there’s a lot of possibility here, and there is some stuff that’s going to be made easier by all of this. We have the fundamental thing of accessibility.
It needs to be available for people who are working on these sites as well. To the extent that the block editor itself is accessible, then yes, nothing else changes other than it adds that style to make things more or less dark. That’s all it does to it. Is it accessible? It’s as accessible as it was previously.
>> AMBER: Can you arrow down to the next paragraph without using your mouse?
>> DANIELLE: Yes.
>> AMBER: Yes, it would do that same thing. I think there’s definitely a long way to go on the block editor with regards to accessibility, especially, some of my friends that are screen editor users have shared a lot of thoughts with me about that. I was really interested in hearing, especially what you were saying about the navigation menus, and that they just work out of the box. I know that’s a major issue with a lot of themes. The sub navs don’t open if you tab through. Just knowing that that piece works by relying on a developer knowing how to do it.
>> DANIELLE: Yes, it works on the baseline. Again, we’re relying on them to give us a baseline and it’s not there yet, but it is miles ahead of anything that it was before. I’d love for them to make strides in making this editor more accessible because you can get stuck inside of some of these things. If you open it, it’s like it works.
>> AMBER: Does this work?
>> DANIELLE: It does, but it’s like sometimes– It works but then– Oops, why am I going off the page? It’s like it just not as, and now I’m over there. It doesn’t always work as expected. You have to back in and out of stuff. It’s accessible, it’s just you have to understand the quirks, which negates the whole thing.
>> AMBER: Is this really?
>> DANIELLE: It’s like it works. You can go down and tab in and out of stuff and be like, “Oops, I’m in the wrong spot. Okay, let me go back here,” but I can see what I’m doing. It is what it is. It’s not great, but it opens up the world of possibility. Like I said, a couple of times if anyone needs to work on a project for the WordPress project, make this accessible by asking people who are using it. Again, don’t ask me, I don’t know what I’m doing. I don’t use the keyboard only. All I know is it’s not.
I think that that’s one of the most important things to do. At least, there are things we can do as developers to make our sites more accessible without having to– we can do it faster now. We don’t have to implement something and test it out and then oops the standards changed, and now we have to redo all of the sites. Now at least WordPress will give us that baseline, and then we can go in and make a couple of adjustments.
>> AMBER: Well, thank you so much for this great presentation. How can people get a hold of you if they want to follow up or have any questions?
>> DANIELLE: I would say where am I the most? I guess, either LinkedIn or Facebook. I’m on Facebook the most, so I guess there. If you wanted to email me, you could go to– I’m rebranding soon. [laughs] This email will be available, but it may change. It’ll basically forward perhaps to a new email by the time that this is live on the Internet. It’s phonetically a nightmare, which is part of why I’m rebranding. My URL currently is pbwebd.com. If you go to info@pbwebd.com, that would be the email. I would answer you a lot faster if you message me on Facebook, or LinkedIn, or something like that.
>> AMBER: Sounds great. Well, thank you so much. Thank you everyone for attending. If anyone is in the world, where you still have daylight left, and you’re not ready to go to bed, and you have not applied to speak at WP Accessibility Day, please, head over to wpaccessibility.day, and submit a talk idea. We would love to have lots of people to meet. We’re going to strip out all the personal information and just go on the talk idea. It’ll be very anonymous and the initial round and all that stuff. Thank you, everyone. Have a great evening.
[] [END OF AUDIO]
