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

Visual Studio 2010

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

  • Главные страницы.

  • Элементы управления Image.

  • Элементы управления Menu.

  • Элементы с функцией AutoPostBack.

Эти подходы позволяют выполнять следующие требования рекомендаций по специальным возможностям для веб-содержимого (WCAG) версии 2.0:

  • Предоставление альтернативного текста для изображений (рекомендация WCAG 1.1)

  • Отделение структуры от представления (рекомендация WCAG 1.3).

  • Создание веб-сайтов, удобных для навигации (рекомендация WCAG 2.4)

  • Создание веб-содержимого, удобного для чтения и понимания (рекомендация WCAG 3.1)

  • Предсказуемая реакция на пользовательский ввод (рекомендация WCAG 3.2)

Дополнительные сведения о специальных возможностях и WCAG 2.0 см. в разделе Специальные возможности Visual Studio и ASP.NET.

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

  • Visual Studio 2010 или более поздняя версия.

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

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

Примечание о безопасностиПримечание по безопасности

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

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

Для соответствия рекомендациям по доступности HTML-элементы img должны иметь атрибуты alt, если они не являются декоративными. Программное обеспечение, поддерживающее специальные возможности (например, программа чтения с экрана), способно считать текст в атрибуте alt, чтобы проинформировать пользователя о назначении изображения.

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

Создание веб-сайта

  1. Запустите Visual Studio.

  2. В меню Файл выберите команду Создать, после чего выберите Веб-узел.

    Откроется диалоговое окно Новый веб-узел.

  3. В разделе Установленные шаблоны щелкните элементы Visual Basic или Visual C#, а затем щелкните пункт Веб-сайт ASP.NET.

  4. В списке Расположение в Интернете выберите пункт Файловая система, а затем введите расположение и имя для веб-сайта.

    В этом руководстве предполагается, что веб-сайт называется ConfigBrowser, но разработчики могут использовать любое имя.

  5. Нажмите кнопку ОК.

    Visual Studio создает веб-сайт с главной страницей, страницами содержимого и файлом каскадной таблицы стилей (расширение CSS).

В следующей процедуре будет создана папка Images, а затем в нее будут добавлены изображения, которые используются в заголовке. Эти изображения находятся в системных папках ASP.NET 4 платформы .NET Framework.

Добавление изображений для заголовка

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

  2. Щелкните папку Images правой кнопкой мыши и выберите команду Добавить существующий элемент.

  3. Откройте следующую папку в диалоговом окне Добавление существующего элемента.

    <windows folder>\Microsoft.NET\Framework\<framework 4 folder>\ASP.NETWebAdminFiles\Images

  4. Выберите следующие файлы и нажмите кнопку ОК:

    • ASPdotNET_logo.jpg

    • HelpIcon_solid.gif

    • headerGRADIENT_Tall.gif

    ПримечаниеПримечание

    Тип файлов в списке может быть необходимо изменить на значение Все файлы (*.*).

В следующей процедуре к созданной с помощью шаблона главной странице будет добавлен заголовок. Строка заголовка будет содержать изображение логотипа на одной стороне, изображение кнопки справки — на другой, а также заголовок "Configuration System Browser" между ними.

