Testing FacetWP for Accessibility: Joyce Oshita & Chris Lane

As part of our commitment to giving back and sharing knowledge, we have partnered with the WordPress Foundation’s community team to run an official WordPress Meetup centered around building more accessible websites with WordPress. This post has a recap of our Meetup that took place on Monday, December 20th, 2021, and a video recording of the presentation.

About the Topic

During the WordPress Accessibility Meetup on December 20th, Joyce Oshita and Chris Lane, Accessibility Engineers at VMware, explored their lived experiences in blindness and web development respectively to uncover the mystery of digital accessibility. As part of this presentation, they evaluated FacetWP’s popular search plugin and discussed options with Matt Gibbs, the developer, to improve accessibility.

This meetup is the first in a series where we provide live feedback to WordPress plugin and theme developers. Our goal with these meetups is to provide useful feedback to developers so they can improve the accessibility of their products and, in turn, all of the websites that use them. Want your product tested? Contact an organizer.

We also want to give a big shout-out to Matt and FacetWP for being the first brave volunteer for a live audit and for being interested in making his plugin more accessible! 👏 FacetWP is a great plugin and, overall, our testers were very impressed with its accessibility so far.

Thanks to Our Sponsors

WP Engine, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.

Leon Stafford, who sponsored the ASL Interpretation for this event, is a developer at Strattic opens a new window and creator of WP2Static. He also maintains the Accessible Minimalism theme for Hugo and is in the process of porting that to WordPress. He thinks accessibility is one of the most important goals of technology, but also one of the hardest to get developers and stakeholders to care about. He gives thanks to all the champions in the a11y space and for everyone just becoming aware of its importance.

Empire Caption Solutions strives to create inclusive experiences and engage individuals with different abilities and backgrounds by providing high-quality accessibility services for recorded media, such as closed captions, transcriptions, Audio Description, and ASL interpretation. By utilizing both the latest technology and human expertise, ECS is able to help its clients meet WCAG 2.1 success criteria and ADA compliance while offering options that fit almost any budget.

About the Meetup

The WordPress Accessibility Meetup is a global group of WordPress developers, designers, and users interested in building more accessible websites. The meetup meets twice per month for presentations on a variety of topics related to making WordPress websites that can be used by people of all abilities. Meetups are held on the 1st Thursday of the month at 10 AM Central/8 AM Pacific and on the 3rd Monday of the month at 7 PM Central/5 PM Pacific.

Learn more about the WordPress Accessibility Meetup Group.

Watch the Recording

If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter, or join our Facebook group for WordPress Accessibility.

Links Mentioned In This Video

The following resources were discussed or shared in the chat at this Meetup:

• WordPress Accessibility Facebook Group
• Accessibility Tools Survey
• Equalize Digital Email Newsletter
• WisleyBlind Website
• FacetWP Website
• “How to Make FacetWP Select Lists Accessible” on GitHub
• “Understanding Success Criterion 3.2.2.: On Input” from W3C
• FacetWP Help Center
• “Testing of aria-label” from Chris Lane
• “Accessible Name and Description Computation, 1.1 Success Criterion” from W3C
• Web Content Accessibility Guidelines (WCAG) 2.1
• “Horizontal Multi-Thumb Slider Example” from W3C
• Information on aria-live from W3C

Chat Transcript

We don’t always share the transcript from the Zoom live chat, however, there was a lot of great feedback shared during the presentation in the chat. If you’re interested in reading the chat transcript, expand the accordion below.

Article continued below.

Stay on top of web accessibility news and best practices.

Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.

Email(Required)

Name

First Last

Subscribe Consent(Required)

I opt-in to receive emails from Equalize Digital and have read the privacy policy.(Required)

Equalize Digital uses Zoho Campaigns. By entering your contact details, you acknowledge that your information will be transferred to Zoho for processing. Learn more about Zoho’s privacy practices.

Phone

This field is for validation purposes and should be left unchanged.

Read the Transcript

Amber Hinds 0:00
So we’re at 7:04. So I’m going to get started because I want to give as much time as possible to our speakers. So I’m going to run through real quick, we do some announcements at the beginning. If you’ve not heard yet or you’re new, I’d like to invite you to join our Facebook group. It is wordpress.accessibility. 

If you’re on Facebook, you can just look for WordPress Accessibility, it will come up. It’s a good way to connect in between Meetups and speak with people about — whether you have interesting articles you want to share, or if you are trying to solve a problem, or you want someone to test it, we have some really great users that are super experienced in there. Emma has just shared a link to it in the chat, that might make it easier for anyone who wants to find our Facebook group. 

And then, I’m still trying to promote our accessibility tools survey. So, we are trying — my goal is to get at least 200 people to take it. We’re trying to get information about how different organizations with WordPress websites, but there’s questions about non-WordPress as well, but I — really, our goal is WordPress websites, to find out how they are approaching accessibility tools and accessibility decisions and testing at their organization. So if you go to equalizedigital.com/survey, that should have been posted in the chat as well. Please go take it, please share it with your network. I think we’ve had about 75 people take it so far, which is awesome, but as I mentioned, our goal is about 200 people. 

If you’re interested in getting emails in between Meetups, we have a email newsletter that goes out biweekly. Our name for it is Focus State. So you can subscribe to that on our website and it has links to accessibility news, resources, events, so our events, but also other accessibility events that you can join from around the web. So if you’re interested in keeping up with what’s going on in accessibility, it’s a great resource. 

And then a quick comment on accessibility in general, of the Meetup and sponsorships, unfortunately, our ASL sponsor will not be continuing in January, so we are actively looking for a sponsor to cover the cost of interpretation because we really think it’s important to be able to do that, but as of right now, just a heads up, we may not have interpretation at our Meetups in January. I’m trying very hard to find them. If you know anyone who might be interested in sponsoring, please let me know. 

Who are we? Who am I? This person who’s talking to you, if you’ve never been here before, I am Amber Hinds. I’m the lead organizer for the Meetup. I’m the CEO of a company called Equalize Digital. We are a WordPress VIP agency that does custom website builds and does accessibility consulting, and we have a plugin for WordPress websites called Accessibility Checker that is a testing or auditing tool to help you test your websites or even your products for accessibility. You can find us at equalizedigital.com, or we’re on Twitter, and you can tweet us @equalizedigital. 

Amber Hinds 3:15
Our sponsors tonight, we have two. WP Engine is sponsoring our live captions, which is super important. If you’re not familiar with WP Engine, they are a WordPress technology company. They own both WP Engine, their first brand, and now Flywheel, which are both hosting platforms. They also are the owners of StudioPress and the Genesis Themes, so if you are — oh, and Local by WP, which is a tool that developers can use to develop locally and spin up WordPress sites. 

So we always like to encourage people to tweet a thank you to our sponsors. So if you have time, you can find them @wpengine on Twitter and just say, “Thank you for sponsoring the live captions for the accessibility Meetup,” because that helps to encourage them to want to continue. 

And then our ASL interpretation sponsor for this Meetup is Leon Stafford. Leon is a developer at Strattic, which is a headless WordPress hosting company, and he is the creator of WP2Static. He also maintains a theme for Hugo, which is a different CMS and he’s in the process of moving that over to WordPress. And he has very kindly been sponsoring our ASL interpretations and some of our live captions for the last four months, I want to say. So you can find him @ljsdotdev on Twitter. So please also tweet a thank you to him. I definitely know he sees them because he retweets them and he hearts them and stuff, so. So it’s been very generous of him to cover the cost of interpretation. 

So real quick, two upcoming events. In January, we are going to have Karl Groves, who’s of Tenon.i — Tenon. Sorry, his website is Tenon.io, and I started to move it into his name. Tenon, which was recently joined forces with Level Access. He will be talking about accessibility overlays and what — the reality of what they can do is, and what some of the things that they say they can do that maybe are less truthful or hopeful rather than reality. 

So that will be on Thursday– oh, I didn’t update my dates on my slides. Sorry guys. That will be the first Thursday of the month in January, which I believe is January 6th, and it will be at 8:00 AM Pacific, 10:00 AM Central in the US, if you are in my time zone, and we have a few other time zones listed on here. And then our Monday, which will be the third Monday, and I don’t know the dates on that one. Oh, January 17th. Thank you, Emma, for throwing that in the chat. 

