Re: How are screen readers supposed to read <hr> which has icons as generated contents?

On the question of what screen-readers *should* do (note, I don't know if
this is what they *do* do):

An <hr> element should be treated like the ARIA non-interactive (assuming
no tabindex) "separator" role:
http://w3c.github.io/aria/aria/aria.html#separator

An element with the ARIA separator role is supposed to be treated as if any
child content is presentational, which means the child content is ignored
by screen-readers.  Child content includes any text or child elements you
add by script, but it also includes CSS-generated text.

You may add a name to a separator element (using aria-label,
aria-labelledby, or even title), but that would normally only make sense if
it is an interactive separator (that is, a slider used to adjust the size
of adjacent regions).  For interactive sliders, additional attributes & JS
are required to make it functional.

In other words, unless you give it extra attributes, an <hr/> should always
be read out only as a "break" or "thematic break", regardless of any
content added inside it.

FYI, I don't think the @media speech query is well supported, nor is
aria-hidden able to be set via CSS.

~ABR

On 21 January 2017 at 08:27, Ian Yang <ian.html@gmail.com> wrote:

> 2017-01-20 15:09 GMT+08:00 fantasai <fantasai.lists@inkedblade.net
>
>> Hm, good point. This should be preceded by @media not speech.
>>
>> ~fantasai
>>
>
> Thank you for the tip. Yet having to write @media not speech { } to wrap
> every visual-only CSS declaration seems cumbersome to me. It would be more
> convenient if we have a CSS declaration like HTML attribute
> aria-hidden="true" so that we can simply write the aforementioned CSS
> rule as:
>
> ``````
> hr::before {
>
>  content: "\2727\2003\2003\2727\2003\2003\2727";
>  aria-hidden: true;
> }
>
> ``````
>
> Ian Yang
>
>