Добавление строки заголовка

  1. Откройте файл Site.master и переключитесь в представление Источник.

  2. Удалите разметку между тегом <div class="header"> и соответствующим ему закрывающим тегом </div>. (Удаляются три элемента div со значениями класса "title", "loginDisplay" и "hideSkiplink").

  3. Вместо них вставьте следующую разметку между тегом <div class="header"> и соответствующим ему закрывающим тегом </div>.

    
    <div class="title-logo">
        <asp:Image ID="Image1" runat="server" 
            ImageUrl="~/Images/ASPdotNET_logo.jpg" 
            AlternateText="ASP.NET Logo">
        </asp:Image>
    </div>
    
    
    

    Этот код создает элемент div для левой стороны строки заголовка. Этот элемент div содержит элемент управления Image, отображающий логотип ASP.NET. Свойство AlternateText этого элемента управления имеет значение "ASP.NET Logo", которое описывает содержимое изображения для слабовидящих пользователей.

  4. Сразу после разметки, вставленной на предыдущем этапе, добавьте следующую разметку:

    
    <div class="title">
        <h1>Configuration System Browser</h1>
        &nbsp;&nbsp;
        <asp:HyperLink ID="HyperLink1" runat="server" 
            NavigateUrl="~/About.aspx" BorderStyle="None">
            <asp:Image ID="ImageButton2" runat="server" 
                ImageUrl="~/Images/HelpIcon_solid.gif" 
                AlternateText="Help Button">
            </asp:Image>
        </asp:HyperLink>
        &nbsp;&nbsp;
    </div>
    
    
    

    Этот код создает элемент div для правой стороны строки заголовка. Этот элемент div содержит элемент управления Image, расположенный внутри элемента HyperLink и позволяющий изображению выполнять функцию ссылки. На рисунке изображен вопросительный знак, а гиперссылка указывает на страницу About.aspx. Свойство AlternateText имеет значение "Help Button", описывающее функцию изображения. (Установка свойства AlternateText равным "Question mark" было бы более точным, но не настолько информативным для слабовидящих пользователей по сравнению с пояснением "Help Button").

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

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

  1. В обозревателе решений разверните папку Styles, а затем откройте файл Site.css.

  2. Перейдите к разделу файла после комментария PRIMARY LAYOUT ELEMENTS и удалите определения для класса header и элемента h1, содержащиеся в классе header.

  3. Вместо них вставьте следующие определения:

    
    .header
    {
        position: relative;
        margin: 0px;
        padding: 0px;
        background-image: url(../images/headerGRADIENT_Tall.gif);
        height: 75px;
    }
    
    .header h1
    {
        font-weight: 700;
        margin: 0px;
        padding: 0px 0px 0px 20px;
        color: #f9f9f9;
        border: none;
        line-height: 2em;
        font-size: 2em;
        display: inline;
    }
    
    
    

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

  4. Перейдите к разделу файла после комментария MISC и удалите определение класса заголовка.

  5. Вместо этого вставьте следующую разметку:

    
    .title
    {
        display: block;
        float: right;
        text-align: left;
        width: auto;
    }
    
    .title-logo
    {
        float: left;
        width: auto;
    }
    
    
    

    Эта разметка помещает логотип в левую часть строки заголовка, а текст — в правую часть.

  6. Кроме того, в разделе файла после комментария DEFAULTS можно добавить указанную ниже разметку под определением элемента body:

    
    img
    {
        border-style: none;
    }
    
    
    

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

Теперь можно проверить правильность внешнего вида строки заголовка и корректность отображения атрибутов alt.

Тестирование строки заголовка

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

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

    Строка заголовка браузера настройки
    ПримечаниеПримечание

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

  2. Просмотрите исходный код страницы в браузере.

  3. Ознакомьтесь с атрибутами alt, которые отображаются для элементов img.

    В следующем примере показаны атрибуты alt.

    <div class="header">
      <div class="title-logo">
        <img id="ctl00_Image1" src="Images/ASPdotNET_logo.jpg"
          alt="ASP.NET Logo" />
      </div>
      <div class="title">
        <h1>
          Configuration System Browser&nbsp;&nbsp;
          <a id="ctl00_HyperLink1" href="About.aspx" 
            style="display:inline-block;border-style:None;">
            <img id="ctl00_ImageButton2" src="Images/HelpIcon_solid.gif"
              alt="Help Button" />
           </a>
        </h1>
      </div>
    </div>
    
    ПримечаниеПримечание

    В некоторых браузерах текст атрибута alt отображается при наведении указателя мыши на изображения, как во всплывающих подсказках. При этом в соответствии со стандартом HTML для этой цели должен использоваться атрибут title, а не атрибут alt. Таким образом, Internet Explorer 8 не отображает всплывающие подсказки для атрибутов alt.

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

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

