This is a summary of a Hallway Hangout that was wrangled in the\u00a0#fse-outreach-experiment\u00a0and #accessibility channels as part of the\u00a0FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing. \n\n\n\nAttendees:\n\n\n\n@alexstine @joedolson @richtabor @annezazu @poena @joen @jerryj @sergey @afercia @queerdevperson \n\n\n\nVideo Recording:\n\n\n\n\nhttps:\/\/youtu.be\/6N3Au-7jLoE\n\n\n\n\nNotes\/Links:\n\n\n\nOverall demos\n\n\n\nTo 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: \n\n\n\n\n- Manage the navigation menu.\n\n\n\n
- Edit header to add Site Logo.\u00a0\n\n\n\n
- Using the Command Palette.\u00a0\n\n\n\n\nOverall discussions\n\n\n\nOutside of that, two discussions broke out in between demos around the following: \n\n\n\n
\n- Use of inert for disabled blocks with a broader discussion ongoing in GitHub. \n\n\n\n
- 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. \n\n\n\n\nBalancing verbosity \n\n\n\nThroughout 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 block. On the flip side, with the Command Palette, what's announced is incorrect information!\n\n\n\nOn the discussions of different modes\n\n\n\n@alexstine doesn\u2019t like the different modes and finds List View is easier to work with partially because you don\u2019t know where to navigate around in the canvas otherwise with the keyboard. It\u2019s very unpredictable what direction you will be traveling based on what you select.\u00a0Right 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 \u201ctree\u201d of that specific block with the inner blocks.\u00a0@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. \n\n\n\nManage navigation menu demo\n\n\n\nFrom the demo, here are a running list of notes in order:\n\n\n\n
\n- Wasn\u2019t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes. \n\n\n\n
- It was hard to know what would trigger editing.\n\n\n\n
- Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit. \n\n\n\n
- @alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments. \n\n\n\n
- @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.\u00a0Keyboard users don\u2019t know that pressing right arrow key would lead to what you need.\u00a0\n\n\n\n
- Detaching page list is a confusing to understand and is required before you can edit the links\u2013 can we update the language? The language is hard to understand in general and also impacts synced patterns currently. \n\n\n\n
- After detaching and editing, the navigation block still doesn\u2019t give a lot of information.\n
\n- There\u2019s not a way to get more information about the current link you\u2019re working on (what the URL is, where it\u2019s pointing to, etc).\u00a0\n\n\n\n
- Information is more limited here and it\u2019s assuming pre-existing knowledge about the menu.\u00a0\n\n\n\n\n\n
- Open up the panel to save but it doesn\u2019t say what\u2019s 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.\n\n\n\n
- Discard changes is confusing and relates to this larger known issue. \n\n\n\n
- 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.\u00a0\n\n\n\n
- Back button in Site View doesn\u2019t have context around what you\u2019re going back to.\u00a0\n\n\n\n\nChanging Site Icon demo\n\n\n\n
\n- This worked fairly smoothly once he found where the template parts are.\n\n\n\n
- He went into Templates first before going to Patterns based on his experience working with templates. \n\n\n\n
- While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops.\u00a0\n\n\n\n
- Having a summary of \u201cMy patterns: zero, theme patterns: 19\u201d upfront when entering this section would be helpful.\u00a0\n\n\n\n
- Empty state could be improved which relates to a current open issue on that topic.\n\n\n\n
- Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts.\u00a0\n\n\n\n
- @alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block.\u00a0\n\n\n\n
- Being able to rename group blocks would be a huge help but it\u2019s unclear how that\u2019s announced. This is currently a feature slated for 6.4 so let's get some testing in place! \n\n\n\n
- Ran into a problem where the sidebar is open once you select a block in the Post Editor but in the Site Editor, it doesn\u2019t open, causing you to need to do a lot of navigating to get it open.\u00a0\n\n\n\n
- Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there.\u00a0\n\n\n\n
- 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. \n\n\n\n
- 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. \n\n\n\n\nUsing the command palette:\n\n\n\n
\n- Need to fix naming of the prompt which matches this previously opened issue.\n\n\n\n
- Searching within the Command Palette doesn\u2019t share how many results are shown.\n\n\n\n
- When going through the results for the command palette, numbers are read off but only shows 5\/5 and it\u2019s hard to know to keep going since more than 5 were listed.\n\n\n\n
- Doesn\u2019t announce enough results found and there\u2019s an incorrect number of announcements.\u00a0\n\n\n\n
- Need more accessibility testing at the start before these features are implemented.\u00a0\n\n\n\n
- A third party library was used so it\u2019s tricky to keep BC when addressing problems.\u00a0\n\n\n\n\nInert usage\u00a0\n\n\n\n
\n- Broader discussion and demo of inert was done with the Comments block\n\n\n\n
- When selected, it only announced \u201cselected\u201d because this form is specified as inert.\u00a0\n\n\n\n
- Using inert makes something non interactive which is something we do desire (aka folks won't try to submit a form) but if we\u2019re using a technique that causes it to not exist for one group of people, it\u2019s inactive and absent. There\u2019s no parity between the experiences. For screen reader users, there\u2019s no preview.\u00a0\n\n\n\n
- 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\u2019s fine and has no impact.\u00a0\n\n\n\n
- In this case though, we're using inert to reflect a preview state while that preview state is nonexistent for screen readers. \n\n\n\n\nFollow up issues:\n\n\n\nI (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time :) \n\n\n\n
\n- Focus loss after entering edit mode for the navigation block and for header template part.\u00a0\n\n\n\n
- Update detach language for navigation block and synced patterns.\n\n\n\n
- Add more information when you open up the save panel without needing to go through each section.\u00a0\n\n\n\n
- 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.\u00a0\n\n\n\n
- Back button in Site View needs to provide more context around what it\u2019s going back to.\n\n\n\n
- Heading in List View doesn\u2019t indicate the heading level \u2013 show heading level in list view and have aria label show heading level.\u00a0\n\n\n\n
- Consider not having each template be a tab stop when in the Site Editor > Template view. \n\n\n\n
- Provide a summary upon entering the pattern section (ex: \u201cMy patterns: zero, theme patterns: 19\u201d). \n\n\n\n
- Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor). \n\n\n\n
- Bug with Command Palette announcements for results.\u00a0\n\n\n\n#fse-hallway-hangout","contentFiltered":"This is a summary of a Hallway Hangout that was wrangled in the\u00a0#fse-outreach-experiment\u00a0and #accessibility channels as part of the\u00a0FSE Outreach Program. Huge props to @alexstine and @joedolson for demoing. \n\n\n\nAttendees:\n\n\n\n@alexstine @joedolson @richtabor @annezazu @poena @joen @jerryj @sergey @afercia @queerdevperson \n\n\n\nVideo Recording:\n\n\n\n\n\n\n\n\n\nNotes\/Links:\n\n\n\nOverall demos\n\n\n\nTo 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: \n\n\n\n
\n- 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..\n\n\n\n
- 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\u2019s opinion about your content and you\/ your organization\u2019s brand. It may also look different on different screen sizes. to add Site Logo.\u00a0\n\n\n\n
- Using the Command Palette.\u00a0\n\n\n\n\nOverall discussions\n\n\n\nOutside of that, two discussions broke out in between demos around the following: \n\n\n\n
\n- Use of inert for disabled blocks with a broader discussion ongoing in GitHub. \n\n\n\n
- 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\u2019t created at a time when nested blocks existed. A broader discussion is underway around providing a focused mode for any container block. \n\n\n\n\nBalancing verbosity \n\n\n\nThroughout the discussion, there were different mentions of too much verbosity, like upon entering Site View of the Site Editor, compared to moments where there\u2019s 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\u2019s announced is incorrect information!\n\n\n\nOn the discussions of different modes\n\n\n\n@alexstine doesn\u2019t like the different modes and finds List View is easier to work with partially because you don\u2019t know where to navigate around in the canvas otherwise with the keyboard. It\u2019s very unpredictable what direction you will be traveling based on what you select.\u00a0Right now, we\u2019re 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\u2019s been done with the Navigation block, where you can only see the \u201ctree\u201d of that specific block with the inner blocks.\u00a0@joen jumped in to talk about design explorations on exactly that where you can use a \u201cfocus mode\u201d to zoom in on just that part of the page and have List View for just that part of the system. \n\n\n\nManage navigation menu demo\n\n\n\nFrom the demo, here are a running list of notes in order:\n\n\n\n
\n- Wasn\u2019t able to manipulate the individual items in the Site view. Had to enter into Edit view to make changes. \n\n\n\n
- It was hard to know what would trigger editing.\n\n\n\n
- Upon getting into Edit View, there was tons of verbosity and ultimately focus loss after trying to edit. \n\n\n\n
- @alexstine had to then navigate back to where he was which showed the huge cost that comes with focus loss moments. \n\n\n\n
- @alexstine demoed how one can select the navigation block but it\u2019s not clear how to act upon it without knowing how to get to the toolbar view.\u00a0Keyboard users don\u2019t know that pressing right arrow key would lead to what you need.\u00a0\n\n\n\n
- Detaching page list is a confusing to understand and is required before you can edit the links\u2013 can we update the language? The language is hard to understand in general and also impacts synced patterns currently. \n\n\n\n
- After detaching and editing, the navigation block still doesn\u2019t give a lot of information.\n
\n- There\u2019s not a way to get more information about the current link you\u2019re working on (what the URLURL A specific web address of a website or web page on the Internet, such as a website\u2019s URL http:\/\/www.wordpress.org is, where it\u2019s pointing to, etc).\u00a0\n\n\n\n
- Information is more limited here and it\u2019s assuming pre-existing knowledge about the menu.\u00a0\n\n\n\n\n\n
- Open up the panel to save but it doesn\u2019t say what\u2019s 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.\n\n\n\n
- Discard changes is confusing and relates to this larger known issue. \n\n\n\n
- 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.\u00a0\n\n\n\n
- Back button in Site View doesn\u2019t have context around what you\u2019re going back to.\u00a0\n\n\n\n\nChanging Site Icon demo\n\n\n\n
\n- This worked fairly smoothly once he found where the template parts are.\n\n\n\n
- He went into Templates first before going to Patterns based on his experience working with templates. \n\n\n\n
- While going through the Template section, @alexstine noted that it might be worth considering not having each template as individual tab stops.\u00a0\n\n\n\n
- Having a summary of \u201cMy patterns: zero, theme patterns: 19\u201d upfront when entering this section would be helpful.\u00a0\n\n\n\n
- Empty state could be improved which relates to a current open issue on that topic.\n\n\n\n
- Confusing to have template parts under patterns rather than templates. This is due to being in an in-between state with template parts.\u00a0\n\n\n\n
- @alexstine struggled to open up the Header pattern and, upon opening it, lost focus same as before with the navigation block.\u00a0\n\n\n\n
- Being able to rename group blocks would be a huge help but it\u2019s unclear how that\u2019s announced. This is currently a feature slated for 6.4 so let\u2019s get some testing in place! \n\n\n\n
- 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\u2019t open, causing you to need to do a lot of navigating to get it open.\u00a0\n\n\n\n
- Alex demoed the editable list view for the navigation block in the sidebar, where all inner blocks of navigation block are there.\u00a0\n\n\n\n
- 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. \n\n\n\n
- 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. \n\n\n\n\nUsing the command palette:\n\n\n\n
\n- Need to fix naming of the prompt which matches this previously opened issue.\n\n\n\n
- Searching within the Command Palette doesn\u2019t share how many results are shown.\n\n\n\n
- When going through the results for the command palette, numbers are read off but only shows 5\/5 and it\u2019s hard to know to keep going since more than 5 were listed.\n\n\n\n
- Doesn\u2019t announce enough results found and there\u2019s an incorrect number of announcements.\u00a0\n\n\n\n
- 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 \u201cdirect access\u201d (i.e. unassisted) and \u201cindirect access\u201d meaning compatibility with a person\u2019s assistive technology (for example, computer screen readers). (https:\/\/en.wikipedia.org\/wiki\/Accessibility) testing at the start before these features are implemented.\u00a0\n\n\n\n
- A third party library was used so it\u2019s tricky to keep BC when addressing problems.\u00a0\n\n\n\n\nInert usage\u00a0\n\n\n\n
\n- Broader discussion and demo of inert was done with the Comments block\n\n\n\n
- When selected, it only announced \u201cselected\u201d because this form is specified as inert.\u00a0\n\n\n\n
- Using inert makes something non interactive which is something we do desire (aka folks won\u2019t try to submit a form) but if we\u2019re using a technique that causes it to not exist for one group of people, it\u2019s inactive and absent. There\u2019s no parity between the experiences. For screen reader users, there\u2019s no preview.\u00a0\n\n\n\n
- 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\u2019s fine and has no impact.\u00a0\n\n\n\n
- In this case though, we\u2019re using inert to reflect a preview state while that preview state is nonexistent for screen readers. \n\n\n\n\nFollow up issues:\n\n\n\nI (@annezazu) will follow up to open each of these but welcome folks to help me out here as anyone has time \ud83d\ude42 \n\n\n\n
\n- Focus loss after entering edit mode for the navigation block and for header template part.\u00a0\n\n\n\n
- Update detach language for navigation block and synced patterns.\n\n\n\n
- Add more information when you open up the save panel without needing to go through each section.\u00a0\n\n\n\n
- 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.\u00a0\n\n\n\n
- Back button in Site View needs to provide more context around what it\u2019s going back to.\n\n\n\n
- Heading in List View doesn\u2019t indicate the heading level \u2013 show heading level in list view and have aria label show heading level.\u00a0\n\n\n\n
- Consider not having each template be a tab stop when in the Site Editor > Template view. \n\n\n\n
- Provide a summary upon entering the pattern section (ex: \u201cMy patterns: zero, theme patterns: 19\u201d). \n\n\n\n
- Open sidebar upon block selection in the Site Editor to prevent labor of navigating to get it open (match experience in Post Editor). \n\n\n\n
- Bug with Command Palette announcements for results.\u00a0\n\n\n\n#fse-hallway-hangoutShare this:
Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Pocket (Opens in new window)Login to Reply","permalink":"https:\/\/make.wordpress.org\/test\/2023\/09\/14\/hallway-hangout-lets-chat-about-improving-accessibility-in-the-site-editor\/","unixtime":1694722171,"unixtimeModified":1695160512,"entryHeaderMeta":"","linkPages":"","footerEntryMeta":"","tagsRaw":"fse-hallway-hangout","tagsArray":["label":"fse-hallway-hangout","count":29,"link":"https:\/\/make.wordpress.org\/test\/tag\/fse-hallway-hangout\/"],"loginRedirectURL":"https:\/\/login.wordpress.org\/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2023%2F09%2F14%2Fhallway-hangout-lets-chat-about-improving-accessibility-in-the-site-editor%2F&locale=en_US","hasPrevPost":true,"prevPostTitle":"Hallway Hangout: Let\u2019s chat about the WordPress 6.4 & Evolving the FSE Outreach Program","prevPostURL":"https:\/\/make.wordpress.org\/test\/2023\/09\/13\/hallway-hangout-lets-chat-about-the-wordpress-6-4-evolving-the-fse-outreach-program\/","hasNextPost":true,"nextPostTitle":"FSE Program Testing Call #26: Final touches","nextPostURL":"https:\/\/make.wordpress.org\/test\/2023\/09\/18\/fse-program-testing-call-26-final-touches\/","commentsOpen":true,"is_xpost":false,"editURL":null,"postActions":"Post Actions- Login to Reply
- Scroll
- Shortlink","comments":["type":"comment","id":"3163","postID":"8267","postTitleRaw":"Hallway Hangout: Let\u2019s chat about improving accessibility in the Site Editor","cssClasses":"comment byuser comment-author-annezazu bypostauthor even thread-odd thread-alt depth-1","parentID":"0","contentRaw":"+make.wordpress.org\/accessibility\/\n+make.wordpress.org\/core\/","contentFiltered":"+make.wordpress.org\/accessibility\/\n+make.wordpress.org\/core\/\n","permalink":"https:\/\/make.wordpress.org\/test\/2023\/09\/14\/hallway-hangout-lets-chat-about-improving-accessibility-in-the-site-editor\/#comment-3163","unixtime":1694722204,"loginRedirectURL":"https:\/\/login.wordpress.org\/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2023%2F09%2F14%2Fhallway-hangout-lets-chat-about-improving-accessibility-in-the-site-editor%2F%23comment-3163&locale=en_US","approved":true,"isTrashed":false,"prevDeleted":"","editURL":null,"depth":1,"commentDropdownActions":"","commentFooterActions":"
- Login to Reply","commentTrashedActions":"
- Untrash","mentions":[],"mentionContext":"","commentCreated":"1694722204","hasChildren":false,"userLogin":"annezazu","userNicename":"annezazu","type":"comment","id":"3164","postID":"8267","postTitleRaw":"Hallway Hangout: Let\u2019s chat about improving accessibility in the Site Editor","cssClasses":"comment byuser comment-author-abletec odd alt depth-2","parentID":"3163","contentRaw":"The whole Gutenberg editor is an 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.","contentFiltered":"The whole GutenbergGutenberg The Gutenberg project is the new Editor Inter
