WordPress.org

Make WordPress Accessible

Recent Updates Page 2 Toggle Comment Threads | Keyboard Shortcuts

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

     
  • Rian Rietveld 4:20 pm on February 9, 2016 Permalink
    Tags: ,   

    Summary Team Chat for Februari 8, 2016 

    Core accessibility coding standards

    After discussion with @jorbin some last changes where made on the Accessibility Coding Standards. @jorbin will bring it up at the next Core meeting to make sure there are no objections there.

    Documentation

    @hearvox finished the Quick Start Guide in our Handbook. @rachievee is working to add other pages to expand on topics from the Quick guide that need longer explanations.
    @trishasalas organizes a one time meeting on Februari the 22nd 17:30 UTC to discuss finalizing (for now) the structure for the handbook. In the meantime Trisha is going to begin writing the Plugin section of the Handbook.

    Accessibility Test Team

    Nimbus Hosting is so generous to sponsor the #wpa11y team with a VPS server. Here we can install a production, nightly and trunk version of WordPress and also have SVN and SSH access.
    We will set the server up next week, then we’re up and running again and resume sending tests to our team.

    Accessibility-ready themes

    Joe started to work on a fork of the theme unit test data, focused on accessibility testing – a smaller set of data, eliminating false positives in the data, etc. He will let us know when it’s usable.

    The post with the requirements for the accessibility-ready tag has been improved. There is now more information on how to test a theme to help theme authors better.

    Tickets

    @afercia: Investigation about color contrast continues.

    #26601: Inappropriate content in headings on admin screens.
    @trishasalas will write an new, refresed patch, keeping the add new link visually on the same place but placing it in the HTML outside the h1 heading

    From Februari 16 on we will have an extra meeting to work on tickets. The group has grown so much last year that we need more time to discuss and work on core tickets then we have now in the regular meeting. This ticket meetings will be every Tuesday on 18:30 UTC.

    And from everybody in the a11y team:
    We wish @accessiblejoe a good and quick recovery!

     
  • hearvox 2:28 pm on February 6, 2016 Permalink
    Tags: ,   

    Accessibility Quick Start Guide in draft: needs vetting 

    The WordPress Accessibility Handbook now has a draft of a Quick Start Guide. The doc needs edits, comments, and vetting.

    We intend this as a resource for developers to quickly grab WordPress-oriented code examples and a11y guidelines. Let’s make sure everything is accurate and clearly explained, and that nothing a11y-critical for WP dev is missing. (This process might also help us identify which topics need further explanations in other Handbook sections.)

    Please review the draft and leave your comments on this post.

     
    • RachieVee 2:29 pm on February 8, 2016 Permalink | Log in to Reply

      I love that we have this now! And I really like the structure to cover all the basics. I do find it a bit long or hard to read it areas for skimmers. I imagined the quick start to be a “quick” checklist of tips whereas the rest of the handbook can go into depth for those that want to go down that route. I like how the theme handbook avoids large blocks of code: https://developer.wordpress.org/themes/functionality/accessibility/

      And I like how the a11y project offers quick tips and then the “how to’s” go more into depth.

      http://a11yproject.com/

      I feel like we can keep the bullet points and then use those code examples in new posts within the handbook that get linked to from the quick start. This way the quick start can still be treated as a checklist of sorts, don’t do this, make sure you do this, and when the reader wants to know the how’s and why’s if it’s not a quick explanation, there will be another post to provide that.

      I think my favorite part is the screenshots of how a screen reader shows links that aren’t worded accessibly. I’d love to see more examples of how screen readers behave or what it’s like to try and access something that wasn’t made very accessible like sites without :focus or sites that aren’t using semantics properly. Trisha and I were discussing empathy recently, and I think it’s a great way to educate people. A lot of people just assume accessibility is hard to do and the people it’s built for are some rare group and small percentage in the web’s audience. I think the more we can remind others how close this hits to home and how we can make a difference one small change at a time, the more successful we’ll be in convincing people to learn more about accessibility. 🙂

      Ideally it’d be cool if each section in this quick start would link to one or more in-depth articles that cover those sections even deeper. Nice work so far!

  • Joe Dolson 9:38 pm on January 24, 2016 Permalink
    Tags: , , standards   

    Accessibility code standards for WordPress in draft 

    The accessibility code standards for WordPress have been added to the core handbook and are open for feedback over the next two week. Also see the Core blog announcement and the draft standards themselves!

     
  • Joe Dolson 9:22 pm on January 21, 2016 Permalink
    Tags: ,   

    Updates to WordPress theme accessibility guidelines 

    The accessibility-ready guidelines for WordPress themes were updated today. There are no explicit changes to the requirements, but the order of the guidelines has been changed so that it corresponds more effectively to how it makes sense to run tests on the guidelines.

    Additionally, I’ve added some information on how to run tests for each guideline into the guidelines, so that theme developers are more easily able to find information on how to self-test when they’re creating an accessibility-ready theme.

    Review the guidelines.

     
  • Rian Rietveld 10:23 am on January 19, 2016 Permalink
    Tags: , ,   

    Summary Team Chat for January 18, 2016 

    Documentation

    @trishasalas and @rachievee have been working to organize the docs and create some new drafts in the handbook. Work in progress.

    Tickets

    #34780: Updates screen: Plugin and Theme tables improvements
    We discussed removing the scope from the th and td first and then think of a way to set up the layout, not in a table but in another, more semantic way.

    #34625: wp-login.php site title link points to wordpress.org
    We need to research if themes and plugins would break if the title attribute on the logo is removed. Maybe an option is to have no title output by default for the filter. @arush volunteered to own the ticket.

    #35313: Remove title attributes: Posts, Pages, and CPTs screens
    What to do with icons with a title attribute? For a sighted desktop user, the title attribute is the only indication what the icon means. There are many places where the link is just shown as an icon, and here the totle attribute was useful. We discussed how to solve this: we need to develop a core method to handle tooltips effectively. Andrea will open a ticket for this.

    Color contrast: Some browsers do not support the styling of checkboxes and radio buttons. This means that in some browsers give that borders a poor contrast by default.

    @afercia started to open tickets about the color contrast like #35497: List tables: Post format links improvements
    @rianrietveld will make a list of all the color issues in the Admin, we can use as a reference to open new tickets.

    Accessibility guidelines for core

    @joedolson had some comments on the core a11y guidelines; just a couple, minor changes for clarity. Basically well received by the core team. Joe is waiting for a few more comments from members of the core team that did not have to chance to look at them yet.

     
  • Trisha Salas 4:09 pm on January 11, 2016 Permalink
    Tags: , , f   

    Accessibility Handbook Update 

    Today I started to add subsections to the Accessibility Handbooks Contributor Spreadsheet and while I was looking over other Handbooks (Docs in particular) I decided it might be best to streamline content even further to separate Informational content about the team, mission, etc from the actual Resource for Developers.  Documentation has a Docs Handbook for their section as well as links to other Handbooks for Developers.  I’d like to see Accessibility follow that format and have reached out to @sewmyheadon and @topher1kenobe to get some insight into how they approached the process.

    Join us in the meeting today, January 11 @ 18:00 UTC or comment here if you have any thoughts or additional ideas to help us move this project forward!

    Thanks to everyone involved for all the help so far!

     
    • hearvox 4:38 pm on January 11, 2016 Permalink | Log in to Reply

      Trisha, great idea to stick with the formats the other teams have adopted as much as we can. One way would be to compose an intro section for the main a11y page — e.g., the big blue box at the top of: https://make.wordpress.org/docs/
      https://make.wordpress.org/polyglots/

    • hearvox 4:58 pm on January 11, 2016 Permalink | Log in to Reply

      Another issue is there’s two types of Handbooks:
      1. Many of the Make teams have a handbook that describe the team and how to contribute (eg, “About the Docs Team”, “What We Do…”).
      2. Then there’s the how-to handbooks: Theme, Plugin, and Code Ref, which are written for devs (and are NOT about the team): https://developer.wordpress.org/

      Currently, the A11y Handbook is serving both functions: It’s for contributors and about the team, and it has sections directed to devs (not about the team or contributing).

      That probably isn’t a problem for now, while we’re still writing the handbook, and while the Codex is still the main repository of WP knowledge (and still the highest in most search results).

      But it’s something we should consider for later: Once support resources are housed mainly at developer.wordpress.org, that’s where devs will look for a11y info. Maybe we end up splitting the current Handbook into two, one for-devs and one mainly for-team/contributors.

      Not exactly but kinda like there’s a handbook for the Theme Review Team:
      https://make.wordpress.org/themes/

      And the Theme Handbook
      https://developer.wordpress.org/themes/

      BTW, I’m reading the entire Plugin handbook right now. It is really well-written. I hope ours can be this clear:
      https://developer.wordpress.org/plugins/

    • RachieVee 7:13 pm on January 11, 2016 Permalink | Log in to Reply

      I like the blue box idea on the main make.wp a11y landing as well to serve as an intro and a quick way to get a summary of meeting times.

      I like the “tools” section on the polygot handbook. It might be useful to have a section of tools on the handbook for heading/contrast/general a11y checkers.

      If we’re keeping a11y in one handbook for content writers/designers/developers – then I think what we have now separating by audience is great. I also like that I can get all my information from one handbook versus if there were separate handbooks per audience because often, the lines blur and people using WP have several disciplines. It’s probably easier to keep our content consistent as well if we can cross reference between the audience posts on one handbook.

      What I’d like to see after the “Our Mission” or team intro area, is a section that is a general collection of posts on a11y. Mostly for the what’s, why’s and primers. What’s a heading, what’s alt text, why do we make things accessible, what kinds of disabilities/illnesses do accessible sites cater to etc? So that way in the “audience” sections, there’s no repetition of the “basics”. Each post can go right into the topic without feeling the need to introduce the reader to the concept every time, and instead link back to the primer post instead.

      I agree that contributing can be a separate handbook.

      Looking forward to seeing where this goes. 🙂

  • Trisha Salas 6:47 am on January 8, 2016 Permalink
    Tags: ,   

    Summary Team Chat for January 4, 2016 

    Tickets

    #33952: get_search_form() accessibility improvements

    The main issue when using `get_search_form()` is redundancy.  A lot of  “search, search for… search… search button”

    Given that `get_search_form()` is used in both the admin & the front end as well as by themes it was determined that we will look at a uniform search for the 4.6 release.  In the meantime, we will remove the `title` attribute for a quick ‘win’.

    #35187: Remove title attributes: the terms List Table

    The current structure is semantically inaccurate but fixing it will require some design input to rework the list table layout. We have decided to stick with the original plan to remove the title attributes and find solutions for other issues at a later time.

    Accessibility standards for core

    @joedolson posted an updated link to the Accessibility Standards for Core document from last week. https://docs.google.com/document/d/1iySvDJ4duHYt6YlnnjnBNbU5LKAn1uRBMH8FKAfmswE/edit He has asked anyone who is interested to review and make comments.  He will eventually communicate with the core team to get this information into the Core Handbook.

    Documentation

    During the next week I will begin adding sub categories to the sections in this spreadsheet. https://docs.google.com/spreadsheets/d/1tOYzFn9vc7Ff4yGBmDajelrl7XMDUz4PR5H2lB4exI4/edit.

    The hope is to get more of a structure in place to make it easier to contribute.  So that, rather than needing to figure out where content will go you can pick a subcategory page and focus on the content for that page.
    We also discussed consistency as well as what the need to be sure that any of the content we link to from the handbook is vetted by the Accessibility Team as a whole.

    Next meeting

    Next meeting will be in January 11, 2016 at 18:00 UTC

     
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