Accessibility Usertest Create and edit links inline

In WordPress version 4.5 there will be a new way of adding links in the content: create and edit links inline. The URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input and the search field are now one and the same.
This is similar to what Google Docs does. Search results are shown as an autocomplete dropdown.
Related ticket: #33301.
The test are done from Februari 18 until Februari 24 2016.

Conclusions are at the bottom of this post.

To test this 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) we set up a WordPress 4.5-alpha nightly install.
And asked our testers:

  • Can you access the little window with the input field for the link
  • Can you understand how to add a link using this inline window
  • Can you understand how to search for a page using a search word using this inline window
  • Is this usable with your 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?
  • If you use a screen reader: can you hear the search result if you enter a search word instead of an URL
  • Are you missing functionality to make this work for you
  • Which browser and operating system did you use (for example Safari on Mac)
  • Which assistive technology did you use for this test

Testers who joined: Jeff de Wit, Geoff Collis, Tobias Clemens Hacker, Reagan Lynch, Ruth Niesenbaum, Gabriela Nino, Michele DeYoung, Sirisha Gubba, Wim Moons and Marco Zehe.

Test results for keyboard

Wim Moons: Windows7 & FireFox with loupes.
If you type a word, a list appears. If you walk through the list with the arrow keys the text in the search field disappears. I found this confusing.

Geoff Collis: JAWS 14.5 IE 11
A bit confusing at first but I managed to do it. I wasn’t sure what happened, all I heard was “apply” after doing it so moved around and found out I could type the url, needs some work to let me know where I was after the keystroke command.

Of note:, when I first typed in the url and used tab to go to the apply button it didn’t work, took me right out of the edit box, when I came back I was able to get to it by tabbing this time.

Jeff de Wit: In Firefox, with just a keyboard:
You specifically have to tab to the submit button to add the link without issues. If you press Enter on the input field, it will also add a linebreak where the cursor is when you opened the link dialog (in addition to adding the link). Here’s a video of that:

What I’m doing in the video:

  • Select some text
  • Hit Ctrl + K to open the link dialog
  • Type in the URL for Google
  • Press Enter
  • Press Ctrl + Z to “revert” the random line break that appears

Also not super clear how to remove the link this way, since you can’t actually get to the pencil / remove icons. It’s not impossible to remove links though, but not sure how “obvious” it is that you can also remove the URL text and hit apply to remove the link.

Michele DeYoung: Firefox 44.0.2 and Windows 10.
Using the spacebar instead of Enter when creating a link using the keyboard will make it so a line break does not occur after the text link.

Test results for screen reader

Jeff de Wit: In Firefox, with NVDA enabled:
It seems to announce really well. It even makes it clear when you’re moving your cursor to a link. Not sure if it’s a good idea here to also announce what URL it’s linking to (Not what links usually do, and it may add too much noise, but it’s editing content and it may help with spotting broken/mistyped links).

One thing I did notice though, is when I hit the “Advanced” button NVDA only announced “alert” for me. It doesn’t say anything about the text field I have focus on (even though it’s supposed to, and I do see it in the NVDA speech log, so it may be related to my NVDA settings).

Gabriela Nino: Mac + Safari + VoiceOver

  • After using cmd + k to open the window: The window opens but Voice Over does not announce it. So is not clear for a non sighted user what exactly is happening.
    Right after the window is opened, the focus is supposed to be on the URL input text. But this behavior is not consistent, the focus is sometimes on the input text and sometimes not. When is not on the input text, I managed to give it focus using the tab key. But a non sighted user might not be able to figure this out.
  • Voice Over is sometimes announcing the input text placeholder, but mostly of the times it does not.
  • On the advanced window, when searching for existing content, Voice Over does not announce the results found.
  • It was impossible to access to pencil / remove icons, tried using cmd+k but instead of allowing me to access the pencil and remove icons, it opens the little window with the input field for the link. Without mouse or when using Voice Over, I’m not able to select those icons.

Michele DeYoung: Firefox 44.0.2 and Windows 10.

I can understand how to add a link using this inline window, but only if the focus is in the url input field. After adding multiple links, when other text is selected to create a link, the inline window focus was on the last element in the window that was used, for example – the Advanced button. This will be confusing for screen reader users when the window launches and it voices “Advanced” or “Apply.”

Note: When the inline window opens and the last focus was on the Advanced button or Apply button, and Advanced is selected, the pop-up for the Advanced selection will open, however, the keyboard focus remains in the window behind it. Keyboard focus is correctly in the pop-up when the starting focus point in the inline window is in the input field.
The pop-up is not announced as a dialog, and a heading should be announced with it.

Advanced Pop-up: When the search is entered, if I tabbed I would go to the results container, however, NVDA would just voice that number of items in the list. It would be helpful to know that it is the results list. When arrowing through the list each item was voiced.

Another way: when using the down arrow to move from the search entry, I can move into the search results list (still not clear that it is the results list), but when I arrow to each item in the list I just hear the search entry repeated for each one.

Tobias Clemens Hacker: Chrome Vox/ Chrome on Windows 7
The buttons have no distinguished voice output. I don’t know which one is “Apply” and which one is “Advanced”. For some reason the aria-label in the containing div is not being output.
I miss distinguished voice output for the buttons.

