Template:Screen reader-only/doc: Difference between revisions

Revision as of 23:57, 7 April 2020

Latest revision as of 11:08, 1 July 2025

(20 intermediate revisions by 14 users not shown)

Line 1:

{{Documentation subpage}}

<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->

{{High-use}}

== Screen reader only ==

{{Template redirect|sronly|sro}}

The text supplied as the sole unnamed parameter is not to be displayed in a browser, but should be voiced by a screen reader.

{{uses TemplateStyles|Template:Screen reader-only/styles.css}}

<code><nowiki>{{sronly|This template generates invisible text isthat onlywill forbe aread aloud by [[screen reader}}</nowiki></code>]]s. → {{sronly|ThisThe text supplied as the sole unnamed parameter is onlynot to be displayed in a browser, but should be voiced forby a screen reader}}.

<code><nowiki>First part. {{Screen reader-only|Second part only for a screen reader.}} Third part.</nowiki></code> → First part. {{Screen reader-only|Second part only for a screen reader.}} Third part.

This template should only be used to hide text from sighted readers when that text substantially duplicates adjacent text that is visible.

{{TOC right}}

== In table captions ==

The main usage case is when a table is placed immediately below a heading, where the heading is effectively identical to the table's caption. This template may be used to hide the caption from a sighted reader (as it would be duplicative), while allowing a screen reader to hear the caption{{snd}} for example, if the screen reader reads a list of tables in the article to allow navigation directly to a particular table.

If the table is moved to another ___location away from the heading, then this template should be removed to allow sighted readers to see the table caption. This is a requirement of [https://www.w3.org/TR/WCAG21/#info-and-relationships WCAG 1.3.1].

== Example ==

The above table below has a caption "Example table" that canwill be voiced by a screen reader.

<code><nowiki>|+ {{Screen reader-only|Example table}}</nowiki></code>

=== Example table ===

{| class="wikitable"

|+ {{sronlyScreen reader-only|Example table}}

|-

! scope="col" | Header

Line 25 ⟶ 40:

|}

=== TemplateData ===

The above table has a caption "Example table" that can be voiced by a screen reader.

{{TemplateData header|noheader=yes}}

<templatedata>

{

"params": {

"1": {

"label": "Text",

"type": "string",

"required": true

}

},

"format": "inline",

"description": "The text supplied as the sole unnamed parameter is not to be displayed in a browser, but should be voiced by a screen reader."

}

</templatedata>

== See also ==

* {{tl|Transparent text}}

* {{tl|Hidden text}}

<includeonly>{{sandbox other||

<!-- Categories below this line, please; interwikis at Wikidata -->

[[Category:Accessibility templates]]

[[Category:Wikipedia templates that change text based on client state]]

}}</includeonly>