タグ

アクセシビリティに関するpeketaminのブックマーク (21)

  • 見えない人はWebをどう閲覧? 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】:東京新聞 TOKYO Web

    見えない人はWebをどう閲覧? 紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】

    見えない人はWebをどう閲覧? 本紙サイトの課題にがくぜん、求められる「不十分と認める勇気」【動画も】:東京新聞 TOKYO Web
  • 達成基準リスト - 宮内庁

    文まで読み飛ばす ヘッダーナビゲーション RSSキッズページEnglish携帯版 宮内庁ナビ サイトマップ 用語集 よくある質問 検索する語句 皇室 皇室のご活動 おことば・記者会見 皇室に伝わる文化 参賀・参観・申込 宮内庁 現在のページは ホームウェブアクセシビリティ達成基準リスト のページです。 達成基準チェックリスト 達成基準チェックリスト 細分箇条 達成基準 適合レベル 適用 結果 注記 1.1.1 非テキストコンテンツの達成基準 A ○ × ヘッダーナビゲーション・グローバルナビゲーションの文字画像の置き換え 1.2.1 音声だけ及び映像だけ(収録済み)の達成基準 A - ○ 該当コンテンツ無し 1.2.2 キャプション(収録済み)の達成基準 A - ○ 該当コンテンツ無し 1.2.3 音声解説又はメディアに対する代替コンテンツ(収録済み)の達成基準 A - ○ 該当コンテン

  • Patterns

    An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.

    Patterns
  • https://www.soumu.go.jp/main_content/000439213.pdf

  • サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable

    公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入

    サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
  • シャニマスのチェックボックスから見る色弱者の世界|謝罪P

    先日のアップデートシャニマスUI周りに色々と手が加えられた。 その中でも個人的に嬉しかったのは、ソートに関連するチェックボックスのON/OFFが見やすくなっていたことだ。 大多数のユーザーにとっては「まあ確かにね」くらいのものかもしれない。しかし私は「これでようやくまともにソート機能が使える」とひそかに歓喜した。一部のユーザーも共感してくれるのではないだろうか。 なぜなら私の目に映った変化は以下のようなものだったから。 チェックの光沢の有無でかろうじて判別していた(ひよこ鑑定士か?)この見え方の差異は、私が『色覚マイノリティ』、いわゆる『色弱者』であることに起因する。 『色弱者』って何?光(色)を感じる視細胞が何らかの原因により欠損、または十分に機能しないことによって色の見え方が一般とは違う人のことを、記事では『色弱者』という呼称で表記する。 日人男性の5%、女性の0.2%がこの色

    シャニマスのチェックボックスから見る色弱者の世界|謝罪P
  • Colorblind Web Page Filter Testing Tool & Simulator | Toptal®

    What are color blind anomalies? Please indicate a resource to be viewed, and a color filter to be applied to that resource. Use the Colorblind Colorlab to select safe colors earlier in the design process. Learn more about colorblindness in this Wikipedia entry. This tool is still in development, but feedback is welcome while we work on it. If you only use one filter, use the greyscale filter which

  • CUD的にヤバい配色を把握する - Webデザインの日々日記

    この記事は、アクセシビリティ Advent Calendar 2019 - Adventar23日の記事です。 皆さん、CUD(カラーユニバーサルデザイン)、してますか? 一流のデザイナーならみんなやっているというCUDですが、一つの壁があります。 それが、これ。 https://www.nig.ac.jp/color/handout1.pdf 図4より。色盲の人に見分けにくい色のシミュレーション 左端がもともとの色。中央と右が緑、あるいは赤を検知する細胞が無い人の色の見え方で、判別が困難になる色の組み合わせを示しています。 CUDを身に着けるために、これらの色の組み合わせを丸暗記するのはなかなか面倒であり、忘れてしまう可能性もあります。これを体系的に理解して身に着けることはできないか?というのが今回の記事の目的です。 とりあえず色盲とか色弱について理解しよう 人間の目は、3種類の細胞を使

    CUD的にヤバい配色を把握する - Webデザインの日々日記
  • 読み上げソフトユーザーへの情報保障のためのプレーンテキストデータの書き方について | すちゃらかコーダー

    何かを例えば、wordやPowerPointのファイル、PDF形式のファイルなどで送ったり、提供したり、公開したりする場合で、さらに提供する人に視覚障害者などの読み上げソフトを利用する方が含まれている場合には、同じ内容のプレーンテキストファイルも作成して提供することがあります。その際に気をつけていることを何点か思いつくところを参考までにまとめてみました。 あくまで私のやり方でして、これが正解というものではないとは思いますし、いつも全てをやっているわけでもありません。対象となる人が限定されるなら、その人のICTスキルに応じての話になりますし、幅広い層の不特定多数の人を対象にホームページ上で公開するとなった場合は、それなりに労力をさくという感じでケースバイケースです。この中からできるところからやれるとよいのかもしれません。 プレーンテキストデータの書き方については、毎回迷いながらやっていますの

    読み上げソフトユーザーへの情報保障のためのプレーンテキストデータの書き方について | すちゃらかコーダー
  • Accessible Rich Internet Applications (WAI-ARIA) 1.0 日本語訳

    [contents] Accessible Rich Internet Applications (WAI-ARIA) 1.0 W3C Recommendation 20 March 2014 This version:http://www.w3.org/TR/2014/REC-wai-aria-20140320/Latest version: http://www.w3.org/TR/wai-aria/ Previous version:http://www.w3.org/TR/2014/PR-wai-aria-20140206/Editors:James Craig, Apple Inc. Michael Cooper, W3CPrevious Editors: Lisa Pappas, Society for Technical Communication Rich Schwerdt

  • アクセシブルな情報システム - Wikipedia

    Daisy Player アクセシブルな情報システム(アクセシブルなじょうほうシステム、英: digital accessible information system, 頭字語:DAISY[1])は、デジタル録音図書の国際標準規格である。音声およびテキストデータの構造化と、音声・テキスト・画像データ等の同期再生を主な特徴とする。オーディオブック、定期刊行物、デジタル録音図書の制作、またデジタルマルチメディア図書の作成に使われ、前者の対象は主に視覚障害者、後者は識字障害者(ディスレクシア)・学習障害者等のために使われている。一般に、英語での頭文字を使った略称であるDAISYおよびその仮名表現であるデイジーが呼称に使われており、規格そのものはDAISY規格、またこの規格に基づいて作られた録音図書はデイジー図書、デイジー録音図書、あるいはマルチメディア・デイジー図書などと呼ばれ、英語圏で「Di

    アクセシブルな情報システム - Wikipedia
  • 奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ

    【追記】Twitterで教えてもらったのですが、13行が改善されて3行になってました。ご対応頂いた市役所のご担当者様、富士通のご担当者様、お疲れ様でした。今後とも、よろしくお願いいたします。【追記終わり】 住民票を郵送で取り寄せようと思って市役所のサイトを見たんですよ。今まで何回も見てるし別に普通のクソみたいな使いづらい行政サイトだなって相変わらず思ってたんです。でもね、あれ、これはおかしいなって、思ったんです。なんかね、変だな~って。それがね、この画像なんですよ。 委任状 – 奈良市 すっごいパンくずなんですよ…パンくずい過ぎてお腹いっぱい。マジで。 僕らの業界ってまぁどの業界でもそうだけど仕事の流儀とか、そういうのあるじゃないですか。使いやすいサイトを作りたい人、ある程度ユーザビリティを犠牲にするけどかっこいいサイトを作る人、でもこれ酷いでしょ。誰もパンくず13段にしろなんて望んでな

    奈良市公式サイトのパンくずが斜め上を行くヤバさな件 – Webディレクターのお仕事ブログ
    peketamin
    peketamin 2014/03/24
    1つの文書が複数の子カテゴリと複数の親カテゴリに紐付け可能になっていて経路が一意に決まらないのにパンくず出せ、とか言われれたんじゃないかと想像 (ってこの前言われて断った…)/階層とはなんだったのか。
  • JIS X 8341-3:2010 解説

    はじめに この文書が扱う内容 この文書は,JIS X 8341-3:2010を利用する際に役立つ解説として,ウェブアクセシビリティ基盤委員会が作成・公開しています.規格と合わせて読むことで,規格票には書くことができなかった内容や,規格の利用者のためにウェブアクセシビリティ基盤委員会が作成している資料の利用方法などがわかります. 以下,まず,ウェブアクセシビリティ基盤委員会が公開している資料について説明し,次に,そもそもウェブアクセシビリティとは何で,JISのような規格(ガイドライン)はウェブアクセシビリティ向上にどのような役割を持っているのかを解説します.その後,規格の構成に沿って,重要な箇条を解説します. 規格票の購入方法 ウェブアクセシビリティ基盤委員会が公開している資料は,日規格協会が発行している規格票の代わりとなるものではありません.JIS X 8341-3:2010を使用する際

  • 新JIS規格ウェブコンテンツ(JIS X 8341-3:2010)

    2004年6月に出された JIS X8341-3(高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第三部:ウェブコンテンツ)は、2009年が工業標準化法による5年サイクルの見直しの時期にあたり、技術の進歩や、国際基準のWCAG 2.0との整合性などを考えて、2010年8月20日には改正されました。 改正版との違いを簡単にまとめると、 改正版では、WCAG 2.0(Web Content Accessibility Guidelines 2.0)との国際協調を大きな柱としているため、世界標準と共通の達成基準及び実装方法になりますが、支援技術のサポート状況などによっては、日のユーザーに合わせた対処をしなければならない可能性があります。 改正版では、決められた試験を通して適合の有無を客観的に証明できるようになり、「JIS Q 1000 適合性評価・製品規格への自己

  • WCAG 2.0(W3C勧告)日本語訳 [原題:Web Content Accessibility Guidelines (WCAG) 2.0]

    【注意】 この文書は、2008年12月11日付の W3C 勧告「WCAG 2.0」(原文は英語)を、財団法人日規格協会情報技術標準化研究センター情報アクセシビリティ国際標準化に関する調査研究開発委員会ウェブアクセシビリティ国際規格調査研究部会が日語に翻訳したものです。このワーキングドラフトの正式な文書は、あくまで W3C のサイト内にある英語版であり、この文書には翻訳上の間違い、あるいは不適切な表現が含まれている可能性がありますのでご注意ください。また、リンク先が英語の場合、あるいはダミーのページである場合もあります。ご了承ください。 なお、文中にある関連文書の "Understanding WCAG 2.0" へのリンクは、すべて原文の英語版へリンクしていますが、 "Understanding WCAG 2.0" の日語訳もあります。あわせてご覧ください。 [contents]

  • Webサイトを読むということ:そんなことも(時には)ある

    ウェブコンテンツによってユーザーが興味のあるセクションに集中できるようになれば、ユーザーはその記事を流し読みから実際に読むようになる。 Website Reading: It (Sometimes) Does Happen by Jakob Nielsen on June 24, 2013 日語版2013年7月8日公開 (オンラインバンキングのような)直接取引を別にすれば、インターネットコンテンツに関するユーザーの行動というのは矛盾している: ユーザーは情報を求めてウェブサイトに行く。 ユーザーは標準的なウェブサイトの訪問中、ほとんど読むことをしない。 この2つめのポイントは長年にわたる大量の調査で十分に裏付けられている: 1997年に世界で初めて行われたユーザーがウェブコンテンツをどのように読むのかについての調査の結果を要約すると次の一言に集約される: ユーザーは読まない。情報を注意深

    Webサイトを読むということ:そんなことも(時には)ある
  • 目の見えないユーザはiPhoneをどう操作するか

    日、アクセシビリティの専門家である中根雅文さんに会ってきた! 中根さん自身も全盲であり、目の見えないユーザがどのようにiPhoneを使うか、アクセシビリティとはなんぞやなど、いろいろと教えてもらったので、それについて書いてみる。 と、題に入る前に、まず、ここまでのいきさつを書いてみる。なんで、お前いきなりアクセシビリティの話するのよ?という疑問もあるだろう。 僕はLisgoという読み上げアプリをリリースしたおかげで、視覚障害者の方から使っているよというお褒めの声が届いた事があるのです。 その時は「アプリ作っててよかったな」と開発者冥利につきて幸せ気分だったわけだが、もともと自分が移動中にWeb記事を聞きたくて作ったアプリ。特に視覚障害者向けにカスタマイズとかはしてなかったのですね。 まあ、当初からそういうニーズがあるだろうと、ある程度は予測していた。しかし、ターゲットを絞るのが重要だと

    目の見えないユーザはiPhoneをどう操作するか
  • フォーム入力要素の注釈のマークアップ | Accessible & Usable

    公開日 : 2013年4月16日 (2020年8月30日 更新) カテゴリー : アクセシビリティ Web サイトのフォームの中には、入力要素 (<input> 要素、<textarea> 要素、<select> 要素) のすぐ上か下に、注釈を付け加える場合があります (たとえば、入力フォーマットを指定したい場合などです)。 入力要素に注釈を付け加えた例 (パスワードの入力フォーマットの指定) この際、セマンティックに (マシンリーダブルな形で) 入力要素と注釈を紐づけるマークアップをしておくと、なおよいでしょう。たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素にフォーカスが当たったときに、その要素に紐づいた注釈も併せて音声読み上げされる、といったことが期待できるからです。 「aria-describedby」を用いて入力要素と

    フォーム入力要素の注釈のマークアップ | Accessible & Usable
  • 目が不自由な人のネット利用に関する8つの迷信

    2013年3月23日 アクセシビリティ 以前「Webアクセシビリティは、誰がどう必要としているのか?」という記事を書きましたが、最近Webアクセシビリティの記事を読む機会が増えています。その中で、Webページを音声で読み上げるスクリーンリーダー(音声リーダー)についての興味深い記事があったので翻訳してみます。誰もが聞いたことがあるような、アクセシビリティに関するものですが、いくつかは間違った情報として流れているものも多いようです。また、元記事のコメント欄も賑わっていたので、そこにコメントされていたものも抜粋して紹介します。 ↑私が10年以上利用している会計ソフト! 私はフロントエンドデベロッパーとして、アクセシビリティについてはもちろん聞いた事があり、スクリーンリーダーで読みあげるのに何の問題もないWebコンテンツを作るよう、最善を尽くしてきました。しかし、多くのデベロッパーと同様、実際に

    目が不自由な人のネット利用に関する8つの迷信
  • 首相官邸ホームページとアクセシビリティ - ただのにっき(2012-04-06)

    ■ 首相官邸ホームページとアクセシビリティ 首相官邸ホームページのリニューアルに4,500万円かかったというニュースで高いの安いのと話題になっているけど、それはまぁどうでもよくて*1。これに対してあるWebデザイン会社が書いた「高くないよ!」というエントリを読んだアクセシビリティ業界人たちがそろって天を仰いだという話である。 件のエントリは「首相官邸ホームページのリニューアル構築費用に対して製作者側からの考察」で、特にアクセシビリティのところはツッコミどころ満載なんだけど、その点にかんしてはすでに木達さんが書いているので(ようするに先をこされた)、Web業界人はろくろなんて回してないで読んでおいた方がよいです。特にアクセシビリティとデザインの両立のところ。 さて、首相官邸ホームページのリニューアルでアクセシビリティを確保するとして、件の記事では300万円の見積を出しているのだが*2、じゃあ

    首相官邸ホームページとアクセシビリティ - ただのにっき(2012-04-06)