Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarified and included CJK requirements in large text definition and updated rules affected by this change #2121

Merged
merged 48 commits into from
Apr 25, 2024
Merged
Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
a316f03
Update large-scale-text definition to include CJK languages with diff…
giacomo-petri Sep 14, 2023
fcc0409
updated rule
giacomo-petri Sep 14, 2023
4f781a0
added unicode reference
giacomo-petri Sep 14, 2023
4456dec
polishing definition
giacomo-petri Sep 15, 2023
a60cf76
adding spaces
giacomo-petri Sep 15, 2023
54ffbd6
spaces
giacomo-petri Sep 15, 2023
39a211d
improving understandability
giacomo-petri Sep 15, 2023
5cac272
added bold for consistency
giacomo-petri Sep 15, 2023
546a5a3
polishing the definition
giacomo-petri Sep 15, 2023
3107c19
adding passed and failed examples
giacomo-petri Sep 15, 2023
c9889a7
fixes
giacomo-petri Sep 15, 2023
4aaa207
cjk
giacomo-petri Sep 15, 2023
ab17360
fixes
giacomo-petri Sep 15, 2023
00b0cca
add lang="ja" for Japanese examples in min contrast rule
giacomo-petri Sep 15, 2023
1834876
add lang="ja" for Japanese sentences in contrast enhanced
giacomo-petri Sep 15, 2023
6aaa18d
accepted Wilco suggestion with few edits
giacomo-petri Sep 18, 2023
a8d6293
Update large-scale-text.md
giacomo-petri Sep 18, 2023
61d9e74
added words to dictionary
giacomo-petri Sep 18, 2023
2724569
Update spelling-ignore.yml
giacomo-petri Sep 18, 2023
7fcae63
Update large-scale-text.md
giacomo-petri Sep 18, 2023
41aba7f
typo
giacomo-petri Sep 18, 2023
66e806c
Update spelling-ignore.yml
giacomo-petri Sep 18, 2023
9934e03
Apply suggestions from code review
giacomo-petri Sep 28, 2023
4ded309
official to unofficial
giacomo-petri Sep 28, 2023
44b691b
Update large-scale-text.md
giacomo-petri Sep 28, 2023
caaa73a
Update large-scale-text.md
giacomo-petri Sep 28, 2023
2f0e977
replaced Japanese with Chinese
giacomo-petri Sep 28, 2023
70bb0cc
replaced Japanese with Chinese example
giacomo-petri Sep 28, 2023
b9cda2d
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Oct 12, 2023
8b1c88a
Update __tests__/spelling-ignore.yml
WilcoFiers Oct 26, 2023
03cf3d3
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Nov 30, 2023
9063dba
Update spelling.js
giacomo-petri Dec 9, 2023
b412651
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Dec 14, 2023
33b28d6
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Jan 10, 2024
3f89a93
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Jan 11, 2024
221799d
Update pages/glossary/large-scale-text.md
giacomo-petri Jan 18, 2024
d08ce97
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Jan 18, 2024
3bacb00
Update large-scale-text.md
giacomo-petri Feb 7, 2024
520f01c
Update text-contrast-afw4f7.md
giacomo-petri Feb 7, 2024
7d4f76d
Update text-contrast-enhanced-09o5cg.md
giacomo-petri Feb 7, 2024
eace061
Update text-contrast-afw4f7.md
giacomo-petri Feb 7, 2024
496f0bf
Update large-scale-text.md
giacomo-petri Feb 7, 2024
2196334
Update spelling-ignore.yml
giacomo-petri Mar 4, 2024
0b622d5
Apply suggestions from code review
giacomo-petri Mar 4, 2024
e7e290f
Update large-scale-text.md
giacomo-petri Mar 4, 2024
bbf55cb
Update pages/glossary/large-scale-text.md
giacomo-petri Mar 8, 2024
eaa3902
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Apr 18, 2024
cf72047
Merge branch 'develop' into giacomo-petri-cjk-languages
Jym77 Apr 25, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions _rules/text-contrast-afw4f7.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,36 @@ This text is using the default user agent text color and background color. By de
<div role="button">My button!</div>
```

#### Passed Example 12
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think some of the new examples should be in Korean or Chinese instead of Japanese. Not blocking, though.

Copy link
Collaborator Author

@giacomo-petri giacomo-petri Sep 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Jym77,
I've made some revisions to the examples by substituting Japanese with Chinese, utilizing the Chinese rendition of the WCAG 2.1 title.

Regarding Korean, it appears that only "Hanja" (Chinese characters) are affected by this rule. However, given my unqualified Korean language knowledge, I'm unable to craft a meaningful sentence using these Hanja characters. Any assistance from the community in providing a valid Korean sentence would be greatly appreciated.

Copy link
Collaborator

@dd8 dd8 Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Korean Hangul might be another special case - lines are laid out in 2 dimensions unlike Chinese and Japanese (or European languages). It's unclear what point size and line height mean for Hangul layout.

For example, the Korean word for "honeybee" (kkulbeol) is written as 꿀벌, not ㄲㅜㄹㅂㅓㄹ.
https://en.wikipedia.org/wiki/Hangul

The 꿀벌 above are are actually 2 groups of 3 characters stacked vertically (one group for each syllable).

Copy link
Collaborator

@dd8 dd8 Oct 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like Korean Hanja is very rare - its use and teaching was banned in 1968 - so we can probably ignore it. The ban has been repealed recently, but as a result most Korean people don't know Hanja:
https://en.wikipedia.org/wiki/Hanja#Decline_of_Hanja

The Hangul syllable blocks mentioned in the comment above are precomposed into 11,000+ Unicode code points so point size is the size of the precomposed glyph.
https://www.w3.org/TR/klreq/#hangulcodes

This is similar to the way accents like circumflex and vowels are precomposed Unicode code points in French, as in the letter ô in hôpital

The Hangul Jamo code points can be combined into single glyphs representing a syllable. This is similar to how the letter 'o' U+006F and combining circumflex '◌̂' U+0302 can be composed into the glyph ô


This 18pt bold black Japanese text has a contrast ratio of 3.6:1 on the gray background.

```html
<p style="color: #000; font-size:18pt; font-weight:700; background: #666;">
中国語、日本語、及び韓国語
</p>
```

#### Passed Example 13

This 22pt black Japanese text has a contrast ratio of 3.6:1 on the gray background.

```html
<p style="color: #000; font-size:22pt; font-weight:700; background: #666;">
中国語、日本語、及び韓国語
</p>
```

#### Passed Example 14

This 18pt black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since the characters composing the sentence are not included within the Unicode standard range of 4E00–9FFF, it's passing the rule.
giacomo-petri marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="color: #000; font-size:18pt; background: #666;">
「ロック・アンド・ロール」
</p>
```

