Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Label, Panel и проверяющих элементов управления

Статья
10/15/2014

В данном пошаговом руководстве описаны способы использования элементов управления ASP.NET Label, Panel и проверяющих элементов управления, которые помогут сделать форму ввода доступной для пользователей, применяющих программу чтения с экрана. Эти подходы позволяют выполнять приведенные ниже требования рекомендаций по специальным возможностям для веб-содержимого (WCAG) версии 2.0.

Отделение структуры от представления (рекомендация WCAG 1.3).
Создание веб-сайтов, удобных для навигации (рекомендация WCAG 2.4)
Предупреждение и исправление ошибок пользователей (рекомендация WCAG 3.1).

В этом пошаговом руководстве также показано, как использовать средство проверки специальных возможностей Visual Studio. Дополнительные сведения о специальных возможностях и WCAG 2.0 см. в разделе Специальные возможности Visual Studio и ASP.NET.

Обязательные компоненты

Для работы с этим пошаговым руководством необходимы следующие компоненты.

Visual Studio 2010 или более поздняя версия.
Веб-сайт ASP.NET 4, на который можно добавить новую веб-страницу.

При построении приложения браузера системы конфигурации это может быть веб-сайт, созданный в разделе Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Image, Menu и AutoPostBack.

Приложение браузера системы конфигурации

Это пошаговое руководство является пятым в серии, демонстрирующей приемы, которые могут помочь обеспечить соответствие веб-сайта ASP.NET требованиям WCAG 2.0, предъявляемым к предоставлению специальных возможностей. В данной серии пошаговых руководств создается веб-приложение, которое можно использовать для просмотра параметров конфигурации ASP.NET. Если нужно выполнить все пошаговые руководства, перейдите к разделу Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Image, Menu и AutoPostBack. Чтобы не проходить другие пошаговые руководства из этой серии, выполните альтернативные инструкции, приведенные для некоторых шагов. Одни и те же функции специальных возможностей будут показаны как при прохождении пошагового руководства в рамках серии, так и при его независимом прохождении.

Веб-страница, созданная в этом пошаговом руководстве, содержит форму ввода для данных, которые будут использоваться другими страницами браузера системы конфигурации. Данные в этой форме используются для выбора конкретного файла конфигурации и для изменения заголовка домашней страницы так, чтобы он отражал этот выбор. Дополнительные сведения о файлах конфигурации и группах разделов, разделах и содержащихся в них элементах см. в разделе Файлы конфигурации ASP.NET. Однако для использования этих пошаговых руководств в качестве иллюстраций по созданию страниц, соответствующих требованиям по обеспечению специальных возможностей, знание системы файлов конфигурации ASP.NET необязательно.

Примечание по безопасности
Сведения о конфигурации, отображаемые приложением, создаваемым в этих пошаговых руководствах, могут быть полезными для разработчиков, но по соображениям безопасности их не следует отображать на веб-сайтах в производственной среде.Параметры конфигурации могут содержать конфиденциальные сведения, которые разрешено показывать только пользователям, обладающим соответствующими разрешениями.

Сведения о конфигурации, отображаемые приложением, создаваемым в этих пошаговых руководствах, могут быть полезными для разработчиков, но по соображениям безопасности их не следует отображать на веб-сайтах в производственной среде.Параметры конфигурации могут содержать конфиденциальные сведения, которые разрешено показывать только пользователям, обладающим соответствующими разрешениями.

Проект веб-сайта Visual Studio с исходным кодом этого примера доступен на следующей странице загрузка.

Создание веб-страницы, использующей элементы управления панелей и меток, а также проверяющие элементы управления

В этом разделе создается веб-страница, содержащая форму ввода. Эта форма содержит перечисленные ниже возможности, которые повышают ее доступность для людей, использующих программу чтения с экрана.

Эта форма делится на разделы с помощью элементов управления Panel.
Свойства AssociatedControlID элементов управления Label привязывают их к элементам управления ввода, метками которых они являются.
Для проверяющих элементов управления предусмотрены полезные сообщения об ошибках, и обязательные поля четко помечены.

Создание веб-страницы, содержащей форму ввода

В обозревателе решений щелкните правой кнопкой мыши имя проекта и выберите команду Добавить новый элемент.

