Video: Accessibility walkthrough of navigation menu block designs

Yesterday, @lukepettway was kind enough to sit down with me and walk through my and @melchoyce‘s initial ideas for a menu blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. design, in order to catch any areas that could be problematic from an accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) standpoint.

It was super helpful to talk through the design and find areas for improvement. There’s a lot of “talking through design” in this recording, which often doesn’t come as first nature to those of us who are visually-oriented (myself included). Luke pointed out that this is an excellent way to catch potential accessibility hurdles since it’s effectively how a screen reader works. 🤯 Revelation! In the future, I’m going to try talking through an interaction before opening my sketchbook, which I expect will be an interesting exercise.

Key takeaways

At this early stage, the most important things for us to keep in mind while working on this block:

  1. Ensure that the entire flow for a keyboard user is considered to better help track focus flow through the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..
  2. Ensure that the most-used controls are the easiest to access. For keyboard users, this means having them appear earlier in the UI flow. Avoid hiding important or commonly-used features in menus.
  3. Consider how best to handle hierarchy and menus-within-menus.
  4. How does a keyboard user move and reorder items within their menu?

Specific notes

  • Adding a notification to indicate that the menu block has been auto-populated may help non-sighted users understand what’s happened. This is an excellent example of universal design (where designing for all abilities makes for a better experience for everyone) since it’s likely to help sighted users better understand what’s happened as well.
  • Avoid automatically shifting focus unless the user has lost focus for some reason (e.g., when a popup opens and a scrim obscures the controls below that are used to open the popup.)
  • Jumping between the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and the content area could cause some cognitive friction, especially where a popover is already open. There may be ways to progressively reveal complexity in the block itself before moving things to the sidebar.
  • “Browse” may be unclear—try “bulk add” or alternate terminology.
  • It’s time to explore how users can control hierarchy and sub-menus from the block interface itself. How does a keyboard user select to edit a top-level menu item, versus opening the sub-menu beneath that item? Is there a better way to expose those two options? How many levels of hierarchy do we need to show in the block? Inquiring minds want to know.
  • Providing additional controls to move items within the menu is good. We may want to consider revealing those controls in the block itself so it can be more easily accessed.
  • The ellipsis/kebab menu for the individual menu items may not be in an ideal position in terms of flow for keyboard users. This one’s a bit tricky since it’s an established GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pattern, but we may be able to work within the block’s selected state to reveal more options in a way that makes more sense for users navigating through options with a keyboard.
  • “Nest underneath” could be a bit tricky to implement—we’ll need to work on how this would work in terms of the technical implementation.

Transcript

So, that should be recording. There we go. Alright, so I’m just gonna share my screen with you, and I’m sort of just gonna walk through what we have designed so far. It’s pretty rough, and the prototype is in Figma, which I’m still learning. So, I’m hoping that sort of walking through the different parts of the design will help to get an understanding of what we’re thinking in terms of the direction, and figure out where there may be some accessibility things that we can improve or things we need to look out for. Just sort of any notes that we should keep in mind at this early stage.

Alright.

Cool, okay. Let me share my screen. If you can hear that weird noise in the background, that’s my laundry machine getting really exciting.

Okay. Yeah, if you hear any weird noises, we actually are, our office is being renovated right now. So, there’s lot of hammering, and a lot of the hammering going on.

They’ve been building a house behind my flat, and so I’m so used to the sound of constructions. Okay, so that should work. Okay, so can you see my screen?

Yes, I can.

Alright, lovely. So, I’m going to start at the beginning, which is this. So, this is gonna be pretty visual because it’s… Well, that’s how we start. So, I’m just gonna walk through it. You add a block. You choose a navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site.. Terminology we may look into. And the idea here is that when you first add the block, it tries to auto-populate with the pages it thinks you’d like to have in your menu.

Okay.

So that it’s gonna be a bit less work. Now, the thinking of that will be contextual. I’m working on getting some data about that. So, if you add a menu in the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. of your page, it would maybe just pull up the top level pages on your site, but if you add one in the footer, it would pull up things like privacy policy pages. And if you add it in the post contents, then maybe it would have links like the headings of the page. Basically, it’s an attempt to sort of make it really easy so that the software builds you as close to what it thinks you want to the menu as possible.

Got it.

The hope is that you can then easily correct, and one of the things I’d like to talk to you about is sort of how this’ll work in keyboard navigation, which I’ve started to do some mock-ups for. But I think we should look at those sort of after we go through the overall flow here. But my hope is that here, I’m pointing at my screen. My hope is that here, once the menu’s created, you could, with the keyboard, easily delete all of these items by just hitting the backspace if you don’t want them.

Okay.

