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

Если вы реализуете пользовательский символ неупорядоченного списка, программа чтения с экрана (или, по крайней мере, VoiceOver) объявит имя этого символа, которое вы использовали до того, как оно объявит каждый элемент списка. Если вместо этого вы не изменили символ пули, VoiceOver объявит «bullet».Изменить ярлык для персонализированного символа неупорядоченного списка для программ чтения с экрана

Как вы можете изменить считыватели экрана метки для этого символа, например, вернуть его к «bullet»?

ul li:before { 
    content: '○'; 
} 

<ul> 
    <li>You are a beautiful human being</li> 
</ul>

VoiceOver объявляет о «белом круге, который вы прекрасный человек».

источник

2014-12-23 Joey

использование list-style: круг; для ul li –

@GoldPearl Что делать, если вам нужен другой сумасшедший пользовательский символ юникода, как звезда или зонтик? – Joey

-1

ul.a { 
 
    list-style-type: circle; 
 
} 
 

 
ul.b { 
 
    list-style-type: square; 
 
} 
 

 
ol.c { 
 
    list-style-type: upper-roman; 
 
} 
 

 
ol.d { 
 
    list-style-type: lower-alpha; 
 
}

<p>Example of unordered lists:</p> 
 
<ul class="a"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul> 
 

 
<ul class="b"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ul> 
 

 
<p>Example of ordered lists:</p> 
 
<ol class="c"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ol> 
 

 
<ol class="d"> 
 
    <li>Coffee</li> 
 
    <li>Tea</li> 
 
    <li>Coca Cola</li> 
 
</ol>

источник

2014-12-23 08:49:59

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

<!doctype html> 
<html> 
    <head> 
     <title>Bullet list examples</title> 
     <style> 
     ul { 
      list-style-type: none; 
     } 
     ul.justcontent li:before { 
      content: 'x'; 
     } 
     ul.withspan li:before { 
      content: ''; 
     } 
     ul.withspan li span:before { 
      content: 'x'; 
     } 
     </style> 
    </head> 
    <body> 
     <ul class="justcontent"> 
      <li>You are a beautiful human being</li> 
     </ul> 
     <ul class="withspan"> 
      <li><span aria-label="bullet"></span>You are a beautiful human being</li> 
     </ul> 
    </body> 
</html>

источник

2014-12-23 14:50:00 unobf

Этот вид работ, но это приводит к нежелательному поведению. VoiceOver фокусирует пулю и говорит, что это группа внутри элемента списка и позволяет взаимодействовать с группой. Было бы предпочтительнее вести себя точно так же, как пуля по умолчанию - она рассматривает весь элемент списка как один элемент и объявляет «пулю», а затем текст вместо того, чтобы рассматривать их как два разных элемента. – Joey

Это лучшее, что вы можете сделать прямо сейчас – unobf

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

ответ

Смежные вопросы