Откроется диалоговое окно Добавление нового элемента.
В разделе Установленные шаблоны нажмите Visual Basic или Visual C#, а затем выберите пункт Веб-форма.
В текстовом поле Имя введите Preferences.aspx.
Убедитесь, что установлен флажок Поместить код в отдельный файл.
Если данная страница добавляется в приложение браузера системы конфигурации, убедитесь, что установлен флажок Выбрать главную страницу. (Если эта страница не добавляется в веб-сайт, созданный в разделе Пошаговое руководство. Руководства по специальным возможностям использования элементов управления Image, Menu и AutoPostBack, то главная страница может отсутствовать.)
Когда откроется диалоговое окно Выбор главной страницы, нажмите кнопку ОК. Определена только одна главная страница, и она уже будет выбрана.
В диалоговом окне Добавление нового элемента нажмите кнопку ОК.

Файл Preferences.aspx будет открыт в представлении Источник.
В директиве @ Page присвойте свойству Title значение "Configuration System Browser - Preferences", как показано в следующем примере:
```
<%@ Page  Language="VB" AutoEventWireup="true" 
    Title="Configuration System Browser - Preferences"
    CodeFile="Preferences.aspx.vb"  MasterPageFile="~/Site.master" 
    Inherits="Preferences" %>
```
```
<%@ Page  Language="C#" AutoEventWireup="true" 
    Title="Configuration System Browser - Preferences"
    CodeFile="Preferences.aspx.cs"  MasterPageFile="~/Site.master" 
    Inherits="Preferences" %>
```
Данный заголовок определяет сайт и страницу на сайте. Задание заголовка страницы является обязательным в соответствии с требованиями специальных возможностей.
В элемент Content, предназначенный для элемента управления ContentPlaceHolder MainContent, вставьте следующую разметку:
```
<h2>
    Preferences
</h2>

<asp:Panel ID="Panel2" runat="server" 
    GroupingText="Specify Heading Text">
    <asp:Label ID="Label1" runat="server" 
        AssociatedControlID="HeadingTextBox" 
        Text="* Heading" class="bold">
    </asp:Label>
    <asp:TextBox ID="HeadingTextBox" runat="server">
    </asp:TextBox>
    <asp:HyperLink ID="HyperLink1" runat="server"
        NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
        Configuration File Hierarchy Documentation
        </asp:HyperLink>
    <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
        runat="server" 
        ControlToValidate="HeadingTextBox" 
        CssClass="errorMessage" 
        ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
    </asp:RequiredFieldValidator>
</asp:Panel>
```
```
<h2>
    Preferences
</h2>

<asp:Panel ID="Panel2" runat="server" 
    GroupingText="Headings">
    <asp:Label ID="Label1" runat="server" 
        AssociatedControlID="HeadingTextBox" 
        Text="* Heading" class="bold">
    </asp:Label>
    <asp:TextBox ID="HeadingTextBox" runat="server">
    </asp:TextBox>
    <asp:HyperLink ID="HyperLink1" runat="server"
        NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
        Configuration File Hierarchy Documentation
        </asp:HyperLink>
    <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
        runat="server" 
        ControlToValidate="HeadingTextBox" 
        CssClass="errorMessage" 
        ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
    </asp:RequiredFieldValidator>
</asp:Panel>
```
(Если создается веб-страница, которая не является частью приложения браузера системы конфигурации, вставьте разметку между тегами <div> и </div>.)

Эта разметка добавляет заголовок страницы и текстовое поле, в котором пользователь может задать часть заголовка, которая будет отображаться на домашней странице приложения браузера системы конфигурации. Эта разметка содержит перечисленные ниже возможности, связанные со специальными возможностями.
- Поле ввода находится в элементе управления Panel, который создает элемент div отдельно от раздела формы. Свойство GroupingText элемента управления Panel установлено так, чтобы были созданы элементы набора полей и легенды.
  
  Обычно элементы наборов полей (fieldset) используются только для длинных форм. Но они используются в данном пошаговом руководстве, чтобы показать возможности более длинной формы.
