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

Обновлен: Ноябрь 2007

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

На веб-узле Microsoft Accessibility можно найти следующие рекомендации по разработке веб-страниц с поддержкой специальных возможностей:

• ввод понятного альтернативного текста для всех рисунков;

• правильное использование гиперкарт;

• ввод понятного текста ссылок;

• разработка удобных переходов с помощью клавиатуры;

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

• правильное использование таблиц и их альтернатив;

• поддержка возможностей форматирования для программ чтения текста;

• отказ от обязательного использования таблиц стилей;

• использование форматов файлов, поддерживаемых программами чтения;

• отказ от использования бегущих строк;

• использование заголовков для большинства объектов.

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

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

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

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

• средство веб-разработки Microsoft Visual Web Developer;

• платформа .NET Framework.

Создание веб-узла и страницы

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

• элемент управления Image, определяющий логотип курса;

• элемент управления Panel, содержащий элементы класса HyperLink, которые определяют лекции;

• элемент управления GridView, на котором отображается таблица расписания курса;

• элемент управления класса HyperLink, содержащий ссылку на страницу, на которой описывается учебник по курсу.

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

В следующей процедуре создается веб-узел на базе файловой системы и добавляется страница Lecture.aspx.

Создание веб-узла на базе файловой системы

1. Откройте Visual Web Developer.

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

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

3. В разделе Установленные шаблоны Visual Studio выберите Веб-узел ASP.NET.

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

   Например, введите имя папки C:\WebSites.

5. В списке Язык выберите язык программирования, с которым вы предпочитаете работать.

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

   Visual Web Developer создает папку и новую страницу с именем Default.aspx.

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

8. В разделе Установленные шаблоны Visual Studio выберите пункт Форма Web Forms.

9. В поле Имя введите Lecture.aspx и нажмите кнопку ОК.

Создание отображаемых данных

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

Создание XML-файла данных

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

   Примечание.
   Убедитесь, что XML-файл добавлен в папку App_Data.

2. В диалоговом окне Добавление нового элемента в разделе Установленные шаблоны Visual Studio выберите пункт XML-файл.

3. В поле Имя введите Syllabus.

4. Нажмите кнопку Добавить.

5. Замените содержимое XML-файла следующими данными.

   <?xml version="1.0" encoding="utf-8" ?>
   <entries>
       <lecture 
          date="04/02/2005" 
          topic="Integers and Rational Numbers" />
       <lecture 
           date="04/03/2005"
           topic="Equations and Polynomials" />
       <lecture
           date="04/04/2005"
           topic="Roots and Irrational Numbers" />
   </entries>
   

6. Сохраните XML-файл и закройте его.

Добавление элементов управления на форму

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

• Для каждого изображения, содержащего информацию для пользователя, следует задать альтернативное текстовое описание.

• Для ввода имен столбцов и строк таблиц следует использовать атрибут Title. Кроме того, убедитесь, что данные в таблице упорядочены для чтения слева направо и сверху вниз.

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

• Вводите понятный текст ссылок. Например, в тексте "Щелкните здесь, чтобы открыть материалы урока 1" часть "материалы урока 1" является более информативной, чем "Щелкните здесь".

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

• Для большинства объектов используйте атрибут Title.

Добавление на страницу элементов управления специальными возможностями

1. Переключитесь в представление конструирования.

2. В окне "Свойства" задайте следующие свойства объекта DOCUMENT:

   • для свойства Title установите значение Курс алгебры;

   • для свойства BgColor установите значение Background.

3. В верхней части страницы введите Алгебра. Повторение пройденного.

4. Выделите текст, который необходимо отформатировать, затем в панели инструментов Формат в крайнем левом списке выберите Заголовок 1.

