8000 [css-pseudo] initial take on the alt property · w3c/csswg-drafts@ea912d8 · GitHub
Skip to content

Commit ea912d8

Browse files
astearnsastearns
committed
[css-pseudo] initial take on the alt property
1 parent 5555afd commit ea912d8

2 files changed

Lines changed: 99 additions & 6 deletions

File tree

‎css-pseudo/Overview.bs‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,6 +570,56 @@ Generated Content Pseudo-elements: ''::before'' and ''::after''</h2>
570570
(<code>:before</code> and <code>:after</code>)
571571
for these pseudo-elements.
572572

573+
<h3 id="alt-property">
574+
Alternative text for Generated Content: The 'alt' property</h3>
575+
576+
The generated content of a ::before or ::after element is not always appropriate for assistive technology. In these cases, alternative text can be provided using the 'alt' property. The 'alt' property applies only to the same elements the 'content' property applies to.
577+
578+
<pre class=propdef>
579+
Name: alt
580+
Value: none | <<string>>
581+
Initial: none
582+
Applies to: ::before and ::after pseudo-elements
583+
Inherited: no
584+
Computed Value: as specified
585+
</pre>
586+
587+
<dl>
588+
<dt>none</dt>
589+
<dd>No alternative text</dd>
590+
591+
<dt><<string>></dt>
592+
<dd>The alternative text is the <<string>>. This can be the empty string.</dd>
593+
</dl>
594+
595+
When the alt property computes to anything other than none, the alternative <<string>> should be used instead of the value of the contents property by assistive technology.
596+
597+
<div class="example">
598+
599+
Here the content property is an image, so the alt property is required to provide alternative text.
600+
601+
<pre>
602+
.new::before {
603+
content: url(./img/star.png);
604+
alt: "New!";
605+
}
606+
</pre>
607+
</div>
608+
609+
<div class="example">
610+
611+
If the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as "collapsed". Without the empty string alt value, the content would also be spoken as "Black right-pointing pointer".
612+
613+
<pre>
614+
.expandable::before {
615+
content: "\25BA"; /* a.k.a. ► */
616+
alt: "";
617+
/* aria-expanded="false" already in DOM,
618+
so this pseudo-element is decorative */
619+
}
620+
</pre>
621+
</div>
622+
573623
<h2 id="interactions">Overlapping Pseudo-element Interactions</h2>
574624

575625
<div class="example" id="overlapping-example">
@@ -707,7 +757,7 @@ Interface CSSPseudoElementList</h3>
707757
Its return value is the <code>CSSPseudo</code><code>Element</code>
708758
at the requested index in the collection
709759
or null if that is not a valid index.
710-
760+
711761
The method <dfn id="dom-csspseudochildlist-getbytype">getByType()</dfn>
712762
is used to retrieve a <code>CSSPseudo</code><code>Element</code>
713763
by its type.

0 commit comments

Comments
 (0)