Accessible Content for Muggles: 10 Action Steps to Create Accessible Content: Paola Gonzalez

>> AMBER HINDS: Welcome to WordPress Accessibility Meetup, where we are going to have Paola Gonzalez, our content specialist at Equalize Digital, speaking about Accessible Content for Muggles: 10 Action Steps to Create Accessible Content. If you haven’t been before, I have just a few short announcements and then I’ll hand over to Paola. We have a Facebook group that you can connect with others in between meetups. It’s a great place to share what you’re working on, ask questions, help other people get feedback on plugins or accessibility issues that seem odd or weird that you’re seeing on websites. You can join that group if you search WordPress Accessibility on Facebook, or you can go to facebook.com/groups/wordpress.accessibility. Everyone always asks, “Is this meetup being recorded?” Yes, it is being recorded. It takes us about two weeks to get corrected captions and a full transcript and edit the video and then we get that video posted up. You can find upcoming events that are coming and past recordings all in one place if you go to equalizedigital.com/meetup.

We also highly recommend that you join our email list that will allow you to get news. We send an email newsletter every Wednesday with web accessibility news curated from around the web and other resources. We also send out event announcements and links to register on Zoom. If you join that at equalizedigital.com/focus-state, then you will get notified when this recording is available and some other great stuff. The final place where we post just the audio, some people prefer to listen to audio recaps, is you can hear them at accessibilitycraft.com.

We also do conversation episodes between myself, my partners Chris and Steve, where we talk about craft beverages and the art of building accessible websites. That is a fun place to go check out if have not previously. We are seeking additional sponsors for the meetup to help us cover the cost of transcription and hopefully some ASL interpretation, if we can get sponsors to cover that again, because we’ve had some attendees request that. If anyone would be interested in sponsoring the meetup, please reach out. You can contact myself and Paola at meetup at equalizedigital.com.

You’re also welcome to contact us there if there is any topics that you would like to hear about or if you would be interested in speaking. We would love to have you and have you come and present at the meetup. Feel free to email us and we will answer any questions that you have there. My company is Equalize Digital. I’m Amber Hinds, I’m the CEO of Equalize Digital. If you are a regular, you probably know me, but just in case you don’t, I’m going to give just a short little blurb. We are a mission-driven organization and a corporate member of the IAAP, which is the International Association of Accessibility Professionals.

We are focused on WordPress accessibility specifically and we have a plugin called Accessibility Checker that scans for accessibility problems and provides reports on a post edit screen to make building accessible websites easier. You can find out more about us, of course, on our website, equalizedigital.com. Of all the socials, we are most active on X/Twitter and you can find us at Equalize Digital, but we are on a lot of the other ones as well.

We do have a sponsor that we want to thank today, IvyCat. IvyCat helps clients and agencies create, market, and maintain high-performing WordPress websites and web apps that are fast, easy to use, accessible, and get results. Their website care plans, search engine optimization, and accessibility services help clients grow and succeed without the stress and headaches of doing it alone. IvyCat has very generously sponsored live captioning for several of these meetups, which we very much appreciate. Huge shout out to IvyCat. You can learn more about IvyCat at ivycat.com.

If you want to tweet them a thank you, we always encourage people to thank our sponsors for their support so that they will want to continue doing it and know that it makes a difference for people to have these live captions, you can tweet them at IvyCatWeb on X. There are two upcoming events that I want to make sure everyone knows about. The first one is going to be next Monday, August 19th at 7 o’clock PM Central Time, and Renee Dunn will be presenting on Strategies for Creating Accessible Websites Using the Divi Theme and Page Builder.

You may know, from my presentation last month, that Divi did the worst out of all the Page Builders that we tested, but Renee is a freelancer who works for a lot of other agencies and design shops, and sometimes they say, “You have to use Divi.” Renee has come up with some really great ways to fix some of the issues that are in Divi, and will be presenting about those. If you have a Divi website or you’re interested in, even if you don’t have Divi, but you’re interested in learning like how can you remediate problems in a WordPress environment, this will be a great presentation to attend on Monday, August 19th.

Then the next presentation that is in the same time slot will be Thursday, September 5th, and I don’t know how we’re already going to be in September and back-to-school time, but we are. Quay Morgan from Ninja Forms will be presenting on Learning to be Accessible, Perspectives from a WordPress Product Company. Especially targeted at any sort of software product companies, but anyone as well who wants to hear more about Ninja Forms’ accessibility journey, this should be a great presentation. I am very excited to introduce our speaker today, Paola, from our team at Equalize Digital, who is my regular co-host and organizer on the meetup, so a friendly face that I’m sure all of you know.

Paola is a professional marketer and content specialist and obviously has a ton of experience working on website accessibility. She’s been using WordPress since she was introduced to the platform in 2012 during her first marketing class in college and is passionate about creating top-quality content that covers even the most boring topics. You should see some of the things she writes for our clients. She’s learned all about like commercial construction and things like that. Welcome, Paola. I’ll stop sharing and I will let you share and take over.

As a quick reminder to everyone, we will do a Q&A at the end of the presentation. If you want to post any questions in the Q&A module, it is a little bit easier for me to keep track of them than if they go into the chat, and then I will pop in at the end and ask all of those to Paola. Welcome, Paola, and I’ll let you take it away.

>> PAOLA GONZALEZ: Thanks, Amber. Everyone should be able to see my screen. We are going to get started with Accessible Content for Muggles: 10 Action Steps to Create Accessible Content. The talk is for muggles because I consider us that are non-developers, muggles, and I consider those who are developers, the wizards. There’s a space for everyone in the web, and either or, you can still add accessibility into the word, being a muggle or a wizard. Although, if I was a wizard, I would be in Slytherin, but we’re still here. [chuckles]

Our agenda for today is going to be, we’re going to talk about understanding accessibility, then how we can leverage the Gutenberg editor for accessibility. Then we’re going to go into the meat of the talk, into the 10 action steps, and then we’re going to have a quick conclusion to wrap everything up. Let’s get this started. Our learning outcomes are going to be understanding the basics of web accessibility. I’m going to guide most action steps into WCAG, and we’re going to go into the practical aspect as well, where we’re going to be leveraging Gutenberg, and we’re going to implement practical no-code accessibility enhancements.

Anyone with accessibility or is a non-developer, this is great for you, or if you need a refresher, because I have seen some familiar developer faces here in the chat as well. Let’s get us started with understanding web accessibility. What is web accessibility? Web accessibility is about designing websites, applications, technologies, tools, products, and services in an inclusive manner, and thus lifting barriers to communication and interaction that many people face in the physical world. This is from W3C.

