Accessibility usertest: Twenty Sixteen

The new default theme Twenty Sixteen is close to release, so we gave it to our 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) testers to check it.

Testes who joined: Michelle DeYoung, Gabriela Nino de Rivera Torres, Jeffrey de Wit, Sirisha Gubba, Heather Migliorisi, Tobias Clemens Häcker, Kim van Iersel, Geof Collis, Shaun Everiss, and Rian Rietveld.

Some remarks where not related to Twenty Sixteen but related to WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Those remarks where not included into this report, like the comment form issues. We will open tickets on them later.

Summary is at the bottom of this post.

Test results

Jeffrey de Wit

Firefox and NVDA

• Focusing the 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. makes NVDA go “blank”
• It may just be me, but the author, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., and tag links in the post 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. simply state just that. That is, “themedemos”. Or “Uncategorized”. Nothing else, no context. (Same happens with the widgets, but that’s probably a core issue :))
• I like how the search button is hidden with screen reader text, but it should probably appear when focused.
• When focusing links, it sometimes happens that the page scrolls and makes the link go behind the black border around the page. This usually happens when the link that is to be focused is not in sight when tab is pressed.

That last one seems to be specific to Firefox and IE Edge, I don’t notice it with Chrome because it seems to make an effort to center focused links.

It can be reproduced with the second post – there’s a link under the h6 where you can see this issue, and then from there it goes back up to the author link in the post meta, which is also “hidden”. I’ll have some videos ready shortly.

Firefox:

https://www.youtube.com/watch?v=r35g6b9VU9o

Chrome:

https://www.youtube.com/watch?v=UhqifZnBySI

Michelle DeYoung

Windows 8.1 / Firefox 40.0.3 / Window-Eyes 9.2

Landmarks: Landmarks are voiced. The W3c validator does indicate that the additional role=”specificlandmarkname’ is not needed on the html5 elements (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., form, nav, main, aside, and footer). The questions – has screen reader and browser support grown enough to utilize HTML5 semantics, sans aria landmark roles, to convey the various regions on the screen? In my opinion, I feel aria landmark roles should still be used with the new HTML5 semantics, and I continue to add them to my markup until I hear otherwise. 🙂

Menu navigation: Users should be able to select ‘ESC’ to close a drop-down menu, and then when tabbing or arrowing again they are taken to the next main menu item. This will make it easier to navigate the menu without it being necessary to tab through many items to get to the needed item.

I would recommend making the asterisk on the form labels the same size that it is in the instructional text so it will be easier for low vision users to detect.

Input fields: The color contrast for the border or background colors could be increased. They are difficult to discern. This is part of the minimalistic flat design, however, the light gray can impact users with low vision and they can also look disabled. Note: The input fields look great when they get keyboard focus.

Gabriela Nino

I have taken a look to the front-end with VoiceOver. In overall it was easy to navigate and the elements were well recognized. Opening the sublevels of the main menu was simple too. I was able to access the links and buttons and I did not get stuck.
Something that caught my attention was that images like the post “this is a sticky post” are ignored by the screen reader. I step directly from thetitle of the post to post content.
The images of the Markup: Image alignment worked well with VoicOver.

Rian

Safari, keyboard only

Menu in responsive mode: If the menu is expanded, it is not clear when the menu button gets focus, for example if you want to close it again. The dropdown toggle arrows do not have a clear focus (only change of color, no dotted outline)

Is it a feature, that the menu repeats itself in the footer in responsive mode (I actually quite like that).

Normal menu: Only color change on hover. Active menu item is bold : ok

Page navigation: No indicator current page number for a screen reader. Color is not enough to indicate this is the current page number.

Sirisha Gubba

NVDA/FF

1. Roles are used without aria label (more than one navigation is used)
2. Search button is not visible on the page.
3. Two search fields with role=search are there on the 404 page
4. Screen reader user have to go through all submenu items in order to get to another tab item
5. Also I see color contrast issues with the input fields which would be issue for low vision users.

Note Rian: except for the 5th item these are all extra’s but not required for 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/. 2 AA.

Heather Migliorisi

This theme tested pretty well!

Tested with VO and Chrome.

1. the main nav with sub items could be easier to navigate. Currently, if you want to navigate to “Page B,” you have to tab through the entire main nav, sub items included. I like how Adobe’s Accessible Mega Menu tabs through the top level list items. It also provides the expanded/collapsed state to the VO user.
2. Search field – VO reads “search for” twice
3. Might be nice to be able to skip the list of keywords added to an article

Summary

The main opinion: This theme tested pretty well!
No drastic errors. Yay!

First: can someone reproduce Jeff’s error?

Missing context for sighted users (maybe also a usability issue): The author, category, and tag links in the post meta simply state just that. That is, “themedemos”. Or “Uncategorized”. Nothing else, no context. For screen reader usres there is extra text to give context.

Landmarks: A lot of the remarks where about landmarks. W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. and VAWE now mark elements with the same role as warnings (not errors). Like: Element nav does not need a role attribute role=nav.

Note Rian: We discussed this in the team chat and decided that the roles should stay for now, for backwards compatibility with old 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.

Navigation: three the same remarks:

• Users should be able to select ‘ESC’ to close a drop-down menu, and then when tabbing or arrowing again they are taken to the next main menu item.
• Screen reader user have to go through all submenu items in order to get to another tab item
• Currently, if you want to navigate to “Page B,” you have to tab through the entire main nav, sub items included.

Note Rian: this is not an accessibility error, but a keyboard user usability issue. Might be worth to find a solution for this.

Featured image: There was confusion about the featured image with the link being skipped. This is on purpose to prevent extr noise for screen readers by adding an aria-hidden=”true” to the link.

Input fields: The color contrast for the border or background colors could be increased.

Focus errors:

• search button should show up on focus
• inconsistent focus for responsive Menu toggle button
• submenu toggle responsive menu should have an outline

Page navigation

• no ARIA indicator current page number for a screen reader
• color is not enough to indicate this is the current page number

 

 

#a11y-audit, #accessibility-usertest, #twenty-sixteen