公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
「HTMLは簡単だよ」という声をよく聞きます。 確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。 HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。 10 HTML Elements You Didn't Know You Needed by Emma Wedekind 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Audio要素 Blockquote要素 Output要素 Picture要素 Progress要素 Meter要素 Template要素 Time要素 Video要素
ブラウザが構築する支援技術とやりとりするためのアクセシビリティツリーを操作できるAPI、Accessibility Object ModelというAPIが WICG で議論されていて、すでにいくつかのブラウザでは実験的な実装もされています。 AOMは、断片的に読むことはあったのですが、今月の25日（日）に開催されるHTML5 Conference 2018でウェブのセマンティクスやマークアップについて登壇する機会をいただきいたということもあり、きちんと読み込むついでに日本語に訳しはじめました。 The Accessibility Object Model (AOM) 日本語訳 | aom 日本語訳したのは、仕様と解説ですが、このAOMのリポジトリ内での仕様の策定は今後なされなさそうなので、仕様を見る必要性は薄いと思います。 ウェブアクセシビリティ基盤委員会(WAIC)の翻訳ワーキンググルー
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
『JIS X 8341-3:2016』レベル Aの達成基準（W3C勧告『WCAG 2.0』のレベル Aと同じ）をベースにして、エー イレブン ワイ（株式会社インフォアクシア）が独自に作成した『Webアクセシビリティ逆引きガイドライン』です。注意事項をご確認の上、Webコンテンツのアクセシビリティ向上にご活用ください。 最終更新日：2018年12月15日 注意事項 HTMLのWebページを対象にしています。 このガイドラインに沿って制作したWebコンテンツが、『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準を満たすことを保証するものではありません。 『JIS X 8341-3:2016』や『WCAG 2.0』の達成基準が適用されるすべてのケースを網羅しているわけではありません。 また、達成基準で要求されている事項と異なるものが一部含まれています（その場合、ほとんどはユー
音声出力環境における擬似要素(::before, ::after)の内容(content)の読み上げについて Updated 2015.01.20 / Published 2015.01.19 スクリーンリーダーや音声ブラウザなどの音声出力環境で::before擬似要素、::after擬似要素にcontentプロパティで生成した内容は多くのソフトウェアで読み上げることができます。使い方次第で、薬にも毒にもなりえます。読み上げることがないように制御したい場合は、aria-hiddenをtrueで設定するしか有効な方法がなく、制御できるのは対応しているものに限られます。 CSSの内容生成について HTMLなどで作られた文書内に直接表現されないものを表現するためにCSSには擬似要素というセレクタが用意されてます。CSS2よりcontentプロパティを伴って文書中に内容を生成できる:before擬
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込
WAI-ARIAを活用したフロントエンド実装 第1回 role属性、aria属性の基礎知識 Webコンテンツアクセシビリティを確保するさまざまな仕様のうち、WebサイトやWebアプリケーションで活用できるrole属性とaria属性について取り上げます。まず、両者の基礎的な知識から解説します。 はじめに 情報アクセシビリティに関する法整備などの背景もあり、アクセシビリティの確保は、今後、エンジニアとして無視できない技術となってきました。 あなたがこれまで、アクセシビリティに対して、あまり興味のないマークアップ・エンジニア、フロントエンド・エンジニアだったとしても、HTMLとSVGの追加仕様であるWAI-ARIA（ウェイ・アリア）を理解すれば、Webサイトのアクセシビリティを強化できるのはもちろんのこと、CSS設計やJavaScriptでのUI実装の際にも、WAI-ARIAの考え方を役立てるこ
Shows how different HTML attributes behave in commonly used screen readers. The results include two types of test: Expected to work - these tests show support when accessibility features are used correctlyExpected to fail - these tests show what happens when accessibility features are used incorrectly (marked with ) alt NVDAJAWSVoiceOverEdgeFFCrEdgeFFCrMaciOS100% 98% 100% 100% 94% 100% 99% 90%
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
