063: Sunshine Photo Cart Accessibility Audit with Alex Stine & Amber Hinds

By /

This episode is a recording of a March 2024 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the Sunshine Photo Cart WordPress Plugin and provided real-time feedback. If you want to watch a video recording from the meetup, you may do so on the Equalize Digital website: Sunshine Photo Cart Accessibility Audit: Alex Stine and Amber Hinds.

Listen

Mentioned in This Episode

Summarized Session Information

In an in-depth review of the Sunshine Photo Cart plugin, accessibility experts Amber Hinds and Alex Stine, alongside plugin developer Derek Ashauer, embarked on an audit to assess and enhance the plugin’s accessibility features.

This session covered the plugin’s navigation and usability, shopping and checkout experience, and the admin interface, concluding with overall impressions and recommendations.

The audit aimed to ensure the plugin not only serves its primary audience of professional photographers with a robust e-commerce platform but also addresses the needs of users relying on assistive technologies. From examining labels and buttons to delving into form fields and modal dialogs, the session provided actionable insights to improve navigation, feedback, and the overall user experience.

By implementing these recommendations, the Sunshine Photo Cart plugin can further its commitment to inclusivity, aligning with the latest web accessibility standards and practices.

Session Outline

  • Introduction to Sunshine Photo Cart
  • Navigation and general usability
  • Shopping and checkout experience
  • Admin interface
  • Wrapping it all up

Introduction to Sunshine Photo Cart

Sunshine Photo Cart stands out in the WordPress plugin ecosystem for its dedication to serving professional photographers. It allows the sale of photos through a customizable e-commerce system, distinct from solutions like WooCommerce. The plugin prides itself on its independence, boasting a user-friendly interface and extensive functionality, including a personalized checkout experience and order management.

Navigation and general usability

  • Labels and buttons: the audit revealed the thoughtful use of proper labels and buttons throughout the plugin. However, to improve navigation for screen reader users, some areas needed clearer labeling, such as explicitly naming links and buttons according to their functions.
  • Modals and pop-ups: Alex explored the use of modals for actions like adding items to favorites. Recommendations included implementing HTML5 dialog roles and ARIA labels to enhance screen reader accessibility.
  • Quantity field labels: Alex noted that the increase and decrease quantity buttons were mislabeled in the screen reader output, which Derek acknowledged as a bug. To avoid confusion, Alex also suggested disabling the decrease quantity button when the quantity is at its minimum.
  • Use of buttons: Derek’s made a conscientious decision to use buttons appropriately in the plugin, which is an accessibility win. This is a common oversight in many audits where links are incorrectly used instead of buttons.

Shopping and checkout experience

  • Form fields and validation: the plugin effectively uses HTML5 validation for immediate feedback on errors. However, the layout of the checkout process raised concerns. Suggestions were made to reorder elements in the DOM to ensure that screen reader users encounter the order summary and coupon fields before finalizing their purchase.
  • Cart feedback: Alex suggested that after adding an item to the cart, users should be explicitly informed through an ARIA live region, improving the feedback loop for screen reader users. They also noted the misuse of a link for the cart, suggesting clearer labeling to indicate its function.
  • Checkout process: throughout the checkout process, Alex highlighted several areas of good practice, such as auto-filling form fields from user account information, which aligns with WCAG 2.2 guidelines for ease of input. However, they also identified areas where improvements could be made, such as correctly labeling edit buttons and ensuring form fields and radio buttons are accessible and properly marked up.
  • Payment methods: an interesting challenge arose with payment method selection. Radio buttons that reveal additional content (such as payment fields for Stripe) need clear communication about their function and impact.

Admin interface

  • Gutenberg editor compatibility: the plugin mostly adheres to accessibility standards within the WordPress admin, particularly the Gutenberg editor. However, the audit suggested changes to the use of navigation elements, advocating for tabs where appropriate to improve clarity.
  • Settings and options: the audit recommended minor improvements to the admin settings interface, such as ensuring checkboxes are clearly displayed across all browsers and focusing on newly added elements to guide users effectively.

Wrapping it all up

The Sunshine Photo Cart plugin demonstrates a strong foundation in accessibility, with Amber and Alex acknowledging its usability compared to many other plugins. However, they also identified several areas for improvement. Key recommendations focused on enhancing form field labeling, ensuring modal dialogs are accessible, and reordering checkout elements to follow a logical tab order for screen reader users.

Transcript

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

This episode is a recording of a March 2024 WordPress Accessibility Meetup where Alex Stine, Engineer & Accessibility Consultant, and Amber Hinds, CEO of Equalize Digital, performed a live accessibility audit of the Sunshine Photo Cart WordPress Plugin and provided real-time feedback.  WordPress Accessibility Meetups take place via Zoom webinars twice a month, and anyone can attend. For show notes, a full transcript, and additional information about meetups, go to AccessibilityCraft.com/063.

And now, on to the show.

>> AMBER HINDS: Of course, today I’m going to add a spotlight for you, Alex. We have Alex here again, donating his time, volunteering his time to do some testing. Do you want to introduce yourself for a moment?

>> ALEX STINE: Oh, I thought I wasn’t prepared for that. I’m Alex–

>> AMBER: Sometimes I don’t. I’m not consistent. I’m sorry.

>> ALEX: I’m Alex. They call me Goat of Accessibility. I’d like to think that I am too. I live here in the Texas area, as I already mentioned.

>> AMBER: Yes. You are an independent accessibility consultant and an engineer, a DevOps engineer at Waystar?

>> ALEX: Yes, but I guess we need to update that now.

>> AMBER: Oh, yes. I didn’t know if that was public, that you had a–

>> ALEX: It is very public. I will be starting as a Senior Accessibility Specialist at J.P. Morgan Chase tomorrow.

>> AMBER: Yay! Congratulations. Today we are going to be looking at the Sunshine Photo Cart plugin. Sunshine Photo Cart is a free client photo gallery plugin for WordPress that allows photographers to sell photos securely. There’s no limits or commissions. It has 100 plus five-star reviews. We are so excited to have Derek here. I’ll add a spotlight for you. Derek, generously coming up and letting us test your plugin. Welcome.

>> DEREK ASHAUER: Thank you guys for having me on. I’m excited and looking forward to having you guys rip this to shreds.

Amber: Is there anything for people who aren’t familiar with Sunshine Photo Cart, any sort of background that you think would be good for them to have before we dive in?

