自治体サイトWebアクセシビリティ調査も、今年で15回目となりました。この調査は、全盲の視覚障害者を含む当社調査員が、調査対象サイトにアクセスし、JIS X 8341-3:2016に示される達成基準に照らして、問題となっている部分を目視により発見・検証を試みたものです。 今回は、miCheckerで「問題あり」が検出されないケースでも、問題のある可能性があること。ツールによる評価は不十分であることを示すべく、ツールと目視を併用した調査結果を示すこととしました。 下記に、団体名と「問題あり」検出数、各サイトから受けた印象を一言で表現してみましたので、各サイトの実際の状況と合わせてご確認ください。 北海道・東北 北海道 問題あり：6箇所 「ホーム」なのか「トップページ」なのか 青森県 問題あり：1箇所 消えないで、キーボードフォーカス 岩手県 問題あり：0箇所 ≒ 問題なし 宮城県 問題あり：
神谷バーで忘年会。いろいろな方にお会いできてとても楽しいひとときでした。幹事役のid:adramineさんどうもありがとうございました。 皆さんがNDSを取り出して「どうぶつの森」の通信（？）をはじめられた時はうらやましくて心の中で指くわえてました。 で、レトロなお店の中で河豚をつつきながらビール（中ジョッキで今どきの店の大ジョッキサイズだった）と口当たりの良いデンキブランを飲んでいたらかなり酔っぱらってしまいました。会の途中からは、話をはじめては着地点が話し始めと違う方向に行って「言いたかったことは何だったっけ」状態になってしまい（もちろん他の方とのお話しの中で違う方向に行ったこともあり、それ自体はわたしにとっては貴重でしたが）、ほんとすみません。 ひとつだけ、最後にお話ししたことを、自分が言いたかった着地点も入れて書いておきたいと思います。 はてなに関連する話題なので、id:jkond
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
富士通さんが、2004年より無償ダウンロード提供していた視覚障害者や色覚障害者のアクセシビリティを高めるための診断ソフトウェアツール群 「Fujitsu Accessibility Assistance （富士通アクセシビリティ・アシスタンス）」 が 2013年の 8月 20日をもって、無償提供を終了するそうです。 富士通、色覚障がい者のための診断ソフトウェア無償提供8月20日をもって終了：「終了前に、ただ伝えてほしい」――多くの開発者に届きますように。 ： ＠IT 富士通アクセシビリティ・アシスタンス ： 富士通 富士通アクセシビリティ・アシスタンスは、2003年から公開されていた 「Web Inspector （ウェブインスペクタ）」 に、「Color Selector （カラーセレクター）」、「Color Doctor （カラードクター）」 を加えた、3つのソフトウェアからなる、アク
web アクセシビリティに、どうやって対応したら良いか？を 手助けするツールを作りました。 WCAG2.0 の達成基準に合わせた実装方法を確認し、試験結果を記録することができます。 ■ WCAG 2.0 達成基準・実装チェックリスト https://a11y-i-guideline.netlify.com （chrome ブラウザでしか挙動確認してません） 対象 web コンテンツで JIS X 8341-3:2016・WCAG2.0 への対応を求められた コーダー、ディレクター、デザイナー 目次 アクセシビリティ用語解説 実装チェックリストでできること 各ポジション別確認ポイント 使い方 アクセシビリティ用語解説 web アクセシビリティ 一般的に「障害者対応」と考えられるが、メガネがない・眩しい屋外など健常者にとっての 一時的な状況でも、誰でも web コンテンツを支障なく利用できる状
Web制作時にGoogleChrome拡張のAccessibility Insightsを使ってアクセシビリティの評価を行う | DevelopersIO
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
『Overwatch』のアクセシビリティに脳性まひを患うファンから賞賛の声、障害に縛られないゲーム体験 - AUTOMATON
ホーム ニュース 『Overwatch』のアクセシビリティに脳性まひを患うファンから賞賛の声、障害に縛られないゲーム体験 Blizzard Entertainment（以下、Blizzard）から先日リリースされた『Overwatch』が、脳性まひを患ったファンのゲーム体験を一変させたとして、海外フォーラムを中心に賞賛されている。ゲーム本編が大いに評価されることは数あれど、オプションの内容が絶賛される例はそう多くないだろう。そんな中、細部までカスタマイズできる本作の操作設定が、一人のゲーマーの人生を変えた。 アクセシビリティに救われる全てのヒーロー体験 『Overwatch』をこよなく愛するZakさんは、生まれながらにして脳性まひを患っている。歩くことはおろか、手先の動きも制限される。しかし、そんな彼にとってゲームは人生を支え続けたかけがえのない趣味だという。初めてゲームを触ったのは3歳の
ロービジョン「弱視」の人は、Webサイトをどのように使うのか？ ユーザー調査結果を公開 | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
「ロービジョン」をご存知ですか？視覚障害という言葉を聞くと、多く人は、全く見えない「全盲」という状態を連想するかと思います。しかし実際には、視覚障害とされる方の中には、わずかながら見えるという方もいます。 わずかでも視力があるなら、眼鏡やコンタクトレンズで視力の矯正をすれば良いと思うかもしれません。しかし、矯正しても十分な視力が得られない人もいます。また、視野が狭い、視野の一部が欠けているなど、別の要因で見えにくい人もいます。 このように、矯正をしても見えにくい状態を「弱視」あるいは「ロービジョン」と言います。実は、視覚障害とされる方の6割が「ロービジョン」だと言われており、割合としては全盲の方よりも多いのです。 では、ロービジョンの方はどのようにしてWebを利用するのでしょうか？ この問いの答えは、一言で言うと「人によって異なる」です。先に述べたように、ロービジョンといっても見え方はさま
上級者向けSEOガイド1/9 : インデクセーションとアクセシビリティの深い関係 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
インデックスされたページ数を測定 グーグルの site: searchを利用する キャッシュの日時を測定する グーグルのcache:sitename.com検索をここでも利用する。 キャッシュの日時は、アルゴリズムでグーグルがサイトのどのバージョンを利用しているのかを判断する上で、最も役に立つ。 ページランクを測定する PRはメトリクスとして重要視されているわけではないが、今でもサイトの価値の目安を得る上では有効である。 SEOquakeのツールバーは、ページランクを手っ取り早くチェックすることが可能である。次のURLからインストールしてもらいたい: https://www.seoquake.com/ SEOmozのドメインオーソリティーを測定する このメトリクスは、SEOmozがリンクスケープのインデックスをアップデートするタイミングによって、遅延が生じることがある。それでも測定する価値
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
2023年度リクルート エンジニアコース新人研修の講義資料です
入力フォームのユーザビリティ&アクセシビリティ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
こんにちは。サイボウズの小林大輔といいます。社内で「アクセシビリティエキスパート」として活動しています。 サイボウズでは、2014年ごろからアクセシビリティについての取り組みを行ってきました。社内啓発活動の一環としてアクセシビリティの社内勉強会やワークショップを継続的に開催したり、実際の製品改善の取り組みも多数行ってきました。さらに社外に向けて、アクセシビリティの重要性や取り組み方を発信する活動もしてきました。 最近では、社内外でアクセシビリティという言葉を少しずつ聞くようになってきました。社内にも社外にもアクセシビリティを発信しつづけてきた身としては嬉しい限りです。 今回は、全盲 (両目が見えない) のエンジニアSUGIさんが入社したことで、私たちサイボウズが得た知見について紹介しようと思います。 もともと、私がアクセシビリティに関わることになったきっかけは、弱視の方へのユーザビリティテ
この記事のトピック ブログパーツの横幅は何ピクセルで制作するべきか？ ユニクロやIAB、Googleの事例 ブログパーツの横幅は160ピクセルが適切？ ブログパーツの横幅は何ピクセルで制作するべきか？ 最近、マーケティングなどでCGM(Consumer Generated Media、いわゆる口コミ)を狙った「ブログパーツ」や「ブログシール」を各社がどんどん提供している。利用者としても可愛く面白いブログパーツがどんどん供給され、楽しい。 実は、今、僕もブログパーツを制作している。個人的なもので、仕事やマーケティングとは関係ない。最近はまっているSecond Lifeで、ちょっとしたアイデアが浮かんだのだ。 しかし、実際つくりはじめたらいろいろと課題も出てきて、楽しくも苦労が多かった。そのひとつが「ブログパーツの横幅は、何ピクセルにすればいいのか？」という問題だった。 作ったブログパーツを多
アクセシビリティ・カラー・ホイール
使用法: 画面左の円の中の色か、縦長の短冊状のバーから、マウスで前景色を選択してクリックするか、タッチ・スクリーンの場合は指定したい色の部分をタッチします。 次に「背景色」ボタンをクリックし、同じように背景色を選択します。 チェックマークが出たら、アクセシビリティ上、色の組み合わせは良好な状態です。 そうでなかった場合、前景色や背景色のボタンを選択し、一方か、両方の色を変更します。
react-modalのアクセシビリティまわりの実装について、ソースコードを読んでみたかったのでその記録を残します。 特にことわりがない限り、 v3.11.2 の内容に基きます。 ドキュメント react-modalのドキュメントには accessibility という項目があり、3つの機能について説明があります。 The app element Keyboard Navigation ARIA attributes The app element 主にスクリーンリーダーのユーザー向けの機能で、 aria-hidden 属性によって、モーダルが開いているときにページコンテンツを非表示と同じような状態にする機能です。視覚的にモーダルウインドウがページコンテンツの上に被さるように表示されている＝ページコンテンツが隠されているのを、スクリーンリーダー向けにはモーダル以外の部分に aria-hid
2015年1月25日に開催された「HTML5 Conference」での講演「Web Componentsのアクセシビリティ」で使用した資料です。 Read less
『ストリートファイター6』の「音」でキャラの動きが伝わるオプションが絶賛される。CBT時点で充実のアクセシビリティ - AUTOMATON
カプコンの対戦格闘ゲーム『ストリートファイター6』のクローズドβテストが、10月7日から10月10日にかけて実施された。参加当選者は、来年2023年発売予定であるこの新作での、対戦やアバター作成などをいち早く試すことができた。そうしたなか、本作のアクセシビリティ設定の充実度について、一部で大きな注目が集まっているようだ。 Here is the feature in action with background sounds and music removed so the accessibility sounds can be heard better. pic.twitter.com/R8nngYe2uZ — boo-rominah 👻 (@kurominah) October 7, 2022 本作のクローズドβテスト版には、オーディオ設定内に「サウンドアクセシビリティ設定」が用意さ
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシートを紹介します。コンテンツを視覚的に隠す際に見えなくするだけでなく、スクリーンリーダーにもアクセス可能にし、フォーカス時の振る舞いなどが定義されています。 a11y css reset -GitHub a11y css resetの特徴 a11y css resetの中身 a11y css resetの使い方 a11y css resetの特徴 a11y css resetはWebページをアクセシブルにするために、既定のスタイル定義をリセットするための小さなグローバルルールをまとめたCSSファイルです。 CSSにはアクセシビリティに有用なスタイルが定義されています。例えば、.visually-hiddenではコンテンツを視覚的に隠すのみでなく、スクリーンリーダーでもアクセス可能です。 参考: Writing CSS
Googleのマテリアルアイコンは軽量・デザイン・アクセシビリティOKの優れモノ | 初代編集長ブログ―安田英久
このマテリアル・アイコンを使えば、画像ファイルを自分で用意しなくても、accessibility（accessibility）やassignment（assignment）、face（face）、directions_run（directions_run）、smoking_rooms（smoking_rooms）、search（search）なんてアイコンを、カンタンにWebページに設置できます。 アイコンはWebフォントファイルで実現されていて、フォントファイルのサイズは最小42KB。サイズを変えたりdirections_run、色を付けたりdirections_runも自由です。 使えるアイコンは900個以上。Material iconsのページに一覧が示されています。 しかも、この仕組みはアクセシビリティにも優れていて、文字読み上げソフトを使うと、アイコンの部分は上記例のかっこで囲ん
freeeアクセシビリティー・ガイドラインVer. 202104.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。 締切が延長されたおかげで、先日余裕を持って確定申告を終わらせることができました。確定申告は概ね独力でできるのですが、紙で交付される書類やアクセシビリティーが低いPDFで交付される書類から情報を転記するところだけは相変わらず人に頼らないと突破できず、毎年残念な気持ちになっています。でも確定申告が終わると気持ちも軽くなり、気温も高くなっていよいよ春が来るなあという感じになります。 さて、それでは今回の更新内容を紹介します。 そして最後にイベントのお知らせもあります。 freeeアクセシビリティー・ガイドライン Ver. 202104.0リリース・ノート axe改めaxe DevToolsのルールに関する情報を追加 まず、freeeでも活用していてガイドラインの参考情報でも取り上げているアクセシビリティーのチェック・ツールaxeがい
インターネット等の技術を基盤としたコミュニケーションや、公共サービス等がますます快適で便利になる中、誰にも分かりやすく、使いやすいホームページが求められています。富士通では、ユニバーサルデザインを基本としたデザイン活動のひとつとして、視覚障がい者や色覚障がい者のアクセシビリティを高めるための診断ソフトウェアツール群「Fujitsu Accessibility Assistance」をホームページ作成者やデザイナーに向けて無償ダウンロードにて提供いたします。 Fujitsu Accessibility AssistanceはWebInspector、ColorSelector、ColorDoctorの3つのツール群で構成されています。 お知らせ WebInspectorにおける半角カナのチェック漏れに関するFAQを掲載しました ラ行の文字だけからなる単語、用語を半角カナで表記した場合、問題点
テックタッチアドベントカレンダー 22 日目を担当する、フロントエンドエンジニアの shoko です。クリスマスが大好きで、12 月に入ってからは毎日うきうきしています！ 本日のテーマは「アクセシビリティ」です。 アクセシビリティとは？ アクセシビリティとは、Web システムやサイトを可能な限り多くの人が利用できるようにすることを意味します。 「可能な限り多くの人」というのは、ハンディキャップを持つ人々だけではなく、さまざまな状況や環境も含まれます。例えば、モバイルデバイスや回線の遅いネットワークを利用する場合、屋外の光が眩しい場所でデバイスを利用する場合、機械の故障でマウスが使えずキーボードで操作する場合…などです。このような状況や環境になることは誰でも考えられることであり、アクセシビリティを改善することは多くの人にとってメリットがあります。 しかし、アクセシビリティに興味を持っても、「
アクセシビリティに配慮したFlashコンテンツ - 富士通
本コンテンツは、「富士通のプラズマディスプレイ」ご紹介コンテンツで取り入れられたアクセシビリティ対応を解説しております。 （2004年8月19日 掲載） 富士通では、2002年6月の 富士通ウェブ・アクセシビリティ指針 の制定より、富士通グループ全体でアクセシビリティに配慮したホームページの制作を行っております。 Macromedia Flash（以下、Flash）においても、積極的にアクセシビリティに配慮したコンテンツ制作を行っています。 ポイント 富士通が今まで取り組んできたアクセシビリティ活動の紹介 アクセシビリティに配慮された Flash コンテンツ制作ノウハウの紹介 日本工業規格 JIS X8341-3 に対応した項目の紹介 アクセシブルなウェブコンテンツ作成ツールの紹介 背景 富士通のプラズマディスプレイ 今やビジネスの場に限らず、家庭の中にまで普及しているプラズマディスプレイ
「AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版」の講演資料です。
福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般
以前紹介した「デザイニングWebアクセシビリティ」の電子書籍版が、ようやくリリースされました！ そのリリースを記念して無料版が公開されているのですが、これがかなりのボリュームとなっており、Web制作に携わる人はこの機会に読んでおくことをお勧めします。 電子書籍版デザイニングWebアクセシビリティ 電子書籍版はなんと、4つのフォーマットが提供されています。 PDF EPUB 付録: Kindle用に調整したEPUB（MOBI, AZKに変換する説明書付き） PDFリーダーでもよし、Kindle端末・アプリでもよし、EPUBリーダーでもよしです。 ※付録は予告なしに変更される場合があります。 AmazonでもKindle版として、購入できます。 書籍版よりかなりお安くなっています。 デザイニングWebアクセシビリティ Kindle版 電子書籍版の.pdfと付録のEPUBを.mobiに変換してK
こんにちは、ライターのYUKIです。 私が書いた前回の記事、“Amazon”から学ぶ、4つの観点から考察するUXデザインで、簡単にお話したウェブアクセシビリティについて、 今回は更に詳しくご説明したいと思います。また、世界の大企業では、このトピックをどのように考え、取り組んでいるかを知りたい方は、以下のリンクにあるサイトを参照して頂ければと思います。 Appleのアクセシビリティへの取り組み Samsung Electronics のアクセシビリティに関する考え方 ウェブアクセシビリティとは何か ウェブアクセシビリティとは、「年齢や身体的条件に関わらず、全ての人がウェブで提供されている情報にアクセスし、利用できること」ならびにその度合いを意味します。 ここで言う、「年齢や身体的条件」は以下のようなものが含まれます。 全盲 弱視 色覚障害 聴覚障害 肢体不自由 知的障害 高齢者 どうして重
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
レイアウトを整える事が本来の目的であるCSSですが、このCSSでボタンにおけるイケてない点を解決して、ユーザーのアクセシビリティの向上を図ります。 イケてないポイント1 (テキスト選択編) iOSやAndroid等のスマートフォンでボタンを押下しようとした時に、ボタン内のテキストが選択できてしまう問題。 次ページへのリンクであるならまだしも、登録や予約に関するボタンであった場合、コンバージョンやユーザー体験において悪影響を及ぼす影響がある。イケてない。 解決策 対象のボタンに対してuser-select: noneを指定する事でユーザーがテキストの選択をできないようにする事ができる。
先週の記事「HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ」をブラウザで簡単に利用できるChromeの機能拡張を紹介します。 まだリリースされたばかりですが、早くも利用者が1,000人を超えようとしています。 Alix -GitHub Alix -Chrome ウェブストア Alixの特徴 Alixのインストールと使い方 Alixの特徴 Alixは少し高度なCSSセレクタを使用したスタイルシートを適用するだけで、HTMLのアクセシビリティに関する問題を解決できます。 実際にどんなセレクタを使用しているのかは、前回の記事を参考にしてください。 HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ スタイルシートを記述するのは時間がかかる、セレクタが難しい、という人でも大丈夫です。AlixはCSSでおこなうHTMLのLintツール「a11y.css」をブラウザから簡単に利
Hatena Engineer Seminar #25「アクセシビリティ編」を6月6日にオンライン開催します #hatenatech - Hatena Developer Blog
こんにちは。Mackerel CRE の id:KGA です。 2023年6月6日（火）に Hatena Engineer Seminar #25 「アクセシビリティ編」の開催が決定しましたのでお知らせします。 エンジニア4名が登壇し、はてなの開発組織 / はてなブックマークチーム / Mackerelチーム それぞれで行った、アクセシビリティ改善に関する取り組みについて発表します。 開催はオンラインです。（詳しくはconnpassのイベントページをご確認ください）。皆様のご参加をお待ちしております！ イベント概要 日時: 2023年6月6日(火) 19:00-20:00(予定) 参加費: 無料 開催形式: オンライン配信 YouTube Live YouTube Live HatenaTech チャンネルにて https://www.youtube.com/channel/UCwqsFJ
アクセシビリティ上の問題を仕込んだサイトを生成します 勉強の教材、業務の資料としてお使いいただけます 用途にかかわらず無料でお使いいただけます 障壁（バリア）の設定 プリセット版 問題をあらかじめ設定（プリセット）した駒瑠市サイトです。カスタマイズ版にのみ存在する障壁もあります。 プリセット版で使うWCAGのバージョンを選択してください WCAG 2.0以外のバリアは、まだあまり揃っていません。WCAG 2.2のバリアはまだありません。 WCAG 2.0 WCAG 2.1 WCAG 2.2 altの不具合の多い駒瑠市駒瑠市のロゴ、COOL CHOICEのロゴ、情報が不足したalt（「温暖化の状況」ページのグラフ）、altと重複したキャプションの提供（トップページ「あなたにもできる取り組み」）、文字画像にする必要がない上にaltが不適当な画像（トップページ「駒瑠市の本日のCO₂排出量」）、市
ウェブサイトのアクセシビリティで裁判--米の視覚障害者が提訴
Bruce Sextonという24歳の大学生は、自分を含む多くの視覚障害者が、インターネットのおかげで今まで以上に自立した生活を送れるようになったと語る。 たとえば買い物をするにしても、実際の店舗に行って品物を探したり店員に尋ねたりする必要はない。代わりにキーボードと画面読み上げソフトを使って、ウェブで品物を探したり購入したりできるからだ。 でも、それは本当に可能なのだろうか。 先週、Sextonはある視覚障害者支援団体と共に、大手小売チェーンTargetのウェブサイトが目の不自由な人にはアクセス不可能で、米国障害者法を採用するカリフォルニア州法に違反するとして、同社を相手取った集団代表訴訟を起こした。 Sextonとボルティモアに拠点を置くNational Federation of the Blind（NFB）は、カリフォルニア北部にあるアラメダ郡高等裁判所に訴状を提出した訴状の中で、
新年明けましておめでとうございます。 今年もWordPressでCSSな1年にしたいと思います。よろしくお願いします。 年末年始は実家に帰省してぐだぐだしていたのですが、その中でいろいろ気づかされたことをつらつらと。 僕の父親について ぼくの父親について。 62歳。 若いときから緑内障・白内障を患い、目の手術を何度かしている。 車の運転ができなくなった。 パソコンが30年来の趣味の一つ。PC-8801とか実家にあった。 大量のLPをPCに取り込んだり、ローカルメディアサーバーを組んだり、主にオーディオ関係でPCを活用している模様。 パソコンは自作派。 日常生活レベルでは、それなりに見えているようです。 インターネットもばりばりやっていますし、iTunesもばりばりに使っているようでした。パソコン組んだり、カードを挿したりなどはできる様子。 どうやってPCを使っているのか 現在Windows
Webデザイナーや開発者は往々にして、自分たちの制作物に誰がアクセスして使うのかという点に関して無関心です。 使いやすさなどよりビジュアルが優先されることも多いですが、現代のクリエイターとして私たちは、より道徳的な観点を持ち、人それぞれの能力に併せたアクセシビリティを提供するべきです。 イギリスのアクセシビリティに関する法律に対する法的義務はさておき、イギリスには1,190万人以上の障害者がおり、その数は人口の19%に該当します。これはつまり、アクセシビリティが十分でないサイトに対して不満を持っている潜在ユーザーが、それくらい存在するということです。 どうして良いWebアクセシビリティが必要なのか ユーザーはWebサイトを使用するとき、どんなことを困難と感じるのでしょうか。アクセシビリティを語るにあたって、どういったものがあるかを見てみましょう。 聴覚系の障害 これは軽度なものから重度の聴
公開日 : 2014年8月28日 (2018年1月20日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコン (.gif、jpg、.png など) ではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、ウェブアクセシビリティの観点で考えると、実装において若干の工夫が必要です。 代替
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
自治体サイトWebアクセシビリティ調査｜有限会社ユニバーサルワークス
香雪ジャーナル - はてなとWebアクセシビリティとモチベーション
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
モダンに生まれ変わった「メモ帳」アプリはアクセシビリティにもしっかり配慮【Windows新標準アプリ徹底解説】
富士通アクセシビリティ・アシスタンスが提供終了。感謝と共に代替手段も紹介してみる
webアクセシビリティ実装チェックリストを作った - Qiita
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
Webアクセシビリティ入門
全盲のエンジニアと働くことで見えてきたサイボウズのアクセシビリティ｜Cocoda
ブログパーツの作り方：横幅は何ピクセル？:WebClip - ウェブ制作、UXD／IA、アクセシビリティ
react-modal のアクセシビリティまわりの実装を読む
Web Componentsのアクセシビリティ
アクセシビリティを改善するために、通常のCSSのリセットに加えるスタイルシート -a11y css reset
デザイン>ユニバーサルデザイン>富士通アクセシビリティ・アシスタンス - FUJITSU Japan
いますぐできる！Webアクセシビリティ改善3選 - Techtouch Developers Blog
アクセシビリティ vs セキュリティ ～こんな対策はいらない！～
アクセシビリティからデザインを学ぼう
電子書籍版デザイニングWebアクセシビリティの無料版がかなりのボリュームでびっくり！
「ビヨンセの公式サイトも訴えられた」企業Webサイトがアクセシビリティに取り組むべき理由とは？ | イベント・セミナー
WEB担当者必見！アクセシビリティで業界を先駆けよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まだ画像テキスト使ってるの？ アクセシビリティとSEO両立のベストプラクティス
CSSでボタンのアクセシビリティを向上させる方法(追記有り) - Qiita
より重要になった、HTMLのアクセシビリティに関する問題を解決するChromeの拡張機能 -Alix
駒瑠市〜アクセシビリティ上の問題の体験サイト〜
目の悪い父親を見ていて気づいたこと。アクセシビリティについて考えたこと。 - Toro_Unit
Webデザイナーが最低限気をつけるべき８つのアクセシビリティ
アイコンフォントのアクセシビリティ向上 | Accessible & Usable