WordPress Accessibility Team position on default full screen mode in the editor

During the last weekly meeting, the team discussed the recent change of default to the full-screen mode in the editor. There is a general concern about the usability and 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) implications this new default setting will have.

As a starting point, the WordPress Accessibility team is opposed to this change as it breaks some WCAGWCAG WCAG 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/. success criteria:

  • Success criteria 3.2.3: Consistent navigation
    “The intent of this Success Criterion is to encourage the use of consistent presentation and layout for users who interact with repeated content within a set of Web pages and need to locate specific information or functionality more than once.”
  • Success criteria 3.2.4: Consistent identification
    “The intent of this Success Criterion is to ensure consistent identification of functional components that appear repeatedly within a set of Web pages. A strategy that people who use screen readers use when operating a Web site is to rely heavily on their familiarity with functions that may appear on different Web pages.”

The main issue is that the fullscreen mode (when it’s activated by default) removes the top bar and admin menus. Navigation should stay consistent in the whole admin experience. There is another similar issue in WordPress admin, but this change happened years ago. This is not a reason to reproduce such a mistake.

If this change is here to stay, it would be nice to add a modal to explain how to restore the normal mode as this is not easily discoverable for the moment.

The current mechanism to exit full screen is a “Go Back” button using the WordPress Logo that sends the user to the posts list. It is worth noting that users are not necessarily coming from the posts list, and the “go back” button (WordPress logo) is not relevant as it takes the users back to a screen that wasn’t necessarily visited before.

There is also a concern about the date on which this change was introduced. If it had been introduced during the development cycle, the Accessibility team could have provided proper information to 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/ team on the accessibility issues concerning this feature.

This change breaks the rule decided for WP 5.4: new features and enhancements can’t land during 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. cycle. While the full-screen feature itself is not a new feature, the change to including it as the default behavior constitutes a significant change to the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. and how many users will use the editor. The related ticket was opened and merged only few hours before WordPress 5.4 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. 1.

If this feature is going to stay in WordPress 5.4, the accessibility team believes it will need a post mortem on Make/CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. The goal would be to avoid this situation (including changes that late in the release cycle) being repeated in future releases and to make sure important changes introduced in WordPress are accessibility compliant.

Note also that this change was discussed in the #core Slack channel during the March 9, 2020 devchat meeting and the majority of the attendees appeared to be opposed to it. In conclusion @chanthaboune was going to give feedback to the project lead. As no decision has been communicated for now, the accessibility team assumes this change is probably going to stay in WordPress 5.4.

#core-editor, #gutenberg

Agenda for Accessibility Team Meeting: November 8th 2019

This is the proposed agenda for the weekly 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 meeting on Friday November 8, 2019 at 15:00 UTC.

  • Move Accessibility team meeting time according to end of daylight saving time
  • New team Representatives for 2019-2020
  • Discuss issues recently raised on accessibility 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/. channel:
    • Twenty Twenty Read more 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. (raised by @poena)
    • Initial focus on 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/ blocks (raised by @gziolo)

If you have any additional topics to propose, please comment below.

The Accessibility bug scrub will be held on Friday November 8, 2019 at 14:00 UTC.

This meeting is held in the #accessibility channel in the Making WordPress Slack (requires registration).

#gutenberg, #team-reps, #twenty-twenty

Accessibility Team Meeting Agenda: 13 September 2019

This is the proposed agenda for the weekly 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 meeting on Friday 13 September 2019 at 15:00 UTC.

If you have any additional topics to propose, please comment below.

The Accessibility bug scrub will be held on Friday 13 September 2019 at 14:00 UTC.

This meeting is held in the #accessibility channel in the Making 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/. (requires registration).

#5-3, #gutenberg, #twenty-twenty

Accessibility Team Meeting Agenda: 7 September 2019

This is the proposed agenda for the weekly 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 meeting on Friday 7 September 2019 at 15:00 UTC.

  • Discussion about 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/ recent post: Defining Content Block Areas
  • Progress report on WordPress 5.3 TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. tickets
  • WordPress 5.3: assign owners for tickets assigned to WordPress 5.3 milestone
  • Open floor

