WordPress.org

Make WordPress Accessible

Updates from February, 2017 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.

    Education

    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.

     
  • Joe Dolson 9:02 am on February 17, 2017 Permalink
    Tags: core-editor, gutenberg   

    Revising the WordPress Editor: Gutenberg and Accessibility 

    One of the three top priorities for development in the next releases of WordPress is to enhance and modernize the editor. This is an important project to give users the ability to create rich and diverse content without requiring extensive knowledge of code. From an accessibility perspective, this is both an incredible opportunity to build a powerful and flexible experience for all users and an enormous risk that we could end up reducing the effectiveness of the editor for users with disabilities, or require them to use a 2nd-class editor without these enhanced editing capabilities.

    We in the WordPress accessibility community embrace the challenge of creating a great new experience, and want to assure the community that we are going to do everything we can to make sure that any new editor experience is as accessible as we can possibly make it.

    The most fundamental part of democratizing publishing is the ability to write and publish content. Without that feature, WordPress is not achieving its core mission. There are always challenges in creating content accessibly, but it is not an unachievable goal.

    It’s still early in the process, and there are many ideas floating around about how the new editing experience should be structured and how its interface should behave. The concerns for accessibility are universal, however. The new editor should consider accessibility to be a priority both in how content is created and in the nature of the content that is created.

    While the accessibility team wants the final implementation to be exceptional and accessible, we don’t want to limit the possibilities by imposing restrictions before they are necessary. However, there are some concepts that should be kept in mind early on that will significantly impact accessibility during development.

    Fundamentals of Accessibility to Consider

    1. Some common user interface interactions are extremely difficult to use non-visually. Drag and drop is an interaction that poses significant difficulties, since it is very difficult to disclose in audio how the dragged object and the potential targets are interacting. This doesn’t mean that the editor can’t use these interactions, but if they are used, there will need to be an alternative method to do the same task which is accessible.
    2. Fundamentally, all outputted code is organized in a linear manner. The experience of the content for keyboard users and for screen reader users will also always be linear. Ensuring that the content authoring process encourages a linear path will make the process easier for all users.
    3. Whenever possible, the user interface should encourage people to create semantically valid code; encouraging the use of correct headings (e.g., being content aware to know which headings are valid for a new content block); encouraging the addition of alt attributes, or defining table headings appropriately for tabular data.

    Updating the editor is a great opportunity to explore some of the requirements articulated in the Authoring Tool Accessibility Guidelines (ATAG). These requirements discuss how an editor should allow users to navigate the structure of their content and how the editor should encourage the creation of accessible content. A richer editor experience, with integrated prompts and formatting tools, has the potential to suggest best practices throughout the content authoring process. This would be an important growth step for WordPress.

    It should be self-evident that the new editor experience needs to meet the standards established for accessibility in WordPress core. The editor is the central experience of WordPress content creation, so planning ways to consider accessibility at every stage through the process is crucial to the success of the Editor project.

    Help develop the new editor

    If you’re interested in helping with the new Editor project, follow the development conversations in #core-editor and share your thoughts and ideas. You can also follow the GitHub project for the editor, where you can file tickets or follow specific issues like keyboard shortcuts, drag and drop, and the mobile interface. Weekly chats are in #core-editor, Wednesdays at 18:00 UTC.

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

    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.

    Testers:

    • 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

    Video’s

    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/

    Results

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

    type=”text”

    Works on every tested device / AT

    type=”search”

    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.

    type=”week”

    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.

    type=”number”

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

    type=”range”

    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.

    type=”color”

    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.

    Conclusion

    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!

     
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