>> DEREK: Yes. This is basically a comprehensive e-commerce plugin. It’s not built on WooCommerce or anything like that. It’s its own ecosystem. It has its own add to cart, own checkout, order emails, and all that kind of stuff. It is more for professional photographers. It’s not just a general portfolio gallery thing. It’s for professional photographers who do maybe wedding events or family portraits, or they do sports photography for soccer clubs, things like that. Then the point is for them to sell those photos online.

There are some people that use it as well for their art photography, but I’d say it’s 90% directly focused for what I call client photography.

>> AMBER: Great. If someone wants to learn more, they can go to sunshinephotocart.com. I’m going to stop sharing in just a second, but I always like to reiterate our two guidelines for everyone who is watching via chat. Number one is obviously the goal of this is to give voice to assistive technology users. While everyone’s experience can be different, a big thing is we don’t want to be writing messages and starting arguments in the chat or things like that about how best to achieve things. We ask that we please respect what Alex has to say and his experience and what we’re seeing on the screen reader.

Obviously, if you have ideas about how to solve things and that kind of stuff, we welcome that. If you do have questions as he’s going through, you can put things in the Q&A module, and I will, at appropriate times, ask those to Alex if we want more clarification on something that he were hearing off his screen reader. Then number two is no bashing, please. It takes a lot of bravery as a developer to get up here and let someone give you public feedback on your product, and we really applaud Derek for being willing to do that.

Remember, this is not about talking about how bad something is or how good it is or whatever that might be. It’s about providing a learning opportunity for everyone. I am going to stop sharing, if I can figure out how to do that. There we go. Alex, I’ll let you share with your sound. [inaudible]

>> ALEX: I always feel really bad for what the captioner is typing right now.

>> AMBER: It just says computer-generated voice.

>> ALEX: Yes, so we’ll slow it down so everyone can hear it. [inaudible]

>> AMBER: I feel like 45, maybe.

>> ALEX: Okay. It will give us some highlights.

>> AMBER: Should we see where the speech viewer is these days?

>> ALEX: We can try.

>> AMBER: That might be okay. I know it’s challenging. We’ve tried moving it around. It doesn’t work for it. We’ll see if it doesn’t block too much. If it does, then we might close it, but let’s leave it up for now. Do you want to, just for anyone who is, can you give a quick, what browser you’re in? Obviously, I think you’re using NVDA, but anything you think is good background for people to be aware of on the screen reader side? Aside from you listen to it at like 100% speed.

>> ALEX: It’s at 90%, but almost. This is NVDA. This is Windows 10, and this is Firefox. All latest versions.

>> AMBER: Awesome. I think like normal, we usually start on the front end of the website. If you want to go to the front end, it might be worth being logged out. I don’t know if you want to probe me do it, but [crosstalk] it looks like you are logged in right now. Derek, will the user experience, would he be able to follow the checkout process if he’s logged in or would he need to be logged out? Yes, it just won’t ask them to create an account during the checkout, so which it’s not that big a deal. I mean, you decide, is that a big deal?

He’ll already be logged in, so it won’t prompt for entering an optional password.

>> AMBER: Yes, I think we should maybe log out so we can get all the fields.

>> ALEX: [inaudible] I’m already signed in. Private browsing.

>> AMBER: I still [inaudible] forty.

>> ALEX: This is such a great sacrifice.

>> AMBER: Painful for you to listen to it that slowly.

>> ALEX: So painful.

>> AMBER: Yes. Okay. When I did some initial exploring around, it seems like, and you can correct me, Derek. I’m assuming that this is on a theme that has nothing to do with your plugin. We don’t really need to look at the navigation menu or things like that. Because your plugin isn’t creating that. The one feedback that I had, just like in general, if you wanted to make your demo more accessible, you might check the color contrast. You have a light orange with white text on some of the buttons, and it looks like that would fail color contrast.

Your demo would work better for low vision users if you adjusted that. Do you want to go view a gallery, Alex?

>> ALEX: Yes. That’ll be a good question is where does the plugin actually start?

>> DEREK: At the view galleries.

>> AMBER: Yes. There’s a link to view gallery. Are there links? Yes.

>> ALEX: There we go.

>> AMBER: Can I get you to stop for one second, Alex?

>> ALEX: Yes.

>> AMBER: Okay. You are able to reach buttons that are not visible to us. Would those become visible if I need to open this in [inaudible] if we hovered over them, Derek?

>> DEREK: Yes.

>> AMBER: Okay. This is an interesting thing. What I would wonder is whether we could get to them by tabbing. I would want to check that. Like for Alex, it doesn’t really matter that the [inaudible]

>> ALEX: Okay. I’ve tabbed on those. If you don’t see them, the answer is no.

>> AMBER: Yes. Okay. Yes. We can’t see them. I can see a slight bit of a blue focus outline, maybe. I would definitely make sure that those become visible when they receive keyboard focus.

>> DEREK: Sorry. I’ll stop typing on my notes.

>> AMBER: I actually think– Oh, no. I confused myself because I had my mouse hovering over it. Okay. So sorry. Go ahead, Alex. I was just hearing things that I couldn’t see.

>> AUTOMATION: [inaudible]

>> ALEX: I’m also not entirely sure any of these need to be navigation landmarks. Because they’re really actions, not navigation elements. It’s probably something you can just remove. Replace it with a div or something.

>> DEREK: Okay. I don’t know how many are here, but this is going to take forever.

>> AMBER: One thing that I’m noticing here, and I don’t know if you caught on to this, so there’s multiple images and each image then has buttons that can control it. The add to cart and the favorite and something else that we heard.

>> DEREK: Sharing.

>> AMBER: Sharing, but they’re not specific to the image. I don’t know, Alex, if you have thoughts on– Right now these just say family image one, family image two, something like that. Would you want it to say favorite family image? Do you want more descriptions? I think we kind of talked about this a little bit in the pre-show too. How would we even handle describing images in this scenario?

>> ALEX: I don’t know. I think it would be up to the people that upload these images to actually give them descriptions. I don’t think there’s anything the plugin author can do here, so other than provide the opportunity to add all text past that, it’s kind of up to the users.

>> AMBER: The individual buttons though would need to have some sort of unique identifier, wouldn’t they? So that it wasn’t just add to cart, add to cart, add to cart. It would have to differentiate which one you were adding to cart.

>> ALEX: In a perfect world, but in this type of scenario, it would make these really unmanageable. You would have really long labels for every button.

>> AMBER: What’s a better solution?

>> ALEX: If these are per image, I would rather just see these go away, and then you can click on an image if you want to share it or buy it. I can see maybe keeping the favorite button. That makes sense.