If you have any additional topics to propose, please comment below.

The Accessibility bug scrub will be held on Friday 7 September 2019 at 14:00 UTC.

This meeting is held in the #accessibility channel in the Making 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/. (requires registration).

#5-3, #gutenberg

Accessibility Team Meeting Notes: 2 August 2019

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/: Support Navigation and Edit Mode

For reference, see the related pull request on Gutenberg GitHub repository.

The idea is to use tabs key to provide a way to navigate between blocks with the keyboard (navigation mode). Hitting enter switch to edit mode (you can edit 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. you navigated to). Hitting escape switch back to navigation mode.

All meeting attendees agree that this is a good improvement. It would be necessary to be extensively tested by as many persons as possible, including users of assistive technologies.

The next 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 release is planned for August 12th. 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 will publish a call for testers with some testing scenarios to test this big improvement.

Improving the Accessibility Team feedback on Gutenberg issues and pull requests

There is a need to follow Gutenberg development on both GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ and 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/. (in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-editor channel), and @afercia is currently spending a lot of time to follow it’s development, sending issues and reviewing pull requests.

As @afercia said: As of today there are 37 Gutenberg issues and pull requests with the “Needs Accessibility Feedback” label. The Accessibility Team need more persons able to follow that closely.

@nataliemac volunteered to help monitoring the “Needs Accessibility Feedback” label on Gutenberg GitHub Repository.

The Accessibility Team will discuss the possibility to find ways to have sponsored contributors (even a couple hours a week would be a great sponsorship!) during the next weekly meeting.

WP Accessibility Day – organizing team & next steps

Reminder: it was previously decided to evaluate the possibility to organize a dedicated WordPress global accessibility event, like polyglots do with WordPress Translation Day (WPTD).

The idea is to organize a 24-hour virtual event all around the world with some video conferences and focused on contributing to WordPress accessibility.

A couple of weeks ago, a spreadsheet was shared so Accessibility team contributors could sign up to be involved in this organizing team.

A dozen people signed up to the organizing team: @audrasjb, @joedolson, @nataliemac, @SergeyBiryukov, @bamadesigner, @gianwild, @bdeconinck, @jaymanpandya, @kevinbazira, @robin2go, @foucciano and @ryokuhi 🎉🎉🎉

The next step is to discuss the main focuses of the event and to divide the roles between the organizing team.

Feedback on Theme Review Team’s post about supporting keyboard navigation

For reference, see the related post drafted by @poena.

@audrasjb raised a missing item: focus order that should match visual order.

If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

Source: Web Content Accessibility Guidelines 2.0

@nataliemac added the post should include a warning about not relying on overuse of tabindex to accomplish this.

@afercia raised another item: there is a need to clarify that the native browsers outline can be removed but only if an alternative, like an accessible focus style, is provided.

@anevins: Theme authors should also be encouraged to use the Accessibility support forum if they get stuck.

Openfloor

During the next weekly meeting, the Accessibility Team will assign owners for the 53 tickets in the 5.3 milestone.

#5-3, #gutenberg, #wordpress-accessibility-day

Accessibility Team Meeting Notes: 26 July 2019

Meeting transcript on Slack

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. Directory in WordPress Admin

During WCEU’s Summer Update, @matt presented a new wp-admin section for Blocks.

For reference, see Make/Design blog post about Block Directory in WP-Admin Concepts and related GitHub Issues.

WordPress Design Team confirmed this design is meant to become the default for any future admin page.

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 raised some initial feedback for these early design:

  • The main h1 is not the first element within the main content area.
    “Add new”, search, help, and “mystery” menu are all above the h1. It’s important to get the heading before getting whatever tools are related to it. As these tools do change contextually, they are context-sensitive tools and headings are here to provide that context.
    When users land in a WP-Admin content area, they need an answer to the following questions: 1) What is this about? 2) What can I do here?
  • Center aligned multi-line text is problematic for low vision users. Given how little use of it there is, it’s not a huge concern: it’s only a problem in the text under the h1, as it causes low-vision users to have to hunt for the start of the next line. It’s not great, but it’s probably not a deal breaker, as it’s not primary content.
  • Icon-only controls:
    • The “more” button icon (three vertical dots) purpose is not very clear.
    • The current 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. implies that the user need to toggle the search to enable it, which is a new UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. interaction for search.

