JIS X :2010を『日本語訳』してみる！

Size: px

Start display at page:

Download "JIS X :2010を『日本語訳』してみる！"

まれあことじ
5 years ago
Views:

1 JIS X :2010 を日本語訳してみる! ~Web アクセシビリティの基本のキ ~

2 あなたはビギナーですか?

3 はじめにアクセシビリティとは?

4 WWW の創世者かく語りき The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee W3C Director and inventor of the World Wide Web

Web accessibility means that people with disabilities can use the Web. Web accessibility means that people with disabilities More specifically, can use Web the accessibility Web.

5 Web accessibility means that people with disabilities can use the Web. Web accessibility means that people with disabilities More specifically, can use Web the accessibility Web. More means specifically, that people Web with disabilities accessibility can means perceive, that people understand, with disabilities navigate, and can interact perceive, with the understand, Web, that navigate, they can contribute and interact to the with the Web, and that they can contribute to the Web. Web. Web accessibility also benefits others, including older people with changing abilities due to aging. Introduction to Web Accessibility W3C WAI

6 Reframing Accessibility for the Web We need to change the way we talk about accessibility. Most people are taught that web accessibility means that people with disabilities can use the Web the official definition from the W3C. This is wrong. Web accessibility means that people can use the web. Reframing Accessibility for the Web

7 The New Accessibility Accessibility was once viewed as benefiting people with disabilities only - not anymore! Accessibility now exists on a continuum and covers a wide spectrum of needs, thus benefiting everyone in different situations to different degrees. This is especially true for the Web and Mobile technologies, where devices are diverse and their use varies across every conceivable context. The 11 th Web For All Conference New Accessibility

8 THIS IS NOT THE WEB

9 THIS IS THE WEB.

10 マルチスクリーン時代デバイスのいまマルチスクリーン時代デバイスのいま

11 THIS WILL BE THE WEB.

12 やはりお前らの Web アクセシビリティは間違っているやはりお前らの Web アクセシビリティは間違っている

ヤフーの事例スマートフォンやタブレットなどの普及によりお客さまの利用環境が今後ますます多様化しながら変化していくことが予想されますスマートフォンやタブレットなどの普及にヤフーはそのような時代の変化の中において一人ひとりのお客さまに対して誠実

13 ヤフーの事例スマートフォンやタブレットなどの普及によりお客さまの利用環境が今後ますます多様化しながら変化していくことが予想されますスマートフォンやタブレットなどの普及にヤフーはそのような時代の変化の中において一人ひとりのお客さまに対して誠実に向き合いながらウェブアクセシビリティを大切にしていきますよりお客さまの利用環境が今後ますます多様化しながら変化していくことが予想されますヤフーはそのような時代の変化の中において一人ひとりのお客さまに対して誠実に向き合いながらウェブアクセシビリティを大切にしていきます

14 コニカミノルタの事例近年ではスマートフォンやタブレットの普及などによりお客様の年齢や障害の有無のみならずお客様がウェブサイトにアクセスするデバイスや環境の多様化も加わってアクセシビリティの重要性はますます高まってきました近年ではスマートフォンやタブレットの普及などによりお客様の年齢や障害の有無のみならずお客様がウェブサイトにアクセスするデバイスや環境の多様化も加わってアクセシビリティの重要性はますます高まってきました

Reframing Accessibility for the Web Web accessibility means that people can use the web. Not people with disabilities. Not blind people and deaf people.

15 Reframing Accessibility for the Web Web accessibility means that people can use the web. Not people with disabilities. Not blind people and deaf people. Not people who have cognitive disabilities or men who are color blind or people with motor disabilities. People. People who are using the web. People who are using what you re building. Reframing Accessibility for the Web

16 全ユーザーが特殊な存在全ユーザーが特殊な存在近年の Web 利用者の動向をみると高齢者や障がい者を意識しなかったとしても情報にアクセスできるかどうかを真剣に考えなければ見られない読まれないコンテンツになることが分かりますコンテンツのアクセシビリティが未来を保証する

17 UX の土台となるアクセシビリティ Evaluation method of UX The User Experience Honeycomb BOOKSLOPE BLOG information architect/user experience designer

18 アクセシビリティとは? もはや高齢者障害者対応だけではなくより多くのユーザーがより多くの場面でより多くのデバイスから利用できるようにすること ( 将来の技術も含む ) より多くの利用環境に対応してより多くのユーザーにコンテンツを提供すること Webコンテンツの品質基準の一つあらゆる機会を最大化する (= 機会損失を未然に防ぐ ) アクセスできなければユーザビリティもUXもない

19 何をどこまで? の目安となるのがガイドライン WCAG 2.0(W3C 勧告 ) JIS X :2010 ISO / IEC 40500:2012

20 ところが日本語なんだけど読んでも時間の経過に伴って変化するメディアコンポーネントプログラムが解釈可能識別名及び役割メカニズム

21 そこで日本語訳してみようと思います時間の経過に伴って変化するメディアコンポーネントプログラムが解釈可能識別名及び役割メカニズム

22 植木真 ( うえきまこと ) 株式会社インフォアクシア代表取締役 Web アクセシビリティコンサルタントサイト診断ガイドライン & チェックリスト作成教育研修制作会社サポートなど国内外のアクセシビリティガイドライン策定に従事 W3C WCAG ワーキンググループ JIS X 原案作成ワーキンググループウェブアクセシビリティ基盤委員会 (WAIC) 委員長今年度は JIS X 改正原案作成委員会委員長を兼任

23 アクセシビリティ確保の基本

24 中でも対応が難しそうなのはスクリーンリーダー画面読み上げソフト対応

25 スクリーンリーダー対応で留意すべきポイントの例ページの内容が分かるページタイトルを記述するメインコンテンツへ移動できる手段を提供する見出しやリストなどの文書構造をマークアップするリンクテキストはリンク先が分かるように記述する情報を伝えている画像に代替テキストを提供する色の違いだけで情報を伝えないようにするキーボードだけでも操作できるようにするフォームコントロールのラベルをマークアップするデータテーブルの構造をマークアップするエラーメッセージではエラー箇所とその修正方法を説明するなど

26 スクリーンリーダー対応と SEO との共通点スクリーンリーダー対応と SEO には共通点が多い Google 検索エンジン最適化スターターガイド

27 キーワードは Machine Readable Web コンテンツをマシンリーダブルにすること

28 マシンリーダブルとは? 今や誰でもWebで情報発信できる時代だしかしヒューマンリーダブルな高品質さと適切なマシンリーダブルさを両立してデザインできるのはごくわずかなプロフェッショナルだけである素人とは違う Web プロフェッショナルの仕事としての Web コンテンツ開発を考えてみた ( 長谷川恭久 )

29 作成したデータを人間が読みやすくするのとは別にコンピュータにも処理しやすくすることで何倍にも活用の幅が広がるマシンリーダビリティの重要性東日本大震災と情報インターネット Google

30 マシンリーダブルとは? Machine Readable = Machine + Read + Able マシン + 読む + できるマシン? たぶん違う w スーパーストロングマシン新日本プロレスリング

31 でもないはず

32 マシン = ユーザーエージェント HTML user agent An HTML user agent is any device that interprets HTML documents. User agents include visual browsers (text-only and graphical), non-visual browsers (audio, Braille), search robots, proxies, etc. 引用元 :HTML 4.01 Specification 4.1 Definitions

33 マシンリーダブルにするとは? ユーザーエージェントが HTML ソースからコンテンツを読みとれるようにすること *HTML の場合ビジュアルブラウザ text-only and graphical ノンビジュアルブラウザ ( 支援技術 ) audio, braille 検索クローラー search robots

34 基本はテキストとマークアップテキストが最もアクセシブル晴海トリトンスクエア <title> 要素でページタイトルになる <title> 晴海トリトンスクエア </title>

35 基本はテキストとマークアップ <h1> 要素で大見出しになる <h1> 晴海トリトンスクエア </h1> <li> 要素でリスト項目になる <li> 晴海トリトンスクエア </li>

36 基本はテキストとマークアップ <strong> 要素で強調される <strong> 晴海トリトンスクエア </strong> <a> 要素でリンクになる <a href= > 晴海トリトンスクエア </a>

37 THIS WILL BE THE WEB.

38 まず最初に押さえておきたい達成基準をチェック JIS X :2010 日本語訳

39 チェックポイント #1 ページタイトル

40 関連する JIS X :2010 の達成基準達成基準ページタイトル [ 等級 A] ウェブページには, 主題又は目的を説明したタイトルがなければならないページの内容がわかるページタイトルを付ける

41 ページタイトルのチェック方法ページタイトル (title 要素 ) でそのページがどういうページか ( ページの主題が ) 分かるかオススメはページタイトル + サイト名良い例 : アクセシビリティ (1)JIS X の概要 AccSell 悪い例 : アクセシビリティ (1) AccSell