>> AMBER: Yes, that’s an interesting thing. How would you feel about surfacing them for keyboard sighted users, but not for blind users though? Because that feels a little bit like it could be a failure.

>> ALEX: You can’t. It’s impossible. It has to be in the tab order if it’s going to work for sighted keyboard users.

>> AMBER: Well, it could have ARIA hidden on it. That wouldn’t remove it from the tab order, I think.

>> ALEX: It wouldn’t, but it also would just announce as a blank item for screen readers. You can’t add ARIA hidden to a form control like that.

>> AMBER: It might be useful to not have these, but I guess that’s also hard because I can see how clients and customers want the ability to maybe not have to make the image larger to add it to cart.

>> ALEX: Yes, that’s one of the biggest requests is how can we get people to add these things to cart and favorite faster without having to click through each image.

>> AMBER: Dean put in the chat ARIA described by equals the ID of the image is how he would handle that.

>> ALEX: Yes, your experience on voiceover wouldn’t be great though because sometimes, well, a lot of the time what will happen is voiceover will actually require you to use different keystrokes to read the ARIA described by. [crosstalk] ARIA describe bar should be–

>> AMBER: An label would be better.

>> ALEX: Aria label would be better as long as you don’t change the beginning text. Like it should be share image with title, but that’s also rather subjective because these images could be named anything.

>> AMBER: Yes, I think one of the things that I would try to do, like if you’re, sometimes accessibility is about creating documentation for your users, so if you had it set up where it used like the alt text of the image to label, maybe providing some documentation about what is important in the alt text in the scenarios that they’re using because these images that we’re seeing are all different, but I can envision that if I hired a photographer to take pictures of my family, they’d be almost all the same except with very slight variations. Trying to figure out what is the meaningful information that the photographer would need to share with someone and not being overly verbose.

>> DEREK: I could almost get– Alex, I think you said that it would be up to the photographer to do some of that and I could guarantee 99.999% of photographers would never put the effort to add custom descriptions or labels for these images. Unfortunately, no.

>> ALEX: No, I’m not going to even try to argue with that statement, you’re right.

>> AMBER: I do think though they should have some sort of unique, the buttons should have some unique to say what the difference is.

>> DEREK: Yes, instead of just add to cart, it should say add family 01 to cart or something along those lines.

>> AMBER: Yes. Do you have one of these galleries off the top of your head that has the pagination? This one has the infinite scroll. I don’t know if you want to look at that, Alex, try to go to the end or if it’d be better for us to go look at the pagination one or the load more one is also interesting.

>> ALEX: What’s the end?

>> DEREK: Let me see if I can find one, I don’t remember.

>> AMBER: You’d probably have to go, I don’t know.

>> AUTOMATION: No next [inaudible]

>> ALEX: It seems to work.

Amber: Yes, I just added more. That was fine for you. No problem with that.

>> DEREK: Yes, I don’t think I have one with pagination in here right now.

>> AMBER: Do you have one with the load more button?

>> DEREK: That one we just did was the one with the load more.

>> AMBER: Oh.

>> DEREK: It’s the exact same thing. It’s just it automatically clicks the load more button for you. Yes, that’s the only difference is what infinite scroll does.

>> ALEX: Yes, well, sort of. Load if the user is on load more. That’s not to say that focus will move back. They are similar, but definitely not the same concept.

>> AMBER: Yes, so I think the way you’ve executed it here is good. There’s been other ones I’ve seen where they add stuff, but they add stuff above where the person is, and then they don’t know. 

>> STEVE JONES: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. 

A WordPress native tool, Accessibility Checker provides reports directly on the post edit screen. Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand. 

Accessibility Checker is an ideal tool to audit existing WordPress websites find, accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. Scans run on your server, so there are no per page fees or external API connections. GDPR and privacy compliant, real time accessibility scanning. 

Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password protected sites, view site wide open issue reports and more.

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

>> AMBER: There is a navigation that has an item of client galleries in it, but it’s not a labeled navigation tag, and I think that’s coming from the plugin. Just get client gallery, store cart, checkout.

>> DEREK: Yes, so there’s cart checkout that has the light box around it. That is from the plugin itself.

>> AMBER: That one, I think you would want to keep a navigation tag on, but it needs an ARIA label to define it.

>> DEREK: Yes, like what those links are.

>> AMBER: it’s above where you are.

>> ALEX: Oh, ok.

>> AMBER: Would you just call it like gallery navigation? Is that what you would call that?

>> ALEX: Probably so. It would also be nice if we had ARIA current here to mark the current page.

>> AMBER: Yes, except for this particular one, I don’t actually think that it’s in the navigation. The one you’re looking at.

>> DEREK: [inaudible] pagination.

>> AMBER: Do you want to try some of the functionality, like favoriting an image.

>> ALEX: Yes, we can do that.

>> AMBER: Adding an image to cart.

>> DEREK: You have to be logged in to add the favorite.

>> AMBER: Okay. [inaudible] I’m assuming you triggered the favorite button. It popped up a modal telling you you need to create an account.

>> ALEX: I am almost positive the modal appeared at the bottom of the page with no focus [inaudible] Let’s see. Here it is. No. Yes, here it is. Couple of comments to make here. This is a visual modal but not actually rendered as a accessible dialog. That could use the HTML5 modal tag or the role dialog. It should have an ARIA label or labeled by attribute to tell you what the title of this dialog is. It should always have a close button, and it should manage focus. That is how you would probably be able to fix globally, the models within the plugin, I would assume.

They probably all function the same.

>> DEREK: Yes, they all are opened in the same way, and so it seems like just those few things would be pretty simple to add a role dialog and some ARIA labels.

>> ALEX: Yes.

>> AMBER: Your close button right now is– It’s an A tag without an href, which effectively makes it not serviceable to a screen reader user. You just want to turn that to an actual button.

>> ALEX: Yes, that’s definitely not here. That’s for sure.

>> AMBER: Do you want to sign up with some fake info [inaudible]

>> DEREK: Yes, you won’t have to confirm anything.

>> ALEX: All right, that means we get that–

>> AMBER: I always choose a cartoon character I want to be.

>> ALEX: I always just do test at example.com because whoever owns example.com probably gets a ton of spam and it’s fun. Why is the password optional?

>> DEREK: It’ll automatically create one if you if you don’t enter one. There’s a lot of photographers that have said they want to make it as fast as possible to add items to their favorites and stuff. The photographers get to choose whether or not they want that setting enabled or disabled.

>> ALEX: If you’re going to have a setting like that, it would be nice if it was clarified because that was some very confusing UX.

>> AMBER: To hear that it’s optional?

