New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Navigation

Keyboard navigation provides all web and app users with a fast keyboard-only navigation capability and is also part of the web accessibility features - it enables users with disabilities to fully control their website or app access through the keyboard.

By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page, for example, left to right and top to bottom, header first followed by the main and then the page navigation.

The keyboard navigation of the WebForms AIPrompt is enabled by default as demonstrated in this demo.

  • Enter or Space When the toolbar is focused - selects the focused view. When a panel item is focused–expands or collapses the item. When a button is focused – triggers the click event.
  • Tab Navigates to the next structure element of the AIPrompt–either the header, the content, or the footer element.
  • Shift + Tab Navigates to the previous structure element of the AIPrompt – either the header, the content, or the footer element.
  • Right/Left Arrows Navigates to the next/previous view button when the toolbar is focused.
  • Up/Down Arrows Navigates to the next/previous item when a panel is focused.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
  • style.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="AIPrompt_Overview_DefaultVB"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium flex-center">
        <telerik:RadAIPrompt ID="RadAIPrompt1" runat="server" Width="450px">
            <Views>
                <telerik:AIPromptView Type="Prompt" />
                <telerik:AIPromptView Type="Output" />
                <telerik:AIPromptView Type="Commands">
                </telerik:AIPromptView>
            </Views>
            <PromptCommands>
                <telerik:ViewPromptCommand ID="Command1" Text="Simplify" Icon="min-width" />
                <telerik:ViewPromptCommand ID="Command2" Text="Extend" Icon="arrows-left-right" />
            </PromptCommands>
            <ClientEvents OnPromptRequest="onPromptRequest" />
        </telerik:RadAIPrompt>

    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance