タグ

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

  • ズーム機能と文字サイズ変更機能のこれから | Web標準Blog | ミツエーリンクス

    CSS Zen Gardenの創始者であるDave Sheaが、“Zoom”という記事で、ブラウザーのズーム機能の普及がこれからのWeb制作にどのような影響を及ぼすかを投げかけたことで、活発な議論が行われています。 画像やレイアウトを維持しながらページ全体を拡大するこのズーム機能は、Internet Explorerでは7から、Firefoxでは3から、そしてOperaにはかなり前のバージョンから搭載されています。従来からのテキストサイズ変更機能もIEやFirefoxには残っていますが、現在はズーム機能のほうをプッシュしているようです。Safari(WebKit)では今のところテキストのサイズ変更のみを搭載していますが、開発版ではズーム機能が実装され、デフォルトの挙動として採用されているとのことです。 つまり来年には、どのブラウザーもズーム機能を実装しているものと考えられます。ズーム機能の

    picnicgraphic
    picnicgraphic 2008/10/16
    「小中大ボタンが増えているのは、ブラウザーが持つ拡大・縮小機能へ簡単にアクセスできない、GUI上の問題/視認しやすい場所にインターフェースを用意することで、拡大・縮小をより身近な機能として認識させる」
  • 情報を重複させないサイト構造 - Trans

    強調したい情報がある、だから繰り返したい!でも、それってユーザビリティ・アクセシビリティは高くないかもしれないのです。 某視覚障害者のMLにて 普段はソフトウェアの使い方や近況報告のようなMLなのですが、たまに僕たちのようなサイト制作者にとっては興味深い投稿がされます。例えば、視覚障害者からのこんな内容でした。 「JR東日のメールでのお問い合わせが使いにくくて仕方がない」という内容。というわけで覗いてみました。 情報量が多すぎる! まず、指摘のあったその問題のページは、JR東日:ご意見・ご要望の受付です。当ブログからでは分かりにくいのですが、実は手前のページからポップアップウィンドウで開きます。また、お問い合わせするだけなのになぜこんなにも個人情報を入力しなければならないのか、という疑問も沸いてきます。 では、このポップアップウィンドウを開く手前のページはどこなのか。それがJR東日

    情報を重複させないサイト構造 - Trans
    picnicgraphic
    picnicgraphic 2008/06/24
    「情報を強調するために何度も繰り返すということはユーザにとって注意を喚起する一方で、ユーザの誰かにとってアクセシブルにはならない可能性がある」
  • スムーススクロールは音声ブラウザで確認すること。 - Trans

    スムーススクロールを実装する際は音声ブラウザでの読み上げを確認しておいたほうがよいようです。 jQueryなどのスムーススクロール たまに見かけるjQueryのモジュールでページ最下部からページの最上部にスムーズにスクロールさせるためのページ内リンクがあります。スクリプトもいろいろと紹介されているので、使っているサイトも多くあります。 ただ、そのうちのいくつかのモジュールでは音声ブラウザでうまく動作しないものがあります。 どういうことかというと、普通のページ内リンクはリンクの文字列(例えば、「ページの最上部へ」)を女性の声などで読み上げているときに、Enterをクリックするとid属性やname属性でマークアップされた任意の場所に飛び、音声ブラウザは自動的にそこから読み上げを再開します。 ただし、スムーススクロールで紐付けられたページ内リンクでEnterをクリックすると音声ブラウザがid属性

    スムーススクロールは音声ブラウザで確認すること。 - Trans
    picnicgraphic
    picnicgraphic 2008/05/05
    スムーススクロールでEnter→音声ブラウザがid・name属性に飛ばず読み上げ停止/読み上げ再開しようとするとページ内リンクの元の箇所から再度読み上げ(ページ最上部に戻る機能をしない)のようなブラウザが存在する。
  • リンクテキストとアクセシビリティとスクリーンリーダーの動作 - TRANS [hatena]

    リンクテキストをスクリーンから隠したいときに、どんな方法が最もアクセシブルなのでしょうか。 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]
    picnicgraphic
    picnicgraphic 2008/04/30
    リンク隠したい場合offscreen(例:position: absolute;left: -9999em;)推奨。display: none・visibility: hiddenでは読み上げない・title属性無視・URL読み上げなど発生/リンクテキスト代わりのtitle属性はすべてのリーダーで使えるか限らない。
  • hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans

    ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性(2004年9月13日)を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。

    hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
    picnicgraphic
    picnicgraphic 2008/03/18
    構造イメージ(→標準的デザイン)/行きたい場所(→ナビスキップ)/迷子にならない道しるべ(→各エリアにページ内起点→行き来楽・デザイン一貫性で構造理解)。HTML5ならarticle・aside要素で音声ブラウザによるナビ向上。
  • Re:ユーザーの動き。

    ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック=トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近

    Re:ユーザーの動き。
    picnicgraphic
    picnicgraphic 2008/02/18
    「トップページ」「このページの上部へ」/サイドバナーはデザイン/リストのマークをクリック/プルダウン・フッターリンクOK/全角半角わからず/入力エリアはマウス移動/サイトマップ・パンくず使われず/矢印はリンク認識
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。

    picnicgraphic
    picnicgraphic 2008/02/04
    「メルマガ「ウェブアクセシビリティ入門」バックナンバー」
  • 財団法人2007年ユニバーサル技能五輪国際大会日本組織委員会

    1. 会議テーマ 「Good skills, Good job, Realizing a Society for All」 2. 参加定員 300名 3. プログラム

    picnicgraphic
    picnicgraphic 2007/09/03
    どのページにいきなりたどり着いても「まず今のページが何を表現しているページなのかを宣言することがユーザビリティにとってもアクセシビリティにとってももっとも大切なこと」を実行しているサイト。
  • Dive Into Accessibility

    この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility(英語版)をダウンロードする HTML英語版)をダウンロード PDF英語版)をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立

  • CSS Nite公式ブログ:CSS Nite Vol.15フォローアップ(アンケートから)

    2006年12月21日に開催したCSS Nite Vol.15にて、ご協力いただきましたアンケートの設問「アクセシビリティを実践する上で、一番困っている(苦労している)ことは何ですか?の回答を公開します。 実装しても、普段そのサイトを愛用されてるユーザーがどういった感想を持たれているのかという実感がない。 やはり見た目のみの要求が多いので、時間的にもなかなか手が回らないのが残念です。 クライアントは何でも詰め込みたがる傾向があるので、なかなか思い通りにはいかない。そもそも自分自身がよく理解できていない。 コンテンツが膨大かつ早く更新することを求められる(←自社サイトです)。一方アクセシビリティにも理解ある人が少ないので、どうしても楽な方に流れてしまう。 単に8341-3をクリアするだけでは、understandableにならないので、どこでキリをつけて良いのか、加減が難しい。8341-3:

    picnicgraphic
    picnicgraphic 2007/01/24
    「CSS Nite Vol.15にて、ご協力いただきましたアンケートの設問「アクセシビリティを実践する上で、一番困っている(苦労している)ことは何ですか?の回答」一覧。興味深いデス。
  • ブロガーのためのアクセシビリティガイドライン - Trans

    唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。 といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概  要」とか、「2007年1月11日(水)」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。 前提として、 アクセシビリティに詳しい方にとっては、「何を今更」という内容。 デザインやマークアップよりも、コンテンツを書く=ウェブライティングに特化したガイドライン。 ブロ

    ブロガーのためのアクセシビリティガイドライン - Trans
    picnicgraphic
    picnicgraphic 2007/01/13
    基本的なアクセシビリティガイドライン。#「alt属性は空白よりも、半角スペースのほうが最適であること」の理由を確認すること。→1/14に追記で理由かいてくださいました。ありがとうございます!
  • 入力フォームのユーザビリティ&アクセシビリティ

    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.

    picnicgraphic
    picnicgraphic 2006/12/29
    「入力項目の説明は、フォームの前に書くべき/ラジオボタン、チェックボックスを使用した選択項目には、「選択可能な数」を明記するべき/言葉によってナビゲートする場合、位置情報を使うべきではありません」など。
  • http://hanamaru.hil.ntt.co.jp/hanamaru/check

    picnicgraphic
    picnicgraphic 2006/12/02
    「ユニバーサルデザインの観点から、ウェブページを診断するチェックツール/さらに、悪い箇所を指摘するだけでなく、その改善例を実在するウェブページを見本として説明することができる」
  • ハイパーリンクをより良い物に - Personnel

    「リンクする」とはリソースとリソースの関係を明示すること リンク先にジャンプするのはブラウザが行っていることであって、この現象はリンクする行為と直接関係がありません。 問題点を指摘されるリンクの用い方というのは、必ずと言っていい程この基を蔑ろにしたものとなっています。従って、極めてシンプルなこのリンクの質を知っておけば: 間違えた用法でアクセシビリティを低下させてしまう といった事態を自然に防ぐことができる筈です。 簡単な例を挙げます。「ココをクリック」の「ココ」という文字列をアンカーにする行為は、しばしば批判されます。しかし「なぜ間違っているのか」については個々の具体的な問題としてしか説明されません。これでは、いつまで経ってもこれと類似した間違った方法でリンクしてしまう方が後を絶たないわけです。 この「ココをクリック」の問題点は実はたった一つです。もといそう考えるべきです。

    picnicgraphic
    picnicgraphic 2006/11/15
    ここをクリックについてその2。「リンクはリンク先にジャンプさせる為」でなく「関係を明示する」もの。"ここ"とURLは関係ないし印刷時もリンク先がわからない。関係性を示すことでデッドリンクになっても検索できる。
  • 読みやすいテキスト -- Style Guide for Online Hypertext

    あなたの(ハイパー)テキストを読みやすく これは、私がよく目にする、そしてあまり好きではない、ハイパーテキストのスタイルを巡る2つの問題について少々文句をつけようというものです。 一つ目は「ここ」症候群です。すなわち: これこれに関する情報は _ここ_ をクリックすると入手できます。 というもの。この場合、「ここ」はリンクになっています。このスタイルは全くもって奇妙奇天烈です。「ここ」をクリックするには、*当に* ここでいいのかどうかを確かめるために、周囲を見回さなければなりません。声を大にして言いますが、HTMLページを作成するにあたっては、クリックする場所は、それが指し示す内容のタイトルのようなものにしてください。すなわち、 _これこれ_ に関する情報が用意されています。 そして、 _検索の方法についての情報_ が用意されています。 のように記述し、 検索の方法についての情報は、_こ

    picnicgraphic
    picnicgraphic 2006/11/15
    ここをクリックについてその1。「クリックする場所は、それが指し示す内容のタイトルのようなものに/HTMLページを、リンクをたどらずに読んでも意味がとおるようにせよ」
  • テーブルとアクセシビリティ -- ごく簡単なHTMLの説明

    大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者(聴取者)に伝える機能を持っています(WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました)。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足:テーブルsummary属性の読み上げ 音声ブラウザとth要素 表(テーブル)は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ

    picnicgraphic
    picnicgraphic 2006/11/14
    scope属性。「scope属性を指定すると、そのセルがどちらの方向に対する見出しであるか明示/全ての見出しセルに設定しないと、scope属性のないth/td要素はデータセルの見出しとして扱われなくなることがある([HPR]の場合)」
  • アクセシビリティ40ガイドライン

  • Walk on the bright side of life : 「Webアクセシビリティ中級講座」

    8月30日、「Webアクセシビリティ中級講座」を受講した。主催の「ハーモニー・アイ」は、ユニバーサル社会形成をモットーに活動しているNPO法人。「アクセシビリティ・ユーザビリティチェック」や、研修・セミナーなどを開催されている。 今回の講座では、実際に視覚障害のある方を招き、ユーザー・テストをライブで行いながら、実際のサイトの手直しを行い、さらにその結果をレビューするという試みが行われた。 一概にアクセシブルといっても、視覚障害だけでなく、高齢者対応という点では実際のところ、かなり身近な問題だ。私自身、それなりに取り組んではいるものの、今回のセミナーを受講して、たくさんの「気づき」を得られた。 タイトルとh1がほぼ同じ内容の場合、音声ブラウザでは、ナビゲーションスキップでh1すると、同じ内容が二回読まれることになる。ジャンプ先の位置を要検討。 たとえ、その画像を見ることができなくても、プリ

    picnicgraphic
    picnicgraphic 2006/09/05
    ナビスキップの位置注意/画像は基本スルーされる/視線移動は上下のみ/画像も文字と同様に拡大が必要/印刷ボタンの必要性/必要な情報がプリントできることの重要性/PDFだめ。
  • Accessibility Color Wheel

    Accessibility Color Wheel
  • 日本の視覚障害者用ウェブ利用ソフトの機能調査

    最新バージョンを調査するために,以下を対象とした.ホームページ・リーダーに関しては,調査期間中(2005年7月~2005年10月)に新しいバージョンが発売されたため,バージョン3.02と3.04の両方を調査した. IBM ホームページ・リーダー 3.02 IBM ホームページ・リーダー 3.04 (2006年2月,SP3適用済みのバージョンで再テスト) PC-Talker XP Version 1.14 95 Reader Version 6.0 JAWS for Windows Professional Version 6.2 日語版 目次に戻る 4. ユーザエージェント毎の調査結果 ユーザエージェント毎の調査結果を,各テスターの調査報告を基に以下にまとめる.各テスターが調査した詳細な結果は資料(資料B,C,D,E)を参照されたい.また,UAAGワーキンググループの調査結果と比較するた