42 チェックポイント #2 見出し

43 関連する JIS X :2010 の達成基準達成基準情報及び関係性 [ 等級 A] 表現を通じて伝達されている情報, 構造及び関係性は, プログラムが解釈可能でなければならないプログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は, それらはテキストで提供されていなければならない見出しは見た目だけでなくマークアップする

44 関連する JIS X :2010 の達成基準達成基準見出し及びラベル [ 等級 A] 見出し及びラベルは, 主題又は目的を説明していなければならない見出しはそのセクションの主題を説明する

45 見出しのチェック方法ページに見出しがあるかを目視で確認する見た目だけでなく h1~h6 要素で見出しをマークアップしているか見出しの文言がそのセクションのコンテンツ ( 主題 ) を説明しているか

46 見出しレベルはスタイルではなく文書構造で <h1> <h2> <h2> <h2> <h2> <h2> <h2> 見出しレベルは見た目の大きさ等ではなくその文書構造で決める直前にある見出しのセクションのサブセクション? それとも関係のない独立したセクション? <h2> or <h3>

47 ツール Web Developer Firefox 版 Google Chrome 版

48 チェックポイント #3 リスト

49 関連する JIS X :2010 の達成基準達成基準情報及び関係性 [ 等級 A] 表現を通じて伝達されている情報, 構造及び関係性は, プログラムが解釈可能でなければならないプログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は, それらはテキストで提供されていなければならないリストは見た目だけでなくマークアップする

50 リストのチェック方法ページにリストがあるかを目視で確認するリストのチェック : 見た目だけでなくリストの種類に応じてマークアップしているか順不同リスト :ul 要素 li 要素番号付きリスト :ol 要素 li 要素定義リスト :dl 要素 dt 要素 dd 要素

51 順不同リストリスト項目 1 リスト項目 2 リスト項目 3 リスト項目 4 <ul> <li> リスト項目 1</li> <li> リスト項目 2</li> <li> リスト項目 3</li> <li> リスト項目 4</li> </ul>

52 番号付きリスト 1. リスト項目 1 2. リスト項目 2 3. リスト項目 3 4. リスト項目 4 <ol> <li> リスト項目 1</li> <li> リスト項目 2</li> <li> リスト項目 3</li> <li> リスト項目 4</li> </ol>

53 定義リスト拡大鏡 Windows OSに標準で搭載されている画面拡大ソフト <dl> <dt> 拡大鏡 </dt> 用語とその説明文をマークアップするために用いる <dd>windows OSに標準で搭載されている画面拡大ソフト </dd> </dl>

54 チェックポイント #4 リンクテキスト

55 関連する JIS X :2010 の達成基準達成基準文脈におけるリンクの目的 [ 等級 A] それぞれのリンクの目的が, リンクのテキストだけから, 又はプログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたものから解釈できなければならないただし, リンクの目的が一般的にみて利用者にとってあいまい ( 曖昧 ) な場合は除くリンクテキストだけでリンク先が分かるようにする

56 リンクテキストのチェック方法リンクテキスト ( 画像の場合は代替テキスト ) だけでリンク先がどういうページか分かるか悪い例 : アクセシビリティセミナーの参加お申込みはこちら良い例 : アクセシビリティセミナーの参加お申込み (SEO 的には ) リンク先のページのキーワードになる

57 関連する JIS X :2010 の達成基準達成基準文脈におけるリンクの目的 [ 等級 A] それぞれのリンクの目的が, リンクのテキストだけから, 又はプログラムが解釈可能なリンクの文脈をリンクのテキストと合わせたものから解釈できなければならないただし, リンクの目的が一般的にみて利用者にとってあいまい ( 曖昧 ) な場合は除くまたはリンクの文脈と合わせて分かるようにする

58 プログラムが解釈可能なリンクの文脈とは? JIS X :2010 の等級 A に準拠する上では以下の文脈との組み合わせでも OK: 1. リンクの含まれている文 ( 一つの文章 ) 2. リンクの含まれているリスト項目 (<li> 要素 ) 3. リンクの含まれているパラグラフ (<p> 要素内 ) 4. リンクの含まれているセルと関連付けられた見出しセル ( 関連付けられている <th> 要素 ) 5. リンクの直前にある見出し (<h1>~<h6> 要素 )

