The AccessibilityAccessibilityAccessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team shares accessibility expertise across the project to improve the accessibility of WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. and resources.
You can also ask questions during Accessibility Team Office Hours every Wednesday at 14:00 UTC in the accessibility channel in SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Testing HTML5 type attributes in forms with different browsers and AT
How do the type attributes behave in HTML5 forms with assistive technologyAssistive technologyAssistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
https://en.wikipedia.org/wiki/Assistive_technology.
On GithubGitHubGitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ we set up a form with HTML5 type attributes..
All with a proper label for/id relation, without CSSCSSCSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. or supporting JavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/., so we only tested use of the type field in the HTMLHTMLHTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites..
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’, ‘URLURLA specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org’, ‘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 httpHTTPHTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands./httpsHTTPSHTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.; 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.
As we have now enough data on how form fields behaves, we will use this data to improve the settings APIAPIAn API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways..
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.
