検索結果
次のキーワードについて検索: ''. 検索結果 1 - 18 ／ 18 件 (0.0223 秒). 検索条件の修正
1.
広報とよなか4月号
epub版（抜粋） 広報誌はできるだけたくさんの市民の方に読んでいただきたい媒体ですが、アンケートなどで、年齢層によっては広報誌を全く読まないという結果も出ています。 そこで、比較的紙の媒体を読まない年齢層を視野に入れ、web、端末、スマートフォンなどで閲覧できるよう、汎用性の高いepubで、視覚的に見せている広報誌をどのように表現できるのかを、今回イーパ部の活動を通して試みる機会を得ることができましたので、チームAはそれに取り組みました。 媒体として、「広報とよなか4月号」の過去のデータを許可をいただき使用。 これはイーパ部の活動として独自に制作させていただいたものですので、豊中市の意向とは関係ありません。 制作フロー 八尋担当 広報誌用に作成した InDesignデータを流用してepub書き出し …の予定でしたが、印刷用に作られたデータは複雑で、 epub書き出し用に調整するのに非常に時間を費やした 上に、エラーで書き出しすらできませんでした 断念 epub書き出し用に、 InDesignで新規に作成 本文中に使用されているピクトをテキスト変換や機種 依存文字の修正などのテキストの調整や、画像データ をRGBに変換、写真の代替テキストなど挿入など epub書き出し みるく担当 アクセシビリティチェック 写真には適切な代替テキストがあるかどうか 背景色と文字色のコントラスト比は十分取れているか 文章構造に基づいてマークアップされているか XHTML&CSS修正作業&content.opfとtoc.ncxファイル作成 アクセシビリティチェックでひっかかった箇所の修正 デザイン通り表示していない箇所の修正 いらないタグやid,classを削除 content.opfには使用するファイルをすべてここに記述 toc.ncxは、目次を作成するファイルなので見出しを記述 EPUBコンテナを作成 OEBPSフォルダとMETA-INFフォルダをzip形式で圧縮 圧縮したファイルの形式をepubに変更 Windows用の「ePubPack」というツールを使用しEPUBコンテナを作成 チーム全員 レイアウト確認 Adobe Digital Editions・Firefoxのアドオン・iPad・iPhone・CopperReader・Himawari 修正 確認 修正 確認 修正 完成 目指したこと アクセシブルにする マルチデバイス対応 上記の条件をクリアしつつ、理解しやすいく退屈しないレイアウト レイアウトについて ...
epub版（抜粋） 広報誌はできるだけたくさんの市民の方に読んでいただきたい媒体ですが、アンケートなどで、年齢層によっては広報誌を全く読まないという結果も出ています。 そこで、比較的紙の媒体を読まない年齢層を視野に入れ、web、端末、スマートフォンなどで閲覧できるよう、汎用性の高いepubで、視覚的に見せている広報誌をどのように表現できるのかを、今回イーパ部の活動を通して試みる機会を得ることができましたので、チームAはそれに取り組みました。 媒体として、「広報とよなか4月号」の過去のデータを許可をいただき使用。 これはイーパ部の活動として独自に制作させていただいたものですので、豊中市の意向とは関係ありません。 制作フロー 八尋担当 広報誌用に作成した InDesignデータを流用してepub書き出し …の予定でしたが、印刷用に作られたデータは複雑で、 epub書き出し用に調整するのに非常に時間を費やした 上に、エラーで書き出しすらできませんでした 断念 epub書き出し用に、 InDesignで新規に作成 本文中に使用されているピクトをテキスト変換や機種 依存文字の修正などのテキストの調整や、画像データ をRGBに変換、写真の代替テキストなど挿入など epub書き出し みるく担当 アクセシビリティチェック 写真には適切な代替テキストがあるかどうか 背景色と文字色のコントラスト比は十分取れているか 文章構造に基づいてマークアップされているか XHTML&CSS修正作業&content.opfとtoc.ncxファイル作成 アクセシビリティチェックでひっかかった箇所の修正 デザイン通り表示していない箇所の修正 いらないタグやid,classを削除 content.opfには使用するファイルをすべてここに記述 toc.ncxは、目次を作成するファイルなので見出しを記述 EPUBコンテナを作成 OEBPSフォルダとMETA-INFフォルダをzip形式で圧縮 圧縮したファイルの形式をepubに変更 Windows用の「ePubPack」というツールを使用しEPUBコンテナを作成 チーム全員 レイアウト確認 Adobe Digital Editions・Firefoxのアドオン・iPad・iPhone・CopperReader・Himawari 修正 確認 修正 確認 修正 完成 目指したこと アクセシブルにする マルチデバイス対応 上記の条件をクリアしつつ、理解しやすいく退屈しないレイアウト レイアウトについて ...
2.
お問い合わせ
// +---------------------------------------------------------------------------+ // | Geeklog FormMail Static Page | // +---------------------------------------------------------------------------+ // | Copyright (C) 2008-2010 by the following authors: | // | | // | Authors : Hiroshi Sakuramoto - hiro AT winkey DOT jp | // | Sponser : White Bear Family CO., LTD | // | Coordinate ...
// +---------------------------------------------------------------------------+ // | Geeklog FormMail Static Page | // +---------------------------------------------------------------------------+ // | Copyright (C) 2008-2010 by the following authors: | // | | // | Authors : Hiroshi Sakuramoto - hiro AT winkey DOT jp | // | Sponser : White Bear Family CO., LTD | // | Coordinate ...
3.
aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果
aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果 2015年6月26日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2015.1jp/Firefox38.0.5 Windows7/PC-Talker7/Internet Explorer11 iOS 8.3/VoiceOver/Safari Android4.4.2/TalkBack4.2.0.8/Sブラウザ HTMLの記述 NVDA PC-Talker VoiceOver TalkBack <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 空行 メールアドレス※の文字入力 メールアドレス※ テキストフィールド 半角英数で入力してください。 メールアドレス エディットテキスト 半角英数で入力してください。 <label>メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> エディット オートコンプリート 半角英数で入力してください。 空行 メールアドレス※の文字入力 ...
aria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果 2015年6月26日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2015.1jp/Firefox38.0.5 Windows7/PC-Talker7/Internet Explorer11 iOS 8.3/VoiceOver/Safari Android4.4.2/TalkBack4.2.0.8/Sブラウザ HTMLの記述 NVDA PC-Talker VoiceOver TalkBack <label id="label--email">メールアドレス ※</label> <input type="text" id="email" name="email" aria-labelledby="label--email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> メールアドレス※ エディット オートコンプリート 半角英数で入力してください。 空行 メールアドレス※の文字入力 メールアドレス※ テキストフィールド 半角英数で入力してください。 メールアドレス エディットテキスト 半角英数で入力してください。 <label>メールアドレス ※</label> <input type="text" id="email" name="email" aria-describedby="description--email" /> <span id="description--email">半角英数で入力してください。</span> エディット オートコンプリート 半角英数で入力してください。 空行 メールアドレス※の文字入力 ...
4.
Validation result how to read the combination of ...
Validation result how to read the combination of the aria-labelledby attribute and the aria-describedby attribute by screen readers. I verified on June 26, 2015. The combination of version of the OS and the screen reader and the browser is as follows. Windows7/NVDA2015.1jp/Firefox38.0.5 Windows7/PC-Talker7/Internet Explorer11 iOS 8.3/VoiceOver/Safari Android4.4.2/TalkBack4.2.0.8/S browser The screen ...
Validation result how to read the combination of the aria-labelledby attribute and the aria-describedby attribute by screen readers. I verified on June 26, 2015. The combination of version of the OS and the screen reader and the browser is as follows. Windows7/NVDA2015.1jp/Firefox38.0.5 Windows7/PC-Talker7/Internet Explorer11 iOS 8.3/VoiceOver/Safari Android4.4.2/TalkBack4.2.0.8/S browser The screen ...
5.
チームBの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.3.1から7.2.1.2)
チームBの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.3.1から7.2.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.3.1から7.2.1.2の実装チェックを2014年12月14日に行いました。 7.1.3.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況 A： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合： 1 セマンティックなマークアップを用いて、強調したテキスト又は特別なテキストを示す ○ ○ AF A-1 G115 H49 強調、又は視覚的な装飾個所が特別な意味を持つ場合、その情報がセマンティックなマークアップによって伝えられているかどうかを確認する。font、b、i、uの使用は禁止されてはいないが、セマンティックなマークアップ(em、strong)が併用されていなければならない。 2 引用箇所がある場合、blockquote要素でセマンティックにマークアップする ○ ー AF 該当要素なし A-1 G115 H49 引用箇所に、blockquote要素が使われていることを確認する。 3 引用箇所に参照情報がある場合、参照先を cite 要素でセマンティックにマークアップする ○ ー AF 該当要素なし A-1 G115 H49 ...
チームBの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.3.1から7.2.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.3.1から7.2.1.2の実装チェックを2014年12月14日に行いました。 7.1.3.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況 A： ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合： 1 セマンティックなマークアップを用いて、強調したテキスト又は特別なテキストを示す ○ ○ AF A-1 G115 H49 強調、又は視覚的な装飾個所が特別な意味を持つ場合、その情報がセマンティックなマークアップによって伝えられているかどうかを確認する。font、b、i、uの使用は禁止されてはいないが、セマンティックなマークアップ(em、strong)が併用されていなければならない。 2 引用箇所がある場合、blockquote要素でセマンティックにマークアップする ○ ー AF 該当要素なし A-1 G115 H49 引用箇所に、blockquote要素が使われていることを確認する。 3 引用箇所に参照情報がある場合、参照先を cite 要素でセマンティックにマークアップする ○ ー AF 該当要素なし A-1 G115 H49 ...
6.
D2DRAFTの公式サイト JIS X 8341-3:2016レベルAの実装チェックリスト2(7.2.4.2から7.4.1.2)
D2DRAFTの公式サイトのJIS X 8341-3:2016 レベルA達成基準の実装チェック結果2(7.2.4.2から7.4.1.2) 「D2DRAFT」公式サイトのJIS X 8341-3:2016-レベルA達成基準7.2.4.2から7.4.1.2の実装チェックを2016年5月に行いました。 7.2.4.2の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 title要素を用いて、コンテンツの内容が分かるページタイトルを提供する ○ ○ HC 1 G88 H25 head要素内にコンテンツに関連し、ウェブページを特定できるtitle要素があるか確認する。 7.2.4.2の試験結果 1 総合結果 ○ ○ HC 7.2.4.3の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取るようにする ○ ○ HC 1, 2 G59 ...
D2DRAFTの公式サイトのJIS X 8341-3:2016 レベルA達成基準の実装チェック結果2(7.2.4.2から7.4.1.2) 「D2DRAFT」公式サイトのJIS X 8341-3:2016-レベルA達成基準7.2.4.2から7.4.1.2の実装チェックを2016年5月に行いました。 7.2.4.2の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 title要素を用いて、コンテンツの内容が分かるページタイトルを提供する ○ ○ HC 1 G88 H25 head要素内にコンテンツに関連し、ウェブページを特定できるtitle要素があるか確認する。 7.2.4.2の試験結果 1 総合結果 ○ ○ HC 7.2.4.3の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取るようにする ○ ○ HC 1, 2 G59 ...
7.
チームAの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.1.1から7.1.2.3)
チームAの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.1.1から7.1.2.3) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.1.1から7.1.2.3の実装チェックを2014年12月14日に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF FireFoxのデベロッパーツール A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - HC A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - HC A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） 4 ...
チームAの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.1.1.1から7.1.2.3) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.1.1から7.1.2.3の実装チェックを2014年12月14日に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF FireFoxのデベロッパーツール A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - HC A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - HC A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） 4 ...
8.
チームCの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.2.2.1から7.4.1.2)
チームCの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.2.2.1から7.4.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.2.2.1から7.4.1.2の実装チェックを2014年12月14日に行いました。 7.2.2.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況 A： セッションの制限時間がある場合： 1 次のいずれかを適用する 複数の画面で構成されるフォームの最初のページに、利用者がセッションの制限時間を延長又は解除できるチェックボックスを提供する 利用者が制限時間を解除できる手段を提供する ○ - HC A-1,2 G133 G198 セッションの制限時間があるかどうかを確認し、時間制限がある場合、G133，G198で示された所定の手段のどれかが提供されていることを確認する。 状況 B： 制限時間がページ上のスクリプトで制御されている場合： 1 次のいずれかを適用する 利用者が制限時間を解除できる手段を提供する 利用者が初期設定の制限時間を10倍に設定できる手段を提供する 制限時間が切れようとしていることを利用者に警告するスクリプトを提供して利用者が初期設定の制限時間を延長できるようにする ○ - HC B-1,2,3 G198 G180 SCR16 ...
チームCの「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果(7.2.2.1から7.4.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.2.2.1から7.4.1.2の実装チェックを2014年12月14日に行いました。 7.2.2.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況 A： セッションの制限時間がある場合： 1 次のいずれかを適用する 複数の画面で構成されるフォームの最初のページに、利用者がセッションの制限時間を延長又は解除できるチェックボックスを提供する 利用者が制限時間を解除できる手段を提供する ○ - HC A-1,2 G133 G198 セッションの制限時間があるかどうかを確認し、時間制限がある場合、G133，G198で示された所定の手段のどれかが提供されていることを確認する。 状況 B： 制限時間がページ上のスクリプトで制御されている場合： 1 次のいずれかを適用する 利用者が制限時間を解除できる手段を提供する 利用者が初期設定の制限時間を10倍に設定できる手段を提供する 制限時間が切れようとしていることを利用者に警告するスクリプトを提供して利用者が初期設定の制限時間を延長できるようにする ○ - HC B-1,2,3 G198 G180 SCR16 ...
10.
Validation result how to read ARIA tab interface ...
Validation result how to read ARIA tab interface example 16 patterns by screen readers. I used Accessible jQuery-ui Components Demonstration in validation 2 of Validation result how to read ARIA tab panel example 4 patterns by screen readers. But, It has a bug the environment in PC-Talker7/Internet Explorer11. So I ...
Validation result how to read ARIA tab interface example 16 patterns by screen readers. I used Accessible jQuery-ui Components Demonstration in validation 2 of Validation result how to read ARIA tab panel example 4 patterns by screen readers. But, It has a bug the environment in PC-Talker7/Internet Explorer11. So I ...
11.
WAI-ARIA対応のタブメニューを4種スクリーンリーダーで読み上げた検証結果1
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1 2016年12月 1日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 検証1 Tabs | jQuery UIの場合 jQuery UI - v1.12.1 - 2016-09-14 が使われているこちらのタブメニュー部分は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。また、li要素にはタブパネルdiv要素のidの値に関連付けられたaria-controls属性とa要素のidの値に関連付けられたaria-labelledby属性とaria-selected属性とaria-expanded属性が付いており、タブパネルにはa要素のidの値に関連付けられたaria-labelledby属性とaria-hidden属性が付いています。 読み上げ方 NVDA PC-Talker VoiceOver TalkBack 上から続けて読み上げた場合 クリック可能 タブ 展開 選択 「Nunc tincidunt」 タブ 折り畳み「Proin dolor」 タブ 折り畳み「Aenean lacinia」 (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo… 「Nunc tincidunt」の選択 タブで決定「Nunc tincidunt」 ...
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1 2016年12月 1日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 検証1 Tabs | jQuery UIの場合 jQuery UI - v1.12.1 - 2016-09-14 が使われているこちらのタブメニュー部分は、li要素にrole="tab"、a要素にrole="presentation"の記述になっています。また、li要素にはタブパネルdiv要素のidの値に関連付けられたaria-controls属性とa要素のidの値に関連付けられたaria-labelledby属性とaria-selected属性とaria-expanded属性が付いており、タブパネルにはa要素のidの値に関連付けられたaria-labelledby属性とaria-hidden属性が付いています。 読み上げ方 NVDA PC-Talker VoiceOver TalkBack 上から続けて読み上げた場合 クリック可能 タブ 展開 選択 「Nunc tincidunt」 タブ 折り畳み「Proin dolor」 タブ 折り畳み「Aenean lacinia」 (選択したタブに関連する(表示されている)タブパネルのコンテンツ内容)Proin elit arcu, rutrum commodo… 「Nunc tincidunt」の選択 タブで決定「Nunc tincidunt」 ...
12.
WAI-ARIA対応のタブメニューを4種スクリーンリーダーで読み上げた検証結果2
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2 WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1の検証2で使わせてもらったAccessible jQuery-ui Components Demonstrationでは、PC-Talker7/Internet Explorer11の環境でキーボード操作が出来ないという不具合がありましたので、HeydonWorks | The works, workings and reckonings of HeydonのPractical ARIA Examples「Simple ARIA tab interface」を使用させていただき、それを Tabs | jQuery UI(Query UI - v1.12.1 - 2016-09-14 )と同じWAI-ARIAの記述になるよう改変したものとWAI-ARIAの記述パターンを変えたものがどのように読み上げられるのか16パターンの検証をしました。 2016年12月 1日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 検証1 Simple ARIA tab interfaceを使用させていただき Tabs | jQuery UIと同じWAI-ARIAの記述を付けたものに改変したタブ型 ...
WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果2 WAI-ARIA対応のタブ型 UI を4種スクリーンリーダーで読み上げた検証結果1の検証2で使わせてもらったAccessible jQuery-ui Components Demonstrationでは、PC-Talker7/Internet Explorer11の環境でキーボード操作が出来ないという不具合がありましたので、HeydonWorks | The works, workings and reckonings of HeydonのPractical ARIA Examples「Simple ARIA tab interface」を使用させていただき、それを Tabs | jQuery UI(Query UI - v1.12.1 - 2016-09-14 )と同じWAI-ARIAの記述になるよう改変したものとWAI-ARIAの記述パターンを変えたものがどのように読み上げられるのか16パターンの検証をしました。 2016年12月 1日に検証した結果です。OSとスクリーンリーダーのバージョンとブラウザの組み合わせは下記の通りになります。 Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 検証1 Simple ARIA tab interfaceを使用させていただき Tabs | jQuery UIと同じWAI-ARIAの記述を付けたものに改変したタブ型 ...
13.
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果2(模範解答)(7.2.4.2から7.4.1.2)
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果2(模範解答)(7.2.4.2から7.4.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.2.4.2から7.4.1.2の実装チェックを2014年12月に行いました。 7.2.4.2の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 title要素を用いて、コンテンツの内容が分かるページタイトルを提供する ○ ○ HC 1 G88 H25 head要素内にコンテンツに関連し、ウェブページを特定できるtitle要素があるか確認する。 7.2.4.2の試験結果 1 総合結果 ○ ○ HC 7.2.4.3の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取るようにする ○ ○ HC 1, 2 G59 ...
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果2(模範解答)(7.2.4.2から7.4.1.2) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.2.4.2から7.4.1.2の実装チェックを2014年12月に行いました。 7.2.4.2の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 title要素を用いて、コンテンツの内容が分かるページタイトルを提供する ○ ○ HC 1 G88 H25 head要素内にコンテンツに関連し、ウェブページを特定できるtitle要素があるか確認する。 7.2.4.2の試験結果 1 総合結果 ○ ○ HC 7.2.4.3の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 1 ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取るようにする ○ ○ HC 1, 2 G59 ...
14.
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果1(模範解答)(7.1.1.1から7.2.4.1)
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果1(模範解答)(7.1.1.1から7.2.4.1) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.1.1から7.2.4.1の実装チェックを2014年12月に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - AF 該当要素なし A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - AF 該当要素なし A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） ...
「第15回宝塚映画祭」トップページのJIS X 8341-3:2010 等級A試験結果1(模範解答)(7.1.1.1から7.2.4.1) 「第15回宝塚映画祭」のサイトのトップページをJIS X 8341-3:2010-等級A達成基準7.1.1.1から7.2.4.1の実装チェックを2014年12月に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - AF 該当要素なし A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - AF 該当要素なし A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） ...
15.
D2DRAFTの公式サイト JIS X 8341-3:2016レベルAの実装チェックリスト1(7.1.1.1から7.2.4.1)
D2DRAFTの公式サイトのJIS X 8341-3:2016 レベルA達成基準の実装チェック結果1(7.1.1.1から7.2.4.1) 「D2DRAFT」公式サイトのJIS X 8341-3:2016-レベルA達成基準7.1.1.1から7.2.4.1の実装チェックを2016年5月に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - AF 該当要素なし A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - AF 該当要素なし A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） ...
D2DRAFTの公式サイトのJIS X 8341-3:2016 レベルA達成基準の実装チェック結果1(7.1.1.1から7.2.4.1) 「D2DRAFT」公式サイトのJIS X 8341-3:2016-レベルA達成基準7.1.1.1から7.2.4.1の実装チェックを2016年5月に行いました。 7.1.1.1の実装チェックリスト例 項番 実装方法 適合 適用 試験方法 注記 状況-番号-項目 関連する実装テクニック 検証方法 状況A： 短い説明によって、非テキストコンテンツと同じ目的を果たし、同じ情報を提示できる場合： 1 img要素にalt属性がある ○ ○ AF A-1, Short-3 H37 H37（alt属性の内容確認はA-5で実施） 2 applet 要素にalt属性がある ○ - AF 該当要素なし A-1, Short-4 H35 H35（alt属性およびボディの代替テキストの内容確認はA-5で実施） 3 object 要素のボディに代替テキストを記述する ○ - AF 該当要素なし A-1, Short-5 H53 H53（代替テキストの内容確認はA-5で実施） ...
16.
Validation result how to read ARIA tab interface ...
Validation result how to read ARIA tab interface example 4 patterns by screen readers. I verified on October 17, 2016. The combination of version of the OS and the screen reader and the browser is as follows. Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 The screen reader read by Japanese ...
Validation result how to read ARIA tab interface example 4 patterns by screen readers. I verified on October 17, 2016. The combination of version of the OS and the screen reader and the browser is as follows. Windows7/NVDA2016.3jp/Firefox48.0.2 Windows7/PC-Talker7/Internet Explorer11 iOS 9.3.5/VoiceOver/Safari Android5.0.1/TalkBack5.0.4/Google Chrome53.0.2785.124 The screen reader read by Japanese ...
18.
Validation how to read examples of aria-describedby and ...
Validation how to read examples of aria-describedby and aria-labelledby by NVDA of screen reader. Question1 is the input element has the aria-describedby attribute related to the dt element has id. And Question2 is the input element has the aria-labelledby attribute related to the dt element has id. The combination of ...
Validation how to read examples of aria-describedby and aria-labelledby by NVDA of screen reader. Question1 is the input element has the aria-describedby attribute related to the dt element has id. And Question2 is the input element has the aria-labelledby attribute related to the dt element has id. The combination of ...