Reagan Lynch: Windows 7 running IE 11 with JAWS 17.
If I paste a link into the text field the raw link appears in the text of the post, but the word I highlighted is a link with the link pointing to <a href=”http://example.com”>highlited text</a>
I was unable to insert a link using the new method. I was able to get into the advanced dialog like we currently have, but only after pressing ctrl+k and then arrowing right and exiting forms mode, and then my text highlight was gone.

Sirisha Gubba: IE and FireFox with NVDA

  • I can access the window with keyboard in FF but not in IE. AT with short cut keys provided
  • I can’t understand with NVDA as it announces “Toolbar” and focus is taken to the apply button.
  • I can see the placeholder in FF. With NVDA it is not announcing as soon as the small window gets opened but if user uses back arrow it reads the instruction.

Ruth Niesenbaum: Chrome and NVDA with Windows 10.
It was not clear how to enter data: I started entering a word and it did not tell me that it found options, when I went down to the options it did not read them loud so it does not say the When I press the down arrow and enter the list of urls it says : unknown 2 of 7 and it does not read the name of the post

Conclusions

Some issues are already fixed in the current version, using these test results.

 

The issues that remain are according to @afercia (Andrea Fercia)

Reagan Lynch Using Windows 7 running IE 11 with JAWS 17:

If I paste a link into the text field the raw link appears in the text of the post, but the word I highlighted is a link with the linnk pointing to
highlited text

Andrea: after last changes I’m not even able to insert a link with IE 11

Jeff de Wit:

If you press Enter on the input field, it will also add a linebreak

Andrea: maybe fixed, but I’m pretty sure it still happens when *pasting* a link in the input field and then pressing Enter

Also not super clear how to remove the link

Andrea: totally agree

Michele DeYoung: NVDA Firefox 44.0.2 and Windows 10.

Using the spacebar instead of Enter when creating a link using the keyboard will make it so a line break

Andrea: it’s a legitimate expectation since it’s announced as “Button” it should work also with spacebar

Jeff de Wit: In Firefox, with NVDA enabled:

when I hit the “Advanced” button… (it’s about the Advanced modal dialog)

Andrea: yeah, the link modal dialog still needs some 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) treatment. We should fix that but it’s a bit unrelated

Gabriela Nino: Mac + Safari + VoiceOver

It was impossible to access to pencil / remove icons, tried using cmd+k but instead of allowing me to access the pencil and remove icons, it opens the little window with the input field for the link. Without mouse or when using Voice Over, I’m not able to select those icons.

Andrea: we should make more clear the Alt+F8 shortcut, maybe it’s a bit confusing now

Gabriela Nino: Mac + Safari + VoiceOver

After using cmd + k to open the window: The window opens but Voice Over does not announce it. So is not clear for a non sighted user what exactly is happening.
Right after the window is opened, the focus is supposed to be on the URL input text. But this behavior is not consistent, the focus is sometimes on the input text and sometimes not. When is not on the input text, I managed to give it focus using the tab key. But a non sighted user might not be able to figure this out.
Voice Over is sometimes announcing the input text placeholder, but mostly of the times it does not.

Michele DeYoung: NVDA Firefox 44.0.2 and Windows 10.

I can understand how to add a link using this inline window, but only if the focus is in the url input field. After adding multiple links, when other text is selected to create a link, the inline window focus was on the last element in the window that was used, for example – the Advanced button. This will be confusing for screen reader users when the window launches and it voices “Advanced” or “Apply.”

Andrea: totally agree, already in my list

When using the down arrow to move from the search entry, I can move into the search results list (still not clear that it is the results list), but when I arrow to each item in the list I just hear the search entry repeated for each one.

Andrea: works for me using Firefox + NVDA

Andrea: additionally:

  • after 36703 in IE 11 can’t insert a link
  • we’d recommend to add an audible confirmation message when a link is successfully inserted from the inline toolbar; also, when a link is successfully selected in the advanced modal dialog; of course messages need to be different since in the modal the link is inserted only after users press the “Update” button

And further: For next tests we will ask the test team not to test with ChromeVox anymore. This screen reader is too limited in functionality. And if a tester uses NVDA: the preferred browser to use with this screen reader is FireFox.

Update March 2, 2016: additional tests

Marco Zehe: Safari and Chrome on OS X with VoiceOver. That is, Chrome + VoiceOver, not ChromeVox.

I can confirm the brokenness of the search results when arrowing up and down. I do get the focus into the combobox consistently, though. And here’s the thing: In Chrome, while that has a nasty bug with no text being read out when typing or arrowing, the search result widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. works. So whatever is going wrong has something to do specifically with Safari’s interpretation of WAI-ARIA.

A few ideas:

  1. I assume you are using aria-activedescendant when pointing at the various search results when arrowing up and down, right? Are you also adding tabindex=”-1″ to these role “option” items to make them focusable, but not include them in the tab order? If not, add them ad see if that makes a difference.
  2. Are you using aria-owns? If so, that may be interfering somehow, see if you can do without that.
  3. Or are the items spoken via a live region? I do not know the code, so these are just some things that popped into my mind as possible reasons.