5. Из группы Стандартные в Панели элементов перетащите следующие элементы управления на страницу и задайте их свойства.

   Примечание.
   В данном примере выбор режима разметки страницы не имеет значения.

   Элемент управления	Свойство	Значение
   Image	AlternateText	Алгебраические формулы
   	ImageUrl	URL-адрес изображения.
   	TabIndex	0
   Panel	ID	Lectures
   	TabIndex	0
   HyperLink (добавляется на панель Lectures)	ID	Lecture1
   	Text	Материалы урока 1
   	AccessKey	1
   	href	~/Lecture.aspx
   	TabIndex	1
   HyperLink (добавляется на панель Lectures)	ID	Lecture2
   	Text	Материалы урока 2
   	AccessKey	2
   	href	~/Lecture.aspx
   	TabIndex	2
   HyperLink (добавляется на панель Lectures)	ID	Lecture3
   	Text	Материалы урока 3
   	AccessKey	3
   	href	~/Lecture.aspx
   	TabIndex	3
   Label	ID	TextbookLabel
   	Text	Учебник:
   	AssociatedControlID	TextbookLink
   Hyperlink	ID	TextbookLink
   	Text	Алгебра. Повторение пройденного. Лектор В. Егоров
   	href	~/Lecture.aspx
   	TabIndex	4

6. Выберите элемент управления Panel и присвойте его свойству GroupingText значение Материалы урока.

7. Перейдите в представление Исходный код.

8. Щелкните внутри элемента HTML, затем в окне "Свойства" установите для свойства lang значение en, определяющее содержимое страницы на английском языке.

   После этого тег должен выглядеть следующим образом:

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

Добавление элемента управления GridView

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

Добавление элемента управления GridView и привязка его к XML-файлу

1. Перейдите в представление конструирования.

2. Из группы Данные в Панели элементов перетащите на страницу элемент управления XmlDataSource.

   Расположение элемента управления не имеет значения.

   Элемент управления XmlDataSource используется для считывания данных из XML-файла и предоставления их элементам управления на странице.

3. Щелкните правой кнопкой мыши элемент управления XmlDataSource, выберите команду Показать смарт-тег, затем в меню Команды XmlDataSource выберите пункт Настроить источник данных.

   Открывается диалоговое окно Настройка источника данных.

4. В поле Файл данных введите ~/App_Data/Syllabus.xml и нажмите кнопку ОК.

5. Из группы ДанныеПанели элементов добавьте на страницу элемент управления GridView.

6. В окне "Свойства" задайте свойства, как показано в следующей таблице.

   Свойство	Параметр
   ID	SyllabusGrid
   DataSourceId	XmlDataSource1
   TabIndex	9

Добавление заголовков к ячейкам элемента управления GridView

В соответствии с требованиями к специальным возможностям столбцы и ячейки таблицы HTML должны содержать заголовки. Элемент управления GridView используется для отображения таблицы HTML во время выполнения. Необходимо убедиться, что столбцы, отображаемые этим элементом управления, содержат заголовки. Для этого следует написать код обработки события RowCreated. В обработчике событий следует добавить атрибуты Title к ячейкам таблицы, создаваемым с помощью элемента управления GridView.

Добавление заголовков к столбцам элемента управления GridView

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

