Tag Archives: accessibility

annezazu 1:08 am on March 2, 2023
Tags: , accessibility   

WordPress 6.2 Accessibility Improvements

Thank you to @joedolson and @alexstine for collaborating on this post.

With WordPress 6.2 set to launch on March 28th, this post seeks to provide an overview of the many 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) 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 SlackSlack Slack 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 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.

  • 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)

General block editor experience 

  • TabPanel: Support manual tab activation. (46004)
  • Keycodes: Fix tilde (~) character isn’t displayed correctly. (46826)
  • Update text align toolbar control label. (47119)
  • 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. Tabs: Set default tab to first available. (45998)
  • Make the inline toolbar navigable by arrow keys. (43645)
  • BlockVariationPicker: Remove Unnecessary ARIA Role. (45916)
  • Esure block labels and titles consider variations. (44250)
  • useNavigateRegions: Use closest to determine the next region to navigate to. (44883)
  • Fix focus return when closing the Post publish panel. (45623)
  • Fix the navigate regions focus style. (45369)
  • Fix navigate regions backwards for macOS Firefox and Safari. (45019)
  • Fix the block toolbar styling when the ‘Show button text labels’ preference is enabled. (44779)
  • Fix the Save buttons labeling and tooltip. (43952)
  • Focus on the first parent block on block removal if no previous block is available (48204). This is underway but not yet merged.

Contrast Checker improvements

  • Limit contrast checker to only blocks that have at least one color defined. (43592)
  • Fix: Contrast checker appears unexpectedly on some blocks. (45639)
  • Fix: Contrast checker does not update properly. (45686)

Site editor

  • Change SpacingSizesControl ARIA from region to group. (46530)
  • Browse mode: Fix aria region navigation in the site editor. (46525)
  • Browse mode: Allow resizing the sidebar in the site editor using keyboard. (47176)
  • Browse mode: Add an aria label to the site save dialog. (47898)
  • Style Book: Focus the Style Book when opened, and enable ESCAPE key to close (48151).
  • Style Book: Allow button text labels for style book icon. (48088)
  • Add role=application to List View to prevent browse mode triggering in NVDA. (44291)
  • Make the template customized info accessible. (48159)

Other: 

  • Add “Testing Instructions for Keyboard” to PR template to encourage accessibility testing. (45957)
  • Constrained tabbing: Fix unstable behavior in FireFox. (42653)
  • TokenInput field: fix screen reader focus issue. (44526)

#6-2, #accessibility

Stephen Bernhardt 3:20 pm on October 20, 2022
Tags: accessibility, , , , ,   

Multisite registration and activation pages have new HTML and CSS

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.

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)-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.
“Options page” link had light gray text in Twenty Twenty-One’s dark mode
Links were sometimes difficult to see
“Options page” link is in the same dark gray text as the rest of the message
Links 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.
screenshot of account setup page in WordPress 6.1
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.
screenshot of form with Site Name (for subdirectory installations), Site Title, Site Language and Privacy options
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

screenshot of site activation page with Twenty Twenty theme
  • 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 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. or footer.

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. 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 HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and CSSCSS Cascading Style Sheets. changes, view tickets #40361 and #54344.

Props: Thank you, @ironprogrammer, @webcommsat, @audrasjb and @joedolson, for peer review and editing.

#accessibility, #core-multisite, #dev-notes, #dev-notes-6-1, #multisite, #themes

annezazu 5:01 pm on October 11, 2022
Tags: , accessibility, ,   

WordPress 6.1 Accessibility Improvements

Thank you to @joedolson and @alexstine for collaborating to write this post.

With WordPress 6.1 around the corner, this post brings together the many 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) 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 SlackSlack Slack 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 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. 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.

WP Adminadmin (and super admin) Screens

Across the many screens in WP Admin, improvements abound. Changes range from improvements in color contrast on the pluginPlugin A 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. 

Login and Registration

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. 

Site Editor/Template Editor

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. 

Navigation block

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 tools present 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

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.

#6-1, #accessibility, #dev-notes, #dev-notes-6-1

annezazu 9:01 pm on April 20, 2022
Tags: , accessibility, ,   

WordPress 6.0 Accessibility Improvements

Thank you to @joedolson and @alexstine for collaborating on this post. 

Improving 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) 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 SlackSlack Slack 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 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. title when removing a block:

Navigation block

