locked
screenreader not reading label associate with textbox RRS feed

  • Question

  • User-944424728 posted

    Hello, I have a group of lblquestion and a group of textbox such as first name label and firstname textbox, last name label and lastname text box.  I tried to use jquery but it did not recognize the client id. 

    <asp:Label ID="lblQuestion" runat="server" Text='<%# Eval("col_question")%>' ClientIDMode="Static"></asp:Label>

    <asp:View ID="View3" runat="server">
    <GSI:GSITextBox runat="server" ID="txtQuestionAnswer3" TextMode="MultiLine" Height="100" Width="275" CssClass="clsQuestion"></GSI:GSITextBox><br />
    <asp:Panel ID="phverify3" runat="server"></asp:Panel>
    </asp:View>

    --html code 

    this is working but I have too many labels and textboxes

    $(document).ready(function () {
    $('#ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions_ctl02_txtQuestionAnswer3').attr('aria-labelledby', 'ctl00_Main_content_ucApplicationQuestions_gridApplicationQuestions_ctl02_lblQuestion');

    });

    -- I used this by it could not recognize by the clientid. Please advise what other way I can do. Thank you.

    $(document).ready(function () {

          $('#<%=txtQuestionAnswer3.ClientId %>').attr('aria-labelledby', 'lblQuestion');

            

        });

    --using code below, I add a cssclass but now it read "first name" when I click on text box1 and "first name" on textbox 2

    $(document).ready(function () {
    var lblQuestion = $('#lblQuestion').attr('id');
    var all = $('.clsQuestion').map(function() {
    return $(this).attr('aria-labelledby', lblQuestion);
    }).get().join(',');
    });

    Monday, July 15, 2019 4:17 PM

All replies

  • User-719153870 posted

    Hi aspvbnet,

    According to the code you provided, we can see that when label and textbox are rendered to html, ID becomes a complex form (ctl00_Main_content_ucApplicationQuestions_grid ApplicationQuestions_ctl02_txtQuestionAnswer3).

    I guess your page may have repeater or other container controls, or your project may contain master pages.

    If you can provide complete code, it will be very helpful for us to solve the problem.

    If you are triggering your view in the behind-code, we can also consider binding textbox and label in the behind-code.

    Best Regard,

    Yang Shen

    Tuesday, July 16, 2019 2:57 AM
  • User-944424728 posted

    Hello, I've used this function and it works but now there is another span id inside when there is another label add to it with (*) required field. How can I get to the 2nd span since I have two in <tr>. thank you.

    <tr>

    <span id></span>

    <span id2></span>

    $(function () {
    $('.clsQuestion').each(function (i) {
    var eid = $(this).prop('id');
    var spnid = $(this).closest('tr').find('span').attr('id');
    $('#' + eid).attr('aria-labelledby', spnid);

    });
    });

    Wednesday, July 17, 2019 5:57 PM
  • User-719153870 posted

    Hi aspvbnet,

    If you want to find the second <span> or other tag in jquery, you can use the '.eq(1)' attribute.(It starts with 0, so 1 is the second one)

    Please refer to below codes:

    Notice: the <td> can not be omitted.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <title></title>
        <script type="text/javascript">
            $(function () {
                $('.clsQuestion').each(function (i) {
                    var eid = $(this).prop('id');
                    //alert($(this).siblings('table').find("span").eq(1).attr('id'));
                    var spnid = $(this).siblings('table').find("span").eq(1).attr('id');
                    $('#' + eid).attr('aria-labelledby', spnid);
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Label ID="lblQuestion" runat="server" Text='<%# Eval("col_question")%>' ClientIDMode="Static"></asp:Label>
                <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="View3" runat="server">
                    <br />
                     <asp:TextBox id="txtQuestionAnswer3" textmode="MultiLine" height="100" width="275" cssclass="clsQuestion" runat="server"></asp:TextBox>
                    <table id="tab1">
                        <tbody>
                            <tr id="tr1">
                                <td>
                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                               </td>
                            </tr>
                        </tbody>
                    </table>
                    <asp:Panel ID="phverify3" runat="server"></asp:Panel>
                </asp:View>
                    </asp:MultiView>
            </div>
        </form>
    </body>
    </html>

    Here's result of this demo:

    Best Regard,

    Yang Shen

    Thursday, July 18, 2019 6:34 AM