So, don’t end up with this huge menu that then you have to manually go and delete ’cause that’s a pain for everybody. So, yeah, basically the idea here is you would add a link by just clicking on the add button. I think that could also work if you start typing in there, then it would pull up this interface. This pulls up a search interface where you could also insert just a link. If you start searching, it will automatically pull up any content on your site that matches your search term.

Okay.

From here, we also want to make it so that you can create a new page if you need to, if you haven’t made the page that you’re looking for yet. We don’t have that part mocked up. And we’ve also, there’s a sort of advanced mode, which goes into here. I’m gonna go back for this. So, this is sort of the basic mode. So, you should be able to access everything from here. This is sort of the visual look at this, but we did think about how this’ll work with the keyboard. And I’m thinking that the focus would be different. So, it makes sense if you tap on the services that it would automatically add it. But obviously if you’re using a keyboard, that wouldn’t make sense.

Yes.

So, what I’d like to have happen is when you use a keyboard to tab through these results, it would sort of highlight with the focus, state the results, and then you’d have a little button that you could click apply on, or maybe you would hit enter. I’m not sure how that would be best done.

Okay, yeah. So, for a lot of these dropdown lists, I’ve seen it where you can tab to a first result, and then using the arrow keys will allow you to kinda go up and down the list of items. And then hitting enter will, I guess, select it or activate whatever the next functionality would be. Does that make sense?

Yeah, it’s a good approach for it. So, you tab into the list, and then use the up and down keys to navigate through the list, and then enter to apply.

Yes, and I think I’ve seen some too where the input, just using the arrow key as well, like the down arrow will jump into the results as well. It doesn’t have to just be tab. I think arrow key, which are someone… Other people may have different opinions on it. So, just grain of salt here, but using the arrow keys, I think, would be sufficient.

Okay, that sounds really doable. That’s helpful. I guess is there any part of this particular part of the interface that is cause for concern right now?

I mean, there’s a few things here and there. Why don’t we just walk through the… Is this the whole workflow right here? Is there anything left?

There’s so much more work–

Are there any other?

This would be the basics for just adding an item, but we have mocked up deleting an item and editing an item and rearranging items. There’s so much that goes into a menu, it’s bananas.

Yeah. This is probably one of the more complex ones too, right?

Yeah. It’s sort of surprising in the complexity ’cause it just sort of gets bigger and bigger. And people use menus for everything. We do have… So, one of the things that we did when were designing this to deal with that complexity is we started thinking about what is sort of the basic use cases. Like the use cases that the majority of users will have, and what are the really specialized use cases. And in the interests of sort of progressively revealing complexity, what we’ve done is we’ve put the basic interactions, the sort of coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. interactions that all users will need in the actual block interface itself. And we’ve moved some of the more complex interactions into the block inspector sidebar. Now, I know there are some concerns with navigating from the main–

Controversy.

Yeah. So, one of the ways I sort of tried to bridge that now is… So, this, where you see at the bottom it says, can’t find what you’re looking for, browse? That the intention behind that browse, and I can show you what we’re thinking, is that it will then jump you. And this doesn’t show focus ’cause it’s a mock-up. But it would then jump you too this sort of sidebar where you can have a more advanced add and remove functionality that would sort of allow you to browse through all your content and bulk add items.

Okay.

But the majority of users, I don’t think that’s going to be necessary. But I’ve seen users who have a hundred items in their menu, it’s absolutely wild.

Yeah, I’ve seen that too.

So, the aim here is that this provides sort of an alternate experience, but it’s not the core experience.

Okay.

And I’m really hoping one of the things we’d like to really fix is make that problem of it’s hard getting between the document inspector and the block itself, we’re trying to fix that, and I am optimistic that we will be able to.

Yeah, and I think that issue is kind of like it’s own separate issue. I think the team as a whole, we need to come to a consensus on. But as far as browse, I think the context of that is a little confusing because you’re already kinda searching for things, so what is the difference between searching and browsing, you know? If browsing jumps you to the, this sidebar block settings section. I don’t know, that could be a little bit disorienting for sure. For me even, just thinking about it. Okay, well, browse, I would expect some sort of dialogue to come up where I can browse even deeper, almost like a file system browser or something. Is there a better wording that could be used there, for example.

So, it’s–

It’s something that makes a little more sense as to what’s gonna happen.

I think you might be right. So, I think even calling it maybe an advanced add or a bulk add might be better. Now that I’m seeing it, I’ve actually starting to wonder should that, rather than that being in the sidebar, should that be in that sort of little popover interface instead? Would that be easier or harder?

Yeah, I’m not… Just thinking out loud here, but if you clicked browse, what would happen if the contents of this dialogue were to change into that editor so that you’re still in the same dialogue and maybe that’s where you can bulk add instead.

I think that may–

That would have some other implications too because now you’re changing the context of this open dialogue, but it’d be interesting for to kinda play around with that and see.

