如果可以希望今生跟web dev无缘…
但最近接触到的可能在图书馆做omake,于是整理.
Screen reader,是视觉障碍人群使用来读取屏幕信息的软件类别.
Read accessibility,是测试网页是否能对screen reader友好.
然后发现可以做这种普通人看不到但是screen reader可以读的trick.
1 | <div aria-label="test A"><p aria-hidden="true">test B</p></div> |
以下笔记整理.
Tabindex
Tabindex设置成0或1时,可以通过改变tab的读取方式来同时让screen reader跳过/读取所需信息.
A negative value (usually tabindex=”-1”) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It’s mostly useful to create accessible widgets with JavaScript.
tabindex=”0” means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document’s source order.
This value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex=”4” is focused before tabindex=”5” and tabindex=”0”, but after tabindex=”3”. If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767. If not specified, it takes the default value 0.
Avoid using tabindex values greater than 0. Doing so makes it difficult for people who rely on assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.
aria-live
Aria live分成三种: off, polite or assertive.
The default setting is off.
aria-live=”polite”
Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.
可以用于speak 新value/error message.
而aria-live=”assertive”是优先度比polite更高的error message.如果一条assertive和polite同时出现,screen reader会跳过polite直接读取assertive.
不过如果有两条及以上assertive,会宕机.
关于role =”alert”.
链接里的stackoverflow里讲, The alert role is supposed to be equivalent to aria-live=”assertive”.
aria-label
aria-labelledby
This attribute is used to specify the name or label of the current element.
aria-label
This attribute is also used to specify the name of the current element and generate its “Accessible name”. However, it is designed to be used where the label is not visible as another element on screen.
aria-describedby
This attribute is used to specify more descriptive information about the current element. Unlike aria-labelledby, which expects a concisce name for the element, aria-describedby allows for a whole sentence or paragraph to give context to the element.