Добавление меню на главную страницу

  1. Откройте файл Site.master и переключитесь в представление Источник.

  2. Перед элементом maindiv вставьте следующее определение.

    
    <div class="leftCol">
        <asp:Menu id="Menu1" Runat="server" 
            SkipLinkText="Skip to main content">
            <Items>
              <asp:MenuItem Text="Home" 
                NavigateUrl="Default.aspx" />
              <asp:MenuItem Text="Preferences" 
                NavigateUrl="Preferences.aspx" />
              <asp:MenuItem Text="About" 
                NavigateUrl="About.aspx" />
            </Items>
          </asp:Menu>
    </div>
    
    
    

    Это определение создает элемент div, который хранит строку навигации с помощью элемента управления Menu. На следующем этапе будут добавлены CSS-определения, позволяющие расположить div в столбце на левой стороне станицы. Для расположения столбцов с помощью семантически корректного HTML-кода вместо таблиц используются элементы div и код CSS. Сведения о важности использования семантически корректного HTML-кода см. в разделе Специальные возможности Visual Studio и ASP.NET.

    Элемент управления Menu создаст ссылку навигации с возможностью пропуска, так как в нем установлено свойство SkipLinkText.

  3. Откройте файл Site.css или переключитесь на него.

  4. Перейдите к разделу файла после комментария PRIMARY LAYOUT ELEMENTS и удалите определения для классов main и leftCol.

  5. Вместо них вставьте следующие определения:

    
    .main
    {
        padding: 0px 12px;
        margin: 12px 8px 8px 8px;
        width: 750px;
        min-height: 420px;
        float: right;
    }
    
    .leftCol
    {
        padding: 6px 0px;
        margin: 12px 8px 8px 8px;
    	width: 150px;
        min-height: 200px;
        float: left;
    }
    
    
    

    Эти определения добавляют атрибуты float к классам leftCol и main. После этого меню будет отображаться с левой стороны, а основное содержимое — с правой. Эта разметка также сужает левый столбец и расширяет область основного содержимого.

  6. Также можно добавить в конец файла следующее определение.

    
    .level1
    {
        font-size: 1.2em;
        font-weight: bold;
    }
    
    
    

    Гиперссылки верхнего уровня в меню имеют класс CSS level1. Это определение улучшает видимость таких гиперссылок.

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

При создании шаблона веб-сайта с помощью шаблона Веб-сайт ASP.NET атрибут lang уже настроен, как показано в следующем примере:


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


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

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

Шаблон Visual Studio, использованный для создания веб-сайта, задает элемент title страницы Default.aspx равным значению "Home Page". В следующей процедуре элементу title будет присвоено более информативное значение.

Создание более информативного элемента

  1. Откройте файл Default.aspx и переключитесь в представление Исходный код.

  2. В директиве @ Page присвойте свойству Title значение "Configuration System Browser - Home Page", как показано в следующем примере:

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

    Данный заголовок определяет сайт и страницу на сайте.

Теперь можно проверить правильность отображения меню, корректность представления навигационной ссылки с возможностью пропуска, а также элемента title.

Тестирование меню

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

    Отобразится страница. Заголовок окна браузера содержит значение, указанное для элемента title, как показано на следующем рисунке:

    Домашняя страница с меню браузера настройки
    ПримечаниеПримечание

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

  2. Просмотрите исходный код страницы в браузере.

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

    <div class="leftCol">
      <a href="#ctl00_Menu1_SkipLink">
        <img alt="Skip to main content" 
          src="/ConfigBrowser/WebResource.axd?d=ukCdbG4RI1yiZdUKXe1i1w2
            &amp;t=633887827551396577" width="0" height="0"
            style="border-width:0px;" />
      </a>
      <div id="ctl00_Menu1">
        <ul class="level1">
          <li>
            <a class="level1" href="Default.aspx" target="">
              Home
            </a>
          </li>
          <li>
            <a class="level1" href="Preferences.aspx"
              target="">
              Preferences
            </a>
          </li>
          <li>
            <a class="level1" href="About.aspx" target="">
              About
            </a>
          </li>
        </ul>
      </div>
      <a id="ctl00_Menu1_SkipLink"></a>
    </div>
    