I think that’s definitely worth mocking up because even just me clicking that, I’m like oh that feels a bit disorienting. It’s not what I expect to happen. This is actually really helpful for me ’cause it’s been a few days since I’ve last looked at it. And so I can evaluate it with fresh eyes.

Yeah, I don’t know if having two options from that button like search for page, bulk add, and then based on that, it changes the context of this dialogue or maybe that option’s at the top and that’s the first thing you do. You can switch between which one you’re doing, and that alters the content below that button group. That might be something interesting to explore. But yeah, the main concern here is just that you’re already inside of this open floating element here, and just keeping track of the focus and where everything is in a way. Especially for some using the screen reader is really important.

Okay, I’m going to play around with that because I think that could be, I like it when usability concerns and accessibility concerns can be solved by the same problem rather than being competing. And it sounds like we may be able to make that a bit less jarring for everybody.

Yeah, ’cause what one of the things is I know that, I guess the general consensus from both an accessibility and a usability perspective is the sidebar really being about the additional settings that are rarely touched, but knowing the amount of sites I’ve worked on anecdotally, personally, just having to add a ton of menu items seems to be a pretty common thing that I’ve had to do too. Which would lend that to being something that shouldn’t be in the sidebar because it would appear to be like a core thing. And then we just… Some people, the way they perceive information structures and hierarchies to having… Even though they might not be bulk adding, they might be using that type of tree view to kind of visualize how their pages are being added to.

Yeah, that’s actually something I really want some data on because I’ve seen sketches of people, and I’ve seen people who say things like Squarespace has very much that model where it’s like a tree. And I talked to a guy who was like, yeah, I love this tree ’cause it matches how I think and how I plan my pages in my head.

Yeah.

Which I thought was really interesting. That’s sort of why we want to provide both this search interface and sort of the alternate ways so that if your brain prefers the sort of browse tree method, you can still use that.

If they were at the top of this dialogue, like some sort of control that allowed you to toggle between search and then list view of this, that could be interesting because then it kinda, the flow would be click the button that expands it, decide whether you wanna stay with searching or tree view. And then tabbing, navigating after that below that, then you have the actual main purpose of this which is either searching for the page or selected tree view that could benefit everyone using it ’cause you won’t have to move all around the page to change how you interact with this.

Yeah. Okay, I really like that.

I’m bike shedding now on this.

No, that’s really helpful. I’m gonna try a couple of alternate mock-ups with that ’cause that’s definitely something that feels a bit awkward. And I think we could improve it across the board. Cool. So, that’s adding an item. And then you would click on it, it would add it. There it is. This is gonna get progressively hairier, I just wanna warn you. So, the idea here is it adds it and it looks like this, which is sort of the selected state of the individual item within a menu. The cursor is there to indicate that you can edit the label that it applies. So, label it automatically applies is gonna be basically whatever the page title is. But you can use the cursor and the keyboard to edit that sort of the same way that the button does right now.

Okay.

You can also change what it links to kind of in the same way that the link or the button, I can’t remember which one it is now that you can change. But basically you can edit that link to bring that back up and search for something new. And we’ve also added very basic move controls here. There is a drag handle to drag the whole thing around, but in keeping with sort of the Gutenberg existing moving block mover thing.

Okay.

Would just had a move left and a move right on here. And we may end up wanting to simplify that a bit because the left and right isn’t exactly how the existing patterns in Gutenberg are. That’s sort of what we figured where the core things you would want to edit was a single menu item. I don’t have a mock-up for stuff underneath. I keep pointing at my screen. This is really terrible. I don’t have a mock-up for what would be under the ellipsis menu, but my thoughts would be like delete. Perhaps some more advanced move things. Now, this is another case where we’ve sort of built in advanced settings into the sidebar. Whoop, that did not do what I wanted it to. And I’m wondering now if that makes sense to have there, or if it makes sense to keep the focus in this area.

So, what does advanced settings go to when you click? Is that what’s in the sidebar right now?

Yes.

So, that on…

I told you this was where it’s gonna get hairier. The other thing we have sort of built into the sidebar is a more advanced reordering. Because attempting to deal with multiple levels of hierarchy and sort of all the complexity that comes along with really complex menus in this visual way and a space that may change has been a bit of a challenge. And so what we’ve done is we’ve added sort of an advanced level reordering into the sidebar here where you can see the items and you can sort of up and down move them like that. So, this would appear and you sort of get something a bit more similar to how blocks work in other contexts, but in your sidebar.

Okay.

I would love your thoughts on this ’cause I think–

Yeah, it’s a lot to get.

Part of the whole design and it’s probably the part we’re the least sure about.

