2016/3/17の勉強会にて発表された資料です。 SCRIPTY#5　～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/27752/Read less

はじめに こんにちは！@moutendです。私は視覚障害があるので、普段は画面を見ずにMacのVoiceOverというスクリーンリーダーの音声のフィードバックを頼りにプログラミングをしています。ところで最近@ssotoyaさんの記事にて音声を頼りにプログラミングする様子が公開されました。スクリーンリーダーの音声を聞いたことがありますか？ - ラック公式ブログ - 株式会社ラック@ssotoyaさんは全盲のため全く目が見えないのですが、超高速でコーディングをされています。控えめに言って最高にロックです。私も負けていられません。ということで、この記事に触発されて、私も画面を全く見ずに音声のフィードバックのみを頼りにプログラミングしている様子をキャプチャしましたので公開してみます。具体的には、QuickTimeのスクリーンキャプチャ機能を使って画面を撮影しつつ、音声はsoundflowerという

公開日 : 2016年2月21日 (2020年8月30日 更新) カテゴリー : アクセシビリティ 以前、「画像スライドショーの標準 UI (あったらいいな)」という記事を書きましたが、現実問題として、ウェブサイトで画像のスライドショーを実現するには、JavaScript ライブラリーを付加的に使うことになります。最近「PhotoSwipe」というスライドショーの全画面表示が可能なライブラリーを使う機会があり、アクセシビリティ面でのカスタマイズを加えることで、自分の思い描くインタラクションに近づけることができました。ひとつの実験例としてご紹介します。(この記事の最後にデモへのリンクをご用意していますので、併せてご覧ください。) PhotoSwipe の特長 PhotoSwipe には、以下の特長があります。ユーザーエクスペリエンス (特にユーザーの没入感) や、ユーザビリティ上の配慮といっ

