W3C home > Mailing lists > Public > www-style@w3.org > January 2017

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

From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Date: Sat, 21 Jan 2017 14:18:44 -0700
Message-ID: <CAFDDJ7z1wipvbAJuSKakXyQNUkKWWfubgjdG_L502U3YcyCeWQ@mail.gmail.com>
To: Ian Yang <ian.html@gmail.com>
Cc: fantasai <fantasai.lists@inkedblade.net>, CSS public list <www-style@w3.org>
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
>
>
Received on Saturday, 21 January 2017 21:19:16 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:06 UTC