[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し #417

tokimari · 2023-10-06T01:05:02Z

概要

fix: #263
ちょっとガイドライン内容が大きく変わるので、~~途中経過を見てもらいたくDraftでPR作成します:pray:~~ Draft外しました:pray:

相談したいところ

プレビューを見ながらご確認ください:eyes:

タイトルがよりエンジニア向けになりましたが、そもそも4.1.2はエンジニア向けの項目で良いかなと思っていて、齟齬がない方を優先しました・・:pray:とはいえ初見殺しは避けたいので、率直な感想もいただけると・・:bow:
原文では「名前（name）」とあるところを「Accessible Name」としていること
- WAICの文書では https://waic.jp/translations/WCAG21/Techniques/html/H65#description でも出ているのでまぁいいかな・・？
spindle-uiにあるやつが例としてもデモページを貼れるので都合が良いかなと思うんですが、少々マニアックなコンポーネントなのが気になり・・Tabとかのが良さそうでしょうか（spindle-uiにはないからサンプル実装しないとですが）
実装例何が良さそうでしょうか 🤔 SegmentedControlで良い？？
- SegmentedControlで行くなら、role="radiogrouo", role="radio", aria-checked などが付与されていなくて支援技術にとって機能が伝わらないケースを書くのがよいでしょうか？？
- 現時点ではSegmentedControlの具体例を掲載して公開し、後ほど追加Componentの実装例を追加する

レビューで確認して欲しいところ

WCAG2.1のUnderstandingを参照しながら、修正したガイドラインの内容に間違い・語弊がないかを確認
こういう点も書いた方がいいのでは？とか
Understandingの達成方法を確認しながら、テスト・チェック方法の妥当性

確認項目

Pull Requestを出す前に確認しましょう。

コミットは適切にまとめられているか
Pull Requestの概要を適切に書いたか
レビュワーの指定をしているか
textlintを実行しエラーが出ていないか
Accessibility
- altは適切に設定したか(参考(1.1.1 画像に代替テキストを提供する))

その他

reg-suit · 2023-10-06T01:05:04Z

reg-suit detected visual differences.

Check this report, and review them.

🔴🔴

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

github-actions · 2023-10-06T01:06:08Z

Visit the preview URL for this PR (updated for commit 5a86773):

https://ameba-a11y-guidelines--pr417-fix-4-1-2-9sy4dwcp.web.app

_{(expires Wed, 18 Oct 2023 07:13:37 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b5ed0ee52825c395d695adc443890c0775e604f1}

tokimari · 2023-10-06T03:17:05Z

src/4/1/2.md

+
+Accessible Nameとは、ユーザーインターフェイスの名前である。機械的に識別可能な名前であり、表示されるラベルテキストと一致することが多いが、代替テキストのように支援技術向けにのみ実装されていることもある。WCAGではnameと記載されているが、HTMLのname属性とは関係がなく、誤解を生みやすいため、[Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname-1.1/)で定義されている用語の名称で表記している。
+
+参考：


31:3 warning 文末が"。"で終わっていません。 @openameba/ameba/ja-no-mixed-period
40:3 warning 文末が"。"で終わっていません。 @openameba/ameba/ja-no-mixed-period

textlintのtextlint-rule-ja-no-mixed-periodルールでwarningでちゃう・・
設定ファイル.textlintrcを以下のように編集することで、「参考：」で始まる行を許容できるっぽいんですが、ｳｰﾝ・・

{ "rules": { "ja-no-mixed-period": { "periodMark": "。", "exceptions": ["参考："] } } }

表記を変えれば良いけどいい案がパッと浮かばないなう

例えばですけど。

参考：

「詳細は以下の参考資料で確認できる。」みたいな文章的な言い回しにするか、
「### 参考資料」みたいな感じで見出しにしちゃうとかだとどうですかね？

h3見出しにしました:pray:

そういえばですが英字？だと左側の文字かけてそうな気がw

あーそれ気になってたんですよねw

summary要素にtext-indentプロパティが設定されてて、これかなーと思うので別で修正しますね:pray:

#420 にて:pray:

tokimari · 2023-10-06T08:53:22Z

@openameba/spindle-working-group 途中ですが相談したいところのあたりご意見もらいたく〜〜:pray:

yasuda-shin · 2023-10-10T08:37:57Z

実装例何が良さそうでしょうかSegmentedControlで良い

現状、該当するコンポーネントはSegmentedControlな気がしつつ直近でコンポーネントの開発が進むという噂もあります。

src/4/1/2.md

tatz012 · 2023-10-10T09:46:55Z

src/4/1/2.md

-{% label "good" %}
-見出しタグを正しく使用している場合。支援技術で、見出しを一覧化して表示する機能を使っても、全ての見出しを表示できるため、必要な情報を選んで読みやすい。
-{% endlabel %}
+SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されていのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。


Suggested change

SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されていのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。

SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されているのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。

細かいところで🙏

863594f にて 😄

itsminadesu

私からは良さそうに思いました 🙌🏻

yasuda-shin · 2023-10-11T09:25:18Z

概ね良さそうだなーと思いつつこのPull requestマージしたらissue closeすると思うのですが。
コンポーネントの実装例は別でタスク化？issue化とかしておきます？？

tatz012

自分からもよさそうです🙆‍♀️ (タスク化はたしかに)

tokimari · 2023-10-12T00:20:25Z

#417 (comment)

そうですね！issueを作成＆のちさんアサインしておきましたw
#421

Base automatically changed from fix/lint-staged to master October 6, 2023 01:33

tokimari force-pushed the fix/4.1.2 branch from 64ffc58 to 7148045 Compare October 6, 2023 02:44

tokimari added 4 commits October 6, 2023 11:46

fix: 4.1.2のタイトル・概要・具体例・テストチェック方法を修正

7ef7411

feat: 具体例、チェック方法を追加　

430acd6

fix: AccessibilityName -> Accessible Name

353ef46

feat: Accessible Nameとroleについて説明を入れる

e33befe

tokimari force-pushed the fix/4.1.2 branch from 7148045 to e33befe Compare October 6, 2023 03:15

tokimari commented Oct 6, 2023

View reviewed changes

itsminadesu reviewed Oct 10, 2023

View reviewed changes

src/4/1/2.md Outdated Show resolved Hide resolved

itsminadesu reviewed Oct 10, 2023

View reviewed changes

src/4/1/2.md Show resolved Hide resolved

itsminadesu reviewed Oct 10, 2023

View reviewed changes

src/4/1/2.md Show resolved Hide resolved

tatz012 reviewed Oct 10, 2023

View reviewed changes

tokimari added 6 commits October 11, 2023 14:35

fix: タイトルをなるべく平易な表現にする

657810a

fix: 「参考：」を見出しにする

3668060

fix: typo

863594f

fix: 画像を最適化

4310bcb

fix: 実装例セクションを削除

88e84ed

fix: 具体例を補足

13f2862

tokimari force-pushed the fix/4.1.2 branch from 85deb8b to 13f2862 Compare October 11, 2023 05:55

tokimari marked this pull request as ready for review October 11, 2023 05:58

fix: 再度圧縮＋valueの読み違いを修正

5a86773

itsminadesu approved these changes Oct 11, 2023

View reviewed changes

tokimari mentioned this pull request Oct 11, 2023

fix: summary要素の先頭文字が見切れている #420

Merged

6 tasks

tatz012 approved these changes Oct 11, 2023

View reviewed changes

tokimari mentioned this pull request Oct 12, 2023

4.1.2に実装例を追加する #421

Open

yasuda-shin approved these changes Oct 12, 2023

View reviewed changes

tokimari merged commit b4e1afb into master Oct 12, 2023
5 checks passed

tokimari deleted the fix/4.1.2 branch October 12, 2023 01:27

tokimari mentioned this pull request Oct 12, 2023

fix: 4.1.2のOGP画像を差し替え #422

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し #417

[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し #417

tokimari commented Oct 6, 2023 •

edited

Loading

reg-suit bot commented Oct 6, 2023 •

edited

Loading

github-actions bot commented Oct 6, 2023 •

edited

Loading

tokimari Oct 6, 2023 •

edited

Loading

yasuda-shin Oct 10, 2023

tokimari Oct 11, 2023

yasuda-shin Oct 11, 2023

tokimari Oct 11, 2023

tokimari Oct 11, 2023

tokimari commented Oct 6, 2023

yasuda-shin commented Oct 10, 2023 •

edited by tokimari

Loading

tatz012 Oct 10, 2023

tokimari Oct 11, 2023 •

edited

Loading

tokimari Oct 11, 2023

itsminadesu left a comment

yasuda-shin commented Oct 11, 2023

tatz012 left a comment

tokimari commented Oct 12, 2023


		Accessible Nameとは、ユーザーインターフェイスの名前である。機械的に識別可能な名前であり、表示されるラベルテキストと一致することが多いが、代替テキストのように支援技術向けにのみ実装されていることもある。WCAGではnameと記載されているが、HTMLのname属性とは関係がなく、誤解を生みやすいため、[Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname-1.1/)で定義されている用語の名称で表記している。

		参考：

	SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されていのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。
	SegmentedControlコンポーネントのボタンの一つにキーボードでフォーカスしている様子。3つあるボタンの内、選択されているのは中央で、フォーカスが当たっているのは一番左のボタンである。SegmentedControlでは、フォーカスが当たっているが選択されていない（Activeではない）状態がある。

[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し #417

[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し #417

Conversation

tokimari commented Oct 6, 2023 • edited Loading

概要

相談したいところ

レビューで確認して欲しいところ

関連リンク

確認項目

その他

reg-suit bot commented Oct 6, 2023 • edited Loading

github-actions bot commented Oct 6, 2023 • edited Loading

tokimari Oct 6, 2023 • edited Loading

Choose a reason for hiding this comment

yasuda-shin Oct 10, 2023

Choose a reason for hiding this comment

tokimari Oct 11, 2023

Choose a reason for hiding this comment

yasuda-shin Oct 11, 2023

Choose a reason for hiding this comment

tokimari Oct 11, 2023

Choose a reason for hiding this comment

tokimari Oct 11, 2023

Choose a reason for hiding this comment

tokimari commented Oct 6, 2023

yasuda-shin commented Oct 10, 2023 • edited by tokimari Loading

tatz012 Oct 10, 2023

Choose a reason for hiding this comment

tokimari Oct 11, 2023 • edited Loading

Choose a reason for hiding this comment

tokimari Oct 11, 2023

Choose a reason for hiding this comment

itsminadesu left a comment

Choose a reason for hiding this comment

yasuda-shin commented Oct 11, 2023

tatz012 left a comment

Choose a reason for hiding this comment

tokimari commented Oct 12, 2023

tokimari commented Oct 6, 2023 •

edited

Loading

reg-suit bot commented Oct 6, 2023 •

edited

Loading

github-actions bot commented Oct 6, 2023 •

edited

Loading

tokimari Oct 6, 2023 •

edited

Loading

yasuda-shin commented Oct 10, 2023 •

edited by tokimari

Loading

tokimari Oct 11, 2023 •

edited

Loading