This is a summary of a Hallway Hangout that was wrangled in the #fse-outreach-experiment and #accessibility channels as part of the FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing.

Attendees:

@alexstine @joedolson @richtabor @annezazu @poena @joen @jerryj @sergey @afercia @queerdevperson

Video Recording:

Notes/Links:

Overall demos

To start, we did a brief round of intros for @alexstine and @joedolson before deciding to dive into the actually content to give more time to the topic. Overall, the following demos were done with a screen reader, each marked in the YouTube video with chapters:

• Manage the 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..
• Edit 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. to add Site Logo. 
• Using the Command Palette. 

Overall discussions

Outside of that, two discussions broke out in between demos around the following:

• Use of inert for disabled blocks with a broader discussion ongoing in GitHub.
• The number of different modes, along with the usefulness of List View combined with focus mode, and the ways in which edit and navigation mode weren’t created at a time when nested blocks existed. A broader discussion is underway around providing a focused mode for any container block.

Balancing verbosity

Throughout the discussion, there were different mentions of too much verbosity, like upon entering Site View of the Site Editor, compared to moments where there’s a lack of information, like upon selecting the navigation 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.. On the flip side, with the Command Palette, what’s announced is incorrect information!

On the discussions of different modes

@alexstine doesn’t like the different modes and finds List View is easier to work with partially because you don’t know where to navigate around in the canvas otherwise with the keyboard. It’s very unpredictable what direction you will be traveling based on what you select. Right now, we’re in a situation where we have too many ways to move around: arrow keys in the canvas, have an edit mode, have a navigation mode, have list view. Can we consolidate? @afercia added context that edit and navigation mode were done when there were no inner blocks. It was a way to simplify navigation between blocks but the structure of the blocks was way simpler. This led to a broader discussion around showing List View for individual blocks, similar to what’s been done with the Navigation block, where you can only see the “tree” of that specific block with the inner blocks. @joen jumped in to talk about design explorations on exactly that where you can use a “focus mode” to zoom in on just that part of the page and have List View for just that part of the system.

Manage navigation menu demo

From the demo, here are a running list of notes in order:

• Wasn’t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes.
• It was hard to know what would trigger editing.
• Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit.
• @alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments.
• @alexstine demoed how one can select the navigation block but it’s not clear how to act upon it without knowing how to get to the toolbar view. Keyboard users don’t know that pressing right arrow key would lead to what you need. 
• Detaching page list is a confusing to understand and is required before you can edit the links– can we update the language? The language is hard to understand in general and also impacts synced patterns currently.
• After detaching and editing, the navigation block still doesn’t give a lot of information.
  • There’s not a way to get more information about the current link you’re working on (what the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org is, where it’s pointing to, etc). 
  • Information is more limited here and it’s assuming pre-existing knowledge about the menu. 
• Open up the panel to save but it doesn’t say what’s in there when you first enter. It would be nice to have more info upon entering the Save section rather than going through each section to learn more.
• Discard changes is confusing and relates to this larger known issue.
• If you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
• Back button in Site View doesn’t have context around what you’re going back to. 

Changing Site Icon demo

• This worked fairly smoothly once he found where the template parts are.
• He went into Templates first before going to Patterns based on his experience working with templates.
• While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops. 
• Having a summary of “My patterns: zero, theme patterns: 19” upfront when entering this section would be helpful. 
• Empty state could be improved which relates to a current open issue on that topic.
• Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts. 
• @alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block. 
• Being able to rename group blocks would be a huge help but it’s unclear how that’s announced. This is currently a feature slated for 6.4 so let’s get some testing in place!
• Ran into a problem where 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. is open once you select a block in the Post Editor but in the Site Editor, it doesn’t open, causing you to need to do a lot of navigating to get it open. 
• Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there. 
• A larger discussion around showing heading level occurred, along with the lack of document overview in the Site Editor. Instead, we discussed showing the heading level icon along with the text in List View.
• It would be good to get a solid pattern in place for this experience considering work is underway for adding text to paragraph and list blocks in List view.

Using the command palette:

• Need to fix naming of the prompt which matches this previously opened issue.
• Searching within the Command Palette doesn’t share how many results are shown.
• When going through the results for the command palette, numbers are read off but only shows 5/5 and it’s hard to know to keep going since more than 5 were listed.
• Doesn’t announce enough results found and there’s an incorrect number of announcements. 
• Need more 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) testing at the start before these features are implemented. 
• A third party library was used so it’s tricky to keep BC when addressing problems. 

Inert usage 

• Broader discussion and demo of inert was done with the Comments block
• When selected, it only announced “selected” because this form is specified as inert. 
• Using inert makes something non interactive which is something we do desire (aka folks won’t try to submit a form) but if we’re using a technique that causes it to not exist for one group of people, it’s inactive and absent. There’s no parity between the experiences. For screen reader users, there’s no preview. 
• This entire discussion is very similar to how to hide content, like using display:none. Anytime you say something is inert and if it were invisible, it’s fine and has no impact. 
• In this case though, we’re using inert to reflect a preview state while that preview state is nonexistent for screen readers.

Follow up issues:

I (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time 🙂

• Focus loss after entering edit mode for the navigation block and for header template part. 
• Update detach language for navigation block and synced patterns.
• Add more information when you open up the save panel without needing to go through each section. 
• Open bug for when you are in navigation mode and you save the Site editor changes, instead of focusing the save button again, it focuses the first button in navigation mode. 
• Back button in Site View needs to provide more context around what it’s going back to.
• Heading in List View doesn’t indicate the heading level – show heading level in list view and have aria label show heading level. 
• Consider not having each template be a tab stop when in the Site Editor > Template view.
• Provide a summary upon entering the pattern section (ex: “My patterns: zero, theme patterns: 19”).
• Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor).
• Bug with Command Palette announcements for results.