So on Monday, January 17th, Carie Fisher will be talking about accessible typography. So how to choose fonts, spacing, line height, padding, how wide your columns can be, everything related to typography and making sure that your content is readable, which should be as applicable to a designer or a content creator as a developer as well. 

Amber Hinds 6:35
So, that brings me to today’s topic. I’m so excited about this, because it’s the first in a series that we’re hoping to do where we provide live testing and feedback to plugin and theme developers, because our goal is to be able to help them make their products more accessible, so that in turn all of the websites that use their products can become more accessible. 

It’s sort of our bottom-up approach to accessibility, I think. You know, making it easier for the users and business owners who maybe don’t even know what accessibility is or haven’t heard of it to have more accessible websites. 

So we have two main speakers. Then I’m also going to introduce the product that we’ll be talking about today. So I’m going to start with Joyce Oshita, who reached out to me. She’s attended some of our Meetups. You may have heard her introduce herself at a previous event. She’s a Certified Professional in Web Accessibility. Prior to blindness, she earned her degree from UC Berkeley’s Haas School of Business. She has been a consultant serving Fortune 500 clients and recently founded an independent resource and support group for people who are traveling through vision loss. She also has a WordPress blog called WiselyBlind, which is used to elevate voices of the blind community. 

Also, I think I failed to mention that Joyce works at VMware, so also from VMware today, we have Chris Lane, who’s also a Certified Professional in Web Accessibility. He has over 10 years of experience in the accessibility field. His technical skills include ARIA, React, Angular, and general front-end development, as well as connecting the accessible user experiences to code fixes. 

Chris has a deep understanding of the developer experience, the challenges of retrofitting accessibility issues when accessibility is not considered part of the initial design, and thanks to Chris, VMware’s accessibility team has a fully accessible tracking and reporting tool that he developed to help Joyce work better in their organization. 

So those will be our two main testers and speakers leading the conversation today. Then I’m really excited to introduce– I failed to put Matt’s information up here. I apologize, Matt. But the plugin that we will be focusing on today is FacetWP, which is one that we’ve used a bunch on client websites. It’s used on over 40,000 websites. I think that says “40 K” with a space users, but over 40,000 websites use this plugin. 

If you aren’t familiar with it, it’s definitely worth checking out. It helps you if you wanted to have advanced filtering or search, I know it works with WooCommerce, any sort of custom post types, a lot of different ways that you could imagine it. You can learn more about FacetWP at facetwp.com. 

So I am going to stop sharing my screen and I’m going to spotlight our speakers and let them take over. Just give me just one second. Joyce. Chris. Then let me also, before you begin real quick, just change out our interpreter. Oh, no. I think I might have accidentally booted Sarah from our — [laughs] I am good at technology only sometimes. Hopefully, she’ll rejoin. 

Chris Lane 10:37
You could’ve crashed this whole meeting, so I think you’re doing great.

Amber Hinds 10:41
I’m going to remove my spotlight and I’m going to let you all take over.

Joyce Oshita 10:46
Okay. Hi, I’m Joyce. Thanks, Amber for introducing us. Chris and I are here from — we work together at VMware, but prior to that, I was navigating assistive technology for over 10 years as a user. I was slowly going blind due to a degenerative eye condition. And one thing I found was when I transitioned from magnification and text-to-speech, and went to use screen readers full time, I realized a lot of things were blocked for me. I used to do a lot of transactions and things on the web and all of a sudden, those things were not available. 

And I kept thinking to myself, “I just want them to see through my eyes.” I’m so proud of Matt for coming on to actually let me show him that it’s hard as someone who does use assistive technology. Accessibility is not just about screen readers, but I can tell you since the web’s a visual interface and our interaction is non-visual, it’s probably the most complex to understand. I’m excited to be able to show it to you today and we’re going to go through a lot of things. I’m so happy to have Chris here with me. He is an excellent educator and I always love how he’s able to bring alive the topics and connect the people that we meet to solutions that can be implemented, so. Let me see, I’m going to share my screen here. 

Chris Lane 12:40
Joyce and I work together and I have a tendency to talk too much [crosstalk] 

Joyce Oshita 12:47
He gets excited.

Chris Lane 12:49
I do, but a lot of this is about her experience. Matt, if you we out of time, I’ll catch up with you and update you on things that didn’t get to you. 

Joyce Oshita 13:01
Okay, so I want to just show you. I’m actually part of this Meetup because as I was navigating vision loss my friend, Prasuna, and I just talked a lot about the different resources that I didn’t have and the information that I didn’t have, and we just thought someday we’ll start some kind of site to share the information that I had gained and the voices that have helped me through my own journey. This is a real super simple site and it’s simple partly because we couldn’t find a lot of accessible options. 

Automated Voice 13:37
Start here to discover the unique- 

Joyce Oshita 13:39
So I have some nice headings here. 

Automated Voice 13:41
The Journey Through Vision Loss: Finding a voice. WiselyBlind Blog heading level two. 

Joyce Oshita 13:45
Then I got to show you my alt text.

Automated Voice 13:47
The Journey Through Vision Loss: Finding a voice, 

Joyce Oshita 13:48
And then we’ll go straight into our —

Automated Voice 13:49
Support and Community heading level two. 

Joyce Oshita 13:51
If you guys get time, I would love for you to listen to the audio project which is the voices of just people navigating vision loss. 

Automated Voice 14:01
Wrapping to top. A rocky trail winds through a dense forest of bright green bushes and trees ahead. Text on image reads, “The Journey Through Vision Loss. Finding a Voice, Support, and Community.” Graphic. 

Joyce Oshita 14:10
That’s a long alt text but it’s just supposed to give a feel for what that picture is. Anyway, I just wanted to share that a little bit. And then, Matt, we’re going to go straight to your site. Well, I have the demo. Let’s go.

Automated Voice 14:27
Control two. Cars Demo | FacetWP. Cars Demo- 

Joyce Oshita 14:31
Okay, so we got a lot to cover here. 

Automated Voice 14:34
[inaudible] up arrow

Joyce Oshita 14:35
I have the Cars Demo up. What I’m going to do is I’m going to reload this page. I’m using JAWS. I’m gonna just reload this page. You will hear the page load. It will read the title tag for the page. Then it will begin giving information about links, regions, and then read the content from top to bottom, left to right. So let me just start this. 

Automated Voice 15:06
Control L, toolbar, address, and search bar enter. Cars Demo | FacetWP. Page has 9 headings and 28 links. Cars Demo | FacetWP, visited link graphic logo. Visited link Features, visited link Pricing, visited current page link Demos, link Add-ons, link Help Center, link My Account, visited link. Buy heading level one cars Demo when you click on BMW. All other facets refresh to show only relevant choices. 

Left parenth 143, right parenth check box not checked. Left parenth nine, right parenth check box not checked. Left parenth 114, right parenth check box, not checked. Left parenth 11, right parenth check box, not checked. Link Acura ILX from $27,750, MPG: 24 city 34 hwy Power: 201 hp 180 ft/lb. Link Acura MDX from $53,400 MPG: 19 city 26 hwy Power: 290 hp 267 ft/lb. Link Acura NSX from $157,500 MPG: 21 city 22 hwy Power: 573 hp 476 ft/lb. Link Acura RDX from $45,700 MPG: 22 city 28 hwy Power: 272 hp 280 ft/lb. Link one, link two, link three, link, link 70, link greater, greater combo [inaudible] right parenth heading level three, make, Acura, left parenth six, right parenth check box not checked. 

Automated Voice 16:25
Alfa Romeo, left parenth three, right parenth check box not checked. Audi, left parenth nine, right parenth check box not checked. BMW, left parenth 22, right parenth check box not checked. Buick, left parenth five, right parenth check box not checked. Cadillac left parenth six, right parenth check box not checked. Chevrolet, left parenth 14, right parenth check box not checked. Chrysler, left parenth two, right parenth check box not checked. Link see 27 more. 

Heading level three Driven Wheels, front wheel drive left parenth 108, right parenth check box not checked. All wheel drive left parenth 89, right parenth check box not checked. Rear wheel drive left parenth 61, right parenth check box not checked. Four-wheel drive left parenth 19, right parenth check box not checked. Heading level three price $14,730.00 left-right slider $255,700.00 left-right slider $14,730 – $255,730, reset button. Heading level two your site deserves the best filtering. Visited link demo, visited link buy, visited link graphic logo. 

