Visual Focus Indication in Left Navigation

Rectangle Indicating Visual Focus

Following up on tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket #28599, one of the proposed options is visual focus indication using a contrasting color rectangle around the border of the item selected. Since color alone should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element, this is a second element in addition to color changes: dark gray to black when Plugins menu is selected, gray to blue text when sub-menu item Editor is selected.

Left navigation menu with Plugins menu selected showing contrasting rectangle around menu item bounding box.

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 menu selected, 2 px contrasting color rectangle indicating visual focus.

Left navigation menu with Editor menu item selected showing contrasting rectangle around menu item bounding box

Sub-menu item Editor selected, 2 px contrasting color rectangle indicating visual focus.

Draft guide for accessibility-ready reviewers

To go along with the accessibility-ready guidelines, I’ve been working on a document to help people who want to help perform 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) reviews on themes. This document is targeted at members of the accessibility team who want to help support the review process by checking themes for accessibility.

Please provide comments, so I can edit them into the most helpful guide they can be!

Theme Accessibility Guide for Reviewers

#accessibility-ready, #themes-2

More WCSF/Team Meetup Planning

Howdy again, folks. We’re working on making sure we have enough room blocks to make sure all the contributors who are coming in October can get a decent rate (or have a room provided by us if needed). Some of you replied to my post from last week and filled in the survey so I’d know you were planning to come, but some haven’t. I just want to make sure we count everyone so we can put you at the same hotel to make the 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. part easier.

If you didn’t read the post before, the plan for the event is:
Sat/Sun — WCSF conference
Monday — community summit
Tues/Wed — team meetups (i.e. 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 being together in a place to talk issues, make plans, work together, etc)

The people who identified themselves as active members of the accessibility team in the survey are:
Katherine Mancuso, Cousett Hoover, Amy Hendrix, John Blackbourn, Joe Dolson, and Joseph Karr O’Connor.

1. Is everyone on that list active on this team? I think a couple of people may have done something at one point but are actually more involved with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but I don’t want to make any assumptions. Could someone let me know which of these fine folks are active here?

2. A quick scroll back through the blog shows me some names that didn’t fill in the survey, like @grahamarmfield and @davidakennedy. If you guys aren’t interested in coming, can you let me know in the comments? If you are interested in attending, can you fill out the survey so I can have you on the list as we start deciding which hotels to put each team in (this goes for anyone on the team that’s not listed above)? We’ll be spread out among 4 or 5 hotels, so I want to be sure we can keep the teams together.

And just a reminder that we have a travel assistance program this year to help contributors who don’t work for a wp-based company and can’t cover travel costs on their own. Apply for travel assistance by June 30.

Thanks!

#team-meetup, #wcsf2014

Accessibility Team Update: June 18, 2014

Visual Focus In Left Navigation

Screenshot of admin left navigation showing Posts menu selected with New Post submenu selected

Posts menu selected with indistinguishable darker black shading, Add New sub menu item selected with text in dark blue. Note that dark blue text against dark gray is hard to see.

Color Alone

Visual focus indicators for wayfinding are relied on heavily by some keyboard-only users. @helen notes the enhanced visual focus indicators now in trunk. Ticket #28267 needs a lot more work bringing the focus style to various places but one area that needs a smart solution is left navigation. Now we are relying on color changes which are, in some instances, too subtle. Indeed, color is not to be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

Suggestions

We discussed this for most of the meeting and here are some suggestions.

  • Helen reports that a blue glow does not look good
  • White outline around menu item with white outline also around selected submenu item
  • Reversing the colors with another undefined indicator element
  • Triangle to the left of main menu item and selected submenu item
  • Underline under main menu item and selected submenu item (might be mistaken for links)

Solution Needed

We need some suggestions for an elegant solution. Bear in mind that there are eight admin color schemes and any solution should take that into account. I have created ticket #28599 to work on this issue. A WordPress 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 shirt to the person who comes up with the adopted solution!

WordCamp SF 2014

Howdy, accessibility team! We’re getting ready to publish details about the plans for WordCamp San Francisco this October (which includes the opportunity for a mini team meetup), so if you’re thinking of attending, please read the post at https://make.wordpress.org/updates/2014/06/12/wordcamp-san-francisco-travel-contributor-days/ and take the short survey linked at the end of it so I’ll know how many team members to plan for. Don’t worry, this isn’t a commitment or anything, I just need to get some rough numbers for budgeting purposes (we’re doing a travel assistance program this year, if that makes a difference). Thanks!

#team-meetup, #wcsf, #wcsf2014

Theme Review Accessibility Guidelines Update

In anticipation of WordPress 4.0, I’ve been working on revising the Theme Review 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) guidelines. With the release of WordPress 4.0, the theme review accessibility guidelines will no longer be considered “draft” guidelines.

My goal is two fold: first, to make them easier to understand by adding examples, and second, to reorganize them so that the most commonly encountered issues in themes are listed first.

Additionally, I’m adding a section for “recommended” guidelines.

Please review the draft of the updates and make comments on this post. Thanks!

Accessibility Team Update: June 11, 2014

New Accessible Theme

Joe Dolson is working on a new accessible theme for the Cities series using an innovative modular approach 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) by gathering up accessibility concepts into separate files.

Joe says:

“I’m explicitly placing all the accessibility-specific code into a11y.php and a11y.js, to make them easy to find. This is intended to be a useful resource for theme developers, so I want everything to be easy to find.”

Also of note is skiplinks.js which fixes a bug in WebKit. Simply using an anchor link for the skiplink isn’t enough for WebKit, because keyboard focus will not follow visual focus without 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/.. Joe will be presenting this new theme in a session at WordCamp Chicago this weekend.

Accessibility Theme Check Process Enhanced

We are aware that a few themes that are not accessible have arrived in the theme directory with the #accessibility-ready tag. Perhaps the theme creators misunderstood the tag or copied it from another theme without thinking. We got a message from someone who knows accessibility that he bought a theme based on the fact that the free version has the #accessibility-ready tag. Expecting it to be accessible, he was disappointed. Contacting the theme creator he found out that they will be uploading a new free version without the tag.

Joe Dolson on the process:

“We’re still struggling with themes getting through the process without getting audited, but we have a recourse for this now. The official policy is to give the author notification that their theme needs to go through the accessibility-ready review to keep the tag, and that they have 72 hours to begin rectification – either by uploading a new version without the tag or by uploading a new version that will begin the process of meeting the accessibility-ready requirements. After 72 hours without a response, the theme will be suspended from the theme repository.”

Unification of Visual Focus Indication

It is essential to provide a visual cue to sighted keyboard-only users letting them know where they are on the page. There is no standard look for visual focus indicators. The issue is made more complex because user agents approach this in different ways. @helen talked with us last week and this week again about the fact that the visual look of focus indicators is not unified, and in some instances is not perceivable. For example, on the Media Library screen this is a screenshot showing “apply” button with dotted line focus indicator active and it is not perceivable. One tab press to the right of the “apply” button is the “All dates” select menu selected with a screenshot showing “All dates” select menu with blue glow and dotted line.

The base look might be the approach taken by WebKit, a blue glow. A base look with more than one element is what we seek. Even if the color blue cannot be perceived there is still the glow. This week we have a goal of organizing the approach 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. in such a way that the visual focus indicators are unified and perceivable.