annezazu 8:09 pm on September 14, 2023
Tags: fse-hallway-hangout ( 31 )

Hallway Hangout: Let’s chat about improving accessibility in the Site Editor

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.

#fse-hallway-hangout

annezazu 8:10 pm on September 14, 2023

+make.wordpress.org/accessibility/
+make.wordpress.org/core/
- abletec 8:27 pm on September 14, 2023
  
  The whole 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/ editor is 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) nightmare-&-a-half for screen reader users. I haven’t felt this excluded since 2013. So what kind of help do yall want/need? It rather seems to me that this whole thing was pushed into existence & accessibility tacked on as very much of an afterthought.
  - annezazu 9:14 pm on September 14, 2023
    
    Thanks for chiming in to offer help and share about your experience. What’s your background? I’d love to direct you towards high impact contribution areas. I’d also love to hear from @alexstine @joedolson @afercia who are on the 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) team and have been relentless in working on this, alongside the larger CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor team. For now, as always, opening issues and sharing feedback on in progress PRs with the accessibility label goes a long way: https://github.com/WordPress/gutenberg/labels/%5BType%5D%20Accessibility%20%28a11y%29
    - abletec 10:08 pm on September 14, 2023
      
      My background. Hmm. I host, develop, & repair websites–13 yr experience. I’m on the 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) team & hold a contributor badge on the support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations.. I can program my way out of a wet paper bag, but it’s not my favorite. Prior to doing web hosting, my background was computer forensics, adaptive technology, a physician–both practice & teaching, & a stint as a Federal civil rights investigator. I’m old. Can you tell?
      
      I’m experiencing a lot of trouble lately even in the classic editor. It’s far worse using FSE. I really need to interrupt the project I’m working on, I guess, & see if things change w/a different screen reader or browser(s). But it seems like characters are getting jumbled and/or disappearing. They really aren’t, i.e., if I select all & then copy/paste everything is actually still there, but the keyboard/cursor navigation is definitively not working as expected. Very very disappointing–& disturbing. Making it very difficult to get any work done.
      
      That probably wasn’t real helpful. Let me just say I’m not a total newby. I didn’t just learn how to type yesterday and turn on a computer this morning. 🙂
      - annezazu 3:49 am on September 16, 2023
        
        This is super helpful! Thank you. It sounds like there’s loads you can do to help. There are 59 issues needing 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) feedback that would be a great place to start: https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Accessibility+Feedback%22
        
        If you’re looking to get into bigger discussions, here are two recent and active ones:
        
        WordPress design system tracking issue.
        
        Disabled blocks: identify alternatives to “inert”.
        
        abletec 7:14 pm on September 16, 2023
        
        Let me see if I can’t get a bit more specific, & then maybe you folks can tell me how to get started.
        
        1) I’m a contributor on the WordPress support forumSupport Forum WordPress Support Forums is a place to go for help and conversations around using WordPress. Also the place to go to report issues that are caused by errors with the WordPress code and implementations.. I have a heck of a time trying to find where to click into the editor to start typing a message. It’s a hassle. Normally, when the classic editor is being used & set to ‘code’, I just press my e key twice & I’m there. I often end up in the tags portion rather than the message part. They don’t want to activate the classic editor there, I get that, I’m not asking for that–this is just a problem w/many of these editors & not necessarily unique to WordPress.
        
        2) Keyboard shortcuts don’t seem to work as expected. For example, to my knowledge, there’s no way to use the keyboard to navigate to the beginning or end of a post. Again, it’s a hassle, especially if it’s a long post, though having thus said, pressing ctrl+home in this editor seems to work. Normally, though, ctrl+home just goes to the beginning of the paragraph.
        
        3) I personally don’t find the keyboard shortcuts particularly intuitive. alt+shift+z to remove blocks, for example. & I feel like I need more fingers to do Ctrl + Shift + Alt + m. I was really hoping that the KeyboardShortcuts | 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. Editor Handbook chapter would help by at least providing a list of the shortcuts, but no–that’s not what it was intended for, obviously.
        
        I don’t want to be that gal that always lags behind and hates change. But in this case, I really feel like the block editor seriously hampers my ability to get things done. And I feel like that obtaining information on how to use the block editor successfully is woefully lacking. I’m even willing to write such a thing, but first I have to figure it out.
        
        I don’t want to be a whiny blindy. But I do feel the FSE has been a major step back in terms of 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). I’d like to be convinced differently.
        
        annezazu 8:02 pm on September 20, 2023
        
        This is all really helpful context. Thank you. I definitely stick by my initial suggestions to both open issues in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ as you have time and help review those that need 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) feedback. That’s a huge and important way to get involved! Thanks for being game.
        
        For keyboard shortcuts, this should be helpful: https://wordpress.org/documentation/article/keyboard-shortcuts-block-editor/
        
        I don’t want to be that gal that always lags behind and hates change. But in this case, I really feel like the 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. editor seriously hampers my ability to get things done. And I feel like that obtaining information on how to use the block editor successfully is woefully lacking. I’m even willing to write such a thing, but first I have to figure it out.
        
        Have you explored Learn WordPress resources? It might help in terms of how to use the block editor successfully and, for any content that’s missing, I’m a faculty member for that team and can suggest it 🙂 You can also open any suggestions/requests here: https://github.com/WordPress/Learn/issues
