Сдам Сам

ПОЛЕЗНОЕ


КАТЕГОРИИ







Интерпретация результатов





В идеальном мире можно было бы протестировать все возможные комбинации и получить ответную реакцию от каждого. Но в реальности время и деньги ограничивают тестирование пользователей. Поэтому ответная реакция может быть обоюдоострым мечом. Хотя она может многому научить, существует реальная опасность придания слишком большого веса мнению одного человека, которое может не отражать мнение большей целевой аудитории. Например, некоторые пользователи считывателей экрана стремятся найти материалы, предназначенные для слепых пользователей; другие же хотят узнать все о сайте, что видят их зрячие друзья и коллеги. Именно здесь на помощь приходят такие стандарты как WCAG. Следуя таким рекомендациям можно увеличить свои шансы получить основы доступности даже для групп пользователей, для которых тестирование было невозможно выполнить. Когда вы видите проблему, проанализируйте ее причины. Например, ваш сайт общего доступа к видео включает страницу, показывающую популярные видео в виде таблицы данных, со столбцами содержащими рекламный кадр, заглавие, дату загрузки на сайт, дату последнего воспроизведения, и общую оценку, и организованные в группы строк по категории видео. При тестировании пользователь считывателя экрана имеет проблемы с использованием таблицы данных. Это может отражать:

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

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



· Проблема с агентом пользователя. Например, Safari представляет таблицы данных в модели доступности Apple как последовательность полей компоновки, а не как множество отношений данных. Здесь подходящими действиями будет сообщение об ошибке в агенте пользователя поставщику или разработчикам, поиск методов, которые работают в агенте пользователя, или отметка об ограничении в документации и предложение альтернативных агентов пользователя, которые работают с вашим Web -сайтом.

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

 

Сообщение о результатах тестирования доступности

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

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

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

Как воспроизвести: Откройте страницу в браузере и попытайтесь добраться до подпунктов меню с помощью только клавиатуры.

Объяснение: Навигация Web должна быть независимой от устройства, чтобы пользователи, использующие устройства отличные от мыши — такие как слепые пользователи или пользователи с моторными недостатками — могли получить доступ к контенту и функциям. В настоящее время такие пользователи не могут получить доступ к позициям в подменю, а зрячие пользователи использующие клавиатуру могут быть поставлены в тупик, когда индикатор фокуса исчезает.

Последствия для соответствия: Взаимодействие с клавиатурой является требованием соответствия WCAG 1.0 и WCAG 2.0 Level "A" (см. WCAG 1.0 Guideline 9 и WCAG 2.0 Guideline 2.1).

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

Заключение

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

Контрольные вопросы

· Попробуйте поперемещаться по сложному сайту на свой выбор без использования мыши. С какими трудностями вы столкнулись? Как разработчики сайта могут вам помочь?

· Отключите CSS и пользуйтесь обычным образом Интернет в течение дня. С какими проблемами вы столкнулись?

6. Отключите JavaScript и пользуйтесь обычным образом Интернет в течение дня. С какими проблемами вы столкнулись?

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

Лекция 27: Основы CSS

Аннотация: Лекция посвящена основам технологии каскадных таблиц стилей (CSS).

Введение

В предыдущих руководствах этого курса мы говорили о контенте Web-сайтов и о том, как структурировать этот контент с помощью HTML. Это очень важно, так как означает, что мы задаем для документов значение и структуру, позволяющие легко объединяться с другими технологиями. Наиболее важной обсуждаемой далее технологией Web является CSS (Каскадные таблицы стилей), которая используется для оформления HTML и размещения его на Web-странице. В этой лекции мы познакомимся с CSS — что это такое, как применяется к HTML, и как выглядит базовый синтаксис CSS. Лекция имеет следующую структуру:

 

Что такое CSS?

Определение правил стилей

Комментарии CSS

Селекторы объединения в группу

Дополнительные селекторы CSS

Универсальные селекторы

Селекторы атрибутов элементов

Селекторы элементов потомков

Селекторы нижележащих элементов

Селекторы смежных одноуровневых элементов

Псевдо-классы

Псевдо-элементы

Сокращенная запись CSS

Сравнение индивидуальных и сокращенных значений

Задание менее четырех значений для сокращенного свойства

Выбор между одиночным свойством и сокращенным значением

Справочник сокращений

Применение CSS к HTML

Строковые стили

Вложенные стили

Внешние таблицы стилей

Импорт таблиц стилей

Заключение

Контрольные вопросы

Что такое CSS?

В то время как HTML структурирует документ и говорит браузеру, какую функцию имеет определенный элемент (будет ли это ссылка на другую страницу или заголовок), CSS выдает браузеру инструкции о том, как вывести определенный элемент — оформление, размещение пробелов и позиционирование. Если HTML является балками и кирпичами, которые составляют структуру дома, CSS является штукатуркой и покраской для его отделки.

Это реализуется с помощью системы правил, о точном синтаксисе которых вы узнаете немного позже. Эти правила определяют, какие элементы HTML должны быть дополнительно оформлены, и в каждом правиле перечислятся свойства (например, цвет, размер, шрифт и т.д.) этих элементов HTML, которыми они будут манипулировать, и какие значения будут для них заданы. Например, правило CSS может говорить: "я хочу найти все элементы h2 и сделать их зелеными", или "я хочу найти все параграфы с именем класса author-name, сделать их фон красным, увеличить размер шрифта в них в два раза по сравнению с обычным текстом параграфа, и создать пробел в 10 пикселей вокруг каждого".