>> ALEX: Yes.

>> DEREK: Just kind of explain that.

>> AMBER: Because normally you expect one to be required, right?

>> ALEX: Yes. They hear [crosstalk] password optional, it’s like, okay, does this website use something magical from the future? Not a required password. Okay.

>> AMBER: It’s up from where you were, the notice.

>> ALEX: When a screen reader user comes to the page, they’re probably going to jump to the heading one on the page. If you put a notice above that, they’re going to miss it probably 99% of the time, as I just so clearly demonstrated.

>> AMBER: I think there’s a couple of solutions here. One is that those banners could exist but be empty and have ARIA live on them, so when text gets inserted into them, then it’s read out, or focus could be shifted there. What do you think, Alex? That’s success you’ve created an account and been logged in.

>> ALEX: ARIA live region is fine, just as long as these notices don’t have links in the future.

>> DEREK: Like a link within the notice?

>> ALEX: Yes, because then it would be necessary for the user to go find it.

>> AMBER: Yes, you still want focus shifted to it, even with an ARIA live.

>> ALEX: Actually moving focus to a notice is fairly difficult. To have a reliable working solution across all OSs and screen readers, it’s not easy.

>> AMBER: Is it sufficient to move it below the H1 and have the ARIA live then, do you think?

>> ALEX: Even below the H1 would be a lot more discoverable. I’m pretty sure this is the image we added to favorites. This button does not indicate that I added it to favorites, so we need to add some type of, I think we could probably use an ARIA press here. That way, favoriting, well, it’ll tell me that, yes, it is favorited. We want to avoid text changes here. Those text changes cause some other issues. Favorite is fine, but I’m sure the visual appearance changes when it’s favorited versus when it isn’t.

>> DEREK: Yes, it does.

>> ALEX: We’ll unfavorite it.

>> AMBER: Yes, so if that was pressed, it would change from true to false.

>> ALEX: Yes.

>> DEREK: The ARIA pressed here, would it change from true to false?

>> ALEX: Yes.

>> DEREK: Okay.

>> AMBER: I am putting some links to some of this documentation on MDN WebDoc in the chat, in case that’s helpful.

>> ALEX: We will try out share next. Out of list. Mostly workable. Same comments as earlier about the dialogue. I would probably add ARIA has pop-up equal to dialogue on that button just so it’s clear what it does. Yes, it does open dialogue.

>> DEREK: Would you do the ARIA has pop-up on the, I guess not on the favorites, but if they logged in or something, if they just sign up or log in, then you do the same on that one as well.

>> ALEX: Correct.

>> DEREK: Okay. Then you’ll find out in a moment, but that’ll be the same for the add to cart as well. It’ll do a modal, which will have the same issues as well.

>> ALEX: The thing about this, though, is this doesn’t say add to cart. It says purchase options. If you mean it to say add to cart, add to cart would be better.

>> DEREK: It is purchase options because you go there and then you select from the list of products that are available. Because they can buy a 5 by [inaudible] by 10. Alex: We have to figure out how to get rid of the existing dialogue first. Oh, wait. No. No. Yes.

>> AMBER: I do think that other one is behind it, but I think that could be solved by if you put a focus lock on the modal, he literally wouldn’t be able to go back to the page to open something else without closing the existing one.

>> ALEX: Yes. Rural dialogue will help with that as well. Let’s see. Refresh [inaudible]

>> AMBER: Can you go back to where you had the links of prints, canvas, digital downloads, [inaudible] I think those might be scroll links, like anchor links. Is my guess. I’m curious if you follow one. Oh, no.

>> ALEX: Yes, it looks like they’re presented as tabs.

>> AMBER: Yes, filters. Everything was visible and then you clicked one. Yes, would we call this tabs? I think they’re like filters actually more than tabs because you could see all of them until you selected one and then you could only see the options in that category. Would you still call that a tab?

>> ALEX: Yes, I don’t actually know what these are. The developer should enlighten us.

>> DEREK: They’re essentially filters because, Amber, you had it right. They’re all presented on the page first and then it just shows the ones that are marked as a canvas, as a digital download or a print.

>> ALEX: You select multiple.

>> AMBER: I think I would call it– Yes, can you select only one at a time?

>> DEREK: Yes. They’re both a tab and a– I mean, I think you’re both right. They’re a tab and a filter at the same time.

>> ALEX: Okay, we can solve the–

>> AMBER: Are they radio input. Give it a role of radio. Would you do that, Alex?

>> ALEX: I’m thinking more along the lines of why don’t we just make this an actual set of tabs and then we just add one more tab labeled all and that’s the one that starts out. Because this is–

>> AMBER: That way you can still show all at the beginning.

>> ALEX: This is highly confusing because I also don’t know how to reset this at this point.

>> DEREK: That’s fair.

>> AMBER: Yes, well, when I heard link, I thought when you went to it, it was just going to scroll you down too. I think that’s a good idea. Treat them like tabs and add an all at the beginning. Then use the ARIA to define them as like a tab list and the tab panels.

>> ALEX: Yes, the MDN has a really good set of docs about that as well.

>> DEREK: What’s the official name of it? Like ARIA tab list, you said?

>> AMBER: Yes. I’ll throw a link in there to– W3C has examples of what would be these would be like a manually selected tabs.

Alex: I’m also not particularly clear what our see options would mean here. I’ve got what I would be getting in the price. I don’t know what options would be, but I also don’t order pictures.

>> DEREK: Yes, so with prints, for example, you could pick a type of paper that it gets printed on. You could add things like I want photo touching. There’s lots of different things that photographers could potentially offer as options on a product like I want to buy a T shirt. It comes in what size, what color? There’s things like that as well.

>> ALEX: It’ll be the same thing here, then see options for. Then we’ll have to have a label that describes it. What is the options? Oh, wow. That’s interesting.

>> AMBER: That 20 by 30 is, I think, like inches of this canvas. I wonder if that should be described better to make it more clear.

>> DEREK: That would be up to the photographer to decide how they wanted to name and label their products. That would then be like–

>> AMBER: This is just something that they would set.

>> DEREK: Yes, correct.

>> AMBER: It’s not like you have a dimensions field where they filled it in and then that makes it this.

>> DEREK: Yes.

>> ALEX: That is clear enough, what scares me is how this just totally replaced the DOM when I selected see options. I’m not sure what this is going to look like going back. Exactly that, unfortunately.

>> AMBER: It visually changed, but you didn’t key anything.

>> ALEX: Yes, it’s because it’s like it’s replacing the DOM every time this gets updated. This is going to need to be totally reworked and how it’s done.