Link My Account, Support, Sales, About Us. Link copyright 2021 FacetWP LLC. Link Teams of Use. X heading level three, vehicle type heading level three, make heading level three, driven wheels heading level three, base MSRP, MSRP. 

Joyce Oshita 17:30
Okay. [crosstalk] 

Chris Lane 17:33
I’m sorry. Okay, I’m going to try not to talk as much as I can. We heard some stuff about MSRP and stuff we can’t read here. I heard some stuff we didn’t see on the screen, it’s something I wanted to mention. There’s a flyout, looks like it found some flyout content. A screen reader can read everything and does read everything in the DOM. Unless you hide it with ARIA-hidden. She was reading the flyout content that isn’t visible. That is a- 

Automated Voice 18:10
Heading level three, driven wheels- 

Joyce Oshita 18:12
It’s this stuff right here. 

Automated Voice 18:14
Heading level three make, heading level three vehicle type. 

Joyce Oshita 18:18
Yeah. 

Chris Lane 18:19
Yeah, we could see it — it’s this flyout content. So ARIA-hidden equals true would just hide that. So it’s an easy fix. 

Joyce Oshita 18:28
Okay. 

Matt Gibbs 18:29
Hey, Joyce and Chris, this is Matt. So again, thank you so much for participating in this. As you know, I’m not super familiar with the accessibility world and that’s one of the reasons we’re here. I guess my first question is– I’m guessing JAWS is the application you’re using to basically scan the HTML and output as vocal. 

Joyce Oshita 18:55
As speech. 

Matt Gibbs 18:56
As speech. 

Chris Lane 18:56
All that’s happened right now is she’s done nothing. She hasn’t tried to read the page or anything. That was the automatic- Right, Joyce? It’s just reading- 

Joyce Oshita 19:03
Yeah, it just loads the page and reads it. 

Chris Lane 19:05
So when the page loads– yeah, JAWS will read from top to bottom, the [inaudible] 

Matt Gibbs 19:09
Okay, so when you get to the page, will it read the entire page or just your viewport? 

Chris Lane 19:13
It will if she doesn’t interrupt it. 

Joyce Oshita 19:15
Yeah. 

Chris Lane 19:16
So if she just goes there, hands away from the keyboard. 

Matt Gibbs 19:20
That’s a lot to hear. 

Joyce Oshita 19:23
Well, so typically — I guess, so let me just kinda go through what I would do. I would probably not have it read the whole page. I would get an idea of what’s on the page and then I would just start from the top. 

Automated Voice 19:37
Cars Demo | Facet- 

Joyce Oshita 19:39
What I would do first is kinda see “what are the headings on this page?” and I’m expecting the headings to provide sections. 

Automated Voice 19:48
Cars Demo, heading level one. 

Joyce Oshita 19:50
Okay. Cars Demo. 

Automated Voice 19:52
Make heading level three. 

Joyce Oshita 19:54
Make. 

Automated Voice 19:55
Driven wheels heading level three. 

Joyce Oshita 19:56
Driven wheels. 

Automated Voice 19:58
Price heading level three. 

Joyce Oshita 19:59
Price, just factors that I can filter with. 

Automated Voice 20:02
Your site deserves the best filtering, heading level two. 

Joyce Oshita 20:05
I actually thought this was kind of — Okay, so I guess there’s — This seems like the main topic of the page. 

Automated Voice 20:14
Visited link buy, visited link, graphic logo. 

Joyce Oshita 20:18
It seemed like the order seemed a little strange to me. 

Automated Voice 20:21
Vehicle type, heading level three. 

Joyce Oshita 20:23
And then here I have vehicle type. 

Automated Voice 20:25
Make heading level three. 

Joyce Oshita 20:26
Make. 

Automated Voice 20:27
Driven wheels, heading level three. MSRP, heading– 

Chris Lane 20:30
Visually hidden content again, so she’s actually now at the bottom, she’s reading content from the flyout, and that needs to be hidden from her technology as well.

Matt Gibbs 20:41
Yeah.

Automated Voice 20:41
[inaudible] to top, car —

Joyce Oshita 20:42
Okay. Alright. So then, I knew that there was a list of results and then there were some checkboxes, so probably filtering options, right? Let me just — The order on this page is not that clear to me. So what I’m going to do is just crawl down the page with the arrow key. 

Automated Voice 21:03
Cars Demo version– 

Joyce Oshita 21:04
Not ideal, but if it’s not clear I don’t want to miss anything. 

Automated Voice 21:09
Visited link, graphic logo. 

Joyce Oshita 21:11
I think Matt’s so brave for putting himself out here, so thank you. 

Automated Voice 21:16
Visited link, features. 

Joyce Oshita 21:18
Okay. Features. 

Automated Voice 21:19
Visited link, pricing. Visited current page link, Demos. Link add-ons. Link help center. 

Joyce Oshita 21:25
I’m just crawling down this page. 

Chris Lane 21:29
She’s moving, she’s just crawling, she’s just moving the screen reader’s cursor through each line in the DOM. 

Automated Voice 21:36
Visited link. Hide. Heading level one, Cars Demo. 

Joyce Oshita 21:42
Okay. 

Automated Voice 21:42
When you click on BMW, all other facets refresh to show only relevant choices. 

Joyce Oshita 21:46
Okay, so it read the line. I could actually just read by word. 

Automated Voice 21:51
Click on BMW, all other facets refresh to show only relevant choices. Left parenth 143, right parenth checkbox not checked. 

Joyce Oshita 22:04
Okay. Now, this, I have no idea what– 

Automated Voice 22:08
Left parenth nine, right parenth checkbox not checked. 

Joyce Oshita 22:10
There’s nine? 

Chris Lane 22:12
Yeah, that needs to be hidden again. So here — so Matt, see how she’s just hearing 143, right? 

Matt Gibbs 22:19
Yeah, so the actual images aren’t pulling up in JAWS. 

Chris Lane 22:23
So what we have — and I didn’t tell her. We looked at the page a few times. She’s actually been here a couple of times. Right? I think that a fresh user, if she had been– The first time was a more difficult experience to visit the page, but it’s mostly because the set-up content isn’t complete, really. She didn’t know what’s happening on the page. What — facets, how they really perform. 

But also, there’s some icons, Joyce. These numbers you’re hearing, parentheses, they’re quantities for each of the types of vehicles, you know, the counts of each type of vehicles that showed up in this current facet state. So we’ve got 143, it looks like there’s some kind of icon for a sports car. Also, the icons are kind of light. So light gray against white is a little dangerous. I’m not good at eyeballing the contrast. They’re a little light. But anyway, then we’ve got minivans, I think, and Jeep kind of things and then– Wait, no. There’s four classes of automobiles. Looks like trucks. 

Joyce Oshita 23:25
Matt, do you have icons there for the types of vehicles? 

Matt Gibbs 23:40
Yes. So that facet is vehicle type. So there’s car, minivan, SUV, and truck, and this is actually– So the plugin itself has certain out-of-the-box facet types. There’s checkboxes, radio buttons, drop-downs, so on and so forth. This one’s actually a radio facet but it’s been customized with JavaScript and with CSS to look like icons instead of as text, and in doing this I totally didn’t even realize that — 

Chris Lane 24:19
You almost nailed it, Matt. You almost nailed it. It just has a weird– I pasted all the details for you in the chat. Basically, ARIA-label is really strong, and then there’s also, I don’t want to go too deep, there’s an accessible name computation. An accessible name for a component can be drawn from its content but ARIA-label can override everything and basically you just have an ARIA-label that expresses quantity only. It’s just a small fix I pasted the details in the– It’s all in chat. I did these one by one. Easy fix for that. 

Joyce Oshita 24:59
Okay. Let’s keep going. 

Automated Voice 25:01
Left parenth 11, right parenth checkbox not checked. 

Joyce Oshita 25:03
Okay. Let me see — let me check some of these. Let me see if the checks work. 

Amber Hinds 25:09
I might chime in for a second real quick because Glen mentioned in the chat that the parentheses on the numbers is more about visual presentation and doesn’t really need to be pronounced because he’s hearing left parenth nine, parenth. I don’t know if you have an opinion on that. Would you hide those or keep those parentheses as being read out? 

Joyce Oshita 25:32
I think it’s fine to read out because it gives me– It’s not part of the title. It’s actually a quantity. Right? It’s pretty common. I hear that pretty common, because if it just said auto nine, right, then– 

