WordPress.org

Make WordPress Accessible

Category: Working Group Toggle Comment Threads | Keyboard Shortcuts

  • Rian Rietveld 7:05 am on August 23, 2016 Permalink |
    Tags:   

    a11y update week 34 2016 

    Summary team meeting WPa11y team, August 23

    Focus for WP 4.7

    @davidakennedy suggested: “Since new user experience will be a focus: maybe there’s a11y items we can improve related to that? First-time installs, theme activation, etc.”. And we agreed that this is a good idea.

    Some suggestions that came up:

    • let the test team do the famous 5-minute install with different AT
    • focus exclusively on the experience with default themes
    • plugins: only install, active, deactivate, remove
    • check for and address any existing problems
    • see whether there are any major changes proposed for WP 4.7 and test those
    • hashtag #a11y-firstinstall for tickets

    @trishasales and @rianrietveld have time for this.

    Theme reviews

    @joedolson completed a couple reviews in the last two weeks. Robert Jolly (@iamjolly) is joining Joe and David in reviewing themes for the accessibility-ready tag.

    Documentation

    Robert Jolly is also going to help Trisha and Rachel Vasquez (@rachievee) with a high level overview and some Project Management for the handbook. The goal is to reinstate the hierarchy that started at WordCamp US and build/modify as needed. There will be a Google hangout next Thursday to get this started.

    Open floor

    Joe brought up the following:

    “We have a list of accessibility related plugins. These are not all of the accessibility-related plugins in the repository. Some plugins are not helping accessibility and a few are even harmful. Do we, or should we have a specific policy governing which plugins we’ll list there?”

    We agreed on not having an official certification/approval system for plugins like we have for the accessibility-ready themes.
    Joe, Robert and Rian are going to look at the plugins tagged for accessibility and investigate if there are plugins that claim to improve a11y but are actually harmful or doing things that are really not beneficial.
    Also we can extent the list with plugins on Useful Tools we think are good.

    Bug scrub

    This week there was no bug scrub, someone needed a holiday…

    And other news that came by during this week

    • Modern Tribe is now sponsoring time for Trisha Sales to spend on work for the accessibility team.
    • Rachel Carden (@bamadesigner) published a nice plugin wa11y , for testing a website for accessibility with e.g. WAVE and Tota11y.
    • @michael.heuberger is working on a plugin using JavaScript to integrate a video in a form submission. This way deaf users can submit their response in sign language.
     
  • Rian Rietveld 8:01 am on August 6, 2016 Permalink |
    Tags: , bug scrub   

    WP a11y update week 31 2016 

    Summary team meeting WPa11y team, August 1

    Team meeting in Slack.

    Retrospective and looking ahead

    In @afercia’s words: Since the release cycle is now in RC time this would probably be a perfect time to think at the past months activities, what went well, what could be improved, do you feel there’s anything that makes contributing difficult for you, is there anything you feel it should be done differently? Maybe also start thinking at (realistic) plans for the next release cycle and check time and resources availability for the next months. Maybe we could introduce this kind of “retrospectives questions” after each release cycle.

    What went well?

    • We’re alive, more or less in good shape, we improved a bit accessibility on WordPress
    • Having a focus each release went well, like heading structure, colour, title attribute
    • Introducing the bug scrubs – even if it doesn’t directly fix tickets it does bring order to the madness
    • Attending and speaking at WordCamps was useful
    • Accessibility tables and workshops on contributor days at WordCamps

    And from our sponsors:
    WP Site Care sponsored Andrea and Rian to go to the community summit and WCUS15. Yoast sponsors 25% of Andrea’s time to do a11y core work. And (spoiler alert) Rian will be sponsored too for 25% as from mid August.

    What can be improved on

    • We don’t have time resources, people, and skills to start managing accessibility projects. We work on the existing issues but need to start thinking at bigger plans. Patching and patching is someway expected in a so large project with outstanding accessibility issues, at the same time it would be great to start bigger projects.
    • Accessibility is not part of new features since the initial development steps, but something added at a later stage

    Do you feel there’s anything that makes contributing difficult for you?

    • Everyone: lack of time
    • Some of the new features, like Shiny Updates and Twenty Sixteen and Fields API, were initially developed on GitHub, that makes things more difficult to follow different things on different places
    • The difficulty of monitoring accessibility is that it involves every part of core development. Maybe we need to focus on training the developers, and not in fixing stuf ourselves.
    • A couple more coders would help too
    • The lack of proper screen reader accessibility of Slack makes it difficult for @arush to contribute.
    • There are accessibility issues on the form to create new tickets and to comment on tickets in Trac, which makes it difficult for people using assistive technology to contribute.

    Plans and ideas

    • Spend more time on WPa11y core work and documentation
    • Focus on education developers and designers
    • Training for theme reviews accessibility-ready tag
    • Extend and improve the pattern library
    • Give more workshops on WordCamps
    • Do more a11y audits on core, with recommendations to fix (and not fix ourselves)
    • A monthly or quarterly or whatever worldwide a11y contributor day, like the translation day, use also the global a11y awareness day
    • A11y audit on the Trac templates
    • Involve more assistive technologies users on trac, but before that the Trac issues must be solved
    • Start a featured project (the Media maybe?)

    Open floor

    Maybe we need a statement on Make/Accessibility that the accessibility team is independent and not connected to any company for assistive technology or test software. This to prevent to be claimed by companies for our voluntarily work on open source.

    Bug scrub, August 1

    We discussed tickets labeled accessibility and with status awaiting review.

    Bugscrub in Slack.

    #37513: Admin bar sub menu items dashicon and screen readers and
    #37511: Dashboard activity widget: hide the “No activity yet” smiley from assistive technologies
    Screen readers behave differently with CSS generated content, for example VoiceOver gets CSS generated content icons as “text” element. The W3C spec says is that something is probably going to change in the next future and CSS generated content, including dashicons, will be probably announced as content by assistive technologies. We should monitor this as a general issue for all the CSS generated content used in WordPress.
    Set both tickets to 4.7-early

    #37486: Make emojis accessible
    Andrea opened this ticket mainly to start a discussion about Emojis. This needs research, Rian will have a go on this.
    Set to Future release.

    #36925: Media views: introduce a “Heading” view for better accessibility
    Set to future release, there is already good work in progress for this ticket.

    #36474: Revamp meta boxes
    A ticket for the UI/design team to handle, the label accessibility is only added to keep informed about relevant UI changes.

    #36447: Responsive preview icons in Customizer need tooltips
    We agreed that tooltips are necessary. Best = Icon + text and Second best = Icon + aria-label/tooltip. Good example is GitHub handles the icons with aria-label and tooltips. @arush mentioned grease monkey script  to help those who aren’t power users deal with them on the NVaccess Github
    Set to Future Release and assigned @iamjolly as owner

    And other news that came by during this week

    Josh Pollock, the plugin author of Caldera Forms, started working on fixing accessibility issues in his plugin. You can follow his progress for Caldera Forms in GitHub. Feedback is welcome.

     
    • Rachel Carden 1:42 am on August 8, 2016 Permalink | Log in to Reply

      Thanks for the extensive update! I’m a developer who’s passionate about a11y and would like to get more involved with WPa11y, especially with coding and education. I’m already on WordPress Slack as @bamadesigner. Just let me know how I can contribute. Looking forward to helping out!

  • Konstantin Obenland 5:37 pm on May 16, 2016 Permalink
    Tags: feature-plugin, , shiny-updates   

    Shiny Updates Review 

    Hello Accessibility Group!

    @joedolson was so kind to look over Shiny Updates a few months ago, but since then a lot of improvements have made it into the plugin and we feel it could benefit from another Accessibility review. We’d like to have Shiny Updates in the best shape it can be before it gets merged and would appreciate it if you could look through the latest version of the plugin and see if there is anything that can be improved there.

    If you do encounter issues, it would be great if you could file those on GitHub for us to fix them.

    Our next chat will be on Tuesday, May 17 at 19:00 UTC in #feature-shinyupdates, in case you have questions or want to discuss any aspect of Shiny Updates. We’re also around to answer questions outside of that of course, please feel free to let us know.

    Thank you!

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

    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

  • Joe Dolson 7:59 pm on April 18, 2016 Permalink
    Tags: , , wishlist   

    Accessibility Wish List for 4.6 and beyond 

    Following the example from development on the WordPress Editor, the accessibility team is going to start posting our goals in wish list format. If you have an accessibility goal you’d like to see the team pursue on WordPress core, add it in a comment and let us know!

    Current Accessibility Goals

    • Color Contrast: coordinate with the Design team to finish the colors. See #31713, #35659, #35596, #35622. (@afercia)
    • Settings API: collaborate with the team working on the Fields API to make sure they’re fabulously accessible. See #18801 for history, Fields API development (@joedolson, @afercia)
    • Uniform Search: Work to address the numerous different search interfaces within the WordPress admin so they offer the same experience through the admin. See #31818. (@cheffheid)
    • Develop libraries for Accessible Tabs & Accessible Modals
    • Accessible Video: improve the user interface and meta data relationships for captions & subtitles to make accessible video easier to manage. See #31177. (@rianrietveld)
    • Accessible Media Grid
    • Review usage of target=”_blank” in the admin. See #23432. (@trishasalas)
    • Finish headings improvements: remove controls from headings. See #26601. (@trishasalas)
    • start accessibility work on Select2. See issue 3744 on Select2. (@afercia)
    • Finish working on an accessible Tag Cloud Widget. See #35566.
     
  • Rian Rietveld 6:35 pm on April 12, 2016 Permalink
    Tags: ,   

    Team Meeting April 11, 2016 

    Just before the 4.5 release we looked back and ahead on the work we do as a team. The following idea’s where discussed:

    We need more coders (Andrea Fercia is doing way to much on his own), and we have to find a way to find and keep new coders for our team.

    Be less focused on specific tickets, and more focused on tasks. And have somebody responsible for managing a goal, and keeping on top of all tickets pertaining to that goal. That may include asking somebody else to write it or work on it, but that person is keeping on top of that particular goal and whether it’s on track.

    Start a mentor program for new contributors, teach them accessibility and have someone available to answer questions, assign a coder a ‘mentor’ to ping on Slack.

    Find a way to get funding for the team. Almost all the work is done in our free time and this is part of the reason we are short of hands. Brainstorming about funding:

    • Crowd fund, for example Patreon.com
    • WordPress Agencies
    • Universities
    • WordPress Foundation
    • Accessibility organizations

    Joe Dolson is preparing a survey regarding WP and Accessibility, so we can gather data. What AT are people using (they should complete the survey once for each combination they use with WP), their pain points, where they feel WordPress is strong/weak, overall impressions of how WordPress has changed since they started using it including data about when they started using it, what version they’re currently using, if they haven’t updated, etc…

    Tickets cleaup

    To investigate which tikets need work and which goals we need to set for future releases we organize a tickets focussing accessibility review session on Saturday. A bug gardening, ticket cleaning, bug scrub meeting on Saterday April 16 at 13:00 UTC in the accessibility channel in Slack. Everyone is welcome to join us.

    Review the meeting at Slack

     
  • Joe Dolson 7:18 pm on March 21, 2016 Permalink
    Tags: , , meetings   

    Team Meeting 3/21/2016 

    Our team meeting for today focused primarily on goal setting. As we’re nearing the release candidate stage for WordPress 4.5, it’s time to move our attentions forward to the future again.

    Coming out of 4.5, we know that while we’ve made a lot of progress on our top issues for that release, there’s still a fair amount of work to do, so we’ll be trying finish off the top issues from 4.5: color contrast audits and resolutions and the continuing removal of title attributes. Most of these questions require some significant design decisions, so we’ll be working closely with the design team to get these accomplished.

    Moving forward into 4.6, we want to start work on making the internal search functions inside WordPress more consistent. We also need to tackle a few thorny problems in the media management UI.

    Looking further forward, we’re going to start developing some libraries to create accessible modal dialogs, accessible tabbed interfaces, and accessible tooltips for eventual inclusion in WordPress core. The goal is for these to be available for theme and plug-in developers to use as well as for use within the core, so that everybody developing in WordPress can easily generate these types of user interfaces easily and accessibly.

    Review the meeting at Slack

     
  • Rian Rietveld 4:00 pm on March 21, 2016 Permalink  

    WordPress goes WCAG 

    With great pride the WordPress Accessibility Team can announce:

    All new or updated code released into WordPress core and bundled themes must conform with the WCAG 2.0 guidelines at level AA.

    On February 15th, 2016, the WordPress Accessibility Coding Standards were approved and added to the Core Handbook as a part of the code standards WordPress developers are expected to meet when contributing to core.

    What does WCAG 2 AA mean?

    WCAG stands for Web Content Accessibility Guidelines, created by the World Wide Web Consortium (W3C). These guidelines ensure that people with disabilities can use the web. The current WCAG standards are version 2 and AA refers to the level of accessibility reached. Level A is the most basic standard, while Level AA is used as a reference for a legal standard in many countries worldwide. Level AAA is most commonly only addressed for special dedicated software.

    What does this mean for WordPress core?

    With every release WordPress gets more accessible for users with disabilities. We’re not there yet — a lot of work still needs to be done on current functionality and interface. We need all the help we can get! The accessibility of the Admin (the administration area of WordPress) is getting better and better. We are researching, testing and fixing accessibility issues in the Admin together with the core developers and our great test team.

    What about themes?

    The bundled themes, like Twenty Sixteen, already make it easy for you to create a web site that complies with WCAG 2 AA, so when you set up a new installation of WordPress, you’re already on the right track out of the box.

    In the WordPress theme repository you can search for themes with the “accessibility-ready” tag. These themes have gone through much the same testing process as the bundled core themes. For every theme with this tag, a member of the WordPress accessibility team has personally checked the theme for keyboard accessibility, color contrast, and a variety of other specific accessibility guidelines. We don’t currently have the depth of reviewers to test every theme update, however, unlike with the core themes, so we can’t guarantee that each theme will continue to meet these standards in future updates.

    What about plugins?

    The accessibility of plugins is the responsibility of each plugin author. Neither the accessibility team nor the plugin review team have the resources to review each of the more than 40,000 plugins currently in the repository. If you are a theme or plugin author, please take a look at our handbook for best practices and documentation.

    What’s next?

    Today, 25% of the web runs on WordPress and our mission is to democratize publishing. That is why we will keep moving forward on the accessibility of WordPress: to give everyone, including people with a disability, an excellent and easy to use tool so they can maintain their own website or application.

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

    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.
     
  • Trisha Salas 6:38 am on February 15, 2016 Permalink
    Tags: documentation, documentation meeting, meeting   

    Calling a Meeting for the Documentation Group 

    The documentation working group will have a one time meeting on February 22nd at 17:30 UTC. We are going to discuss finalizing the structure of the Handbook as well as discuss strategy going forward. If you are interested in getting started with documentation this will be a great time to join in!

     
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