While the first version of the navigation block that landed in 5.9 ensured many key accessibility features from the start, more work has been done to refine the experience and to ensure changes to the UIUI User interface continue to include accessibility features: 

Block improvements

Beyond the navigation block, various additional blocks received updates to improve their respective accessibility, wherever they are used: 

List View

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:

Media 

Expect various aspects of managing media to have updates from adding a “Copy URLURL A 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. 

Quick/Bulk Edit

Quick/Bulk editing has a few improvements that significantly improve keyboard and screen reader operability:

Login and Registration

The login and registration fields now properly set valid autocomplete attributes with a fix to the generate password button that was misleading: 

Themes

A few fixes are in place for various default themes and the overall process of hovering over theme details now has more consistency: 

#6-0, #accessibility, #dev-notes

#dev-notes-6-0

Tyler Weitzman 8:59 am on April 9, 2022
Tags: , , accessibility, ,   

Dev Chat Summary, April 6, 2022

1. Welcome

The agenda followed in this week’s WordPress developer chat meeting.

Link to the start of the meeting on the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. channel on the Make WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

Meeting facilitated by @marybaum and @webcommsat.

2. Announcements

WordPress 5.9.3 release is out! (April 5, 2022)

If you missed the WordPress 6.0 walkthrough, you can watch the video, read the transcript and the chat discussion all on the recap. This was a casual, guided walkthrough of many new features that are planned for WordPress 6.0,, and things that are likely to be released thereafter. Props to all involved.

3. Blogblog (versus network, site) posts for dev chat awareness

Thanks to everyone who has contributed and given their time to these posts and events.

4. Updates on the Releases

a) Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.0

Bug Scrub schedule for 6.0 list, which is regularly updated. Help the components maintainers and all those involved in progressing tickets by joining them on a bugbug A 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. You can also volunteer to run a bug scrub on the specific tickets you care about!

Update from @annezazu for the release co-ordinators:

  • currently no known blocking issues for the release. Things are proceeding as expected.
  • all issues related to the walkthrough have been opened or confirmed already filed. There is work underway around how best to integrate it into the current process.
  • Gutenberg 13.0 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). (the last Gutenberg release for inclusion in 6.0) was pushed by a few days to Friday, April 8 to allow for more time for PRs ahead of feature freeze/betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1
  • the Core Editor Tech leads are feeling solid about coordinating backporting PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher changes and on the dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. front
  • two new release squad members to help make this release a success: @ndiego stepped into the Core Editor Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. lead role and @ironprogrammer stepped into co-lead the Test role for the squad
  • a post is in progress/underway around specific features to help test in the lead up to 6.0. This will include items like comments loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop., cover 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. as featured imageFeatured image A 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. PR, webfonts APIAPI An 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., and more

    Confirmed, post dev chat:
    – 6.0 Beta 1 Release Party at April 12, 2022, at 18:00 UTC

5. Open Floor

  • @afragen: needs feedback for the Plugin Dependencies feature project, aiming for 6.1. More design feedback requested, thanks to @paaljoachim for review so far.
  • Trac Ticket 55344 raised by @josklever. @adamsilverstein confirmed the issue, it needs a patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. to lazy load hidden widgets, and tests, in order to move forward.
  • @tylerwe: asked about potential options to integrate a text-to-speech into WordPress core for better #accessibility

Potential next steps in the discussion: (1) starting place with a pluginPlugin A 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 submission and check the Plugin Developer Handbook, (2) to aim for a WordPress core integration, it has to be entirely open-source and GPLGPL GNU General Public License. Also see copyright license. compatible, (3) bring discussion to an #accessibility meeting, (4) licensing questions, (5) provide more details on a Make post for feedback. Post dev chat: Tyler thanked @jeffpaul for further offline discussions about a potential plugin.

  • The Learn WordPress Social Learning MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. has block theme discussions around different parts of theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.. @daisyo welcomed anyone interested to join.
  • @webcommsat: WordCamp Europe 2022 Contributor Day, June 2, 2022 – if anyone would be interesting in volunteering to help at the core tables, please contact the Core Team Reps @marybaum and @audrasjb. Is anyone already preparing items which could be used from any of the core areas? If so, please can you let them know. Previously core has had a significant presence at WCEU contributor days, broken up into its different areas.
  • Event confirmed post dev chat from @marybaum and @nalininonstopnewsuk:
    Bug scrubs for the Quick/ Bulk Edit component and the About / Help Page component will be on April 11 2022, at 20:00 UTC The scrub will include discussion on the messaging strategy for the 6.0 About Page. All welcome to join.