Automated Voice 25:49
Left parenth 11, right checkbox not checked. 

Chris Lane 25:52
Parentheses have meaning to you, right? They’re expressing quantity. 

Joyce Oshita 25:58
Yes. 

Matt Gibbs 25:59
I think quantity is important but, in this case, would it make sense if that quantity was elaborated a little bit more, instead of left parentheses 143, right– Should it say 143 matches? Is there a way to make things easier? 

Chris Lane 26:16
We don’t have a lot of time but you can always dial in language and content like this regarding labels. The idea here– Okay, yeah so, and you could even decide that you don’t want– 

Joyce Oshita 26:29
I guess you could say 143 cars, 9 vans. 

Chris Lane 26:34
That’s what the icons mean, but I don’t think the parenths are much of an issue. It’s not an accessibility issue. 

Automated Voice 26:45
Left parenth 11, right parenth box not checked. 

Joyce Oshita 26:48
Okay. Let me check one of these. I’m going to check this one. 

Automated Voice 26:51
Space, Cars Demo | FacetWP. Left parenth 11, right parenth checkbox not checked. Cars Demo | FacetWP. 

Joyce Oshita 26:58
Okay, I think it reloaded. 

Automated Voice 27:01
Visited link, graphic logo. 

Joyce Oshita 27:04
Let me go back. 

Chris Lane 27:05
Yeah. So she has to kinda figure out– If the instructions were built out a little better– In the beginning of the call, I was alluding to telling Matt about how this kind of pattern where the whole page changes after checking a checkbox, could potentially violate a WCAG success criterion called on input. There’s some nuance here. 

And I think the cars example is fine because the nuance is between changing content or changing context, and I think we’re still in the cars context. But Matt, I am afraid of potential misuse of your plugin, right? It could be easy to stick a checkbox in here that kinda changes context. I’ll throw it all in chat. I just advise just possibly adding a help section about not misusing it. 

Joyce Oshita 28:09
I think one of the things that I had trouble with the checkbox, but let me go back, is that- 

Automated Voice 28:15
Visited link, pricing. Visited current page link, Demos. 

Joyce Oshita 28:17
-It’s I have to find where I was. 

Automated Voice 28:19
Link add-ons. Link my account. Visited link, buy. Heading level one, Cars Demo. When you click on VM, left parenth 143, right parenth checkbox not checked. Left parenth nine, right parenth checkbox not checked. Left parenth 114, right parenth checkbox not checked. Left parenth 11, right parenth checkbox checked. 

Joyce Oshita 28:36
That’s the one I checked. It’s just hard to keep track of that. 

Automated Voice 28:43
Link, Chevrolet Colorado. 

Joyce Oshita 28:44
Okay, so let’s see. 

Automated Voice 28:47
Link, Chevrolet Colorado. 

Joyce Oshita 28:48
This must be where– 

Automated Voice 28:50
From $31,700– 

Joyce Oshita 28:51
— where the list starts, the results start. Is that right, Matt? 

Matt Gibbs 28:58
I think so, yeah, and then right after that it would go to the Make on the side bar. 

Joyce Oshita 29:04
Oh. 

Matt Gibbs 29:07
So on the page –

Automated Voice 29:08
From $31,700, link Chevrolet Colorado. 

Matt Gibbs 29:12
So on the page at the very top, there’s the icons for the vehicle type. Right below that are the results. So there’s two columns, two rows of results. On the right-side bar, there’s a sort box, and then below that is a Make section where it has a list of different brand names of vehicles. 

Chris Lane 29:35
Matt, she doesn’t know where the search results are. We just need a heading there. I think that– 

Joyce Oshita 29:41
Yeah. That would help. 

Chris Lane 29:42
[Inaudible] results heading there. 

Automated Voice 29:43
Left parenth 11, right parenth checkbox. 

Joyce Oshita 29:45
This section right here is filtering the type, right? 

Matt Gibbs 29:51
Mhmm. 

Joyce Oshita 29:52
And then this next– 

Automated Voice 29:55
Link, Chevrolet Colorado. 

Joyce Oshita 29:56
If there could be a heading right above this that says “results” or “search results,” or whatever. 

Matt Gibbs 30:04
Okay. That would make a lot of sense here. 

Joyce Oshita 30:07
Okay, and then — 

Amber Hinds 30:08
Can I ask one question real quick? 

Joyce Oshita 30:10
Yeah, go ahead. 

Amber Hinds 30:12
Joyce, are you able, in JAWS, to turn on a visual focus? I don’t know that there’s focus states everywhere on this particular website. It may be fine because we don’t know where you are without listening, but if you could turn that on, it might help viewers. Is that a setting, or no? 

Joyce Oshita 30:31
I think actually have– 

Chris Lane 30:32
Visual focus, I want to avoid that term. Focus is– 

Amber Hinds 30:36
Focus state? 

Chris Lane 30:37
It’s actually not what’s happening when– It’s a complicated term but it’s not what’s happening when she moves that carrot. A focus happens for everyone when they press the tab key and that only goes to links and buttons, and stuff you can click on. 

Joyce Oshita 30:54
She’s just talking about JAWS. I actually think I have– 

Chris Lane 30:57
I know what she’s talking about. I just wanted to clear up the terminology. 

Joyce Oshita 31:01
Okay. 

David Middleton 31:02
Hi, David Middleton here, I’m a Senior Accessibility Consultant at Level Access. Amber, were you talking about the visible focus indicator, the rectangular box that would go around where the keyword focus is, to show the user where they are on the page? 

Amber Hinds 31:21
That’s what I was talking about, because I think that she’s highlighted a few actionable items and there isn’t a focus state visible. 

Joyce Oshita 31:28
Oh, let me tab to it. 

Automated Voice 31:28
Link, Chevrolet Colorado. 

Amber Hinds 31:31
Okay. I guess there is one. Okay. 

Joyce Oshita 31:34
If I tab to it, you’ll see it. 

Chris Lane 31:36
It’s easier with the screen reader off for that– Sorry, but that’s a great point. Thank you. 

Matt Gibbs 31:44
Hey Chris, I had a question for you about JAWS in general. When you’re navigating normally from one page to the next, I’m assuming JAWS has some sort of indicator that says, “Hey, you’re navigating to this page or that page.” Is that correct? 

Joyce Oshita 31:59
What do you mean by navigating to this page or that page? 

Matt Gibbs 32:02
If you click on a link, let’s say one of those cars on this page is clickable and you clicked it, and it takes you to a different page, hypothetically, would it– 

Joyce Oshita 32:11
Oh, the page would load. 

Matt Gibbs 32:12
Would it say to you a new page loaded? 

Chris Lane 32:15
First of all– I love to see the Level Access people. Yeah. I’m from there, too. The link semantically means navigation, and I know that’s kind of a blurred topic these days, you’ve got single-page apps, but a blind screen reader user, [inaudible] sort of navigation. It still semantically means navigation, [crosstalk] but with action. The user– 

Joyce Oshita 32:51
Matt, the question that you’re asking is would I know, and remember when we started and I loaded the page, and I heard the title of the tag, and then it started reading the page? The same thing would happen if I activate a link that opens a new page. 

Matt Gibbs 33:07
Okay. I guess my main question though is, on a page like this where there is no page refresh, where it’s all happening via AJAX, you click on a checkbox, the results load dynamically, how does that process– How is that different than when you normally click on a normal link? 

Joyce Oshita 33:30
Oh, okay. Well, I noticed that it seemed like the page did– Let’s see. 

Automated Voice 33:34
From $40,000 link, Chevrolet Colorado [inaudible] 

Chris Lane 33:37
Wait, can you rephrase that, Matt? I’m sorry. Say that again, what versus a normal link? I was too busy saying hi to Thomas. 

Matt Gibbs 33:43
Sure, so when you click on something via AJAX and it refreshes the page, will that- 

Chris Lane 33:48
Oh it doesn’t matter. That doesn’t matter. That’s what I was trying to say. Semantically, the user doesn’t care whether it’s from AJAX or not, right? So semantically, it still means navigation, but if you think the link is the wrong tool for the job, let’s say, no navigation happened here, then you switch it up with a button. 

It’s a subtle semantic thing and you know what, links have not been used correctly for a long time and we just accept it, right? It gets arbitrary between using a link and button. Anyway, I don’t want to derail the topic. 