#a11y-audit, #accessibility-usertest, #testing

Accessibility usertest: Twenty Sixteen

The new default theme Twenty Sixteen is close to releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software., 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:

Chrome:

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.

page navigation twenty sixteen

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

Accessibility Usertest: Select2

In the last 2 weeks @lindsaymac and @helen requested if 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 could take a look at Select2.  Select2 is a jQuery replacement for select boxes and gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

But how accessible is it, and is it accessible enough to include into WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.? Some research has been done by Drupal, but there are still issues open on GitHub.

On the Select2 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/ there are examples, styled with bootstrap. To insure we only test the select2 functionality, we made a series of test pages with the minified JQuery and select2.css and select2.js only.

The questions we asked our testers:

  • Can you select an option
  • Can you remove a selected option
  • Is it obvious to you how to select an option
  • If you use a screen reader: did you get sufficient feedback on what was happening
  • What problems did you have trying to select an option

The testers who joined: Michelle DeYoung, Gabriela Nino de Rivera Torres, Bram Duvigneau, Cyndy Otty, Philip Chalker, Geof Collis, Bart Simons and Andrea Fercia.

Test results

1. Basic dropdown

Example of choices Select2

Example of choices that don’t get read out, the entered value gets read out instead

Geof Collis: JAWS 14.5 IE 11.
Not accessible. I tried to open the box but just got dead air and I found the edit field down the page but was confused on what to do so typed in the letter a and arrowed down to get a list of states only to realize that if I arrowed up and down I got the list I expected in the drop down box.

Bart Simons: JAWS15 and IE11,  JAWS15 and Firefox, JAWS16 and IE11, JAWS16 and Firefox
JAWS says “combo box collapsed”.
I press enter to go to forms mode.
Since I am told that this is a combobox I try using arrow down to scroll through the list. This does nothing. I can’t go beyond Alaska. Also arrows up, left and right do nothing.
Then I try to navigate by typing the first letter. This does not work either.

The test suggestions suggest to use space bar. This is something I would never have tried by myself.
After pressing space bar, I am told that I am in an edit box. I type “new” and I hear “New Mexico”. Again there is no possibility to use down arrow to go to New York for instance.
Even New Mexico does not seem to be selected.

Besides, it is really not intuitive to require a space bar in a combo box.

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
The combo box does not respond to Control+Option+Space bar VoiceOver command to open the list of choices. It does respond to the space bar only.

When the list of choices it’s open, the first element getting the focus is the link to go back to the list of examples. The second element is the search field text and lastly the table with the choices. I’m using Control-Option+right arrow to navigate inside the combo box element.

The texts for Time zone are ignored by VoiceOver.

VoiceOver offers me to navigate the table with the choices using Control-Option-right/left arrow or up/down arrow. Both commands worked fine.

There seems to be something different with the choice Hawaii. There is an intermittent behaviour that requires me to use the Control-Option-right/down arrow command several times before moving to California. It seems like the focus gets stuck on Hawaii choice for some reason.

It is not possible to move inside the list of choices using only up/down arrows.

Using only the Enter key will open/close the combo box choices. In this case the first element getting the focus is the search field text. When making a search, the user does not get feedback if the state that she is looking for it is found or not on the list of choices.

I could not find how to select an option of the list of choices. Normally I’ll use Control+Option+Space bar command, but I don’t get a response. Using Control+Option+Enter does not work either. Using only the Enter key will close the list without selecting the current choice (the one with the focus on it). But if I search for the state and click on Enter, the list will close but the current choice will be selected.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only: Works fine.

FF/NVDA:
Forms mode –  The state name is announced. This is considered the label via the aria-labelledby.  The label should be the ‘Select a US state”.
The text input in the expanded list is not labelled.
Virtual mode – Can arrow through the items in the combobox, but all that is voiced by NVDA is “blank”.
Note: Can expand and collapse the list.

Philip Chalker:  iOSiOS The operating system used on iPhones and iPads. + VoiceOver.
It all reads fine on the screen

Cyndy Otty:  iOS + VoiceOver.
But VO is reading the list, but selection itself is definitely wonky.

 

2. Multiple select boxes

Geof Collis: JAWS 14.5 IE 11.
Not accessible. Entered the box but heard nothing.

Gabriela Nino de Rivera Torres: VoiceOver+Safari.

The combo box does not respond to Control+Option+Space bar VoiceOver command to open the list of choices. It does respond to the space bar only.

Using only the Enter key will open/close the combo box choices. In this case the first element getting the focus is the search field text. The second element getting the focus is the link to go back to the list of examples and lastly the table of choices.

VoiceOver offers me to navigate the table with the choices using Control-Option-right/left arrow or up/down arrow. Both commands worked fine.

I could not find how to select a choice directly from the list of choices. Control+Option+Space bar command does not work. Using only the Enter key will send me to the instructions page. But if I search for the state, I’m able to select it using the Enter key after entering the word (although I don’t get any feedback to confirm me if the state I’m looking for was found or not).