>> AMBER: How would you handle that?

>> DEREK: It should be overlaying on top of it. It shouldn’t be replacing anything. It should be like every time you click on see options, it will overlay– Basically what it’s doing, it should be overlaying it on top of what we’re seeing right now. Then when you close it again, it should be– I built that a year and a half ago, so I cannot remember it correctly.

>> ALEX: I don’t see any of the other options that they’re still there. I see the fact that the cart is still empty and that–

>> AMBER: Well, hold on. I’m trying to see if–

>> ALEX: I’m seeing them there in the DOM myself, but–

>> AMBER: Yes, I think it’s just replacing what’s visible.

>> ALEX: How did you hide them? Is it display none?

>> DEREK: No, it’s literally the blade right on top of it.

>> ALEX: Yes, I’m having a hard time with that, though, because laid on top of it’s a very visual description. It shouldn’t hide it for me if it’s only a visual change. I can’t find the previous content, so it’s definitely gone somehow.

>> AMBER: I’m trying to look at what–

>> DEREK: What it does is it adds another div right below the list of products where it lists the prints 5 by 7, 8 by 10, so on and so forth. It adds another div right after that list, and then that div is basically positioned right on top of it. It’s going to cover the list.

>> AMBER: If you go up in the page–

>> ALEX: Yes, just get the photo right above it. It’s not there, whatever was done. Let’s see. We’re using [inaudible] That’s that. [crosstalk] There is a style display none. Derek: Yes, there it is.

>> ALEX: Yes. That is effectively removed from the DOM.

>> DEREK: Okay, [inaudible] that is doing that.

>> AMBER: I don’t know visually if what you’re doing here is necessarily a problem. I think it’s more of a there needs to be a good announcement or explaining what’s happening for screen reader users potentially. Then it is a little semantically like this is where things get interesting, right? Because you have the return to products coded as a button, which I guess maybe makes sense because it’s like changing the visibility.

>> DEREK: It’s a close button.

>> AMBER: Yes, I almost wonder if–

>> DEREK: Essentially, it is a modal on top of a modal.

>> AMBER: Yes, so either a modal or like what I was thinking is it’s almost like an accordion where things are becoming visible and not.

>> DEREK: That’s another way of.

>> ALEX: Yes, well, sort of, because when we have accordions, we don’t just display none the rest of everything.

>> DEREK: Correct.

>> AMBER: Well, yes, the other triggers to open and close.

>> ALEX: I think that [inaudible]

>> AMBER: Yes, it’s almost like a modal.

>> DEREK: It’s a modal on top of a modal almost.

>> ALEX: Yes, and that’s going to be your problem. Depending on how fast the transitions and everything are, even if you tried to put focus on that, it might not be available when you try it.

>> AMBER: Was the problem, Alex, that it wasn’t putting you in the right place when you clicked more options?

>> ALEX: No, the problem is, is if I close this, it just stays there and I have no idea where I am. I’ve just lost focus.

>> AMBER: Got you. What you want to see a solution for? Maybe we don’t have a great answer right now is that when you click return to product, maybe he could use JavaScript to put you on the tabs that we talked about before where you can see the different types of parts or like something so that you’re not lost when you hit return to product, and that would sort of solve this problem.

>> ALEX: No. I want to go back where I started.

>> AMBER: Okay. You want to go back to whatever more options button you were on when you triggered it just like if you close the modal.

>> ALEX: I mean, let’s say there’s 60 different canvas options. That would be absolutely miserable to have to navigate all the way back to–

>> AMBER: Yes, you’re right.

>> DEREK: There are some photographers that literally have like 80 to 100 products in a list. Yes, that would be terrible if you’re working on the last one.

>> AMBER: Then if you did return your focus back to the button that triggered it, then it would be okay.

>> ALEX: It would, yes.

>> DEREK: Okay, cool. Okay.

>> AMBER: Do you want to just add something to cart and try and check out?

>> ALEX: We can do that. This quantity field does not have a label. Increase quantity and decrease quantity are on the wrong sides. I would expect to find the decrease button before an increase button in the DOM, but that’s not the case here.

>> AMBER: Oh, so it visually is a minus and the other one is a plus. It’s possible the labels are reversed in the screen.

>> DEREK: It is, that’s just a bug. It has the wrong labels written.

>> ALEX: Yes, that is exactly what it is.

>> DEREK: I never see it because I don’t use the screen reader.

>> ALEX: What I’m interested to see is what happens when I select this again. Okay. It doesn’t do it, so you should probably disable that decrease quantity if the quantity is equal to one.

>> AMBER: Just put a disabled on the button.

>> ALEX: Disabled or whatever you’re choosing to put on it. Add to cart.

>> AMBER: I do have to say real quick that you have a lot of buttons, which is awesome because sometimes we do these audits and everything is not a button [laughs], so way to go.

>> DEREK: I did think about that when I was coding this version of being a lot more conscientious of when to use the button and when not to. Obviously I missed a few spots, but I tried to be a little better about that.

>> ALEX: Yes, there’s really, really nothing to say about that. There’s buttons where there should be buttons, and that’s something I don’t see very often. [crosstalk] Okay. One item is in the cart.

>> AMBER: Was it okay that when you added it to the cart, what it did was it took you back to the canvas list and you didn’t hear item added to cart, or would you want to hear item added to cart?

>> ALEX: It’s going to be the same focus issue that we just talked about. Again, in a perfect world, it would drop you where you left off and I would get an announcement that says this item has been added to cart.

>> AMBER: If you put an ARIA live region on the cart, then whenever the cart changes, it would read that out.

>> DEREK: Okay.

>> ALEX: This is misuse of a link though, because it’s not entirely clear where you would end up following this. One item, $100. It doesn’t actually tell me what’s going to happen when I click this.

>> DEREK: Okay.

>> ALEX: The text needs to describe–

>> AMBER: You want the link to be labeled go to checkout or something.

>> ALEX: Or wherever this link goes, because right now I don’t know what’s going to happen when I click this link.

>> DEREK: That makes sense.

>> ALEX: It could go to a bigger cart view. It could go to a checkout, but without the additional clarification– I guess we’ll see where the link goes. It goes to the cart. That’s not where I would actually expect that link to go, so I’m glad I added that. That was fun.

>> AMBER: Was that the alt text?

>> ALEX: I have no idea what that was. We do have proper table headings, which is good. Yes, there’s like some escaped HTML going on there or something. Don’t know what that is. Amber: Yes, I’m trying to add something to my cart real quick so that I can look at it. As side note while you’re talking about images, Thomas had asked if it would be useful to add a button to have AI describe this image to me. Would that be a feature that would be good to add in this plugin?