As content creators, marketers, and developers, we are responsible for ensuring that our digital spaces are as inclusive as they are informative. At the end of the day, we are the ones putting out the content, we are responsible for what we put out. Why are we focusing on content? Because most web accessibility issues are content, and this is from the WebAim Million report. They do this every year. In 2024, they came out with the stats that I’m going to show you right now.

Here we have a table with two columns. The first column header reads WCAG’s failure type, and then the second column reads percentage of homepages. On the first column, we have low-contrast text, and that was found in 81% of the homepages. Then we have missing all text per images. That was found 54.5% times. Missing form input labels, 48.6%. Empty links, 44.6%. Empty butons, 28.2%. Missing document language, 17.1%. As you can see, this is very dramatic stats, but there’s a light at the end of the tunnel.

In this slide, we have the same graphic with an extra column to the right. This column reads how to fix it in WordPress. Low-contrast text can be fixed with Accessibility Checker. It helps you scan it, and then it’ll give you a tip on how to fix this. Then we also have missing all text for images, that can be fixed easily on the Block editor. Missing form input labels with a plugin, Gravity forms can be easily fixed there. Then empty links can be fixed with the Block editor. Then we have the bottom two, which are empty buttons and missing document language. For these two, you do actually have to get into code. Those two, I am not going to explain.

However, I have linked in the presentation where to get the sources on how to fix it in case you want to do it yourself, learn a bit of code, and get it done, or if you want to hand it over to a developer. The important thing here is that out of the six top issues that you see in websites, the top four can be fixed very easily without any code. There should not be an excuse to not fix them. I’m going to explain how to address this issue during the presentation, and I will also add in a few more common errors that make the website more accessible overall. Here we go into leveraging the Gutenberg editor for accessibility.

What is Gutenberg? Everyone that uses WordPress has seen this page. Here’s where we transition to the practical tools that we’ll use to apply these principles. Gutenberg was introduced back in WordPress 5.0, and it marked a significant shift in how users create and manage content. It replaces the classic editor with a block-based system where each piece of content, be it a paragraph, image, video, it’s treated as a distinct “block.” I said “Block.” This modern approach streamlines the editing experience and introduces more flexibility and control over to the layout and design of the content.

For those of us that are committed to accessibility, leveraging Gutenberg gives us a great space to start off with the best practices when it comes to creating an accessible content. Now, the key features of Gutenberg that enhance accessibility, we have the accessibility-ready blocks. Many default blocks in Gutenberg are designed with accessibility in mind. There is a great accessibility team in WordPress, and they’re making strides to helping us making things more accessible overall. For instance, the image block prompts you to add the alt text, and the table block allows for simple tables with headers that assist screen readers.

Then we also have text and heading settings. These are easily set font sizes, colors, and heading levels within blocks to maintain proper document structure and readable text, which is essential for users that use screen readers. Then we have content structure analysis, where Gutenberg includes the tools that analyze the content structure and helps you maintain a logical flow. Now, it’s up to you to know your hierarchy of content, and I’m going to go through that, but they do give you the tools to work with that. At the end of the day, Gutenberg makes it easy to implement plugins and tools as well. It’s a good foundation for accessible content. Whoops. Hold on. There we go.

Now we’re going to go into the 10 steps for accessible content. The first one being the structuring content with proper headings. We have Guideline 2.4 navigable on WCAG, and it’s to provide ways to help users navigate, find content, and determine where they are. This includes a few different success criterions. To sum it all, headings structure your content and make it navigable for both sided and visually impaired users. While users use visual cues to quickly scan the text and scan to find information that they’re looking for, people who are blind cannot do this. They rely on screen readers and they rely on headings to quickly navigate to certain sections of a page and read only the information that is relevant to them.

You want to make that easy as possible. One of the most important aspects for screen readers, it starts with the headers. Errors such as skipping heading levels or using headings for styling rather than structure, which is seen very often, can be disorienting and confuse users who rely solely on keyword navigation or screen readers. The way to address creating proper heading structures, one of them is with the HeadingsMmaps, and that’s an extension for Chrome and Firefox.

Then we have these two tools that are on Gutenberg that are the outline tool and the way that you can natively create heading blocks. Now I am going to go into a page. I want to make this as practical as possible. Every step that we go through, I’m going to be creating them in an accessible way with you, so I’m going to be guiding you on how to do it. Here we have a WordPress page open. It’s all empty. I’m going to create an about page. I decided to do an about page because if you have a portfolio website, it’s very likely that you’re going to have an about-me page, or if you have a company website, you’re going to have an about the company page. That’s what we’re going to work on.

I’m going to be copy-pasting information here about me. Most of it is random. I got it from ChatGPT just for the purpose of the example. Let’s get this started. Right now, I’m going to do the skeleton of the page. Just give me one second. Here– it would be great if I could find it because I had it right here with me, and it’s done now. We love the internet. I am going to just copy-paste this text here. The way I’m going to be doing the headers is that– this is a super easy trick, you type in /h and then it prompts you to the heading block. Then you can just do H2 or H3 or H4, whatever heading you want. Press enter, and you have it right there. Makes it extremely easy.

I am going to– just give me one second. [silence] I’m going to paste my content here. I’m just going to have different paragraphs here. I’m going to have different H2s and H3s just so that we can create that hierarchy. Then after we go to H3, we go back to H2, which you can do, again, same way. We have this text. Just give me one second. Paste the info here, and we have the skeleton of the website that we’re going to be using. I’m going to save our draft so that we can see what it looks like on the front end. It’s saving right now. While that does– okay, there we go. We have it.

What I want to show you with the HeadingMaps here– the HeadingMap shows up as an extension in Chrome. Here you can see the first heading, it’s going to be about the title of the page. Usually that outputs directly to that. On your website, you would want to have only that one H1. Then from there you would move to H2s, H3s, and H4 in that order. Then my first H2 is going to be here. Always, just a quick reminder, the footer is going to be outputted to the H2. Now that we have the basics here, let’s keep going with the presentation.

Oh, let me show you. The outline tool in Gutenberg, it outputs something very similar to what you see on the HeadingMaps. Just to clarify, the HeadingMaps is a toolbar that shows on the left side of the website, and it shows you the dropdown of your heading order. The same happens when you click on document overview in WordPress and you click on outline. You can see the same exact thing, but only for your page. It doesn’t show you what’s on the footer because that works differently on the WordPress. We have that. Then I explain how to manually create these headings. We’re good to go on the first action step.