CSS не является языком программирования, таким как JavaScript, и не является языком разметки, таким как HTML — в действительности нет ничего, с чем его можно было бы сравнить. Технологии, которые определяли интерфейсы до развития Web, всегда смешивали представление и структуру. Это не слишком разумно делать в такой изменчивой среде, какой является Web, именно поэтому и был придуман CSS.

 

Определение правил стилей

Без дальнейших рассуждений давайте посмотрим на пример кода CSS, а затем проанализируем его:

 

селектор {

свойство1:значение;

свойство2:значение;

свойство3:значение;

}

В данном случае можно видеть следующие детали:

 

Селектор определяет элементы HTML, к которым будет применяться правило, определяемые реальным названием элемента, например, body, или другими средствами, такими как значения атрибута class - мы вернемся к этому позже.

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

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

Значения являются теми значениями, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства, например, свойства, которые влияют на цвет, могут принимать шестнадцатеричные значения цвета, такие как #336699, значения RGB, такие как rgb(12,134,22), или названия цветов, такие как red, green или blue.

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

 

Теперь давайте посмотрим на конкретный пример:

 

p {

margin:5px;

font-family:arial;

color:blue;

}

Это правило выбирает элемент HTML p — для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, в этом случае более конкретные правила будут переопределять это правило. Это правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 5 пикселей, шрифт задается как Arial, а цвет текста задается как blue.

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

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

Комментарии CSS

Прежде всего необходимо узнать, как создавать в CSS комментарии. Комментарии добавляют, помещая их между символами /* и */. Комментарии могут охватывать несколько строк, и браузер будет игнорировать эти строки:

 

/* Это базовые селекторы элементов */

 

селектор {

свойство1:значение;

свойство2:значение;

свойство3:значение;

}

Комментарии можно добавлять либо между правилами, либо внутри блока свойств — например, в следующем коде CSS второе и третье свойства помещены между ограничителями комментария, так что они будут игнорироваться браузером. Это будет полезно, когда вы проверяете, как влияют определенные части вашего CSS на Web-страницу; просто закомментируйте их, сохраните код CSS, и перезагрузите страницу HTML.

 

селектор {

свойство1:значение;

/*

свойство2:значение;

свойство3:значение;

*/

}

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

 

Можно, конечно, при желании ограничить комментарий одной строкой, но все равно потребуется использовать открывающий и закрывающий ограничители комментария ( /* и */ ).

 

Селекторы объединения в группу

Можно также объеднить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h1 и p, тогда можно было бы написать следующий CSS:

 

h1 {color:red}

p {color:red}

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

 

h1, p {color:red}

Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Тремя наиболее общими селекторами, которые встречаются чаще всего, являются следующие:

 

p {}: селектор элемента

соответствует всем элементам на странице с указанным названием (элементам p, в приведенном выше случае)

 

.example{}: селектор класса

соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать <p class="example">, <li class="example"> или <div class="example">, или любому другому элементу со значением class равным example. Отметим, что селекторы класса не проверяют никакое конкретное название элемента.

 

#example{}: селектор id

соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соотвествовать <p id="example">, <li id="example"> или <div id="example">, или любому другому элементу со значением id равным example. Отметим, что селекторы ID не проверяют название никакого элемента, и можно иметь только один селектор для каждого ID в документе HTML - они являются уникальными для каждой страницы.

 

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

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Selectors Example</title>

<link rel="stylesheet" href="selectors.css" type="text/css" media="screen">

</head>

<body>

<h1>CSS Basics Example</h1>

 

<ul id="menu">

<li>Item</li>

<li class="warning">Item</li>

<li>Item</li>

<li>Item</li>

<li>Item</li>

</ul>

 

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p class="warning">Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

 

<ul>

<li>Item</li>

<li>Item</li>

<li>Item</li>

<li id="extra">Item</li>

<li>Item</li>

</ul>

</body>

</html>

#menu{

border-style:solid;

border-color:rgb(0,0,0);

border-width:1px;

}

.warning{

background:red;

color:white;

}

li{

font-family:arial,sans-serif;

}

Можно соединять несколько селекторов, чтобы определить еще более конкретные правила:

 

p.warning{}

соответствует всем параграфам со значением class равным warning

 

div#example{}

соответствует элементу со значением атрибута id равным example, но только когда он является div

 

p.info, li.highlight{}

соответствует параграфам со значением class равным info и элементам списка со значением class равным highlight

 

В следующем примере это используется для различия между разными стилями предупреждений:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Specific Selectors Example</title>

<link rel="stylesheet" href="specificselectors.css" type="text/css" media="screen">

</head>

<body>

<h1>CSS Basics Example</h1>

 

<ul id="menu">

<li>Item</li>

<li class="warning">Item</li>

<li>Item</li>

<li>Item</li>

<li>Item</li>

</ul>

 

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p class="warning">Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

<p>Paragraph</p>

 

<ul>

<li>Item</li>

<li>Item</li>

<li>Item</li>

<li id="extra">Item</li>

<li>Item</li>

</ul>

</body>

</html>

#menu{

border-style:solid;

border-color:rgb(0,0,0);

border-width:1px;

}

.warning{

background:red;

color:white;

}

p.warning{

background:#fcc;

color:red;

}

li{

font-family:arial,sans-serif;

}

li#extra{

padding:10px;

}

 









Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Конфликты в семейной жизни. Как это изменить? Редкий брак и взаимоотношения существуют без конфликтов и напряженности. Через это проходят все...

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Живите по правилу: МАЛО ЛИ ЧТО НА СВЕТЕ СУЩЕСТВУЕТ? Я неслучайно подчеркиваю, что место в голове ограничено, а информации вокруг много, и что ваше право...





Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:


©2015- 2021 zdamsam.ru Размещенные материалы защищены законодательством РФ.