59 文脈 1: リンクの含まれている文アクセシビリティセミナーの参加お申込みはこちらアクセシビリティセミナーの参加お申込みの詳細各講座に関するお問い合わせはここをクリック達成基準を満たすことはできるがオススメしません

60 文脈 2: リンクの含まれているリスト項目アクセシビリティセミナーの参加お申込みはこちら有料セミナーの詳細はこちら各講座に関するお問い合わせはこちら li 要素でマークアップされたリスト項目であること達成基準を満たすことはできるがオススメしません

61 文脈 3: リンクの含まれているパラグラフアクセシビリティセミナーは 2 月 11 日に晴海トリトンスクエアで開催しますただいまセミナー受講の申込を受付中ですお申込みはこちら p 要素でマークアップされたパラグラフであること達成基準を満たすことはできるがオススメしません

62 文脈 4: リンクの含まれているデータテーブル有料セミナー HTML 版 Word 版 PDF 版オープンセミナー HTML 版 Word 版 PDF 版展示ブース HTML 版 Word 版 PDF 版見出しセルが th 要素でマークアップされたデータテーブルであること

63 文脈 5: リンクの直前にある見出し Webアクセシビリティ講座スケジュール受講申し込みお問い合わせ Webユーザビリティ講座スケジュール受講申し込みお問い合わせ h1~h6 要素でマークアップされた見出しであること

64 チェックポイント #5 画像の代替テキスト

65 関連する JIS X :2010 の達成基準達成基準非テキストコンテンツ [ 等級 A] 利用者に提示されるすべての非テキストコンテンツには, 同等の目的を果たす代替テキストを提供しなければならないただし, 次の場合は除く f) 装飾, 整形及び非表示非テキストコンテンツが, 装飾だけを目的にしているとき, 見た目の整形のためだけに用いられているとき, 又は利用者に提供されるものではないとき, 支援技術が無視できるように実装されている画像の情報と同等の代替テキストを提供する

66 例 1. 文字画像画像にある文字をそのまま記述する第一生命ホール NEWS 弁当ステーション専門店それぞれのこだわりが満載トリトンポイントカード入会費年会費無料! 毎月 5 のつく日はポイント 3 倍!! 66

67 例 2. 写真画像写真であることが分かるように記述するとよい書籍伝わる! 修造トークの表紙の写真写真 : 書籍伝わる! 修造トークの表紙リンクの場合は写真を説明する必要はなくリンク先がどういうページか分かるように記述する 67

68 例 3. 顔写真画像顔写真であることが分かるように記述するとよい山本和泉の顔写真顔写真 : 山本和泉顔写真であることが写真 : よりも明確になる 68

69 例 4. グラフ画像グラフが提示しているデータを記述する製品別シェアの円グラフ : 製品 A 55% 製品 B 20% 製品 C 10% その他 15% alt 属性ではなくデータテーブルで同じデータを提供してもよい 69

70 例 5. フロー図フロー図で説明している内容を記述する登録申込の流れ STEP 1. 登録申込 STEP 2. 書類提出 STEP 3. 許可証交付登録申込の流れ :STEP 1. 登録申込 STEP 2. 書類提出 STEP 3. 許可証交付 70

71 代替テキストを記述する上での注意点冗長な文言にならないようにする例えば以下のような文言は記述しなくてもよいの画像の写真ですへのリンク画像にない文言は記述しない補足説明が必要なら画像にも明記すべきでは? 画像にあるアイコンの説明はアイコンでしか伝えていない情報ならば記述すべき 71

72 もしかしたら近い将来自動化されちゃう??? A picture is worth a thousand (coherent) words: building a natural description of images

73 チェックポイント #6 ピュアな装飾などの画像

74 関連する JIS X :2010 の達成基準達成基準非テキストコンテンツ [ 等級 A] 利用者に提示されるすべての非テキストコンテンツには, 同等の目的を果たす代替テキストを提供しなければならないただし, 次の場合は除く f) 装飾, 整形及び非表示非テキストコンテンツが, 装飾だけを目的にしているとき, 見た目の整形のためだけに用いられているとき, 又は利用者に提供されるものではないとき, 支援技術が無視できるように実装されている情報を伝えていない画像は支援技術が無視できるように実装する

75 装飾画像の代替テキストのチェック方法情報を伝えていない画像かどうか支援技術が無視できるように次のように実装されているか alt 属性値が空 (alt= ) になっているかまたは CSSの背景画像になっているか