Yeah, I mean, this is definitely a tricky problem. This is not a very common issue that most people are solving for. I guess I’m not sure how ’cause it’s hard to get a feel for how big the actual targetable area is for that thrag handle. I’m just making sure that there’s enough space for anyone with… Any sort of movement issues to be able to select that confidently and be able to control dragging it up and down. But I’m also thinking if you’re using just a keyboard, how would you move this up and down? Because before you had in the top level on the actual component up top, you had a control that you could press enter on, and it would go left. Or it would go right depending on where it is in the menu, but here, it doesn’t seem like you have that right now.

So, how does that currently work with this block mover? Thing sort of–

I don’t really have much experience with that. I’m assuming though there’s probably an active state where when it’s focused in some way. You could probably use the arrow piece to move it, but don’t take my word on that.

I think I’m gonna have to test this.

Yeah.

I think you’re right and there’s a way to sort of tab through each of the individual parts of that control. But it’s really helpful to talk through this because it makes me realize where all the holes are. And it’s really difficult talking through a design, so I really appreciate this.

Yeah, and even if there was like a, in the menu, a way to move up or move down, if that was just an explicit like move this up, then that would be helpful. But the risk here is that because you have the kebab menu on the right and then the handle on the left, it just kinda, everything’s kind of hidden right now as far as what you can do. I don’t know if there’s a way to present more controls with this or.

So, one of the things, I’m gonna see if I can navigate my way to it ’cause… Come on. There we go. So, this is one of the things we were looking into doing with this. And you can see I made up keyboard shortcuts that are probably terrible. But the idea was because people are going to, not everybody will need more than just up, down, left, right. But if you have a menu of a hundred things and you wanna move something to the start of the menu or the end of the menu, I don’t want somebody to have to press a button or use a keyboard shortcut a hundred times in order to get through that.

Yeah.

So, we’ve tried to sort of add more options here, and also add more complex things like, oh, you can take this services item and nest it under the about if you want to, for instance. Don’t remember if I have a mock-up for this. I do not. I do somewhere, but.

Well then that’s useful. So, say if you’re tabbing through these options and you press enter and that’s what expands them, so there are essentially a dropdown menu. Which is kind of funny ’cause you’re building a menu and the menu is a menu of the menus.

I know, right?

A menu inception. But just having that ability to either use a key command or just cycle through these options and move them to the start and to the end, that’s useful, and that does help a bit as far as moving things around.

Okay.

I guess then too if you’re doing that underneath or move to position, I’d be curious to see how that’s handle. Because someone who obviously can’t see the structure of it, I guess they have to rely on their mental model of where things are positionally.

So, I’m trying to see. Ooh, there we go. Okay.

Oh, there you go.

So, this is our concept for this.

Okay.

I knew it was in there somewhere. So, the idea is you would select nest underneath in whichever way you select it. And then you’d have a list of items that you could put things underneath.

Okay.

So, you would have to sort of drag in and do it visually. You could actually do it from here.

That’s interesting. Yeah, that could definitely work. I’m just thinking, as with most dropdowns, again, you’re cycling through, you tab from home to a box of services, then you use the arrow keys after you expand that to move down into nest underneath and then if you select that, that’s expanding somehow. I’m just thinking too from how this would actually be built from HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. what that would look like.

Right.

But I guess it would just expand and then you could arrow down to that, maybe. I don’t know.

So, I think if you selected the nest underneath part, would it make sense if the focus would immediately shift to the select box in there so that you could then sort of tab through home, services, whatever?

So, one of the things I’ve recently learned about shifting focus is that we really only want to do it whenever it’s lost. So, that’s why when you hide a dialogue, like a model or something come up because technically you get that, was it scrin or scrim? I forget the word, the backdrop. Technically you’ve lost focus.

Scrim.

Yeah, that’s why we wanna set it to some control on that whether it’s the close option or the control. More I’m sure the user would want to initiate. In this situation, we wouldn’t wanna do that. Because it may not actually want to have the focus go to that control. They may just wanna expand it to see what’s there and what happens and then, oh no, I don’t wanna do that.

And then close it.

Yeah, yeah.

Okay.

So, that sounds like it could be potentially tricky.

It could be tricky, and I’m just thinking developers building this too. This would normally be a list of options you select, and then I just don’t know how that would be. I’m sure you could do it, I just don’t know what that would actually look like as far as having this cyclable list of options that when you get to one of them, it expands. Where the rest of them, do they do that at all? I’m assuming the first two don’t, but what about move to position? Is that kinda the same idea?

Move to position is a similar idea, and I had mixed feelings about move to position. I stole it from TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. actually. All the work is basically stealing ’cause they do a similar thing, and I was like, well, we’re in the advanced mode. We can just put in as many options as possible so people can get what they need. If you try it in Trello, it’s basically you do move to position and then you actually put a number in there. So, if you wanted it to be the second position, you would put in two, and it would automatically move to two. So, my brain hates that idea. But I’m a designer. I’m reasonably visual brain.

Yeah.