David Middleton 34:23
Chris, I think what Matt’s asking is, it’s a single-page app, so you’re reloading a portion of the content within the page when a user clicks on a control. That’s the, on input, the WCAG rule there. You don’t want to change the context of the page without letting the user know. One of the things that you may– 

Chris Lane 34:49
I hear you. I sort of disagree though because I think that it’s not a change– Okay, it could– 

David Middleton 34:54
It is a change of context. [crosstalk] You have 143 cars and you filter, now you have 11 cars. 

Chris Lane 35:00
A filter is not a change in context, and I’m sorry, Dave. It’s also change of content, you can argue– [Automated voice in background] Matt, this is the technology– David– 

David Middleton 35:11
Can I finish my point? 

Chris Lane 35:12
You’re making my point for Matt. David, you’re making my point for Matt. This pattern, this — I opened up this talk — is questionable, you see, because of this content versus context thing, we see this, you have two accessibility people from the same company — We’re actually having a debate over this. If you don’t want to ever have this debate, you control this with a button and you don’t change things when checkboxes are selected. Basically, you let the user, all users queue up their facets– 

Joyce Oshita 35:47
Their criteria. 

Chris Lane 35:48
David, I’m sorry. Thank you very much, because that totally made my point. 

David Middleton 35:53
I was going to suggest using ARIA Live. 

Chris Lane 35:57
Judge content and I saw other cases where these facets could be greatly misused. You totally made my point, David. 

David Middleton 36:06

I was also going to suggest using ARIA-live because– 

Chris Lane 36:10
I don’t want to add that level of complexity. 

David Middleton 36:13
If you make a button that says filter results, that would fix all of this, because then the user would know that they’re changing something about the page. 

Joyce Oshita 36:24
Yeah. Exactly. 

Chris Lane 36:25
Matt, to David’s point, the more complex we get, if you insist on this interaction — so at Level Access, David, we have to create solutions, right? We have other tools in ARIA, but this is a controversial pattern you’re using, right? That’s why I’m warning against it, and I would say, David, I don’t know if you were there, I was actually asking him to make a help page in addition to talking about not doing this or not misusing his WordPress plugin, but– 

Amber Hinds 37:03
I’d be curious to know. This is something we’ve been doing when we build websites for clients with filters like this, because the reason why sighted users like the AJAX, is they don’t ever get in a scenario where they’ve chosen a bunch of combinations that return zero results. I’m curious– 

Chris Lane 37:22
We always optimize for the site. 

Amber Hinds 37:25
Can I just finish? Hold on, I was going to say something. I’m curious, Joyce, on your opinion on this. We’ve been doing something where we will have AJAX for sighted but at the top of the filters, we have a button that says enable accessibility mode. It’s a link with a button and it reloads the page with the parameter in the URL that then has all of those submit buttons and turns off AJAX. Would that be something that you would like or no? 

Joyce Oshita 37:55
Well, I guess a couple of things. It sounds like the experience would be better if there’s a button, but to be honest with you I hate that concept of enable accessibility mode. Because what does that mean? How do I know what that will do, and who is it accessible for? 

Amber Hinds 38:15
So would it be better if it just said, “Turn off live searching”? 

Joyce Oshita 38:19
Yeah, exactly. Yeah, say what it does instead of what you’re trying to achieve because, okay, it’s accessible, let’s make it accessible for someone deaf by turning on this mode. 

Amber Hinds 38:37
Very good point. Thank you. 

Matt Gibbs 38:39
David, can you talk about– 

Chris Lane 38:41
I think that would still put you in a bind. David, I’m going to call– I mean, you still would have one mode that violated on input. 

Matt Gibbs 38:54
I was curious about what exactly ARIA-live does. 

David Middleton 38:58
You put that on an element. To simplify it, I would definitely research it and learn about it before you start using it, but you would put that on an element such as the search results, the quantity of results that are returned to the user, and then as that element changes programmatically, it’s going to relay that back to the user. There’s two states —

Joyce Oshita 39:23
It’ll announce out.

David Middleton 39:24
Yeah, there’s two states. There’s polite and there’s assertive. Assertive will interrupt, polite will wait for a natural break. I’ve done these before, where I’ve put the quantity of the search results on an ARIA-live. Every time you filter, it will say there’s now 9 results, there’s 11 results, there’s 0 results, please review your selections and try again. It’s a way that, as the user is selecting those different filters, they’re getting the feedback that something on the page, their search results on the page, are being changed and they can select or deselect things to get the appropriate number that they want to save. 

Joyce Oshita 40:09
That solves– 

Chris Lane 40:09
I would say, in addition to that, ARIA-live happens after something. It’s triggered by events, and so basically, an element gets populated in the messaging. Actually, interrupts with the– Well, it gets queued in and potentially interrupts, depending on the setting, like David said, if it’s assertive or polite. I think you need to also tell the user how this is going to behave upfront before they start using it. It’s kind of done on this page, Joyce. Like I was trying to say earlier, the boilerplate content or the sample content, isn’t really fleshed out. Up there, at the very top of the page, it says, “If you click BMW then everything’s going to change.” Basically, it’s a more specific description of how this page is going to work. 

Joyce Oshita 40:58
Yeah, that’s true. 

Chris Lane 41:01
I like to have– I think instructions should be visible. You could make hard design choices and say that you can make the instructions invisible. 

David Middleton 41:14
I agree with the instructions. However, if you announce the number of searched results and as the user filters that it keeps telling you, “Hey, now there’s a 100 search results- 

Chris Lane 41:26
Yes, you’ll get it. 

David Middleton 41:27
-now there’s 11.” It becomes intuitive [crosstalk]. 

Joyce Oshita 41:29
I think part– No, well, actually, let me explain. Yeah, if you provide the information and it’s announcing out, but if I still need to go find where I was every time I select something, it’s still going to make the– The announcements don’t help that much. 

David Middleton 41:53
Right. That’s a user focus issue and paying attention to where you are, and leaving it in a place where you understand where you’re at and you’re not jumping to a different part of the page when you select something. 

Joyce Oshita 42:06
Right. What happens with this application is every time you check a button, check a– 

Automated Voice 42:12
Left parenth 114. Right parenth checkbox not checked. 

Joyce Oshita 42:15
Okay, I’m going to check this one. 

Chris Lane 42:17
I think it all goes back to on input. 

Automated Voice 42:19
Left parenth 114. Right parenth checkbox not checked. Cars demo | FacetWP 

Joyce Oshita 42:24
It takes me back to the top. 

David Middleton 42:28
Yeah, which is incorrect. 

Automated Voice 42:29
Visited linked graphic logo. 

Joyce Oshita 42:31
So that’s — to me, that’s the bigger problem, than announcing out the results. The ARIA-live announcement, it would– really adds a lot of complexity to the code. It does provide information. What’s more important is, can I control the content and control where I’m on the page? I want to be able to– 

Automated Voice 42:57
Visited link feature. Visited link, visited — Link add-ons.

Joyce Oshita 43:01
Let’s see. Let me see where I’m back. 

Automated Voice 43:03
Link my account. Visited link, buy. Heading level — When you click on BM– Left parenth 143. Right parenth checkbox not checked. 

Joyce Oshita 43:10
Okay. 

Automated Voice 43:11
Left parenth nine. Right parenth checkbox not checked. Left parenth 114. Right parenth checkbox checked. 

Joyce Oshita 43:16
Okay. That one’s checked, right? So, I just want to know that that was checked and that I’m still here. Then I could go down, use a heading and then go down to the results. 

Automated Voice 43:30
Left parenth 11. Right parenth– 

Joyce Oshita 43:32
I don’t need a whole lot of announcements, customer announcements. I need to have control over what’s happening on the page and control on how to get to the content. 

David Middleton 43:42
Right. And back to Chris’s original point about the complexity of ARIA-live, putting a button that says, “Filter results now,” gives you that — 

Joyce Oshita 43:52
Would solve a lot of that, yeah. 

David Middleton 43:53
— ability. Yes, you can select what you want. The challenge to that is, are you going to select something that has no results and do you want to go through the extra steps of picking and choosing, hoping that you get the right group of selections to get the list to show up? 

Chris Lane 44:13
There’s another distinction to me here. I think David and I, we both want you to achieve AA compliance here. That’s at a minimum, right? And then after that, then you can think usability, I guess, for the screen reader. I just don’t want your plugin to be misused, right? So, the car pages, I don’t think these are context changes when you select one of these, because we’re still in this cars context. I know Dave and I are going back and forth. You’re safer with a button. You’re safer with a button here. I think half the accessibility tester– People will make sites with this and they’ll get their sites potentially tested by accessibility companies, and some testers are going to flag on input, even when you think you’re not changing context, right? That’s why I was saying that your best defense for your plugin is to document, especially, accessibility decisions like this, which play in the nuance of WCAG when it offers it — on input, that I pasted in there. There’s a distinction between content and context. 

Joyce Oshita 45:30
So Matt, I bet your customers like the auto filtering, huh? 

Matt Gibbs 45:37
I was just about to say that. So one of the biggest benefits of faceted search versus normal filtering is that when you do click on an option, automatically all the other results narrow down as well. When you turn off the auto-refresh, I think David was hinting at that, when you turn that off, it is a lot more possible to show, we call them dead-end pages, just pages with no results. That’s one of the main goals of the plugin, just to avoid that. 

Chris Lane 46:16
This is why I brought it up at first, because I actually read that. I actually thought this was the main point of the plugin. 

Joyce Oshita 46:21
Yeah.

Chris Lane 46:22
That’s why — you did so much accessible, but we are on that precipice of potential violation with on input because it actually– It really explicitly caused a lot of checkboxes, but if you check them, you should not have a change in context. 

Joyce Oshita 46:40
Well, I wonder, Chris, why can’t he manage– If he could manage focus so I’m not continuously trying to find where I was? 

Chris Lane 46:49
It doesn’t matter with — the WCAG success criterion is basically saying that you can’t check a checkbox and change context. Regardless of live region usage or even moving focus. 

Joyce Oshita 47:09
But in some ways, we kinda talked about it, is it really changing context? I know that I- 

Chris Lane 47:15
I do not think it is. 

Joyce Oshita 47:16
-I don’t think so. I don’t think it is either. 

Chris Lane 47:18
We just had a debate over it, right? 

Joyce Oshita 47:20
Right, because we’re on the filtering cars page. 

Chris Lane 47:24
Yes, but what if I put in a checkbox here that said “boats”? And you just clicked it, and all of a sudden, bam, we’re in the boats page. I know it shouldn’t have been there but it’s really easy to make a checkbox change context here. Really easy. And it’s really easy for someone to misuse this plugin and do that and then make your plugin, give it a really bad reputation. So. [laughs] 

Joyce Oshita 47:47
Well, the plugin is going to filter results of a certain type. It’s not going to be– 

Chris Lane 47:53
Well, there’s another way to do this. I’m sorry. Then redo your plugin with tabs. Because tabs are expected for you to arrow through them and they’re expected to offer you different context. 

David Middleton 48:08
I will point out that the on input, it’s changing the context without the user’s awareness. So that’s where ARIA-live makes the user aware that there’s been a change of context. 

Chris Lane 48:21
Oh, that’s where instructions make them aware too. ARIA-live happens before — ARIA-live [crosstalk]. 

David Middleton 48:26
We want to try and be careful about how much audio we’re putting out to the screen reader. 

Chris Lane 48:30
ARIA-live is the biggest danger for audio going out to the screen, actually, I’m sorry, but at VMware, for example, and I’ve seen this live or heard it live, but you’ve got– ARIA-live is very dangerous to use. 

David Middleton 48:46
I agree. 

Chris Lane 48:47
Yeah, so, again, that’s why I’m trying to take that off the table for a plugin that’s going to go out to the world and potentially be misused. But if you [crosstalk]. 

Joyce Oshita 48:58
Okay, let’s keep going. Let’s keep going. 

Chris Lane 48:59
Unexpected, but David’s point is really good on on input. I’m sorry. So, if the user expects that behavior, we are good. Thank you, David. Thank you. 

Automated Voice 49:08
Driven wheels heading level three. All-wheel drive left parenth 47. Right parenth checkbox not checked. Front wheel drive left parenth 

Joyce Oshita 49:15
Actually, Matt, I wanted to show you the price. 

Automated Voice 49:19
Price heading level three. 

Joyce Oshita 49:22
What’s been really impressive about your plugin is it’s all keyboard-accessible. 

Chris Lane 49:28
Yeah, that’s what I was say– There, on the sighted keyboard– [crosstalk] sighted keyboard users could use this pretty well. 

Joyce Oshita 49:34
Okay. This is the only thing. Let’s see. On the price, I’m going to tap to this. [beep] 

Automated Voice 49:40
Left and right slider, 14,730.00 

Joyce Oshita 49:45
It’s just missing a label. This is one set of prices, and then- 

Automated Voice 49:49
Left and right slider 255,700. 

Joyce Oshita 49:53
-that’s another set of prices, right? It’s probably the min and max, right? 

Matt Gibbs 49:57
That’s correct. Yep. It’s a, a range slider. 

Joyce Oshita 50:01
So what’s missing here is– I think this is true in a lot of places, it’s just the label is missing, like minimum price, maximum price. 

Automated Voice 50:13
Left and right slider, 14,730.00. 

Joyce Oshita 50:17
Let me just try. Let me enter on this. 

Automated Voice 50:20
15,730.00. 

Joyce Oshita 50:23
So it’s really nice. I’m just using the right arrow and the left arrow- 

Automated Voice 50:27
16,700.00. 

Joyce Oshita 50:29
-and it’s increasing the value. 

Automated Voice 50:34
17,000, 18,730.00. 

Joyce Oshita 50:38
Okay, then I’m going to– 

Automated Voice 50:39
Enter. Left and right slider, 255,730.00. Enter. 254 — 253,730. 

Joyce Oshita 50:51
So it’s great in terms of keyboard but the context of– I don’t know what those are. That’s a pretty easy fix. 

Matt Gibbs 51:00
Yeah, that’s very helpful. 

Chris Lane 51:01
You’re just gonna need to throw some labels on the sliders, just like in the– It looks like you’ve been working with ARIA Working Group stuff. Have you seen their ARIA examples? Anyway —

Matt Gibbs 51:12
I’ve seen a few. Yeah, so long story short, [chuckles] oh boy, I don’t know how far back you want to go. So, the plugin was built back in 2013. 

Chris Lane 51:21
Oh, wow. 

Matt Gibbs 51:22
Long time, yeah. I actually started working on this full-time in 2015. But basically, it started out with, I just had this idea of, “Oh, you know what? Checkboxes are hard to style. It’d be so much easier if they were just divs and you can just add CSS to it, add background images to it, and make things so easy.” [chuckles] In hindsight, that was probably a mistake, as you can tell, for cases like this versus using just standard HTML elements. Years later– If you right click on those radio buttons there, and you inspect them, you’ll see that pretty much everything’s a div. Radio buttons, check boxes, several other facet types. So how we’re doing that is it’s basically just a div with a background image and styled in a way that’ll make it look like HTML form elements. 

Chris Lane 52:19
Yeah, I mean — The ARIA, I’m just saying you just need to add the ARIA label to the sliders. 

Matt Gibbs 52:23
Right. 

Chris Lane 52:24
That’s divs and ARIA. You just need to add the ARIA label. A real quick, that sort by– You know that sort by filter that’s up there? 

Matt Gibbs 52:31
Yes. 

Joyce Oshita 52:31

Yes. 

Chris Lane 52:33
That needs a label, right? I actually got upset when I saw the push option trying to act as a label. And you know what? That only works until she changes the option and then that option doesn’t label the form element, so not that. Don’t do that. Let me throw in– The easiest thing to do is just use the label element. You know? I mean you’re already using the simple select element, which I love. 

Matt Gibbs 53:04
I love your passion. 

Chris Lane 53:05
Huh? I just love that element. 

Automated Voice 53:07
Vehicle [crosstalk]. 

Joyce Oshita 53:08
Oh here. 

Automated Voice 53:10
Search tabs button menu. Toolbar, view site inform– Address and search bar edit, FacetWP.com. Logo. List with seven items. Features link. Features and benefits of- 

Joyce Oshita 53:24
I’m trying to find out where– 

Automated Voice 53:25
Cars demo heading level one. When you click on the [crosstalk]. 

Joyce Oshita 53:27
Where was the sort thing, Chris? 