Then the second one is choosing an accessible color scheme. This refers to Guideline 1.4 on distinguishable. Make it easier for users to see and hear content, including separating foreground from background. The best way to address this, you can test it with the Accessibility Checker plugin and you can correct it with a Color contrast checker tool. The way this works is that I’m going to show you a– hold on. I’m going to show you a sample of an image with color contrast issues, which is already on the media library. I’m just going to select that. I’ll explain the alt text on the image when we get to that section.

Here we have the sample of good contrast ratio and bad contrast ratio. You can see, for example, on the first– in this image, you can see six rectangles. In the top left, you can see one with extremely light gray background and white text, and that has a contrast ratio of 1.12:1, which is extremely hard to read. On the opposite end, we have a rectangle on the bottom right corner. The rectangle, the background is full black and the text is full white and the contrast ratio is 21:1. That shows you how differently you can read text. For example, if– this is something that we see on websites a lot recently, especially with the aesthetic trend, where they use pastel colors a lot and very light text as well.

This is a huge contrast issue. It may seem like a trend and it may look somewhat pretty. The colors are pretty, but I cannot read what you have on your text. It is a huge issue at the end of the day. At the end of the day, yes, you want your content to be pretty. You want your content to look good, but you also want people to be able to engage with your content, to understand your content, and to read your content. At the end of the day, for some people, this may look pretty, but it’s not usable. At the end of the day we want our website to be usable.

I will show you, for example, here. Let me see one of my 8,000 tabs that I have open. Here you have the web and contrast checker. Here it helps you determine what colors would work best and what would not work as much for you. That’s how you would address that. We also have Accessibility Checker that in case you do have an error on your color contrast, it would show you right on the site. Right now, this is not an example because this website has passed contrast issues, but if that’s the case, it would show you and it would tell you and you can see the documentation as well.

Going on to the next one, we have adding descriptive alt text to images. This is on Guideline 1.1, text alternatives, provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language. This is on success criterion 1.1.1, non-text content. All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Going back to my example, I have this image, and when I click on the block tab, I already wrote the alt text here. This is how I described it, “Good and bad contrast examples accompanied by contrast ratios.” I pretty much read out what I see, and that’s the best way to describe an image.

Now, I will go into the best practices. Something that I want to make clear is that alt text is a huge issue in websites, and on WordPress, it’s an extremely easy fix. You upload an image and you immediately have the alt text box where you can add the alt text. Going into why is alt text important? First of all, accessibility. It describes an image to screen reader users and gives context to sighted users. Then search engine optimization, SEO, it allows search engines to crawl and index images and correlate them as additional information on your website.

Now, that does not mean that you have to fill your alt text with keywords. You can use keywords sparingly as necessary. Just make sure you keep accessibility in the forefront when you’re writing this alt text. It also gives you context to the images. The best practices that we have are be brief and to the point. Keep your alt text within, most times, to 125 characters, as screen readers often cut out at this number. Then describe the content. The text has to be clear and specific and relevant. For instance, instead of using “a dog,” “a dog” as alt text, a more suitable description would be, “A golden retriever playing fetch in the park.” This gives you a lot more context.

Even if I describe you, I am not showing you an image right now. When I say a dog and when I say a golden retriever playing fetch in the park, you think about two different things. You get more context with that one sentence. Another best practice is avoid alt text on purely decorative elements. Another one is avoid redundancy. When creating alt text, there’s no need to begin the description with phrases such as “image of” or “picture of.” I said those two things in air quotes. Screen readers already announce an image element before reading the alt text, making these prefixes redundant and potentially disruptive.

Again, you can add the alt text to the images straight on the Gutenberg editor. If you need more info on alt text, I know this always comes up during our meetups when we go on tangents about alt text, because at the end of the day they can be subjective. I linked on the presentation to Memi Miller’s meetup talk that they gave last year or the year before, I can’t remember exactly, where Memi explains everything and anything related to alt text. If you ever have a question regarding that, this is the best source that I can give you.

Into Action Step 4, we have ensuring link text is meaningful. This goes along Guideline 2.4, navigable, and it’s provide ways to help users navigate, find content, and determine where they are. The best practices for ensuring your link text is meaningful is to write clear and contextual anchor text. This is using an icon or an image as a link without descriptive text may cause confusion as the user is left guessing about its functionality. You also want to include important link information such as PDF download to avoid confusion about the function of the link.

If you are linking to a PDF download, you want to make sure that it’s clear in the text of the link so the user knows where they’re going. You also want to ensure your link text is visually distinguishable for regular text. Visual cues such as color contrast and underlines help users identify links even without having to hover or change the focus state. This is a fundamental principle in accessibility. Personally, I prefer to default to using blue underlined text for links. At the end of the day, if you want someone to click on a link, you want to make it easy. Sighted people often associate blue underlined text with a link, so there’s no need to complicate that.

Before we go into the next move, I want to, here, use an example of what is a meaningful text here. Just give me one second, let me grab this link here. For example, in this text, I write this sentence where it says, “I hold a marketing degree from the Rochester Institute of Technology.” Let’s say I want a link to that, I just click and add the link to it. I do not add it as opening a new tab because that takes away control from the user. Mostly you would want to make sure that the link stays in here. This is just to give people more context. If they don’t know where is Rochester Institute of Technology, they can just click on it, boom, they go to it.

It’s clear that that’s where the link is going to. Also, I did have– if I do have this section here, this sentence, let’s say, for example, that I say Paola enjoys the cultural vibrancy of opera, reading thrillers and playing video games such as Apex Legends. This is one of the games that I play, and I want people to get context of it because it’s not a popular game, so I’m just going to link this whole sentence and just link that whole section of Apex Legends. Instead of using the so many times seen the, “Read more or learn more,” this can be very confusing when you use these two sentences because what is read more? What is learn more?

Just try to make it as simple and straight up as possible. Now we are going to go into the fifth action step, and it’s going to be creating accessible tables. This goes into Guideline 1.3, adaptable. Create content that can be presented in different ways. For example, simpler layouts without losing information or structure. The best practices when it comes to creating an accessible table are, never use images of tables. I see this a lot on websites when someone would just do– let’s say you have a Word document and you are told to add whatever is on this Word document to the website that you’re working on. Most people, what they do, is take a screenshot of the said table and add it as an image to the page.

