Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
175
Accessibility issues
posted

Hello everyone,

 I am facing some problems with accessibility matters on the UltraWebGrid control. I hope somebody could guide me in the right direction.

1. I cannot make the UltraWebGrid control accessible by keyboard. How can I make it posible?

Even though I have assigned a Tabindex value and i have setted the DisplayLayout.Section508Compliance value to true, I cannot get the focus on the grid via the keyboard.

2. How can I select a row via keyboard?

 I need to perform both operations (row select and cell select), so I have setted the DisplayLayout.CellClickActionDefault property to CellSelect

3. I have setted up a hierarchical webgrid.Once I select a row, I can easily navigate to the next row, expand/contract the tree for the records that posess detail records, all these operations by keyboard.

How can I access the detail records by keyboard? I want to be able to select the detail rows with the corresponding individual cells. How can I perform this?

4. I also need to perform the update/insert operations via keyboard. How can I access the "Add..." footer of the grid? Is there an alternative method to this? 

Can you help me with some answers to these questions? Are any of the features mentioned above not supported yet in the UltraWebGrid control?

Thank you,

C.

 

Parents
No Data
Reply
  • 28464
    posted

    Hello,

    That's a good question. So while Section508Compliant does help a lot, it does not certainly cover all accessbility points. Grids are complex controls and sometimes additional logic is required to make that happen.

    The problem with focus on tab (TabIndex) is that grids essentially render as <table> elements and do not allow focus (TabIndex / AccessKey). The solution to this problem is to have a hidden input that gains focus on TabIndex / AccessKey and activate the first row of the grid there. Example (note how we hide the textbox with css):

        <input type="text" tabindex="0" id="focusongrid" onfocus="focusGrid()" style="position: absolute; top: -50px; left: -50px;" />
       
        <script type="text/javascript">

            function focusGrid()
            {
                var grid = igtbl_getGridById("<%= UltraWebGrid1.ClientID %>");           
                grid.Rows.getRow(0).activate();
            }
       
        </script>

    All the other question you have can derive from this approach - hide an input control and have an access key trigger its focus and from there use the CSOM of the grid (Client Side Object Model) to do the respective action.

    I will probably need to come up with a complete article for that, it will just take some time and I wanted to give you something tangible you can start building on today.

Children