Skip to content

Instantly share code, notes, and snippets.

View momdo's full-sized avatar

Momdo Nakamura momdo

View GitHub Profile
@momdo
momdo / WCAG-TECHS-trnote-ARIA_review.md
Created April 16, 2018 22:29
WCAG 2.0 達成方法集訳注レビュー_ARIA

たとえば、"read more..."【訳注:続きを読む】のリンクは、リンクの目的を明確にするために、先行するセクションの見出しテキストと関連付けることができるかもしれない (事例 1 を参照)。

コメント: 残すなら、もう少し説明を長くした上で残した方がよさそう。

場合によっては、デザイナーが、ページ上のリンクの見た目をコンパクトにするために、"read more"【訳注: 続きを読む】のような短く、繰り返されるリンクテキストを選択することがある。こういった状況は、より単純で非説明的な "read more" というページ上のテキストを、より説明的なリンクのラベルで置き換えることができるという点で、aria-label の望ましいユースケースとなる。単語 "read more" は、利用者間の一貫性のあるコミュニケーションを可能にするために (元のアンカーテキスト "[Read more...]" を置き換える) aria-label の中にも繰り返される。

コメント: ARIA7に同じ

@momdo
momdo / WCAG-TECHS-trnote-F_review.md
Created April 16, 2018 22:28
WCAG 2.0 達成方法集訳注レビュー_F

ウィンドウを開かせた要素にウィンドウを開くことを示す関連づけられたテキストがある。そのテキストはリンクの中に表示されている、又は HTML の title 属性といった非表示の関連づけで利用できる。【訳注:a 要素内でアイコン画像を用いる際は、代替テキストで示されていればよい。また、title 属性の使用は推奨できない。】

コメント: 訳注が言わんとすることがいまいちよく分からなかった

訳注:本来は「XYZ mountaineering XYZ gets you to the top!」となるべきである

コメント: この訳注は不要では。

@momdo
momdo / WCAG-TECHS-trnote-C_review.md
Created April 16, 2018 22:26
WCAG 2.0 達成方法集訳注レビュー_C

事例 4: 見出しの見た目を良くするために使用される画像置換 以下の例では、見出し要素の内容であるテキストを置き換えるために装飾目的の画像が使われている。【訳注:画像置換は達成基準1.1.1の失敗例であり、このような見出し要素で使用すべきではない。WCAGワーキンググループにこの事例の削除を提案中。】

コメント: C9原文では、事例が削除されているので、訳も事例ごと削除する。

C12.xml

@momdo
momdo / WCAG-TECHS-trnote-H_review.md
Last active May 10, 2018 07:27
WCAG 2.0 達成方法集訳注レビュー_H

H24.xml

<p>HTML 4.01 仕様書は、<att>alt</att> 属性のテキストを、その要素が通常通り描画されないときに表示されるもの、と説明している。ユーザエージェントは、画像が表示されないときに <att>alt</att> 属性のテキストを表示する。しかし、視覚系ユーザエージェントは現状、イメージマップの<el>area</el>要素については、キーボードでアクセスした場合、又は画像そのものが表示されない場合には、<att>alt</att> 属性のテキストを表示しない。また、画像の内在寸法が指定されていない場合【訳注− <el>img</el> 要素の <att>width</att> 属性や <att>height</att> 属性で画像のサイズが示されていない場合など】、<el>area</el> 要素を切り抜いて表示することもある。さらに、マウスオーバー時に反応して表示される <att>alt</att> 属性のテキストは、ユーザエージェントでのフォントサイズや色の組み合わせの設定通りに表示されない。</p>

コメント: <ua-issues>内。紛らわしいので削除しておく

H33.xml

<p>HTML 4.01仕様書は、<att>alt</att>属性のテキストを、ある要素が通常通り描画されないときに表示されるもの、と説明している。そのため、視覚系ユーザエージェントでは、画像が表示されないときに<att>alt</att>属性のテキストを表示する。一方、<att>title</att>属性は追加情報を提供するものとされる。ユーザエージェントは一般的に、<att>title</att>属性が指定された要素にマウスオーバーしたときに、その<att>title</att>属性のテキストを表示する。Internet Explorerは、<att>title</att>属性のテキストが指定されていなければ、マウスオーバー時に<att>alt</att>属性のテキストを表示する。一方、FirefoxやOperaは、<att>title</att>属性のテキストのみをマウスオーバー時に表示し、<att>alt</att>属性のテキストは表示しない。したがって、<att>alt</att>属性のテキストをマウスオーバー時に表示したければ、同じテキストを
@momdo
momdo / WCAG-TECHS-trnote-G_review.md
Created April 16, 2018 10:07
WCAG 2.0 達成方法集訳注レビュー_G

事例 3: 必須項目のあるフォーム フォームにいくつかの必須項目がある。必須項目のラベルは赤で示されている。 それに加えて、各ラベルの後ろに* (アスタリスク) がある。フォーム入力の説明文では、入力例に続いて、 「赤字で* (アスタリスク) の付いた項目は必須項目です。」と示されている。 注記: アスタリスクは、スクリーンリーダー (やその読上げモード) によっては読上げられないことがあり、 またデフォルトの文字サイズよりも小さいサイズで表示されるため、弱視の利用者にとっては見づらいかもしれない。コンテンツ制作者としては、 アスタリスクが用いられていることをテキストで示すとともに、表示されるアスタリスクの文字サイズを大きくすることが重要である。【訳注:日本語の場合は、アスタリスクよりも文字で「必須」と示したほうが、音声読み上げと見た目の両方でより確実である。】

コメント: 英語であっても、同じことは言える?(言語によらない?)