I could not found how to remove a choice. Any of the common VoiceOver commands don’t work to get focus on the selected choices.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only:

  • No visual indicator that it is a select box and offers choices.
  • Yes, selections can be accessed and added.
  • Yes, can remove selections by using the ‘Backspace’. Selection will be removed a letter at a time.

FF/NVDA:
Combobox is missing a label. NVDA does announce that it is a combobox.
List is announced that it is expanded, but the as user arrows through the list the items are announced as “blank”.

If user randomly selects and item (they will not know what they selected), the items are added to the input field, but they are not announced.
Unable to access added items in the input to have them announced.  If I assume items exist in that form field, then I can select “Backspace” to remove them a letter at a time.
Note: Unable to type a selection name in the input field.

3. Placeholders

Geof Collis: JAWS 14.5 IE 11.
Semi accessible. I expected that I would hear the placeholder before going into forms mode but had to enter the field before I did.

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
No, VoiceOver did not announce the placeholder inside the first option. The combo box does not respond to Control+Option+Space bar VoiceOver command to open the list of choices. It does respond to the space bar and Enter key.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
FF/NVDA: Yes, Placeholder is announced. (No labels for input fields)

4. Disabled mode

Geof Collis: JAWS 14.5 IE 11.
Semi accessible. I expected a checkbox for the modes but realized to click on the button and it worked but I’m starting to wonder if I should be reading 2 drop down menus because that is what I am getting in all examples so far.

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
I was able to enable and disable the two select boxes. It does work with Control-Option-espace bar and with the Enter key.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only: Yes, Enable/Disable buttons work

FF/NVDA:

  • No labels.
  • Yes, Enable/Disable buttons work.
  • Tabbing backwards through the inputs after ‘Disable’ has been selected skips over the inputs initially, but if user continues one more tab backwards the 2nd input will be announced, “Combobox collapsed has autocomplete”.

5. Disabled results

Geof Collis: JAWS 14.5 IE 11.
Not accessible. Sometimes it reads first and other times it doesn’t it isn’t consistent and I only get one box. Used the back button and it froze my browser and had to close it down, grrr!

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
I’m not able to move from the first option. I’m using Control-Option-right arrow to navigate between the options on the table. Using only right/left/up/down arrow to move from one option to the other won’t work.

If I interact with the table choices (Control-Option-shift-down arrow) I’m able to move to the second option and it will be announced by VoiceOver. From the second option it is impossible to move to the third option.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only:

  • No labels for inputs.
  • Yes, disabled item is skipped over when arrowing.
FF/NVDA:
  • List items are announced as “blank”.
  • Yes, disabled item is skipped over when arrowing.

6. Select with a button

Geof Collis: JAWS 14.5 IE 11.
Semi accessible. But I find all of these boxes confusing and verbose so I’m quitting, I dont like it in the least, time to go back to the drawing board. :O)

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
Yes I can set the option in the select drop using the two buttons for each example. In both examples, VoiceOver does not give feedback after the setting function. I’m able to press the buttons using Control-Option-space bar, only the space bar key and the Enter key.

Also it is possible to open/close the select choices using Control-Option-space bar, only the space bar key and the Enter key. I think those two examples are easiest to use with VoiceOver.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only:

  • 1st Example: ‘Set’ & ‘Init’ work, but the others do not.
  • 2nd Example: Yes, it works.

FF/NVDA:

  • 1st Example: ‘Set’ & ‘Init’ work, but the others do not.
  • 2nd Example: Yes, it works.   Note: Selected items are not announced in the input field they are added to.

7. Limiting the number of selections

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
I was not able to select any of the choices. Once in the table choices I tried selecting with the Enter key (it sent me back to the instructions page), using space bar key only and Control-Option-espace bar did not work either.

The combo box does not respond to Control+Option+Space bar VoiceOver command to open the list of choices. It does respond to the space bar key and the Enter key.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only: Yes, it works.

FF/NVDA:

  • Yes, can only select two items.
  • No, the feedback is not announced.
  • No, the item choices are not announced.
  • No, selected items are not announced.

8. Hiding the search box

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
The search box it is very well hidden, VoiceOver did not notice it.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only: Yes, it works.
FF/NVDA: Yes, Search box is hidden and not voiced by screen reader.

9. Add choices automatically

Gabriela Nino de Rivera Torres: VoiceOver+Safari.
I was able to add choices using the coma and the space. The combo box does not respond to Control+Option+Space bar VoiceOver command to open the list of choices. It does respond to the space bar key and the Enter key.

Michelle DeYoung: Windows 8.1 / FF 40.0.3 / NVDA 2015.2
Keyboard only: Yes, it works.
Note:
Using space – Cannot add more than two rows of items.
Using comma – Cannot fill past one row of items.

FF/NVDA:
Yes, can add items with space or comma, and they will appear in the list.
If too many items are added to the list they are dynamically removed except for the first item.
>Note:
Using space – Cannot add more than two rows of items, but NVDA will still voice like items are being added.
Using comma – Cannot fill past one row of items, but NVDA will still voice like items are being added.
Items – Items in list are announced as “blank”.  Items added to the input are also not announced.