>> ALEX: Oh, that’s a fun conversation. The answer is maybe. The answer is maybe because we still all have such differing opinions about privacy and how AI fits into that. For me, yes, I would love to have that feature because it would at least give me some idea of what the picture is versus having no idea now. For others, absolutely not. It’s a privacy issue. Don’t even think about it. From an accessibility standpoint, absolutely, but with the big disclaimer that this might not actually be an accurate description.

>> AMBER: Yes, but it might maybe be helpful. Maybe that’s where you can upcharge your users because they have to buy credits or something, right?

>> DEREK: Yes, or do an integration with I know someone who has a good image AI plugin and just say, hey, “There’s integration. Go use that.”

>> AMBER: Yes. Cool. There is– I inspected this. The alt text does have HTML that’s being rendered out in it. That’s a link to the gallery. That might be a bug on the images in the cart. Derek: Yes, that is. That absolutely is a bug.

>> ALEX: Yes, hopefully it sounds like it’s escaped, though, or this could be a big cross site scripting issue with–

>> DEREK: Security, it’s fine, but usability, not so much.

>> ALEX: Usability. Oh, no.

>> AMBER: How do you how do you feel about that Qty, Alex?

>> ALEX: The Qty is fine. I would assume most users in this context know what that means. It would be nicer if it’s that quantity, but save space. The bigger problem is the unlabeled link right after it.

>> AMBER: That should be a button that says remove item or product or whatever it is, because I’m pretty sure– It looks like a trash can. I think that if you do that, it will empty your cart.

>> ALEX: Depending on how this operates, it should be a button and it might need additional attributes if it opens a dialogue. I don’t know what it does, so can’t really say.

>> AMBER: Then continue going and then check out.

>> ALEX: I don’t understand update cart with what.

>> DEREK: If you change the quantity.

>> ALEX: Okay.

>> AMBER: Could that button be disabled unless there was actually an update available?

>> DEREK: Yes.

>> AMBER: Like the button is only available if they’ve actually changed the number. Then I almost wonder, like, if that’s what it is, maybe the label is more clear, like, save quantity changes or I don’t know, something. To make it more clear what you’re doing.

>> DEREK: Update cart changes or something like that. Okay.

>> ALEX: This has almost the exact same layout that WooCommerce does as far as accessibility on the cart page.

>> AMBER: Is that good or bad?

>> ALEX: Not sure if that was your intent or not, but it’s what you have. I will tell you if it’s good or bad once we get to the next page. [laughter] Here we are at checkout. Oh, look at that. Form and form field with proper semantics. I’m very happy right now.

>> AMBER: You know what else I have to highlight here? This is a new thing with WCAG 2.2. You have auto filled in the name and the email address from where he gave it on his account and you’re automatically doing it, which is awesome because for some users, like people that can’t use traditional keyboards, typing information can be really slow and laborious. This is awesome so it’s not blank by default.

>> DEREK: I do it for me. When I’m on my mobile phone, I hate when I go to a checkout and I’m like, name, why doesn’t it allow me to just select my name using a mobile device.

>> AMBER: Like it knows my name is.

>> DEREK: It knows my name is already. I already know that. Why can’t I just type Derek Ashour? It just knows all my stuff and I can just hit next, next, next, next, and auto fills it. That’s the reason why I did it. I’m glad it works for everybody.

>> ALEX: Yes. See, sometimes accessibility is just common sense. What’s given it a double required though? That’s strange.

>> DEREK: That’s probably a bug.

>> ALEX: I just want to know what does that?

>> AMBER: Is it only on the email field?

>> DEREK: You know what it is? This is a bug that I actually fixed last week. I just haven’t updated the demo. When you’re logged in, it keeps asking you for your email address over and over again. It is a silly bug that I forgot to update before we got to this.

>> ALEX: It does on every field, so. Let’s take a look and see. Just want to know what announces double required.

>> AMBER: Well, I think it’s because the label has required in it.

>> ALEX: Oh, [inaudible]

>> AMBER: It’s because the email has required in it, and the input has the required attribute. That’s what I suspect. It’s reading the required on the label, and then it announces the required on the input.

>> ALEX: Well, that’s interesting. Is that the label?

>> AMBER: Is that a problem?

>> ALEX: The label doesn’t actually say required. I wonder if this is NVDA compensating for bad developers.

>> AMBER: No. The label has an abbreviation. It has an asterisk and he’s used the ABBR tag. With a title of required and an ARIA label of required.

>> ALEX: I was almost–

>> AMBER: It might be reading the title and the ARIA label.

>> ALEX: No, that’s exactly what it is. I was almost happy, though, because the star is such a common thing on forums. I was like, NVDA finally got an update. That way it reads required when there’s just a star. I think you would be shocked with how often–

>> AMBER: He could remove the title from that abbreviation tag and just have an ARIA label, right?

>> ALEX: Let me see, now that you’ve found where it is. What’s in this abbreviation? Is it just the star?

>> DEREK: Yes.

>> AMBER: Just the star.

>> ALEX: I’ve removed the title and the ARIA label from this because it’s still going to repeat.

>> AMBER: Because the input has the required attribute on it, and it’s going to read it then.

>> ALEX: Exactly. Yep.

>> AMBER: This is one where you were working to try and make it more accessible, but you almost like overthought it?

>> DEREK: Yes, overshot that one. [laughs]

>> ALEX: Here I thought, I was like, “Oh, my gosh, NVDA developers are catching up with common web errors.” Nope. It’s okay, though. Over-engineering in some situations is better than under. That’s the first time I’ve seen usage like that on an abbreviation tag. It was very creative. I’ll give you that. Okay, we’ll go next. The quiet is usually not good. [laughs]

>> ALEX: Yes, the quiet is usually not good.

>> DEREK: That’s what I was expecting, to be perfectly honest.

>> ALEX: Okay, so that link, let’s see what this does. This says edit. What happens if I click it? That link should be a button.

>> AMBER: It should say edit contact information.

>> ALEX: That’s exactly what it should say.

>> DEREK: Could you do like an ARIA label instead that says edit contact information or should the whole thing say?

>> AMBER: Yes, you can do it.

>> ALEX: You can do that, yes.

>> DEREK: Okay. Just again, like we’ve talked about before, like saving space on quantity and things like that. I’m curious to know where you can do that for [crosstalk]

>> AMBER: Either an ARIA label or screen reader text.

>> DEREK: Okay.