And I’m curious if that would be valuable to people who have different mental models from mine, basically.

Yeah, I’m curious because it’s when you have four menu items, oh, okay, I want this to be two, but when you have 400. Hopefully, no one has a menu that. That’s a lie, a lot of people have menus that big.

They do.

Yeah, I don’t know. That’s another thing where usage statistics would be really useful because nest underneath and move to position, I feel like they almost accomplish the same thing, right? Other than nest underneath is putting it under something instead of between something.

Yeah.

So, I don’t know.

Okay, I think that’s something. So, for reference, my next plan was this is to start usability testing it to see if we’re sort of headed in the right direction.

Yeah.

So, there’s going to be I expect between community feedback and your feedback here and results of accessible or results of usability testing. We will have a lot of iteration. I already have a long list of things to consider changing. So, this is really helpful for this part. My overall understanding is that this is probably, this different ways of moving is probably useful to include, but we’ll need to be careful with how we actually implement it once we get to the coding stage.

Exactly because it’s interesting that you have the ability to move stuff this explicitly in the sidebar, but in the main controls, it’s only left or right. And I could see advantages to having that as a main control.

Yeah.

If that makes… But I don’t know how that would work because then you have this dropdown that now has a lot of power behind it, but then it’s also a dropdown. So, how do you make that a non-polluted control that’s hard for anyone to use? Or, wait, that wouldn’t be hard to use?

So, I think one thing we possibly could do if these more fine grained controls proved valuable to people is that we could try including them in the ellipsis menu. That happens when you select an item. Of course, I can’t select an item. So, this ellipsis menu here that I currently don’t have a mock-up for, we could put more fine grained move controls in there.

Yeah.

I don’t know if that would be better from an accessibility perspective or worse. Or different.

Yeah. I will say that kebab menu, ellipsis menu, whatever they’re right now. I always call them kebab ’cause they look like food, hamburger menu like anytime you get to use food in design, that’s awesome. It does look like a separate control because of that separator on that. But I’m assuming it’s in sort of like tab panel type thing right there where it’s split out? So, that could be a little confusing. Because I would assume that if I’m on services and I tab or do something to go to whatever the next focusable control is, I would assume it would go to the link. But the logical order of this would probably actually that additional options menu would be the first thing you would go to. And so thinking about that, it could be confusing because maybe you don’t realize there are these other controls right under this control you just expanded. So, think about how users would flow through that using a keyboard and what makes the most sense to be the first thing they interact with is important.

So, I’m wondering if it would be better where I have that advanced settings. And then again, I’m doing another totally change everything. And then it sort of jumps to this sidebar thing, it’s hard to… I wonder if it would make sense to have, to do something similar there where if you have the left and right settings, and then maybe that advanced button at the very bottom of the control would then show you more advanced controls, move, startup menu, move to end of menu. And that would all be in the actual interface itself, but it wouldn’t be revealed until you requested the more advanced options.

Yeah, that’s a potential way to solve that. Even just having a option for moving it, and it expands and you can choose which way you wanted to move it. Whether it’s left or right, or under a specific item. That could also be a good solution too.

Yeah, and then you can, I’m sorry, I’m just flipping through these like a crazy person. So, yeah, this is kind of what I mean. This advanced settings here. We could show the basic controls, which are your drag controls, your move left, your move right. And then if you wanted to show these more advanced granular move settings, this could potentially expand.

Yeah you could do it all.

And then you could navigate through those. And that might work better in terms of sort of the logical structure because it’s at the end of that list.

Okay.

I’m kind of talking through design, which I know is terrible and it’s really hard to explain things, which is why I keep pointing to my screen like a crazy person.

Yeah, no I get what you’re saying. This drops down, and then maybe you have more controls to say move to beginning or move to end. And I think the benefit there is too for sighted users. It’s easier to visualize where that’s going and the structure that you’re actually looking at it as. Because in the sidebar, it’s stacked, and that’s not really the way you’re perceiving it necessarily.

Yeah. I think–

Maybe on a mobile menu though, but. On desktop, maybe.

I don’t even wanna talk about mobiles. It gets so confusing.

I don’t either. Let’s not talk about it.

Part of the reason we’re sort of providing a lot of different ways to do the same thing is ’cause I think we’re gonna need them. But I’m thinking we can still have more advanced controls in the sidebar, but actually move more of these into the block interface itself so we don’t have as much jumping focus. And we can still give people sort of more options to control their content. By the way, I will follow up on this with a bunch more mock-ups.

No, that’s fine. I think this is great–

But it’s actually sort of visualize it.

Already, this is cool. Yeah. Could we go back to the very beginning really quick?

Yes.