Notes from Bram Duvigneau

I had a quick look at Select 2 using Firefox + latest NVDA nightly build.

The Select 2 widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. is announced as combo box, however it doesn’t respect the common keyboard navigation conventions on Windows. I expect to be able to use the arrow keys to select an item when the select box is in closed state, that doesn’t work. The alt+down arrow hotkey, which is the default to open a dropdown in Windows, works. However, when the select box is open, the active item is not announced by a screenreader. I can select an option by pressing enter and after closing the box the selected item is readable.

Conclusions: It seems that some aria support has been implemented. This causes a screenreader to pick up the role (select box) and the state (open/closed).
However, much more work is needed to support the focus in an open Select 2 widget. All the special Select 2 features such as grouping items and typing to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output./search the list has not been tested, but this also needs additional aria markup to be read by screenreaders.

Another issue is the expected keyboard shortcuts. These are different on every platform and Select 2 should feel native on all of these platforms, so this has to be implemented and tested prety well. E.g. on Windows I don’t expect a dropdown to open when I press space bar, but on Mac this is the common way to open such an element.

Notes on the test results by Andrea Fercia

  • Difficult to understand how to open the combo box. Users expect to open the combo box using just the down arrow key. Previous version worked that way.
  • Missing label for the input field (The text input in the expanded list is not labelled). It gets announced with the name of the first option, e.g.: “Alaska  combo box  collapsed  has auto complete”. Investigate on current usage of “aria-labelledby”.
  •  Searching:
    • leaving the field empty, it is possible to arrow through the items in the list but every option gets announced as “blank”
    • entering some charavters e.g. “mi” and arrowing through the results e.g. “Minnesota”, “Mississippi”, “Missouri” will read out just “mi” which is the entered value in the input
    • no feedback about how many search results – the previous version announced “5 results are available, use up and down arrow keys to navigate” or “No matches found”.
  • “I could not find how to select an option of the list of choices”. I guess that’s because all you hear is “blank” or the characters you entered in the search field.
  • No feedback when selecting an item: If user randomly selects and item (they will not know what they selected), the items are added to the input field, but they are not announced.
  • Multiple select boxes: “Unable to access added items in the input to have them announced.  If I assume items exist in that form field, then I can select “Backspace” to remove them a letter at a time.”Once you’ve added options, they’re not announced so users really have to guess they’re in the input field.

Conclusion

The main problems are:
  • There is no or not enough feedback for screen readers on what is selected or what can be selected (list items are announced as “blank”.)
  • No feedback about how many search results.
  • The select dropdown does not behave like a user expects, quoting Bart: “It is really not intuitive to require a space bar in a combo box.This is something I would never have tried by myself”
  • Testers report slightly better results on iOS + VoiceOver
  • Select2 has at the moment too many accessibility issues to be included into WordPress core

#a11y-audit

Accessibility Usertest: Menu Customizer

  • Tests done in June 4-9, 2015
  • Update June 14, results from Michelle DeYoung
  • Update June 18, results from Kim van Iersel
  • Update June 20, results from Michelle DeYoung (NVDA/ChromeVox, after integration into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.)
  • Update June 23, results form Tobias Clemens Häcker (ChromVov, after integration into core)

Questions for the test team

Can you:

  • can you add a menu
  • can you fill it with menu items
  • can you remove a menu item
  • can you reorder a menu item
  • can you access the menu options
  • can you access the menu help

Test results

Shaun Everiss

Testing using NVDA latest version, Firefox and Internet Explorer latest builds and windows 7

Just did some tests on the menus.
And I found them hard to navigate stuff all over the place.
I think I reordered a menu successfully but no feadback.
I can edit various items but I couldn’t find where to add one.
I was able to find a menu button at the bottem of the page to add but didn’t manage to edit and add it.
The structure was quite confusing.

Reagan Lynch

Testing using Windows 8.1, IE 11, and JAWS 16.

First, to actually get into editing the menu is a lot of clicks and
reading buttons that need to be expanded. by the time I was able to
locate where to edit the actual menu in terms of the menu items
themselves I felt kind of lost.

The text on the button reads Add Links. It might be better to read
something like Add Menue Item/Links or Add menu Item.

I was able to add a menu and add links. However, I was *not* able to
move any of the menu items. The move options are not clickable by
screen  readers.

From a usability/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) standpoint the menu customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. is slow
and cluncky to use. It took me a good 15 minutes to add a menu which
using the current menu tool would have taken me about 2 minutes.
Granted I had to figure my way around 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., so there’s that.

I know the current proposal is to remove this feature from the menu in
4.3 and place the menu creation function inside the customizer. I
think I like the concept, but think we should punt it to 4.5 to ensure
accessibility of the feature is strong. I think other parts of the
customizer need a lot of accessibility work as well.

Geof Collis

Testing using JAWS 14.5 IE 11

When I click on a sub heading I’m not sure where I am, took me a bit to realize so I would like the focus to be on the heading I clicked on and not the back button after the heading.

Focus works well when I edit a menu item but I get dead air when I arrow through edit boxes , navigation and title attribute for example