- Свойство AssociatedControlID элемента управления Label установлено равным идентификатору элемента управления TextBox. Это приводит к созданию элементов меток, обладающих атрибутами for. (В противном случае элемент управления Label создает элемент диапазона без атрибута for.)
- Метка для обязательного поля помечена звездочкой. При этом индикация ошибок проверки не ограничивается отображением метки поля полужирным шрифтом или другим цветом, так как эти способы могут быть не восприняты лицом, использующим программу чтения с экрана.
- Сообщение об ошибке для RequiredFieldValidator четко объясняет, что должно быть введено в этом текстовом поле.

Ниже разметки, добавленной на предыдущем шаге, вставьте следующую разметку:

<asp:Panel ID="Panel1" runat="server" 
    GroupingText="Select Configuration File">
    <asp:Label ID="Label5" runat="server" 
        AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
    </asp:Label>
    <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
    </asp:TextBox>
    <br />
    <asp:Label ID="Label2" runat="server" 
        AssociatedControlID="SiteNameTextBox" Text="Site Name">
    </asp:Label>
    <asp:TextBox ID="SiteNameTextBox" runat="server">
    </asp:TextBox>
    <br />

    <asp:Label ID="Label3" runat="server" 
        AssociatedControlID="SubPathTextBox" Text="Sub Path">
    </asp:Label>
    <asp:TextBox ID="SubPathTextBox" runat="server">
    </asp:TextBox>
    <br />

    <asp:Label ID="Label4" runat="server" 
        AssociatedControlID="ServerTextBox" Text="Server">
    </asp:Label>
    <asp:TextBox ID="ServerTextBox" runat="server">
    </asp:TextBox>
    <br />
</asp:Panel>

<asp:Panel ID="Panel1" runat="server" 
    GroupingText="Select Configuration File">
    <asp:Label ID="Label5" runat="server" 
        AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
    </asp:Label>
    <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
    </asp:TextBox>
    <br />
    <asp:Label ID="Label2" runat="server" 
        AssociatedControlID="SiteNameTextBox" Text="Site Name">
    </asp:Label>
    <asp:TextBox ID="SiteNameTextBox" runat="server">
    </asp:TextBox>
    <br />

    <asp:Label ID="Label3" runat="server" 
        AssociatedControlID="SubPathTextBox" Text="Sub Path">
    </asp:Label>
    <asp:TextBox ID="SubPathTextBox" runat="server">
    </asp:TextBox>
    <br />

    <asp:Label ID="Label4" runat="server" 
        AssociatedControlID="ServerTextBox" Text="Server">
    </asp:Label>
    <asp:TextBox ID="ServerTextBox" runat="server">
    </asp:TextBox>
    <br />
</asp:Panel>

Эта разметка добавляет четыре текстовых пользователя, в которые пользователь может ввести конкретный файл конфигурации, чтобы извлечь из него данные конфигурации. Эта разметка содержит перечисленные ниже возможности, связанные со специальными возможностями.

Поля ввода находятся в элементе управления Panel.
Свойства AssociatedControlID элементов управления Label задаются соответствующим образом.

Способы, с помощью которых эти функции делают веб-страницу более доступной, объясняются в более ранних шагах.

Ниже разметки, добавленной на предыдущем шаге, вставьте следующую разметку:

* indicates required field.
<br />
<br />
<asp:Button ID="SaveButton" runat="server" Text="Save" 
    TabIndex="6" onclick="SaveButton_Click" />&nbsp;
<asp:Button ID="CancelButton" runat="server" Text="Cancel"
    CausesValidation="false" 
    TabIndex="7" onclick="CancelButton_Click" />

* indicates required field.
<br />
<br />
<asp:Button ID="SaveButton" runat="server" Text="Save" 
    TabIndex="6" onclick="SaveButton_Click" />&nbsp;
<asp:Button ID="CancelButton" runat="server" Text="Cancel"
    CausesValidation="false" 
    TabIndex="7" onclick="CancelButton_Click" />

Эта разметка добавляет кнопку сохранения, кнопку отмены и текст сноски для звездочки обязательного поля. Функцией этой разметки, связанной со специальными возможностями, является объяснение значения звездочки.

В следующем примере кода показана страница Element.aspx.