The summary here is that the Accessibility Team have concerns about the header of these screens, which needs to be reconsidered in light of:

  • Proximity of controls
  • Giving context before tools
  • Use of icon-only controls

Note: @melchoyce shared an alternative design for the header of those screens after the meeting.

WordPress Accessibility Day – next steps

Reminder: it was previously decided to evaluate the possibility to organize a dedicated WordPress global accessibility event, like polyglots do with WordPress Translation Day (WPTD).

The idea is to organize a 24-hour virtual event all around the world with some video conferences and focused on contributing to WordPress accessibility.

First, we need an organizing team: about 10 people to evaluate deeply the feasibility and the scope of the project.

Contributors are welcome to add their name in this spreadsheet to signup to the organizing team. Then we can start organizing details and time frames. The group that plans what the event will be doesn’t necessarily have to be identical to the group that runs the event.

Usage of .screen-reader-text class in accessibility documentation

Theme Review Team contributors raised some concerns about the current screen-reader-text class documentation.

First, the way .screen-reader-text is documented is inconsistent – it’s a mix of saying “this is the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. for .screen-reader-text” and “.screen-reader-text doesn’t need to be hidden”, and that’s contradictory. Accessibility people understand what it mean by that, but people being introduced to the concept don’t.

Instead of indicating that .screen-reader-text doesn’t need to be hidden, it would be better to say that this specific CSS is the required CSS for that class, and provide documentation on how to change the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites.. The documentation should highlight the point of difference between visually hiding an element versus actually hiding it from the browser and accessible technology.

This will increase consistency with usage of .screen-reader-text – if somebody wants that text visible in a theme, then they can change the HTML; and it won’t be overridden by other plugins, etc.

Additionally, there’s some clarification required for the .screen-reader-text:focus CSS. The provided CSS will always set the focused objects into the skip-link position, but that may not be appropriate if the theme author is not styling skip-links. The document should indicate clearly that if focused screen reader text is not a skip-link, the positional elements of this need to be changed.

@joedolson is going to take care of rewriting the related docs and will work with @joyously to ensure the new documentation is clear enough for theme authors and WordPress developers.

Open floor

@nataliemac is looking for volunteers who will be at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US to be teaching assistants in a 2-hour accessibility workshop. They will be leading up to 100 attendees through some general accessibility concepts and testing and fixing accessibility issues on their own websites.

@poena: in only a few weeks time theme authors will be required to support keyboard navigation. The Theme Review Team is going to publish a post to help them prepare.Accessibility Team contributors are welcome to read the public draft and to share any concerns by pinging @poena on accessibility 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/. channel or by commenting this Make/Accessibility post.

#documentation, #gutenberg, #wordpress-accessibility-day

Accessibility Team Meeting Notes: 19 July 2019

Meeting transcript on Slack

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/ experiments settings page

The feedback needed is on the settings page: has it been implemented as recommended? See related Gutenberg GitHub pull request for reference. That page is going to appear under the Gutenberg admin menu.

@karmatosed gave some backstory:
Today, if you wanted to try or test these features you would have to add code in the console. This is not a great way forward. It excludes and it makes testing really problematic. That’s what the pull request looks like, in release this doesn’t exist yet. What feedback is needed, is if the pull request implements the settings page as expected for 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).

@afercia: one problem of the Settings 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. with regards to checkboxes is that the checkbox labels needs to be placed on the right of the checkbox. I also think it’ll help to have a short description under each option that explains a little more about what each option is. Of course, that leads to duplication of the bold text on the left and real elements, but that’s a historical problem.

Couple years ago we experimented improved Settings API, proposing to not use the two columns layout. That would solve a lot of problems but needs design. And it’s a bit out of the current scope. An improved WordPress Settings API with default render callbacks and a new accessible layout.

