Make WordPress Accessible

Category: Working Group Toggle Comment Threads | Keyboard Shortcuts

  • Joseph Karr O'Connor 8:15 pm on August 31, 2015 Permalink
    Tags: accesibility, ,   

    Team Chat Summary August 31, 2015 


    More work is being done on headings in admin. Jeffrey de Wit created some tickets some of which are already patched and committed. Follow the headings discussion in #accessibility on Slack.


    Devised a strategy for building out the Make WordPress Accessible Handbook. Page leaders will help others build out the handbook.

    Twenty Sixteen

    Twenty Sixteen is on Github. Twenty Sixteen is also available in the theme directory. It’s not in trunk yet. According to David Kennedy ” I did a accessibility-ready review before it went on Github and the directory to make sure nothing was way off accessibility-wise. It’s solid. Takashi knows the drill.” We will ask the testers to test it. David Kennedy did an #accessibility-ready audit of Twenty Sixteen.


    We continued a discussion about Select2 as an alternative to the autocomplete/tagging input field types. There are two main accessibility issues: it doesn’t do a good job of providing feedback to screen readers and it requires the ‘enter’ key to begin typing for autocomplete, a non-standard interaction. The testers have tested Select2 and it is not very accessible. Rian Rietveld will collect all the data and report next week.

    WordCamp US

    Several of us are submitting proposals for talks at WordCamp US and depending on funding assistance some of us will be attending. Today is the last day for submitting proposals.

  • Joe Dolson 4:39 pm on August 28, 2015 Permalink  

    Congratulations to Andrea Fercia on gaining guest committer privileges for the WordPress 4.4 release cycle! This is great news for WordPress and accessibility!

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

    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


    No assistive technoloy

    Ruth: No problems at all

    Keyboard only


    • 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



    • 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.


    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


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


    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.


    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)


    • 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 10:25 am on July 28, 2015 Permalink

    Team chat Summary, July 27, 2015 

    A11y tickets

    #29102: we decided on closing this ticket, autofocus on the search form is not a good idea a11y wise.

    #31363, #23432 and #31386 all address the same issue: when to open links in a new window. After some discussion, also with @ceo, who uses a screen reader, we came up with the following:

    • no links should open in a new window (to be consistent throughout the Admin)
    • already made settings might be lost, so before following a link, the user must be warned like: “there are unsaved changes….”
    • an alternative, but complex solution would be that settings are auto saved before leaving a window
    • we should do a search on all links that open in a new window in the Admin

    We will comment with tickets #31363 and #31386, suggesting to close them. And continue to work on this issue further with ticket #23432.

    #21414: a 3 year old ticket by @azaozz about enabling/disabling the keyboard shortcuts in the user profile settings. For assistive technology it can be useful to disable them. We will comment on the ticket to start the conversation again.


    @davidakennedy committed a change in the heading structure in _s.
    It should be easier to create accessible-ready themes now with Underscores.


    The accessibility testers are trying out if they can download an export file in the Admin/ Tools/Export with all kind of assistive technology, results will be in July 30. First results look promising.


    The application form for new a11y testers is temporary offline, because of the huge amount of spam. It’s on Sams to-do list.

    Knowbility OpenAIR project

    @accessibjoe is looking for volunteers to be accessibility mentors for the Knowbility OpenAIR project this year. To get development teams and accessibility mentors together and they help non-profits create websites.

  • Rian Rietveld 12:51 pm on June 16, 2015 Permalink

    Team chat Summary, June 15, 2015 


    • #31650 Missing H1 heading in the admin: Has a working patch: @obenland will review if it can be committed. If this ticket is committed we can continue with the other heading related tickets.
    • #26601: Inappropriate content in headings on admin screens: Has a working patch, we discussed the option of adding a <header> or a <div class=“header”>. @trishasalas will comment on that ticket further.
    • List table tickets: in the last days some major changes to the List Tables were committed and some of them need a refresh. @aferica divided work: #32253 (pagination links) @rianrietveld#32254 (thumbnail link) @rianrietveld#32147 (headings) @joedolson; #32152(comments bubble) @joedolson; #32170(sortable columns) @afercia; #31654 (select all) @afercia.
    • #27705: Keyboard navigation should be constrained to the theme installer overlay. We discussed if this ticket could be closed and decided it was still relevant. @joedolson will comment to this ticket to explain why.
    • #29897:  Some focus styles are broken: This ticket was split in separate tickets that all have been fixed, so this ticket can be closed.
    • #30333: Media filtering behavior should be the same in list and grid mode displays. This solution was reverted back, to not using the auto submit, ticket will be set to closed/wontfix.
    • #30368: Issue with category selection using VoiceOver. @rianrietveld will let the test team look at this, if they can’t reproduce this, the ticket will be closed.
    •  #32600 wp.a11y.speak improvement: @afrecia wrote a patch so testing and feedback is more than welcome.

    Documentation and training

    New work

    • Better Password: @markjaquith created a patch (#32589) for a new password changing UI. We will have to do an a11y review on that.
    • Menu Customizer: the test team reviewed the menu customizer and the issues where reported to the dev team.



  • Rian Rietveld 2:10 pm on June 12, 2015 Permalink
    Tags: ,   

    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>

    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 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">

    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 7:50 pm on May 27, 2015 Permalink

    Team chat Summary, May 25, 2015 

    Main focus of the chat: The List Table tickets

    Tickets that need work

    • #32253: List table: posts navigation links pointing to same page
      And related #32028: List table pagination: text improvements for screen readers
      32028 has a working and tested patch and needs to be committed to continue the work on 32253
    • #32255: List Table: media wp-list-table lacks table header content for column-icon and related. Action: @joedolson will think of a proper heading (<th> text) for the thumbnails
    • #32509: List table: media thumbnail and title links improvements
      We stick to the current patch of #32255 and don’t add the aria-hidden + tabindex=-1> How to deal with the link in the image will be solved in#32509

    Ticket that needs dev feedback

    #32170: List table: sortable column headers accessibility
    Summary for devs and committers:

    • we need to give feedback about the current tables ‘order by’ and ‘asc/desc order’, also in the initial view
    • we also need to make clear which columns are sortable and what will happen when users click on the table header links
    • hence, we need to get additional information about the sortable columns extending what is set in get_sortable_columns()
    • a new method print_table_description() prints a hidden table description, referenced as target for the table aria-describedby attribute

    Of course we’re totally open to discuss a different implementation and better practices, any thoughts more than welcome.

    Ticket that needs translation feedback

    #32399List table: Lists of items should inform users about the “current view” being displayed
    Needs translation feedback, how to properly translate custom post types in this case

    Ticket that needs UI feedback

    #32152: List table: Comments column accessibility improvements

    Tickets to be closed

    • #31965: Add screen-reader-text to list “filter” links
    • #31966: Add screen-reader-text to list “filter” links: Posts and Pages

    We decided on close and won’t fix because these issues will be solved when a relevant heading will be added, see ticket #32399

    Tickets ready for commit

    • #32150: List table: better indication for “no taxonomy”
    • #32254: List Table: avoid adjacent links pointing to the same resource
    • #32147: List table: headings for pagination and views links
    • High priority: #32028 List table pagination: text improvements for screen readers
    • #32509: List table: media thumbnail and title links improvements

    Other work:

    • High priority: #32495 WP Admin bar multi-level menu accessibility
      This has a working patch, ready to commit.
    • #31650: Missing H1 heading in the admin: @joedolson will work on this
    • #32494: Semantic elements for non-link links: Help and Screen Options

    New work:

    Customizer accessibility audit

    Related tickets are:

    • #32493: Customizer accessibility audit (tracking ticket)
    • #31336: Customizer: separate navigation from options UI for better UX by removing accordion behavior


    Related ticket:
    #31696Better select, multi-select, and autocomplete/suggestion inputs in the admin.
    At the moment the a11y team has no capacity to work on an a11y audit of the Select2 library.
    Drupal has done some work on this already: https://www.drupal.org/node/2346973

  • Rian Rietveld 7:05 am on May 5, 2015 Permalink

    Team chat Summary, May 4, 2015 


    We use the Accessibility Priorities for 4.3 as guideline on what to work on.

    List table issues:

    @afercia wrote extra tickets to complete the list of issues for the list table.

    • #32150 List table: better indication for “no taxonomy”
    • #32189 List table: make the sorting indicator arrow visible on focus (new)
    • #32187 List table: Pages displayed in “Excerpt View”
    • #32170 List table: sortable column headers accessibility
    • #32015 List table views: missing current class for “All” when logged in as Author

    Patches we come up with will be given to the wpa11y test team for review with assistive technology. Test result will be added as a reply with the ticket.

    We discussed how to address the “too many links” and “too much noise” issues in the list table.
    In the tables on edit.php and upload.php there are more than one link to edit:

    1. the post title
    2. “Edit” in the row-actions
    3. in upload.php also the attachment is a link to edit

    Our proposal:

    • remove the link “Edit” in the row-actions
    • test if the link on the attachment in upload.php can be hidden for screen readers by aria-hidden

    Heading structure Admin

    This is a complex problem, two tickets are addressing this:

    • #31650: Missing H1 headings in admin
    • #26601: Inappropriate content in headings on admin screens.

    @trishasalas will investigate how best to address this problem and add that to the according tickets, we all will join in the discussion if needed.




  • Joe Dolson 7:46 pm on April 27, 2015 Permalink
    Tags: 4.3-early, , priorities   

    Accessibility Priorities for 4.3 

    For the development of WordPress 4.3, we’ve got a handful of major issues we want to work on to create a smoother and more predictable experience for users with disabilities.

    Reconcile Heading hierarchy throughout admin & clean-up heading contents

    #31650: Missing H1 headings in admin (fixed)
    #26601: Inappropriate content in headings on admin screens.

    Use Semantic elements for non-link links

    Tracking ticket: #26504
    Individual tickets (so far): #31487, #31476
    Related: #26550

    Reconcile search methods

    WordPress incorporates 5 different search interactions in the admin. For usability, accessibility, and maintenance reasons, this should be made more uniform. We’d like to see this reduced to two basic interactions.

    #31818 Uniform Search Form Display/Experience

    List table issues

    We gathered a ton of data on the List table navigation experience during 4.2, and those are being turned into tickets.

    #32028 List table pagination: text improvements for screen readers (fixed)
    #32150 List table: better indication for “no taxonomy” (fixed)
    #32152 List table: Comments column accessibility improvements (fixed)
    #32147 List table: headings for pagination and views links
    #31654 List tables: Select All shouldn’t be a column header (fixed)

    Color contrast issues in admin:

    #31548, #31713, #28599

    Improve editor experience:

    The editor is the single most frequently used part of most WordPress installations – and the experience with this interface should be more consistent.

    #29838: Editor focus order issues.

    Throughout the cycle, we’ll also be picking away at the dozens of other smaller tickets we want to fix, but these are large issues that will have a deep impact on WordPress, and will require a community effort to make progress.

  • Joe Dolson 6:09 pm on April 15, 2015 Permalink
    Tags: ajax, ARIA, javascript   

    Let WordPress Speak: New in WordPress 4.2 

    Written by Andrea Fercia & Joe Dolson

    WordPress 4.2 is shipping with a useful new JavaScript method: wp.a11y.speak(). This is a utility to make it easy for WordPress core to create consistent methods for providing live updates for JavaScript events to users of screen readers – with the side benefit that developers of plug-ins and themes can also make use of it either on the front or back end.


    In modern web development, updating discrete regions of a screen with JavaScript is common. The use of AJAX responses in modern JavaScript-based User Interfaces allows web developers to create beautiful interfaces similar to Desktop applications that don’t require pages to reload or refresh.

    JavaScript can create great usability improvements for most users – but when content is updated dynamically, it has the potential to introduce accessibility issues. This is one of the steps you can take to handle that problem.


    When a portion of a page is updated with JavaScript, the update is usually highlighted with animation and bright colors, and is easy to see. But if you don’t have the ability to see the screen, you don’t know this has happened, unless the updated region is marked as an ARIA-live region.

    If this isn’t marked, there’s no notification for screen readers. But it’s also possible that all the region content will be announced after an update, if the ARIA live region is too large. You want to provide users with just a simple, concise message.


    That’s what wp.a11y.speak() is meant for. It’s a simple tool that creates and appends an ARIA live notifications area to the <body> element where developers can dispatch text messages. Assistive technologies will automatically announce any text change in this area. This ARIA live region has an ARIA role of “status” so it has an implicit aria-live value of polite and an implicit aria-atomic value of true.

    This means assistive technologies will notify users of updates but generally do not interrupt the current task, and updates take low priority. If you’re creating an application with higher priority updates (such as a notification that their current session is about to expire, for example), then you’ll want to create your own method with an aria-live value of assertive.

    How do I use this?

    • enqueue ‘wp-a11y’ from your plugin or theme or set it as a dependency of the script that generates updates
    • on DOM ready, pass a translatable string to wp.a11y.speak(): wp.a11y.speak( mystring );
    add_action( 'wp_enqueue_scripts', 'yourprefix_a11y' );
    function yourprefix_a11y() {
    	wp_enqueue_script( 'wp-a11y' );


    add_action( 'wp_enqueue_scripts', 'yourprefix_ajax' );
    function yourprefix_ajax() {
    	wp_enqueue_script( 'yourprefix.ajax', get_template_directory_uri() . '/js/ajax.js', array( 'wp-a11y' ) );

    For an implementation example, take a look at wp-admin/js/updates.js. An important note: wp.a11y.speak() is only available after DOM ready, so be sure not to call it earlier!

    If you’re intending to use this in your theme, you should take note that your theme should also support the core class .screen-reader-text, which is used in the inserted content. Read more about screen reader text.

    References and further reading

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