How do I add accessibility for AJAX Control Toolkit

Brian Tan 40

I need to add accessibility to some of the web form controls. I am using axe devtools in order to test for accessibility. It comes up with this error and how to resolve the issue for a combobox User's image

This is the current code I have and I'm not sure how to make it accessible. I have this doc to show how to make ajaxToolkit:ComboBox accessible but AJAX toolkit itself doesn't hold some of the properties listed here such as arial-label.

<ajaxToolkit:ComboBox Title="Sponsor" ID="ComboBox" runat="server" AutoPostBack="False" DropDownStyle="DropDownList" ClientIDMode="Static" AutoCompleteMode="suggest" CaseSensitive="False">
   <asp:ListItem Selected="true" Text="" Value="0"></asp:ListItem>
</ajaxToolkit:ComboBox>

Here is my current code so far.

SurferOnWww 2,661 Reputation points

2024-03-06T00:53:33.87+00:00

Can you describe step-by-step procedures to test the accessibility without using a special tools?
Brian Tan 40 Reputation points

2024-03-07T16:11:36.9233333+00:00

@SurferOnWww Yes, you can test accessibility with google's chrome developer kit and it is under the 'issues' tab.
Brian Tan 40 Reputation points

2024-03-07T16:12:26.9+00:00

@SurferOnWww you can use google's chrome developer's toolkit and it would be under the 'issues' tab.

1 answer

Lan Huang-MSFT 29,246 Reputation points Microsoft Vendor

2024-03-06T06:38:32.8766667+00:00
Hi @Brian Tan,

You can add some attributes through the parent element (<div>,<span>).

Below is my test for your reference.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm23.aspx.cs" Inherits="WebFormsDemo.WebForm23" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="aa"> <head runat="server"> <title>Test</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div aria-label="search" role="combobox" aria-expanded="true" aria-controls="ComboBox"> <span aria-hidden="true"> <ajaxToolkit:ComboBox Title="Sponsor" ID="ComboBox" runat="server" AutoPostBack="False" DropDownStyle="DropDownList" ClientIDMode="Static" AutoCompleteMode="suggest" CaseSensitive="False" TabIndex="-1"> <asp:ListItem Selected="true" Text="" Value="0"></asp:ListItem> </ajaxToolkit:ComboBox> </span> </div> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" /> </div> </form> </body> </html>

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
Brian Tan 40 Reputation points

2024-03-07T17:02:09.99+00:00

Hi,

Thanks for replying. I implemented an AJAX combobox on a clean project with the recommended code sample and I get these two new accessibility issues (the ones that originally issues showed up are now gone). Am I missing something here?

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <div aria-label="search" role="combobox" aria-expanded="true" aria-controls="ComboBox"> <span aria-hidden="true"> <ajaxToolkit:ComboBox ID="ComboBox" runat="server" TabIndex="-1"> </ajaxToolkit:ComboBox> </span> </div> </asp:Content>

Brian Tan 40 Reputation points

2024-03-07T19:23:40.94+00:00

I also copied your code directly into my project and I get this issue

Lan Huang-MSFT 29,246 Reputation points Microsoft Vendor

2024-03-08T06:43:49.1166667+00:00

Hi @Brian Tan,

For this problem, you need to add ClientIDMode="Static" in ajaxToolkit:ComboBox.

Unfortunately I haven't reproduced the issue. I even changed multiple browsers to use the same code for testing.

Do you have any other codes? It would be best if you could provide them all

Maybe you can provide more information, such as VS version, AJAX Control Toolkit version, development environment, etc.

Brian Tan 40 Reputation points

2024-03-08T15:53:42.81+00:00

Hi @Lan Huang-MSFT ,

My AJAX Control Toolkit version was 15 and I recently upgraded to the latest version and was able to get the problem resolved. Thank you!

Lan Huang-MSFT 29,246 Reputation points Microsoft Vendor

2024-03-11T01:19:13.6833333+00:00

Hi @Brian Tan,

Glad your issue has been resolved.

Are there any updates on this issue? I am glad to help if you have any other questions.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How do I add accessibility for AJAX Control Toolkit

1 answer

Your answer