76 厚生労働省の Web サイト : 通常の表示

77 厚生労働省の Web サイト : ハイコントラスト表示

78 Windows のハイコントラスト表示によるチェック同じ弱視 / ロービジョンでもやや軽度のユーザーが利用していることが多い Windows 標準の拡大鏡とは異なる CSS の背景画像は表示されない画像には <img> 要素を用いる alt 属性で代替テキストを提供する装飾画像の場合は alt 属性を空 (alt= ) にするハイコントラスト表示で非表示でも OK なら CSS を用いる文字画像の背景を透過にしない

79 HTML5 ページの領域 ( セクション ) もマシンリーダブルに

80 セクショニング要素 <header> <nav> <main> <section> <article> <header> <footer> <aside> <form> 検索 <div id= application > <footer>

81 ランドマーク role <header role= banner > <nav role= navigation > <main role= main > <section role= region > <article role= article > <header> <aside role= complementary > <form role= search > 検索 <footer> <div id= application role= application > <footer role= contentinfo >

82 チェックポイント #7 キーボード操作

83 関連する JIS X :2010 の達成基準達成基準キーボード操作 [ 等級 A] コンテンツのすべての機能は, 個々のキーストロークに特定のタイミングを要することなく, キーボードインタフェースを通じて操作可能でなければならないただし, その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除くキーボードだけでも操作できるようにする

84 関連する JIS X :2010 の達成基準達成基準フォーカス順序 [ 等級 A] ウェブページが順番にナビゲートできて, そのナビゲーション順序が意味又は操作性に影響を及ぼす場合, フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取らなければならないキーボード操作時のフォーカス順序に注意する

85 関連する JIS X :2010 の達成基準達成基準視覚的に認識可能なフォーカス [ 等級 AA] キーボード操作が可能なユーザインタフェースには, キーボードフォーカスの状態が視覚的に認識できる操作モードがなければならないキーボードフォーカスの位置が分かるようにする

86 関連する JIS X :2010 の達成基準達成基準オンフォーカス [ 等級 A] いずれのコンポーネントも, フォーカスを受け取ったときに状況の変化を引き起こしてはならないフォーカスを受け取る以外の挙動をしない

87 状況の変化は用語の定義に注意状況の変化 (changes of context) ウェブページのコンテンツにおける大きな変化で, 利用者が気づかないと, ページ全体を一度に見ることのできない利用者をまごつかせてしまうおそれのあるもの状況の変化には次に挙げるものの変化が含まれる - ユーザエージェント - ビューポート - フォーカス - ウェブページの意味を変えるコンテンツ定義されている内容以外は該当しない

88 状況の変化に該当する具体例状況の変化 (changes of context) 例新しいウィンドウを開くこと, フォーカスを異なる要素へ移動させること, 新しいウェブページへ移動すること ( 新しいウェブページへ移動したかのように思わせてしまうことも含む ), ウェブページの内容を大きく再配置することなどは, 状況の変化の事例であるユーザーが予期しない挙動のこと

89 キーボード操作のチェック方法マウスで操作できる機能が全てキーボードだけでも同じ操作ができるかキーボードフォーカスの現在位置が表示されているかフォーカス移動順序に問題がないかページの先頭から最後まで状況の変化が起こることなくキーボードフォーカスを移動できるか

90 モーダルダイアログ The Incredible Accessible Modal Window

91 ヒューマンリーダブルも重要素人とは違う Web プロフェッショナルの仕事としての Web コンテンツ開発を考えてみた ( 長谷川恭久 )

92 チェックポイント #8 色のコントラスト

93 関連する JIS X :2010 の達成基準達成基準最低限のコントラスト [ 等級 AA] テキスト及び画像化された文字の視覚的な表現には, 少なくとも 4.5:1 のコントラスト比がなければならないただし, 次の場合は除く a) 大きな文字サイズの大きなテキスト及びサイズの大きな画像化された文字には, 少なくとも 3:1 のコントラスト比がある文字色と背景色とのコントラスト比を 4.5:1 以上確保する

94 関連する JIS X :2010 の達成基準 b) 附随的テキスト又は画像化された文字において, 次の場合はコントラストの要件は該当しないアクティブではないユーザインタフェースコンポーネントの一部である, 装飾だけを目的にしている, だれ ( 誰 ) も視覚的に確認できない, 又は重要な他の視覚的なコンテンツを含む写真の一部分である c) ロゴタイプロゴ又はブランド名の一部である文字には, コントラストの要件はない以下のようなものは対象外 : 非アクティブなフォームコントロール装飾目的の文字や写真の中の文字ロゴマークなど

