アクセシビリティを考慮したHTMLコーディングガイド
これ何なの？ もともと私が社内メンバー向けに書いていたドキュメントで、 UIパーツ毎のアクセシビリティを考慮したHTMLコーディングTips集です。 社内のドキュメント置き場に眠っていたものですが、知見として社外にも共有出来る内容だなと思ったのと、アクセシビリティをこれからやっていこう！という方の参考になればと思い共有させて頂きます。 ※そもそもアクセシビリティって何なの？という方は、ウェブアクセシビリティ基盤委員会のサイトを見てみてください🔍 目次 おすすめVSCode拡張機能 🕹ボタン 📷 画像 🔍 ナビゲーション 💻 フォーム おすすめVSCode拡張機能 axe Accessibility Linter をインストールしておくとimgタグのalt忘れなど警告が表示されるので、アクセシブルでない書き方を未然に防げるので便利です！ 🕹ボタン buttun タグを使いましょう
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
アイコンフォントのアクセシビリティ向上 | Accessible & Usable
公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。
Webコンテンツの推奨実装方法集「WAI-ARIA Authoring Practices 1.1」 | フロントエンドBlog | ミツエーリンクス
2017年10月19日 Webコンテンツの推奨実装方法集「WAI-ARIA Authoring Practices 1.1」 UI開発者 宇賀 Webサイトに登場するUIの中には、HTMLに予め用意されている要素だけでは対応しきれないものが少なからず存在します。 たとえば、ユーザーが閲覧しているページがサイト内のどの位置に当たるかを示すパンくずリストなどは、それ自体を表すための要素は存在していないことから、人によって異なるマークアップで実装されています。 JavaScriptウィジェットも同様に、モーダルウィンドウやカルーセル、タブUIなどを表すための要素が仕様に定義されていません。それらをセマンティック且つアクセシブルに制作するためには、WAI-ARIAの知識や複雑なキーボード操作を自力で実装する時間が必要です。 元々HTMLの仕様では想定されていなかったコンテンツに限らず、制作するコン
メルマガ第106号を発行しました！
こんにちは！2017年1月25日（水）にAccSellメール・マガジン第106号を発行しました！ ［連載］植木 真の「こんなブログ記事見つけました！」 第57回: Using the aria-current attribute！ ［寄稿］技術の進化によって広がる選択肢をどう活かすか 伊敷 政英 ［連載］植木 真の「こんなブログ記事見つけました！」 第57回: Using the aria-current attribute！ aria-current属性、コレいいかもしんない！ このメルマガの読者の皆さんなら「WAI-ARIA」のことは既にご存知のことでしょう。そして、実際の案件で aria-*属性やrole属性を使っていることもあるのではないでしょうか。 ワタクシも「WAI-ARIA」を何らかの形で使うことが、ここ最近かなり増えてきました。今年は「WAI-ARIA」の実装がますます進ん
altはつけるだけじゃなくて - 実践アクセシブルHTML 第一回
この記事は、2003年6月17日発売の技術評論社「Web Site Design Vol.8」での連載記事「実践アクセシブルHTML」第1回の元原稿を、著者自身が公開しているものです。 画像にalt属性を よく「画像にはalt属性をつけましょう」というフレーズを耳にするかと思いますが、これはサイトのアクセシビリティ改善における対応のうち、もっともメジャーなものであるといえます。WAIのアクセシビリティガイドラインであるWCAG1.0には「テーブルをレイアウトに使ってはいけません」というような内容の項目もありますが、これに対して「よっしゃ、テーブルを使うのをやめよう」とあっさりと決断してサックリとそのように作り変えることなど、ほとんどのサイトにおいて無茶な話でしょう。しかし「すべての画像にalt属性をつけよう」というのはアクセシビリティの対応要件に必ずといって良いほど含まれます。これなら、た
table要素をスクリーンリーダーが表として扱うかはCSS次第だったりする件
2017年12月4日 著 みるく姐さん@milk54さんが、Web Accessibility Advent Calendar 2017の2日目のために、Re: A Responsive Accessible Tableという記事を書いてくださいました。その中で、A11YJ Slackの#q_and_aチャンネルにおける自分の発言を引用してくださったのですけど、それでふと思ったのがアクセシビリティオブジェクトの存在って実はあまり認知されていないかもしれない、ということです。別の表現をするなら、CSSをどう書こうともマークアップで意図したセマンティクスが変わることは無いと信じて疑わない人が少なく無いかもしれない、ということ（自分もかつてはその一人でした）。 @milk54さんの立てた「NVDAがなぜCSSでdisplay: blockにすると「テーブル」と読み上げないか？」という問いの裏には
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込
セマンティック HTML とはなんだろう | Kangaroonote
HTML5 の説明でよくでてくるのがセマンティクスの強化。 ここでひとつの疑問が浮かぶ。「はて、セマンティクスとはなんじゃろうか?」 これをひとに聞かれた時、案外言葉に詰まるので、ここはひとつ、セマンティクスとはなにかを簡単に説明する方法を考えてみる。 セマンティクスの意味 セマンティック HTML を考える前に、そもそもセマンティクスとはどういうものなのか。 セマンティクスとは言語学の領域のひとつで、日本語にすると意味論になる。 意味論はざっくり言うと言葉と意味の関係を扱う。 例えば食事中に「そこの醤油差しとって」と言われたとする。そしてその醤油差しが仮に空だったとする。 これを意味論的に解釈すると、醤油差しが欲しいという要求に応えるために空の醤油差しをとって相手に渡すことになる。 もうひとつの領域である語用論で「そこの醤油差しとって」を解釈すると、醤油差しが欲しいのは食べ物に醤油をかけ
【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ | バシャログ。
来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
