W3C home > Mailing lists > Public > www-style@w3.org > May 2014

Re: [css-counter-styles] allow use of CSS4 "alt" property with @counter-style/symbols

From: Reece Dunn <msclrhd@googlemail.com>
Date: Thu, 15 May 2014 02:09:21 +0100
Message-ID: <CAGdtn247UUCGK4LRLyHGzw3XifuehwNwwQ=3YYE6-E0YzZRCmg@mail.gmail.com>
To: James Craig <jcraig@apple.com>
Cc: www-style list <www-style@w3.org>, "Tab Atkins Jr." <jackalmage@gmail.com>
On 15 May 2014 01:51, James Craig <jcraig@apple.com> wrote:
> The current Counter Styles draft <http://www.w3.org/TR/css-counter-styles-3/> has an accessibility problem. It allows use of meaningful symbol-based list markers, without the ability to declare alternative text for the list markers. List markers are currently spoken by many screen readers, but the spec's example would be meaningless or mispronounced at best.
>
> @counter-style box-corner {
>     system: fixed;
>     symbols: ◰ ◳ ◲ ◱;
>     suffix: ':';
> }
>
> I think this could possible be resolved by extending the CSS4 "alt" property [1].
> Previous discussion only allowed its use on pseudo elements. E.g.
>
> li::before {
>     content: counter(box-corner);
>     alt: counter(numbered);
> }

This is supported by the speak-as property on the counter-style itself:

@counter-style box-corner {
    system: fixed;
    symbols: ◰ ◳ ◲ ◱;
    suffix: ':';
    speak-as: numeric;
}

However, the |speak-as| property is optional here as it defaults to
|auto|, and as |system| is |fixed|, the |speak-as| property is
computed to |numeric|.

Screen readers and similar products should respect the |speak-as|
property. Also, web browsers should expose enough information to allow
screen readers to achieve this (or expose the |speak-as| text via the
a11y interfaces, so the screen readers will read lists using these
constructs as numbers). However, that is a quality of implementation
issue.

Thanks,
- Reece H. Dunn [http://www.reecedunn.co.uk]

> But I think the "alt property could be extended to be part of the counter declaration so that each use of the counter style would get it by default:
>
> @counter-style box-corner {
>     system: fixed;
>     symbols: ◰ ◳ ◲ ◱;
>     alt: '1' '2' '3' '4';  /* or alt: decimal; ? */
>     suffix: ':';
> }
>
> Cheers,
> James Craig
>
> [1] Alt in CSS4 on generated content pseudo elements:
> http://lists.w3.org/Archives/Public/www-style/2012Nov/0318.html
>
> PS. I'm aware ◰ ◳ ◲ ◱ means 5, 3, 5, 7 in some number sets, not 1, 2, 3, 4. ;-)
>
>
Received on Thursday, 15 May 2014 01:09:49 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:51:27 UTC