Элементы управления ASP.NET (например, DropDownList и CheckBox) можно настроить для автоматического создания обратной передачи при взаимодействии пользователя с элементом управления. Обратная передача обычно вызывает перезагрузку страницы в браузере, поэтому средство чтения с экрана начинает озвучивать ее содержимое заново. Это может запутывать или раздражать пользователей. Чтобы действия веб-страницы не были неожиданными для пользователя, разработчик может добавить пояснительный текст.

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

Между текстом предупреждения и флажками выводится изображение, используемое только в качестве разделителя. Так как оно является исключительно декоративным, оно не имеет атрибута alt. Средства чтения с экрана не обрабатывают изображения без атрибута alt.

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

  • Заголовок.

  • Элемент управления Literal, который выполняет роль местозаполнителя в списке.

  • Флажки.

  • Текст предупреждения для флажков.

Список и флажки будут размещены в отдельные столбцы с помощью правил CSS, а не таблиц, что делает этот HTML-код семантически корректным.

Добавление местозаполнителя списка и флажков

  1. Откройте файл Default.aspx и переключитесь в представление Исходный код.

  2. Удалите всю разметку в элементе Content с идентификатором BodyContent.

  3. Вместо этого добавьте следующую разметку:

    
    <h2>
        <asp:Label ID="HeadingLabel" runat="server" 
            Text="Section Groups in Machine.config">
        </asp:Label>
    </h2> 
    
    
    

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

  4. Добавьте следующую разметку непосредственно под заголовком:

    
    <div class="listColumn">
        <asp:Literal ID="SectionGroupsLiteral" runat="server" />
    </div>
    <div class="checkboxColumn">
        <p>
            Click the checkboxes to refresh the screen with the selected 
            options.
        </p>
        <asp:Image ID="Image1" 
            runat="server"
            ImageUrl="~/Images/headerGRADIENT_Tall.gif"
            GenerateEmptyAlternateText="false" Width="100%" Height="4px">
        </asp:Image>
        <asp:CheckBoxList runat="server" AutoPostBack="True" 
            RepeatLayout="UnorderedList" ID="OptionsCheckBoxList">
            <asp:ListItem>Show Sections</asp:ListItem>
            <asp:ListItem>Show Contained Section Groups</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    
    
    

    Разметка создает два столбца с помощью элементов div. Ниже в этом руководстве будет добавлен код, создающий список в левом столбце путем задания свойства Text элемента управления Literal.

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

    Свойство AutoPostBack элемента управления CheckBoxList имеет значение true, что позволяет странице немедленно реагировать на изменение значения флажка. Свойство RepeatLayout имеет значение UnorderedList, чтобы элемент управления создавал флажки внутри элемента ul. Это более корректно с точки зрения семантики, нежели использование элемента table или span.

  5. Откройте файл Site.css или переключитесь на него.

  6. Под определениями классов main и leftCol, измененных в предыдущей процедуре, вставьте следующие определения:

    
    .listColumn
    {
    	font-size: 1.4em;
    	width: 475px;
    	float: left;
    }
    
    .checkboxColumn
    {
    	font-size: 1.1em;
    	width: 225px;
    	float: left;
    }
    
    .checkboxColumn li
    {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }
    
    .checkboxColumn ul
    {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }
    
    
    

    Эти определения CSS помещают список групп разделов в левый столбец, а флажки — в правый. Они также удаляют изображения маркеров, которые в противном случае появились бы рядом с флажками, так как эти изображения создаются в элементе ul (неупорядоченный список).

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

