Make WordPress Accessible

Category: Working Group Toggle Comment Threads | Keyboard Shortcuts

  • Rian Rietveld 9:53 am on February 20, 2017 Permalink |  

    Ideas for the accessibility team at the Community Summit 2017 

    What can the accessibility team do on the  2017 WordPress Community Summit (CS) before WordCamp Europe in Paris?

    Here some ideas, comment below this post if you want to join the CS for the accessibility (a11y) team or if you have suggestions or remarks.

    Note: the deadline for submission is March 3, 2017.
    So we should make final decisions on the a11y team meeting in Slack on Februari 27.

    1. Proposed topics

    The editor

    @joedolson did a writeup on safeguarding the accessibility of the new editor. We have to make plans on how to provide our a11y expertise and resources to the editor team.

    The customizer

    The same counts for the customizer as for the new editor. Although this is a feature already is in core, it continuously needs our attentions and work.


    How to educate developers and designers more effectively. Ideas: better documentation, different approach for the handbook, accessibility talks, reviews, training, courses, a Day of A11y, etc…

    Get more developers and designers involved

    Set up a plan how to involve more coders and designers to work on a11y tickets in WordPress trac. And if people are joining, how to keep them involved for a longer time.

    Pattern library

    We need to review our GitHub repo a11y theme patterns. Is this the place we want to publish code and is the code still valid (some of it is 2 years old). Does the code validate for WordPress code standards, etc..

    The handbook

    After a few years of trying we just don’t seem to find the time and people to set this up. My proposal is to leave the concept of writing stuff ourselves but instead build a great list of resources and put WordPress specific issues in the core handbook.

    2. Representatives

    So far Andrea Fercia, David Kennedy (probably), Morten Rand Hendriksen, Rian Rietveld and Sami Keijonen (if he can find a sponsor) want to be at the CS.
    Anyone else wants to represent the a11y team?

    3. Help with the organisation of the event

    The CS organisers ask for one or two contributors who are willing to help with: posts, communication, travel assistance, finding sponsors, etc.

    As for the a11y team: the travel expenses of Andrea, David and Rian will be covered by their employers. It would be nice if we could find a sponsor for Sami.
    Who wants to volunteer or sponsor this Community Summit??

    Please put your ideas in the comments, we will discuss this on the accessibility team meeting in Slack February 27, 18:00 UTC.

  • Rian Rietveld 12:59 pm on February 13, 2017 Permalink |

    Testing HTML5 type attributes in forms with different browsers and AT 

    How do the type attributes behave in HTML5 forms with assistive technology.
    On Github we set up a form with HTML5 type attributes..
    All with a proper label for/id relation, without CSS or supporting JavaScript, so we only tested use of the type field in the HTML.

    The conclusion is at the end of this post.

    The attributes we tested:

    • type=”text”
    • type=”search”
    • type=”tel”
    • type=”url”
    • type=”email”
    • type=”datetime”
    • type=”date”
    • type=”month”
    • type=”week”
    • type=”time”
    • type=”datetime-local”
    • type=”number”
    • type=”range”
    • type=”color”

    The list is taken from HTML5 forms input types on html5doctor.com.


    • Phillip Chalker: iPhone VoiceOver
    • Shaun Everiss: win7 pro, NVDA version 2016.4, firefox 51.1
    • Tina Tedesco: Windows 7, IE 11 and JAWS 17
    • Gabriela Nino de Rivera: MacOS Sierra 10.12.3, VoiceOver and keyboard only
    • John Sexton: Windows 7 64bit with IE11 & Supernova V14.
    • Priyanka Behera: Windos7 Ultimate, Firefox – 52 NVDA – 2016.4 and keyboard only on Mac Os Sierra Firefox – 51 and Chrome – 56
    • Riddhi Mehta:  Android Devices – Nexus S6, Moto G2
    • Afzal Multani:  Chrome & Firefox & Safari, keyboard only
    • Shah Rishi: Android Chrome Firefox Dell 7 3730 – Tab& Dell 8 3830 – Tab
    • Janki Moradiya: Iphone 6 – iOS 10.2.1, Chrome


    Phillip Chalker iPhone VoiceOver

    Eric Wright; Dragon: this is a presentation he did earlier.

    John Sexton: The video link below shows three passes of the form using Supernova. Each pass starts with the heading “The Form”.

    • The first pass I use only the tab key to go through each field.
    • The second pass I use only the cursor down key going through each field.
    • The final pass I use the tab key and enter values for each field. Note the range field I use the up/down cursor keys.

    Video John Sexton: abc4accessibility.com/html5test/


    First of all, there is a huge difference in support for the types between browsers and devices.


    Works on every tested device / AT


    HTML5 doctor describes the extra functionality for the search type. In the test no one noticed these extras
    The search options are disabled for VoiceOver, but it is announced as “search text field”.
    JAWS also announces the field as search.

    Gabriela: With VoiceOver, was able to reach all controls except for the “Cancel” button of the type search field. VoiceOver does not announce the “Cancel” button, so a blind person will miss it for sure. To actually access this button, I had to go inside the search field using control+opt+shift+down arrow. Once the focus is on the button, using the “enter” key or space bar won’t activate it. However, the user can erase the content of the search field using the combination of control+option+spacebar without having to use the cancel button.

    types “tel”, “url” and “email”

    The fields change the keyboard on mobile and in Safari gives an autofill option for tel an email.

    Validation is properly working in Firefox. It’s showing red focus in the, ‘Telephone’, ‘URL’, ‘Email’ and ‘Number’ fields but it’s not working in Chrome in both the devices (Nexus S6, Moto G2).
    Fields with autocomplete function worked marvellously with VoiceOver.

    Chrome on iPhone6: Telephone input field : validation for digit limit; URL input field : validation for http/https; Email input field : validation for @

    Date and time types

    They are only (mostly) properly supported in Chrome.
    On mobile in Safari date, month, time and daytime-local works, daytime not.
    For both Nexus and Moto, in Chrome Date and time picker is not displaying for ‘Date and Time’ field but datepicker is showing for ‘Local Date and Time’ field.
    Chrome on iPhone: Date and Time input field: open number keypad & valid only number not character.


    On the iPhone the “week” type is displayed very small and is not selectable in Chrome and Safari.
    Works in VoiceOver on desktop, but not on the iPhone
    On Android: Selected week is different in browsers. In Chrome it display like (Week 06,2017 ) and in Firefox it display like (2017-W06). In Firefox, when you click first time in week select menu “01” week is missing there.


    Text field on Safari & VoiceOver.
    Chrome on iPhone: Number input field : text box is very small. So, digit cutoff.


    Works on most devices and AT, although no visible feedback on the chosen value, but with screen readers you get the value read out load.
    In Nexus, Range field is not working properly during zoom out.
    Supernova: The range field was not editable by standard entering of numbers but instead required the cursor keys up/down to change the value.


    Supported in Desktop for Firefox and Chrome, but hard to use.
    Shaun on NVDA: when entering the colour box I was not able to do anything in there till I alt tabbed out then back in, after pressing the button to enter it NVDA just stopped and acted as if it was stuck in the button. After alt tabbing in and out I was able to change the values, different shades and colours.


    Type support varies with browsers and AT and seems better supported on mobile devices then on desktop.

    Safe to use are:

    • text
    • url
    • tel
    • e-mail

    As long as you don’t expect any type of input validation. The fields url, tel and email are nice to have for tablets and mobile, because they conveniently change the keyboard. Like numbers for tel, @ and .com for email. Some testers found it annoying that a telephone number only accepts numbers on mobile.

    Note: No one noticed the extra functionality added for type=search.
    Only Chrome fully supports date and type input on desktop, on mobile the support is somewhat better for most browsers.

    The color picker works on some browsers but is for AT very hard to use and understand.
    The only type that performed well was the range picker, although it did not give visible feedback on the chosen number.

    For Supernova: All fields accept the range filed were treated the same as standard text fields.

    Overall conclusion: don’t rely on HTML type attributes other than “text” for WordPress Admin.

    Follow up

    The data we have now is:

    As we have now enough data on how form fields behaves, we will use this data to improve the settings API.
    I hope our testers will join again to see how we can handle fieldsets, legends and punctuation in form labels, additional information in a field set, links in descriptions and complex constructions.
    This all to create a decent and also flexible API for form fields.

    Thanks all for testing!

  • Rian Rietveld 11:11 am on January 16, 2017 Permalink  

    Testing form functionality with different assistive technology 

    How do different types and implementations of form elements behave in HTML5 forms.


    On wpaccess.org/forms we set up a vanilla HTML5 form with different constructions of input and select fields. Also we took a code example of the settings page as is now in WordPress core, that has a combination of input fields put into a sentence. Especially we are interested in how an implicit and an explicit label with an input field works.

    We asked our test team and volunteers from Twitter to fill out the form elements and report how their assistive technology gives them feedback.

    Conclusion is at the end of this post.

    Explicit label:

    <label for="text-ext">First name</label>
    <input type="text" id="text-ext" name="first">

    Implicit label:

    <label>Middle name 
     <input type="text" name="middle">

    Implicit label with for/id relation:

    <label for="text-int">Last name 
     <input type="text" id="text-int" name="last">


      • Amanda Rush: Windows , FireFox 50.1.0, NVDA 2016:4
      • Mallory van Achterberg: Firefox 50 and IE 11 on Windows 7 (64-bit) with Dragon Pro 13.
      • Léonie Watson: Windows 10 desktop, Firefox 50.1 IE11 and Chrome 55, Jaws 18
      • Eric Wright: Windows laptop running Windows 10, Dragon 15 Professional, Chrome 55
      • Jeff Collis: Jaws 17, IE 11, Windows 7 desktop
      • John Sexton: Windows 7 (64bit) Desktop, Supernova 14 & NVDA 2016.4, IE 11
      • Gabriela Nino de Rivera: Macbook Pro, Safari 10.0.2 , VoiceOver
      • Shaun Everiss: NVDA 2016.4 firefox 50.2 win7 x86 sp1 pro toshiba sat pro c850 laptop.
      • Orlando Metcalf: keyboard testing on Windows 10
      • Priyanka Behera: keyboard testing on Chrome and FireFox
      • Sirisha Gubba: keyboard testing on FireFox and IE


    Supernova didn’t associate the forms grouping text with the form fields.
    NVDA did not read out the group label (legend) “5: I like the following movies”, when tabbing from the previous checkbox “I hate beer”. Where as it does read out the group label (legend) “4: I like the following beers”, when tabbing from the previous radio “Cycling”. However, NVDA does read out all labels when using the cursor keys.
    Also NVDA reads both the group label and first field label in one cursor down or tab action.

    Another difference is when tabbing Supernova reads all radio button items from each group where as NVDA only reads the first radio button from each group.

    Test 1: Input type=text with implicit and explicit label

    First: explicit label and input field linked with for/id relation
    Middle: implicit label
    Last: implicit label linked with for/id relation

    Dragon 13 Pro
    The first set of text boxes: saying “click edit” or “click type text” highlights all three text inputs. Saying “click first” moves focus to the First Name box. Saying “click last” moves focus to the Last Name box. Saying “click middle” moves focus to the Middle Name box.

    Dragon 15 Pro
    Role exposed to all three fields. For the “Middle” field, the word “middle” was the only part of the accessible name exposed to Dragon. For the other three fields, I could set focus by saying “click Name” or “click First” “click Last.” However saying “click name” only offers First Name and Last Name as options to choose from.

    NVDA and VoiceOver
    All input fields work and are pronounced well

    Supernova repeated form field labels on many of the fields, where NVDA doesn’t. For example Supernova reads out “Last name”, twice when tabbing from the previous field “Middle name”. Where Supernova only reads out “Middle name” once after tabbing from the previous field “First name”.

    Radio buttons:

    Favourite type of donut: explicit label and input field linked with for/id relation
    Favourite sport: implicit label

    Dragon 13 Pro
    Radios: saying “click radio” offers all radio buttons. Saying “click”plus the label name of the first 3 radios moves radio selection to that control. However saying “click” plus the label name of the second set (running/walking/cycling) does nothing; Dragon asks you to please say
    that again (meaning it does not recognise the command as valid).

    Dragon 15 Pro
    Could not set focus by speaking the name of the button, but could set focus and select a button by saying “click radio.”

    The other screenreader have no problems


    I like the following beers: explicit label and input field linked with for/id relation
    I like the following movies: implicit label

    Dragon 13 Pro
    Checkboxes: saying “click checkbox” offers all checkboxes. Saying “click” plus the label names of the beer options work as expected. It does not work with the Sound of Music/Zombie Apocalypse/Spongebob options.

    Dragon 15 Pro
    Could not set focus by speaking the name of the checkbox, but could set focus and select a button by saying “click checkbox.”

    Combined input fields in a sentence:

    The labels for the questions that consist of two fields (like “Remove content older than…” and “Break comments into pages with…”” do not read well because of the split over two fields. Perhaps a different field pattern would be more user-friendly?

    Usability remark
    Some elements appear to be conditional based on the selection criteria ( i.e. [ ] Remove content older than [30 ] days ).
    My initial reaction was the days value could not be changed with the checkbox not selected. This is not the case.

    Other screen readers
    Supernova, VoiceOver and NVDA are able to check, edit and select all fields within this section.

    Input field type=number

    Dragon 13 Pro
    None of the inputs type=numbers were focusable/available, except by using the “press tab” command to manually move keyboard focus to them. Once inside an input type=number, Dragon
    did not consider it an edit/dicatable field; the only way to get it to add anything is to preface my number with “Type” like “type 5”. I could also get it to “type T” and some other letters however not all letters worked. It seemed confused by the input type.

    This was both on IE and Firefox. I know Firefox understands input type=number. I can’t remember if IE 11 does, older versions did not and treated them as plain text inputs.

    Dragon 15 Pro
    Input 1: “Close comments for old post”.

    • Could set focus by saying “click remove” or “click checkbox.”
    • Couldn’t find a name or role to call to move focus from checkbox to the number input, but was able to move focus by saying “press tab.” On focus, commands for adjusting increments (press up or down arrow) were apparent.
    • After clearing the field, entering a number was difficult. I couldn’t say, “numeral 12” to enter a number, but I could enter a two digit number by sending keypresses. “Press 1” followed by “press 2.” This was non-intuitive, but quickly adjusting the increment was possible by saying “move up N” or “move down N.”

    According to NVDA feedback the selects for “remove content older than” and “break comments into pages”, NVDA reports these as “edit spin button”, (which I don’t think there’s anything that can be done about without a change to NVDA itself), and I can only arrow up and down through the selections.

    Using home/end to navigate to either the lowest or highest options in the selections does not work, and paging up and down through groups of options does not work either. This is probably not a big deal for most things, although it could probably get out of hand and cause some serious frustration if there are a lot of options to go through and the one you want is near the end. Maybe these should be comboboxes instead?

    Keyboard testing

    Different browsers have different ways of adding a visible focus, some like in IE are hard to see.


    By John Sexton: abc4accessibility.com/form-test Video screen capture of the test using both Supernova and NVDA, each showing the output with just cursor down, tabbing and then filling out the form. The video starts with Supernova using just the cursor down key starting from the heading “The test form” and then just the tab key, again from the same start point then lastly filling out the form via the keyboard only. It then repeats this in the same way for NVDA.


    • All form elements work with keyboard only, although the visibility of focus differed with each browser.
    • Explicit label with label/id relation works always
    • Implicit label works for Supernova, VoiceOver, JAWS and NVDA, but fields can’t be selected by name by Dragon (13 Pro and the latest version 15 Pro)
    • Implicit label with label/id relation works also for Dragon
    • Combining input fields in a sentence can confuse less savvy screen reader users
    • Input type=number does not work for Dragon (13 Pro and the latest version 15 Pro) and may be hard for NVDA.

    Follow up

  • Rian Rietveld 10:08 am on November 22, 2016 Permalink

    Summary meeting WPa11y team, November 21 2016 

    Attendees: @afrecia, @cheffheid, @joedolson, @sami.keijonen, @rianrietveld, @arush, @trishasalas and @antotrifiroconaccento.
    New to the meeting: Bonnie Boden (@bdd) and Terrence Gonsalves (@tegonsalves), welcome!

    Plans for WP 4.8

    Main focus: Settings API,  Uniform search and ticket 26601:

    Fixing accessibility and semantics of the settings API. Plan is to make a parallel version 2 to prevent plugins from breaking. There are a couple issues with the Settings API:

    • It outputs a table with labels and form controls in table cells
    • It doesn’t handle so well checkboxes, group of checkboxes, and radio buttons.
    • No fieldsets or legends.

    Related ticket: #38734 Dogfood the Settings API

    Uniform search, related ticket: #31818 Uniform Search Form Display/Experience

    Finish work in ticket #26601 Inappropriate content in headings on admin screens

    ATAG review

    ATAG means: Authoring Tool Accessibility Guidelines (ATAG) 2.0 and Joe Dolson reviewed how well the WordPress Admin does for those guidelines. He will write a report with the complete results later, here already a quick summary:

    1. Video/image modal does not announce selection to AT in visual editing.
    2. Video/image modal toolbar does not have valid labels (labels are on wrapper divs as aria-label, actually focusable element is empty)
    3. Method to associated video captions programmatically with media library object does not exist
    4. Animated Gif images should not autoplay in visual editor
    5. Alt attributes should be searchable in media library
    6. Should be possible to set custom style settings in editor
    7. Publishing content must not strip out added accessibility information, such as ARIA attributes
    8. Accessibility information should be mentioned in documentation: e.g., instructions on how to add an image should mention the need for alt attributes.
    9. There is no method to structure and publish accessible tables.
    10. There is no method to structure and publish accessible forms.
    11. Meta boxes order cannot be changed from the keyboard; drag and drop only

    And that will mean a lot of new tickets 🙂

    Next meeting will be Monday November 28 at 18:00 UTC

  • Rian Rietveld 1:28 pm on September 13, 2016 Permalink

    a11y update week 37 2016 

    Summary meeting WPa11y team, September 2016


    Work is in progress by @trishasalas, @iamjolly and @rachievee.

    Theme review

    There are now 112 accessibility-ready themes in the repository. 80+ Waiting for a review, still a long waiting list. More help with reviewing is most welcome. @iamjolly will help this week and also Caroline Nymark had been doing reviews.

    @joedolson made a minor tweak to the guidelines last week at @afercia‘s request: adding type=button to the best practice example for creating action buttons in themes.

    <button class=”menu-toggle” type=”button”>Menu</button>

    Twenty Seventeen

    The new theme Twenty Seventeen is available at GitHub:
    @davidakennedy will monitor the work and give the team a ping when it’s ready for an accessibility review.


    There is some progress in the Select2 accessibility issues Andrea posted on GitHub.

    Kevin Brown :

    In the next couple of weeks, we plan to work with others to get Select2 to be accessible under the most basic use case: a flat dropdown that is searchable. Since that appears to be the use case that most screen readers support.


    #34635: WordPress image’s title is not alt
    We discussed in length a solution to prevent nonsense for an alt attribute and to be able to set an empty alt=””. @joemcgill is going to work on a patch.

    Open floor

    @davidakennedy: I’m trying to research for Twenty Seventeen is whether it’s possible/advisable to remove the explicit ARIA roles in Twenty Seventeen. Like, role="banner".
    In the team we have very different views on this. We need to research this further (browser support/AT support/usage etc).

    Bug scrub

    #38023: Menus screen: simplify the Menu Settings controls.
    The form layout for the menu settings is done with <dl>.
    It would be great to use proper form elements instead (fieldset, legend). We have similar constructions on other pages, maybe find a consistent way to do them. Needs research, set to 4.7

    #16206: Comment text not marked as required
    and related
    #37331: New site form has non-required fields that have to be filled in.
    We’ll have a go at fixing these two for 4.7

    #16413: Settings page needs HTML refactoring and UI improvements
    This could get some traction if the Fields API gets into core; that would be a starting point for redoing these types of pages, so we wait for that (not in 4.7 yet, according to @sc0ttkclark).

    #18801: Accessibility Enhancements to Settings AP
    It’s basically the same issue as #16413.

    #21414: Use the “Keyboard Shortcuts” checkbox in the user profile to turn on/off all custom shortcuts
    Seems it’s in good hands at the moment.

    #21583: Improve discoverability and visual design of Screen Options and Help Panels
    It would be nice to get this into core, but it’s a lot of work and will take some releases.

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

    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.


    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

    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.

      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.


    • 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.
compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc
Skip to toolbar