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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
   Три моих самых любимых фильма:
   <ол>
       
   Звездные войны
       
   Идентификация Борна
       
   Горец
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

    

        Главная
    
    

        Товары
    
 

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

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

 

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

 

    
Призрак
        
Быть терроризированным призраками
        
Место, где животное кормится

    
    
Ура
        
Долгая глухая вокализация
 

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