ゼロから始めるアクセシビリティ 「Backlog」の事例に学ぶ、ユーザーのための改善とは | イベント・セミナー
WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」
WordCamp Tokyo 2016 「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」で使用したスライドです。 リンクをクリックできなかったり、テキストでアウトラインが表示できないため、SlideShareにも公開しています。 SlideShare版：http://www.slideshare.net/sou_lab/wordcamptokyo2016 ※代替コンテンツとして、近日中にテキストデータも公開予定です。
2/25の東京Node学園で発表してきました。 E2Eテストはみんなしていますか？ 正直言うと、僕はあんまり好きじゃなかったです。お仕事では他の人が入れてくれたものが回っていたりしますが。前職で、SikuliXを使って社内向けのデスクトップアプリケーションのE2Eテストにトライしたことがあるんですが、すぐに壊れて動かなくなるので、費用対効果が出せなくてあきらめました（一人プロジェクトだったのもあります）。 絵でマッチングを行うのでボタン画像をいっぱいスクショをとっていく必要がある OCR機能はOSネイティブボタンの背景のグラデーションとかとの相性もあってあまりうまくいかず・・・自分で学習させるのも情報が少なかった。 ちょっとツールバーに新しいボタンを追加したりすると、絵が変わって動作しなくなる ボタンを画像で置くが、QtはOSごとにネイティブなルック＆フィールで描画するので、macOS用に
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』の第7章「アクセシビリティの組織導入」を公開するものです。 改正された障害者差別解消法や、デジタル庁の取り組みからの影響を受け、アクセシビリティ向上への機運は日ごとに高まっているように感じます。著名な企業がアクセシビリティへのスタンスを表明するケースも増えてきました。 しかし、こうした情報が目に入っているのは、あなたがアクセシビリティに関心がある側の人だからです。多くの場合、社内でのアクセシビリティへの意識はまだまだ高くないのが実態です。 個人や有志による非公式な取り組みでも、アクセシビリティは徐々に改善することは可能です。しかし、いずれは限界を迎えます。企業が提供するWebサイトやWebアプリケーションは組織で開発されており、大規模であり、かつ成長していくからです。 継続的に取り組み、成果を出し続けるため
コーディングWebアクセシビリティ : could
アクセシビリティ コーディングWebアクセシビリティ やさしく基本から書かれていますが、現場ですぐ使えるノウハウも盛り込まれています。実践的な入門書ですが、ネイティブアプリが全盛の今なぜ Web アプリのアクセシビリティなのかという疑問が残ります。 実践的な入門書 Webアクセシビリティの関連書籍は元々数が少ないですが、どれもお堅いイメージが漂うものばかり。そうしたなか、表紙から入りやすそうな「コーディングWebアクセシビリティ」は、ひとつ特異な存在ですし、今までの Web アクセシビリティ書籍のイメージを払拭しています。恐らくジャケ買い、またはジャケ立ち読みした人もいるのではないでしょうか。圧迫感のない文字の扱い、豊富にある図やイラストも、表紙の雰囲気を裏切っていません。 やさしく基本から書かれていますが、フォームやモーダルウィンドウといった、実装に悩む UI のアクセシビリティ向上のヒ
以前紹介した「コーディングWebアクセシビリティ」の電子書籍版が、ようやくリリースされました！ リリースに伴って無料版が公開されており、これがなかなかのボリュームです。Web制作に携わる人、特にコーディング関係者はこの機会に読んでおくことをお勧めします。 電子書籍版コーディングWebアクセシビリティ 本書はSmashing Magazineのアクセシビリティ担当：ヘイドン・ピカリング著「Apps For All(2014)」の訳書で、翻訳はBAの太田さんと伊原さんが監修したものです。 BAの二人は、僕の元同僚。 僕が知る中ではアクセシビリティといえば太田さん、太田さんの存在自体がアクセシブルと言ってもいいかもしれません。 そんな造詣が深い太田さんと伊原さん二人の監訳は訳書にありがちなぎこちない日本語ではなく、制作現場の生きた言葉で非常に分かりやすかったです。 電子書籍版では、4つのフォーマ
Peach🍑を紹介する記事で、絵文字が世界的な共通言語になりつつあると紹介しました。日本でも Twitter が紅白歌合戦用の特別ハッシュタグ＋絵文字を実装するなど、絵文字がコミュニケーションにおいて重要な位置付けになりつつあります。 しかし、アクセシビリティはどうなのでしょう。 目では絵として表示されていますが、中身はコードです。実際、どのように読み上げられるのでしょうか？そもそも読み上げられているのでしょうか？ サポートが広がる絵文字読み上げ 年々音声読み上げの精度は上がってきており、絵文字サポートもそれに合わせて増えてきているようです。例えば Google Voice は、2014 年に絵文字読み上げをサポートしましたし、NDVA でも有志の方が絵文字読み上げのための辞書を無料で配布しています（英語のみ）。 iOS の VoiceOver は、特別なアプリをインストールしなくてもす
リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。 Yahoo! User Interface Blogより もう3ヶ月ほど前のことですが、Yahoo! User Interface Blogで面白い取り組みをしていました。Empty Links and Screen Readersという記事です。その取り組みとは、リンクテキストをスクリーンから隠すための方法を1つ1つ検証し、どの方法がアクセシブルなのかを調査するというものです。 Yahooが調べたのは以下のリンクです。 通常のテキストとそれに対するリンク テキストもtitle属性もないリンク title属性はあるが、テキストがないリンク テキストの代わりに空白を入れたリンク これらのリンクに次のCSSを当てます。 特に指定しない offscreen visibility: hidden displ
![リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca97218ef8242074e15cf05e7764859f63dc3901/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523057%2F1460995386)
ただただし @tdtds Googleの新しいトップバーはコントラスト不足でアクセシビリティ的に問題あるんじゃねーの、と思って測ってみたらぜんぜん問題なかった。5.9:1もありやんの。Googleあなどれん。 2011-06-29 16:56:41 伊敷政英(Cocktailz) @cocktailzjp 5.9:1もあるんですか。でもやっぱり見づらい。RT @tdtds Googleの新しいトップバーはコントラスト不足でアクセシビリティ的に問題あるんじゃねーの、と思って測ってみたらぜんぜん問題なかった。5.9:1もありやんの。Googleあなどれん。 2011-06-29 17:13:39
「Xbox Adaptive Joystick」は，Xboxのアクセシビリティへの考えが詰まったコントローラ用アクセサリ。ドイツで実機をお試し［gamescom］
「Xbox Adaptive Joystick」は，Xboxのアクセシビリティへの考えが詰まったコントローラ用アクセサリ。ドイツで実機をお試し［gamescom］ 編集部：Junpoco Microsoftが2024年8月21日（海外時間）に発表した新プロダクト「Xbox Adaptive Joystick」は，身体の動きに制約のあるゲーマーのニーズに応える形で設計されたジョイスティックだ。 本製品は，Xbox用コントローラやXbox Adaptive Controller向けに作られた有線接続のアクセサリで，扱いやすい形状や重さ，Xboxアクセサリアプリでのボタンの再マッピングなど，さまざまなプレイ環境を想定したデザインやカスタマイズ性の高さが特徴となっている。 この新製品について，ドイツで開催中のgamescom 2024のMicrosoftビジネスブースで，8月22日に行われたプレゼ
公開日 : 2015年4月3日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 「コーディング Web アクセシビリティ - WAI-ARIA で実現するマルチデバイス環境の Web アプリケーション」の見本誌をいただきました。すでに書店に並んでいますが、ようやく読み終えましたので、感想を交えつつご紹介します。 この本は、ドイツの Smashing Magazine が出版している「Apps For All : Coding Accessible Web Applications」の日本語訳です。とても軽妙な語り口の、「リファレンス」というよりは「読み物」といった雰囲気の本で、読者に対する姿勢として「厳密さ」よりも「わかりやすさ」を大切にしている (そして徹頭徹尾その姿勢を貫いている) 本だな、と感じました。 比喩が面白かったり (たとえば、WAI-ARIA の「ロール」「
2020年、サイバーエージェントのアクセシビリティを振り返る | CyberAgent Developers Blog
こんにちは、メディア事業本部の @masuP9 です。今年はこのアクセシビリティを振り返る、やらない気でいたのですが、アクセシビリティやっていき企業仲間が振り返っているのを見てやはりやらねばなるまいと思い直し今年も振り返りたいと思います。 昨年、2019年のサイバーエージェントの振り返り 2020年、freeeのアクセシビリティを振り返る 2020年、サイボウズのアクセシビリティを振り返る アクセシビリティを気にし出したきっかけと、2020年の振り返り（トレタ） 新規サービスのアクセシビリティ水準は高く WINTICKET 昨年、リリースした競輪・オートレースネット投票サービス WINTICKETは開発当初から高い品質を目標に開発されウェブアクセシビリティについても一定の品質に到達することができました。（参考: ウェブアクセシビリティについて） そのおかげか高いアクセシビリティを必要として
皆さま、はじめまして。私は、20年度新卒で入社したアクセシビリティ・エンジニアの大塚と申します。本Blogに登場するのは初めてですので、まずは簡単に自己紹介をさせてください。 私は生まれつき視覚障害があり全盲です。私を含め全盲のユーザーの多くは、画面上のテキスト情報を音声で読み上げるスクリーンリーダーとキーボードを使用してPCを利用しています。今書いているこの文章も、入力している文字や、漢字の変換が正しく行われているかなどの確認をスクリーンリーダーで行いながら作成しています。 私は中学に入ったころに本格的にPCを使い始めたのですが、スクリーンリーダーを利用し、Web上の様々な情報に単独でアクセスできることに感動したことをよく覚えています。そのことをきっかけに、視覚障害者を含め多様なユーザーがWebをより利用しやすい環境を作ることに貢献したい気持ちが強くなりました。そして、Webアクセシビリ
Mozillaでアクセシビリティ関連のQAを担当しているMarco Zeheが自身のBlogに “The importance of placement of HTML elements in a document” という記事を投稿していました。JavaScriptでモーダルダイアログなどを実現するものがありますが、実装方法によってアクセシビリティを著しく損ねることになるケースが紹介されています。 記事で例に挙げられていたのはThickBox。デモの写真やリンクをクリックするとダイアログが開くのですが、これは新たに生成したdivを文書の一番後ろに追加し、それをスタイルシートで調整するという実装が行われています。 表示上はなんら問題ない方法ですが、Zeheはこの「文書の一番後ろに追加する」ことに問題があると述べています。文書の最後に要素を追加してしまうと、内容の多いページにおいてはアンカー
アルファサード・ラボ (ホームページ制作会社 アルファサード - アクセシビリティ, ユニバーサルデザイン, ブログ・CMS, モバイル)
ウェブ技術に関する研究・実験・発表の場 「Alfasado Labs」は当社のスタッフが開発・研究したウェブ技術に関する成果の発表の場です。 主に以下のテーマを扱っています。 ウェブアクセシビリティに関する研究、支援技術の開発 ブログ/CMSに関する拡張プログラム (主にMovable Typeのプラグイン開発) オープンソースソフトウェアの活用 Moveble Type TinyMCEプラグイン Moveble Type TinyMCEプラグイン Movable Type, Movable Type Open Sourceのエントリー投稿画面のリッチテキストエディタでTinyMCEを利用可能にするプラグインです。 ライセンス MTOSでの利用:GNU GENERAL PUBLIC LICENSE Version 2 Movable Type及び Movable Type Enterpri
どんなエンジニアになろうか決めかねていた自分が、ある日突然「私はウェブをやるために生まれてきた」と思うに至った、アクセシビリティの話です。 「アクセシビリティって何？」という人から、「大事なのはわかっているけどいつも後回しにしてしまう」という人まで、明日からアクセシブルな実装をせずにはいられない、ウェブの本質に迫ります。
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込
トグル処理はON／OFF交互に入れ替わるような処理のことです。 jQueryの「toggle() ：表示／非表示」を使用すればすごく簡単に実装できます。 例えば #buttonの要素をクリックするたびに #textの要素を表示／非表示させたい場合。 <p id="button">これは#buttonの内容です。</p> ←ここをクリック <p id="text">これは#textの内容です。</p> ←これを表示／非表示させたい 上記のHTMLを用意したら、 「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。 $(function(){ $("#button").click(function(){ $("#text").toggle(); }); }); たったこれだけ。 以下がサンプルです。 これは#buttonの内容です。 ←ここをクリック これは#tex
弁護士ドットコム、アクセシビリティ対応でブランドカラーを変更 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
弁護士ドットコムでは、弱視（ロービジョン）の方をお呼びしてユーザーテストを実施しました。前回の記事では、テストを振り返りながら、その対応方法について検討しました。 そして今回は、実際に弁護士ドットコムがどう対応したのかをご紹介します。 弁護士ドットコムが選んだ道前回の振り返り会では、対応の方向として「ブランドカラーを見直すか」「あるいは最低限の箇所だけ色を変更するか」という選択肢が挙げられました。ブランドカラーの見直しが望ましいものの、これは影響範囲が大きく、サイト全体はもちろん、Webの外にまで影響が及びます。簡単には実行できません。 しかし結論としては、弁護士ドットコムはブランドカラーを見直す方向に舵を切りました。 その経緯をお話しする前に、弁護士ドットコムについて少しおさらいしておきます。弁護士ドットコムは、「弁護士をもっと身近に」というコンセプトで、弁護士と相談者をつなぐ場を提供す
先日ユーザビリティに関する記事を書きましたので、アクセシビリティについてもまとめることにしました。先日の記事はこちら⇒【Webユーザビリティを改善するための5つのポイントと方法】 アクセシビリティはユーザビリティに比べるとあまり重要視されていない感を受けますが、業種問わずどんなWEBサイトであれ、最低限の対策は行うべきだと私は考えています。理由は多々あるんですが、1番大きな理由は障がい者の方達の多くが意外にもWEBサイトで情報収集をしているという事と、WEBサイトの発展に期待している事を知ったからです。 ちょっと長くなりそうなのでこの話は後程しますね。 まず、アクセシビリティ対策を行うことで得られる効果についてですが、アクセシビリティを改善することでアクセス数が増える(業界によっては大幅に増える)と言われています。これには基本的に2つの理由があり、1つは障がい者と認定されている人(総人口の
UXデザインの現場で叩き上げたインタビューのノウハウ～「マーケティング／商品企画のためのユーザーインタビューの教科書」書評:WebClip - ウェブ制作、UXD／IA、アクセシビリティ
UXデザインの現場で叩き上げたインタビューのノウハウ～「マーケティング／商品企画のためのユーザーインタビューの教科書」書評 まもなく発売の新刊の、書評用の草稿をいただいた。心待ちにしていた本でもある。5月21日発売「マーケティング／商品企画のための ユーザーインタビューの教科書」だ。 UXデザインの基本スキル「インタビュー」を、これでもか！ というほど、ていねいに手ほどきしてくれている。 マーケティング／商品企画のための ユーザーインタビューの教科書 著: 奥泉直子、山崎真湖人、三澤直加、古田一義、伊藤英明 UXデザインや人間中心設計の分野で、20年のキャリアをもつ、ユーザー調査のプロたちの、実務で鍛え上げたノウハウが詰まっている。 ユーザーの価値観を引き出す会話術 本書のなによりの魅力は「実務」にもとづくノウハウであることだ。それもユーザー調査の現場で、20年、叩きあげてきた知識。インタ
前回に引き続き、NPO法人しゃらくにてさまざまな活動を行っている小嶋新氏をゲストに迎え、Webアクセシビリティについて語っていただきました。 日本における「アクセシビリティ」 ――「複数の情報経路の準備」「情報を永続的に出しておくこと」など、アクセシビリティの本質から、グローバライゼーションなどの話にまで広がりました。では、ここ日本における「アクセシビリティ」の動向はどうなっているのでしょうか？ 阿部氏：この「アクセシビリティ」という言葉が日本で認知され始めたのはいつ頃からでしょうか。 森田氏：1999年にWCAG1.0が勧告されていますから、その頃からWeb制作者の間では流通していた概念です。 2004年に「JIS-X-8341-3：高齢者・障害者等配慮設計指針」が制定されたことがまず大きなインパクトだったのだと思います。官公庁や企業にとっては、W3C策定の仕様よりもJIS規格票のほう
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
2020年、東京でパラリンピックが開催される。この街は、障害者にとってどれくらい動き回りやすいのだろうか。
Webアクセシビリティの勉強会に参加してから、なんやかんや忙しく1ヶ月以上経過してしまいましたが、あらためて当日のスライドを見たり、JISX8341-3（高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第３部：ウェブコンテンツ）に目を通す時間ができました。ということで、今日は「アクセシビリティにおけるWebデザインの配色」という点にポイントを絞って、私なりにまとめてみたいと思います。ざっくりとではありますが、まだちゃんと取り組めていないなーという方のお役に立てたら嬉しいです。 デザインにおける色の役割って？ まず、アクセシビリティのことは少し置いておいて、デザインにおける色の役割について簡単に触れておきたいと思います。 Webデザインに限らず、情報を伝えるための手段のひとつが『色』ですよね。 例えば、注意を促すための「黄色」や、注目を集めるための「赤」などとい
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて12 Tools To Check Your Site’s Accessibilityのタイトルのもと、Webページのアクセシビリティをチェックするための12のツールを紹介している。紹介されているツールは次のとおり。 ACTF aDesigner (視力障害者向けのアクセシビリティテストツール。Eclipse向けのプラグインで、Windows XPはまたはそれ以降のバージョンのOSで動作) Adobe Dreamweaver CS4 accessibility (Adobe Dreamweaver CS4向けに用意されているアクセシビリティ検証ツール) Contrast Analyser (2色
足でも使えるXbox Adaptiveコントローラ発表。拡張自在なアクセシビリティ製品 - Engadget 日本版
How to watch Polaris Dawn astronauts attempt the first commercial spacewalk
【アクセシビリティ】 ブロック・スキップの“決定版”を考える (ナビゲーション・スキップ):WebClip - ウェブ制作、UXD／IA、アクセシビリティ
この記事のトピック ブロック・スキップの“決定版”をつくる。 ブロック・スキップのよくあるパターン。 【パターンB OffScreenパターン】の問題。 【パターンA: JIS X 8341-3:2004 例示パターン】 におけるPC-Talkerの問題 レイアウトへの影響を失くす。 PC-Talkerのページ内リンクには更なるバグがある。 さらに問題は続く。 PC-Talkerのページ内リンクの特効薬。 まとめ：ブロック・スキップの“決定版” こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしています。 ブロック・スキップの“決定版”をつくる。 Webアクセシビリティのテクニックに“ブロック・スキップ”(注1)がある。 “ナビゲーション・スキップ”“スキップ・
誰にでも開かれたヤフーでありたい。目の不自由な人がネットを快適に使うためのアクセシビリティ検証をレポート！ - 課題解決特集 - CSR - ヤフー株式会社
こんにちは、LIGブログのバイク好き編集者、田中宏亮です。 バイクで出かける際、まず気にするのが天気です。クルマと違って雨に降られてはびしょ濡れになってしまいますから、「Yahoo!天気」アプリで行き先の予報をチェックするのが習慣化しています。 こんな風に、多くの人が日常的に利用しているであろうヤフーのサイトやアプリですが、改めていろいろ触ってみると、使いやすさを第一に考えて構築されていることに気づかされます。考えてみれば、日本中の人が利用することを目的に運営されているサイトやアプリですから、汎用性を重視した作り方になっているのは当然のことと言えます。 しかし、高齢者や、さまざまな障がいがある方にとっても使いやすいサイトとなっているのでしょうか。 今回、視覚障がいをお持ちである日本視覚障害者ICTネットワークの中根雅文さんを招いてヤフーのアクセシビリティ検証がヤフー本社にて開催されると聞き
マイクロソフトが考える「ゲームのアクセシビリティ」とは何か。誰もがゲームを遊びやすい環境を整えるための取り組み講演レポート - AUTOMATON
日本マイクロソフトは4月21日、メディア関係者向けに「ゲーミング分野におけるアクセシビリティに関連するオンラインブリーフィング」を開催した。「遊びやすい」とはどのような状況か。障がいのあるユーザーが遊びやすい環境を整えるために開発されたXbox Adaptive Controllerを中心に、「ゲームのアクセシビリティ」についてさまざまな視点から語られたブリーフィングのレポートをお届けする。 同ブリーフィングでは、マイクロソフトのアクセシビリティに対する考え方や、製品デザインにどのように反映しているのかが語られた。そして、実際にアクセシビリティ機能を必要とするユーザーなどからも、お話を伺うことができた。 アクセシビリティとは はじめに、日本マイクロソフトの技術統括室アクセシビリティ担当の大島友子氏より、同社の考えるアクセシビリティについて語られた。マイクロソフトの考えるアクセシビリティとは
こんにちは、デザイン部でフロントエンドエンジニアをしている村岡です。 私は、前職の経験などを踏まえて、名刺に「アクセシビリティアナリスト」という肩書きも入れさせてもらっています。 今回は、2016年4月に施行される障害者差別解消法によって努力義務が課せられる、Webアクセシビリティの意識するべきポイントと重要性について書こうと思います。 Webアクセシビリティは機会損失を防ぐ Webアクセシビリティは「障害者・高齢者対応」だと思っていませんか？ 確かにそのような側面が強くありますが、本質は「状況・環境に依存せず、誰もが情報にアクセスしやすくすること」です。 近年では、一人で複数のデバイスを持ち、様々な環境で Web にアクセスすることは当たり前になりました。 このようにデバイスや環境が多様化していくと、音が出せない、画面が見えないなど、 一時的になんらかの機能が使用できなくなる場面が出てき
アクセシビリティ観点で必須の<label>要素について、 その重要性 なぜ重要なのか。メリット・デメリット placeholderじゃダメなのか などについてまとめます。 labelの重要性 アクセシビリティ観点でlabelはどのくらい重要なのでしょうか？ 適合レベル A 適合レベルとは、アクセシビリティ上の重要度を示す指標のことです。 WCAG 2.1の適合レベルは、レベルA、レベルAA、レベルAAAの3つに分かれています。 その中でレベルAとは、 最低限のレベルであり、達成できていないと、スクリーンリーダーや拡大鏡などの支援技術を用いてもサービスを利用できないことを意味します。 なぜそんなに重要？ label要素があることのメリット 1. 選択が容易になる ラジオボタンやチェックボックスなどの小さな選択欄の場所を正確にクリック/タップできなくても、隣接するラベルをクリック/タップするこ
コンテンツデザインから始めるWebアクセシビリティ
理解という名のアクセシビリティ Web アクセシビリティの課題には大きく分けて 2 種類あります。ひとつは、色、形状、動きといった視覚に関わること。そしてもうひとつは、マークアップをはじめとしたマシンリーダブルに関わることです。マークアップが正しく記述されていて、視覚的にも分かりやすいことは Web アクセシビリティの確保において必須ですが、これらとは別に『第三の課題』のようなものがあると考えています。 それは利用者が理解できるコンテンツを制作・配信するという課題です。正しくマークアップされていたとしても、そのマークアップされたコンテンツが人にとって理解しにくいものであればどうなるでしょう。利用者はタスクを達成することができないでしょうし、情報を求めて彷徨うことになるかもしれません。 単に情報へアクセスできるだけでなく、意味のある情報へアクセスできるようにする必要があります。利用者の目的が
日本WEBアクセシビリティ協会 - （JAWAA）
国際標準のWEBアクセシビリティガイドライン及びJAWAAが定める基準に準拠したWEBサイト構築をサポートし、高齢者や障害者を含めた誰もが必要な情報を受発信できるインターネット環境の普及・振興を目指しています。日本WEBアクセシビリティ協会（JAWAA）について 近年IT化が進み、コンピュータやインターネットによって生活の中で必要な情報やサービスなどの恩恵を受けることができるようになりました。今後コンピュータやインターネットは、更に私たちの生活に欠かせない存在として、必要性が高まることでしょう。しかし、いつでもどこでも情報やサービスを受けられる便利な世の中である一方で、高齢者や障害者など、心身の機能に制約のある人にとっては、便利な情報やサービスを受けることが困難な場合もあります。 しかし、高齢者や障害者がWEBサイトを利用する時に、利用者の心身の機能に制約のある人にとっては十分に得たい情報
「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。 どんな問題が起こるのか 「Death to Icon Fonts 」では、ディスレクシア（日本では失読症、難読症、読字障害などと呼ばれている）向けに作られたフォント「OpenDyslexic 」で問題が起こることが紹介されていて、アイコンフォントにはその他にもアクセシビリティ上の問題がいくつかあるため、使わないほうが良いと勧めています。 これはフォントを強制的にOpenDyslexicなどのディスレクシア対応のもので表示
Web Accessibility Toolbar 2012J ブラウザのInternet Explorerで利用できるツールバー（無償）。対応OSは、Windows Vista以降、対応ブラウザはIE8以上。 IEのツールバー「Web Accessibility Toolbar 2012J」の詳細 カラー・コントラスト・アナライザー 2013J WCAG 2.0やJIS X 8341-3:2010の達成基準で定められたコントラスト比など、色に関するチェックツール（無償）。 色のチェックツール「カラー・コントラスト・アナライザー 2013J」の詳細 ツールがあれば全ページを自動的に検証できるのか？ 「エー イレブン ワイ（WebA11y.jp）」では、無償のチェックツールを配布しています。Webコンテンツのアクセシビリティをチェックするツールには様々なものがありますが、全てのチェックを完全
実際に適用している画面はこちらです。 あえてブラウザ用のルールを定義した部分 一方で、ブラウザという媒体の特性による最適化をした箇所もあります。 アプリはメインのナビゲーションやツールバーのボタンはブランドカラーの赤を使うことが多かったのですが、それをブラウザでそのまま適用するとエラーのように見えてしまいました。アプリの場合はその世界の中で完結するので、独自のデザインルールがあっても受け入れられやすいのですが、ブラウザの場合はページを行き来できるため、全く異なるデザインルールと共存していることになります。 そのため、リンクは青、エラーは赤など一般的に認知されているデザインルールと異なる使い方をする場合は、特に注意が必要になることがわかりました。 上記の点をふまえ、スマートフォン版Yahoo!メールではメインのボタンは黒としました。また、黒を使うときにはタップできることがわかるよう、ボタンの
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシビリティ情報を使った壊れにくいE2Eテスト | フューチャー技術ブログ
Microsoft、「Windows Terminal」の最新プレビュー版v0.3を発表／UIをアップデート。テキスト選択や背景画像サポート、アクセシビリティを改善
第6回 アクセシビリティを必要とする人に会う | gihyo.jp
実務でかなり役立つ！コーダー必携の書「コーディングWebアクセシビリティ」の無料版が公開中
絵文字のアクセシビリティについて少し調べてみた : could
リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]
Googleの新しいトップバーがアクセシビリティ的にどうなんだという話
コーディング Web アクセシビリティ | Accessible & Usable
新卒研修とアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
文書構造と動的なWebのアクセシビリティ | Web標準Blog | ミツエーリンクス
覚醒するアクセシビリティ (WordCamp Tokyo 2019)
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた
jQueryによるトグル処理 | スタッフブログ｜dis-ドアズインターネットサービス｜WEB（ホームページ）制作、作成・SEO・FLASH・ビジネスブログ・ユーザビリティ・アクセシビリティ｜神戸・大阪
Webアクセシビリティを改善してアクセスUP【アクセシビリティとは】
第6回 「アクセシビリティ」とは？（後編） | gihyo.jp
アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
東京パラリンピックまで1年、街のアクセシビリティは十分か - BBCニュース
あなたの作ったサイトは大丈夫？Webアクセシビリティの観点からチェックすべき「色」のこと。
サイトのアクセシビリティをチェックする12のツール | エンタープライズ | マイコミジャーナル
Microsoft、次期Edgeの新しいフォームコントロールをお披露目 ～Chromiumにも導入へ／タッチ・ペン操作との親和性やアクセシビリティを重視
2016年はアクセシビリティの年！注目するべき3つのポイント - DMM.comラボ デザイナーズブログ
アクセシビリティ第一歩、labelが超重要な話。~ placeholderじゃダメなの？~
アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について
iPhoneの“シンプルな表示”など、アップルから新しいアクセシビリティ機能
Webアクセシビリティのチェックツール｜エー イレブン ワイ ［WebA11y.jp］
アクセシビリティ対応したカラー設計でもっとメールを読みやすく！ Yahoo!メールのリニューアル事例