95 チェックポイント #9 色の違い

96 関連する JIS X :2010 の達成基準達成基準色の使用 [ 等級 A] 情報を伝える, 何が起こるか若しくは何が起きたかを示す, 利用者の反応を促す, 又は視覚的な要素を区別する視覚的な手段として, 色だけを使用してはならない色の違いが分からなくても理解できるようにする

97 赤字は必須項目です悪い例 : 以下のフォームに入力してください赤字は必須項目です名前メールアドレス電話番号色の違いが分からないとどれが必須項目か分からない

98 赤字は必須項目です良い例 : 以下のフォームに入力してください赤字は必須項目です名前 [ 必須 ] メールアドレス [ 必須 ] 電話番号テキストでも伝えているので色の違いが分からなくてもどれが必須項目か分かるテキストがあれば音声や点字にも変換される

99 チェックポイント #10 動画のキャプション

100 JIS X :2010 の動画に関する達成基準達成基準収録済みの音声コンテンツのキャプション [ 等級 A] 同期したメディアに含まれているすべての収録済みの音声コンテンツに対して, キャプションを提供しなければならないただし, その同期したメディアがテキストの代替メディアであって, 代替メディアであることが明確にラベル付けされている場合は除く動画 ( 収録済み ) にキャプションを提供する

101 用語定義キャプション (captions) そのメディアのコンテンツを理解するのに必要な, 会話及び会話でない音声情報の両方に対する, 同期した視覚的表現又は代替テキスト注記キャプションは発話だけの字幕と似ているが, 次の点において異なるすなわち, キャプションは, 発話コンテンツだけでなく, その番組の内容を理解するために必要となる, 発話ではない音声情報と等価な内容も伝えるつまり, 効果音, 音楽, 笑い声, 話者の特定, 位置なども含まれる引用元 : JIS X :2010 規格票

102 Shift8 でのプレゼン資料動画にキャプション付けなきゃダメよ ~ ダメダメ!

103 JIS X :2010 の動画に関する達成基準達成基準収録済みの音声コンテンツのキャプション [ 等級 A] 同期したメディアに含まれているすべての収録済みの音声コンテンツに対して, キャプションを提供しなければならないただし, その同期したメディアがテキストの代替メディアであって, 代替メディアであることが明確にラベル付けされている場合は除くテキストコンテンツの動画版である場合は除く

104 まとめ

105 アクセシビリティとは Webコンテンツの品質基準の一つマルチデバイス & マルチスクリーンの時代ウェアラブルデバイスやスマートデバイスの登場キーワードはマシンリーダブルアクセスできなければユーザビリティもUXもない単なる高齢者障害者対応だけではないコンテンツ制作の目安となるのはガイドライン W3C WCAG 2.0 ISO/IEC 40500:2012 JIS X : 年度に改正される予定

106 ポイント一覧ページの内容がわかるページタイトルを付ける見出しは見た目だけでなくマークアップする見出しはそのセクションの主題を説明するリストは見た目だけでなくマークアップするリンクテキストだけでリンク先が分かるようにするまたはリンクの文脈と合わせて分かるようにする画像の情報と同等の代替テキストを提供する情報を伝えていない画像は支援技術が無視できるように実装するキーボードだけでも操作できるようにするキーボード操作時のフォーカス順序に注意するキーボードフォーカスの位置が分かるようにするフォーカスを受け取る以外の挙動をしない文字色と背景色とのコントラスト比を4.5:1 以上確保する色の違いが分からなくても理解できるようにする動画 ( 収録済み ) にキャプションを提供する

107 誰でも最初はビギナービギナー卒業は意外と早いはず

108 AccSell Meetup #008 集まれ! アクセシビリティービギナーズ!

JIS X :2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X :2016 対象範囲以下のウェブページただし外の以

JIS X :2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X :2016 対象範囲以下のウェブページただし外の以 JIS X 8341-3:2016 附属書 JB に基づく試験結果表示 ( ウェブページ単位 ) 規格の規格番号及び改正年 JIS X 8341-3:2016 対象範囲 https://www.amed.go.jp/ 以下のウェブページただし https://www.amed.go.jp/ 外の以下のウェブページ外部サービスを利用したお問い合わせフォーム及び Ustream.tv で公開しているコンテンツは対象範囲外とします