<%@ Page  Language="VB" AutoEventWireup="true" 
    Title="Configuration System Browser - Preferences"
    CodeFile="Preferences.aspx.vb"  MasterPageFile="~/Site.master" 
    Inherits="Preferences" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <h2>
        Preferences
    </h2>

    <asp:Panel ID="Panel2" runat="server" 
        GroupingText="Specify Heading Text">
        <asp:Label ID="Label1" runat="server" 
            AssociatedControlID="HeadingTextBox" 
            Text="* Heading" class="bold">
        </asp:Label>
        <asp:TextBox ID="HeadingTextBox" runat="server">
        </asp:TextBox>
        <asp:HyperLink ID="HyperLink1" runat="server"
            NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
            Configuration File Hierarchy Documentation
            </asp:HyperLink>
        <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
            runat="server" 
            ControlToValidate="HeadingTextBox" 
            CssClass="errorMessage" 
            ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
        </asp:RequiredFieldValidator>
    </asp:Panel>

    <asp:Panel ID="Panel1" runat="server" 
        GroupingText="Select Configuration File">
        <asp:Label ID="Label5" runat="server" 
            AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
        </asp:Label>
        <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
        </asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" 
            AssociatedControlID="SiteNameTextBox" Text="Site Name">
        </asp:Label>
        <asp:TextBox ID="SiteNameTextBox" runat="server">
        </asp:TextBox>
        <br />

        <asp:Label ID="Label3" runat="server" 
            AssociatedControlID="SubPathTextBox" Text="Sub Path">
        </asp:Label>
        <asp:TextBox ID="SubPathTextBox" runat="server">
        </asp:TextBox>
        <br />

        <asp:Label ID="Label4" runat="server" 
            AssociatedControlID="ServerTextBox" Text="Server">
        </asp:Label>
        <asp:TextBox ID="ServerTextBox" runat="server">
        </asp:TextBox>
        <br />
    </asp:Panel>
    * indicates required field.
    <br />
    <br />
    <asp:Button ID="SaveButton" runat="server" Text="Save" 
        TabIndex="6" onclick="SaveButton_Click" />&nbsp;
    <asp:Button ID="CancelButton" runat="server" Text="Cancel"
        CausesValidation="false" 
        TabIndex="7" onclick="CancelButton_Click" />

</asp:Content>

<%@ Page  Language="C#" AutoEventWireup="true" 
    Title="Configuration System Browser - Preferences"
    CodeFile="Preferences.aspx.cs"  MasterPageFile="~/Site.master" 
    Inherits="Preferences" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <h2>
        Preferences
    </h2>

    <asp:Panel ID="Panel2" runat="server" 
        GroupingText="Headings">
        <asp:Label ID="Label1" runat="server" 
            AssociatedControlID="HeadingTextBox" 
            Text="* Heading" class="bold">
        </asp:Label>
        <asp:TextBox ID="HeadingTextBox" runat="server">
        </asp:TextBox>
        <asp:HyperLink ID="HyperLink1" runat="server"
            NavigateUrl="https://msdn.microsoft.com/en-us/library/ms178685.aspx">
            Configuration File Hierarchy Documentation
            </asp:HyperLink>
        <asp:RequiredFieldValidator ID="ConfigFileRequiredFieldValidator" 
            runat="server" 
            ControlToValidate="HeadingTextBox" 
            CssClass="errorMessage" 
            ErrorMessage="<br/>Enter a heading that corresponds to the information entered in the following section.">
        </asp:RequiredFieldValidator>
    </asp:Panel>

    <asp:Panel ID="Panel1" runat="server" 
        GroupingText="Select Configuration File">
        <asp:Label ID="Label5" runat="server" 
            AssociatedControlID="VirtualPathTextBox" Text="Virtual Path">
        </asp:Label>
        <asp:TextBox ID="VirtualPathTextBox" runat="server" TabIndex="2">
        </asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" 
            AssociatedControlID="SiteNameTextBox" Text="Site Name">
        </asp:Label>
        <asp:TextBox ID="SiteNameTextBox" runat="server">
        </asp:TextBox>
        <br />

        <asp:Label ID="Label3" runat="server" 
            AssociatedControlID="SubPathTextBox" Text="Sub Path">
        </asp:Label>
        <asp:TextBox ID="SubPathTextBox" runat="server">
        </asp:TextBox>
        <br />

        <asp:Label ID="Label4" runat="server" 
            AssociatedControlID="ServerTextBox" Text="Server">
        </asp:Label>
        <asp:TextBox ID="ServerTextBox" runat="server">
        </asp:TextBox>
        <br />
    </asp:Panel>
    * indicates required field.
    <br />
    <br />
    <asp:Button ID="SaveButton" runat="server" Text="Save" 
        TabIndex="6" onclick="SaveButton_Click" />&nbsp;
    <asp:Button ID="CancelButton" runat="server" Text="Cancel"
        CausesValidation="false" 
        TabIndex="7" onclick="CancelButton_Click" />