Now, this is not correct. This is not accessible. Why? Because when someone is using a screen reader, it’s going to get to this section where there is a table. It’s going to prompt that it’s an image. Now, if you add alt text to it, you’re putting a Band-Aid on it. You’re not fixing it. It’s just best to straight up create the table on the website so that the screen reader can actually read the table. Even then, for sighted people, sometimes you see a picture of a table. Sometimes the text is very small, you want to zoom in. It looks blurry when you zoom in, and that’s a problem.

The easiest way is I have two options here. If it’s a very simple table, you can create it directly on Gutenberg. What do I mean by a simple table? A simple table is when the header is just the column headers. When you have to do something more complex than that, you would want to use a TablePress plugin because the Gutenberg tables lack the ability to include row headers, and this is something that TablePress does have. You have it when you add on the TablePress Scoped Headers add-on and the link is in the slides as well. This is an extra step that you add to the TablePress plugin. Now, when Amber mentioned this to me, I think it was about a few weeks ago.

Amber told me that I needed to go on GitHub and get this ready and I’m like, “Amber, I’ve never been on GitHub. I’m intimidated. This is very stressful.” Every time people mention anything developer-ish, I’m like, “Yes, let’s see how it works.” It’s very easy. I’m going to show you right now how easy it is. With the link on the slides, you go to this page, it takes you to a GitHub repo. Just click on the code drop-down and you click on Download ZIP. Then that file, you are going to go to your WordPress dashboard, go to Plugins, Add New Plugin, and you’re going to upload the file that you’re going to install and activate it. That’s it. It works as a regular plugin. [chucckles]

The only difference is that you download it from GitHub. It’s not that hard. There it is. Just give me one second. Now we are going to use TablePress to include a table on our page. The way it works is that I’m going to go to the plugin here, TablePress. I created this table already, I’ll show you the settings that I used. It’s a very small table and it has three columns and three rows. Then the headers are both on the column and the row, and each column reads books, format, and writing. Then the rows read the name of the book. The settings that I use in TablePress– there’s a lot that you can do in TablePress and this is why this happens to be very accessible because it does have a lot of features.

However, I am more on the– I rather keep things as simple as possible. This is how I would go about building a table to make it accessible. I would only select this table head row. The first row of the table is the table header, and I check this box. Then I have a plethora of options in the bottom as well that I could use, I check that off and I click on Save Changes. That makes my table ready to go and I get this shortcode, tableid=2. What I do on my website to add this table, is I use dash to create a new block and then I type in TablePress table. Here I switch it to shortcode so that I can see the code.

Here is where I’m going to add my shortcode. My table ID is 2 as we got from the previous page. I’m going to add this. It reads first under column_th=true. This clarifies that the rows are also headers. I’m going to save my draft so that you can see this on the front end so you can see what it looks like. This is saving. I’m just going to give it one more second here. It’s taking a bit of time. Let me just go to the output of the page. Then here we can visually see that the columns and the rows are headers, and at the same time, this outputs to the screen readers that both of these are the headers. This is how we create an accessible table.

Now, going into our next action step, we have embedding accessible video and audio content. There are a lot of success criterion that have to do with this because it has to do with code. We have success criterion 1.1.1, non-text content. All non-text content that is presented to the user have a text alternative that serves the equivalent purpose. Non-text content can be video, anything visual. Then we have Guideline 1.2, time-based media. Pretty much anything under Guideline 1.2 refers to this section specifically. It says, “Provide alternatives for time-based media.” This adds up to these best practices. You want to include captions and transcripts for all media.

The most accessible way to embed a video is the AblePlayer plugin. The AblePlayer plugin allows you to host your video on YouTube and Vimeo, but have a more accessible wrapper around the video and strip out some of the controls that are less necessary and could cause issue to a screen reader user. I’m going to show you an example of how the AblePlayer plugin is used. Right now I am on the website for WordPress Accessibility Day, 2023, and we have a session video. Right now we can see the video being embedded. You have basic buttons here to play, restart, rewind, and forward.

You have the ability to show the captions on the video with different languages, which is a great accessibility feature that AblePlayer has. You can have different languages in here, and you can see that both in the transcript and the captions. At the bottom here, you can also toggle what language you want to use. At the same time, you can auto-scroll or not auto-scroll the transcript so that it goes along with what you are seeing on the video. This is how the AblePlayer works. I’m not going to add it to our website because I don’t have a video that I’m going to bring in. It’s very easy to use and it’s very intuitive.

There is a bit of code that you have to see in this bit of HTML, but the documentation that it has, it makes it super easy for you to understand it. Now, here we go with the next action step, using list blocks for clear organization. Now, we have– this goes under Success Criterion 1.3.1, Info and Relationships. Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. We also have Success Criterion 1.3.2, Meaningful Sequence. When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. There are more Success Criterion that have to do with using list blocks, but these are the ones that I found that were more relevant.

Now, what we’re going to do–again, this is extremely easy to use. You go, add a block, and add a list. That’s all you have to do, and then you type in your list. We’re going to do that in a second. Before that, here we have all the other success criterion that have to do with lists. You can read that in the presentation if you want to get more information on that, but I’m just going to skip it for now because we’re close to being out of time, and I do want to have some time for Q&A at the end. Why should you use the list block? First of all, the semantic HTML. The list block automatically generates the semantic HTML code using either OL for order list and LI for list items.

Now, you don’t have to know what semantic HTML means. Just know that the list block does it for you. Then we have consistent structure. By using the list block, you ensure a consistent structure for your list across your website. This consistency helps users navigate and understand your content more easily. It also supports keyboard navigation. The list block supports keyboard navigation, making it easier for users who rely on keyboards or other assistive technologies to move through the list items efficiently. We have, they have a responsive design. They are designed to be responsive, meaning that your list will look good and functional on various screen sizes and devices.

This is particularly important for people accessing to your website on mobile devices. You don’t have to worry about styling or customizing your website for that. Most importantly, it’s easy to use. I showed you, you just have to create a block fault list, and it’s right there. Of course, we have the SEO benefits. You would usually see the trend with accessibility and SEO. For content creators, it’s a great add-on to your tool set, just to have an accessibility first in mind. Going back to the list, I’m going to create a list of– let’s see. In this line, I’m talking about my hobbies. Let’s see. Thrilling speed of Formula 1.

For example, let’s say I want to make a list of the top races that I have enjoyed this year. Let’s say the Hungary Grand Prix. That was a fun one. Also the– what other ones? I’m spacing Belgian GP and Monaco GP. I don’t know if Monaco has happened, but we’re going to– because I have a really bad memory. That is a very short, simple, sweet list that I created with just one block and without having to do any coding or anything like that.