Copy link

@JediLin JediLin Jan 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passed Example 15

This 16pt bold black Traditional Chinese text has a contrast ratio of 3.6:1 on the gray background.

<p style="color: #000; font-size:16pt; font-weight:700; background: #666;" lang="zh-TW">
	內容可及性規範
</p>

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -304,6 +334,26 @@ This text in a [semantic button][semantic role] has a contrast ratio of 3.85:1.
<div role="button" style="color: #777; background: #EEE;">My button!</div>
```

#### Failed Example 11

This 14pt bold black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since 14pt bold is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 4.5:1.

```html
<p style="color: #000; font-size:16pt; font-weight:700; background: #666;">
中国語、日本語、及び韓国語
</p>
```

#### Failed Example 12

This 18pt black Japanese text has a contrast ratio of 3.6:1 on the gray background. Since 18pt is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 4.5:1.

```html
<p style="color: #000; font-size:18pt; background: #666;">
中国語、日本語、及び韓国語
</p>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down
50 changes: 50 additions & 0 deletions _rules/text-contrast-enhanced-09o5cg.md
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,36 @@ This text is using the default user agent text color and background color. By de
<div role="button">My button!</div>
```

#### Passed Example 11

This 18pt bold black Japanese text has a contrast ratio of 4.6:1 on the gray background.

```html
<p style="color: #000; font-size:18pt; font-weight:700; background: #777;">
中国語、日本語、及び韓国語
</p>
```

#### Passed Example 12

This 22pt black Japanese text has a contrast ratio of 4.6:1 on the gray background.

```html
<p style="color: #000; font-size:22pt; background: #777;">
中国語、日本語、及び韓国語
</p>
```

#### Passed Example 13

This 18pt black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since the characters composing the sentence are not included within the Unicode standard range of 4E00–9FFF, it's passing the rule.
giacomo-petri marked this conversation as resolved.
Show resolved Hide resolved

```html
<p style="color: #000; font-size:18pt; background: #777;">
「ロック・アンド・ロール」
</p>
```

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passed Example 14

This 20pt black Traditional Chinese text has a contrast ratio of 4.6:1 on the gray background.

<p style="color: #000; font-size:20pt; background: #777;" lang="zh-TW">
	內容可及性規範
</p>

### Failed

#### Failed Example 1
Expand Down Expand Up @@ -328,6 +358,26 @@ This text in a [semantic button][semantic role] has a contrast ratio of 6.4:1.
<div role="button" style="color: #555; background: #EEE;">My button!</div>
```

