The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.?Create a ticket in the bug tracker.
WordPress 7.0 continues to polish accessibilityAccessibilityAccessibility (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) across WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and GutenbergGutenbergThe 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/, advancing the goals to meet accessibility standards. WordPress 7.0 includes fixes across the platform, improving media management, usability for voice control, and improvements to color contrast with the new adminadmin(and super admin) color scheme. The editor ships with new blocks and improvements to editor navigation and interaction.
Core
Improvements to WordPress Core include 24 accessibility enhancements and bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. Major changes include enhancements to the media library for voice control users and the import of alternative text from image metadata, improvements to control semantics, and fixes to color contrast.
Media
Significant changes to media will improve both the editor and user experience. In WordPress 7.0, using the media library with voice control technology is now possible. Alternative text embedded in photo metaMetaMeta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data will be imported and automatically set as the image text alternative when available.
#23562 – Using Speech Recognition Software with the Add Media Panel
#55535 – Pre-populate Image Alt Text field with IPTC Photo Metadata Standard Alt Text
#63895 – Accessibility: Alt Text Metadata is not imported but Description is
#63984 – Assess if the tabpanels in the media modals should receive focus
#64374 – Alt text helper text can be more educational and visual indicator of opening in new tab
#63980 – Set featured imageFeatured imageA featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. button incorrectly coded as link and missing required ARIA attributes
Admin
Improvements to predictability and verbosity for screen reader users have been made across the admin to provide users with a more consistent and stable interface.
#23432 – Review usage of target="_blank" in the admin
#33002 – List table: avoid redundant Edit links and reduce noise for screen readers
#43084 – dashboard confuses published posts count with all posts
#64065 – Dragging theme/pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. ZIP outside file input field, downloads file instead of uploading.
#64375 – Set word-break property in screen reader only css.
#64313 – Color Contrast raises errors in automated tests for WordPress Dashboard
#64382 – Post search input “close” (×) button should use cursor: pointer
#64811 – Zero comment notification in admin toolbar has insufficient color contrast
Themes
Numerous improvements to theme template functions and core themes.
#62835 – Remove title attributes from author link functions
#62982 – Twenty Twenty-Five: The Written by pattern on single posts has too low color contrast in some variations
#64064 – Twenty Ten: remove auto-focus script from 404 template
#64594 – BlockBlockBlock 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. Support: Allow serialization skipping for ariaLabel
#64361 – Leverage HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to implement block template skip link
Miscellaneous
Improvements in the classic editor, code editing, the CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., and login and registration.
#63981 – TaxonomyTaxonomyA taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. meta box tabs not programmatically identified
#42822 – CodeMirror: HTML attributes values hints not fully operable with a keyboard
#60726 – The WordPress core password reset needs to pre-populate the username to meet WCAGWCAGWCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2.2
#64013 – Color contrast below WCAG standards for newly-added items in customizer menus
Gutenberg
Changes within Gutenberg include 16 accessibility fixes and enhancements, including the addition of new interactive blocks that have undergone accessibility reviews. Numerous fundamental components have had accessibility improvements to ensure that interfaces across the editor are more consistent and understandable.
While there are relatively few accessibility fixes and enhancements in the editor for WordPress 7.0, there are many new interfaces that have undergone accessibility review, per the WordPress commitment to meeting WCAG 2.2 at level AA for all new and updated code. These include the Visual Revisions inspector, Gallery lightboxes, and the new Connectors interface.
#74742 – Add visual revisionsRevisionsThe WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.
WordPress 6.9 brings extensive accessibilityAccessibilityAccessibility (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) improvements across WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and GutenbergGutenbergThe 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/, continuing the goals to meet web content accessibility standards throughout WordPress and make it easier to author accessible content. These updates include changes to administration, customization, login and registration, bundled themes, and the blockBlockBlock 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.
Core
Improvements to WordPress Core include 33 accessibility enhancements and bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. Major changes include numerous new or improved screen reader notifications, a complete update of CSSCSSCascading Style Sheets. generated content to ensure no excess content is spoken, and code changes to ensure proper semantics and improved focus management.
Administration
#47101 – Improve accessibility when deleting terms via AJAX: color contrast & spoken message.
#48655 – Improve the “Add-item” function in menus (esp. for pages)
#63118 – Hide “Skip to Toolbar” shortcut on small screens within adminadmin(and super admin)
#63126 – Theme preview model and Media library model having issues with Shift/Ctrl + Shift next and previous arrows.
#63449 – Low color contrast for <code> elements in description text on Settings > General page
#63546 – Fix unclosed li element in pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.-editor.php
#63603 – Replace deprecated / non-standard CSS for `speak` and `aural`
#63723 – On the Add New plugin page, put the Add Plugins screen description above the filterFilterFilters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. menu
CustomizerCustomizerTool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.
#42078 – Customize: fix the color hue picker HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and accessibility
#47579 – Customizer “Select logo” and “Select site icon” look like drop areas, but are buttons.
#63011 – Customizer: The back button is not keyboard focusable
#63832 – Loss of focus when setting or changing the Site Logo or Site Icon in Customizer
Editing
#63460 – Increase color contrast for embed template
#61959 – Enhance Support for `popovertarget` and `popover` Attributes in Native Browser Popover APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.
Login and Registration
#63281 – Password field has wrong focus on installations
#63286 – User profile first name, last name, nickname and email fields should have autocomplete attributes for accessibility
#63114 – No screen reader announcements for upload image errors
#63238 – Remove `target=”_blank”` from Browser Uploader Link
#63239 – Button focus visibility issue in media upload page
#63571 – Excessive Spacing Between Right SidebarSidebarA 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. Items in Edit Media Screen on Mobile View
#63973 – Add Media Button missing aria-haspopup and aria-controls
Miscellaneous
#40428 – Introduce best practices to hide CSS generated content from assistive technologies
#44267 – Privacy Request List Table: A way to show the time of request when it’s older than 24 hours.
#63030 – Update CSS for `::-moz-placeholder` color
#63620 – Remove translator comments when hidden text matches visible text
#63950 – Tabbing through database upgrade screen shows “WordPress” text over logo
Bundled Themes
#10219 – “Older Entries” and “Newer Entries” links are wrong when entries displayed in ascending order
#44656 – Multiple themes: Empty site title leaves empty anchor tagtagA directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) in headerHeaderThe 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.
#52116 – Twenty Twenty: Menu + Search can cause a scroll jump on close
#63875 – Twenty Twenty-Two and Twenty Twenty-Five: <pre> tag overflows container, causing horizontal scroll
Widgets
#63531 – CategoryCategoryThe 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. dropdown does not meet WCAGWCAGWCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2.2 A on windows and some linux systems
Gutenberg
Changes within Gutenberg include 44 accessibility fixes and enhancements, including the addition of new blocks and the block Notes feature that have undergone accessibility reviews. Numerous fundamental components have had accessibility improvements to ensure that interfaces across the editor are more consistent and understandable.
Blocks
#68662 – Cover: Fix placeholder color options keyboard accessibility
#68909 – Site Title: Fix logic for ‘aria-current’ attribute
#69628 – Site Title: Prevent saving and rendering a value made of only spaces
#69689 – Navigation Link, Navigation Submenu: Remove the title attribute controls
#69821 – Social Icons: Remove custom placeholder state
#70139 – Button Block: Add HTML Element selection in Advanced settings
#70192 – Button: Avoid focus loss when unlinking using keyboard
#70210 – Columns block: Don’t use ToolsPanelItem for Columns setting
#70730 – a11yAccessibilityAccessibility (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): Comments Pagination Nav Wrapper
#73177 – Fix a11y of descriptions and alerts for “InvalidinvalidA resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid.” Nav Items
Components
#67792 – Improve the EntitiesSavedStates modal dialog design and labeling
#69011 – Remove non translatable additional info from font size picker visual label and improve labeling
#69441 – ARIA: Fix invalid `DropdownMenu` children structure
#68633 – Global Styles: Prevent Unwanted ItemGroup List Rendering in Border Panel
#68542 – Button: Update hover styles to account for pressed state for `tertiary button`
#69609 – ActionModal: Add support for customisable `focusOnMount`
#68481 – Fix CSS classes for the post editor iframeiframeiFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. body.
#68975 – Close patterns modal on insertion and focus on inserted pattern
If you’ve never participated in a bugbugA bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. scrub, reading the documentation on leading a bug scrub will help you understand what to expect!
This is a summary of a Hallway Hangout that was wrangled in the #accessibility channel after a prior hallway hangout on improving accessibilityAccessibilityAccessibility (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) in the Site Editor and took the new form of a concrete working session to address a specific problem. It was first announced on October 1st and was open to all.
To kick off, Joe asked Alex to talk through the current pain points and differences between modes. As Alex said, navigation mode is a hackedhacked together feature. The biggest problem we have, the navigation mode is a dynamically updating button. Everytime you press your arrow key or tab key when you’re in navigation mode, it dynamically re-renders. This is a challenging problem to handle with screen readers because it’ll ignore this. For Windows, there’s also a longstanding issue where the arrow keys don’t actually send the keyboard events through the browser so tab is the only viable key. Conversely, List View is much simpler in the way you can navigate with keys and it’s wrapped in a navigation role. You are able to expand rows, have control over what you’re looking at, etc. Another current problem with navigation mode, it’s not entirely clear when there are inner blocks. Alex started to work on this but stopped to focus on list view.
What are the consequences if we stripped out navigation mode and used list view as the primary way of browsing through blocks?
To date, there has been no modal, tips, etc for keyboard users in the editor. People who are used to this would have no idea it has changed and we need a way to communicate that change, perhaps using a similar approach to the change in template parts to the patterns section.
Andrea, who helped implement navigation mode, offered some historical context. He shared that if we are going to use navigation mode, we’re going to reintroduce a major issue that existed before introducing the two modes. Imagine that a post contains dozens of blocks. If you want to navigate these blocks in the post content area with the tab key, you are going to have to go through all of the dozens of blocks including the interface of each blockBlockBlock 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. (dozens of tab stops). Nav mode was originally meant to reduce the number of tab stops when navigating through the blocks in a way that each block was only one tab stop rather than multiple then pressing enter gives the ability to switch the block to edit mode where you can navigate inside the block. This was the original implementation and it made sense when there were no inner blocks.
Joe noted that List View works the same way where you can go block to block. When you use the tab key you are going through all of these elements. However, there are still a lot fewer elements than going through the blocks themselves. We should be willing to compromise to some degree. Arrow key navigation in List View also does work. It’s 100% accessibility and there are a total of three tabbable elements in list view: tab panel, close button, and list view area itself.
Alex would like to find a better way to manage focus between block editor and block sidebarSidebarA 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. but that’s a broader discussion. Jerry and Alex have worked on this but it’s a long battle.
Trying List View + Focus Mode for container blocks as an experiment
Anne pitched trying getting rid of navigation mode and use list view + focus mode as an experiment in GutenbergGutenbergThe 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/. We could then do a call for testing and get a sense of what the experience might be like more practically. Folks were very much onboard with trying this out, especially since in the long run this would reduce the number of mechanisms to maintain.
The question of how many people are used to using navigation mode came up though, especially since the feedback folks are worried about is more about non screen reader users. Anne is going to try to get some initial data from WordPress.comWordPress.comAn 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/.
Mobile concerns
Rich chimed in that the current primary use for that view is on mobile devices as this makes it easier to select child first nested blocks so it’s easy to tap onto. We never really got to the bottom of this on the call as we all pulled out our phones to investigate and couldn’t figure out how to even evoke the mode.
Locked blocks and inert
We discussed how to explain disabled blocks in List View which relates to a broader discussion on alternatives to inert. There’s no good way to explain to a blind user what a template looks like when editing a smaller portion like a page. Anne showed an option to toggle on/off a template preview when editing a page in the Site Editor and we discussed a few ways we could enhance that feature to save it as a preference/have it be persistent in some way.
Focus mode concerns
We discussed Focus Mode and adding it to Container Blocks. A big piece to figure out is how the back button works and ensuring it returns you to where you’d expect in the Site Editor experience.
Gutenberg as a framework concerns
Alex brought up an excellent point around Gutenberg being used as a framework, like with Blocks Everywhere, and how navigation mode is built into it as a package. We need to consider this in removing the navigation mode and it might be that it remains for third party usage.
To provide context, when navigation and edit mode were initially introduced in GutenbergGutenbergThe 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/ 6.3, nested blocks and the Site Editor did not exist. We now face the challenge of finding a more efficient way to navigate between content.
If you’re interested in joining, the Hallway Hangout will happen on 2023-11-15 16:00. A Zoom link will be shared in the #accessibilitySlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ channel before starting and all are welcome to join, whether to listen or participate, for as long or as little as you’d like.
Agenda
At a high level, we’ll start with some intros to get familiar with who has joined us on the call before diving into the topic in practical terms: How does everything work today? How might deprecation work? What accessibilityAccessibilityAccessibility (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) improvements or fixes are needed for this to be viable?
As a reminder, hallway hangouts are meant to be casual and collaborative so come prepared with a kind, curious mind. Because this will be more of a working session, we’ll be solely focused on the topic prepared so please keep that in mind when considering whether to join.
To ensure the Site Editor can be used by everyone, this hallway hangout aims to dive deep into the current accessibilityAccessibilityAccessibility (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) of this new experience with the aim to iterate and improve.
How to join
If you’re interested in joining, the Hallway Hangout will happen on 2023-09-14 15:00. A Zoom link will be shared in the #accessibilitySlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ channel before starting and all are welcome to join, whether to listen or participate, for as long or as little as you’d like.
Agenda
At a high level, we’ll go through the following:
Quick intros.
Discussions around current concerns.
Demos of pain points from @alexstine and @joedolson.
Discussion about ways to resolve/address current, known issues.
As a reminder, hallway hangouts are meant to be casual and collaborative so come prepared with a kind, curious mind along with any questions or items you want to discuss around this important area of the project. Outside of the time for demos, we’ll intentionally have space for open discussion.
With WordPress 6.2 set to launch on March 28th, this post seeks to provide an overview of the many accessibilityAccessibilityAccessibility (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) improvements and fixes coming to the next major WordPress release. As always, there’s more work to be done with accessibility requiring an ongoing effort and commitment. Outside of the work mentioned below, there have been numerous moments of collaboration around accessibility as features were developed including with splitting tabs in block settings, introducing browse mode, and the additional option to edit the navigation block in the block settings.
If you’re interested in helping with these efforts, please join the #accessibility channel in Make SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ and check out how you can get involved. There are numerous ways to get involved in this important work including testing, giving accessibility feedback, and creating PRs to address feedback.
Navigation blockBlockBlock 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.
Announce when a block is inserted in the Navigation list view. (47034)
Fix various off canvas appender accessibility issues. (47047)
Better handling of loading states for navigation selector. (43904)
SidebarSidebarA 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. Tabs: Set default tab to first available. (45998)
Make the inline toolbar navigable by arrow keys. (43645)
In WordPress 6.1, the forms for the wp-signup.php and wp-activate.php pages have several enhancements to both the markup and the styles.
AccessibilityAccessibilityAccessibility (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)-related improvements
Indicating relationships:
Fieldsets, with visible legend text, group the radio buttons.
Form field description information connects to its related field with aria-describedby.
When present, error messages also connect to their field with aria-describedby. The generic error has an ID in case custom fields should refer to that.
Preventing errors:
Required text fields have the required attribute.
The Site Name label indicates that users should enter the subdirectory only, and the Site Domain is only the desired subdomain.
The Username field’s description text now specifies that letters need to be lowercase.
Color contrast:
If the activation page has an error message, its default dark gray text color contrasts against the light background.
The default style for links within the registration page’s bordered message (.mu_alert) includes an underline and matches the text color of the rest of the message. For example, Twenty Twenty-One’s dark mode assigns a light link color, so the new style makes it readable and identifiable as a link. If a theme uses a bottom border or box-shadow on links, however, this underline could be inappropriate.
Links were sometimes difficult to seeLinks match the surrounding text color, underlined, in 6.1
New elements and styles for the registration page form
The fieldset and legend elements reset margin, padding and border properties.
The legend styles are consistent with the default label font size, weight and margins.
Radio buttons are inside paragraphs without a top margin, following the legend.
Text input fields and the submit button, which were set to 100% width plus padding, are only as wide as their container now.
New account setup, step 1, allowing both sites and usernames
When people create an account:
Descriptive text for the Username and Email Address is inside paragraph tags. Because these immediately follow the input, the paragraphs do not have a top margin.
Options for creating a site and/or a username are grouped in a fieldset with a new, visible legend.
Elements with the “wp-signup-radio-button” class wrap these options’ radio buttons and their labels, and with “display: block” the options stack vertically.
Form fields for an administrator (logged in) to create a new site
When an administrator creates a new site:
A “wp-signup-blogname” container wraps the Site Name (or Site Domain) input with the domain, so themes could arrange them side-by-side.
For right-to-left languages, the domain and its input field remain in the left-to-right direction.
The “privacy-intro” fieldset uses paragraph tags inside it to retain most paragraph styles from the theme.
By wrapping “Privacy:” in a “label-heading” span, it appears above the rest of the legend. This text maintains the same default font size and weight given to the legend and label elements.
The “Yes” and “No” labels have moved next to the radio buttons, instead of inside them. Without the strong emphasis tags, these can match the default label font weight of 600. If any theme overrides the “.mu_register label.checkbox” selector to block display, that property will need updating to an inline style.
In this fieldset, “wp-signup-radio-button” containers remain next to each other, with a small margin between them.
Site activation page styles
The activation form’s container is centered, to match the signup page.
The input field and submit button cover the full width of the container, with box-sizing: border-box to prevent them from extending beyond 100%.
The form and .error selectors now include .wp-activate-container so that the styles do not affect elements in the headerHeaderThe 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. or footer.
BlockBlockBlock 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. themes
This is not new to 6.1, but block themes should continue to include header.php and footer.php template files for these pages. To make a header template more specific to the networknetwork(versus site, blog) pages, its filename can be header-wp-signup.php or header-wp-activate.php.
For more information about the HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and CSSCSSCascading Style Sheets. changes, view tickets #40361 and #54344.
With WordPress 6.1 around the corner, this post brings together the many accessibilityAccessibilityAccessibility (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) improvements and fixes to look forward to that might be hard to discover amongst the details of 500+ bugs and enhancements. As always, there’s more work to be done with accessibility requiring an ongoing effort and commitment.
If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ (need a slack account to view) and check out how you can get involved. There are numerous ways to get involved in this important work including testing, giving accessibility feedback, and creating PRs to address feedback.
Themes
Most notably, 6.1 will see the introduction of both Twenty Twenty-Two and Twenty Twenty-Three marked as accessibility ready, making them both the first default blockBlockBlock 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. themes to do so (and only default block themes). This helps open up more folks to the world of block themes and broader site editing features.
Across the many screens in WP Admin, improvements abound. Changes range from improvements in color contrast on the pluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. screen during recovery mode, to a switch from a text input to a textarea field in the media library, so users are better able to see the content of the field while editing.
To better call attention to the many improvements to this form, this section has been pulled out of the WP Admin Screen section. While this is a lesser used interface, the accessibility improvements are quite significant for this release, addressing many longstanding problems. This includes proper labels for required fields, explicitly associating errors with input fields so folks know what actions to take where, improved labels for radio buttons, and more.
Even though the Site and Template editors both use blocks, there are some specific accessibility challenges for these new interfaces in a site editing world. More work is needed and, if you’re keen to help, please join the FSE Outreach Program where you can go through calls for testing to provide feedback, find bugs, and more.
The navigation block continues to be a powerful and complex block, especially in the world of block themes. While there are fallbacks and an improved menu management experience to look forward to in this release, there is also a nice set of accessibility related fixes to make this necessary block usable for more people in more situations.
General Block Editor (other blocks, writing flow, components, etc)
This section covers a wide range of items including everything from improvements to additional blocks, like a focus loss fix for the Table block, and larger improvements to functionality like the Tools Panel. Specifically, the Tools Panel helps power part of the experience of using the numerous design toolspresent in more blocks for this release. It’s what you’d interact with to interact with more tools or reset changes. Improving the accessibility of this single tool has a cascading impact by improving the experience everywhere it’s used.
Comments now include proper contextual attributes for autocomplete fields, proper labels for the visible text describing required fields, and improved accessibility (and translatability) of the logged in as link.
Improving accessibilityAccessibilityAccessibility (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) requires ongoing effort and this post seeks to highlight some of the ways in which the project has taken action in this area of work for WordPress 6.0, set to release May 24th, 2022. If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/ and check out how you can get involved. There’s plenty of important work to be done including testing, giving accessibility feedback, and creating PRs to address feedback.
General improvements
Some improvements didn’t fit nicely into a specific area and instead impacted the general experience of using WordPress. This includes everything from adding button text labels to the site editor to displaying the blockBlockBlock 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. title when removing a block:
Allow tabbing into block placeholder, allowing for actions like tabbing into a block that only contains a block inserter, such as an empty Group block.
List View continues to be an important tool, especially in a full site editing world, allowing folks to quickly navigate between complex content. In this release, tons of work was done to allow it to be more high impact for more people:
Expect various aspects of managing media to have updates from adding a “Copy URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to clipboard” option to make it simpler to get the URL you need to ensuring the full permalink for an image is visible when on mobile devices.
You must be logged in to post a comment.