Going back to our action items, we are going to talk about creating accessible forms, and this relates to Success Criterion 1.3.5, Identify Input Purpose. The purpose of each input field collecting information about the user can be programmatically determined when the input field serves a purpose identified in the input purposes for user interface component section and the content is implemented using technologies with support for identifying the expected meaning for form input data. There’s also Guideline 2.1 on keyboard accessibility, make all functionality available from a keyboard. There’s a lot that goes into that.

Mostly everything that goes into Guideline 2.1 would refer to creating accessible forms. We also have Success Criterion 4.1.2, Name, Role, Value. For all user interface components, including but not limited to form elements, links, and components generated by scripts, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set. How do we make accessible forms? I recommend using Gravity Forms plugin. It is paid, but it does all the coding for you.

Other things that I would like to mention, it offers a wide range of built-in accessibility features, such as semantic HTML, keyboard navigation, and customizable error messages, ensuring that forms are usable by all users, including those with disabilities. Plus, it’s drag and drop. For people that don’t know coding or don’t like it, it’s super easy to use. Also, we want to ensure each form field has a clear and descriptive label. Labels should be concise and indicate the purpose of the field. Example, first “Name and email address.” I said that in air quotes.

We also want to choose appropriate field types for the information being collected. For example, you want to use a date picker for dates. You want to use a dropdown for selections. You would want to use checkboxes for multiple options. Just want to make it as easy as possible and as intuitive as possible for the user. Anyone that has ever filled out a form has expectations of what the selection process and the filling out the form process should be like. There is no need to make it different. The last one that I have here is ensure users can navigate through the form using only a keyboard, and Gravity Form does a great job at that, so you don’t have to do any extra work when it comes to making sure that the user can navigate with a keyboard.

Oh, and one last one, you want to use clear and descriptive text on submit buttons, such as “Submit form or register now.” You want to make sure that’s clear because at the end of the day, that’s the action that you’re calling the user to perform. Here I have an example of an accessible form here. Just a second. The way you go and create an accessible form on Gravity Forms, you install the plugin right on the dashboard. You click on forms. Here, for example, you are going to click Add New, and they already have a bunch of templates for you.

Again, I usually tend to default to templates because I’m trying to make the job as easy as I possibly can, especially because I’m trying to not use code and I want to make sure that it’s most accessible that I possibly can. For example, I want to make a simple contact form. I’m going to preview that so that I know if this is what I need. Let’s say I just want to collect people’s email just so they subscribe to my newsletter. In this case specifically, getting their first name and their email address will suffice. I am going to get this form. I’m going to use this template, contact.– Hold on. Newsletter contact. As simple as that, I have created the form.

Now, Gravity Forms does have a bunch of different fields that you can use and there’s a lot of customization that you can use with their plugin, and they have done a great job with their documentation at explaining everything. They do have an accessibility documentation as well. I’ve been using this plugin for over a year now, and anytime I’m looking for something, it’s on their documentation, so I would always defer back to that.Now, how do I add a form to my page? Of course, I’m not going through any of the settings, confirmations, or any of that. I’m just showing you how it will look on the front end and the accessibility features that it includes.

I’m going to say here, “Sign up for my newsletter.” You can add this very easily. Just /form, select a form, and because the one that I just added I created it after I refreshed this page, it’s not going to show up. It would if I refresh, but I’m not going to do that. Here we have the form. You can even see it on the back end. Let’s say I’m going to publish this page, so I am done with this page. We have worked on our headers, our color contrast, our meaningful link text, and our lists, our tables, and our sign-up forms in this page. We’ve made sure that a lot of the items here are accessible.

Here, I can see the signup form for the newsletter. It’s as easy as that. Going back to the last two action steps, our ninth action step is using pre-built accessible blocks and other accessibility-ready blocks that are on WordPress. I would say are the quote block, gallery block, spacer block. There’s a bunch of them, but these are the ones that I do tend to use. At the end of the day, WordPress has a top-notch accessibility team, and they are actively working towards making the platform as accessible as possible.

For example, the quote block, it has the accessibility feature of semantically marks up quotes with HTML tags. And that helps the screen readers identify the quoted content. Then we have the gallery block. Just like the single image block, the gallery block allows users to add alt text to each of the images in the gallery, and this is crucial for screen reader users. It also allows for keyboard navigation, so users can navigate through images in the gallery using keyboard controls, which is essential for anyone that’s not using a mouse.

We also have the spacer block. It offers a simple way to add adjustable white space between blocks, which can improve readability and the visual layout. Because in the past, I’ve seen people do the following just to add a space. Let’s say I’m at the end of a paragraph. I’m clicking enter. I’m adding a block here, and then I’m skipping to an empty block. I’m adding an empty block, and then I’m going into the block right after that with another paragraph. I’ve seen people adding a space just by adding an empty block, which is not the best way to go about it, especially if you have the spacer. That’s one of those things.

Now, let’s go into our last step. And that is maintaining content accessibility. So you would want to include an accessibility statement on your website. This is very easily done. A good accessibility statement communicates that your organization cares about its visitors and provides a quick way for them to get help. Including an accessibility statement and making a public commitment to accessibility creates a positive user experience and a brand reputation that will keep people returning.

For example, if you know you’re using a plugin where there is an accessibility issue and you don’t have a way to fix it today, but it’s something you do have in the works, that’s the perfect place to include it in, in your accessibility statement. Including an accessibility statement and living up to it is the right thing to do.

Just a quick update, the Accessibility Checker Plugin does create a draft of an accessibility statement page when you activate it. This is an extremely fast way to create an accessibility statement in WordPress.

Going off to the other best practices, we also have regularly update your content. Keep WordPress core themes and plugins updated. Ensure that all the components of your site are up to date with the last versions. Updates often include accessibility improvement fixes for known issues. Every time you see that update button on your plugin section, it’s a good idea to update it. Sometimes they can break things. Most times, it’s good to update.

Then you want to review your content regularly. Periodically check your content to ensure accessibility standards are still being met. This includes reviewing all text for images, checking link functionality, and ensuring that navigation remains intuitive. This, you can easily do– For example, this is something that has happened at Equalize a few times. Let’s say I figure out a way of making something more accessible. But it’s something that is on all other pages.

For example, let’s say that there’s a link that is going to– Let’s say that for the past few months, I have been linking things to open in a new tab. And I recently figured out or discovered or learned that this is not a good practice. What do I do in this case? I update– Let me rephrase this. What do I do? In my mind, I know that for future reference, I don’t do that. I do not link to open in a new tab. This is moving forward. However, we want to correct what we’ve done previously. I do have a task on our project manager tool, where I go through, let’s say, five posts every week, and I update this. We keep constantly updating our content because at the end of the day, accessibility, it’s a journey. It’s not an end place. We keep learning new things. We start implementing those as we learn them.