>> AMBER: I think for sighted people, they have the line of it being on the same row with the contact information and not too far apart, and so they make that connection, but it’s less clear when you can’t see the layout.

>> ALEX: The one big rule is you just want to make sure you avoid doing something like contact information edit. Then it breaks it pretty bad for people who are just seeing the visible text of edit, and then they’re like, okay, well, why can’t I activate this if they’re using like a voice recognition is the wrong term, voice control product. Yes.

>> AMBER: Oh yes, like [crosstalk] speech, voice control. Yes.

>> ALEX: The other thing I would do is I probably just go ahead and place focus in the first field, so that way you don’t wonder what happens when your edit button disappears. Like, “Okay, I clicked edit, but where is it?” We’ll go next again. Okay, so those are probably options. It should be radio buttons. Currently–

>> AMBER: You can use a roll of radio if you can’t recode them as a radio.

>> DEREK: They should be radio buttons.

>> ALEX: Currently, they are nothing according to the screen reader. Let’s see what’s going on.

>> DEREK: I think it’s because I placed the actual input out of the label visually. Oh, it’s displayed none. That’s why. That’s why [crosstalk].

>> ALEX: Yep, that does it.

>> DEREK: Why do I display none? [laughs]

>> ALEX: That display none has its purposes.

>> DEREK: I have to revisit why I chose to do that earlier. Two years ago when I coded this. [chuckles]

>> ALEX: Okay, so which options should we choose?

>> AMBER: Shipping.

>> ALEX: What happened here? An invalid entry for a shipping address? Okay.

>> AMBER: I wonder if it’s telling you if the error that would surface if you were to– like what if you go to next step without submitting, without typing an address.

>> ALEX: These all have HTML5 validations. I would expect the drop back in address. There it is.

>> AMBER: Hey, that’s awesome. Lots of times he doesn’t hear the errors.

>> ALEX: All it is is one itty-bitty attribute. That’s it. It’s magic.

>> DEREK: I find that so much easier than JavaScript validations.

>> ALEX: It’s magic. It’s such magic.

>> AMBER: I was wondering if the error that was surfacing to you was an error that you could reach with the screen reader, but I’m not sure what that was.

>> ALEX: Yes, it’s just a standard field. A field error.

>> DEREK: Okay.

>> AMBER: Type an address.

>> ALEX: Oh, what city should we use?

>> AMBER: Plano. Only because you know the ZIP code for that. I don’t actually-

>> DEREK: It doesn’t val.

>> AMBER: -know if this validates.

>> DEREK: It won’t validate [inaudible]

>> AMBER: It doesn’t validate that you’ve [inaudible]. Okay. [laughs]

>> DEREK: [crosstalk]

>> ALEX: That’s too obvious.

>> DEREK: Put any state you want to.

>> ALEX: [inaudible] want to see where I live.

[laughter]

>> DEREK: We’ll have the same problems as before.

>> ALEX: Still local delivery. I’m cheap. I take it those are options.

>> DEREK: Yes.

>> AMBER: It’s also a radio but the input is just not visible.

>> DEREK: Yes, it’s the same problem as the shipping.

>> ALEX: Okay, so which option should we choose?

>> AMBER: Are you most interested in Stripe?

>> ALEX: Probably so. It will probably, for sure, have the most issues.

>> AMBER: [laughs] They won’t be your fault.

>> ALEX: They won’t be your fault. Well, this is actually interesting because these are radio buttons that expose content. Not quite sure how you communicate that. Because I would have figured select the payment method and then click next step again.

>> AMBER: Yes, so like the card or the Klarna or you’re seeing affirm. Why don’t I get affirm? [chuckles]

>> DEREK: It’s location-based, I believe.

>> AMBER: Yes, weird Stripe magic. Yes, probably they should have been like a tab, but I’m guessing almost all of this is just coming out of Stripe and not anything that you’ve coded, right?

>> DEREK: Yes, at that point where the red notice there down in the Stripe fields, that’s all from Stripe. It’s just showing the necessary fields. If you select PayPal to show the PayPal buttons. I don’t know if we necessarily need to test all this, but something I wanted to bring up, and I’m curious if you have thoughts about it, Alex. When I was going through our shop site, which is WooCommerce, it had a similar layout where the order summary was visually on the right of the checkout fields. I think that the order of this is after the ability to check out and finish.

One of the problems that could come up, and this has been mentioned a lot in some of the lawsuits, is if people who are blind don’t have the ability to access and use coupons, like sighted people, and the coupon field in yours actually happens after all of the checkout buttons in the focus order. How I–

>> ALEX: I mean, based on the flow that you have, I don’t know why you don’t just make a step that says, “Does this look good?” order summary? “If so, continue to pay.” That’s how I would do that.

>> AMBER: I did notice, because I tested on mobile, because what WooCommerce failed to do was on mobile, their order summary is at the bottom. I looked at yours and yours is above on mobile, but it doesn’t seem like it’s in the tab order above. I feel like that needs to be adjusted so that it’s in the tab order. Because even on mobile, I think if you– if Alex were to zoom in a bunch, like he was a low vision user, then you get the mobile on desktop, and so it would be visually above your checkout flow, but you’d have to skip past it. Tab, tab, tab, go all the way to the end, and then it would tab you back up to that. It needs to be in the DOM before. It can still be positioned on the right, but it literally needs to be in the DOM before the checkout.

>> DEREK: Okay. That makes sense. Is it okay to be before the start of the whole checkout? Like before the cap, like the contact information that where we started that part and whatnot?

>> ALEX: Yes. That’s another place you could put it.

>> DEREK: That’s easy enough to– that’s really easy, because it’s just basically a Flexbox row with the left side of our checkout is listed first. I could just swap it and do the summary first.

>> ALEX: Well, yes, you had to be careful.

>> AMBER: I mean it is helpful that it has a– Oh, go ahead, Alex.

>> ALEX: You don’t want to accidentally create another accessibility issue. You have to make sure that your focus order follows the page content. If you do move that first in the DOM, you’re probably going to contact the coupon form before you will a contact form. As long as the tab order matches, you’re fine, but you break the tab order, you create another issue.

>> AMBER: I think moving it above would solve a current tab order issue that exists right now. That’s one thing, like when you’re testing, you want to, I think sometimes people forget that the “mobile experience” for low vision users, if they’re zoomed in a lot, they’re getting mobile on a computer. A lot of developers maybe think, “Oh, I don’t need to worry about making my mobile keyboard accessible,” but if somebody zoomed in a lot, that’s what they’re getting. Usually when I test, I’ll look at the website at 200% and at 400% and just make sure that it functions, that nothing like goes off the screen or gets cut off, like that it reflows appropriately for mobile responsiveness, and then that the tab order, everything can work, receive tab focus that you’d expect and all that.

