Hi,
I'm working on a legacy ASP.NET WebForms project and I am to add accessibility to the project.
My predecessor already tried to add accessibility by manually assigning an access key to the AccessKey property of some of the PanelBar's RadPanelItemCollection elements (see attachment #1).
15 Answers, 1 is accepted
(*aarrggh* ... I accidentally hit [Post] when attaching the images and don't seem to be able to edit my question now.)
[...] The issue with his approach is that no outline appears when hitting one of the access keys. But this is a requirement for conforming to WAI-ARIA.
Debugging the application it looks like the CSS outline property is disabled by intention (see attachment #3).
So I added a
.radPanelBar .rpLink:focus { outline: thin dotted invert; }
rule to the application's CSS file.
However, I feel this is becoming rather a hack than a clean solution.
So I'd like to ask if there is a suggested and supported approach on how to add access keys to a PanelBar control's collection of RadPanelItems.
We are feeding our PanelBar by using the SiteMapDataSource.
I have tested at my side with the latest version of the controls and WAI-ARIA works just as it should (video), using the OnDataBound server event as you do:
protected
void
Page_Load(
object
sender, EventArgs e)
{
Form.Attributes.Add(
"role"
,
"application"
);
}
protected
void
RadPanelBar2_DataBound(
object
sender, EventArgs e)
{
foreach
(RadPanelItem item
in
RadPanelBar2.Items)
{
if
(item.Text ==
"Andrew"
)
{
item.Items[0].AccessKey =
"N"
;
item.Items[1].AccessKey =
"B"
;
item.Items[2].AccessKey =
"V"
;
}
}
}
Would you please elaborate what else should be done to replicate the issue?
Regards,
Anton
Telerik by Progress
Sure,
please have a look at this screencast. It depics that the RadPanelBar is missing an item outline when hitting the appropriate access key.
Telerik deliberately hid the outline (see screencast). But that's not correct according to WAI-ARIA and W3C. Their statement:
Keyboard users, in particular people with disabilities who may not be able to interact with the page in any other fashion, depend on the outline being visible on elements in the :focus state, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.
Recently we have updated the Keyboard support focusing specially on supporting WAI-ARIA. After the change we strongly suggest the use of the new properties and to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled. The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser. And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.
Regards,
Anton
Telerik by Progress
[quote]Anton said:
We strongly suggest the use of the new properties and to assume the PannelBar as a single object, not as different items.Thus we advise the PanelBar to be focused as it is shown in this demo and then use the Keyboard Support to navigate among the items. Using that approach WAI-ARIA requirements are fulfilled.[/quote]
Did you use a screen reader to verify that WAI-ARIA is truely met by your changes? Because according to the (quite popular) screen reader JAWS it isn't, as this screencast shows.
[quote]Anton said:
The usage of "Access Keys" causes different behavior among the browsers and as a result of that instability we decided to use our own selectors (KeyboardNaviagationSettings) which behave the same way no matter the browser.[/quote]
That was my first question above all about: A suggested and supported approach.
[quote]Anton said:
And last, but not least, I would ask you avoiding threads duplication for an issue, which allows us to provide you with better support.[/quote]
Which thread do you see duplicated? This thread is about keyboard navigation (and, supposedly, a CSS issue), my other thread is about assigning WAI-ARIA landmark roles to Telerik controls.
Thank you for getting back to us and elaborating the questions.
In such case we recommend testing the new WAI-ARIA support demo. Here is the video of my test with JAWS where the items are correctly outlined(the video is with no sound yet it was heart correctly).
As for you last issue - yes indeed the issues were different please excuse us for this misunderstanding.
Please let me now if the issue is still somehow different so we could investigate it again.
Regards,
Plamen
Telerik by Progress
Hi Plamen,
this is quite an interesting observation you made.
So it looks like the outline appears on your machine but it doesn't appear on mine.
If you agree, I'd like to further investigate on this issue to find the reason for the outline not appearing on my machine to make sure everything is working as expected when we are applying for our corporation's Accessibility certificate for our web application.
I noticed that you are using Internet Explorer, just as I do. Would you mind telling me which version of Internet Explorer, Windows and JAWS you are using? I am using IE11 on Windows 10/64 with JAWS 17.0.2619. (I can see from the video that you are using an older JAWS version, i.e. 17.0.1377.)
Thanks for helping me on this!
Cheers,
Axel
I was using IE11 (exact version 11.0.9600.18427) Windows 8.1. The version of the Jaws is same as your as it can be seen on the video.
Regards,
Plamen
Telerik by Progress
Hello, Plamen,
I have now continued digging into the WAI-ARIA features of RadPanelBar and found a number of issues with RadPanelBar.
Here is my observation:
- In the sample video that you provided no access keys have been used for selecting an item. In fact, none of the items in the Telerik sample page have access keys assigned. If you apply access keys to items in RadPanelBar, you will notice that these don't give visual feedback. This isn't in conformance to WAI-ARIA specification.
- The suggested KeyboardNavigationSettings property isn't waterproof, in contrast to Anton's claim.
- Using the TAB key on the keyboard to tab from a hyperlink or input element into the RadPanelBar doesn't give visual feedback. This isn't in conformance to WAI-ARIA specification.
I created a new video demonstrating these issues. Below please find the ASP.NET code I used to create the sample. To reproduce the issues, create a ASP.NET WebForms project and copy below code into a WebForms web page. Then run the project using a German edition of Internet Explorer 11 (because of the [ALT]+[A] access key which is a IE menu access key, too, on the German edition of IE 11) and hit the keys depicted in the video.
Here are the suggested remedies:
- RadPanelBar should give visual feedback (CSS: outline property) when using access keys for each of the items having access keys assigned.
- KeyboardNavigationSettings is redundant and confusing users who are used to standard web browser access key navigation.
- When a user is using the TAB key to give focus to any item in a RadPanelBar, RadPanelBar should give visual feedback (CSS: outline property).
Here's the ASPX code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="MyProject.Web.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
p > a[href] { display: block; }
p > a[href]:focus { background-color: #eee; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"/>
<p><a href="#" accesskey="o">Ab<u>o</u>ve</a></p>
<div>
<telerik:RadPanelBar runat="server" ID="strip" EnableAriaSupport="true" AccessKey="r">
<Items>
<telerik:RadPanelItem Expanded="true" Text="Parent" AccessKey="p">
<Items>
<telerik:RadPanelItem AccessKey="1" Text="Number 1" NavigateUrl="#"/>
<telerik:RadPanelItem AccessKey="2" Text="Number 2" NavigateUrl="#" />
<telerik:RadPanelItem AccessKey="3" Text="Number 3" NavigateUrl="#" />
</Items>
</telerik:RadPanelItem>
</Items>
<KeyboardNavigationSettings CommandKey="Alt" FocusKey="A"/>
</telerik:RadPanelBar>
</div>
<p><a href="#" accesskey="b"><u>B</u>elow</a></p>
</form>
</body>
</html>
Thank you for elaborating the issue.
10 I have successfully replicated the issue and here is the custom code that I added to make the items focusable in IE:
<script>
var
$ = $telerik.$;
var
$T = Telerik.Web.UI;
$T.RadPanelBar.prototype._onLinkFocus=
function
(e)
{
if
(Telerik.Web.Browser.ie) {
this
._focusedItem =
this
._extractItemFromDomElement(e.target);
this
.get_element().focus();
}
e.preventDefault();
return
false
;
}
</script>
2) KeyBoardnavigation settings are designed to skip the crossbrowser navigation differences - yet they can't override the default browser shortcuts. If you don't want to use them you can just set accesskey and tabindex to the control so it become focusable.
3) In the current implementation of the keyboard support pressing tab is moving the focus to the next focusable element of the page and it is not navigating through the items of the element. You can navigate through the items with the arrow keys as it is described in this specification.
Please let me know if you have further questions.
Regards,
Plamen
Telerik by Progress
Similar issues occur when using Firefox (as this video demonstrates).
I strongly feel that the RadPanelBar keyboard navigation scheme needs a revision.
Do you want me to create a support case for having the Telerik development team start an investigation on this?
Yes we will create a story for updating the keyboard issues but first I would like to discuss the exact issues. I have tested the scenario same scenario with the code that I recommended in y previous reply and it worked correctly at my side in Firefox too. Here is my full code and here is my video:
<
p
><
a
href
=
"#"
accesskey
=
"O"
tabindex
=
"1"
>Ab<
u
>o</
u
>ve</
a
></
p
>
<
div
>
<
telerik:RadPanelBar
runat
=
"server"
ID
=
"strip"
EnableAriaSupport
=
"true"
TabIndex
=
"1"
>
<
Items
>
<
telerik:RadPanelItem
Expanded
=
"true"
Text
=
"Parent"
AccessKey
=
"p"
>
<
Items
>
<
telerik:RadPanelItem
AccessKey
=
"1"
Text
=
"Number 1"
/>
<
telerik:RadPanelItem
AccessKey
=
"2"
Text
=
"Number 2"
/>
<
telerik:RadPanelItem
AccessKey
=
"3"
Text
=
"Number 3"
/>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
<
KeyboardNavigationSettings
CommandKey
=
"Alt"
FocusKey
=
"A"
/>
</
telerik:RadPanelBar
>
</
div
>
<
p
><
a
href
=
"#"
accesskey
=
"b"
tabindex
=
"1"
><
u
>B</
u
>elow</
a
></
p
>
<
script
>
var $ = $telerik.$;
var $T = Telerik.Web.UI;
$T.RadPanelBar.prototype._onLinkFocus= function(e)
{
if (Telerik.Web.Browser.ie) {
this._focusedItem = this._extractItemFromDomElement(e.target);
this.get_element().focus();
}
e.preventDefault();
return false;
}
</
script
>
Please let me know what is still not working correctly in this case
Regards,
Plamen
Telerik by Progress
Hello, Plamen,
I have applied your script but to no avail.
So I now have created a support ticket ("WAI-ARIA: poor Keyboard support of PanelBar control") where we can privately further discuss the issues I have.
Cheers,
Axel
I have logged the issue about the accesskeys and you can follow it here.
Regards,
Plamen
Telerik by Progress