Let me go with our next best practice here. It’s educate and train your team, and that does go along with what I said, and engage with the community. I would say stay informed in the accessibility world is the best way to know and learn about accessibility. Just coming to our WordPress accessibility meetups, being in newsletters related to accessibility, following accessibility blogs, anything. If you are in this circle, in this world, it makes it so much easier for you to learn at the end of the day what accessibility is and how can you be more accessible.

At the end of the day, WCAG sets the floor, not the ceiling for accessibility. WCAG is our baseline, not our endpoint. We should aim to do more than just meet these minimum standards that I went through. We should strive to create websites that are generally inclusive and accessible to everyone, going beyond what is strictly required by the guidelines.

With that, I’m ending the presentation and we can open the floor to Q&A. Here in the slides, it’s the information to contact me. You can email me at paola@equalizedigital.com. You can find me on X @paolamgonzalezr or on LinkedIn, on linkedin.com/in/paolamgonzalezr. I am done with the presentation.

>> AMBER HINDS: Hello. That was so good, Paola. I found a GIF just for you. You’ll see it in Basecamp.

>> PAOLA GONZALEZ: Okay. [laughs]

>> AMBER HINDS: Professor McGonagall, the cat, jumping and turning into Professor McGonagall. I was like, “That’s you.” [laughs]

>> PAOLA GONZALEZ: Oh, we love that.

>> AMBER HINDS: Yeah, yeah, yeah. We like to share GIFs in our team campfires. There were some great questions I’m going to pass over to you and I’m happy to chime in as well on any of them. If anyone has questions, please add them to the Q&A, and we’re going to talk through those. Bernard had asked– Because at the beginning, in your table, where you listed the top problems that came from WebAIM and mentioned empty buttons. Bernard said, “Which type of ’empty buttons’ are they talking about? Since they should be solved in code.” Bernard said, “I guess we’ll be talking about the core/button block, right?”

Do you want to take that one and explain the difference about the core button block and an actual button?

>> PAOLA GONZALEZ: You can explain that because you do have more knowledge for that, but the model answer to that would be giving you the link so you can read more about it, but then Amber would explain to you what that is.

>> AMBER HINDS: Yes. This is a thing that we’ve actually noticed and gotten a lot of questions about when people scan their pages with Accessibility Checker. The core button block is not actually a button. It is a fancy-looking link. The code behind it is an a tag, not a button tag, for people who get the code view, the wizard view of things. That’s why you can use that button block and put it in, but you wouldn’t actually see that showing up in a WebAIM report or an Accessibility Checker report as an empty button if you forgot to put text in it. It would actually show up as an empty link.

Typically, the buttons that show up in accessibility [inaudible] [inaudible] open and close modals, or submit forms, or maybe the buttons on a carousel that you would use to toggle between the slides. And those are almost exclusively being [inaudible] them and have them write a fix for it, but ideally, we want to report these to the plugin developers so that if it is a carousel and the next button isn’t appropriately labeled, we want that fix to go out to everyone who’s using that carousel plugin. That’s the spiel on empty buttons.

Can you talk a little bit– and I know that we’ve used some Elementor– Can you talk about the main differences in your mind to creating a website with the block editor and Elementor?

>> PAOLA GONZALEZ: Okay. The main difference is that the block editor is already a native tool to WordPress, so you do not have to install any additional layers. Now, when you go into Elementor, that is an additional editor that you are adding on to your website, and this has a few pros and cons. For the pros, it means that you have a few more items and more customization that you can add to your website, but then, at the same time, you are responsible for more accessibility features to be tested when you’re using Elementor because some of the elements or blocks that you may be using on Elementor may not be natively accessible.

They are making strides to making their blocks more accessible. However, once you start going out of native WordPress, unless you know and have documentation or you’re being recommended that whatever you’re using is an accessible feature, you should treat it with a grain of salt. In addition to that, Elementor, when you’re using it, I like it in the way that it does give you a bit more customization. You have more options, you can do more things, but when you’re loading the Elementor library, it slows down your progress a bit because it’s not a native tool in WordPress. You’re loading up something else. You’re loading up a different library.

I like Elementor in a few aspects, but I don’t like it in others. I don’t know if that answers your question.

>> AMBER HINDS: Yeah. I mean, I think this is going to come in with any block library or page builder. It’s not unique to Elementor, which is the thing about core WordPress is there is an accessibility team, and while there are definitely 100% things that get released that are not accessibility ideal or perfect and maybe even cause accessibility issues in WordPress core, I think that is much more limited than any third party, and again, not unique to Elementor library.

Now, there are some of these that are obviously putting more effort in than others, but it adds a layer of complexity on the accessibility side. It might make it a lot easier for you to edit things that a non-developer can’t do. If you use Elementor, I think that’s probably the strength of any page builder, but you got to make sure you test those things, I think.

I don’t know why my camera is going wild and [inaudible]. Sorry about that. It was emphasizing what I was saying. [laughs]

>> PAOLA GONZALEZ: I think that goes along with your talk from a couple of weeks back with the page builders. At the end of the day, when you’re using a page builder or a plugin or a block library, you have to test for accessibility.

>> AMBER HINDS: Yes. Alice was asking, “Do you have to download Gutenberg or is it there automatically?” She’s saying, “Confused about where to start WordPress.com.” That is a big question.

>> PAOLA GONZALEZ: Okay.

>> AMBER HINDS: Do you want to start with how to start with a WordPress website?

>> PAOLA GONZALEZ: Okay. For example, there are plenty of ways that you can start with a WordPress website. The way I have done it in the past, and the way that I started working on my personal website, is that I got a WordPress-managed hosting, and that already comes with a WordPress website. Now, you can–

>> AMBER HINDS: This can– Sorry to interrupt.

>> PAOLA GONZALEZ: Yes, go ahead.

>> AMBER HINDS: This can be WordPress.com, but it could be many other companies, right? Did you just Google “WordPress hosting” or something like that?

>> PAOLA GONZALEZ: Yes. My personal website is actually on GoDaddy, and it’s a managed WordPress website. It makes it extremely easy. Once I get started with my website, I just have to create my username and password, and I’m straight in WordPress. I don’t know if that answered that part of the question.