>> ALEX: Yep. Agreed.

>> AMBER: I wonder if we could go back to your other window where you’re logged in. We’re almost at time, but I wanted to look at just [inaudible] the settings.

>> ALEX: Yes. Okay. Logged in.

>> AMBER: Do you want to go look at products, maybe? One thing I just want to flag real quick is I would watch for your color contrast in the editor too.

>> ALEX: Here we are in Gutenberg. I don’t like to do these because I can’t tell when Gutenberg causes an issue and when it’s a plugin that does this. With that disclaimer out of the way. I know that’s your plugin because there’s a navigation element there.

>> DEREK: [laughs]

>> AMBER: Instead of navigation, I think these are tabs and they should just be called tabs with the tab list.

>> ALEX: Correct. I mean, it works.

>> AMBER: Yes, it’s where I’m hearing everything that is visually written out, so that’s good. It’s not missing anything. Cool. What about that quantity discount add button? Is that another modal?

>> ALEX: Sounds like it.

>> AMBER: It added something above the button.

>> ALEX: Oh, no. When you add above, those are always the most inaccessible because no one thinks to look above a button.

>> DEREK: Right. That makes sense.

>> ALEX: I would probably place focus on this somehow. Probably the first element of the addition.

>> AMBER: Is that a checkbox? Calculate quantities per line item? The only reason I ask is-

>> DEREK: I think so.

>> AMBER: -it visually looks round to me.

>> DEREK: I know. I’m noticing the same thing in that browser as well.

>> AMBER: Yes.

>> DEREK: It is a checkbox for me in my browser.

>> ALEX: Yes, that is a checkbox.

>> AMBER: There might be something. I would just look into if there’s something with Firefox because I expect that to be square. [chuckles]

>> DEREK: I would too. [laughs]

>> AMBER: There’s like weird stuff. We resolve– we, my partner, Steve, resolved a bug where only in Firefox, one of our buttons said like, “Submit Query”, but no other browsers, and we’re like, why? I don’t know why.

>> ALEX: Because Firefox is just Firefox, you know?

>> DEREK: [laughs]

>> AMBER: Yes, yes, yes. I don’t know. Sometimes browsers do weird things, but it’s worth kind of looking into it because a shape communicates something to people.

>> ALEX: I still stand my ground with saying that nothing is as bad as Mac voiceover, because that is like designing for Internet Explorer.

>> DEREK: [laughs]

>> AMBER: Yes. Well, there’s a reason why most screen reader users choose NVDA or JAWS over voiceover.

>> ALEX: It’s a real shame because voiceover could be a good thing. Anyway.

>> AMBER: Yes. [chuckles] Is there anything that would be good that we should address, Derek? Then I do have a question I want to pass on too. Anything else you want us to look at here in the admin? [crosstalk] admin, but.

>> DEREK: Yes, there’s general settings, but they’re going to be, I use almost the same code base as what you’re seeing right here for the product, so how the tables are laid out, that kind of stuff. It should be pretty darn near the same. All the same thing will have a left navigation that I did with a nav and you’re going to say that should be a tab and stuff like that. Yes, I don’t think there’s anything that’s much different than what we’ve seen here.

>> AMBER: Okay, cool. Alex, Melissa asks, or actually, I don’t know if this is a question for either one of you, but does this plugin only work for photos already created? What other plugins do you have? Melissa uses JAWS. I’m not 100% sure, Melissa, what exactly you’re referencing, so feel free to add extra context in the chat. I don’t know if you have any overall thoughts. It seems like it’s relatively, it’s like really usable compared to a lot of the plugins we’ve looked at. I don’t know if you have thoughts, Alex, for screen reader user.

>> ALEX: Oh, sure. Yes, it’s just the thing to remember is this is inside of people’s world, so you’re only going to be able to get so good here. I mean, besides following accessibility standards, that’s as close as you’re going to get.

>> AMBER: Yes. Sorry, Melissa, if that didn’t totally answer your question. Feel free to elaborate if you have something. Oh, Melissa is asking, can you create photos with this plugin?

>> DEREK: No.

>> AMBER: No, right?

>> DEREK: Yes, no. Again, this is like at a wedding or you’re taking family photos, stuff like that.

>> AMBER: To sell.

>> DEREK: Yes, to sell to your specific client and stuff.

>> AMBER: Alex, have you played around with any of the AI image generation tools? As a screen reader user, have you found them accessible at all?

>> ALEX: I haven’t, but ChatGPT’s entire interface is filled with a bunch of unlabeled buttons, so I’m not exactly an optimist in this space.

>> AMBER: [chuckles] Yes. I don’t know for a JAWS user what I would recommend on if you’re trying to find a plugin that would actually generate images for you to use in your content. I almost feel like if you were to do that, you’d want to take what it like, let’s say you use Midjourney to generate the images. You would want to then go stick it somewhere else and have AI describe it to you to make sure that you don’t have a different tool describe it to make sure that it doesn’t have something weird in it if you don’t have a sighted person checking the image.

>> ALEX: Oh, my gosh. Yep, the stories that could come from that.

>> AMBER: [chuckles] Well, just like people with like extra arms or something, right? We are pretty much at time. I really appreciate both of you and hopefully this was helpful. Derek, feel free to reach out to us if you have questions, and I appreciate all the effort that you’re putting in, are ready to try and make it accessible and that you’re going to take the feedback and do more.

>> DEREK: Yes, I appreciate this. I learned a lot and it’s great to see how other people use the same tool that you use in day in and day out. We saw just the quantity, label was backwards that I had this– I’ve coded this for two years and I didn’t even notice it because it’s a hidden thing that I didn’t see and it’s just– I learned a lot. I appreciate and I’m really glad that we did this time.

>> ALEX: Yes, as am I. We get to share some feedback and it’s not always that people want to hear my feedback as I’m not sure you can probably come to the conclusion of.

>> AMBER: Well, thanks, everybody. Thanks for attending. We’ll have the recording up in about two weeks, and good luck on your first day of your first day of your new job tomorrow, Alex, that’s fun.

>> DEREK: Yes. Congratulations, Alex.

>> ALEX: Yes, much appreciated.

>> AMBER: All right. Thanks, everyone.

>> DEREK: Bye.

>> AMBER: Bye.

>> DEREK: Bye.

>> ALEX: Bye.

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