Hello,
installed couple of a11y extensions to Chrome, tested some of pages using Kendo widgets and got bunch of ARIA errors reported. Not sure what is the actual problem for all of them, but when read through specs, I found that e.g. aria-valuenow attribute should not be present if empty and furthermore should be used mainly for numeric values, see https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow for details.
On the other hand, is it even necessary to have this attribute for form fields such as password, e-mail or plain textbox?
7 Answers, 1 is accepted
After inspecting some of the widgets with numeric values, for example, the NumericTextBox and the Slider, they have the aria-valuenow attribute as expected.
Also, I checked some of the other input widgets like the AutoComplete, the ComboBox and the MaskedTextBox and they all do not have this attribute.
Could you please confirm which widgets that should not have the attribute currently have it, so I can investigate?
As for adding this attribute to fields like passwords, email etc, this is up to the developer to decide base on the requirements of the application and it is not in control of the Kendo UI team.
Let me know if you need additional information on this matter.
Regards,
Stefan
Telerik by Progress
Rank 1
Hello Stefan and thank you for the prompt answer.
I'm sorry about the aria-valuenow, it was done by updates on our side.
On the other hand, when I run a11y audit available in Chrome DevTools on http://demos.telerik.com/kendo-ui/validator/index, it returned an error, which I believe is related to the non-existing aria-title attribute.
After more research in the official documentation for the supported aria-attributes, I did notice that in the NumericTextBox we do apply an invalid aria-title attribute which is causing errors in the audit available in Chrome DevTools:
https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def
I have logged an issue in our GitHub repository and forwarded it to our developers for fixing:
https://github.com/telerik/kendo-ui-core/issues/2612
Also, I updated your Telerik points for bringing this to our attention.
Regards,
Stefan
Telerik by Progress
Rank 1
Hello, another issue was found by one of our developers.
"(Following) files are using ARIA-DISABLED on elements which have native equivalent. It's
not treated as error during validation, more like warnings which may
cause issues later. (...)
Those files are affected:
- kendo.autocomplete.js
- kendo.button.js
- kendo.numerictextbox.js (also using redundant aria-valuemin/max/now besides of standard HTML5 attributes)
All of them are using this ARIA_DISABLED attribute which - as I mentioned, is unnecessary and may partially confuse readers."
Thank you for reporting this.
I will forward it to our developers' for further investigation.
Still, as this is not causing any errors, it may be left for legacy reasons.
Another view on the subject can be checked here:
https://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
If any of the redundant attributes are causing issues, please let us know and I will gladly assist.
Regards,
Stefan
Telerik by Progress
Rank 1
Hello again,
we've come to another issues when generating markup using back-end HTML helpers in views.
1) https://validator.w3.org/nu/?doc=https%3A%2F%2Fdemos.telerik.com%2Faspnet-mvc%2Fbutton - generated attributes might not be valid for set tag - in this case, "span" tag does not have "disabled" attribute
2) javascript code from kendo library updates button markup with some attributes that are not necessary there, e.g.
<button class="k-primary k-button" id="primaryTextButton" type="button" data-role="button" role="button" aria-disabled="false" tabindex="0">Primary Button</button>
- role and tabindex are not needed as button tag have them by design
I'll go straight to the points:
1) The validator errors are encountered due to manually added disabled attribute as follows:
@(Html.Kendo().Button() .Name("primaryDisabledButton2") .HtmlAttributes( new { disabled = "disabled" , @class = "k-primary" } ) .Tag("span") .Content("Disabled Primary Button"))To avoid such issues you could use Enable(false) method instead of adding attribute or you could specify another tag for generating the button.
2) I agree with you that when button tag is used for generating Kendo Button there is no need to set role and tabindex as the screen readers and the keyboard navigation will recognize the button tag. However, we are setting these attributes to address tags such as span that are not focusable. We will consider conditional adding of role and tabindex based on the tag.
Thank you for your feedback.
Regards,
Joana
Progress Telerik