@nrqsnchz: In terms of a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), I’m thinking this each group should be marked up as a fieldset? What does everyone else think?

@afercia gave a code example: Discussion settings:

<tr>
    <th scope="row">Email me whenever</th>
    <td>
        <fieldset>
            <legend class="screen-reader-text"><span>Email me whenever</span></legend>
            <label for="comments_notify">
                <input name="comments_notify" type="checkbox" id="comments_notify" value="1" checked="checked">
                 Anyone posts a comment
             </label><br>

            <label for="moderation_notify">
                <input name="moderation_notify" type="checkbox" id="moderation_notify" value="1" checked="checked">
                A comment is held for moderation
            </label>
        </fieldset>
    </td>
</tr>

@karmatosed: If that’s going to be the recommend way let’s ship it.

WordPress Accessibility Day

Context: last week, it was decided to evaluate the possibility to organize a dedicated WordPress Global Accessibility Event, like polyglots did with WordPress Translation Day (WPTD). The idea is to organize a 24-hour virtual event all around the world with some video conferences and focused on contributing to WordPress accessibility.

To organize such an event, the accessibility team needs at least 10 organizers and some support from other teams. That would be interesting to connect with WPTD organizers.

@ryokuhi: Last week we decided to leave a week so that everyone could check their possible involvement. I don’t know how are other local 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/. channel organized, but (at least in Italy) we have a dedicated local channel for a11y. How about asking people involved in accessibility in their local communities, but not in the Make/WordPress general accessibility Slack channel, to take part in the Accessibility Day organization?

@afercia: Maybe the first step would be pinging persons from different countries and ask this question.

We identified this page as a list of the local communities Slacks: https://make.wordpress.org/polyglots/handbook/about/teams/local-slacks/ That would be great to have some feedback to know if that list is up to date.

@sami.keijonen to ask in Finnish Slack Group. @audrasjb to ask in French Slack Group. @karmatosed to ask in UK Slack Group.

There is a public Google Document to share ideas on the event organization.

Next week agenda items

@afercia proposed one Agenda item for next meeting: 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. Directory in WordPress Admin.

During WCEU’s Summer Update, Matt presented a new wp-admin section for Blocks. @afercia want to share those early concepts during next Accessibility Team Meeting. In the meantime, please have a look at Block Directory in WP-Admin Concepts Make/Design blog post and the related GitHub Issues.

#gutenberg, #wordpress-accessibility-day

Accessibility of Gutenberg, the state of play

TL;DR

How accessible is 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/ in its current state (version 2.4)? To answer this 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 set up a list of minimum requirement, did code reviews and research, gave recommendations and set up user tests.

The short answer is:

  • Gutenberg still needs extensive work to meet basic standards, like keyboard accessibility and semantics
  • Especially for screen reader users, Gutenberg as it stands right now is a dramatic step back in usability
  • We need to write a manual/documentation for assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology users

From the start

During development, almost from the start, Andrea Fercia (@afercia) did extensive a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) (accessibility) testing and research. He and others created issues labeled accessibility on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ to address the issues found (Andrea created more than 50 of them).

At the moment 70 a11y issues are open, 166 are closed. A lot has been addressed, but there are still very important issues open (like for keyboard accessibility, tab order and navigation).

User testing

When Gutenberg 2.3 was released, Tammie Lister (@karmatosed) considered it ready enough for a complete accessibility test.

We wrote a user test, that includes the basic functionality needed to publish a post. Like add a title, headings, paragraphs, a list, a table an image and a video, use 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. options and publish.

On our testserver wpaccess.org we installed 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, version 2.3, and gave our a11y test team access. Joe Dolson also recruited accessibility experts for a test of version 2.4 at the CSUN conference. All results are reported in the Google spreadsheet Gutenberg a11y test results.

So far we’ve got good quality test results for

  • Keyboard only
  • Dragon Naturally Speaking
  • VoiceOver / Safari
  • NVDA / Firefox

Andrea created new GitHub issues from the reported problems or added extra information with the already reported ones.

Videos with user tests

Note: These users (Eric Wright and Sina Bahram) are leading accessibility experts, using their assistive technology on a daily basis and using WordPress for their work.

 

Minimum requirements before merge

To set a baseline, what should be fixed before merge we set up a list of requirements:

  1. Keyboard navigation through blocks needs to be greatly simplified and streamlined
  2. For some components, there’s the need to constrain tabbing within the component (i.e. they should behave like “modals”)
  3. The publishing flow needs to be simplified, currently its accessibility is terrible
  4. Everything needs to live inside the landmark regions
  5. Text mode: a simple textarea is the only guarantee to enable users to publish content, regardless of the device / technology they use
  6. Write documentation for keyboard and screen reader users.
  7. Consider a mechanism to customize shortcuts, e.g. Cmd/Ctrl + backtick, see issue #3218
  8. Block toolbars position counter intuitive for keyboard users, see issue #3976
  9. The Date picker must be keyboard accessible

Severe issues

One of the most severe issue is the keyboard accessibility. The keyboard tab order is unpredictable. The tab order for and backwards is not the same. Publishing a post is a puzzle and the date picker is unreachable with a keyboard only.

Another issue is the need for quick navigation tools, like shortcuts and better use of landmarks and headings. There are so much more actions to take for adding or modifying a block. Compared to the current classic editor, publishing a post with a screen reader takes much more time and effort.

Because the extensive use of icons, voice recognition users have to guess the accessible names for buttons to activate them. This needs a design decision.

Actions to take

  • Fixing the keyboard accessibility and screen reader navigation is a high priority. Andrea opened issues for this and we need to prioritize these
  • At WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. London and Europe we will do extra user testing with assistive technology and discuss the results with Tammie Lister and the Gutenberg developers present
  • The accessibility team needs to take responsibility for the manuals and documentation. This documents only can be written after the minimum requirements as listed above are met

#accessibility-usertest, #gutenberg

Amanda’s Thoughts On “Gutenberg and the WordPress of Tomorrow”

Good post by Amanda Rush (@arush), about the need for good documentation and manuals for 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/ users.

Thoughts On “Gutenberg and the WordPress of Tomorrow”

#gutenberg

Screen reader user experience with Gutenberg

The last weeks we let the WPA11y test team try out 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/.

Responses

Working with blocks takes some getting used to. I don’t like it when the editor takes over the way I work this way. Can I switch this off? I see now that there is a link in the list table: “Classic editor”. This should be easier to find.
I can imagine blocks will be useful in some cases. The future will tell.

While selecting and copying text in the blocks strange things happen. The cursor gets lost and I have to click the mouse to return into the text.

With 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. settings the user can select colours for text and background. It would be useful to have the name visible on hover. This will be useful for colourblind people.

User of JAWS/IE: There is way to much going on and far too many menus to deal with. With the current version I can hit the f key 3 times and get to the Title, now it takes 3 times as much if I manage to land on it after trying to add something. I find it very difficult to accomplish anything because of the many menus and options. Please let the option for the “Classic editor” stay.

User of NVDA/FF56: Well I doodled with the editor, the best thing about it, well there isn’t, I guess the heading where the title should be is nice.
The rest, I was able to add a block of text, typing it up but the publish menu I couldn’t exactly navigate, I preferred the button as it was.

There are a lot of buttons a lot unlabeled. I found Gutenberg full of clutter, buttons and the like.

Wrapping this up

Blind screen reader users have a hard time navigating and figuring out how things work. That’s understandable, all users have that issue while they learn the new interface. But Gutenberg is a much worse user experience for them, lots more buttons to click and actions to take for the same task. A way to help them may be keeping the option for the classic editor.

I think we started too soon testing Gutenberg with the wpa11y test team. Most of them kind of broke down on Gutenberg and don’t want to take the energy to test anymore. Lesson learned for next time.

Thanks Geoff Collis, Wim Moons and Shaun Everiss for testing.

#gutenberg