State of Accessibility in WordPress 6.3 Gutenberg  🔗 **Source:** [State of Accessibility in WordPress 6.3 Gutenberg](https://m.youtube.com/watch?v=6H15BUb6_GU) > [!note]+ Document Notes > Alex is conducting an accessibility audit of the Gutenberg block editor in WordPress and shares his experience as a blind user. > > [00:06](https://www.youtube.com/watch?v=6H15BUb6_GU&t=6) The current state of the Gutenberg block editor in WordPress > > [07:57](https://www.youtube.com/watch?v=6H15BUb6_GU&t=477) Gutenberg's writing flow feature can cause navigation issues for keyboard users > > [14:31](https://www.youtube.com/watch?v=6H15BUb6_GU&t=871) Gutenberg has two modes: edit mode and select mode. > > [21:01](https://www.youtube.com/watch?v=6H15BUb6_GU&t=1261) The navigation block in the editor is causing issues with screen readers and keyboard navigation. > > [26:57](https://www.youtube.com/watch?v=6H15BUb6_GU&t=1617) The navigation block in the editor settings is a terrible experience without vision > > [33:23](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2003) Screen reader and keyboard accessibility in Microsoft Word > > [38:51](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2331) Tab key navigation in Gutenberg is limited and not accessible for users with visual impairments. > > [45:44](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2744) Accessibility issues with various features on the website > > [52:22](https://www.youtube.com/watch?v=6H15BUb6_GU&t=3142) Gutenberg's full site editing or site editor is messy and needs improvement. > > [57:27](https://www.youtube.com/watch?v=6H15BUb6_GU&t=3447) Using Windows screen reader versus Mac screen reader > > --------------------------------- > > Detailed Summary for [State of accessibility in WordPress 6.3 Gutenberg](https://www.youtube.com/watch?v=6H15BUb6_GU) by [Merlin](https://merlin.foyer.work/) > > [00:06](https://www.youtube.com/watch?v=6H15BUb6_GU&t=6) The current state of the Gutenberg block editor in WordPress > - The speaker is conducting an accessibility audit. > - The speaker is using a development version of WordPress 6.3. > - The speaker is blind and uses a screen reader for technology usage. > - The speaker explains the differences between Windows and Mac screen readers. > - Gutenberg is a better experience on Mac than on Windows. > > [07:57](https://www.youtube.com/watch?v=6H15BUb6_GU&t=477) Gutenberg's writing flow feature can cause navigation issues for keyboard users > - Moving around Gutenberg is great for screen reader users as focus is not affected > - However, arrow keys are not constrained to specific blocks or fields > - This can lead to frustration when navigating through multiple blocks > - A setting called 'block navigation' can prevent unintended movements but has limitations > - Overall, navigating Gutenberg can be challenging for keyboard users > > [14:31](https://www.youtube.com/watch?v=6H15BUb6_GU&t=871) Gutenberg has two modes: edit mode and select mode. > - Gutenberg's edit mode allows you to edit the block. > - Gutenberg's select mode provides a simplified list of blocks. > > [21:01](https://www.youtube.com/watch?v=6H15BUb6_GU&t=1261) The navigation block in the editor is causing issues with screen readers and keyboard navigation. > - The navigation block is causing a JavaScript attack and doesn't function well. > - Empty paragraph blocks and document blocks are being affected by the navigation block. > - Some of the problems are caused by the new iPhone. > - Iframes have challenges with screen readers and keyboard navigation. > - There are bugs with the NVDA screen reader and buttons. > - The editor is switching between focus mode and browse mode. > - The navigation block is not always visible in browse mode. > > [26:57](https://www.youtube.com/watch?v=6H15BUb6_GU&t=1617) The navigation block in the editor settings is a terrible experience without vision > - The navigation block only announces navigation document block > - You can add other blocks like editor content region, canvas frame, and default navigation block > - You can upload an image in the documents block using media library or URL > - The focus is not properly managed in Gutenberg, causing issues in placement of elements > - There is no formatting toolbar for captions, which requires using tab to access the formatting tools > > [33:23](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2003) Screen reader and keyboard accessibility in Microsoft Word > - The ribbon tabs and controls can be navigated using F10 and arrow keys. > - There is a separate toolbar that can be accessed using shift+tab, but it is not discoverable for screen reader users. > - The document overview panel provides useful information about the block structure. > - A bug in the screen reader interaction caused issues with navigating the options menu for images. > - The list view provides an alternative way to navigate and edit the document. > > [38:51](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2331) Tab key navigation in Gutenberg is limited and not accessible for users with visual impairments. > - Pressing the Tab key only navigates to the toolbar and not the content of the outline tab. > - This forces users to switch into browse mode to navigate through the document structure. > - Assuming users have good navigational skills is not realistic, especially for those with visual impairments. > - There are accessibility regressions such as the inability to navigate through blocks using arrow keys. > - The navigation block and table block are examples of dynamic blocks with poor accessibility. > > [45:44](https://www.youtube.com/watch?v=6H15BUb6_GU&t=2744) Accessibility issues with various features on the website > - Certain blocks do not provide any information about the content they contain > - Conditional rendering affects accessibility > - False information is provided to users through screen reader announcements > - The media library is not accessible > - Lack of information and limited functionality in certain menus > > [52:22](https://www.youtube.com/watch?v=6H15BUb6_GU&t=3142) Gutenberg's full site editing or site editor is messy and needs improvement. > - Zoom video is recording because the site editor is a mess. > - The block options in the site editor are confusing and need work. > - The navigation block list view is an improvement, but still not very discoverable. > - Some blocks have tabs, while others do not, causing confusion. > - The arrangement of settings for different blocks is inconsistent. > > [57:27](https://www.youtube.com/watch?v=6H15BUb6_GU&t=3447) Using Windows screen reader versus Mac screen reader > - Windows and Mac screen readers have different operating methods > - Gutenberg's accessibility is a concern for some users > - Lack of contributors in Gutenberg's accessibility development > - Goal is to create an inclusive and accessible Gutenberg editor in WordPress > <!-- deep-read:sections start --> ## Summarize: The article is an accessibility audit of the Gutenberg block editor in WordPress 6.3 conducted by Alex, who is a cloud engineer and an accessibility consultant. Alex, who is blind and uses a screen reader, explores the editor's functionalities, focusing on keyboard navigation, modes for screen readers (browse mode and focus mode), and the challenges faced by users with different screen readers. The article highlights the issues encountered while using Gutenberg, such as unexpected context switches when using arrow keys, lack of visual highlighting for active elements, and the problems with navigating blocks and settings. The importance of better design and development practices for a more accessible experience is emphasized. ## Bullet Points: - Conducted accessibility audit of Gutenberg block editor in WordPress 6.3. - Author, Alex, is a cloud engineer and accessibility consultant who is blind and uses a screen reader. - Explores keyboard navigation, screen reader modes (browse and focus), and challenges faced by users with different screen readers. - Highlights issues like unexpected context switches, lack of visual highlighting for active elements, and difficulties navigating blocks and settings. - Advocates for better design and development practices to improve accessibility. ## Paraphrase: 1. The article discusses an accessibility audit conducted by Alex, a cloud engineer and accessibility consultant, on the Gutenberg block editor in WordPress 6.3. Alex, who is visually impaired and uses a screen reader, explores the editor's features, particularly focusing on keyboard navigation and how it interacts with screen reader modes like browse mode and focus mode. The audit highlights several challenges faced by users with different screen readers, including issues with context switches when using arrow keys and a lack of visual highlighting for active elements. Alex emphasizes the need for improved design and development practices to enhance the accessibility of the editor. 2. Alex, a cloud engineer and accessibility consultant, evaluated the Gutenberg block editor in WordPress 6.3 for its accessibility. As a visually impaired user who relies on a screen reader, Alex explored the editor's functionalities with a specific focus on keyboard navigation and screen reader modes, such as browse mode and focus mode. The audit brought attention to various issues faced by users with different screen readers, including unexpected context switches when using arrow keys and the absence of visual highlighting for active elements. The article underscores the importance of implementing better design and development practices to ensure a more accessible experience for all users. ### Conclusion: The accessibility audit of the Gutenberg block editor in WordPress 6.3 conducted by Alex, an experienced cloud engineer and accessibility consultant, sheds light on significant challenges faced by users with screen readers. Issues like unexpected context switches, lack of visual highlighting, and difficulties in navigating blocks and settings pose hurdles for users seeking an accessible experience. To improve the editor's accessibility, the article advocates for the adoption of better design and development practices that consider the diverse needs of users with various screen readers. Addressing these concerns will lead to a more inclusive and user-friendly Gutenberg editor. ### Questions: 1. How can the Gutenberg block editor be optimized for keyboard navigation to improve the accessibility for users with different screen readers? 2. What are some effective ways to provide visual highlighting and clear indicators for active elements in the Gutenberg editor for screen reader users? 3. How do the browse mode and focus mode in screen readers impact the user experience in the Gutenberg editor, and what measures can be taken to ensure seamless transitions between these modes? 4. In what ways can the Gutenberg editor be enhanced to accommodate the specific needs of users who rely on different screen readers, considering their unique browsing behaviors and preferences? 5. What are some best practices in design and development that can be applied to improve the accessibility of the Gutenberg editor and make it more user-friendly for individuals with visual impairments? ### Auto-tagging: Gutenberg, Accessibility, Screen Readers, Keyboard Navigation, Visual Highlighting, Browse Mode, Focus Mode, Design and Development, Inclusive Design ### Index Creation: - Gutenberg Block Editor - Accessibility - Screen Readers - Keyboard Navigation - Visual Highlighting - Browse Mode - Focus Mode - Design and Development - Inclusive Design ### Table of Contents: 1. Introduction 2. Conducting the Accessibility Audit 3. Keyboard Navigation and Screen Reader Modes 4. Challenges Faced by Screen Reader Users 5. Improving Visual Highlighting and Active Element Indicators 6. Enhancing Gutenberg for Diverse Screen Reader Users 7. Best Practices in Design and Development 8. Conclusion ### References: No specific references were cited in the article. ### Future Research: - Conduct user studies and gather feedback from a diverse group of screen reader users to identify their specific pain points and requirements while using the Gutenberg editor. - Investigate and develop solutions for addressing the issues with context switches and navigation experienced by screen reader users when using arrow keys. - Explore ways to implement visual highlighting and clear indicators for active elements in the Gutenberg editor that are compatible with different screen readers. - Study the browsing behaviors and preferences of users with various screen readers to tailor the editor's accessibility features more effectively. - Collaborate with developers and accessibility experts to implement design and development practices that prioritize inclusivity and user-friendliness in Gutenberg. ### Hypotheses: 1. Users with different screen readers will encounter varying challenges related to keyboard navigation and context switches when using the Gutenberg block editor. 2. Implementing visual highlighting and active element indicators in the editor will significantly improve the user experience for screen reader users. 3. Customizing the accessibility features of the Gutenberg editor based on the preferences and behaviors of users with specific screen readers will lead to a more tailored and inclusive experience. 4. Emphasizing inclusive design principles in the development of Gutenberg will result in a more accessible and user-friendly editor for all users, regardless of their abilities. ### Methodology: 1. Conduct surveys and interviews with screen reader users to gather insights into their experiences with the Gutenberg editor. 2. Perform usability testing with participants using various screen readers to identify navigation challenges and areas for improvement. 3. Conduct A/B testing with different visual highlighting and active element indicators to determine the most effective design for screen reader users. 4. Analyze data from screen reader usage logs to understand the browsing behaviors and preferences of different user groups. 5. Collaborate with accessibility experts and developers to implement recommended design and development practices in Gutenberg. ### Implications: The future research and improvements discussed in this article have significant implications for the accessibility of the Gutenberg block editor in WordPress. By addressing the challenges faced by users with different screen readers and optimizing keyboard navigation, visual highlighting, and active element indicators, the editor can become more inclusive and user-friendly. Advancing knowledge in this area will not only benefit users with visual impairments but also contribute to the overall usability and accessibility of the editor for all users. By prioritizing inclusive design and adopting better development practices, WordPress can set a positive example for other platforms and advance the field of web accessibility. ### Logical validity: The article presents a comprehensive accessibility audit of the Gutenberg block editor in WordPress 6.3, conducted by Alex, an experienced cloud engineer and accessibility consultant. Alex explores various aspects of the editor, including keyboard navigation, screen reader modes, and challenges faced by users with different screen readers. The observations and experiences shared in the article are coherent and well-supported by examples and demonstrations. The author highlights specific issues related to context switches, lack of visual highlighting, and difficulties navigating blocks and settings, which could significantly impact the user experience for screen reader users. The logical coherence and validity of the audit are strengthened by Alex's expertise in both cloud engineering and accessibility consulting. The article provides valuable insights <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/State of Accessibility in WordPress 6.3 Gutenberg|State of Accessibility in WordPress 6.3 Gutenberg, Alex Stine]] ## Highlights - accessibility audit to show you thecurrent state ofthe Gutenberg block editor in WordPress6.3 ([View Highlight](https://read.readwise.io/read/01h75kwpmrm2e5qj2vwgmcxkqs)) - Tags: accessibility, wordpress