From 05f540eb7d78db518a4d8480f32672e23ac76efa Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sat, 18 Jan 2025 22:40:02 +0200 Subject: [PATCH 01/15] Document `speak-as` CSS property. --- files/en-us/web/css/speak-as/index.md | 80 +++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 files/en-us/web/css/speak-as/index.md diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md new file mode 100644 index 000000000000000..dd40e4d0f57b9fe --- /dev/null +++ b/files/en-us/web/css/speak-as/index.md @@ -0,0 +1,80 @@ +--- +title: speak-as +slug: Web/CSS/speak-as +page-type: css-property +browser-compat: css.properties.speak-as +--- + +{{CSSRef}} + +The **`speak-as`** property is a part of [CSS](/en-US/docs/Web/CSS) Speech, which is used to manipulate how the [HTML](/en-US/docs/Web/HTML) content is spoken by assistive technologies, especially screen readers. More specifically, **`speak-as`** specifies how elements (any HTML element if not paired with [@counter-style](/en-US/docs/Web/CSS/@counter-style/speak-as)) and/or their content are spoken. + +## Syntax + +```css +speak-as: normal; +speak-as: spell-out; +speak-as: literal-punctuation; +speak-as: digits; +speak-as: no-punctuation; +``` + +### Values + +- `normal` + - : Default value, which uses normal pronunciation rules, but punctuation is replaced by pauses. For example, instead of "Hello, world!" it would be pronounced as "Hello (pause) world (pause)" +- `spell-out` + - : Content is spelled out letter by letter. For example, "role" would be pronounced "r" "o" "l" "e". +- `literal-punctuation` + - : Punctuation marks are spelled out literally. For example, instead of "Hello, world!" it would be pronounced as "Hello comma world exclamation mark.". +- `digits` + - : Numbers are pronounced as individual digits. For example, 31 is pronounced as "three one". +- `no-punctuation` + - : The content is pronounced normally without any punctuation. For example, instead of "Hello, world!" it would be pronounced as "Hello world". + + +>[!NOTE] + >The support of `speak-as` property is very limited or inconsistently implemented across different assistive technologies (such as screen readers or speech synthesizers). It's often recommended not to fully rely on it solely to deliver your critical information, to ensure it remains user friendly and accessible to a wide audience. + +## Example +### HTML +```HTML +

Hello, world!

+

Hello, world!

+

Hello, world!

+

Hello, world!

+

25

+``` + +### CSS +```CSS + .normal { + speak-as: normal; + } + + .spell-out { + speak-as: spell-out; + } + + .literal-punctuation { + speak-as: literal-punctuation; + } + + .no-punctuation { + speak-as: no-punctuation; + } + + .digits { + speak-as: digits; + } +``` + +## Browser compatibility +{{Compat}} + +## See also + +- How to use [speak-as descriptor](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as) as descriptor for {{cssxref("@counter-style")}} which is part of the `@counter-style` at-rule. +- More information on {{cssxref("@counter-style")}}. +- [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) +- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) \ No newline at end of file From c803264da97b073b567a5d16b5e8bddb418e5251 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sat, 18 Jan 2025 23:04:12 +0200 Subject: [PATCH 02/15] Add redirect for `speak-as` property --- files/en-us/_redirects.txt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 61c25aad4b1ccdb..614440034ef2f89 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -12106,7 +12106,8 @@ /en-US/docs/Web/CSS/sign() /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function -/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as +/en-US/docs/Web/CSS/speak-as-descriptor /en-US/docs/Web/CSS/@counter-style/speak-as +/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix /en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols From 757aadd423ced76e1a09f897ba3918ec0c243e54 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sat, 18 Jan 2025 23:13:09 +0200 Subject: [PATCH 03/15] Clarifying that `speak-as` is a descriptor at the title section. --- files/en-us/web/css/@counter-style/speak-as/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/@counter-style/speak-as/index.md b/files/en-us/web/css/@counter-style/speak-as/index.md index 38cb38d07323bd1..30151d7e2fc456f 100644 --- a/files/en-us/web/css/@counter-style/speak-as/index.md +++ b/files/en-us/web/css/@counter-style/speak-as/index.md @@ -1,5 +1,5 @@ --- -title: speak-as +title: speak-as (@counter-style) slug: Web/CSS/@counter-style/speak-as page-type: css-at-rule-descriptor browser-compat: css.at-rules.counter-style.speak-as From 0957b5f0c395974b9aa47dcf33f73a3d597ce61f Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sat, 18 Jan 2025 23:57:46 +0200 Subject: [PATCH 04/15] fix indentation Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index dd40e4d0f57b9fe..1ccb95c94c2255e 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -32,9 +32,8 @@ speak-as: no-punctuation; - `no-punctuation` - : The content is pronounced normally without any punctuation. For example, instead of "Hello, world!" it would be pronounced as "Hello world". - ->[!NOTE] - >The support of `speak-as` property is very limited or inconsistently implemented across different assistive technologies (such as screen readers or speech synthesizers). It's often recommended not to fully rely on it solely to deliver your critical information, to ensure it remains user friendly and accessible to a wide audience. +> [!NOTE] +> The support of `speak-as` property is very limited or inconsistently implemented across different assistive technologies (such as screen readers or speech synthesizers). It's often recommended not to fully rely on it solely to deliver your critical information, to ensure it remains user friendly and accessible to a wide audience. ## Example ### HTML From a0c5fe16199e847c0015953abd71fe29c2cac286 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:00:55 +0200 Subject: [PATCH 05/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 1ccb95c94c2255e..24cc2a315eba58c 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -73,7 +73,7 @@ speak-as: no-punctuation; ## See also -- How to use [speak-as descriptor](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style/speak-as) as descriptor for {{cssxref("@counter-style")}} which is part of the `@counter-style` at-rule. +- How to use [speak-as descriptor](/en-US/docs/Web/CSS/@counter-style/speak-as) as descriptor for {{cssxref("@counter-style")}} which is part of the `@counter-style` at-rule. - More information on {{cssxref("@counter-style")}}. - [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) - [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) \ No newline at end of file From ee1f4e0e0583d3557051b45a2422b3bd70e4f715 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:02:08 +0200 Subject: [PATCH 06/15] add a space Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 24cc2a315eba58c..322534336ddbbac 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -69,6 +69,7 @@ speak-as: no-punctuation; ``` ## Browser compatibility + {{Compat}} ## See also From 828b622a828c4fcfb596a7dbb6a7bf4044b21f24 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:02:24 +0200 Subject: [PATCH 07/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 322534336ddbbac..e19129303a2a51d 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -36,6 +36,7 @@ speak-as: no-punctuation; > The support of `speak-as` property is very limited or inconsistently implemented across different assistive technologies (such as screen readers or speech synthesizers). It's often recommended not to fully rely on it solely to deliver your critical information, to ensure it remains user friendly and accessible to a wide audience. ## Example + ### HTML ```HTML