There are way too many sections here, I would like to see it set up the way the other menu section:
1 area for all options
list pages, categories etc without having to click on a heading.
be able to change all attributes of a menu item in the same place, with this setup I have to go to another section to reorder, this is just to time consuming and annoying way they have it.
Conclusion: If they are going to do away with the Menus section then just move it to the Customize section just the way it is.

John Sexton

On the whole I was able to do basic tasks, like select which menu is active for which location, add/remove links, reorder links and add new menus. It took a little while to figure out how it all worked but once I understood this, was able to use it. The issues are listed below, some are down to limitations of ARIA support in Supernova.

Testing with Supernova V14 on Win7 64bit & IE11

When using the reorder feature, there is no screen reader feedback to indicate the menus level, perhaps a level indicator can be added after the page title that says something like “top”, “level 1”, “level 2”, etc to show how far down the tree each menu item is. As this is only really to benefit screen reader users, it could be visually hidden using the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. clip method.

When adding new menu items, the overlay appears at the end of the page, which is not imediately obvious, perhaps moving focus to the top of this overlay on the click event of the add links button will help alternatively insert the overlay in the dom tree at the point where the add links button was clicked or where the link will be inserted.

The level 4 headings in the add new menu items overlay are not declared as links, so is not obvious that they need to be clicked to show/hide content. Either use regular 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. anchors or add ARIA attributes to indicate these headings have a click action.

Testing with NVDA V2015.1 on Win7 64bit & IE11

The click events to select the menus tab or any section/menu within the tab, with NVDA you need to press enter twice, the first press appears to put NVDA into a form edit mode and the second press makes the selection and exits the form edit mode. Not sure why this is.

When reordering menu items, NVDA anounces “menu is now a submenu item” or “menu item moved out of submenu”, which is useful, However, when reviewing the list while reordering, there is no indication at what level any given menu item is currently set to.

When adding new menu items, the overlay is placed at the end of the dom tree, it will be better if placed either after the add links button or at the point where the links are inserted.

The level 4 headings in NVDA also anounce “toggle”, to indicate the click action is required to show/hide options. This probably don’t work in Supernova V14, due to very limited ARIA support.

Also the toggle state for collapse/expand menus in the preview panel, work in NVDA, were as Supernova doesn’t work so well, giving the same output for both states.

Gabriela Nino de Rivera Torres

VoiceOver and Safari.

Adding a new menu

Add a menu button: when the user select the button she hears “add a menu button press return or enter to open”. When clicking on on the button, a new menu name field and button appears, but the user is not aware of it.

When the user clicks on “Create menu” the user hears that the menu was created. The new menu has a blue color that differentiates it of the rest, but when I try moving to another element in the page it gets berserk.

I not sure if this weird behavior is due to using Safari, but when the interface gets crazy it is very difficult to find the way back to anything. At some point, a lot of elements that are hidden gets focus and it is very confusing to know were I am. After it gets berserk I need to refresh the page and start anew.

It was difficult too to add an item to the menu. There is a lot happening on the screen that is not necessary told to the user.

I will agree with previous comments, adding menus or items requires a lot of clicking and the way that page elements are organized makes very hard to understand the elements order with the screen reader.

I prepared a video to show the strange behavior after clicking on the “Create menu” button.

Michelle deYoung (June 14)

Creating Menus, Keyboard only testing

Tested in Windows 8.1 using FireFox, Chrome and Internet Explorer 9 with Keyboard only.

Issue: Once a new menu is created, the keyboard focus is moved to the content area.
Suggested: Keyboard focus should remain in the left sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. menu section so the user can add items, reorder, delete menu, etc.

Issue: The Reorder link receives focus, but does not reorder menu items when selected. The “Add Links” button might be more understandable if it is renamed.
Suggested: Rename “Add Links” button to “Add Menu Item”.
Add Links button

Issue: When adding a Menu item, the item is added twice to the Menu sidebar.
Menu item is added twice to the Menu sidebar.

Issue: When tabbing from the ‘X’ to the “Add Links” button, there are 12 to 14 tabs that have no visible focus indicators. The number of tabs vary. I assume this is from hidden items that it is hitting.
If ‘Enter is selected, it unfolds a blank area above the Customizing > Menus item.
‘X’ and “Save and Publish” only appear to get focus when the user tabs in reverse tab order.
Suggested: Remove extraneous tabbing to reach focusable elements on the screen, so user can easily identify where they are at on the screen.
Navigation from the ‘X’ to the “Add Links” button

Issue: No visible focus indicator for the help icon.
Suggested: Make it gray like the Properties (gear) icon, then blue when it receives focus. Or add a border around it when it receives focus.

No visual focus

Firefox: No visible focus indicator for the help icon.

IE: visual focus

This is how it looks in IE: Visual focus on the help button

Issue: Access to menu item – reverse tab order: Once user has added a menu item, if they choose to navigate/move backwards in the tab order to customize the added item, the items in to expandable. The user has to navigate back to top of the browser and start from there.
Access to menu item – reverse tab order

