0

I am using an ASP.NET Wizard control to display a multi steps process. I have to make the form accessible with NVDA screen reader and with all browsers. The form is accessible in Chrome as the NVDA is reading the screen from the top

This is header

to bottom in order. But when checking the same form in Firefox + NVDA, the focus is sometimes moving to middle and sometimes to the footer. My requirement is screen reader should always read from the

This is header

in all the wizard steps. Please, I need your help to solve the issue. My Code is as below: 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WizardRadioButtonListDemo.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accessibile Form</title>    
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false">
                <HeaderTemplate>
                    <h1>This is header</h1>
                </HeaderTemplate>
                <WizardSteps>                  
                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
                        <fieldset id="Fieldset1" runat="server">
                            <legend id="Legend1" runat="server">Type</legend>
                            <asp:RadioButtonList ID="rdoServiceType" RepeatLayout="Flow" runat="server">
                                <asp:ListItem Text="Gold" Value="0">Gold</asp:ListItem>
                                <asp:ListItem Text="Siver" Value="1">Silver</asp:ListItem>
                                <asp:ListItem Text="Premium" Value="2">Premium</asp:ListItem>
                            </asp:RadioButtonList>
                        </fieldset>
                    </asp:WizardStep>
                    <asp:WizardStep>
                        <asp:FileUpload ID="FileUpload1" runat="server" />
                        <asp:Button ID="btnFileUpload" runat="server" Text="Upload" />
                    </asp:WizardStep>
                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
                        <fieldset id="Fieldset2" runat="server">
                            <legend id="Legend2" runat="server">User</legend>
                            <asp:Label ID="lblFirstName" runat="server" Text="First Name" AssociatedControlID="txtFirstName"></asp:Label>
                            <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                            <asp:Label ID="lblLastName" runat="server" Text="Last Name" AssociatedControlID="txtLastName"></asp:Label>
                            <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                        </fieldset>
                    </asp:WizardStep>
                </WizardSteps>
            </asp:Wizard>
        </div>
    </form>
      <p>&copy; 2017 <a href="http://www.test.com" target="_blank">Test LLC.</a>. All rights reserved. Powered by <a href="http://www.test.com" target="_blank">Test</a></p>

</body>
</html>
Simant
  • 3,142
  • 4
  • 32
  • 61

1 Answers1

0

Okay so heres the issue I think. So you want the user to read the h1 by tabbing. One solution would be to add a tab-index of 0 to the header.

Why?

Because by default html, the only tabbable elements are Links, buttons, & inputs. H1's and p-tags don't do that. But they can if you give them a tab-index of 0...

So add this:

        <HeaderTemplate tabindex="0">
            <h1>This is header</h1>
        </HeaderTemplate>

I might've interpreted your question wrong. If that's not the case, you can always add tab-index of positive values to your form in the sections you want it to go to.

Such as:tab-index="1"

... etc, and keep going up.

Gcamara14
  • 510
  • 4
  • 14
  • I tried with tabindex in h1 tag as HeaderTemplate doesn't support tabindex attribute but it doesn't work for me. It works fine in Chrome without tabindex but in Firefox screen reader (NVDA) forcefully focuses on some other elements while moving to steps. – Simant Jul 04 '17 at 07:28