2. Добавьте следующий код.

   Protected Sub SyllabusGrid_RowCreated _
           (ByVal sender As Object, _
           ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
           Handles SyllabusGrid.RowCreated
           Dim cells As TableCellCollection = e.Row.Cells
           If e.Row.RowType = DataControlRowType.Header Then
               cells(0).Attributes("title") = "Date"
               cells(1).Attributes("title") = "Topic"
           ElseIf e.Row.RowType = DataControlRowType.DataRow Then
               cells(0).Attributes("title") = _
                   DataBinder.Eval(e.Row.DataItem, "date").ToString()
               cells(1).Attributes("title") = _
                   DataBinder.Eval(e.Row.DataItem, "topic").ToString()
           End If
       End Sub
   

   protected void SyllabusGrid_RowCreated
           (object sender, 
           System.Web.UI.WebControls.GridViewRowEventArgs e)
       {
           TableCellCollection cells = e.Row.Cells;
           if (e.Row.RowType == DataControlRowType.Header)
           {
               cells[0].Attributes["title"] = "Date";
               cells[1].Attributes["title"] = "Topic";
           }
           else if (e.Row.RowType == DataControlRowType.DataRow)
           {
               cells[0].Attributes["title"] = 
                   DataBinder.Eval(e.Row.DataItem, "date").ToString();
               cells[1].Attributes["title"] = 
                   DataBinder.Eval(e.Row.DataItem, "topic").ToString();
           }
       }
   

3. В представлении конструирования выберите элемент управления GridView, затем в окне Свойства установите для события RowCreated значение SyllabusGrid_RowCreated.

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

Тестирование приложения

В Visual Web Developer предусмотрено средство, предназначенное для просмотра и проверки веб-страницы на соответствие требованиям, предъявляемым к специальным возможностям. Это средство обеспечивает просмотр HTML-кода страницы во время разработки. Также можно просмотреть выходные данные страницы, что позволяет проверить соответствие макета элементов управления ASP.NET требованиям, предъявляемым к специальным возможностям.

Проверка приложения на соответствие требованиям, предъявляемым к специальным возможностям

1. Убедитесь, что страница открыта в представлении конструирования.

2. В меню Сервис выберите пункт Проверить специальные возможности.

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

   Примечание.
   В Microsoft Visual Web Developer, экспресс-выпуск, средство проверки специальных возможностей недоступно.

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

   В Visual Web Developer выполняется проверка страницы и отображается отчет об обнаруженных ошибках. Обратите внимание, что в отчете о проверке специальных возможностей не представлены сведения о соответствии стандартам таблицы, отображаемой элементом управления GridView.

4. Нажмите клавиши CTRL+F5 для запуска страницы.

5. Проверьте клавиши доступа.

   В данном приложении для элементов управления HyperLink определены клавиши доступа ALT+1, ALT+2 и ALT+3. Клавиши доступа используются для перемещения к ссылкам. Нажмите клавишу ВВОД для перехода по соответствующей ссылке.

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

   1. В Microsoft Internet Explorer 6.0 в меню Сервис выберите пункт Свойства обозревателя.

   2. На вкладке Дополнительно в разделе Мультимедиа отключите отображение рисунков.

   Чтобы просмотреть альтернативный текст, обновите страницу.

7. Отключите воспроизведение звука, чтобы убедиться, что не потеряны важные инструкции. Чтобы сделать это, выполните следующие шаги:

   1. В Microsoft Internet Explorer 6.0 в меню Сервис выберите пункт Свойства обозревателя.

   2. На вкладке Дополнительно в разделе Мультимедиа отключите воспроизведение звуков.

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

   1. В Microsoft Internet Explorer 6.0 в меню Сервис выберите пункт Свойства обозревателя.

   2. На вкладке Общие нажмите кнопку Оформление и установите параметры таблиц стилей.

9. Установите параметр Высокая контрастность Microsoft Windows и убедитесь, что страница по-прежнему удобна для чтения. Чтобы проверить правильность отображения страницы при использовании параметра Высокая контрастность, выполните следующие шаги:

   1. В Windows нажмите кнопку Пуск, выберите Панель управления и откройте группу Специальные возможности.

   2. На вкладке Экран установите флажок Высокая контрастность.

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

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

    1. В Windows нажмите кнопку Пуск, выберите Панель управления и откройте группу Экран.

    2. На вкладке Оформление в списке Размер шрифта выберите значение Огромный.

11. Измените размер окна обозревателя и убедитесь, что страница по-прежнему удобна для чтения.

12. Выполните переходы по странице с помощью клавиатуры, чтобы проверить правильность заданной последовательности переходов. Убедитесь, что с помощью клавиши TAB можно перейти по всем гиперссылкам, а с помощью клавиш CTRL+TAB — по всем областям или разделам.

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

См. также

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

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

Элементы управления ASP.NET и специальные возможности

Общие сведения об угрозах безопасности веб-приложений

Другие ресурсы

Web Content Accessibility Guidelines 1.0 (W3C)