Next Dev Chat meeting: April 13, 2022, 20:00 UTC in the Core Slack channel.

Props to: @marybaum and @webcommsat for facilitating the meeting, @tylerwe and @webcommsat for the dev chat summary, and @marybaum, @costdev, and @annezazu for the review.

Could you volunteer next week for the summary?

#5-9-3, #6-0, #dev-chat, #summary

Colin Stewart 12:23 am on March 15, 2022
Tags: , accessibility, , , ,   

Bug Scrub Schedule for 6.0

With 6.0 well underway, it’s time to schedule the 6.0 bugbug A 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 sessions. These 6.0 specific ticketticket Created for both bug reports and feature development on the bug tracker. scrubs will happen each week until the final release.

Alpha Bug Scrubs

Hosted by @costdev

Hosted by @chaion07 (APAC-Friendly)

Hosted by @mikeschroder (APAC-Friendly)

BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Bug Scrubs
Focus: issues reported from the previous beta.

Hosted by @costdev

Hosted by @chaion07 (APAC-friendly)

Hosted by @mikeschroder (APAC-Friendly)

Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). Bug Scrubs (if needed)
Focus: issues reported from the previous RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta)..

Hosted by @costdev

Hosted by @chaion07 (APAC-Friendly)

Check this schedule often, as it will change to reflect the latest information.

What about recurring component scrubs and triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions?

For your reference, here are some of the recurring sessions:

Have a recurring component scrub or triage session?
PingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @costdev or @chaion07 on SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. to have it added to this page.

Want to lead a bug scrub?

Did you know that anyone can lead a bug scrub at any time? Yes, you can!

How? Ping @costdev or @chaion07 on Slack with the day and time you’re considering as well as the report or tickets you want to scrub.

Planning one that’s 6.0-focused? Awesome! It can be added it to the schedule here. You’ll get well deserved props in Dev Chat, as well as in the #props Slack channel!

Where can you find tickets to scrub?

  • Report 5 provides a list of all open 6.0 tickets:
    • Use this list to focus on highest priority tickets first.
    • Use this list to focus on tickets that haven’t received love in a while.
  • Report 6 provides a list of open 6.0 tickets ordered by workflow.

Need a refresher on bug scrubs? Checkout Leading Bug Scrubs in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. handbook.

Questions?

Have a question, concern, or suggestion? Want to lead a bug scrub? Please leave a comment or reach out directly to @costdev or @chaion07 on Slack.

Props to: @davidbaumwald for proof-reading.

#6-0, #accessibility, #bug-scrub, #core, #core-test

annezazu 2:04 pm on October 6, 2021
Tags: accessibility, ,   

Core Editor Improvement: Continued progress on accessibility

Improving 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) requires ongoing effort and this post seeks to highlight some of the ways in which the project continues to make strides in this area. If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlack Slack 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. 

Ensuring accessibility from the start with 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. [planned for 5.9]

The Navigation Block is a key milestone for the full site editing project that focuses on the experience of editing a site’s 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., both in terms of structure and design. This is a big effort that includes how to make it easy to add submenu items, how to create a responsive navigation experience, how to support multiple different inner blocks, and more. While work is underway to simplify the experience for all (ex: reducing the number of steps to add a page link), this section covers three big pieces of the work, thus far, that have had a particularly strong impact on accessibility:

  1. The first is that when implementing submenus it was intentional that they would open on explicit click rather than focus, when navigating with a keyboard and/or screen reader. The changes made ensure that screen reader users are better informed when tabbing submenus, and can choose whether to enter them or not. Previously it was necessary to tab through every submenu item to get to the next parent item. For a deeper look into the behaviors of the navigation block and submenu items, check out these visualizations that provide more context but have not yet been fully implemented. 
  1. When building the responsive navigation feature in the navigation block, work was done to ensure the hamburger menu was built using proper modal behavior from the start. This means that when you open the responsive burger menu, the tab is kept inside the responsive menu experience until you press Escape. A quick demonstration is shown in the video displayed in this section.
  1. Finally, the markup for the front end was changed to ensure that the Navigation block contains fully semantic markup, no matter what its contents are.

Accessibility benefits with the Gallery Block Refactor [planned for 5.9]