‘Cause I didn’t know how much we were gonna have, and I think there were just a few things I wanted just to make sure I didn’t forget about. Okay, so we open the block controller. Then we say we want a navigation menu. So, one of the first things I think of is how do we convey to the user, like, okay well we’ve added all these top level pages. Do we need a way to let them know? Menu created with X items or? I mean I don’t know if there’s necessarily a value to that or not, but it could be interesting if I’m using a screen reader and I’d land on this control and there’s already a bunch of stuff in there, and I’m not sure what’s going on. Then we just, I don’t know, create a menu with top level menu items or something just to let them know, hey there’s a bunch of stuff here now.

So, I have a question about that, and that’s a great point. So, if you’re using a screen reader, I’ve tried to use a screen reader, and it’s so confusing. I think I need to do screen reader day once a month or something so that I could get used to it ’cause it’s very hard to test ’cause I can’t tell if it’s just me being incompetent or if it’s–

They can be really hard to use at first.

So hard.

If you don’t have any experience with one, yeah. They’re kind of a black box in some ways as far as what’s going on, and the way people actually use them, even though I use them enough to understand a lot of the key commands and how someone should use them, I don’t use it everyday. So, even I struggle sometimes with how the reality of someone using them on a day-to-day basis and what that’s really like.

I’m hoping–

Which is why it’s important to have testers who use them.

Yes, so that was actually something I would love to be able to do. I know Rian said she has a list of users with accessible devices, assisted devices who she’s contacted for testing in the past. And my hope is that we’ll be able to sort of tap into that list at some point. But that’s something we’ll be looking into ’cause I would really really love to see how people can actually. So, my question here was if I’m using a screen reader and I add a navigation menu, and it makes this thing that I’m pointing to on my screen. Will the screen reader read off the items in this list or?

It could do any number of things depending on how this is built.

Okay.

So, there are some blocks that when you do things in them, they’ll announce what happens. It’s not uncommon when you add something really complex to have this kind of… Usually, it’s called an announcer. And it’ll say like, created this or that. A lot of the times when you save a page or something like that, like an CMS or something like that, and you see the little toast notification at the top. For example, those are usually have an announcement that’ll happen. So, if you have a screen reader, it’ll say like page saved, for example. So, here it could say, something like created menu with five top level items or something. I’m not sure what the right verbosity level is or if that’s even really necessary. I’m just thinking out loud here that if I could… Visually, I can see that those things, it was added with these five things, but that might not be what I always expect. Maybe I’m expecting it to be the same, do you think I have to add stuff to. So, it could be useful to convey that.

I’m definitely leaning towards some sort of notification, in particularly if screen readers will read out whatever’s in a notification. And I think this is one of those things where we build it for the needs of all users would really benefit everybody, right? And it’s possible that, again, going through the prototype is really helpful because when I see this happen, it’s a lot, and I don’t exactly know what’s happened. And I built it, I should know what’s happened. So, I think a notification could be interesting to explore. I don’t know if there are existing patterns where creating a block triggers a notification. So, that’s sort of my only concern with doing that.

Yeah, and that’s fine. I’d be curious to ask some of the other more experienced accessibility folks what is your gut on this? Is this something that needs to be conveyed? Or is just plopping someone in this and having them tab through it enough? Will they understand what happened? Will it cause a negative experience if they don’t know that all of these things are being added into it? It may not. It may not be necessary, but it’s definitely something to at least raise an issue about just to think about it and relay that and think about it a little more.

I’m gonna explore what this would look like with some notifications just to see. And I like the created with five top level items. I don’t know what to call anything. Because that makes sense that you wouldn’t if you don’t see it, you wouldn’t immediately get a sense of how big the menu is that has been–

Yeah, it could also be that these are like a unordered list and as soon as you go into that list, it tells you list item, or list with five, what are there five? One, two, three, four, five. I can’t count today. List with five items and then you know that there are five things. So, maybe that’s enough context to a screen reader to say, hey, there’s five things here.

Okay. I’m really glad I’m recording this, by the way, because it means I’ll have notes to go back to. I didn’t think of doing it for my own benefit. That’s really helpful.

So, when you’re on the page, these are essentially dropdown buttons at this point? And so you’re going through them, and you click on them, and they expand and collapse with the control under them.

Yes.

Okay.

That’s the idea.

So, they’re not actually links, but they look like links. So, I don’t.

Yeah.

I don’t know if that’s something to think about. Is it gonna be confusing that they look like links, but when you click on them, they’re actually a button? It probably doesn’t matter, but I don’t know.

So, one of those things we actually went back and forth a whole bunch on was the styling of these in their unselected state. And I’ve sort of leaned towards this style in order to sort of have them as simple as possible, but also sort of replicate what they might look like on the front end. But it’s, I mean, maybe it would make sense even without an underline.

Yeah, I mean just being blue, I think that conveys, hey, it’s a link. It’s a basic link, but without the perception that if I click on this, I’m going somewhere, and I may not wanna click on it because I’m afraid it might navigate me to that page or something.

