How to add accessible name ( aria-label ) in @DropDownListFor in razor?

Question

How to add accessible name ( aria-label ) in @DropDownListFor in razor?

OneWorld 0

I have filter dropdown and trying to add comply with 508 compliance. I used aria_label, aria-label and aria_labelledby but unable to see accessible name for the DropDownListFor. I see No ARIA attributes under ARIA Attributes on Chrome Browse tool. How can I add accessible name for DropDownListFor (see snippet below) ?

<div class="col-md-3">
@Html.LabelFor(model => model.AccountID) <span style="color: red;">*</span>
@Html.DropDownListFor(m => m.AccountID, this.ViewBag.AccountList SelectList, new { id = "AccountList", multiple = "true" , @class = "selectSearchAccount show-tick form-control", aria_Label: "Select Account"})

AgaveJoe 30,126

Example

@Html.DropDownList("Design_ID", null, "Select Designation", htmlAttributes: new { @class = "form-control", @id = "select2-1", aria_label = "My aria label" })

OneWorld 0

I tried aria_label = "Select Account" but still "No ARIA attributes" under ARIA Attributes.

<div class="col-md-3">
@Html.LabelFor(model => model.AccountID) <span style="color: red;">*</span>

@Html.DropDownListFor(m => m.AccountID, this.ViewBag.AccountList SelectList, new { id = "AccountList", multiple = "true" , @class = "selectSearchAccount show-tick form-control", aria_Label = "Select Account"})
</div>

OneWorld 0 Reputation points

2024-03-18T21:05:06.86+00:00

I tried aria_Label = "Select Account" but still "No ARIA attributes" under ARIA Attributes on Chrome tool. I added htmlAttributes: as well.
Anonymous

2024-03-19T03:25:14.29+00:00
Hi @OneWorld,

Could you kindly check your Chrome version? Make sure you are using the latest version browser.

I test the DropDownList in asp.net and asp.net core, both of them are working properly as expected.

Here is the test result.

So the next action for you.

Upgrade your Visual Studio 2019/2022.

Upgrade your browser, you also can try to use Edge.

Best Regards

Jason
AgaveJoe 30,126 Reputation points

2024-03-19T09:45:07.5566667+00:00

I tried aria_Label = "Select Account" but still "No ARIA attributes" under ARIA Attributes on Chrome tool. I added htmlAttributes: as well.

The code example works perfectly on my end.

Your answer

AgaveJoe 30,126 Reputation points

2024-03-18T19:04:13.4+00:00

Example

@Html.DropDownList("Design_ID", null, "Select Designation", htmlAttributes: new { @class = "form-control", @id = "select2-1", aria_label = "My aria label" })
OneWorld 0 Reputation points

2024-03-18T19:34:12.96+00:00

I tried aria_label = "Select Account" but still "No ARIA attributes" under ARIA Attributes.

<div class="col-md-3"> @Html.LabelFor(model => model.AccountID) <span style="color: red;">*</span> @Html.DropDownListFor(m => m.AccountID, this.ViewBag.AccountList SelectList, new { id = "AccountList", multiple = "true" , @class = "selectSearchAccount show-tick form-control", aria_Label = "Select Account"}) </div>
OneWorld 0 Reputation points

2024-03-18T21:05:06.86+00:00

I tried aria_Label = "Select Account" but still "No ARIA attributes" under ARIA Attributes on Chrome tool. I added htmlAttributes: as well.
Anonymous

2024-03-19T03:25:14.29+00:00

Hi @OneWorld,

Could you kindly check your Chrome version? Make sure you are using the latest version browser.

I test the DropDownList in asp.net and asp.net core, both of them are working properly as expected.

Here is the test result.

So the next action for you.

Upgrade your Visual Studio 2019/2022.

Upgrade your browser, you also can try to use Edge.

Best Regards

Jason
AgaveJoe 30,126 Reputation points

2024-03-19T09:45:07.5566667+00:00

I tried aria_Label = "Select Account" but still "No ARIA attributes" under ARIA Attributes on Chrome tool. I added htmlAttributes: as well.

The code example works perfectly on my end.

Share via

How to add accessible name ( aria-label ) in @DropDownListFor in razor?

Your answer