Chris Lane 3:29
No, you can’t find it because it’s not labeled. [laughs] Now it says [inaudible] so there you go, Matt. She can’t find it. I just want you to throw in– I’m sorry, the sort by, the words, [inaudible]. 

Automated Voice 53:43
Cadillac [crosstalk] Chevrolet left parenth [inaudible] 

Joyce Oshita 53:48
Okay, we covered a lot of stuff. Amber, are there things in the chat that– I feel like we covered a lot of things that are all over the place. One of the things that was really apparent when we were talking to Matt earlier was just trying to connect user experiences with the WCAG guidelines and with the ARIA examples. That’s something that really would help everyone, just have a more reliable path to an accessible experience. I know that Chris probably shared some links there in the chat about that. I wanted to see if people on the call had questions about how to do that, how to get started with that. I think from– 

Amber Hinds 54:49
There was– 

Joyce Oshita 54:50
Go ahead. 

Amber Hinds 54:51
There was a question about does the back button work to load you through previous selections in the facet? And do you feel like that’s important, if you filter, to be able to hit back and go back to your prior filtered state? 

Joyce Oshita 55:09
Let me see if there’s– There’s no back. Is there a back button on here? 

Automated Voice 55:12
Reset button. 

Amber Hinds 55:13
No, sorry. The back button in the browser. 

Joyce Oshita 55:15
Oh. 

Amber Hinds 55:17
Does filtering maintain a browser history? 

Chris Lane 55:22
I don’t think that’s an accessibility question though. That’s really just, how should it work [chuckles] for everybody, question. 

Joyce Oshita 55:35
I don’t think I would think of doing that though, right? Most people wouldn’t do that, right? 

Automated Voice 55:40
Reset button. 

David Middleton 55:41
Yes, if it works poorly for everybody, it’s not an accessibility issue. 

Automated Voice 55:45

[inaudible] reset button. 

Joyce Oshita 55:47
Okay. Let me reset. 

>> Chris Lane 55:48
Wait, David. Actually, isn’t it worse? [laughs] If it works poorly for everybody, isn’t it worse? 

Automated Voice 55:54
FacetWP. Cars demo | FacetWP. 

David Middleton 55:56
Yeah. [laughs] It’s all that same experience. 

Automated Voice 56:00
[inaudible] left parenth nine, right parenth checkbox not checked. 

Joyce Oshita 56:03
So Matt, it’s a lot of stuff. Tell me what would help in terms of giving you some action items. I think the biggest one is just maybe some labeling, will be the first, right? 

Matt Gibbs 56:24
Yeah, I’ve got a lot of items for fixing labels, for the slider, for various other elements. For the sort box, there’s the– 

Chris Lane 56:36
I think the on input thing is your biggest problem. I think [crosstalk] 

Joyce Oshita 56:40
That’s a conceptual, yeah. 

Chris Lane 56:42
I brought up live regions, and I was mentioning that they’re dangerous, they’re dangerous when overused. You just need, you need to employ — provide instructions and live regions, or a combination of both that explains what’s going to happen when you check one of these checkboxes, so you don’t violate on input and your users don’t cause an unexpected change of context. Because we’re worried about an unexpected change of context here. I think, yeah, the whole main behavior of your plugin is your worry but this could be fixed with just telling the user what’s going to happen when they — 

Joyce Oshita 57:26
Yeah, exactly. And then just a few headings to maybe easily navigate between selecting the criteria and seeing the results. That’s one thing that’s kinda missing here. 

David Middleton 57:41
Chris —

Matt Gibbs 57:42
So we’ve been talking a lot about actual standards and adhering to them. I’m curious from you, Joyce, as to what would make your life easier in terms of browsing this page? Would something like a selection section make your life easier so you can easily see what you’ve already clicked and you can undo them? Are there other things we haven’t thought of? 

Joyce Oshita 58:08
The one thing, what we’ve just talked about, is really putting in sections that were meaningful here, so I would know, “Okay, here’s the area where I select option,” and that’s separated from, “Here’s where I see the results.” Now, what you’re saying is like a little summary of what’s been selected? That, actually, might be pretty nice, right? And actually, I think I’ve seen that. For me to know all the different factors that are selected, I have to go to all the different areas, right? 

Matt Gibbs 58:46
Exactly, yeah. 

Joyce Oshita 58:48
One little summary, that’s a great call out, Matt. One little section that says, “What I have selected.” 

Matt Gibbs 58:57
So, we do actually have that feature but for some idiotic reason, I didn’t add it to this page. I’m not sure why. 

Joyce Oshita 59:05
Because you wanted to get yelled at. [laughs] 

Chris Lane 59:08
Hey, probably you just wanted to save space, I bet. [chuckles] 

Joyce Oshita 59:12
It would be, maybe, search results right in the results area. Right under there might be the criteria that’s displaying. 

Chris Lane 59:21
I’ve been thinking about this a lot of the day, Joyce, though. It’s like the whole page is kind of a summary, because they summarize how many Acuras, how many Alfa Romeos. It’s just like a long summary but it’s not up at the top, right? The problem is– 

Joyce Oshita 59:36
Oh, yeah. 

Chris Lane 59:37
Well, the challenge for you, because there’s no heading, this is such a simple technical issue, but she– I’ve been watching her use this page and she has not been able to disassociate the content from the controls so much, just because of simple– 

Joyce Oshita 59:55
Headings. I need headings. I love headings. [chuckles] 

Amber Hinds 59:58
It’s almost like– this is I know a challenge because you allow people to build out their facets in their sidebars or on a page with short codes, right? There’s a lot of different ways that users can. It’s almost like, I think, you need to dynamically– Whatever the first facet group is, you need to have– so these are all H3s. There should be an H2 above them that’s like “filters.” Right? And then– So you could provide instruction which is telling users, “Hey, don’t forget to put an H2 above your–” [chuckles] but the reality is, is most people won’t read that or see that, or they won’t do it, so trying to figure out how could you dynamically do it, but only do it once. 

Then above the results, that’s easier for you to have an H2 and then theoretically, the title of each one of these is a heading three maybe, that’ll link up to the results page. I was curious, in this particular example, I think the order of the pages is that the icon filters that aren’t really labeled, but you can have the numbers up at the top, those appear in the DOM before the results. Then all the other filters appear after the results. 

Joyce Oshita 1:01:13
Yeah. 

Amber Hinds 1:01:14
Pretty sure, because it’s a sidebar that is after, and so– 

Chris Lane 1:01:19
Yeah, so that compounds it. I think you’re right. I think that compounds the whole, there’s lack of separation. Yeah, I think I see where you’re going. Basically, if all the checkboxes and stuff were grouped together, they’d act like a summary. [chuckles] 

Amber Hinds 1:01:34
I don’t know, and this is me having basic coding, would it be possible for all of those to be output together and then for you to somehow have a setting where they can say, “Use grid,” or, I don’t know, something like that to load certain elements above the results visually, but the order of them is actually below. I don’t know. I don’t know how that [crosstalk]. 

Chris Lane 1:02:03
There is ARIA for this that’s scary and I don’t know. I don’t know, David or anybody else, if you guys have experience with ARIA-flowto? There is ARIA that’s supposed to do this, but ARIA is just one part of the puzzle. There’s browsers and assistive technologies that have to also support a given ARIA property, but, yeah, I don’t– Trying to make an artificial order [crosstalk]. 

David Middleton 1:02:30
My concern would be keeping the reading order to make sense, because not everybody who uses a screen reader is completely visually impaired. You run into an issue there. You certainly can load them in the DOM in order and then reposition them with CSS, and get it that way. Again, reading order is really what my concern would be. 

Joyce Oshita 1:02:55
Yeah, I think, Amber, you called out having the selections. That did confuse me. There were selections at the top then there were some results, and then more selections, so I didn’t know the difference between the top selections and the bottom selections. 

Chris Lane 1:03:14
David brought up a point that, “Can I do this working with Joyce all the time?” [inaudible] there are sighted screen-reader users. There are partially sighted, or like we have a co-worker that just he does it for cognitive reasons. They’re seeing the visual order and the programmatic order together, and when they aren’t harmonized, it’s weird. 

Joyce Oshita 1:03:38
Yeah. 