So, that gets really interesting once things full-site editing may become a thing at some point.

Yeah.

Very difficult to figure out how to contextualize this where this block would be pretty integral to full-site editing, but we don’t have that yet. We’ll know exactly where that would work. How does it work in the context of an inline link? Can you click an inline link from the block interface?

That’s a good question. I haven’t dug into those in awhile, but. I think, you’re talking about when you’re just doing like text adding, right? I think it gives you a little tool tip with a control to edit that link. But then there’s a way to follow it. There’s an alternative way, I think, to interact with it. Who’s going to be listening to this rolling their eyes like, this guy did not even test this out.

That’s okay. I have to check things all the time ’cause I don’t remember and things change. I try often to sort of borrow from other patterns that are existing in similar interfaces. So, the link in the button, I tend to go back to a lot. I’m thinking that we can sort of do some work once this is done to combine all these interfaces so that they’re not quite as different. But that’s a whole nother cuttle of fish.

Yeah, if I remember though, it’s like an editable thing. You can change where that link goes to. I don’t think it’ll actually take you away.

Yeah. We’ll have a look and see what’s done elsewhere, and we can explore maybe changing the styling a bit so that it doesn’t look like you’re going to be navigated to a different part of the site. Well, luckily that’s probably the easiest part to change.

Yeah. So, I know at this new level, one navs right now, right? This doesn’t account for what, yep. I knew this was coming. So, like about, obviously that little arrow probably indicates just something under it, right? There could be something under it about?

Let me see if I can–

About me, about you?

Yes, that is the idea. Now, somewhere in here I have, somewhere in here I have a mock-up of that. Oh wait, no, that’s not it. Oh, here we go. So, we should have got this far with it. And the idea of being this would appear when you tap on or select that down caret. We haven’t fully investigated whether it makes sense for people to be able to actually manipulate these sub-menu items in the same way that they can manipulate the top level ones. Because it starts to get very complex very quickly.

Yeah.

My suspicion is that we might be able to do one level, but I think anything more than one level would need to maybe move to a more advanced setting in the sidebar.

Yeah, and I think that’s definitely gonna be a big concern for a lot of the accessibility people too. It’s like that would seem to be something that would be important in terms of a primary workflow and moving that to the sidebar. I think it would just be, I think, a problem because of that.

One of the things I’m really hoping–

What else that you?

Sorry, oh, I was just saying I’m really hoping to get, I’m trying to get some data from wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ users mostly ’cause that’s the data I have access to. To figure out how many people are building really complex menus. So, how many people have multiple layers in their menu. Is doing two levels in the block interface going to be enough? But I currently don’t have that data.

The data would definitely be immensely useful, but I’m thinking too with this button, the arrow is what toggles the children. But then there’s also the interactive state of editing that top level lake. So, is it like you have two controls side by side where you focus about, and then that will expand the control for the drop? Or will expand the dropdown for about? Let you edit about and the text and the link and the advanced and all that cool stuff? And then the next thing is that arrow which toggles the children.

That was the thinking here. I would love your thoughts on that approach.

Yeah, because when I see an arrow like that, it makes me think about when you have a typical navigation, right? Like on a live working website where you click it and then it rotates. Like, cool, see access animation and now it’s pointing up until you go away from it. Though it may not be apparent that those are actually separate controls too. I mean, if you just think about someone using a mouse even, they may not even realize that’s it’s own thing you can click on. So, I’m just thinking how could this be built in a way that makes sense for visual people, and then when you’re keying through it. Obviously, if you’re using a keyboard and you can get focus on about and then the control after this, it’s a little more obvious. And given anytime you have an icon without tax, then that also means you need to have some sort of hidden screen or only tax, just something to provide a little context on what that’s doing. Show children of current menu item, or show children of about menu. Or yep, about when menu item or whatever. It gives us, I guess, a lot to think about how that would actually work.

So, I had a question about that, or I have a thought about that. If this is our selected block state here, would it make sense to have something in here that would then allow you to move into the child’s menu? Again, I’m talking through design, which is terrible.

No, that’s fine, it’s fine. Thinking about these things and how people work through them is a huge part of how we kept these accessibility issues because a lot of them happen at the idea phase before something’s even put into a wire frame or design. Because if it’s hard to talk about, sometimes it can be hard to use. And I know that’s not always the case. I’m probably making a bunch of logical fallacies here, but that’s generally the rule of thumb I try to follow. You should be able to explain it to some degree.

I feel like that would be an interesting design exercise if you started registering to talk through something, and it, I mean it kind of flows with how a screen reader works, right?

