Week in WPa11y, April 5 -11 2017

Results Editor survey

Editor Experience Survey Results

105 respondents use a screen reader. 94 of those people feel the screen reader experience is sufficient or better. Other assistive technologies used by the respondents include: On-screen keyboards, alternative input devices like wands & sticks, voice recognition programs, screen enlargers, text to speech synthesizers, and braille embossers.

Some quotes from the survey questions about 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) issues with the Editor:

You need to add more notifications for screen reader when somethings change on the page.

I reached and pressed the Publish button and forgot that there are metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes after that. So then I had to fill up the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and tags then shift + tab to go back to Update the post.

@mapk gave @afrecia a list of all the accessibility related answers for him to take a closer look 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. Torino

Andrea: There were a variable number of 6-8 participants at the 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) table during the day. That’s a huge number for a11y during contributor days. Most of them were beginners so we’ve spent most of the time on introducing to accessibility. Run some keyboard accessibility testing, followed by an introduction to screen readers basic principles. In the last part of the day we’ve discussed all together #35497 – List tables: Post format links improvements.

Dana Donato (@danuccia) joined the WPa11y meeting 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/. after joining the contributors day in Torino. She wants to help with tickets.

Summary of the discussion during 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. meeting

Notes by @afrecia:

  • use more settings sections to group fields that belong together (note: sections that group logically related controls should be fieldset elements)
  • 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/ flow: use distinct branches for design/layout changes and Settings API improvements
  • planning new GH issues to open
  • CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. naming conventions: the general issues here are trying to establish easy and maintainable patterns, taking into considerations the CSS Roadmap
  • keep selectors specificity as low as possible, avoid overqualified selectors
  • @helen suggested selectors should also provide a context:
    • “In an ideal world, you would have some baseline stuff for elements themselves, and then you scope upward to apply specific stuff based on context as needed”.
    • “The goal should be for people (devs) to not have to do anything involving class names or CSS the vast majority of the time.”
  • @helen will try to start a doc to dump thoughts on the best option we have for CSS naming
  • CSS classes to target stuff in JS: they should be separate from classes used for styling
  • CSS classes for state naming for JS (e.g. .is-active or .is-dismissible)


Proposal for a new a11y-task ticket:  CSS generated content.

We’ve discussed a few times the issue about font icons or other characters generated with CSS ::before and ::after. In some cases, they can be announced by screen readers. At the moment, the only way to make sure they’re not announced is using a <span aria-hidden="true"> element and target that with ::before and ::after rather than the main element. We should progressively introduce this as a best practice and also make people aware of the problem.

Andrea will write the ticket and @trishasalas will do research on how CSS content is used in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Note: a11y-task tickets are issues that should be addressed but we don’t have time and resources to tackle right now. Starting a discussion about them would be valuable though.

Current work a11y team

  • Gutenberg: as soon as the featured 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 is released we will test it.
  • TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. Cloud adjustments (tag-cloud): #35566 #40187 #40186 #40184 #40138@samikeijonen and @davidakennedy
  • Settings API plugin: @flixos90 and @afercia
  • Colour contrast in the Admin: @adamsoucie
  • Required fields @rianrietveld
  • Non-link links: @cheffheid
  • CSS generated content: @trishasalas
  • Remove title attribute in the Admin: any volunteer



  • #31476: Semantic elements for non-link links: /wp-admin/includes/widgets.php
  • Settings API plugin

Both are also installed on our test server at wpaccess.org

Interesting reads this week

  • How to Design for Color Blindness by Robyn Collinge
  • Project on GitHub: Accessibility Object Model, aims to create a 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/. API to allow developers to modify (and eventually explore) the accessibility tree for an 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. page.

Next meetings in Slack