Tag Archives: WordPress Accessibility Day

Jb Audras 5:17 pm on August 2, 2019
Tags: , , WordPress Accessibility Day   

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

Jb Audras 5:54 am on July 29, 2019
Tags: , , 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

Jb Audras 12:55 pm on July 25, 2019
Tags: , 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