Ahead of WordPress 5.9, an update to the Gallery Block was shipped that essentially allows you to have all of the tools you’re used to with an Image Block for each image in the Gallery Block. Thanks to this change, the Gallery Block now benefits from improved keyboard navigation and the ability to add alt text right within the block 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.. This will make it easier to both produce accessibility friendly content and for those navigating what you create when viewing your site. To learn more about the Gallery Block Refactor, you can check out this WordPress News post dedicated to it. 

The new gallery block with an alt text field for each image within the gallery block itself.

Other noteworthy updates/fixes [in the 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/ pluginPlugin A 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 today]

There’s a lot of high-impact changes that can be overlooked when not shown altogether. To help capture additional accessibility improvements, here are high impact changes in the editing experience: 

Thank you to @joen who helped provide wonderful insights about the navigation block, including the featured video. Thank you to @kellychoffman @priethor @daisyo for the content review. Thank you to @javiarce for the lovely Gallery Block refactor screenshot.

#core-editor-improvement, #gutenberg

Jeffrey Paul 10:13 pm on May 6, 2021
Tags: , accessibility, , , , , , , , training,   

DevChat meeting Summary – May 5, 2021

Agenda for the two meetings. Thanks to @peterwilsoncc and @jeffpaul for leading the 05:00 and 20:00 UTC devchats respectively.

Link to 05:00 UTC devchat meeting archive in Slack // Link to 20:00 UTC devchat meeting archive in Slack

Announcements and news

These posts need your feedback:

  • @ryokuhi published a proposal on Make/Accessibility about a new Trac workflow keyword that 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 would like to consider.  If you feel particularly opinionated or passionate about this, please comment on the post.
  • @jeffpaul and @desrosj published a request to Component Maintainers, Feature plugin authors, and the Gutenberg team to share plans / help needed for 5.8 (primary focus will be FSE).  Please comment on the post to help ensure we’re tracking the right work for the release.
    • @youknowriad noted that required Gutenberg changes in Core are made as filters/extensions points and brought to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. as part of the 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/ merge that happens regularly
    • @mkaz shared the WordPress 5.8 Must Haves project board on GitHub as outline of Gutenberg work for 5.8

5.8 Review

  • Schedule confirmed including bugbug A 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 schedule
  • @youknowriad shared that trunk is already on Gutenberg 10.4, @gziolo is working on updating it to 10.5 and the big changes (Global styles infrastructure in themes.json and FSE blocks) are coming in 10.6
  • Feature freeze on Tuesday May 25th (19 days from now) defined as “During the following two weeks, there will be no commits for new enhancements or feature requests. Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. will focus on defect work (aka outstanding bugs)“
  • BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 on Tuesday June 8 (33 days)
  • RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1 on Tuesday June 29 (54 days)
  • Release on Tuesday July 20 (75 days)
  • Current list of tickets that are on the 5.8 milestone, list of good-first-bugs tickets

Component maintainers and committers update

  • @sergeybiryukov shared Plugins update that Parameter names in pluginPlugin A 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 APIAPI An 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. functions now use consistent terminology when referring to actions, filters, and callback functions via #50531
  • @sergeybiryukov shared Themes update that #49487 removes the “Featured” tab on Add Themes screen to match an earlier change in the Theme Directory
  • @webcommsat shared About/Help update that ticketticket Created for both bug reports and feature development on the bug tracker. triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. continues with @marybaum
  • @audrasjb shared Menus update that #21603 is being reviewed
  • @audrasjb shared Upgrade/Install update that the last meeting recap includes a project for the next few releases

Open Floor

Props to @audrasjb, @webcommsat and @marybaum for reviewing this post.

#5-8, #accessibility, #dev-chat, #docs, #fse, #full-site-editing, #github, #learnwp, #summary, #updater

Héctor Prieto 7:14 pm on March 25, 2021
Tags: accessibility, ,   

Discussion summary: Dropping support for IE11

As a follow-up to the very active discussion around the proposal to drop support for IE11, there is a majority agreement to move forward with dropping support. The next steps are to figure out a timeline and what it means for projects/teams to drop the support.

Regarding timeline, there are two upcoming milestones where support could be dropped: 5.8 and 5.9. The argument for dropping in 5.8 is to realize the change and improvement quicker, while others are inclined to wait until 5.9 to provide a longer window between the official announcement and the effective date.