David Smith 8:05 am on September 15, 2023

Just noting that I (along with other regular contributors) are working to address outstanding concerns re: the Nav 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..

I’ll be reviewing the feedback provided here and cross referencing with existing Issues.

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!

I’m slightly confused here because the ability to rename the Group block has already landed in the editor . Perhaps it’s not landed in a release yet though…

Could someone from the a11yAccessibility 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) contributors team please help me to understand specifically what needs to change with this feature to further enhance the a11y? It would be even better if you could point to an open Issue describing the problem. Many thanks.
- annezazu 9:44 pm on September 19, 2023
  
  Apologies for the confusion here. We chatted about the feature on the call but didn’t get into details of how exactly it works 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) perspective. Since it was noted as being quite helpful from an accessibility standpoint, I wanted to follow up to ensure it’s working in the ways in which it sounds like it would be helpful. It sounds like you already got plenty of feedback though and I’ll encourage folks to share in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ if anything needs to be adjusted.
  
  cc @afercia in case you wanted to chime in.
annezazu 10:28 pm on September 19, 2023

Fix focus loss problems after entering edit mode for 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. and for 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. template part.

Update detach language for navigation block and synced patterns.

Add more information when you upon 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.
annezazu 5:35 pm on September 21, 2023

Noting too that I opened an issue to continue the discussion around consolidating various modes https://github.com/WordPress/gutenberg/issues/54703
David Smith 10:53 am on December 6, 2023

Finally following up here. I watched the video and it’s clearly a struggle to edit your navigation menus. As you know we [Navigation contributors] are committed to continue to work to improve this. This type of feedback is very useful and helpful – thank you.

The main thing I noticed was that it’s clearly difficult to edit the Navigation via the blocks within the editor canvas. What strikes me is that this is likely not specifically related to 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. – am I right?

I recall that Alex and I have discussed before how it’s an easier experience to edit menus using a tree-like structure. Indeed, we’ve provided this very experience within the “Editable List View” tab within the inspector controls (right hand 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.) when the Navigation block is selected. I note however, that for the entire demo the sidebar was collapsed. Was this an intentional choice?

Do we need to open the inspector controls by default or is there a way in which we could make it more obvious that alternative menu editing options are available within that area? If so how could we do that to make the experience better for you?

I think it could help a lot if you could edit your Navigations within the “Navigation” sidebar. You tabbed into it but realised editing wasn’t possible here. I wonder how your experience would have been improved if edits were possible in this view much the same as they are within the block’s inspector controls? There is work proposed to achieve this but it might not happen in the 6.5 cycle.

There was also a lot of discussion about the lack of information on the individual navigation item blocks. However, a lot of this information is available in the inspector controls for the block (it was collapsed during the demo). How can we better surface this information? Again, this feels like something that is a general problem for all blocks – am I right?

I also chimed in with suggestions for improving the wording of the dialog that appears when you “edit” the page list block. That wording is far too technical.

Thanks again for taking the time to do this Hangout.
- Joe Dolson 12:57 am on December 7, 2023
  
  We did discuss the issue of whether or not inspector controls should open automatically or open by default. I think an important issue is that when controls are necessary in order to perform major actions, it seems like they do, indeed, need to become available. But another issue is that the sidebars aren’t synchronized – Alex was expecting 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. to be open because he had previously opened it in the post editor, but this didn’t apparently have any impact on the site editor. It seems like those states should be more closely related.
  
  The remoteness of inspector controls are an ongoing issue; anything that is needed for content editing/creation but disappears and reappears becomes difficult to work with – it’s confusing for sighted users, but for screen reader users that confusion is magnified. (See https://github.com/WordPress/gutenberg/issues/54633)
  - David Smith 10:05 am on December 7, 2023
    
    Alex was expecting 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. to be open because he had previously opened it in the post editor, but this didn’t apparently have any impact on the site editor. It seems like those states should be more closely related.
    
    Agreed. It’s a known issue. As a result I have seen contributors are focusing on unifying the codebases of the Post and Site editors. I therefore expect many of these issues to be resolved as a consequence of this effort.

Welcome

Weekly Meetings (Calendar)

Hallway Hangout: Let’s chat about improving accessibility in the Site Editor

Attendees:

Video Recording:

Notes/Links:

Welcome

Weekly Meetings (Calendar)

Attendees:

Video Recording:

Notes/Links:

Share this: