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

Html.LabelFor associate with DropDownListFor (for WCAG accessibility)

4 Answers 139 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Gary Davis
Top achievements
Rank 2
Gary Davis asked on 12 Sep 2018, 07:23 PM

How can I correctly associate the label generated by Html.LabelFor() with my MVC Kendo DropDownListFor(). It seems like it should work but is not read by the screen reader, perhaps due to the hidden input field.

 

        <div class="input-block-level">
            @Html.LabelFor(m => m.BirthdayMonth, new {@class = "col-md-5 control-label"})
            <div class="col-md-3">
                @(Html.Kendo().DropDownListFor(m => m.BirthdayMonth)
                    .Name("BirthdayMonth")
                    .OptionLabel("Month")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(new List<SelectListItem>
                    {
                        new SelectListItem {Text = "01 - Jan", Value = "1"},
                        new SelectListItem {Text = "02 - Feb", Value = "2"},

                                 [...etc...]
                        new SelectListItem {Text = "11 - Nov", Value = "11"},
                        new SelectListItem {Text = "12 - Dec", Value = "12"}
                    })
                    .HtmlAttributes(new {@class = "form-control", style = "width:100px"})
                    .Deferred()
                )
            </div>

        </div>

Thanks,

Gary Davis

4 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 14 Sep 2018, 02:37 PM
Hello Gary,

I would suggest you to refer to the article regarding Label Element Support and follow the described approach:
- https://docs.telerik.com/kendo-ui/accessibility/section-508#label-element-support 

In addition I would like to point out that [WidgetName]For methods are setting name automatically. For this reason it is not recommended to use For method together with Name method. You could read more in the Setting Name section of the article linked below:
- https://docs.telerik.com/aspnet-mvc/getting-started/fundamentals#configuration-Setting

Regards,
Neli
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gary Davis
Top achievements
Rank 2
answered on 19 Sep 2018, 02:24 PM

Thanks for the reply, Neli, I did see the info in the first link but it does not explain how to do that with the MVC wrapper code I provided. I think your second link is saying I can omit the .Name("BirthdayMonth") from my code.

If you could provide an example or information on how to fix the code posted above, I would greatly appreciate it.

Thanks

0
Accepted
Neli
Telerik team
answered on 20 Sep 2018, 03:05 PM
Hi Gary,

I have performed some local tests, in regards to the DropDownListFor and LabelFor.  I used NVDA for testing purposes, but the issue was not replicated.
Please let us know about the screen reader you are using. Please make sure that you are using JAWS for IE, NVDA for FireFox and ChromeVox for Chrome.

Regards,
Neli
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gary Davis
Top achievements
Rank 2
answered on 27 Nov 2018, 07:39 PM
I upgraded my Kendo MVC to the current version and it now seems to work correctly. My previous version was from 2016 and it appears there were many ADA-related (ARIA) changes to the generated html/css. My testing was with the NVDA screen reader.
Tags
DropDownList
Asked by
Gary Davis
Top achievements
Rank 2
Answers by
Neli
Telerik team
Gary Davis
Top achievements
Rank 2
Share this question
or