Amber Hinds 1:03:39
I think too, adding those headings, at least in my opinion, I don’t know that they have to be visible. If you’re worried you’re going to add those, you’re going to release an update to the plugin and everybody’s going to be like, “Why do I now have these big H2s that I don’t want?” They could be screen reader only heading twos. It just barely impact the live site in a negative way for a sighted user, but it would [crosstalk]. 

Chris Lane 1:04:03
I just didn’t — see this where we get– This is where accessibility and design clash, because design is always like, “That’s ugly.” Then we’re like, “Is it really?” We’re there right now. 

Amber Hinds 1:04:14
It’s a weird thing, though, when you’ve got a plugin like this, with 40,000 sites on it, if he suddenly releases something that [crosstalk]. 

Chris Lane 1:04:22
It’s just kind of proving. You know what I mean? Like, “Okay, yes, but-” 

Matt Gibbs 1:04:30
Yeah, not gonna lie,  backwards compatibility can be a– 

David Middleton 1:04:34
If you think about the styling separate from the logical heading order, I think that helps. It’s certainly preferable to have, visually, the headers going from largest to smallest as you go from H1 to H6, but when you get into these little conflicts with the design team and, “How are we going to do this?” I think it’s more important that you’re making it as accessible and as usable for your broadest base of users, and certainly having a header that’s smaller in font size than it would normally be, but programmatically in H2. I think that would get your best benefit, if that really is a design consideration that’s– 

Chris Lane 1:05:23
Doesn’t Level Access have a best practice against that, David. Doesn’t Level Access have a best practice against that? 

David Middleton 1:05:29
Well, I’m fairly [crosstalk] for a while. 

Chris Lane 1:05:32
I’m pretty sure they do. 

David Middleton 1:05:34
Yeah, I’m still doing my onboarding there. I came along with Carl, who’s speaking in January, so I’m eager to hear him speak. 

Chris Lane 1:05:48
They have a best practice for that, so I’m sorry you didn’t read, but like, it’s — you’re trying to make the design team happy, but, someone will flag that for illogical heading order, and they’ll say that you’re trying to make a H1 visually appear as an H2, or H3 size. And all kinds of testers, all kinds of colleagues flagging that, [laughs] across many accessibility companies, and I know Level Access has a best practice for it too. 

Amber Hinds 1:06:26
Hey Joyce, one thing you didn’t touch on is how does the pagination work for you with being able to move through results? 

Joyce Oshita 1:06:33
Yeah, one thing here, I remember I just saw 1,2,3, 77 or something like that. 

Automated Voice 1:06:38
Left parenth, 9, right parenth, checkbox —

Joyce Oshita 1:06:39
I’ll just go look at that. [Automated voice reading rapidly] Okay, here’s the pages. I don’t know that these are pages. I kinda do, because I think- 

Automated Voice 1:06:57
Link two, link three 

Joyce Oshita 1:06:59
-they need to be labeled again, right?

Amber Hinds 1:07:04
So you’d want it to say something like, “Go to page two,” or something? Or, “Load page two of results.”? Something like that? 

Joyce Oshita 1:07:14
Yeah, I guess I have seen that, Go to page, and then– 

Automated Voice 1:07:20
Link three. 

Joyce Oshita 1:07:21
Or like– What do they say? Page two results, or? 

Automated Voice 1:07:26
Link two, link three. 

Amber Hinds 1:07:28
Or like, page 2 of 29? 

Joyce Oshita 1:07:29
Yes. 

Amber Hinds 1:07:30
Link page 3 of 29, that kind of thing? 

Automated Voice 1:07:32
Link greater greater. 

Joyce Oshita 1:07:33
Oh, greater greater. 

Automated Voice 1:07:34
Combo box, left parenth, oldest, right parenth. 

Joyce Oshita 1:07:37
Okay, here was the combo box. 

Automated Voice 1:07:39
Link greater greater. 

Joyce Oshita 1:07:40
What is this greater greater? 

Chris Lane 1:07:43
Oh, that’s a– 

Matt Gibbs 1:07:45
It’s to go to the [crosstalk] 

Chris Lane 1:07:46
Yeah, well, there you go. You don’t understand the name of the button. 

Joyce Oshita 1:07:50
What was that, Matt? 

Matt Gibbs 1:07:52
Oh, gosh. That’s a great question. [chuckling] It’s either go to the very last page or go to the next page. 

Joyce Oshita 1:07:59
Oh. 

Matt Gibbs 1:08:00
It definitely needs a better label. 

Joyce Oshita 1:08:02
Yeah. Most of the stuff on this is labeling. That would be the first part, and that’s not going to change any of the visuals. That would be a really great place to start and make a big impact. The changes that you’re going to consider to make visual, you got to be thoughtful about how to do that, because you’re impacting a lot of people. 

There’s no one answer that fits all, as you could hear from the conversation today, but just going in with that open-mindedness of, “How would someone navigate this with a screen reader? How would someone who might not understand the visual page, or the content, what kind of situations would they need to get supported?” 

Really, accessibility is not– The best way is not by looking at the guidelines and trying to checkbox all of those. It’s not going by a checklist, it’s trying to understand people. Once you do that, then your possibilities are endless. I’ll leave you with that, [laughs]. But I’m really proud of Matt for just being willing to open himself and the code up here in front of everyone to expose the problems, and to acknowledge that there are problems. I just wanted to thank you for that. 

Matt Gibbs 1:09:45
Oh, thank you all. You’re the ones being generous with your time and showing ways to improve, not just for you all, but for everyone who needs these accessibility adjustments. I’ll do my part to get these things fixed and hopefully it will make life a little better for those that need it. 

Joyce Oshita 1:10:09
That would be great. 

Chris Lane 1:10:11
I think you did great, Matt. You started this a long time ago and you just read a little ARIA. You didn’t even look at WCAG. To Joyce’s point about connecting the standard to the user, and it’s a long read, but actually, WCAG, I think, does that. They have these sections called perceivable– Sections of perceivable, operable, understandable and robust. 

This all, just when you look through them, just even in the side bar and the table of contents, it all just, like, “Oh, that’s just something that impacts the user.” It’s all user-friendly language. It’s just a long read. That spec is just what we’re trying to achieve. It doesn’t talk about the technology, it doesn’t get into AJAX, JavaScript. It doesn’t get into that, it just says what is expected of technology for it to be accessible. 

Joyce Oshita 1:11:05
Yeah. 

Chris Lane 1:11:07
Great job, everyone. David, thank you for all of your commentary, too. Really helped. 

David Middleton 1:11:12
Sure, yeah. Just proves that sometimes you can split hairs on this stuff. [laughter] 

Amber Hinds 1:11:18
I think we might need to have David give a talk in the future. [laughs] 

David Middleton 1:11:23
Sure. 

Amber Hinds 1:11:24
I was like, “Oh, I should spotlight you,” but you didn’t have your video on, so I can’t do this. [laughs] 

David Middleton 1:11:30
Yeah, I was just finishing up dinner. Unless you want to see a dinner plate in front of me. [laughter] 

Amber Hinds 1:11:36
Yeah. Thank you again to our amazing speakers and everyone who has participated in the conversation. We’ve also had some really great conversation in the chat. Just as a quick– Actually, do you mind stop sharing your screen, Joyce, because it makes our interpreter a little bit bigger, in case we have anyone watching the sign language. There you go. Awesome. We will work on getting corrected captions for this and then we’ll have the video up. I will pull the chat transcript and we’ll put the chat transcript up as well, because I think that will be helpful for everyone, because there was so much great conversation in there. 

As a quick reminder, our next Meetup is on January 6th. It’s going to be at 8:00 AM Pacific, 10:00 AM Central in the US and it will be Karl Groves speaking about accessibility overlays and the realities and fantasies, maybe, of accessibility overlays. If anyone needs anything in-between then, feel free to reach out to me. If you know anyone who might be interested in sponsoring, as I mentioned, we currently do not have an ASL interpretation sponsor for beginning in January and we’d love to be able to maintain it. 

You can email me, I’m amber@equalizedigital.com, or you can reach out on the Meetup group if you have any ideas about who I can contact, or if your company might be interested in sponsoring. Thanks so much everybody and I hope everyone has a great night. 

Joyce Oshita 1:13:05
Thank you. 

Matt Gibbs 1:13:06
Thanks, you too. 

David Middleton 1:13:06
Thanks. 

Joyce Oshita 1:13:07
Thank you all for joining. 

David Middleton 1:13:10
Sure.