Добавление кода, создающего список

  1. Перейдите в обозреватель решений, разверните узел файла Default.aspx и откройте файл Default.aspx.cs или Default.aspx.vb.

  2. После операторов using (Imports в Visual Basic) добавьте следующий код:

    
    using System.Configuration;
    using System.Web.Configuration;
    using System.Text;
    
    
    

    Эти операторы using или Imports необходимы для классов, которые будут использоваться на следующих шагах.

  3. Добавьте в метод Page_Load следующий код:

    
    if (Session["Heading"] != null)
    {
        HeadingLabel.Text = HeadingLabel.Text.Replace(
            "Machine.config", Session["Heading"].ToString());
    }
    
    string virtualPath = "";
    string site = "";
    string locationSubPath = "";
    string server = "";
    
    if (Session["Path"] != null)
    {
        virtualPath = Session["Path"].ToString();
    }
    
    if (Session["Site"] != null)
    {
        site = Session["Site"].ToString();
    }
    
    if (Session["SubPath"] != null)
    {
        locationSubPath = Session["SubPath"].ToString();
    }
    
    if (Session["Server"] != null)
    {
        site = Session["Server"].ToString();
    }
    
    
    

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

  4. В методе Page_Load вставьте следующий код под кодом, вставленным на предыдущем шаге:

    
            Configuration config =
                WebConfigurationManager.OpenWebConfiguration
                (virtualPath, site, locationSubPath, server);
    
            StringBuilder listString = new StringBuilder("<ul>");
            foreach (ConfigurationSectionGroup sectionGroup
                in config.SectionGroups)
            {
                AddSectionGroupInfo(sectionGroup, listString);
            }
            listString.Append("</ul>");
    
            SectionGroupsLiteral.Text = listString.ToString();
    
    
    
    

    Этот код получает сведения о конфигурации из файла machine.config и создает строку, которая содержит HTML-код, предоставляющий эти сведения. Код состоит из элементов ul и li. Данные для списке извлекаются из объекта Configuration с помощью метода AddSectionGroupInfo, который добавляется на следующем шаге.

  5. Вставьте следующий метод после метода Page_Load:

    
    public void AddSectionGroupInfo(
        ConfigurationSectionGroup sectionGroup, StringBuilder listString)
    {
        listString.Append(
            "<li><a href='SectionGroup.aspx?SectionGroup=" +
            sectionGroup.SectionGroupName + "'>" +
            sectionGroup.Name + "</a></li>");
    
        listString.Append("<ul>");
        if (OptionsCheckBoxList.Items[0].Selected)
        {
            foreach (ConfigurationSection section
                in sectionGroup.Sections)
            {
                listString.Append(
                    "<li>" + section.SectionInformation.Name + "</li>");
            }
        }
        if (OptionsCheckBoxList.Items[1].Selected)
        {
            foreach (ConfigurationSectionGroup s
                in sectionGroup.SectionGroups)
            {
                AddSectionGroupInfo(s, listString);
            }
        }
        listString.Append("</ul>");
    }
    
    
    

    Этот метод вставляет сведения о группе разделов в строку и размещает ее в элементах HTML. Метод вызывается методом Page_Load по одному разу для каждой группы разделов, содержащейся в файле machine.config.

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

    Если группы разделов содержат разделы, а флажок Show Sections установлен, то добавляются имена разделов. Если группа разделов содержит группы разделов, а флажок Show Section Groups установлен, то метод рекурсивно вызывает себя для каждой группы разделов.

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

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

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

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

    Домашняя страница браузера настройки
  2. Просмотрите исходный код страницы в браузере.

    Обратите внимание на то, что декоративное изображение не имеет элемента alt, как показано в следующем примере.

    <img id="ctl00_MainContent_Image1"
      src="Images/headerGRADIENT_Tall.gif"
      style="height:4px;width:100%;" />
    
  3. Установите флажок Show Contained Section Groups на странице.

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

    Расширенная домашняя страница браузера настройки
  4. Установите флажок Show Sections.

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

    Домашняя страница браузера системы настройки

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

Показ: