Web accessibility for radgrids' textboxes/dropdown lists in edit mode

2 posts, 0 answers
  1. Lyubov
    Lyubov avatar
    1 posts
    Member since:
    Oct 2016

    Posted 14 Dec 2016 Link to this post


    I'm working on fixing web accessibility errors. I have a RadGrid (see attachment) with more than 10 columns. When I want to edit a particular row in the grid, all my editable fields have accessibility errors (no labels, titles, or aria-labels for displayed textboxes/dropdown lists). I'm trying to figure out what properties of radgrid or it's components I can use so that each field on my page will be web accessible in edit mode. I know that I can use code behind to set a tooltip of a particular item on my page (see below) to some value; however, it's not a good solution since I have more than 10 columns in my grid. Let me know if there is a better way to solve the web accessibility problems for editable items on my page. 

    If TypeOf (e.Item) Is GridEditableItem AndAlso e.Item.IsInEditMode Then
    Dim item As GridEditableItem = DirectCast(e.Item, GridEditableItem)
    Dim txtBox As TextBox = DirectCast(item("CllctnID").Controls(0), TextBox)
    txtBox.ToolTip = "hello"
    End If


    Thank you,


  2. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 19 Dec 2016 Link to this post


    The RadGrid control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true".

    You can check the following demo: http://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/wai-aria-support/defaultcs.aspx

    RadGrid is compliant with Section 508, and Level AA of the WCAG 2.0 Guidelines. You can check the following demo: http://demos.telerik.com/aspnet-ajax/grid/examples/accessibility-and-internationalization/accessibility-compliance/defaultcs.aspx

    This example demonstrates how you can make Telerik's ASP.NET RadGrid accessible by leveraging the settings for the different caption and summary properties of the rendered HTML elements.

    Note that for each control in the demos there is a section called "Accessibility and Internationalization" and there you can find the resources of how to make any control more accessible.

    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top