>> AMBER HINDS: Yes, I think so. I think that’s enough. If there’s more questions, Alice, about getting started with WordPress, the Facebook group is a really good place to go and ask those for sure. Then you want to talk about Gutenberg?

>> PAOLA GONZALEZ: Yes. Then going into the second element of the question– Oh, my cat is in the screen. Going into the second element of that question, so your WordPress website, as long as WordPress 5.0 or anything above that, it’s going to include Gutenberg or the block editor. I can give you a link in the chat of a place where you can actually test it out, that it has an empty page and the Gutenberg block editor, and you can use it to practically create a demo page with the Gutenberg editor. I’m going to copy that as soon as I’m done with this sentence because I cannot do two things at a time. [laughs]

>> AMBER HINDS: Yes. Okay. Verwadi is asking, “What is the best practice when you’re putting text over an image that makes the contrast be variant depending upon the different color on the image?” Do you have any thoughts on this one, about color contrast if the text is over an image?

>> PAOLA GONZALEZ: Yeah, I’m processing the question. The best way to do that, and I’m not sure if this is exactly what you’re asking, is using a color contrast tool. At the end of the day, yes, there are certain places where you would want to add text over an image. For example, if you’re doing a banner or something like that, or a promotional flyer, anything related to that. You just want to make sure that you can use a contrast checker tool. I posted one or two on the slides. You can just check your colors and see– One, if you’re a sighted person, see if you can read it very easily. See if there’s an issue in there, if you have to squint your eyes to make sure you understand the text. Two, just check with a contrast checker.

>> AMBER HINDS: Yes, you want to make sure that it contrasts over every part of the image. I always find-

>> PAOLA GONZALEZ: That is correct.

>> AMBER HINDS: -the lightest part of the image and test there. Then otherwise, a lot of these, the core group block and stuff, if you put an image background, you can also put an overlay, a black, or if you’re doing black text, you put a white overlay or something like that and change the opacity of the image so it’s not that– I kind of try lately to just not put text over images and design headers and stuff where the image is to the side of the text.

>> PAOLA GONZALEZ: That’s what I usually try. Because I feel like adding text over, let’s say, a picture of a beach or something like that. Let’s say you have a picture of a beach. There’s a lot of different colors in a background in there, so you have to deal with a lot of different colors when you’re doing a contrast check. It’s best to just either, when you have to add text to an image, add it on top of a clear background, as in it’s one full color, or do what you mentioned of doing an overlay on the image and making sure that you’re using a very dark color that would do a high contrast with the text that you’re putting on.

>> AMBER HINDS: Yes. Lisa had a question about alt text. “When it comes to product images, we only get 100 characters, which barely fits the product title. What’s the best practice for product images, i.e., the front of the box, the back of the box, zooming in on the box, products inside of a box?” Do you have any thoughts about alt text for products? Maybe we could address this 100-character limit myth.

>> PAOLA GONZALEZ: [laughs] Yes. For alt text, you want to write a description that is relevant to what you are showcasing, right? If you are selling a box, you can say “cardboard box” and just write the measurements out. I feel like that would be good enough. Then going into the myth of 100– Oh, Lisa clarified, “We are selling puzzles.” Okay. In that very specific case, I would describe the image of the puzzle. Now, you don’t have to necessarily limit it to 100 characters. This is just a good benchmark if you’re working with an image that doesn’t heavily have to be described because of the context.

Now, if it’s a product, someone is buying it from you, then you would want to describe what people are buying so they know. If they are not able to see what they’re buying, they have that description.

When it comes to that limit, I always refer back to what NASA does on their Twitter. When they do alt text on images of the space, it’s not 100 characters. They go for at least 600 characters describing what you see in space. Personally, I could not describe the space like that. I would just say “stars in the black space,” but because it is someone that actually knows, if it’s an astronaut or someone that is in that industry and they know exactly the galaxy or whatever they are describing and that is relevant to the image, then yes, that is fine. You can go over that 100-character limit. I don’t know, Amber, if yu have anything more to add to that as well.

>> AMBER HINDS: The only thing I would say with anything where you feel like there’s going to be a lot of text explaining it, sometimes it is helpful to have a more concise product alt text and then have that information on the page. It is okay. I’ve had multiple blind people tell me that they’re fine with having something in the alt text that is a short description and says “detailed information follows” in the alt, and then you put it in the paragraphs, and so they’ll hear in the alt where they can get the extra information because sometimes, that information is helpful for everyone, not just for people who are blind.

David asked, “Do we need to add alt text to stock images from Unsplash, or is that considered decorative?”

>> PAOLA GONZALEZ: It depends on the use that you’re giving them. Usually, you do have to add alt text to stock images. The easy trick with those is that for you to find them, they have a bunch of keywords that describe what’s on the image, so you don’t have to use your creative brains just to think about, “How do I describe this image?” Because as creative as someone is, you can be a creative specific in different industries.

For example, if there is an image of, let’s say, corrugated metal deck, which is something that not people may know, but if you look it up on stock photos, it would describe exactly what metal deck it is, and this may be relevant for the people that are going into that website.

>> AMBER HINDS: Yes. I think almost always you need to have– almost every photograph, it’s probably not purely decorative. It still adds some interesting context or sets a tone for the like that. I could probably answer this as I do the question, but Adrian asked, “Does TablePress create responsive tables?” TablePress can do responsive tables. Yes, this is a premium feature of TablePress. It’s not available in their free plugin.

Then I’ll probably also answer the question, RD was looking for Gravity Forms in wordpress.org and only found Gravity Forms Zero Spam. That is not the plugin. That is an add-on for the plugin, which we do recommend. Gravity Forms isn’t on wordpress.org because it’s only premium. There are some other plugins that have free versions on wordpress.org that might be worth looking at. We just personally only have used Gravity Forms because we bought it a very long time ago.

People mentioned in the chat, “Ninja Forms or WS Forms.” Those are two that might be worth taking a look at if you want to start with a free form. Belyas wants to know, “Who’s your favorite character in the Harry Potter world?”

>> PAOLA GONZALEZ: Actually, after watching the Broadway show that they have live, it’s about what happens after the seven books, and it’s about the kids of Harry Potter and all of them, I would say Malfoy is my favorite character.

>> AMBER HINDS: You told us that your house would be Slytherin.

>> PAOLA GONZALEZ: I know.

>> AMBER HINDS: Paola has an evil side. [laughs]

>> PAOLA GONZALEZ: I was foreshadowing. [laughs]

