WordPress.org

Make WordPress Accessible

Tagged: Accessibility usertest Toggle Comment Threads | Keyboard Shortcuts

  • Rian Rietveld 3:53 pm on May 13, 2016 Permalink
    Tags: Accessibility usertest   

    20th WordPress Accessibility test: Add media with Speech Recognition Software 

    This test is for users of Speech Recognition Software, like Dragon Naturally Speaking.
    We would like to know how well adding images works in WordPress, what the issues are, what works and what not. So then we know what to fix.

    If you know how to use such software like Dragon Naturally Speaking could you please do the next 3 test for us.
    Please report what problems you encountered, what was hard or impossible to do and also what was easy.

    Please login to your WordPress website and try the following 3 tests.

    Test 1:

    • Go to All Posts
    • Edit a post
    • Put the cursor somewhere in the content where you want to add an image
    • Click the button “Add Media”
    • Select an image from the Media Library
    • On the right there are attachment details showing now
    • Change the title
    • Change the caption
    • Change the alt text
    • Change the description
    • Change the alignment
    • Change the link to option
    • Change the size
    • And click the blue button “Insert into post”

    Note: Are you seeing scrollbars for the grit with images and/or the attachment detail? Can you scroll down?

    Test 2:

    • Go to All Posts
    • Edit a post
    • Put the cursor somewhere in the content where you want to add an image
    • Click the button “Add Media”
    • Select Upload files
    • Try to upload an image from your computer
    • And click the blue button “Insert into post”

    Test 3:

    • Go to All Posts
    • Edit a post (doesn’t matter which one)
    • Put the cursor somewhere in the content where you want to add a gallery
    • Click the button “Add Media”
    • Select from the option left “Create Gallery”
    • Select now 4 images
    • Click the blue button “Create Gallery”
    • Try to reorder the images by drag and drop
    • Change the caption on one image
    • Change the Gallery Settings
    • And click the blue button “Insert gallery”

    Please add to your findings which assistive technology and which version of it you used for this test and also which browser and operating system.
    If you want to read more about the discussions on this, read the related ticket: #23562

    Report your findings as a comment with this post, you can also refer here to a link to a document with your test results.

    If you need help to set up this test, please email to wpa11ytest@gmail.com

    All results of the tests will be posted in this blog later.

     
    • prjsoft 10:09 pm on May 14, 2016 Permalink | Log in to Reply

      I use https://speechpad.pw speech recognition with OS integration options. Can I participate in this test?

    • Rian Rietveld 9:45 am on May 15, 2016 Permalink | Log in to Reply

      Hi @prjsoft, yes please!

    • ewaccess 12:47 am on May 17, 2016 Permalink | Log in to Reply

      Test 1:
      -Would have expected the images in Add Media to respond to “Click Image” command. Ultimately selected with the mousegrid. Enjoyed that the images were a reasonably large click target.
      -Once I clicked the image and saw the visual iconography of a checkbox, I was delighted to find that the images responded to Dragon’s “click checkbox” command. Yay, role= “checkbox”! This allowed for efficient selection of images.
      -Saying “Click Title” to set focus in the Title edit box (to change the title of the image) instead set focus to the image of the glasses atop of the book. This was completely unexpected behavior.
      -It turns out that a Dragon user is unable to set focus to any edit box by calling its name. However, I can choose an individual field by saying “Click Edit” followed by a number. This is annoying. I would expect to set focus in a form field by saying “click

      Test 2:
      -I was surprised that “Select files” didn’t activate upon calling its name. Rather, I said “click Select Files.” Dragon set focus to the control. Then I had to call “press Enter Key” to activate it. Not a major annoyance, just unexpected.

      Test 3:
      -I do not understand how to select multiple images with the keyboard.
      -I would not have been able to do this had I not guessed that the images were checkboxes. I was able to select multiple images by saying “click checkbox.”

    • ewaccess 12:52 am on May 17, 2016 Permalink | Log in to Reply

      Sorry, my intro got cut off. This test was conducted using Dragon NaturallySpeaking Professional 13 and Google Chrome (latest) on Windows 8.1 Pro.

    • Graham Armfield 6:39 pm on May 19, 2016 Permalink | Log in to Reply

      I have tried the tests with Dragon 14 Professional on a Windows 7 machine via Internet Explorer 11.

      Test 1

      1) Getting the media panel up is easy.
      2) Can’t select images directly with any obvious commands, but yes, if you say “Click Checkbox” then you can choose images that way. That’s useful. Mouse Grid command or Move Mouse Up” etc commands work fine too but cumbersome.
      3) As ewaccess discovered saying “Click Title” does not select the Title text box. Instead it selects one of the images. It actually turns out that Dragon is reading the filenames of the images. I verified this by saying “Click Wallpaper” and the two images that have wallpaper in their filenames get the Dragon choice flags.
      4) The reason for the text fields and dropdowns not being directly accessible is that the labels are not explicitly tied to the corresponding input fields – D’oh. However, once you’re on one of the input fields (via Mouse grid) you can say “Press tab” to move through the fields. It’s possible to update all the fields without problem.
      5) The scrolling of the panels can’t be done directly using the “Page down” or “Move down” commands unless focus is out of the input fields. I’ve experienced that in other pages with Dragon. Dragging the scrollbar is possible but such a drag (ka tish!)
      6) Clicking of buttons is fine.

      Test 2

      No issues other than notes in Test 1

      Test 3

      1) Selected four images using mouse grid and mouse click. Mouse move also possible.
      2) After Create Gallery button pressed, image order can be changed using Mouse grid followed by mouse drag left/right. Works OK.
      3) Can’t access the caption fields directly with Click caption of anything like that. Digging reveals that there is no label for these fields – just a placeholder – D’oh. Dragon does not recognise placeholders. However, you can choose easily by saying “Click type text” or “Click text” and then choosing one of the highlighted options.
      4) Ditto as above for input fields to right – no labels.
      5) Clicking buttons fine.

      Summary
      A lot of mouse manipulation is required here if users don’t guess the possible Dragon shortcuts. This could make the process hard work.

      In my view the one thing that should be done is to explicitly connect the labels to inputs in Attachment or Gallery details. That would save a lot of grief for Dragon users. And how to screen reader users get on with that??

      Some way of labelling the caption edits in the Create Gallery flow would be good too. A placeholder on its own is not enough.

      Happy to get into more debate if required.

    • John 2:44 am on May 23, 2016 Permalink | Log in to Reply

      Dragon 13, Windows 8.1, Chrome

      Test 1:
      Go to All Posts – OK
      Edit a post – OK
      Put the cursor somewhere in the content where you want to add an image – OK
      Click the button “Add Media” – unable to use “Click Add Media”
      Select an image from the Media Library – used MouseGrid
      On the right there are attachment details showing now – yes
      Change the title – OK
      Change the caption – OK
      Change the alt text – OK
      Change the description – OK
      Change the alignment – Would not work for me
      Change the link to option – OK
      Change the size – Would not navigate for me.
      And click the blue button “Insert into post” – OK
      Note: Are you seeing scrollbars for the grit with images and/or the attachment detail? Can you scroll down?- Did not have enough data for scrollbar.

      Test 2:

      Go to All Posts
      Edit a post
      Put the cursor somewhere in the content where you want to add an image
      Click the button “Add Media”
      Select Upload files
      Try to upload an image from your computer
      And click the blue button “Insert into post”

      ** Select files would not click using commands.

      Test 3:
      Go to All Posts – OK
      Edit a post (doesn’t matter which one) – OK
      Put the cursor somewhere in the content where you want to add a gallery – OK
      Click the button “Add Media” – OK
      Select from the option left “Create Gallery” – OK
      Select now 4 images – OK
      Click the blue button “Create Gallery”- OK
      Try to reorder the images by drag and drop – Unable to complete this.
      Change the caption on one image – OK
      Change the Gallery Settings – OK
      And click the blue button “Insert gallery” – OK

      A lot of new commands and manipulation that took time.

      John

    • tchaecker 11:18 am on May 23, 2016 Permalink | Log in to Reply

      Windows Voice Recognition, Windows 7, Internet explorer

      This was the first time I used Windows Voice Recognition.

      Some of the tasks are only doable by using the mousegrid function that uses numbers to determine the area to click on. I use “MG” as short for “only doable using the mousegrid”.

      One thing was a bit odd – when selecting images the number links wouldn’t show up for individual images until one was selected, but once one was selected it worked flawlessly.

      I couldn’t figure out how to use dropdowns with Windows Voice Recognition without using the mousegrid. Google couldn’t help but maybe I missed something.

      Test 1:
      Go to All Posts – OK
      Edit a post – OK
      Put the cursor somewhere in the content where you want to add an image – MG
      Click the button “Add Media” – unable to use “Click Add Media” – OK
      Select an image from the Media Library – MG (once I chose an image the numbers would show to select another image but not at first)
      On the right there are attachment details showing now – yes
      Change the title – OK
      Change the caption – OK
      Change the alt text – OK
      Change the description – OK
      Change the alignment – MG
      Change the link to option – MG
      Change the size – MG
      And click the blue button “Insert into post” – OK
      Note: Are you seeing scrollbars for the grit with images and/or the attachment detail? Can you scroll down?- yes

      Test 2:
      Go to All Posts – OK
      Edit a post – OK
      Put the cursor somewhere in the content where you want to add an image – MG
      Click the button “Add Media” – OK
      Select Upload files – OK
      Try to upload an image from your computer – OK
      And click the blue button “Insert into post” – OK

      Test 3:
      Go to All Posts – OK
      Edit a post (doesn’t matter which one) – OK
      Put the cursor somewhere in the content where you want to add a gallery – MG
      Click the button “Add Media” – OK
      Select from the option left “Create Gallery” – OK
      Select now 4 images – MG
      Click the blue button “Create Gallery”- OK
      Try to reorder the images by drag and drop – MG
      Change the caption on one image – OK
      Change the Gallery Settings – MG
      And click the blue button “Insert gallery” – OK

  • Rian Rietveld 4:37 pm on February 25, 2016 Permalink
    Tags: , Accessibility usertest,   

    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 URL 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 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 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 a11y 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 widget 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.
     
  • Rian Rietveld 2:34 pm on September 22, 2015 Permalink
    Tags: , Accessibility usertest,   

    Accessibility usertest: Twenty Sixteen 

    The new default theme Twenty Sixteen is close to release, so we gave it to our 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 core. 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 image makes NVDA go “blank”
    • It may just be me, but the author, category, and tag links in the post meta 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 (header, 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 WCAG 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. W3C 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 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

     

     

     
  • Rian Rietveld 12:15 pm on August 3, 2015 Permalink
    Tags: Accessibility usertest   

    Accessibility Usertest: Export XML file 

    We wondered if people, using assistive technology, could understand the structure of selecting a range of posts or page in the export option with Tools/Export in the Admin.
    Related ticket: #33046

    Tests done on WordPress 4.3 beta 4 Nightly build from Juli 23 up to July 30 2015

    We asked the testers:

    Log into the test WordPress install and go to: Dashboard / Tools / Export
    Or directly to [..]/wp-admin/export.php
    Here you can download an export file with the content of the website.

    Export XML screen with options

    Select posts with:

    • Category “Uncategorized”
    • Authors: mwa
    • Start date: April 2013
    • End date: Januari 2020
    • Status: Publish

    And download the Export file.

    We want to know:

    • Can you do it? Or did you get stuck somewhere?
    • Did you understand how to select the posts and how to access the selection fields?
    • If there was anything you didn’t understand, please share.

    The testers who joined:
    Stephanie Watts, Heather Migliorisi, Daniel Montalvo Charameli, Cyncy Otty, Ruth Nisenbaum, John Sexton, Geof Collis, Shaun Everiss, Tobias Clemens Häcker, Michelle DeYoung

    Results

    No assistive technoloy

    Ruth: No problems at all

    Keyboard only

    Heather:

    • Chrome/Mac: worked well
    • Chrome/Mac: worked well
    • Safari/mac: worked well
    • FireFox/Mac: it is impossible to see what the focus is (the highlighting I see in the main menu in Chrome is not visible in FF)

    Michelle: Window 8/ FireFox: Works

    VoiceOver

    Heather:

    • Chrome/Mac – there’s no connection between ”All content” and the description below it (maybe add aria-describedby to link them)
    • Safari/Mac – The selects (categories, authors, ect) do not have labels linked (missing the for=“id”), so you have no idea what the drop downs are for.

    Cyndy: Safari – No problems navigating through and downloading the XML.

    SuperNova

    John: Windows 7 64bit PC using IE11 & Supernova 14.05
    I found it easy to use and select the options from the dropdown boxes. I have attached the downloaded file just for reference. You may also be pleased to hear using the same setup I have previously been able to use the import feature again with no difficulty

    Jaws

    Geof: JAWS 14.9/IE 11
    No problems at all, usually when I try to download all content my browser chokes.

    NVDA

    Shaun: NVDA latest version, Firefox, internet explorer latest builds and windows 7.
    Ok I was able to download the file no problem, everything worked.

    Michelle: Windows 8.1 /Firefox. I am getting inconsistencies when moving through the radio button and the fields under each other. Coming into the screen initially in virtual mode the radio buttons are announced as unchecked when navigating through them. When using the spacebar to select Pages or Posts, the number of items that unfold under them are announced when arrowing. I am unable to tab to them without being jumped to the Help button. If I tab again after the Help button, the focus is taken to the radio button and I hear a tone that signifies it is now in forms mode and I can then tab to the items in the section.

    When I navigate back to the Page or Post radio button it will say that it is selected, however I cannot arrow to the content for that section, but I can tab to the fields (poses a problem if you don’t know those items exist in the section). The arrowing will just take me through the radio button selections.

    Chrome Vox

    Tobias: Windows 7/ Chrome/Chrome Vox
    Worked perfectly, no issues at all.

    Window-Eyes

    Stephanie: Window-Eyes v. 9.2 screen reader along with ZoomText v. 9.0.
    I was able to complete the test.  For Window-Eyes, selecting combo box items requires users to move to the desired selection, press Enter to “activate” the combination (combo) box, use the arrow keys to move to the desired choice, then press Enter on that choice. Once I made my first choice, I tabbbed to the next option and repeated the process through completion of the task.

    Although I understood the directions, I am fairly proficient with Window-Eyes and a little less proficient with the NVDA screen reader. That said, I believe a “proficient” screen reader user would approach this task in a different manner than someone less proficient with screen reader applications. The more proficient user, for example, will try different strategies to achieve the goal whereas a novice screen reader user might conclude the WordPress application is not accessible if he/she fails to achieve the goal on the first or second attempt.  Consider creating instructional materials that specify to the screen reader the goal (e.g., select posts, uncategorized, dated from April 1, 2015 through April 30, 2015). Then you can specify that the method for selecting options depends on your specific screen reader application. This will free WordPress from the challenges associated with creating keystrokes specific to a particular screen reader application.

    Code reviews

    Daniel: In general it is easy to follow but I’ve got concerns regarding the way “Date range” combos are labeled. I think both <select> should have labels (the first being “Start date and the other being “End date”).
    Since “Date range” has been utilised as both visual and screen reader label, this is good. This gives a basic understanding of both lists, but I would deep a little bit on this by labelling both lists and hiding the complementary label information via the .screen-reader-text class or whatever is the method of your choice.
    I personally would not use “start date” and “end date” as the first selectable options, but as the complementary tags for screen reader users mentioned above.

    Summary test results

    Most testers had no severe problems.

    The issues that where mentioned:

    • FireFox/Mac: it is impossible to see what the focus is (the highlighting I see in the main menu in Chrome is not visible in FF)
    • Missing missing the for=“id” with the label for the select dropdowns
      <label>Categories:</label> <select name=”cat” id=”cat” class=”postform”>[..]</select>
    • One label “Data range” for both select <select name=”post_start_date”> and  <select name=”post_end_date”>
    • Tab order in NVDA is messed up (Michelle)

    Recommandations

    • Check the visual focus on the radiobuttons
    • Add a for= to the labels to link them to the select field
    • Find a different label structure for the data rage select fields
    • Try if Michelle’s NDVA navigate issues can be reproduced, and why this happens.
     
  • Rian Rietveld 2:10 pm on June 12, 2015 Permalink
    Tags: , Accessibility usertest   

    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 core)
    • 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/accessibility standpoint the menu customizer 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 UI, 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 CSS 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 html 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 sidebar 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 page press return or enter to open heading 3”
    • “Collapse internal link”
    • “Search widget 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)

     
  • Rian Rietveld 6:48 pm on April 14, 2015 Permalink
    Tags: Accessibility usertest   

    Usertest: Link texts in the page with all posts (edit.php) 

    Question for the test team

    We would like you to investigate the links and link texts on wp-admin/edit.php page and suggest better solutions for the link texts, how to make them understandable and unique, without overloading a screen reader user with a huge amount of extra text. Hidden text suggestions (screen reader only) are welcome and also visual text suggestions.
    We hope to make this list of posts (and pages) understandable for everyone.

    Test results

    Geof Collis

    Sort of like they’ve done in the media section I’d like to be able to select the posts/pages in a list with just a link and checkbox for bulk edit an nothing else.
    I’d also like a heading at the beginning.

    Tobias Clemens Häcker

    Tested with: Windows7, Chrome Browser, ChromeVox

    Analysis

    The link texts for the link itself the control box and the sublinks (edit, quickedit, trash and view) are well-done. The voice output is clear. However author, category and comments are only announced as link.

    Suggestion

    Links to author, categories and comments should add the type. Announcing “author mwa”, “category uncategorized” and “zero comments” instead of just “mwa”, “uncategorized” and “zero”.

    YouTube demo

    Jeffrey de Wit

    NVDA (default settings, so includes reading out title) goes entirely nuts on this stuff. I’ll see if I can get a recording of it. Something that may be useful to change are the All/Published/Drafts/Trash links. These could probably use some screen reader text.

    Something like this (Maybe use List instead of Display? Not sure):

    [Display] All (13) [posts] / [Display only] Published (10) [posts] / [Display only post] Drafts (3) / [Display posts in] Trash (1)

    Right now it gets read out by NVDA as:
    “All 13 link”, “Published 10 link”, “Drafts 3 link”, “Trash 1 link”.

    On a similar note, the column headers for sorting could probably use the same treatment. It just announces the link (“Title link”, “Comments link”, “Date link”).

    Should probably be something like:

    “[Sort ascending/descending by] Title link”
    “[Sort ascending/descending by pending] Comments link”
    “[Sort ascending/descending by] Date link”

    Ascending is the “default” link for title and comments, that is, when you get on the page and you trigger one of these sort links the order will be ascending (A->Z, or 0->x).

    For Date the default is descending, which means the newest comment will appear on top.

    Neither the current sort order (if any), nor what the sort order will be when the link is used is conveyed by the screen reader. The suggested text in the list above would take care of what the link will do, but not what sort order is currently active.

    I’m worried that adding additional text for what sort order is active may be too much, nor do I know of an elegant way to word what the current sort order is. Or even where the most appropriate place to put it is.

    NB. NVDA + Chrome doesn’t announce the Comments header at all. Could possibly be because the screen reader text span is wrapped in two other spans.
    Seems the craziness only happens with Chrome and NVDA. Firefox is a bit more sane.

    Demo in Firefox + NVDA:

    Demo in Chrome + NVDA:

    John Sexton

    I’ve done a quick check with Supernova V14 on a Win7 PC with IE11 and have the following comments:

    When tabbing through links with supernova on all posts (starting from the h2) you get:

    “Add New”, “All 13”, “Published 10”, “Drafts 3”, “Trash 1”, “Forms mode Search Posts blankline edit”, “Search Posts button”,

    “Forms mode select bulk action Bulk Actions pull down list box”, “Apply button”, “Forms mode Filter by date All dates pull down list box”, “Forms mode Filter by category All categories pull down list box”, “Filter button”,

    “visited link”, “link”, “Forms mode select page 1 edit”, “link”, “link”, “List View link”, “Excerpt View link”,

    “table 14 rows by 7 columns selectall unchecked checkbox”, “title link”, “comments link”, “date link”,

    “select no title unchecked checkbox”, “no title link”, “mwa link”, “uncategorized link”, “0 link”

    Note: as the above is just using the tab navigation it skips over the empty tags and date columns. However, if using the Supernova table navigation controls the empty tags cell is just read out as “column 5 row 2”. This is because by default Supernova doesn’t read all punctuation.

    Pagination links:

    the symbols are not often read out by default and their purpose may not be immediately obvious.

    add ” First”, ” Back”, ” Next” & ” Last” as screen reader text inside the link text.

    alternatively add ” First Page”, ” Previous Page”, ” Next Page” & ” Last Page” as screen reader text inside the link text.

    or ” Page 1″, ” Page n”, ” Page n” & Page n” where “n” is the page number that the link will go to.

    Personally I prefer the first option as is short and to the point.

    Data links in table:

    It may be an idea to add ” tag” & “0 pending of 1 comments” (where 0 are the number of pending comments and 1 is the total comments), as screen reader text inside the link text after the displayed value.

    It would also make it more usable if the pending & comments are shown as 0/1 or 0of1 or just add another column for pending just before the comments column. This way both values are visible without the need for title attributes.

    For when there are no tags, adding ” no tags” as screen reader text inside the link after the – symbol may help for cases when the – is not read out by default.

    You could add “author ” as screen reader text inside the link text before the authors name.

    It may be an idea to add “Edit ” to the link text as screen reader text before the title link text.

    The “Edit | Quick Edit | Trash | View” menu is not accessible without a mouse in list view. However, in excerpt view, the following works from a keyboard.

    The “Edit | Quick Edit | Trash | View” links are not immediately obvious, to gain access with Supernova, first you have to switch to excerpt view then you have to use cursor navigation to find the  post excerpt text and press space while over this text.

    Options could be to add a show/hide link for these four links this can have the same action of as you show one it hides previously shown menus. This way there’s only one “Edit | Quick Edit | Trash | View” menu visible at any one time.

    When these links are visible you can tab through them. It may be an idea to add the post title as screen reader text to the end of each of the four menu links, so it reads “Edit post title | Quick Edit post title | Trash post title | view post title” (where post title is the name of the post that is being acted upon.

    It is probably worth considering removing either the “Edit |” link or the title edit link. As these are duplicated links one following the other. Perhaps while in excerpt view, the title link could be used to show/hide the menu links instead of performing the Edit link.

    Another interesting thing I noticed is when using Supernova’s list links function while in excerpt view with one “Edit | Quick Edit | Trash | View” menu visible you get:

    • The pagination links are shown with the title text “Go to the first page «”, “Go to the previous page ‹”, “Go to the next page ›”, “Go to the last page »”.
    • The comments link has “c o m m e n t s”, would be better as “Comments”
    • The post titles have “Edit ” preceding the title text.
    • The post comment fields have “0 pending 1” (where 0 are the number of pending comments and 1 are the total comments).
    • The menu “Edit | Quick Edit | Trash | View” is only listed once for the currently visible menu and the links are listed as:
    • Edit this item “Edit” (where “Edit” is the actual link text and the first part is the title text).
    • Edit this item inline “Quick Edit” (where “Quick Edit” is the actual link text and the first part is the title text).
    • Move this item to the trash “Trash”, (where “Trash” is the actual link text and the first part is the title text).
    • View [post title] (where [post title] is the post title to view.

     

    Gabriela

    I used VoiceOver and Safari.

    Comments:

    All/Published/Draft/Trash links

    I agreed with Jeffrey’s idea of adding a “post” word to links to provide a better context to the user. In my opinion, the context for this group of links for a sighted user is more than clear, so maybe only adding this information for the screen reader should be better.

    Column headers for sorting

    I agreed with Jeffrey’s suggestion to add extra info to let the user know the sort ascending/descending order. To tell you the truth, if Jeffrey did not mentioned that those links are to change the sorting order, they had gone unnoticed for me. I suggest to show by default the black triangle instead of only making it visible when the user does a mouse over or a click on the object.

    First, previous, next, last page links

    The title for these links already contain the information describing the action of each one of the links, is a shame that that browsers don’t announce it.
    So to make them accessible, I see two options:

    1. Add the information in a span same technique than the one used for list view and excerpt view;
    2. Converting the symbols and background color to images and adding the information with the ALT attribute.
    Edit | Quick Edit | Trash | View links

    In my case, it was not difficult to access these links only using the TAB key. I tried on list view and excerpt view.

    Since edit/quick/trash/view are all in the same cell as the title of the post I think the user gets a good idea that those actions apply to the current post.

    My only concern with these links is that they appear only when the post title gets the focus. VoiceOver and NDVA let the user to open a window dialog containing a list with all links available on the page. But these links won’t appear on the list because the title post don’t have the focus on. So the user won’t be able to use these links from the link list window.

    Tags information

    I would suggest to add a text for the screen reader so instead of listening to a “end dash” the user will hear something like “not tags for this post”.

    Data table

    The table used for the posts is a data table type. But not all the data cells are associated with their corresponding head (th) cells. This could create confusion for the screen readers and affect the way the cells are read to the user.

    Shaun Everiss,

    NVDA latest version, firefox and internet explorer latest builds and windows7.

    I have looked at the links having the title of the posts and the date on when it was posted works for me thats how it has been in 4.1 what is the issue of keeping it that way.

    Reagan Lynch

    Test Environment: Windows 7 64 bit, Internet Explorer 11, JAWS 16

    I did this test on just the main listing you first go to when you click on All Posts. This focus is on links and what feedback you get with a screen reader.

    After the bulk action combo box you get the unlabled links.

    The first is links that I think are for navigating back and forward among the posts. In JAWS 16 these are not labled. I know that one is two left double angle brackets, but that is because I did a jaws command (insert+up arrow twice quickly) The next thing I see as I arrow down is a unlabled link that I cannot even determine because nothing is labled and JAWS cannot read the character that is there.

    These links are repeated in opposite after the edit field to select the page. For these unlabled links it would be nice to here prev and next for the links that move you page to page, and maybe first page and last page for the links that go to the first and last page. Just labeling these page nav links would make the all posts/pages pages more usable with a screen reder.

    In the table of posts I don’t really know what you can do to make the links that are numbers that take you to comments more accessible. Since we now have the wp speak function how hard would it be to use that function to tell a screen reader when it sees that link to report 1 comments or 0 comments. I know if you use I think a title attribute you can read that with a say line command twice quickly, but screen reader users are not really going to take the extra time to issue that command. Using WP speak or something else might be the best solution especially if you don’t want to impact the sighted experience.

    Sebastien Massy

    Use of title attribute

    Not all browser/screen-reader combinations will convey the title attribute to the user. For instance, Firefox/Orca/Linux conveys the
    title attribute, but Chrome/ChromeVox/Linux does not. What this means is that the user might wind up having or not having the information
    depending on his A-T choice. (Example, if there are comments pending moderation for a post, Firefox/Orca might say “7 pending” while Chrome/ChromeVox would just say
    “7”.)

    The screen-reader-text class

    In Firefox/Orca/Linux all text belonging to this class winds up being stretched out to one letter per line of the virtual buffer, presumably
    in an attempt to represent the text as it would appear if formatted according to the class. The end result is that using down or up arrow to
    scroll rapidly through a list of posts (or any other list employing this class) is at best tedious and at worst impossible. Chrome/ChromeVox,
    which tends to promote structural navigation over layout reproduction does not exhibit this problem. I would be curious to hear whether other
    firefox users on other platforms are experiencing this issue.

    Not all information is displayed

    Using either browsers, I ran into the simple fact that not all information would be spoken reliably. In particular, such things as
    publication dates and attached taxonomies were not always spoken. For example, in Chrome/ChromeVox, I found that navigating forward would
    speak the quick action links but omit the information mentioned, whilst navigating backwards would speak the whole information but the action
    links were not there. I am wondering whether this has to do with the fact that the action links appear on hover, i.e when focused (for us):
    could it be that they mask some information when they appear?

    All in all, I found that neither browser/A-T combination provided a good experience when attempting to scroll rapidly through a list of posts.

    Tina Tedesco

    Jaws 15
    After arrowing down past the #13 it said “link left double bracket.” It did not indicate the type of link. Arrowed down again and it just said “link” no type of link or no dataspoken. Arrowed after #2 after select page and there is a blank link; arrowed down again and another blank link.
    Some sort of data link or labeled tags need to be added.

    The table was very confusing for someone using a screen reader. To much text is being spoken in each column.
    As a user of a screen reader, I was able to go into table navigation mode which enabled me to navigate through the table. However, even using that, it was confusing.

    Amy Li

    I have some suggestions and they may not related to Accessibility but usuability issues. Hope it helps. Please see below:

    Too much links and caused confusion
    Remove non-important information on default, remove “Author”, “Categories”, “Tag” and “Date” since those items are in Filter list.
    Add icon-style for Tagging, add alt-text for tagging and other icons
    Links button need be less, combining View with Edit. Quick Edit should be default, adding “More” to extend functions like “Edit”
    “Trash” is better to be selectable in the front so that admin can bulk-select and delete together, instead of one by one clicking.

    Mocked screenshot in default page with removed extra links:Mocked screenshot in default page with removed extra links

    Issues and actions:

    Overall impression

    • For screen reader users this page is overwhelmed with links and hard to get an overview of.
    • There is a need for a quick overview with links to all posts (or pages).
    • A lot more screen reader text should be added to explain what the links are about.

    Page navigation

    Page navigation

    • The page navigation should have a heading to make clear what it is about: ticket @afercia
    • The page navigation is missing decent screen reader labeling: ticket @afercia
    • The previous links are still links on the first page , and the next links on the last page. They should not be links. Also the colour contrast of the >> and > is to low for these “inactive” links.  Ticket @rianrietveld

    Post filter

    post filter

    The links like Published, Sticky etc. are missing decent screen reader labeling: ticket @Cheffheid #31965 and #31966

    Comments

    Comments

    The amount of pending comments are included in the title attribute of the comments link and only visible on hovering, this is not clear for screen reader users but also not clear for sighted users. Ticket @rianrietveld

    Tags

    Tags

    A “—” ( “end dash”) for no tags needs screen reader labeling or a better explanation.  Ticket @rianrietveld

    Post link and row-actions

    Below the link for the post title there are action like: Edit, Quick Edit, Trash and View.

    • The link to the post title and the Edit link are double.
    • Some screen reader have difficulties entering the row-actions, we should review the way this is done now.
    • The | seperator could be included into the css or made invisible for screen readers by ARIA
    • Remove the explaining text out of the title attribute and add screen reader text
    • The quick edit link should be a button is now href=”#”

    Screen reader text needs to reset word-wrap

    In Firefox/Orca/Linux all text belonging to this class winds up being stretched out to one letter per line of the virtual buffer. This is due to the word-wrap: break-word; applied on an element Ticket @afrecia

    No feedback on sort order of a column

    • The way a column is sorted should be added for screen readers
    • The only way you can see if a column is sortable is by the colour of the table header text and by hovering over the link

    To consider

    How to decrease the number of links and make a post quicker selectable for a screen reader user

    One more thing to consider

    Edit by Andrea. We missed the format links: when a post has a specific format set, a small icon is prepended to the post title, see screenshot:
    video post format
    the image is linked to a screen with all the post belonging to that post format. Read out by screen readers as: “video link video”.

     
  • Rian Rietveld 7:59 pm on March 30, 2015 Permalink
    Tags: Accessibility usertest   

    Usertest: The search functions in the Admin 

    Question for the test team

    We like you to test the search function options in the WordPress Admin.
    We know there are accessibility issues here, we would like your expert opinion about this.

    Test on WordPress 4.2-alpha

    • Try the search function in:
    • Posts > All posts
    • Posts > Categories
    • Posts > Tags
    • Media
    • Pages > All pages
    • Comments
    • Appearance > Themes
    • Plugins > Installed Plugins
    • Plugins > Add New (try different options, like featured, favorites, etc.)
    • Users > All users
    • And if you still have time: Pages > Add new > Add Media > search an image or file in the Media Library, try different options, like kind of media item and date

    Experiment:

    • Try with search words you know give results
    • Try an empty search
    • Try with nonsence words

    Can you tell us if:

    • it’s easy to do a search or do you get stuck
    • you get what you expected
    • you can read the results well
    • you get good feedback when there are no results
    • you miss something to make it work for you
    • you have suggestions for improvement (keep it short please)

    Shaun Everiss

    I just did the test with NVDA, search worked as expected. I didn’t see any issues.

    Gabriella

    Tools: Safari + VoiceOver

    • Posts > All posts: The function worked perfectly, however I think that the missing part is telling the user how many results he obtained with his search. Also if is possible, make the focus stays on the main content after the page is refreshed would be nice.
    • Posts > Categories: Same comment than Post > All posts.
    • Posts > Tags: Same comment than Post > All posts.
    • Pages > All pages: Same comment than Post > All posts.
    • Comments: Same comment than Post > All posts.
    • Appearance > Themes: See missing search button comment.
    • Plugins > Installed Plugins: Same comment than Post > All posts
    • Plugins > Add New: Same comment than Post > All posts.
    • Users > All users: Same comment than Post > All posts.

    Media

    Media: The function worked perfectly.
    Missing search button: I noticed that in this page, the search function is a little bit different than search functions in the other pages. In the media page the button “search for XX” at the right side of the search input text is missing. Since in most of the pages we found a label + input text + button search, the user is used to this pattern. I propose to modify the search function to be consistent with the rest of the functions.
    Media: Select class=”attachment-filters” missing label
    The select option for type of media (images, audio, etc) does not have a label so the select context is not clear since the user only listen to “All (4)”.

    Pages > Add new > Add Media: Here we have a similar case to the search function on Themes page. This is an interactive search. The problem here is that there is nothing that tells the screen readers what is happening while the user is performing the search.

    Themes

    Search Placeholder in Themes: The themes search function is the only one where the input text has a placeholder. Listening to it is a little confusing because the same word is repeated two or tree times:
    “Search installed themes, clickable, Search installed themes, Search installed themes search text field”.
    Since this function is the only with a placeholder, what do you think about removing the placeholder from the code to keep consistency with the other search functions?

    Search function inside the H2: The search function for the themes page is grouped inside the H2. With VoiceOver, the user won’t be able to write in the input text unless she goes inside (control+option+shift+down arrow) the group to interact with it.

    Blocked search input text; There is a bug when writing some text in the input text and clicking enter to execute the search. The focus is blocked and the text can not be erased. One solution is to move to another element on the page and come back to the input text to regain the functionality. The search function in Themes is different because is an interactive search, the user write something and at the same time results appears. The problem here is that there is nothing that tells the screen readers what is happening while the user is performing the search. Clicking on enter to execute a search is a normal behaviour because all the other pages offer the same pattern. I think if the user get trapped in this bug won’t be able to find a way out.

    Missing search button: In this page, the button “search for XX” at the right side of the search input text is missing. Since in most of the pages we found a label + input text + button search, the user is used to this pattern. I propose to modify the search function to be consistent with the rest of the functions.

    Also missing in this page is the text “Search results for “XX”” that appears inside the H2. Most of the pages added it when the page is refreshed after doing a search.

    Amy Li

    Posts > All posts

    • Focus should set to search input box when first enter all posts page
    • Screen reader read “Search Posts” button as “Disabled”
    • Search Posts color contrast radio is not higher than 4.5:1

    Posts->Categories

    • Focus should set to search input box when first enter
    • When Enter space into Name input it should read out warning in Screen Reader
    • After input empty into Name, nothing shows and focus is gone and removed

    Appearance->Themes

    • After enter input text it should read results when there’s results found
    • Focus should set to first search result after click Enter into search box

    Plugins > Installed Plugins

    Focus should set to first search result after click Enter into search box or set back to search input box

    Plugins > Add New

    When enter “Jet” text which there’s search result, the the typeselector select field has no text/label

    <select name="type" id="typeselector">
     <option value="term" selected="selected">Keyword</option>
     <option value="author">Author</option>
     <option value="tag">Tag</option>
     </select>

    Users > All users

    • Focus should set to search input box when first enter all posts page
    • Focus should set to first search result after click Enter into search box

    Resize window:

    Search box should be on top when screen size is smaller than <320 like mobile version.

    Tina Tedesco

    I use JAWS 15.

    When I search for something, and whether it found it or not, my results did not appear until the end. I had to use the arrow key to go down to see where the actual results were.

    It did say out loud searching but did not bring me right to the search results. Can you put in something where the screen reader will read out how many results after searching?

    Besides that I thought the search worked well. Definitely doable with a screen reader.

    John Sexton

    Test on Win7 64bit, IE11 & Supernova14

    Search in categories:

    Focus is placed in the new category name field on page load

    Search in tags:

    Focus is placed in the new tag name field on page load

    Search in media library

    While in grid view, this search works differently it appears to filter items as you type but from a screen reader point of view clicking the search button gives no feedback that any search has been performed. Perhaps on pressing the search button focus can be moved to the first search result or if a total of items found message is added, like in posts, categories and tags focus can be moved to that.
    While in list view, it works more like the posts, categories and tags search.

    Search on all pages

    Search on “(no title)” and “mwa” both return no items
    It doesn’t seem possible to search for all pages with no titles

    Search on themes

    Empty search returns all six themes
    Search on “four” returns two items: twenty fourteen and twenty ten
    Search on “ten” returns four items: twenty fifteen, twenty eleven, twenty fourteen and twenty ten
    There is no search button and pressing enter in the search field gives no indication to the screen reader of any changes and the search results are a little odd.

    On the whole quite reasonable. However, themes gave the most odd results. Not having any screen reader friendly feedback a search has been done is a little off putting as is placing the focus on a form field on page load.
    The searches appear to be limited to the first column of the results table and it may be nice to be able to search or filter on file type in the media library. IE jpeg, png, gif, mp3, mp4, doc, docx, pdf etc.
    Another nice to have may being able to search or filter by user who created/uploaded the item.

    Geof Collis,

    Tools: IE 11, JAWS 14.5

    search post, pages, comments, plugins and media/library

    no problem with search function initially but I dont like trying to find the results, there needs to be a heading for the results, as it is right now I’ve got to tab through all of the regular stuff before I find a table with results if any, very annoying and time consuming, also, I’d like the focus to be taken to the results after a search if possible

    On another note a heading before all posts, pages, categories etc would be nice.

    I noticed that when I do a second search that the previous text is still in the edit box, this should be removed after the initial search.

    Tags and categories

    This is better, they have a heading and the search term used but the focus gets taken past the heading, I have to move backwards, this might be more of a problem for a keyboard user.

    Still the issue of previous search term in edit box.

    Themes

    Something wrong with the edit box, as I start typing it is reading off the url and search term and when I hit enter it doesn’t go out of forms mode, I have to do it manually and again a heading with the results would be better than tabbing through the regular stuff.

    Plugins add new, all criteria

    This worked great, a heading for each plugin made it easier to sift through them but still the issue of text in edit box after search.

    Add new

    Posts and pages work fine as long as the disable the visual editor checkbox is selected in Profile.

    Add media

    Uploading from my computer has become a whole lot better but do have issues with adding alt text etc, trying to add one from the media library is non existent, perhaps a test for another day.

    Summary:

    • Give screen reader feedback for search results and what’s happening with the interactive search in themes.php and upload.php
    • Give better screen reader feed back about the amount of search results
    • Set the focus on search the results after search submit (and not for example at New category)
    • Add a (hidden) submit button  and remove the placeholder for search in upload.php (at least for list mode),  plugin-install.php and themes.php (see ticket #26600)
    • In themes the search input text gets blocked after clicking enter to execute the search.
    • Bug: Plugins > Add New: typeselector select field has no text/label (see ticket #26601 )
    • It is not possible to search for posts/pages with no title
    • Search installed themes gives to much results?
    • Remove search function for the themes.php outside the H2 (see ticket #26601 )
    • Move the search field on top in small windows

    Discussions in Slack about the results:

    Slack log

    Now there are 5 different ways for a search:

    1. Search input no submit button, no live search (need to press Enter) in Media Library list mode
    2. Search input no submit button, live search fires “as you type” in Media Library grid mode, Themes (add new, wp.org API), Network Themes (add new, wp.org API)
    3. Search input no submit button, live search fires “as you type” (more a “filter current collection” than a search), Themes (installed themes), Customizer add widget, Plugins (installed plugins)
    4. Search input with hidden submit button, press Enter or tab and submit the hidden button (after the search, the “typeselector” select appears) in , Plugins (add new), Network Plugins (add new)
    5. “Classic” search: search input with submit button, press Enter or submit button, in Posts, Categories, Tags, Pages, Comments, Users, Network index: search users, Network index: search sites, Network Sites, Network Users, Network Themes (installed), Network Plugins (installed)

    We recommend only 2 forms of search:

    • the classic one, the same for every search, with visible submit button
    • the dynamic one:  adding wp.a11y.speak to show the results count, and making sure focus doesn’t change dynamically

    Actions:

    • Open ticket for the missing label for the  typeselector select field – @rianrietveld
    • Open ticket on a unified search form display: 2 types – @cheffheid
     
    • Rian Rietveld 6:39 am on March 31, 2015 Permalink | Log in to Reply

      Some extra remarks:
      It seemed there already was a ticket for the missing label for the typeselector select field : #31795
      Searching for posts with no title is possible if you ‘enter no title and not ‘(no title)’ in the search field

    • Jeff de Wit 2:56 pm on March 31, 2015 Permalink | Log in to Reply

      Here’s the ticket proposing the unified search form display changes: #31818 – open to thoughts from all.

  • Rian Rietveld 4:18 pm on March 26, 2015 Permalink
    Tags: Accessibility usertest   

    Usertest: Extra small test about role=application in Press This 

    Send to the test team March 26, 2015
    For WordPress 4.2-beta2

    Question

    We would like you to test the “Press This” categories selection in
    You can access Press This directly in WordPress, at: /wp-admin/press-this.php

    After the editor, you will find a “Post Options” area where you can set the Post format, Categories and Tags.
    About Categories, it’s made with a list of DIV elements with role=checkbox, for several reasons developers choose to implement them this way so switching back to native checkboxes is not an option 🙂

    You should be able to check them as you usually do with native checkboxes, by the way screen readers won’t automatically switch to “forms mode”.
    To force the switch we added role=application to the list container.
    This has pros and cons and, generally, it’s recommended to use role=application sparingly and wisely.
    See for example this post by Mr. Zehe:

    Since any recommendation and best practice should be always tested in a real world experience, we would like you to test what’s best for you.

    • with no role=application, users will have to manually switch to “forms mode”
    • with role=application, the switch should automatically happen but you will lose the native behaviour and other things like the number of items in the list being automatically announced, not mentioning arrowing won’t work.

    Results so far:

    Bram Duvigneau

    After a quick look, I come to the following conclusions:

    • NVDA shows an application region and you need to press space bar/enter to interact with it. Please note this is not necessary if the user just navigates by pressing tab
    • The application region contains just a bunch of elements that behave like checkboxes

    Given the fact that this is not a real application, but just a list of checkboxes, I recommend against using role=”application” here.
    By putting the checkboxes in an <ul> or an element that has the corresponding aria role (list from the top of my head), you wil just make it clear that these checkboxes belong together. As a bonus I would suggest using the new wp.a11y.speak to announce the number of results when a user types in the search field, e.g.: “4 categories displayed” or similar.

    Susan R Grossman

    On JAWS

    This doesn’t work for me even when using tab/shift/tab.

    It skips some of the choices when trying to tab/arrow/space/navigate in any method through them.  Does every other “radio button”.

    Geof Collis

    On JAWS 14.5 IE11

    I dont like it one bit and it should not be implemented, it goes against everything I know about radio buttons and checkboxes.

    Not sure if this is relevant but when ever I see a form I go through the whole form without going into forms mode to give my self an idea what it looks like, then I will fill in the first edit box/ button etc, go out of forms mode go to the next field fill it in then go out of forms mode again, I do this for all forms because I dont trust them to cycle properly.

    Michelle DeYoung

    FF/NVDA/Win7: Once the screen readers announces “application” and throws me into forms mode, the next tab takes me back to the Category tab and “Back to Post Options Button” is voiced. Then I have to tab through the other items in the tab order to access the categories I would like to check/not check.
    Each category item name is voiced with checkbox not checked.

    IE/JAWS/Win7: Once the screen readers announces “application” and throws me into forms mode, the next tab takes me back to the Category tab and “Back to Post Options Button” is voiced. Then I have to tab through the other items in the tab order to access the categories I would like to check/not check.
    Each category item name is voiced with checkbox not checked, to check press spacebar.

    Chrome/ChromeVox/Win7: Once the screen readers announces “application” and throws me into forms mode, the next tab takes me back to the Category tab and “Back to Post Options Button” is voiced. Then I have to tab through the other items in the tab order to access the categories I would like to check/not check.
    Each category item name is voiced with checkbox not checked item.

    Keyboard only: Another accessibility impact would be for keyboard users. Tabbing to the category item highlights it but they have no idea that the item is selected and operational via a checkbox. If you do not want the checkbox displayed then add some verbiage to let visual keyboard users know how and what they are supposed to do so they don’t have to guess that if they use a spacebar that it will check the category item.

    I would recommend not using the role=”application” in this case, and focus on getting this to work for screen reader users and keyboard only users. Perhaps a tab/accordian widget. Here is a link to an example, but it also is using role=”application” which impacts access via different screen readers, so in this example I would remove it as well, but it still shows a different widget option.
    Example 37 – Tab Panel: Accordian using ARIA CSS selectors

    I think the role=”application” will only frustrate users more and impact how they access those content items.

    Anna Natorilla,

    Trunk: This custom checkbox implementation allows the user to activate the checkbox with spacebar key only. The user has no problem checking the custom checkboxes. If the user reads the checkbox via virtual cursor mode and they press the enter key to select a checkbox, the screen reader will tell the users to press the spacebar key to check or uncheck a checkbox. Once the users check or uncheck a checkbox with the spacebar key, the user was switched to forms mode.

    It is a fact that switching to forms mode on the checkboxes will cause the screen reader to not announce the number of items in the list. The user has to use virtual cursor mode to hear the list items numbering and levels.

    Nightly: This native checkbox implementation allows the users to activates the checkbox with both the spacebar and enter key on via virtual cursor or forms mode. The users have no problem checking the forms control whether they are in forms mode or virtual cursor mode.

    Gabriela Nino de Rivera Torres

    Tools: Safari 8.0.4 + VoiceOver

    I found very easy moving between the categories list. It’s a great improvement compared with the old situation. In the old version, first I need to go inside the group to interact with the items inside. When moving from one category to the next VoiceOver was speaking twice each item, one for the button ratio and the second for the text inside the button ratio, which was very annoying.

    In the new version I don’t need to go inside the group to interact with its items. Selecting the ratio buttons it is also very easy to do.

    Points not so good:

    I noticed that when adding a new category, the user is not notified of the action. There is not a message confirmation to tell the user if the category was successfully created.

    Also, when adding a new category, the category is selected by default (the ratio button is selected). The user won’t not know until she moves from one category to the next.

    The categories are added at the beginning of the list under their parent category. It is funny, I was expecting to be added at the end instead. This has nothing to do with accessibility issues. 😀

    When moving in the list of categories, there is nothing that announce the user if a category is a parent or a children. This information is being transmitted only visually.

    For some reason all the sub-categories inside the testing category are announced by VoiceOver like “list of X items”. I added categories in other parent categories, but this behaviour only happened with the testing parent category. I looked in the code, I could not find any differences between the parent categories. So, I’m very puzzled about this.

    Tina Tedesco

    Using JAWS 15

    Not sure I did this correctly but I concentrated on the list starting whith the checkboxes. I was able to check and uncheck with any problems.

    When arrowing down it said, “Entering Categories Application.” Then arrowed down and came to accessibility, it indicated “list of 6 items.” When I arrowed passed accessibility it indicated “list of 4 items nesting level 1.” When I got to the end of that list it indicated “list end nesting level 1.)

    I heard no more beginning or ending of levels until I arrowed passed JDFh checkbox. it indicated “list of 2 items nesting level 1.” When I got to the end of the list it said “end of list nesting level 1.”

    I arrowed to Testing (did not mention a new listing) and when I arrowed again it said “list of 5 items nesting level 1 as well as end of list nesting level1. ”

    Came to Uncategorized (nothing to indicate any listing before the word) arrowed down once indicating “list of 2 items nesting level 1.” Once I arrowed past the 2 items it said “list end nesting level 1.”

    At the end of this list it said “Categories applications end.”

    Should there have been some sort of message for all listings?

    Hope this is not too confusing.

    Malgorzata Mlynarczyk

    Tested with NVDA in Firefox

    As I’ve said before I’m not a native screen reader user, so I’m probably not the best person to test it (it would be better to test it with actual screen reader users). However, I personally prefer the solution with role=”application”. First of all, screen readers are expected to switch to application mode when in the form, so this is an expected behaviour. Once in the form, the users are used to navigate using Tab key, rather than by moving the virtual cursor using the arrow keys, so I don’t think this is a problem. The fake checkboxes work well – the change in state (checked / unchecked) and the ‘checkbox’ label are announced to the user. And although the screen reader doesn’t inform the user how many items the list contains, I don’t think this is particularly important here, and sighted users don’t know it either (unless they decide to manually count them…).

     
  • Jeffrey de Wit 10:33 pm on March 3, 2015 Permalink
    Tags: Accessibility usertest   

    Complex form structures, combining checkboxes/radio buttons and input fields 

    Sometimes our weekly test sessions unearth issues outside of the scope of the patches and functionality that we’re testing. These issues are usually quick to resolve, but sometimes they require more deliberation to find an elegant solution.

    One of those issues is dealing with compound settings. The way they are currently structured makes these settings a bit confusing to screen reader users. There are two reasons for this:

    • Shifting from a checkbox to an input field for a sub setting announces partial labels. For example, “Automatically close comments on articles older than [14] days” becomes “Automatically close comments on articles older than” for the checkbox and “days” for the input field.
    • Shifting from a radio button group to the “Custom” input field doesn’t properly announce what the field is for. For example, for the “Date Format” setting it will simply announce “Custom” and whatever the value for the input field is (ie. “F j, Y”).

    For a more detailed description on these issues, see also tickets #31354 and #31356.

    As part of last week’s testing session we had asked some of our expert testers for their opinions on how to properly solve this. This is a summary of their findings.

    Checkboxes and input fields (#31354)

    Michelle DeYoung

    For the more complex labeling, here’s a bin with some example code: http://jsbin.com/rimoqu/

    It contains the html and css for a complex labeling and text scenario that uses radio buttons as well.

    I know normally you don’t want to create a bunch of extra listening for the user, but in cases like these, I think the extra can help define/explain what is needed; hopefully clearer. Ideally, this would be something that would be great to have user testing applied to.

    Gabriela Nino de Rivera

    For this problem, I think the best strategy is to do like the romans: “divide and conquer”.

    Showing all the information in one line could be visually nice, but as you mentioned, it’s not screen reader friendly.

    What I would suggest is to break the action in different steps. Something like this: http://jsbin.com/pogefemiha

    Malgorzata Mlynarczyk

    I think the main problem here is that those problematic options were designed with sighted people in mind, and so it’s as much an UX as an accessibility issue. I’m not a UX person, but here are my thoughts on the subject:

    It will be difficult to code these complex options in a way which is not confusing to screen reader users (label for an input field, containing another fields and their labels).

    I guess it could be achieved using a combination of label text, some visually hidden text and text hidden from screen reader users (see example below), but it’s a bit complicated and may not work for all the checkboxes (perhaps the wording of some of them would need to be changed).

    For the ‘break comments into pages’ checkbox you could use the following code: http://jsbin.com/vafapi/

    Another solution would be to simplify the form and split all those complex options into several options (each containing just one form field and label), for example: http://jsbin.com/rimuwo/

    Radio buttons and input fields (#31356)

    General

    Our testers, rightly, pointed out that the legend is properly announced for them – adding context to the Date and Time Format radio buttons. Some investigation reveals that NVDA won’t announce text wrapped by span tags inside of legend tags when using Chrome. The suggestion is to remove these span tags as well.

    Gabriela Nino de Rivera

    I prepared an example form that include a suggestion for this problem. When I did the tests with VoiceOver and NVDA, I found it easier to navigate and to understand what needs to be fill in to complete the form.

    The example can be found at: http://jsbin.com/fuxagu

    Things that have been changed:

    • I moved the description texts before their input (for example tagline description), so we can listen to the information before we need to fill text.
    • I added significant information to the legends attribute, so the user is informed of the actions required inside the fieldset.
    • I associated the labels to their ratio buttons and removed the title attribute from them.

    About the last change: Here we have a big issue because the title is notifying an important information to the user. But the problem is that not all the screen readers will read the label title. So, when doing the test on NVDA, this information was not notified to me. I don’t have a solution for this, the only thing I can think is to add it inside the span like this:

    <span>4:26 PM (g:i A)</span>

    But this is only solving the problem in half, because even if the screen reader announce it to the user, I won’t hear the two points (:) and won’t know that the A is capital letter.

    Malgorzata Mlynarczyk

    • I would change implicit labels to explicit ones (using ‘for’ attribute pointing at the relevant form field)
    • I absolutely agree with you that the input field for custom date or time should be disabled and not focusable until the relevant ‘custom’ radio button is selected
    • each of those ‘custom’ text input fields needs to have a label, which can be visually hidden
    • I would perhaps also add ‘aria-live=”polite”‘ attribute to the showing an example (based on the selected format), so that it would be read out when it’s updated. I’d test it though first with different screen readers to make sure it works as expected.

    So my mark-up for the time format fields, for example, would be something like this: http://jsbin.com/jaqehanalo/.

    In conclusion

    A lot of great feedback here. For solving complex form structure issues there seem to be two viable options:

    • Use hidden labels to make sure these fields have additional clarification for screen reader users.

      This option doesn’t compromise the way these settings look right now at all, while still solving the issue with fractured and incomplete labels.

    • Split them up into their own stand-alone fields.

      This will definitely clarify things for screen reader users, but could potentially clarify it for sighted users as well. However, it will require rewriting of labels and will also have a visual impact on the settings screen.

     
  • Rian Rietveld 10:59 am on February 22, 2015 Permalink
    Tags: Accessibility usertest   

    Admin plugin pages and Shiny Updates: Accessibility user test result 

    Tested on WordPress 4.2-alpha
    Summary of the result at the bottom of this post.

    Testers:

    • Kim van Iersel
    • Gabriela Nino de Rivera
    • Tina Tedesco
    • Malgorzata Mlynarczyk
    • Greg Wocher
    • Jeff de Wit
    • Petra de Jong

    Test:

    Go to Dashboard > Plugins > Add New
    Add a new plugin (any plugin, witch one doesn’t matter)
    Can you add a plugin and also is it clear what happens for a screen reader user.

    Go to Dashboard > Plugins > Installed plugins
    Can you also test updating an already uploaded plugin.

    Test results

    Kim van Iersel

    Jaws 15.

    When I clicked on a plugin, after the name appeared some message which implied that the plugin should be installed. I thought it was not clear because I’m used to read this info below/with the heading. Now there was no notice that plugin was downloaded and installed. I went to the plugins, the list of installed plugins and there it was, activated and all!
    For me personally, there is little information about the process and results.

    Gabriela Nino de Rivera:

    NVDA for Windows XP and FireFox, VoiceOver OS X Yosemite 10.10.2 and Safari. Extensions for Firefox: WAVE toolbar, Web developer toolbar and Jim Thatcher favelets. Firefox Inspector for manual code review.

    From Dashboard > Plugins > Add New page, there are two ways for adding a new plugin: first one is clicking on the “Install now” button available with the plugin information.

    The second one is to chose “more details” where an “Install now” button is at the bottom of the popup frame.
    Before adding a plugin, the user needs to search for it. The user might or might not know the plugin’s name. I’m not sure if the process for searching a plugin is in the scope of this test, so I’ll try to be short.
    Searching for a plugin

    To search for a plugin, the user can sort by category or use the search tool on the page.
    A list of five categories are available for the user (featured, popular, recommended, favorites and Beta testing). After being redirected to the category page, the user it is not notified where she is. The focus is moved at the beginning of the page, the user need to come back where she were. There is only a visual indication so NVDA and VoiceOver can’t tell the user current location.

    Plugin categories

    The search tool form it is a little bit confusing. When using the search tool, NVDA and VoiceOver will recognize that there is an input text, but it seems that the association between the label and the input is missing. This could be maybe occasioned by the hidden objects on the form.

    <form class="search-form search-plugins" method="get">
    <input type="hidden" value="search" name="tab"></input> <label><span class="screen-reader-text">Search Plugins</span>
    input class="wp-filter-search" type="search" placeholder="Search Plugins" value="" name="s"></input></label>
    input id="search-submit" class="button screen-reader-text" type="submit" value="Search Plugins" name=""></input></form>
    • Inputs are missing an id attribute
    • Label is missing the for attribute to make the association with the input.

    There is a select menu on the search form that it appears when a search is done. This select menu is missing a label, so when the focus is on this element, NVDA and VoiceOver won’t give any extra information than “keyword popup button” or “select menu keyword”.
    <select id=”typeselector” name=”type”>
    <option selected=”selected” value=”term”></option>
    <option value=”author”></option>
    <option value=”tag”></option> </select>

    Adding a plugin
    Clicking on the “Install now” button available with the plugin information
    When adding a plugin from the button “install now”, even if the focus on this element, none of the two screen readers notifies the user about the progress or the installation confirmation. The feedback is only visual.

    Plugin installed

    Clicking on the “Install now” button at the bottom of the “More details” popup information

    If the user decides to add a plugin from the “install now” button on more details, she will be redirected to a confirmation page where she can easily have feedback about the installation.

    Install via more details

    When an error happens the focus is not moved to the error element, so the user can not know about it unless she moves to the top and read again the page with the screen reader. Errors are only identified visually: by a red line at the left of the text.
    When the error is written in other languages, it does not seems to be using the lang attribute to specify the language of the text.

    Error message in another language

    Tina Tedesco

    I tried installing a plug in and received no information from my screen reader.  It did not seem like anything happened.  I received no message or additional information.

    Malgorzata Mlynarczyk

    I was able to add a plugin using keyboard only, and using a screen reader (NVDA in Firefox and Chrome). However, I did notice few issues:
    There’s a missing <h3> heading. I’d probably place this heading somewhere at the beginning of <div class=”tablenav top”> container, and set its value to a currently selected plugins category (as shown in <ul class=”filter-links”>). So, for example, if the page is showing “Popular” plugins, this heading should be <h3>Popular plugins</h3> (this heading can be hidden from sighted users).
    At the moment the selected category of plugins (‘Featured’, ‘Popular’, ‘Recommended’, etc) is only indicated using visual cues (border-bottom and different text colour). Screen reader users don’t know which page they are viewing when browsing through that list of links. The currently viewed page shouldn’t really be a link (because it’s only linking to itself), and/or maybe it would be useful to add some text to the selected one (hidden from sighted users).
    For example, on the page showing ‘Popular’ plugins, the list could look like this:
    <ul class="filter-links">
      <li class="plugin-install-featured"><a class="" href="[..]/wp-admin/plugin-install.php?tab=featured">Featured</a></li>
      <li class="plugin-install-popular"><span class=" current"><span class="screen-reader-text">Selected: </span>Popular</span></li>
      <li class="plugin-install-recommended"><a class="" href="[..]/wp-admin/plugin-install.php?tab=recommended">Recommended</a> </li>
      [etc.]
    </ul>
    On most of the ‘Add Plugins’ pages the search area only contains one input field (‘Search plugins’). However, on the ‘Search results’ page there’s an extra field, a dropdown list. That dropdown list has no label. It should be labeled, for example:
    <label for="typeselector"><span class="screen-reader-text">Search plugins by: </span></label>
    <select id="typeselector" name="type">
      <option selected="selected" value="term">Keyword</option>
      <option value="author">Author</option>
      <option value="tag">Tag</option>
    </select>
    <label for="search-text"><span class="screen-reader-text">Enter word or phrase:</span>
      <input type="search" value="form" name="s" ffpdm="gff6ot1hm6l5m5fe7xst3o">
    </label>
    dropdown
    ‘Search plugins’ button is hidden. This means that from sighted keyboard users point of view the focus disappears from view when the focus is moved away from the ‘search plugins’ input field. Focusable elements shouldn’t be hidden from view, as this can be confusing to sighted people who use keyboard.
    For every listed plugin there’s an image link without text or an ‘alt’ attribute. This means that the purpose of those links will be unknown to screen reader users. NVDA read out for each of them ‘plugin-install tab=plugin-info”. I don’t think it’s necessary to wrap a link around those images, as there is an adjacent text link to the same page right next to it. I personally would remove the <a> element and add an empty ‘alt’ attribute to each of those images.
    image link without text or an 'alt' attribute
    When the text of the ‘Install Now’ button changes to ‘Installed’, the colour contast ratio between the text and the background is not sufficient – only 2.07:1, which is below the required minimum (4.5:1).
    colour contrast installed plugin button
    ‘Install Now’ button and screen readers:
    • This button should be marked-up using <button> element, rather than <a>, as it is not a link (it doesn’t take the user to a different location). From a screen reader user point of view, selecting that link doesn’t do anything – the user stays on the same page.
    • for me, the value of ‘aria-label’ attribute on that element was not read out by NVDA. Perhaps ‘aria-describedby’ would work better? It could point at the preceding heading, which contains the name of the plugin
    • I was also wondering if perhaps screen reader users should be given some feedback as to what is happening on the page after the ‘Install Now’ button has been pressed. I’d try adding ‘aria-live=”polite”‘ on that button (or a <span> inside that button, containing the button text). In that way whenever the text of that button changes (‘Install Now’ -> ‘Installing…’ -> ‘Installed!’), it should be automatically announced to screen reader users. However, please bear in mind that I haven’t tested it, so I can’t guarantee it will work as expected. I would try it though.

    Greg Wocher

    JAWS and NVDA on my Windows 8.1
    I was unable to install any plugin. I would click on the link that said install this
    plugin and nothing happened.

    Petra de Jong

    Screenreader Supernova
    No problems with adding a plugin. I knew which plugin I installed and that the install was successful.

    Jeff de Wit

    Adding plugins seems to function fine. There’s a lot of tabbing involved in selecting a plugin though. No different from how it is with 4.1, it’s 5 links per plugin block after all. Though 3 of them (image, title, more details) open the same modal.

    Updating seems to work fine as well with just a keyboard. I was having some minor issues with updating Jetpack, but it’s probably because Jetpack auto-updates. 🙂
    NVDA doesn’t actually tell me that the update or installation of the plugin is complete though. It also seems to announce table rows and stuff as I go through the installed plugin page (I think that’s a known issue).

    Comment by Rian

    Regarding the missing visible submit button in search plugins: I can see and I often find myself installing a featured plugin instead of doing a search. With out thinking, I expect a submit button, and therefor I press the nearest submit button in sight. Maybe for usability (don’t make me think?) a visible submit button would be nice with the search plugin form.

    Summary a11y test plugin pages and Shiny Updates

    Overall: And this doesn’t only count for the plugin pages: The heading structure is not semantic, a missing H1 and there are skipped levels in the admin pages.

    Search plugin:

    • Screen reader users get no feedback on what catagory they are seaching in
    • ‘Search plugins’ button is visually hidden, not usable
    • The search plugin form has no label (added a comment: #26600)
    • Select menu on the search form with search results : missing a label

    Adding a plugin:

    • Screen reader users get no feedback if a plugin is installed or not
    • When an error happens in /wp-admin/update.php?action=install-plugin the focus is not moved to the error element (related: #31368)
    • When the error is written in other languages, it does not seems to be using the lang attribute to specify the language of the text.
    • When the text of the ‘Install Now’ button changes to ‘Installed’, the colour contast ratio between the text and the background is not sufficient.

    Updating a plugin:

    • Screen reader users get no feedback if a plugin is updated or not

    Comment by Andrea

    I would like to add one thing no one reported, may I? 🙂 The Install Now “button” (should be a real button) has an aria-label attribute that should be updated together with the button text updates, so when the button text changes to “Installed!” the aria-label should be updated too, currently it’s not:

    <a ... aria-label="Install Getty Images 2.3.0 now">Install Now</a>
    <a ... aria-label="Install Getty Images 2.3.0 now">Installed!</a> <-- conflicting infos
    

    Just after a page refresh the button is correctly changed to a span with correct information but it uses a title attribute that should be avoided, see “Title attributes galore” https://core.trac.wordpress.org/ticket/24766

    <span ... title="This plugin is already installed and is up to date ">Installed</span>
    

    Additional notes

    • keyboard focus may be lost, for example on the Installed Plugins screen, when you activate the “update now” link, the whole HTML of that section is updated via JavaScript and the link removed, so keyboard users will be lost.
    • Errors handling (failed update, failed install) and feedback could be improved. Additionally, in some cases like a failed update, you have no UI controls available to take any further action, your only option is to refresh the page.
     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Skip to toolbar