Ol css list style: list-style-type | htmlbook.ru

Средства чтения с экрана, элементы списка и стиль списка: нет

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

Но будет ли? Короткий ответ — нет, не всегда.

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

Я создал демонстрационную страницу элемента списка, которая содержит четыре списка — два упорядоченных ( ol ) и два неупорядоченных (

ul ) списков. Я использовал CSS для удаления маркеров списка из одного списка каждого типа, установив для свойства list-style-type значение none (используете ли вы list-style:none или list-style-type: нет и объявляете ли вы его для ol , ul или li не имеет значения). Многие ожидают, что средства чтения с экрана по-прежнему будут объявлять элементы списка, особенно для упорядоченных списков, независимо от того, какой CSS к ним применяется. Это не всегда так.

В моем тестировании Voice Over и Orca перестают объявлять элементы списка для нумерованных списков, когда применяется list-style:none . NVDA тоже, но только когда вы используете его с Firefox. Если вы используете NVDA с IE, элементы списка объявляются, как и ожидалось.

Сценарий аналогичен для неупорядоченных списков, но некоторые программы чтения с экрана вообще не объявляют элементы списка (т. е. произносят «маркер» или подобное),

list-style:none или нет.

Вот краткий обзор проведенных мной тестов:

Уведомление программы чтения с экрана о маркерах элементов списка
Программа чтения с экрана ол ол , без маркеров ул ул , без маркеров
NVDA 2011.2 (IE9) Да Да Да Да
NVDA 2011.2 (FF6) Да Да
Косатка Да Да
VoiceOver Да Да

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

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

list-style:none был проигнорирован или, по крайней мере, был настроен на игнорирование.

Какой бы ни была причина, разработчику наверняка не помешает знать, что элементы списка часто не объявляются как таковые средствами чтения с экрана.

Опубликовано 14 сентября 2011 г. в Доступность, CSS

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

новый код — списки HTML

Списки HTML — это именно то, что нужно: списки вещей. В HTML существует три вида списков: упорядоченные, неупорядоченные и описательные списки.

Упорядоченные списки

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

Например, если вы пишете руководство по обезвреживанию атомной бомбы, вы не будете отображать инструкции в виде списка пунктов; ряд перечисленных шагов был бы гораздо более уместным. ( «1 . Откройте люк. 2 . Обрежьте синий провод» и т. д.).

Нумерованные списки заключены в элемент

    . Каждый элемент в списке отмечен тегом
  1. («элемент списка»):

     

    Три моих самых любимых фильма:

    <ол>
  2. Звездные войны
  3. Идентификация Борна
  4. Горец

По умолчанию браузер отображает эти элементы как 1, 2, 3 и т. д.; изменение порядка элементов списка изменит порядок их отображения на странице.

Вы можете изменить метки для элементов списка, используя атрибут type в элементе ol . Атрибут типа имеет пять возможных буквенных значений, каждое из которых имеет альтернативное ключевое слово:

Буква Ключевое слово Результат
1 десятичный 1, 2, 3
и
нижний альфа-канал а, б, в
А верхний альфа-канал А, Б, С
и нижний латинский я, ii, iii
я верхний латинский I, II, III

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

  

Условия и положения

  1. Право на отказ. Клиент должен…

Вы обнаружите, что можете вносить те же изменения отображения в упорядоченный список с еще большими вариациями, используя свойство list-style-type в CSS. Так почему же эта функция доступна и в HTML? Потому что, если содержимое вашего тела относится к элементам списка с определенными идентификаторами (например, см. элемент A), то

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

Кроме того, можно перезапустить и изменить упорядоченные списки с помощью атрибутов, а также создать списки с нумерацией точек (1.1, 1.2 и т. д.) с помощью CSS, среди прочих возможностей.

Неупорядоченные списки

«Неупорядоченный» в контексте HTML не означает, что элементы списка расположены на странице случайным образом: это подразумевает, что не имеет значения, в каком порядке зритель читает, выполняет или понимает элементы . Хорошим примером является список покупок: обычно не имеет значения, в каком порядке выбирается товар из списка покупок.

Ненумерованный список начинается с тега

    . Элементы, вложенные в этот тег, также используют
  • вокруг них:

     

    Мои увлечения включают:

    <ул>
  • Дайвинг
  • Деревообработка
  • Написание
  • Фильмы

Опять же, изменение элементов списка в вашем HTML приведет к переупорядочению неупорядоченного списка.

По умолчанию элементы ненумерованного списка отображаются как «маркированные точки». Отображение элементов неупорядоченного списка можно настроить с помощью CSS.

Исторически неупорядоченные списки использовались как семантический способ организации навигации по сайту:

  

Но сегодня у нас есть элемент nav , который обычно должен использоваться вместо

.

 <навигация>
     html">Главная
    Товары
 

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

Списки описаний

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

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

термином , а дальнейшие детали и объяснение цели книги могут быть описанием .

Минимальный список описания состоит из трех тегов .

начинает список, а
определяет термин. Наконец, само описание заключено в тег
. Например:

 <дл>
    
Киви
Маленькая нелетающая птица, обитающая в Новой Зеландии.

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

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

 
Киви
<дд> <ол>
  • Небольшая нелетающая птица из Новой Зеландии.
  • Человек из Новой Зеландии
  • В качестве альтернативы у вас может быть несколько элементов dd , связанных с dt :

     
    Призрак
    Быть терроризированным призраками
    Место, где животное кормится
    Ура
    Долгая глухая вокализация

    В HTML 5. 2 элементы dt и связанные с ними элементы dd могут быть сгруппированы вместе внутри раздел :

     <дл>
        <дел>
            
    Призрак
    Быть терроризированным призраками
    Место, где животное кормится
    <дел>
    Ура
    Долгая глухая вокализация

    Вложенные списки

    Вложенные списки не являются списками четвертого типа; это всего лишь способ объединения элементов списка. Самое важное, что нужно помнить, это то, что вложенные списки идут внутри li или dd элементов, и что эти элементы закрываются после новый список завершен. Например:

     

    Что нужно сделать сегодня:

    <ул>
  • Учить класс <ол>
  • Веб-разработка
  • VR & дополненная реальность
  • 3D-анимация
  • Отправлять электронные письма
  • По умолчанию браузер делает отступ для вложенных элементов списка.