</asp:Content>

Добавление кода для инициализации текстовых полей и обработки событий кнопок

В следующей процедуре будет добавлен код метод, который будет выполнять перечисленные ниже функции.

Инициализация текстовых полей с помощью значений, находящихся в данный момент в состоянии сеанса.
Сохранение значений текстовых полей в состоянии сеанса при нажатии кнопки сохранения. Другие страницы в приложении браузера конфигурации будут использовать значения в состоянии сеанса, чтобы определить файл конфигурации, из которого нужно получить данные.
Передача управления домашней страницы при нажатии кнопки отмены.

Инициализация текстовых полей и обработка кнопок сохранения и отмены

Откройте файл Preferences.aspx.vb или Preferences.aspx.cs.
Удалите метод Page_Load.

На его место добавьте следующий код:

Protected Sub Page_Load(ByVal sender As Object,
                        ByVal e As EventArgs)

    If Session("Heading") IsNot Nothing Then
        HeadingTextBox.Text = Session("Heading").ToString()
    End If

    If Session("Path") IsNot Nothing Then
        VirtualPathTextBox.Text = Session("Path").ToString()
    End If

    If Session("Site") IsNot Nothing Then
        SiteNameTextBox.Text = Session("Site").ToString()
    End If

    If Session("SubPath") IsNot Nothing Then
        SubPathTextBox.Text = Session("SubPath").ToString()
    End If

    If Session("Server") IsNot Nothing Then
        ServerTextBox.Text = Session("Server").ToString()
    End If
End Sub

Protected Sub SaveButton_Click(ByVal sender As Object,
                               ByVal e As EventArgs)

    If Page.IsValid <> True Then
        ConfigFileRequiredFieldValidator.Visible = True
    Else
        Session("Heading") = HeadingTextBox.Text
        Session("Path") = VirtualPathTextBox.Text
        Session("Site") = SiteNameTextBox.Text
        Session("SubPath") = SubPathTextBox.Text
        Session("Server") = ServerTextBox.Text
        Server.Transfer("~/Default.aspx")
    End If
End Sub
Protected Sub CancelButton_Click(ByVal sender As Object,
                                 ByVal e As EventArgs)

    Server.Transfer("~/Default.aspx")
End Sub

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["Heading"] != null)
    {
        HeadingTextBox.Text = Session["Heading"].ToString();
    }

    if (Session["Path"] != null)
    {
        VirtualPathTextBox.Text = Session["Path"].ToString();
    }

    if (Session["Site"] != null)
    {
        SiteNameTextBox.Text = Session["Site"].ToString();
    }

    if (Session["SubPath"] != null)
    {
        SubPathTextBox.Text = Session["SubPath"].ToString();
    }

    if (Session["Server"] != null)
    {
        ServerTextBox.Text = Session["Server"].ToString();
    }
}

protected void SaveButton_Click(object sender, EventArgs e)
{
    if (Page.IsValid != true)
    {
        ConfigFileRequiredFieldValidator.Visible = true;
    }
    else
    {
        Session["Heading"] = HeadingTextBox.Text;
        Session["Path"] = VirtualPathTextBox.Text;
        Session["Site"] = SiteNameTextBox.Text;
        Session["SubPath"] = SubPathTextBox.Text;
        Session["Server"] = ServerTextBox.Text;
        Server.Transfer("~/Default.aspx");
    }
}
protected void CancelButton_Click(object sender, EventArgs e)
{
    Server.Transfer("~/Default.aspx");
}