Issue: In Internet Explorer 9. When the “Add Links” button is selected and the right side section is expanded, the user focus is dropped into the Search field which is fine, however, the user is not able to see the placeholder text unless they don’t enter a search criteria and tab out of the field.
Suggested: Allow the placeholder text to be visible when the field receives focus.
Place tab on the expanding section, and allow the user to tab into the Search field.
Placeholder gone

Kim van Iersel (June 18)

On Jaws 16 Pro.

I did all the tests and could answer everything with: Yes I could do that (add a menu. fill it with menu items, remove a menu, reorder a menu, access menu options, access menu help).

Michelle deYoung (June 20, after integration into core)

Tested in Windows 8.1 using Chrome + ChromeVox and FireFox + NVDA
  • can you add a menu (YES)
  • can you fill it with menu items (Yes – as far as functionally with the screen reader and keyboard. No – The extraneous text voice by ChromeVox and NVDA will be confusing to user and could very well impact their ability to accomplish their task.)
  • can you remove a menu item (YES)
  • can you reorder a menu item items (Yes – as far as functionally with the screen reader and keyboard. No – it is not very understandable for a non-sighted user to hear “Reorder” and “Done” without knowing they have to navigate back to the menu itself, and without instruction of what and how to reorder. Once back in the menu the reorder buttons are nicely done and announced clearly as to what the action is.
  • can you access the menu options (YES)
  • can you access the menu help (YES)

Issue: Add Menu button:
Once the user has selected ‘Add a Menu’ the focus stays on that item.
Before selecting ‘Enter’ or ‘Return’:
ChromeVox and NVDA:“Add a menu press return or enter to open.

add menu before
After selecting ‘Enter’ or ‘Return’:
ChromeVox:“Add a menu press return or enter to open”.
NVDA: only announced after user as moved away from the button and then back to it:“Add a menu press return or enter to open.”>
add menu after

Remediation suggested: Once the user has selected ‘Add a Menu’ it might make it easier to have the cursor focus dropped into the ‘New menu name’ field.
When the button changes to the ‘X Add a Menu’ it should say something like
“Add a menu press return or enter to collapse or close.”

<button class="button-secondary add-new-menu-item add-menu-toggle" type="button">
Add a Menu
<span class="screen-reader-text">Press return or enter to collapse or close </span>
</button>

Issue ChromeVox: >Add Menu button
Once the menu name is added and the ‘Create Menu’ button is selected,

Screen reader voices:

  • “Menu create”
  • “Status create menu button”
  • “List items widgets press return or enter to open this panel heading 3”
  • “List item static front pageStatic Front Page A WordPress website can have a dynamic blog-like front page, or a “static front page” which is used to show customized content. Typically this is the first page you see when you visit a site url, like wordpress.org for example. press return or enter to open heading 3”
  • “Collapse internal link”
  • “Search widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. within search widgets edit test search entry”
  • “Archives heading 4”
  • “A monthly archive of your sites posts”
  • “Calendar heading 4”
  • … (and so on)

after creating menu

after-creating-menu

after-creating-menu code
Issue NVDA: Add Menu Field

Form field is voiced as “List with two items edit has auto complete”
The input element needs a label relationship defined.
No label no-label

Placeholder is only read with NVDA if user accesses the field via forms mode. If the user is arrowing to the item in virtual mode no label will be announced.

<label><input class="menu-name-field" type="text" data-customize-setting-link="new_menu_name" value="" placeholder="New menu name"></label>

Remediation suggested: 
Place holders should not be used for labeling.  Use explicit or implicit labeling. When using implicit labeling ensure that the for and id attributes are used to create a data relationship between the label and form field since some AT’s don’t support implicit labeling well.
If you do not want the label to show hide it from view using css, but allow AT’s to still access the label name.
Note: If aria-label is used on the input for a label, it will only be read by screen readers when tabbed to.

<label for="menuname">
<span class="hidefromview>Enter new menu name</span> (hide label text from view with css, but allow it to be read by screen readers.)
<input id="menuname" class="menu-name-field" type="text" data-customize-setting-link="new_menu_name" value="" placeholder="New menu name">
</label>

Issue: Adding a Menu Item
Add button is just announced as “Add”.  The item name is read prior to the button, but it might be more understandable for it to be voiced with the item name.

add items buttons<
Remediation suggested:
Ex: “Add a Gallery Page menu item”


Issue: When user selects ‘Enter’ to add a menu item it is duplicated in the left panel.
Menu item is added twice to the Menu sidebar.

Issue NVDA/FireFox: Reorder/Done button
Once the user as selected “Reorder” the focus remains on the button that then has changed to “Done”.
Note: “Done” is only announced is the user navigates away from the element and then back to it.
done button
Remediation suggested:
Reorder should have some more information associated with it for non-visual users. Perhaps taking user focus to the top of the list of menu items along with additional instruction on what to do now the reorder button has been selected would be beneficial and more understandable

Issue NVDA:  Removing Menu Items

When the add menu item window pane is open, the “X” for removing the item is available, but once the user closes the pane and moves to the window pane where they can edit the menu item, the remove “X” is moved down toward the bottom of the expanding collapsing accordion items for editing.
pane open remove item

pane closed remove item

pane closed edit accordian

Tobias Clemens Häcker (June 23, after integration into core)

Windows 7, Chrome, ChromeVox
Except for menu items being added twice everything works well. Was surprised how easy it was to use.

Video (might need some minutes to render)

https://youtu.be/BOrW2RIOido

#a11y-audit, #accessibility-usertest

Accessibility testing of the Twenty Fifteen theme

This week the new theme Twenty Fifteen was placed into trunk, so we could take a look at it.

We discussed the issues found in the replies with @davidakennedy‘s post: Time to Test Twenty Fifteen! and in our testing session last Monday.

Here’s a summary of what we found and the follow up on that (we assigned people to post tickets on this).

The order is in order of priority.

1. Heading structure

To our opinion multiply H1’s are not a good way to set up the heading structure.
Our suggestion:
One H1 per page. This is the site title for the home page, the page of post title for a single page or the archive title for an archive. The rest of the content should be meaningful devided into h2/h3/h4 etc headings.
An improvement that can be easily made is change the H1’s for the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. titles into a H2 in functions.php.
Ticket: @davidakennedy #30065

2. Menus

The main menu works good with keyboard only, also with a submenu.
But with a screen reader it gives problems and the structure isn’t read well.
This may need some study to do it properly
Ticket: @davidakennedy #30083

3. Search form

In the current 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. of the search widget form there is no proper relation between the label and the input field. The input should have an ID and the label a for= to the ID.
Also the submit button has class with display: none; That should be a class screen reader only.
Ticket: @rianrietveld #30110

4. Thumbnail link

The thumbnail of a post in archives are placed inside a link to the post itself.
The alt text is the alt of the image, this can result in a link text that makes no sense.
Screen reader users want to know what’s on the image, but don’t want to lose context on where the link is going.
There are different ways to solve this, as we can see in ticket #15926 and #28861
Maybe finding a solution here could also be a solution for #15926
Ticket: @rianrietveld #30076

5. SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. is placed above the content

We decided that that’s ok.
There is a skip to content link for keyboard and screen reader users, that should be sufficient.
The toggle on the sidebar should have a slightly different screen reader support.
Ticket: @bramd

6. Background images next-prev links should be darker

Ticket: @davidakennedy #30069

7. Underline links on hover

Underline menu links and post links in archive on hover to make it more clear they are a link
Ticket: @katherinemancuso #30108

8. Site description

The site description should not be defined as an H2 heading. It is not a section or content title.
We suggest placing it inside a p element.
Ticket: @rianrietveld #30057

9. 404 template Text: “Maybe try one of the links below”.

This may be old text that needs to be updated
Ticket: @davidakennedy #30061

Further commenting and work we will do in the tickets on the trac as they are posted.

This list of issues is not complete. If you find other 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? Please reply to this or @davidakennedy‘s post: Time to Test Twenty Fifteen!

A big thanks to @davidakennedy, @nsousa, @bramd, @katherinemancuso, @arush, @sharonaustin for testing.

#a11y-audit

Time to Test Twenty Fifteen!

Today, Twenty Fifteen landed in /trunk.

@iamtakashi and others have worked really hard to make this first pass accessibility-ready from the start. 🙂

I’ve done an initial accessibility-ready review and advised on a few bug fixes. But we still should bang and bend this lovely theme from an 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) perspective.