公開日 : 2014年8月28日 (2024年7月17日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコンではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、アクセシビリティ (とりわけ、スクリーンリーダーを介した情報伝達) の観点で考えると、実装において若干の工夫が必要です。

この記事は Web Accessibility Advent Calendar 2015 8日目の記事です。 ヘッダーを固定した表のアクセシビリティについて、最近調べる機会があったので、その内容を報告します。 ヘッダーを固定した表とは、表のボディセルだけがスクロールし、ヘッダーはスクロールしない表のことです。 ヘッダーが行の場合はこんな感じ: ヘッダーが列の場合はこんな感じです: まず考えるべきこと 実装にもよるため一概にはいえませんが、ヘッダーを固定した表は往々にしてアクセシビリティを低下させます。 後述するように、アクセシビリティを向上させる方法はありますが、ハックに近く、推奨できる方法ではありません。 まずはヘッダーを固定しない表を使えないか検討してください。 よくある実装とその問題点 ヘッダーを固定した表でよくある実装は、ヘッダーとボディセルをそれぞれ別々のtable要素とする実装

この本を読むと、「アクセシビリティは高齢者・障害者のためだけのもので、そういう人がターゲットでなければ関係ない」というのは誤解で、UXとアクセシビリティは一緒に考えていくものなのだということがよくわかります。 U-Site編集部 2015年11月25日 Webアクセシビリティが重要な理由 2015年7月に出版された『デザイニングWebアクセシビリティ』を読もうと思ったそもそものきっかけは、立ち読みした際に、第1章で「なぜアクセシビリティと向き合うのか」ということが書かれていたからでした。その中では、以下の7つの理由が挙げられています： アクセスできる人を増やすため さまざまなデバイスに対応するため SEOのため ユーザビリティの向上、改善のため ユーザー体験の向上、改善のため 規格への対応のため 取り組みをアピールするため 1.「アクセスできる人を増やすため」や6.「規格への対応のため」は

Authoring Tool Accessibility Guidelines の観点から CMSの画像挿入フローを検証する

デザイニングWebアクセシビリティ刊行記念イベント <http: /> で使用したスライドです。Read less

公開日 : 2015年10月9日 (2020年8月30日 更新) カテゴリー : アクセシビリティ ウェブサイトでボタンを設置する際、そのボタンのラベルとは別に、ボタンのすぐ下などに、追記を配置することがあると思います。たとえば、フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押ししたり、行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一押ししたり、といったケースが考えられます。 フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押しする。(例 : [送信する] ボタンの下に「メールアドレスの綴りや、お問い合わせ本文の内容を今一度ご確認のうえ、送信してください。」という追記がある。) 行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一

誰でも、どんな環境でもアクセスできるということは、Webのもっとも重要な特長のひとつです。 この授業では、Webサイトを誰でも、どんな環境でもアクセスできるようにする「アクセシビリティ」の考え方について学びます。アクセシビリティに取り組んで行きたい方や、これからWeb制作について学びたいという方のために、Webアクセシビリティの基礎からはじめ、Web制作の各制作プロセスで実践していく方法についてお話ししていきます。 この授業は書籍「デザイニングWebアクセシビリティ」の内容に沿って進めていきます。書籍をお持ちでない方にも分かるように進めていきますが、書籍をお手元に置いていただくと、予習･復習の役にも立ち、理解しやすくなります。 第1回は、「なぜWebはアクセシブルなのか」と題して、アクセシビリティとは何か、Webとアクセシビリティとの関係、ユーザーエージェントの仕組みなど、基礎的なところを

公開日 : 2015年7月1日 (2023年9月7日 更新) カテゴリー : アクセシビリティ 最近のウェブサイトでは、ユーザーの任意操作 (クリックやタップ) によって、機能やコンテンツを展開する/折り畳むユーザーインターフェース (UI) をよく見かけます。たとえば以下のようなものです。 メガメニュー ハンバーガーアイコン (押すとメニューが展開表示される) 虫眼鏡アイコン (押すと検索窓が出現する) アコーディオン これらの UI は当然アクセシビリティが担保されるべきで、キーボードによる操作 (Tab キーでフォーカスを当てて Enter キーで展開/折り畳みを実行する) が可能だったり、スクリーンリーダー (音声読み上げ) でも利用可能であることが求められます。 特にスクリーンリーダーでの利用に向けては、一連のインタラクションを完遂するうえで手掛かりとなる情報がすべて音声によって

公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア

これからのWebデザインに求められるアクセシビリティとの向き合い方ーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 これからのWebデザインに求められるアクセシビリティとの向き合い方ー木達一仁 最初は、株式会社ミツエーリンクスのCTOでありエキスパートの一人でもある、木達一仁さんによるセッションです。木達さんはWebアクセシビリティに関して、様々な取り組みをされている方です。別の企画で

このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 アクセシビリティを備えた最新のアプリの設計と開発 Rachel Appel インターネットやアプリなどさまざまな形態のメディア技術は、利用者にとって有益だからこそ価値があります。残念なことに、世の中にはすべての人々にとって有益とはいえないソフトウェアがたくさんあります。設計者、管理者、開発者は、多くの場合、アクセシビリティよりもセキュリティやパフォーマンスに注意を払います。アクセシビリティは、ソフトウェアにおける優先事項の 1 つであったとしても、たいていは優先度が下げられてしまいます。 アクセシビリティの優先度をもっと上げるべきです。WebAIM では、Web ユーザーの 20 パーセントがアクセシビリティ

最近の変更 2024年3月18,19日に筑波技術大学春日キャンパスで開催します第24回研究会のCFPを公開いたしました．多くのみなさまからのご発表申込をお待ち申し上げております． 2023年度も企業・大学機関などからの協賛を募集しております． 情報処理学会アクセシビリティ研究会は、障害者や高齢者を支援する情報処理技術の研究開発を通して，だれもが積極的に参加できる社会の実現を目指すコミュニティです。 研究会へのご登録はこちら ※登録方法などご不明な点は，contact@ipsj-aac.orgへご連絡ください． 多くの皆様のご登録をお待ちしております． 2023年度企業協賛の募集について 研究会イベント 開催日時 開催場所

成熟した社会は，人々が障害の有無に関わらず等しく社会に参加できるものであるはずです．アクセシビリティ研究グループは障害者や高齢者を支援する情報処理技術の研究開発を通して，だれもが積極的に参加できる社会の実現を目指し， - 日本の持つ最先端の情報処理技術を活用した研究開発の促進 - 障害者の教育・就労・生活環境向上を目指した研究の促進 - 障害当事者が研究の主体として参加できる環境の整備 - 国内外のアクセシビリティ研究コミュニティに対する積極的な情報発信 を志向します． このために， - 情報処理技術を活かし，教育，就労，日常生活，協調活動・コミュニケーション，訓練・ケアなど幅広い分野に係る支援技術の研究開発を促進すること - 障害当事者による研究発表の聴講および情報交換を通し，今後ますます拡大していくアクセシビリティ研究へのニーズを理解し，また当該分野に貢献の意欲を持つ若手研究者を育てる

2015年4月1日 アクセシビリティ, 便利ツール, 色彩 以前からWebアクセシビリティにはちょこちょこ勉強中の私です。しかしWebアクセシビリティについて書かれたサイトや本ってあまり多くなく、リソースを探すだけで苦労してしまったり…。そんなわけで今回はWebアクセシビリティのチェックに使えるツールや役立つ本、Webサイト、ブログなどを集めてみました。 ↑私が10年以上利用している会計ソフト！ アクセシビリティとは？ 「アクセシビリティ」とは、アクセスのしやすさを意味する言葉で、転じて利用環境や身体の制約に関係なく誰でも使えるという意味で使われます。どのような状況でもWeb上のコンテンツや機能を十分に利用できるWebサイトを「アクセシブルである」と言えます。 「ユーザビリティ」と混同されがちですが、使えないものを使えるようにするのがアクセシビリティの向上、使いにくいものを使いやすくするの