Для каждого текстового поля метод Page_Load проверяет наличие значения в состоянии сеанса. Если такое значение есть, оно загружается в текстовое поле. (Это не связано со специальными возможностями, просто выполняется отслеживание введенных данных при переходе со странице на страницу в приложении браузера конфигурации.)

Метод SaveButton_Click проверяет, правильно ли введены пользователем данные на этой странице. Затем метод сохраняет значения в состоянии сеанса и возвращает на домашнюю страницу. Проверка правильности необходима, так как клиентский скрипт может быть отключен в браузере. В этом случае страница могла бы быть отправлена без проверки на стороне клиента, что является возможной проблемой безопасности.

Метод CancelButton_Click передает управление домашней странице, не внося изменений в состояние сеанса.

Добавление CSS-стилей для улучшения внешнего вида страницы

При создании этой веб-страницы в составе приложения браузера системы конфигурации используйте эту процедуру, чтобы изменить CSS-файл сайта. Определения CSS, добавляемые в этой процедуре, не являются обязательными для специальных возможностей. Но они улучшают внешний вид страницы нижеперечисленными способами.

Метка обязательного поля выделяется полужирным шрифтом.
Все сообщения об ошибках проверки отображаются полужирным шрифтом и красным цветом.
Текстовые поля выравниваются, так как для всех текстовых полей используется одинаковая длина меток.

Изменение CSS-стилей для строки заголовка

В обозревателе решений разверните папку Styles, а затем откройте файл Site.css.
Под строкой комментария FORM ELEMENTS добавьте следующее определение:
```
fieldset label
{
    display: block;
    float:left;
    width: 10em;
}
```
Это определение задает стандартную длину для элементов метки, находящиеся в элементах набора полей.
В конец файла вставьте следующие определения CSS:
```
.errorMessage
{
    font-weight: bold;
    color: Red;
}

.bold
{
    font-weight: bold;
}
```
Эти определения используются, чтобы сделать полужирными метки обязательных полей, и чтобы сделать сообщение об ошибке полужирным и красным.

Тестирование веб-страницы

Теперь можно проверить, что страница отображается правильно, и что для нее создается HTML-код с поддержкой специальных возможностей.

Тестирование страницы

В обозревателе решений щелкните правой кнопкой мыши файл Preferences.aspx и выберите команду Просмотр в обозревателе.

На следующем рисунке показана форма ввода с пустыми текстовыми полями.

Примечание

При этом может потребоваться нажать в браузере кнопку перезагрузки или обновления, чтобы просмотреть результат применения новых параметров CSS, добавленных в предыдущей процедуре.

Если веб-страница создана как независимая страница, а не как часть приложения браузера системы конфигурации, строка заголовка и строка меню будут отсутствовать.
Просмотрите исходный код страницы в браузере.

В следующем примере показано, как разделы таблицы определяются элементами набора полей, и как метки полей ввода определяются элементами меток, обладающими атрибутами for.
```
<fieldset>
  <legend>Headings</legend>
  <label for="MainContent_HeadingTextBox" id="MainContent_Label1"
      class="bold">
      * Heading
  </label>
  <input name="ctl00$MainContent$HeadingTextBox" type="text"
      id="MainContent_HeadingTextBox" />
  <a id="MainContent_HyperLink1" href=...>
      Configuration File Hierarchy Documentation
  </a>
  
</fieldset>
```
На веб-странице нажмите кнопку Сохранить.

Выводится сообщение об ошибке, указывающее, что обязательное поле пропущено, и подобное показанному на приведенном ниже рисунке.

После выполнения других пошаговых руководств в этой серии создание приложения браузера конфигурации будет закончено. Можно просматривать группы разделов, разделы и элементы, перейдя на домашнюю страницу и щелкая отображаемые ссылки на различные списки и таблицы.

На странице предпочтений можно ввести значения в панели Select Configuration File (Выбор файла конфигурации), чтобы выбрать файл конфигурации, отличный от файла machine.config, являющегося файлом конфигурации по умолчанию. Например, если веб-сайт называется ConfigBrowser, можно ввести в поле виртуального пути "Virtual Path" значение /ConfigBrowser. В этом случае другие веб-страницы в приложении будут содержать данные из файла Web.config приложения вместо файла machine.config. Дополнительные сведения о значениях, которые можно ввести, см. в описании метода OpenWebConfiguration.

