Html.LabelFor associate with DropDownListFor (for WCAG accessibility)

[Gary Davis]

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

[Neli]

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

[Gary Davis]

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

[Neli]

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

[Gary Davis]

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.