I’m just thinking I open this menu, I have… So, the about is the one with the dropdown, so I’m gonna use that as an example. So, I go to that, and then edit about, or edit about menu item settings or whatever. Open about menu item settings or maybe, say, press enter to expand about menu item settings. Something that let’s the user know by pressing the enter key, you get this dropdown with extra controls and settings that you can do. Maybe there’s a control in there that’s like edit children, but then what happens if you need to do this two or three levels down? Is there a limit on the amount of levels you can do, and what is the cognitive float on that? How do you get back from there, you know? Go back to parent? There’s a whole flow that has to be considered for going from that top level down. Down into the rabbit hole with the children of that parent. And then how much control do you have over each of those children? Can you reorder them in here? Yeah, there’s just a lot of considerations. I think I’m just adding more problems than solutions right now, so I apologize.

That’s okay. We were really short on problems to solve. I think this indicates that there’s a need for me to actually mock-up what happens in here rather than just being like, oh, yeah, there’s a fly-out menu and whatever. Which was definitely not my approach. It was a little. I think this warrants some mock-ups and some sort of thinking through that problem because I suspect that we should have support for at least the top layer of hierarchy in the actual block. And I think maybe working through that, I do think maybe if we have a setting in here for parent blocks that would then allow you to move into the next level of hierarchy. That may be a good way of solving it, but I’m gonna have to play around with that.

Yeah. I’m just trying to think of how I would work through this. If I knew that history was under about, and I wanted to edit something about history, would I know to go… How would I reason about going through this? Okay, I go to about ’cause I expect the history section to be under about. And then I navigate to that to about, but then how do I know how to get to the children? I don’t know. There’s just some, I’d have to think through that flow a little bit more to figure out what the optimal flow through that would be.

Could it be when you selected, there’s two options, one being edit about, and one being look at children. Look at children is the worst. Oh my god. Not look at children. We’re not building into this.

We’ll scratch that one off the list.

Open sub-menumight be better. So that you can have, basically when you select it, because it’s a parent item, you can either edit that item itself, or you can move into the sub-menu below it.

Yeah, I’m just trying to think how this would work. I’m a little stumped on this one. This is kind of a tricky. You could have two controls, I just don’t know if that really fixes the problem more so than just presents even more options. Now you’re having to go back and forth between these two settings. A lot of, if you’re really trying to work on this, all these pages under here and really fine tune it.

So, would it help if I sort of like noodled on this a bit and put together a couple, I have a couple of ideas to try. But I think I’d need to sort of play around with this a little bit.

Yeah, I think that’s fair.

What I could do is sort of play around with it a bit, and then maybe if I can share them with you and get your thoughts, that would be super helpful.

Okay, yeah. I’d appreciate that greatly. It’s definitely a tricky problem to solve. It’s not any… Yeah, if this is easy, everyone would be doing it, right? I mean, are there any other examples of places where this type of workflow exists? Even a bad one. It doesn’t even have to be good. I’d like to see how Wix and Squarespace, and all of these other competitors handle their navigation’s to kinda get a feel for what is out there and you know? Maybe not even the right way to do it, but if maybe they’re doing it the way that we kind of thought about, and then it doesn’t work and it’s terrible, then we can just avoid it.

I do have some competitor finalysis stuff on my muse that I did awhile ago. I will share those with you wherever they’re currently locate. They may be all over the place. ‘Cause I did look at that awhile ago, but I’m not sure how deeply I went into hierarchy. And if I remember correctly, it was a lot of non-visual ways of doing it.

Okay.

But yeah, I’m gonna send those to you along with some sort of updated mock-ups. I just realized we’re hitting the top of the hour.

Yeah, I got a meeting I’m off to in a minute as well. I’m more than welcome, or you’re more than welcome to send another invite to go over this a little bit more if there’s other stuff. Or if you think you have more than enough stuff on your plate, you could come back with a couple iterations of what we’ve already talked about.

I think that’ll be a good next step at this point. Again, there’s like lots of components going on in here. It’s helpful to sort of get some initial feedback, and I can see some places where we can sort of identify some improvements. So, yeah, I’m gonna work on some iterations. I will let you go. One question I had from some people is are there any resources that you would particularly point us to in terms of where we can learn more information and sort of get a better understanding of these kinds of things?

You mean accessibility issues in general?

Yes, so we’re very–

Oh yeah.

Impressed in being able to do this stuff better, but oftentimes it’s hard to know where to look.

If you have a list of maybe common questions or just the area that you want. If it’s more from a design standpoint or if it’s more from how the heck do screen readers really work. I have a ton of different resources, and any way to kinda hyper focus that on what is most pertinent to you in your day-to-day, I think that would be the most useful.

Okay. I will send you a message to follow-up on that.

Or I can just send you all the links. Mega list.

Also do a message.

Alright.

I really appreciate you going through this with me. It’s been super helpful, thank you so much. I will let you go, but I will follow-up.

Alright, thanks.

Alright, cheers.

Take care.

Bye.

#gutenberg, #menus