#### Failed Example 14

This 16pt bold black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since 14pt bold is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 7:1.

```html
<p style="color: #000; font-size:14pt; font-weight:700; background: #666;">
中国語、日本語、及び韓国語
</p>
```

#### Failed Example 15

This 20pt black Japanese text has a contrast ratio of 4.6:1 on the gray background. Since 18pt is not [large scale text][] for the Unicode Standard with range 4E00–9FFF, the minimum contrast ratio requirement is 7:1.

```html
<p style="color: #000; font-size:18pt; background: #666;">
中国語、日本語、及び韓国語
</p>
```

### Inapplicable

#### Inapplicable Example 1
Expand Down
15 changes: 15 additions & 0 deletions pages/glossary/large-scale-text.md
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rewrote a few things, including updating the links as I found this a little difficult to read with all the URLs in them:

**Exception**: If the text nodes contain Unicode characters in the 4E00–9FFF range:

- at least 22 [points][], or
- at least 18 [points][] and a [computed][] [font weight][] CSS property of 700 or higher.

**Notes:**  
The WCAG definition of [large scale text](https://www.w3.org/TR/WCAG21/#dfn-large-scale) includes an exception for CJK (Chinese, Japanese, and Korean) text. The Unicode range 4E00–9FFF includes these characters. The "equivalent size" numbers are not included in WCAG, and come from the [Official Japanese Translation of WCAG 2.1](https://waic.jp/translations/WCAG21/#dfn-large-scale).  This translation offers the following insight (translated from Japanese to English to allow everyone understanding the specs):  

> TRANSLATION NOTE  
> In the case of Japanese full-width characters, 22 point or 18 point bold type is considered to be the "equivalent" size, based on the First Report of the Enlarged Textbook Promotion Council, "Chapter 2 Standards for Enlarged Textbooks." is reasonable."
Assuming all CJK characters pose similar contrast challanges, this definition extends the Japanese requirement to the whole CJK characters set included in the [Unicode standard](https://unicode.org/charts/PDF/U4E00.pdf) within the range of 4E00–9FFF.

[computed]: https://www.w3.org/TR/css-cascade-3/#computed-value
[font-size]: https://www.w3.org/TR/css-fonts-3/#propdef-font-size
[points]: https://www.w3.org/TR/css-values/#pt
[font weight]: https://www.w3.org/TR/css-fonts-3/#font-weight-prop

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Taiwan has different requirements than Japan, I propose the following:

**Exception**:  
A text node containing Unicode characters in the 4E00–9FFF range ([CJK Unified Ideographs](https://unicode.org/charts/PDF/U4E00.pdf)) is <dfn id="large-scale-text:cjk">large scale text</dfn> if at least one of the following is true:

- the Japanese text node [computed][] [font-size][] is at least 22 [points][], or
- the Traditional Chinese text node [computed][] [font-size][] is at least 20 [points][], or
- the Japanese text node [computed][] [font-size][] is at least 18 [points][] and has a [computed][] [font weight][] of 700 or higher, or
- the Traditional Chinese text node [computed][] [font-size][] is at least 16 [points][] and has a [computed][] [font weight][] of 700 or higher.

**Notes:**  
The WCAG definition of [large scale text](https://www.w3.org/TR/WCAG21/#dfn-large-scale) includes an exception for CJK (Chinese, Japanese, and Korean) fonts. The Unicode range 4E00–9FFF includes these characters. The "equivalent size" numbers are not included in WCAG, and come from the [Taiwanese Readability Reference Guidelines](https://crpd.sfaa.gov.tw/BulletinCtrl?func=downloadFile&type=file&id=3749&code=F9FEF1F8F1FAF6FAFCFAFCFCFFFAF2F3) (PDF download) and the [Unofficial Japanese Translation of WCAG 2.1](https://waic.jp/translations/WCAG21/#dfn-large-scale). The Taiwanese Readability Reference Guidelines requires minimal font size 16 points for Traditional Chinese characters and 14 points for English characters to be fulfill the need of the people with disabilities, and the Unofficial Japanese translation offers the following insight (translated from Japanese to English to allow everyone understanding the specs):

Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,18 @@ Text nodes with a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value

- at least 18 [points](https://www.w3.org/TR/css-values/#pt), or
- at least 14 [points](https://www.w3.org/TR/css-values/#pt) and a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font weight](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) CSS property of 700 or higher.

For CJK (Chinese, Japanese and Korean) characters with a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) of:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For CJK (Chinese, Japanese and Korean) characters with a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) of:
For CJK (Chinese, Japanese and Korean) characters within text nodes, a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) of:

- at least 22 [points](https://www.w3.org/TR/css-values/#pt), or
- at least 18 [points](https://www.w3.org/TR/css-values/#pt) and a [computed](https://www.w3.org/TR/css-cascade-3/#computed-value) [font weight](https://www.w3.org/TR/css-fonts-3/#font-weight-prop) CSS property of 700 or higher.

**Notes:**
giacomo-petri marked this conversation as resolved.
Show resolved Hide resolved
The WCAG definition of [large scale text](https://www.w3.org/TR/WCAG21/#dfn-large-scale) lacks clarity regarding the equivalent [font-size](https://www.w3.org/TR/css-fonts-3/#propdef-font-size) for CJK characters. According to WCAG:
>[large scale (text)](https://www.w3.org/TR/WCAG21/#dfn-large-scale): with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts

Since there is no official WCAG definition of **equivalent size** for CJK characters, we rely on the guidelines provided in the [Japanese translation of the WCAG 2.1](https://waic.jp/translations/WCAG21/#dfn-large-scale). This document offers the following insight (translated from Japanese to English to allow everyone understanding the specs):

>TRANSLATION NOTE
>In the case of Japanese full-width characters, 22 point or 18 point bold type is considered to be the "equivalent" size, based on the First Report of the Enlarged Textbook Promotion Council, "Chapter 2 Standards for Enlarged Textbooks." is reasonable."

Assuming all CJK characters pose similar contrast challanges, this definition extends the Japanese requirement to the whole CJK characters set included in the [Unicode standard](https://unicode.org/charts/PDF/U4E00.pdf) within the range of 4E00–9FFF.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to indicate that that Unicode range describes the CJK Unified Ideographs

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added at the beginning of the Exception for a better understanding

Loading