Accessibility Show #1 - Mobile Menu Toggles ![rw-book-cover](https://i.ytimg.com/vi/xkKxZ1XWxlg/maxresdefault.jpg) ## Metadata - Author: [[WP Builds]] - Full Title: Accessibility Show #1 - Mobile Menu Toggles - Category: #articles - Document Note: In this week’s edition, we’re diving into "Accessibility Show #1 - Mobile Menu Toggles" from WP Builds, where we explore the often-ignored accessibility hurdles that mobile menus pose for users with disabilities. Join us as we uncover practical strategies to make navigation a breeze for everyone, reinforcing our commitment to inclusive design within the WordPress community. Plus, don’t miss our latest plugin recommendations and community highlights to keep your development skills sharp and your projects thriving! Here are the top 3 most important takeaways or to-dos based on your highlights and intent: 🌐 **Enhance Accessibility Awareness:** Investigate how mobile menu toggles affect website accessibility for users with disabilities, ensuring that my work promotes inclusive design practices within the WordPress community. 🔍 **Address Common Accessibility Challenges:** Identify prevalent accessibility issues related to mobile menus and explore actionable strategies to resolve these challenges, reinforcing my commitment to education and advocacy in open-source development. 🛠️ **Focus on Navigability for All Users:** Develop best practices for ensuring that mobile menu elements are fully accessible and navigable for keyboard and screen reader users, thus aligning my efforts with the goal of fostering an inclusive open-source environment. 1. What are the common accessibility issues related to mobile menu toggles that can hinder user navigation, especially for those using assistive technologies? 2. How can the design and implementation of mobile menus be improved to ensure they are fully accessible for both keyboard and screen reader users? 3. In what ways does the accessibility tree help developers identify and resolve potential accessibility problems in mobile menus? --- tags: [Accessibility, WebDevelopment, WordPress] Author: WP Builds Source: YouTube Reference: [Accessibility Show #1 - Mobile Menu Toggles](https://www.youtube.com/watch?v=xkKxZ1XWxlg) date created: 2024-09-10 12:00 --- # Title: Web Accessibility Expert Joe Dolson Demonstrates Mobile Menu Toggles ## Table of Contents: 1. [Introduction](#introduction) 2. [Key Issues with Mobile Menu Toggles](#key-issues-with-mobile-menu-toggles) 3. [Common Accessibility Problems](#common-accessibility-problems) 4. [Actionable Solutions for Developers](#actionable-solutions-for-developers) 5. [References](#references) 6. [Paraphrase](#paraphrase) 7. [Hypotheses](#hypotheses) 8. [Methodology](#methodology) 9. [Questions](#questions) 10. [Future Research](#future-research) 11. [Implications](#implications) 12. [Logical Validity](#logical-validity) 13. [Conclusion](#conclusion) ### References: - [WebAIM Million Website Study](https://webaim.org/projects/million/) - WP Builds Accessibility Show ## 📝 Summary: In the first episode of WP Builds' Accessibility Show, Joe Dolson delves into the accessibility challenges of mobile menu toggles. He demonstrates how common issues such as missing focus states, improper use of elements like divs for buttons, and lack of ARIA attributes affect users with disabilities. The session offers insights into how developers can resolve these problems, ensuring their websites are inclusive for keyboard and screen reader users. ## 📖 Main Content: Joe Dolson examines five different WordPress sites and highlights recurring accessibility problems in their mobile menus. These include improper labeling, missing keyboard navigation, and absent ARIA attributes. He provides practical solutions, stressing the importance of proper focus management, labeling, and button usage instead of divs. Dolson emphasizes that accessibility is not just about compliance but improving usability for all users, especially those with disabilities. ### 🗒️ Notes: - **Mobile Menu Accessibility** is crucial due to high usage of phones by people with disabilities. - **Missing Labels**: Many websites use visual elements like spans or divs for buttons, but fail to include accessible names or ARIA attributes. - **Keyboard Navigation**: Often, mobile menus are not keyboard navigable, leaving users reliant on pointing devices. - **Focus State Issues**: Lack of visible focus states makes navigation difficult for keyboard users. - **ARIA Attributes**: The use of ARIA attributes like `aria-expanded` can indicate whether the menu is open or closed, but this is often neglected. ## 📖 References: - [WebAIM Million Website Study](https://webaim.org/projects/million/) ## 🗣️ Paraphrase: 1. **Original**: "Mobile experience is crucial for people with disabilities because phones are cheaper than computers and the assistive technology on phones is just as good." **Paraphrase**: "For individuals with disabilities, mobile devices are often more accessible due to their affordability, and modern smartphones offer highly advanced assistive technology." 2. **Original**: "When a website's mobile menu lacks a proper focus state, keyboard users are left unsure of their navigation progress." **Paraphrase**: "Without visible focus indicators in mobile menus, keyboard users struggle to track where they are on the page, leading to a frustrating experience." ## 🧪 Hypotheses: - Websites with proper ARIA attributes in mobile menus will improve navigation for screen reader users. - Introducing visible focus states for keyboard users will reduce confusion and improve user satisfaction on mobile devices. ### 📊 Methodology: To test these hypotheses, conduct A/B testing on websites with and without accessible mobile menus, measuring user interaction metrics such as navigation time, error rates, and satisfaction levels. Data sources could include analytics tools and surveys from users with disabilities. ### ❓ Questions: - What are the most common accessibility barriers in mobile menu navigation? - How can developers ensure consistency in both visual and non-visual cues for accessibility? ### 🔮 Future Research: Further research could focus on automated tools for identifying mobile menu accessibility issues and creating standardized solutions for different types of websites. Exploring how different assistive technologies interact with mobile menus could also be valuable. ### 💡 Implications: Improving mobile menu accessibility has far-reaching benefits, not only for compliance but also for user retention and satisfaction. These improvements can foster greater inclusivity in web development, making digital spaces more accessible to everyone. ### ✅ Logical validity: - **Strong Reasoning**: Joe Dolson’s arguments are well-founded in evidence, such as the WebAIM Million Website Study, which highlights widespread accessibility issues. - **Logical Flow**: The progression of problems to solutions is clear, with actionable advice at each step. - **Fallacies**: No notable fallacies were present; Dolson remains focused on technical fixes without oversimplifying the issue. ## 🎯 Conclusion: Mobile menu accessibility is essential for inclusive web design. Developers should prioritize accessible navigation by ensuring proper use of ARIA attributes, adding focus states, and using the correct HTML elements for interactive features. This will enhance the user experience for everyone, particularly users with disabilities. Short Summary for [Accessibility Show #1 - Mobile Menu Toggles](https://www.youtube.com/watch?v=xkKxZ1XWxlg) by [Merlin](https://merlin.foyer.work/) Title: Web Accessibility Expert Joe Dolson Demonstrates Mobile Menu Toggles [00:07](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=7) Introduction to the Accessibility Show [02:50](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=170) Joe Dson is an accessibility consultant and core committer to WordPress. [07:18](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=438) Accessibility submissions look for unique design ideas. [09:39](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=579) Importance of optimizing mobile menu toggles for website accessibility [14:17](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=857) Accessibility for mobile keyboard users [16:43](https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=1003) Mobile menu toggle lacks accessible name [21:17](h - Document Tags: [[accessibility]] [[joe dolson]] [[wordpress]] - Summary: The video discusses the importance of accessibility in mobile menus on websites. It highlights common issues, such as menus that are not easily navigable for keyboard users or screen readers. The presenter demonstrates how to identify and fix these accessibility problems to create a better user experience. - URL: https://www.youtube.com/watch?v=xkKxZ1XWxlg&t=1s [Music] this episode of the wp bills podcast is brought to you by GoDaddy Pro the home of manage WordPress hosting that includes free domain SSL and 247 support bundle that with the Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place invoice clients and get 30% of new purchas purches find out more at go. mewp builds and by Blu host redefine your web hosting experience with Bluehost Cloud managed WordPress hosting that comes with lightning fast websites 100% Network uptime and 247 priority support with bluehouse Cloud the possibilities are out of this world experience it today at Blue host.com sloud and by omnisend do you sell your stuff online then meet omnisend yes that omnisend the email and SMS tool that helps you make 73 bucks for every dollar spent the one that's so good it's almost boring hate the excitement of roller coaster sales prefer a steady line going up try omnisend today at omnisend and by memberful building a membership website check out memberful memberful allows you to easily add gated content private member spaces payment collection and more to your WordPress website get started for free at member.com WP builds that's meem bf.com slw builds hello there I am joined by Joe Dolson today how are you doing Joe oh I'm doing great yourself yeah really good this is brand new uh Joe and I actually quite a while ago we were sitting together on a table in a restaurant outside of um well it was in word Camp Europe in Toro it was not that far from the venue and um we came up with the idea of this show so this is an experiment we're going to see how it goes we know I have no idea if the tech is going to work I've have no idea uh exactly what Joe's going to do what Joe's going to say but the premise of this show is to is to offer up an opportunity for Joe to demonstrate his expertise um Joe as you're about to find out is really into web accessibility which kind of Segways nicely for me to offer you an opportunity Joe just to tell us who you are so do you mind giving us your like elevator pitch who you are and so sure so uh my name is Joe dson I'm a website accessibility consultant and I also do plug-in development uh I'm a core committer to Wordpress so I've been working on accessibility in WordPress core for about oh let's just call it 12 or 13 years I don't feel like actually looking it up right now um it's too long to think about uh but I have focused my entire business since I started it in 2004 around the topic of website accessibility and so I've just got uh a pretty significant depth of experience in that area and so it's always an interesting thing to look at see what people have done see what people are doing well people are doing less well and just explore nice well so the the idea of this show in particular and we don't know if this format is going to be one that we stick with but we thought for this opening show we would go with the the premise of finding some websites out there and we'll demonstrate how we found those in a moment and then picking a thing so on each of those websites Joe is going to poke around f it around in real time and you'll get to see the the tools that he's using and so on so that might be useful but also you'll be able to just focus on this one particular topic now a few caveats the first thing to mention is that the websites that we have chosen uh have come from this place now you you may recognize this this is the WordPress showcase and if you've not been here before uh an easy way to find it is to go to wordpress.org showcase and and it's you know it's not particularly new but it's had a bit of a refresh of late and the intention of this website is to demonstrate websites which are using Wordpress which well I think it's fair to say represent good design let's go with that so they might not necessarily um be perfectly accessible but I I just want to point out at this opening juncture that the intention of this show is not to sort of cherry-pick things and and let's say mock them or poke holes in them the idea is really we needed a repository where we could reliably find WordPress websites and the idea would be for Joe to have an opportunity to pick some and then go through areas where they might need help so this isn't about naming and shaming or at least I hope that's the intention Joe right oh absolutely yeah I mean I think a big thing of what I want to be able to express from this is how common accessibility problems are um sometimes I worry that people have the general impression that you know most websites are basically accessible and you know if somebody is out picking out accessibility problems it's something that they've really hunted down and searched out and the reality is you know 97% of the top million websites have obvious automatically detectable accessibility issues uh this is a great study by web aim at web aim.org um that is the million website study and they they do an enormous amount of automated testing to look at websites and say yeah most websites have lots and lots and lots of problems so I just want to be able to look at a few things and say yeah this is common these are not this isn't something that a developer should be embarrassed about it's something a developer should look at and say I have a thing to learn um I could do this better yeah that's perfect that's a really nice way of framing it and if you were watching if you have the ability to watch what we're doing um I have just been scrolling through the video and really you can see that the the caliber of websites on this on this showcase it's pretty high you know there's some fairly heavy-hitting names out there so they've definitely cherry-picked some of the the bigger players in the WordPress space if you know what I mean it feels like a lot of this is Enterprise stuff but what's kind of interesting Joe I think one of the things that we should probably say right at the outset is it definitely feels as if it's opinionated upon design a lot of the things in here have really unique design and maybe that's um maybe that's the criteria I'm not entirely sure but it's certainly there's something there they all look fairly special fairly unique they're not made from a cookie cutting template I don't think yeah I do think a a significant part of what the team that reviews showcase submissions is looking for is unique design idea ideas something that's a little out of the box um and and that's definitely what they've got they you're not going to find a lot of you're not going to find very many WordPress core themes in here let me just have a little quick look here so uh we have things like category um and flavors and things like that uh and then we can sort as of this moment uh I could be wrong but as of this moment there doesn't appear to be a way to filter based upon accessibility you never know maybe that's something that's going to come in the future but it has been talked about um there is actually an open GitHub issue about adding that as a criteria and and flagging sites that are accessible but there's a pretty significant challenge in terms of the amount of time it takes to actually review that and and the reality is a full accessibility audit takes hours and hours and hours and we're not going to do that there's simply no way it's realistic to put that much time into assessing the accessibility of these submissions so that becomes a question of how much time is reasonable to decide that it meets some level accessibility which is not going to be considered any like qualified acceptance criteria for uh claiming accessibility you don't want to make a legal claim for a website hey this website meets all criteria and then they don't and that's awkward yeah so problem yeah I'll I'll I'll move that website the way and just to say this is not therefore sort of 101 in every single thing that you could possibly think about in terms of accessibility what Joe has decided to do is pick one thing and then show on a few websites using the tools that he's got available to him um that one thing over and over again and ways that it might be implemented on one site or a different site and so on so without further Ado I'm going to uh Joe's screen there and we've got one here uh on so your screen is divided into two parts we've got the inspector from chrome on the one side and we've got the the website which is called No Gucci uh this is from noi.org noi.org you can find the website there and what is under the microscope today Joe what is the thing that you're going to look at on everything we touch well the thing I decided to take a close look at here is mobile menu toggles um because ultimately the mobile experience is an incredibly prominent thing it's huge for people with disabilities because phones are cheaper than computers and the assist of technology and Screen readers available on phones is just as good so it's a great way to get around a website but of course that also means that for almost all Sites you're dealing with a collapsed mobile menu um and so I picked this because first of all it's a really significant issue for webs sites uh access to the menu is obviously a key thing to be able to get around the website even if every single page was perfectly accessible if you cannot operate the menu you're basically done the other reason I picked it is because literally the first six websites I looked at all had different ways of implementing this button and they all had some kind of a problem with it so it gives a lot of different things that I can illustrate they're different they're not the same problem uh and they're they're interesting so let's just dive in so this first one on noi.org I mean first of all this mobile menu obviously it has no visible label so my first question becomes what is in fact the label of this particular control and so I'm going to be looking at the inspector and I usually leave the accessibility attributes open and so you can see down here on the bottom that it has an ARA label that says open menu Mobile uh I that's reasonable it's a reasonable guess uh it is kind of an odd string of text really all this needs to say is menu uh because what it does and how it behaves is kind of a separate issue but it is labeled so it has a name that's great however what I also observe is that it's a link uh so it's it's a link with you know just a a blank address it's using the hash for an address M now what that potentially means is when it's activated uh it might move the focus if they haven't taken control over that uh because that hash Can it can be a reference it's just a blank reference on the page so it's going to move the focus to somewhere on the page and that's because of what links do links are fundamentally about moving you to a new location whereas buttons are about creating actions um this should be a button that would be more expected and more predictable um the other reason it should be a button is that buttons uh have different controls than a link buttons open using uh spacebar or enter and links only work on the enter key so if somebody is wanting to use a particular pattern if that's their habit it might not work now the next thing I would find here I'm going a tab into this and so I'm going to turn on something that will show you uh what I'm doing oops that's not the thing I wanted uh this is basically just a Tracker that keeps track of what key I'm pressing so that you can kind of tell what I'm doing even if things aren't visible so I'm going to tab in and try and find the button right now I'm on something that I can't see so I don't know what that is uh but I get to this menu button and it does have a focus and that's useful so let's open it so I just tried it with the space bar just to test whether they'd added an event that handled that space bar and it didn't work it just shifted the focus slightly um so that's annoying not great but it does work with the enter key now I can tab forward and see where I am and unfortunately now I'm not seeing anything so I have absolutely no idea where I am on the page um I'm going to try and escape this menu to see what I'm doing um but Escape doesn't close it so just to be clear these would be you're using uh tab space Escape these and in your case ENT this is the experience this is the normal right anybody who's using a keyboard will have if they're not using a screen reader okay now a screen reader is going to give you a bit more feedback um this is more the experience of somebody who cited and I'm doing that because in all honesty uh trying to do a audio recorded event live with a screen reader is challenging yeah yeah um and I don't want Nathan to have to spend the next month and a half in editing um so you're going to get the the keyboard but this is a real experience when people do navigate using a keyboard from a mobile device uh this is a very real thing that most people tend to ignore um and one of the keys about accessibility is that when somebody body says you know navigating with a keyboard on a mobile device uh the people tend to seize on the idea that that is a sole way of functioning and what we're talking about is the kind of mythical keyboard only user but that's not a real thing what is real is that people use a wide variety of mixes of interactive methods and the fact is whatever they are using at any given moment should work you shouldn't be obligated to switch switch from your keyboard to a pointing device because this control only works from a pointing device right right because when you're imagining a user like uh somebody who has very limited Mobility who's using uh you know a breath controlled puff and SIP device the effort to switch between one type of controller and another is extremely high that barrier is big they should be able to stay on what they're using as long as they possibly can H okay at any rate what we've just seen here is the the biggest problem here is that once you've activated this menu your location is lost you don't really know where you are um until you finally get to this close button but in the meantime I don't know what I'm doing and I don't know what will happen and I just hit enter on something uh I don't know what it was and I don't know what it did so honestly I have literally no idea what was going on with that menu it would require a fair amount of effort to explore it and find the real details n suffice it to say uh it's a challenge okay okay so I'm going to just go ahead and pop open another one so so again we're going to look at another website from the Showcase in this case by the way all of the links will be buried in the show notes uh which you can find at wp.com um this is cbec ubisoft.com that's the URL and uh okay off we go again oh this is much the same thing you know we've got another mobile menu toggle uh again it has no visible label so I'm immediately curious whether it has an accessible name uh and in this case it does not um in fact what this is is just it's a div um it has a couple of spans in it that are styled to look like lines so it's not even using a character that could conceivably have some kind of Unicode Unicode naming uh this is that's pretty much a bad sign uh the fact that it's a div and doesn't have any accessible name it means it basically doesn't exist for most uh screen reader users or keyboard users but let's just see what happens I'm going to go ahead and turn on the Pressed key monitor so that my keyboard navigation isn't completely an illusion okay I've got to focus on the business name and on jobs and then I have jumped into discover our culture so this as as pretty much I expected from the fact that it was a div without without any kind of tab index attribute I was unable to get to the menu so in this case uh this would be very difficult I do know that a very very experienced screen reader user by navigating using arrow keys and arrowing through the text might be able to get to that control and then activate it uh but the average user is simply not going to find this okay and in this case whether this control loses your focus or not is somewhat irrelevant because you can't get keyboard Focus to it in the first place there or there's no reasonable way you could worry about whether you're going to lose focus uh so this is always one of those issues in testing a website where I'm like because you have this problem I can't realistically test this other problem I'm going to warn you about it but there is no situation in which I can actually trigger it right right so I feel like that one you know it's pretty much a a quick summary of exactly what that is doing there's not a lot to say it doesn't work okay that was um that was quebec. ubisoft.com we're now going to design Museum spelled as you'd imagine. DK design museum. DK okay remove the inevitable cookie Banner yeah yeah here we go okay so this one uh it's the same presentation to start now we've got three lines this one's an SVG now an SVG is an element that can take a name uh this one does not however have one it would have required a title attribute uh a title element that could receive that name and some ARA so this is at least it's hypothetically more practical to name this one with just the element you've got there however I see that it looks like they have not uh and again this is a div so it's going to have an event attached to it it does not appear to have any keyboard Focus um and it does not appear to have any name this is a great thing in the inspector it can give you all of these accessibility properties so like from the name it's going to be using the accessibility tree to calculate what the accessible name of the element is it'll even tell you where it's from but this has no title No ARA label no ARA labeled by and no contained text so effectively it has has no name okay so that's a little frustrating I'll also note and I failed to mention this on the previous uh items that what this also isn't informing you about is whether or not it's open or closed right right um so when I open this menu in theory the control that you get to should have an ARA expanded attribute that indicates whether or not it's open or closed again since this control can't be reached using the keyboard it's a little bit irrelevant uh I will quickly test and see whether they've added any kind of handling to be able to get to it on this case I'm doubting it because I don't see a tab index attribute attribute and so it's fairly unlikely and indeed I see nothing at all happening on this website no uh there is oh I reached the skip to content link that comes into Focus but unfortunately it does not appear that anything else has a focus State on this page so there are clearly things that I can tab to so that's going to be a pretty frustrating experience for anybody trying to navigate using a keyboard I do have two more sites to take a look at okay do so let's go ahead and just take a look at those and see what we've got I'll quickly tell everybody what this one is I don't know how to pronounce it but I'm just going to say toui doart so it's spelled te t ui. art a and uh interesting and that one started off with some fun animation which uh uh that might have been fine I don't at the moment have prefers reduced motion turned on on my machine I turn that off and on pretty regularly because I'm in the process of testing so I don't know whether that was respecting it um animated text can be very strange for a screen reader uh I did review a site yesterday that had an animated H1 heading nested in a slider okay um so the the main heading of the page changed every few seconds which I will tell you that the screen reader I was working with found that to be a bit confusing yeah I'll bet okay but this menu at least I'm looking at it and it actually has a visible label so that's great that means if you're using like voice command you're going to activate this by saying something like uh you know click menu which is great if it's actually named that which is something to check and in fact it is not named menu oh okay um so here's where it gets a little bit interesting the so there's a there's a wick egg principle that's called label in name this does pass that um because the word that's visible is menu and the actual label is coming from this ARA label attribute that says open the menu the problem here of course is uh label in name just means it's present the way voice command frequently works is it's expecting the visible information to be at the beginning of the accessible name uh This is highly variable some voice command tools you have to speak the entire name so even you may not be able to see it but you need to use the entire thing so that can be a little bit frustrating when those don't match I would also argue that it's unnecessary um there are other ways of indicating whether or not you're going to be opening or closing that's where that ARA expanded attribute comes into play is that it tells you whether it's open or closed so you don't really need to use that in the name it's just part of the state of that control what I'm also noticing here is that this is another link element it's an anchor um this one does not have an ATF attribute so that does mean it's not going to trigger a strin shift in the page okay but it also means that you can't focus it with the keyboard okay because the anchor element is not a link the a element means this is an anchor if it has an atref attribute that means it's an anchor that points to somewhere and is there for a link if it does not have an HF attribute it's a Target it's something that a link can point to to yeah yeah that's usually done using an ID attribute uh however since it doesn't have an HF it actually is something that can't receive keyboard Focus so let's go ahead and turn on our pressed Keys again and just kind of dive in and see what we can do and I'm tabbing and I'm tabbing I'm not seeing any Focus now a lack of visible Focus doesn't necessarily mean that it's not there so what I'm going to do is I'm going to enable its focus state to see whether it has a focus State uh and it does not so in the Spectre what I just did is I selected the interactive element the anchor and I forced its focus State um but it didn't change anything so what I know from that is that in my tabbing I really truly did not reach this item which is what I expected since it doesn't have a tab index or an HF attribute so you can see that they've clearly made some effort to try and do some accessibility uh they have an ARA label they have visible text and nonetheless what you've ended up with is a menu toggle that cannot be accessed in any way so one more okay last but by no means least the last one this is Fabrica group. frr so f a BB r i c a group g r o u p all as one word. frr we had a fair bit of Animation going on there didn't we at the uh the page yeah this one was a little bit simpler it was pretty much all graphic animation and not text I'd generally be less concerned it's probably it's essentially a loading screen um and it was fast enough that it probably doesn't need to be expressed of course I'm on a pretty fast connection okay so here we go once again no visible label I will inspect that okay this one's actually a button nice okay this one has an ARA label that says menu great so that's a wonderful thing so now I'm expecting this I'm expecting this to work um I do not see an Arya expanded state right now um that's not necessarily evidence that it's not going to inform you this um it could be added only when it's active that would be that would be an error because right now it does not communicate to you whether that it's closed so re expanded equals false would tell you this is not currently expanded um so that's that's something I'm gambling is likely to end up being a problem so let's just tab through um see what we're doing here well that's that's a little disconcerting I tabbed to this Instagram link and to the title and I have skipped apparently the button now I know as a button it pretty much has to be focusable so what that probably means is it doesn't have a visible Focus state so I think I'm on it right now as the thing to the left of the title I'm correct I was now the lack of a focus state is going to be a problem obviously for cited people using a keyboard it's a little bit fusting it's a little unnerving to jump past things and without knowing that you did it so let's see what happens now that we're in the menu um I'm still navigating the header stuff so it's visible though so that's okay yeah okay honestly a problem uh but then the next thing I can see from the monitor of the current link that's down in the bottom left corner yeah that I am on a link to M marra so I think that I'm in the menu and where I'm supposed to be and the next one is TS so yeah in the menu But continuing I don't have a focus state so there's nothing here to that helps me easily see where I am I'm having to use a reference that's really fairly Technical and down in the far left corner uh particularly for somebody who's low vision you usually can't possibly see that piece of information uh so this would still be a somewhat frustrating experience however it's at least possible you can get to these things and the information is there this is going to be a much better experience for somebody who is using a screen reader um because those Focus issues won't be relevant though they will have a difficult time telling whether the menu is open or closed let's see if it closes with the Escape key it does not so in order to close out of this you do have to go backwards and find that close button again uh which since it's not doesn't have a focus State it's a little hard to say oh I just got lost uh what I I guess I just got lost and I'm not sure why that happened but shift tab did not take me through what I expected it to um I'm now wondering whether I was not actually in the menu and circumstantially also the same links that are on the page it is oh God that oh goodness wow what happened I did not like that um anyway so yeah in fact I was not in the menu at all it's just coincidentally the content on this page is the same as what would be in the menu let see oh I see right okay so yeah it seemed like I was but once I started to navigate around to try and leave the menu and discovered I was not in the right place I now knew I'm not actually here I'm somewhere else on the page okay so this is a menu that opened concealed the whole page but didn't place your focus into the menu itself what that probably means is that this menu is not in the Dom order where it appears the mobile menu is probably like tucked at the very end of the document object and then it just say made visible uh whereas the expectation when you toggle something and then tab is that that should be the next object in the document so it should actually be located right after the control that triggers it and then that Focus happens automatically there's no concerns nothing has to be done so anyway that was an example of just running through uh five sites they all have beautiful designs but they also all have mobile menu controls and mobile menus that exhibit some fairly significant problems um that are frankly quite readily solvable I think firstly I've just removed the screen so it's just me and you again uh Joe that was really interesting so ju firstly I will put all of the uh the links to the the Chrome extension that you used and the the five websites plus the Showcase itself I'll put those uh into the show notes so that they're nice and easy to find um I think maybe I've got an intuition about what we could do uh on the next one which might be to um might be to demonstrate a fine example of a mobile menu that might be a you know a nice light and shade kind of you know contrast between one and the other do it right yeah and um and demonstrate all of the different bits and pieces because we we probably spent what three minutes on packing each of those websites and I suspect we could probably spend 20 minutes or so on finding a really nice example of something which captures exactly what we just we're trying to see there does it in a in a really nice way so um I think that's a wrap for our first one hopefully that was useful um give you some intuition of ways that you can how to describe it mck up not correctly um configure your mobile menu and some of the pitfalls that you might fall into um is there anything else you wanted to add before I click the stop button Joe well I just want to thank people for watching and I hope that they found that useful yeah um and you know if you've made those mistakes it's okay you know people make mistakes and that's how we learn where can we reach out to you Joe if people want to actually communicate directly with you well you can find me on the WordPress slack at Joe doson you can find me on uh Twitter SLX as Joe doson you can find me on mastadon uh my handle is Joe doson yeah but which instance but in general uh Joe Dolson no spaces all lowercase is my username on pretty much everything and that's where you can find me my little trick when I'm using things like Google is to write the name of the person and then add a space and then just type WP and it always seems to then isolate it to the correct in this case Joe Dolson so that would be my J honestly a lot of Joe doson no okay yeah I'm I'm in that lucky band as well there's very few Nathan Wrigley as well well Joe thank you for sharing your insights today and um hopefully we'll catch up with you on another episode in the near future where we'll uh where we'll Rectify it and discuss the uh the ways that maybe it could be done air quotes better thank you so much Joe all righty thank you [Music], Accessibility Show #1 - Mobile Menu Toggles, WP Builds, 01j71jkpk2x1y8vh9ea0k6dx3k.