The decision when will be left to the release team for WordPress 5.8; this team is not formed yet as it depends on the April go/no-go Full Site Editing merge.

This post was written in collaboration with @mkaz, @annezazu, and @youknowriad.

#accessibility, #browser-support, #performance

Héctor Prieto 10:50 am on March 4, 2021
Tags: accessibility, ,   

Discussion: Dropping support for IE11

After digging into data and reviewing previous decisions around browser support, this is a proposal to define a policy to stop supporting Internet Explorer 11 (IE11) now that usage has cumulatively fallen below ~1% across three metrics. 

Current state of IE11

As of February 25th 2021, IE11 usage has cumulatively fallen below ~1% according to three sources of metrics:

  • 0.71% from StatCounter’s GlobalStats.
  • 1.2% from W3 Counter.
  • 0.46% from WordPress.comWordPress.com An 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/.

For comparison, the numbers above are very close to the data used to make a decision in 2017 to drop support for IE versions 8, 9, and 10. It’s important to keep in mind that when viewing these statistics in the context of WordPress, these percentages represent tens (if not hundreds) of thousands of users that could potentially be left behind if support for IE11 is dropped. 

In August 2020 Microsoft themselves announced that Microsoft 365 and Teams apps would stop supporting IE in the upcoming months. However, given that IE11 is a component bundled with Windows10, according to the IE Lifecycle it will still receive security updates as long as the Windows version it was shipped with continues to receive support. 

In terms of the current WordPress user experience, a flag was added to not recommend IE in BrowseHappy about 13 months ago, so by now, most WordPress users should be aware. Tied to this, the experience overall is not optimal in IE11 with a high cost of maintenance for developers.

Proposed Policy

The proposed policy for WordPress is to end Internet Explorer 11 support. This was discussed most recently in the February 24th Core Editor Chat and briefly during February 23rd JavaScript office hours in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. More context and discussion have been shared over time in this original Trac issue that seeks to determine clear guidelines around what absolutely can’t be broken in order to help identify development and testing needs. 

Benefits

Dropping support would result in smaller scripts, lower maintenance burden, and decrease build times. For instance, a recent exploration by @youknowriad demonstrated that not transpiling the scripts to IE11 immediately resulted in a net reduction of nearly 84kB in the 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/ JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. built files, representing a 7,78% total decrease in size; these scripts have seen a size contraction up to 60%, with an average reduction of 24%. This is a result of heavily relying on transpilers, further explained by Jason Miller, Web DevRel at Google. Moreover, dropping support would ultimately make WordPress’ currently included polyfill script obsolete, decreasing the enqueued scripts size up to 102kB more.

The smaller downloads would positively impact all users, especially those on slower networks, or computing devices. We expect a result of dropping IE11 support to improve performance for the vast majority of users. 

Potential Concerns/Blockers

TLDR: The concerns are for those who are unable to upgrade, like financial institutions and education sectors, and those who rely on IE11 for screen readers. 

There are major institutions like banking, government, and education that are unable to control when they can upgrade sometimes due to legal requirements, depending on the country. This further underscores the need to determine a policy that takes into consideration both a data-informed approach and the impacted user bases while weighing the potential benefits for the wider web. 

According to a September 2019 WebAIM survey, IE11 is still used as a browser among screen readers with 11.5% share. This is an older survey and IE11’s global share was 2.9% at the time the survey was done according to the sources linked above. It takes time for screen reader software to support newer browsers and the latest versions of popular screen reader NVDA have continued improving and adding support for the Edge browser. As a result, this post embraces an assumption that IE usage among screen reader users has declined since the survey as the software improves and overall usage of IE11 has declined. Please let us know if this assumption is or if there is better data available to refer to.

Keep in mind that there are ways to patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. gaps in functionality that’s determined critical to maintain for a time. This post does not seek to go into technical implementation details though.

Share your feedback about this proposed policy change to drop support by March 18th

This is a tough decision to make and we want to solicit feedback from as many voices across the community it may impact. Please note, this post is not meant to go over any technical fallbacks at this time but to purely discuss the policy of dropping support. 

Once we’ve gathered feedback, the next step will be to consolidate and decide the policy. The actual technical implementation of the policy is most practical to pursue across the numerous WordPress projects. 

Thank you to @mkaz, @annezazu, @youknowriad, @desrosj for help writing and reviewing this post. 

#accessibility, #browser-support, #performance