>> AMBER HINDS: Oh, that’s funny. Okay. So, we have our captioner for 15 minutes. We are at time. Feel free to drop off if you don’t have time to stay on, but Paola, are you up for a lightning round to see if we can get through these last couple questions?

>> PAOLA GONZALEZ: Let’s do it. Yes.

>> AMBER HINDS: Okay. “Paola, when you showed your WordPress dashboard, there’s an accessibility section on the page. What plugin were you using?”

>> PAOLA GONZALEZ: So, for that, I was using Accessibility Checker, and I believe it is listed in the slides as well and it’s linked in there. The cool thing about it is that you get a report both on the front end and on the back end. The way I see it is the back end is for the wizards and then the front end is for the models because you can see the error, you see the title, you see a brief description, and then you can also click on See Documentation and you can read about it and see how you can fix it.

Usually, most of these issues, again, going back to one of the first things I said, usually most of these issues are content, so it’s very easy to fix, especially if you have documentation along the side.

>> AMBER HINDS: Yeah, and that is our plugin. Full transparency. It has a free version and you can use the free version. It’s very full of features, so you don’t have to buy it. Vanessa asks, “Would you share the website again that showed us the Able Player in action? All the examples are saying don’t have a transcript on the video, but that one does. Does it automatically include the transcript?” Maybe you can post the website.

>> PAOLA GONZALEZ: Yes, I just pasted the link in the chat and it’s also in the notes.

>> AMBER HINDS: Yes. That’s the WordPress Accessibility Day 2023. We used Able Player on there. I’m not the one who put all those videos on those websites. I’m pretty sure– There are two Able Player plugins, and I don’t off the top of my head remember which one, but the one that has Joe Dolson as a contributor, that’s the one that’s being maintained and the one that we use on the WordPress Accessibility Day website.

If you’re looking at wordpress.org, it’s free. Look for the one that has Joe Dolson as a contributor. That one, he modified to add support for the transcripts. It might be a modification in the shortcode or how you do it, so if you can’t figure that out, message me in the Facebook group and I can go look at that WordPress Accessibility Day website and tell you what we did in order to get the transcripts to output with Able Player.

Yvonne said, “Do you have any tips for introducing the importance of accessibility to managers in a nonprofit environment so they will be receptive to the time, efforts, costs of implementing accessible strategies in a website redesign?” Do you have any ideas about ways to sell accessibility to people, Paola?

>> PAOLA GONZALEZ: Yes. We can both pitch in here. The way I see it is that people like to see stats. People like to see numbers, so you can start there. The amount of people with disabilities that use the web are way higher than what your manager may be aware of. Start with those statistics. Going from there, think about the revenue and the traffic that you can bring in to the website by making it more accessible to everyone.

In addition to that, from the marketing side, you can just talk about it along the sides of SEO. Search engine optimization and accessibility get along pretty well. You can always sell it from that angle as well. I don’t know, Amber, if you have anything more to add here.

>> AMBER HINDS: Yes. I was looking at our website, which is why I was looking away. Okay. I’ll post a link in the chat. Ryan Bracey gave a talk a couple of years ago at Meetup. It’s Selling Your Clients on Accessibility. I think that there would be takeaways on that that might apply if you’re trying to sell it in-house, convince people to invest in it. I would check out his talk.

Then I was trying to figure out if we had– I feel like we had another speaker who had talked about it. Oh, I also have a blog post — I forgot about this — that I wrote earlier this year. It’s called How to Convince Your Boss or Client to Prioritize Accessibility. I would check those out, but I think you’re right on, Paola. If you can show stats, as much as we want to appeal to people’s hearts, the reality is a lot of times in businesses or even nonprofits where funding is limited, you have to show how that will impact the bottom line numbers, right? Try to figure out a away to tie it back to that.

Oh, yes, Peter Ingersoll also posted a YouTube video, and I think maybe we could dig up the write-up of this one as well. Paola, I don’t know if you have it. That was who it was. Simon presented on Building Empathy with Stakeholders to Drive Accessibility. That was a really great presentation because he actually had some live like, “Hey, why don’t you guys all try this during the talk?” Hopefully those are some helpful resources.

Then our last question is from Patricia. Patricia said, “Do you recommend creating sites with block/Gutenberg/full site editor in the 2024 theme, avoiding page builders altogether like Elementor?”

>> PAOLA GONZALEZ: I would say this depends.

>> AMBER HINDS: I’m happy to answer, but why don’t you give a thought?

>> PAOLA GONZALEZ: I would say it depends a lot on what you’re doing with your website. For example, if you have a portfolio website, the 2024 theme suffices, and it’s more than enough to what you need to showcase in there. However, for most company websites, you would have to rely on either page builders or creating custom block libraries. This heavily depends on the utility that you need for your website. Then Amber [crosstalk]

>> AMBER HINDS: Yes. Personally, we build websites not in full site editing because we do enterprise sites and there’s just some stuff about full site editing that we don’t really think is ready for primetime, to be totally honest, but they are built with blocks. They’re typically built with a combination of core blocks and custom blocks. We don’t use third-party libraries on our client websites, but there are some really great third-party block libraries out there that are very helpful and you can build perfectly accessible websites with them.

Page builders, I think, are incredibly important, especially for people who are DIYing or lower-budget website projects can be– the ones that you typically, if you’re a developer, you start with a template so that you can save time and make it cheaper for your client. I think that page builders definitely have a place, and you can build an accessible website with Elementor or any of these other page builders, even ones, as we’re going to hear next week, like Divi, which starts from a really bad place.

If you have dev skills, you can fix a lot of things. It’s just you have to ask yourself, “How much dev skills do I have and what are the goals of the website and what do I need?” Then you can figure out where the best starting point is because it’s really going to be different for everyone and every website.

And Billia says in the chat, “If you don’t have dev skills, ChatGPT is always there hahaha,” which is very true. Although the one thing I will say is I’ve learned that you need to be really clear with ChatGPT that you want accessible code back because it will suggest things like empty buttons to you. [laughs] Be very clear with your prompts to ChatGPT. Otherwise, you might not get good stuff back.

>> PAOLA GONZALEZ: Yes, that is very true.

>> AMBER HINDS: Yes. Thank you, everyone, for attending and hanging out for a couple of extra minutes if you did. We’ll be back in a couple of weeks. Thank you so much again, Paola, for speaking and the phenomenal presentation.

>> PAOLA GONZALEZ: Yes. Thank you, everyone, for attending. Thank you.

>> AMBER HINDS: Bye.

View “Accessible Content for Muggles: 10 Action Steps to Create Accessible Content” Google Slides.