Hello, world!

From 7aada5b314086ab99505b61502b2a6138c181ea5 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:02:54 +0200 Subject: [PATCH 08/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index e19129303a2a51d..e1eff216376598b 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -38,6 +38,7 @@ speak-as: no-punctuation; ## Example ### HTML + ```HTML

Hello, world!

Hello, world!

From c52b78816e6a8203afff359dc61ce3729bf63381 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:03:07 +0200 Subject: [PATCH 09/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index e1eff216376598b..02c32a9bcc970e1 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -72,7 +72,8 @@ speak-as: no-punctuation; ## Browser compatibility -{{Compat}} + + ## See also From 37c8bae426347adca42fb64655ff7f870af71220 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:03:38 +0200 Subject: [PATCH 10/15] add a space Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 02c32a9bcc970e1..7ace9d360c41fb3 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -48,6 +48,7 @@ speak-as: no-punctuation; ``` ### CSS + ```CSS .normal { speak-as: normal; From a8df1f60e12fad26f51a38ad2b2b091159fdc536 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:05:41 +0200 Subject: [PATCH 11/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 7ace9d360c41fb3..2692af82626480a 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -73,9 +73,6 @@ speak-as: no-punctuation; ## Browser compatibility - - - ## See also - How to use [speak-as descriptor](/en-US/docs/Web/CSS/@counter-style/speak-as) as descriptor for {{cssxref("@counter-style")}} which is part of the `@counter-style` at-rule. From 72419ab2429264bddbf8b42b7eb303a99dfc5270 Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:12:53 +0200 Subject: [PATCH 12/15] Add browser compat placeholder --- files/en-us/web/css/speak-as/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index 2692af82626480a..a376cab16c05fac 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -72,10 +72,11 @@ speak-as: no-punctuation; ``` ## Browser compatibility +{{Compat}} ## See also - How to use [speak-as descriptor](/en-US/docs/Web/CSS/@counter-style/speak-as) as descriptor for {{cssxref("@counter-style")}} which is part of the `@counter-style` at-rule. - More information on {{cssxref("@counter-style")}}. - [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) -- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) \ No newline at end of file +- [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) From 88d3703b76eeb2653f2332cac7710321441fe4ef Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 00:56:57 +0200 Subject: [PATCH 13/15] Fixed redirect mistake. --- files/en-us/_redirects.txt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 614440034ef2f89..61c25aad4b1ccdb 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -12106,8 +12106,7 @@ /en-US/docs/Web/CSS/sign() /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function -/en-US/docs/Web/CSS/speak-as-descriptor /en-US/docs/Web/CSS/@counter-style/speak-as -/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/speak-as +/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix /en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols From a5436eea80c785afabb6afef1a245e8e45a1aedc Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 01:03:40 +0200 Subject: [PATCH 14/15] Update files/en-us/web/css/speak-as/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/css/speak-as/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/css/speak-as/index.md b/files/en-us/web/css/speak-as/index.md index a376cab16c05fac..2833d959b3f5d44 100644 --- a/files/en-us/web/css/speak-as/index.md +++ b/files/en-us/web/css/speak-as/index.md @@ -72,6 +72,7 @@ speak-as: no-punctuation; ``` ## Browser compatibility + {{Compat}} ## See also From eea54fe8820569724adfba43c6b0a886f4fb135a Mon Sep 17 00:00:00 2001 From: younisayoub <143106292+younisdev@users.noreply.github.com> Date: Sun, 19 Jan 2025 01:48:14 +0200 Subject: [PATCH 15/15] Remove unnecessary `speak--as` redirect. --- files/en-us/_redirects.txt | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 61c25aad4b1ccdb..5afc1e3ab86483d 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -12106,7 +12106,6 @@ /en-US/docs/Web/CSS/sign() /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function -/en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix /en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols