This is a migrated thread and some comments may be shown as answers.

keyboard support

3 Answers 11 Views
MediaPlayer
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 26 Feb 2020, 08:45 PM

I'm looking here -https://docs.telerik.com/devtools/aspnet-ajax/controls/mediaplayer/overview

and don't see any documentation regarding accessibility keyboard support?

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 Mar 2020, 01:03 PM

Hi David,

Thank you for your question!

Basically you can navigate through the media played items via the Tab key. 

To execute a command press Enter.

You can exit the full-screen mode by pressing the Esc key.

Please let me know what other shortcuts are missing and I will log a feature request at the feedback portal for enhancement. 

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
0
david
Top achievements
Rank 1
answered on 02 Mar 2020, 02:33 PM

Hi Rumen, two issues:

1) its not clear how to get focus on the control, we assigned an accesskey="T" but  alt-t doesnt give focus (we have  a radmenu on the same page with an accesskey="M" which works fine)

2) even if you click on the control the tab key doesn't seem to work, nor does the enter

Keyboard navigation is required for 508 accessibility support. Generally the space bar is used to start/stop video and tabs are used to access the playbar features like expand, vol and CC

0
Rumen
Telerik team
answered on 05 Mar 2020, 10:34 AM

Hi David,

Thank you for reporting both problems.

I logged a feedback item for implementing full Keyboard support for the Media Player. Right now it is limited.

What you can do to add a slight improvement which will make the control selectable is to set

AccessKey="t" and TabIndex="1"

and the following CSS class:

           <style>
            .RadMediaPlayer :focus {
                outline: 5px dashed red;
            }
           </style>

Here are the results:

and