Проверка специальных возможностей

В этом разделе используется средство проверки специальных возможностей Visual Studio, чтобы помочь найти проблемы специальных возможностей на веб-странице. Средство проверки специальных возможностей может напомнить о проблемах, которые иначе могут быть пропущены. Но необходимо знать о его ограничениях. Отсутствие сообщений об ошибках необязательно означает, что веб-сайт полностью совместим с рекомендациями по обеспечению специальных возможностей. Кроме того, появляющиеся сообщения об ошибках могут быть неприменимы к создаваемому веб-сайту, так как они могли устареть.

Проверка специальных возможностей имеет следующие ограничения.

Многие рекомендации по обеспечению специальных возможностей требуют оценки человеком и не могут быть проверены автоматически. Например, автоматическое средство может проверить наличие атрибута alt в теге img. Но это средство не может проверить соответствие текста в атрибуте alt содержимому изображения.
Средство проверки специальных возможностей проверяет соответствие рекомендациям WCAG 1.0, но не рекомендациям WCAG 2.0. Рекомендациям WCAG 1.0 более десяти лет. Многие рекомендации по обеспечению специальных возможностей были изменены. Отдельные сайты могут требовать соответствия более старым рекомендациям по закону. Но необходимо учитывать более новые рекомендации и решить, что делать с сообщениями проверки специальных возможностей, относящимися к старым рекомендациям. Дополнительные сведения см. в разделе Специальные возможности Visual Studio и ASP.NET.
Инструмент проверки читаемости проверяет только HTML-код. Оно не проверяет разметку ASP.NET. Например, оно будет сообщать об отсутствующем атрибуте alt в элементе img. Но оно не будет сообщать об отсутствующем свойстве AlternateText элемента управления Image.

Запуск средства проверки специальных возможностей

Откройте файл Preferences.aspx и переключитесь в представление Источник.
Ниже элемента h2, содержащего заголовок Preferences, вставьте следующую разметку:
```
<asp:image ID="Image1" runat="server" 
    ImageUrl="~/Images/ASPdotNET_logo.jpg"></asp:image>
<img src="~/Images/ASPdotNET_logo.jpg"/>
```
Эта разметка содержит ошибки обеспечения специальных возможностей, чтобы показать, как средство проверки специальных возможностей сообщает об ошибках.
Сохраните файл Preferences.aspx.
В меню Сервис выберите пункт Проверить специальные возможности.

Откроется диалоговое окно Проверка специальных возможностей, показанное на следующем рисунке.
Щелкните Проверить.

Ошибки и предупреждения появляются в окне Список ошибок, как показано на следующем рисунке:

В этом окне появляются как информационные сообщения, так и сообщения об ошибках. Ошибки обеспечения специальных возможностей обозначаются номером контрольной точки WCAG 1.0.

Обратите внимание, что показывается ошибка для HTML-элемента img, но не для элемента управления ASP.NET Image, хотя у обоих элементов управления пропущены атрибуты alt. (У элемента управления Image отсутствует или свойство AlternateText, или набор свойств GenerateEmptyAlternateText.) Инструмент проверки читаемости проверяет только HTML-код. Оно не проверяет разметку ASP.NET. Если вы хотите использовать средство проверки читаемости на ASPX-странице, чтобы проверить динамически созданную разметку, это можно сделать следующим образом.
1. Просмотрите страницу в браузере.
2. Просмотрите исходный HTML-код страницы в браузере.
3. Сохраните исходный HTML-файл и запустите средство проверки читаемости для этого файла.
Удалите элемент img и элемент управления Image, добавленный в предыдущем шаге.
Сохраните файл Preferences.aspx.

Следующие действия

В этом пошаговом руководстве использовались элементы управления Label и Panel, а также проверяющие элементы управления, которые помогут сделать веб-страницу доступной для людей, использующих программу чтения с экрана. В остальных пошаговых руководствах этой серии демонстрируются другие подходы по обеспечению соответствия веб-сайта требованиям специальных возможностей. Это последнее пошаговое руководство в этой серии. Также доступны приведенные ниже пошаговые руководства.

См. также

Основные понятия

Специальные возможности Visual Studio и ASP.NET