Note: This theme has different color schemes, so keep in mind only the default one needs to meet the accessibility checks.

We’d love to find a more elegant solution for the focus styles on the main navigation links.

If you’re not comfortable filing a ticket, just comment here and we’ll consolidate them into feedback on future tickets.

Please post all feedback here. If you are using 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 to test Twenty Fifteen, please indicate exactly what software you are using and web browser — including the version number, if possible.

To test Twenty Fifteen:

  1. Install WordPress locally.
  2. Download and install the Beta Tester plugin.
  3. Configure the Beta Tester plugin and update WordPress.
  4. Activate Twenty Fifteen and test to these standards.

October 15, 2014: Updated post with instructions on how to get Twenty Fifteen. Updated with additional feedback instructions.

#a11y-audit

Should We Be Dropping the Role Attribute in Twenty Thirteen Yet?

Your feedback is requested on Trac Ticket 24629.

Cited example: Should the Twenty Thirteen drop the use of the role attribute on 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.5 nav element on the grounds that the element, by definition, has the role of navigation? Or should role="navigation" be retained in order to support technologies that are not yet HTML5 aware?

My own opinion that the role attribute should be retained for the time being in order to support the widest range of technologies. Dropping it would offer only a marginal benefit in reducing page bloat. Please do weigh in with your opinions on the ticket.

#a11y-audit, #html5, #trac-2

Twenty Thirteen

Development on the next default theme — Twenty Thirteen — has now reached a point where our feedback is needed. You can see and use the theme (currently still in alpha) at its own Twenty Thirteen demo site.

Please post all feedback here. If you are using 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 to browse the demo site, please indicate exactly what software you are using — including the version number, if possible.

Come on, people. If you want a truly beautiful example of an accessible WordPress default theme, now is the time to point out any issues and support the theme’s developers.

#a11y-audit, #core-2, #theme, #twentythirteen