Twitter / 平野敬 / HIRANO Takashi: CSS普及に向けての、少なくとも当初の建前の一つは「 ...CSS普及に向けての、少なくとも当初の建前の一つは「構造とデザインを分離することで多様な環境からアクセス可能になる」だったはずなんだけど。10年経ってCSSが一般化した今、かえってアクセス性が大いに低下した感がある。CSSとJSをOffにしてまともに閲覧できるサイトの方が珍しい 約14時間前 via Echofon
WEB+DB PRESS Vol.49 WAI-ARIA: Days on the Moon
現在発売中の WEB+DB PRESS Vol. 49 にて Accessible Rich Internet Applications (WAI-ARIA) に関する記事を書かせていただきました。2009 年は Web アクセシビリティの年になるという噂をどこからともなく聞きつけてこのテーマにしたのですが、ちょうど WAI-ARIA 1.0 の最終草案も公開されよいタイミングになったのではと勝手に思っています。 WAI-ARIA とは何なのか、詳しいことは雑誌記事を参照していただくとして、簡単に言えば JavaScript で構築した RIA を機械的に認識するための仕様です。たとえば JavaScript でこったボタンを作ったとしましょう。利用者がどうやって「それがボタンである」ということを認識するかといえば、「周りから浮き出ていてマウスカーソルを乗せると色が変わる」といった感覚によ
Graceful DegradationとProgressive Enhancementの実践 | Web標準Blog | ミツエーリンクス
Chris Heilmanによる“Graceful degradation versus progressive enhancement”という記事について、前回は概要とその意義について紹介しました。今回は後半にあるの例をもとに、どのように実践していくのかを考えてみたいと思います。 「印刷する」というリンク オンラインショッピングの決済画面には、印刷して手元に保管したいというニーズがあるからか「印刷する」といったリンクやボタンが設けられています。クリックしたときに印刷用ページが現れるものもありますが、記事では印刷ダイアログが現れる簡単なものを取り上げています。 このようなリンクは、JavaScriptにより実現されています。 <p id="printthis"> <a href="javascript:windowprint()">Print this page</a> </p> しかしな
送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記
いいね！ 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか？tabで移動しますか？ 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか？ 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って
alt属性が空なら、CSSで背景画像として扱うべきなの？ - Trans
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？のはてブコメントで何名かの方が「alt属性が空ならCSS指定」というような意見があったので、そのへんのお話。 きっかけ 上記エントリーでは実際に視覚障害者からの一つの意見としてこういう考え方もあるんだよ、ということを紹介しました。 ただ、何名かの方からはてブで「alt属性が空ならCSSで指定」、もしくは「空のalt属性はあまり増やしたくない」というコメントがちらほら見受けられました。 またもや西村あさひ法律事務所より その一方で、西村あさひ法律事務所のソースを読んでいると、次のようなコードが出現することが分かります。 <ul id="endof-content-area"> <li> <a href="#header-area" class="rollover">ページの先頭へ戻る <img src="/common
TwitterでWAI-ARIAの雰囲気を理解する - Trans
（追記2008年9月5日）属性のことをタグと書き間違えていた箇所を修正しました。（id:kitsさんより） Twitterの投稿文字数の制限というのはWAI-ARIAを理解する上で手っ取り早いサンプルだと思います。 @media 2008のプレゼンテーション資料 今年5月29日と30日にロンドンで行われたらしい@media 2008で、WAI-ARIA: It’s Easyというプレゼンが行われました。スライドも公開されています。 僕にとってWAI-ARIAというのは直感的に理解しにくいという面があったので、このブログでもあまり取り上げてこなかったのですが、このスライドの事例が自分にとって「ストン」と腑に落ちる部分があったので紹介します。 Ajaxとスクリーンリーダーの課題 WebサイトでAjaxの導入が進むに連れて、スクリーンリーダーが対応できないという課題がいろいろと出てきています。そ
Re: フォームのmaxlength属性 (agenda)
また、Ajaxを利用したWebサービスの登録フォームにおいて、入力可能な文字数のチェックを常に行うものや、「入力可能な文字数をオーバーしています」などのメッセージを表示させるものが増えています。このようなフィードバックを行う仕組みが、ブラウザにも標準的に導入されるべきなのかもしれません。 フォームのmaxlength属性 | Web標準Blog | ミツエーリンクスより 私の想像力が足りていないのかなあ。入力可能な文字数をサーバに再度問い合わせる必要性が分からないんだけど。Ajaxでやってるのってどこ? 私は思うにそれくらい十分標準的な方法で実現できる。DOMがそれ。しかもLevel1 HTMLで十分なレベルだ。DOM Level1 HTMLを実装しているブラウザは多い。 それともJavascriptに依存しないことがミツエーリンクスにとっての「標準的」なのだとすれば、ブラウザにも標準的に
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？ - Trans
アクセシビリティの基本でありながら、奥が深いalt属性。こんな視点もあるのだということを書いておきます。 追記（2008年7月14日）：文章中に誤解を招く表現がありましたので、文章を追記しました。 ある視覚障害者の意見 上のタイトルは皆さんを煽っているわけではなく、僕が実際に言われたこと。 どこのセミナーか講演会かは覚えていないのですが、決してプロレベルではないが自分でもWebサイトを制作できる全盲の視覚障害者（スクリーンリーダー利用者）がそのときに言っていた言葉。 もう少しちゃんと説明すると、もし何らかの画像があった場合に、僕たちのようなWebサイト制作者がそのimg要素のalt属性に何を入れればよいのかをパッと閃かなかったときに「とりあえず」alt属性を空にしているよね、と言われたということです。 僕はこれを言われたときに本当に胸に刺さるものがありました。思い当たる節が多すぎた（追記（
Stop using Ajax! - saitonのブログ
Dev.Opera に Stop using Ajax! という新着記事あり。以下にイントロ部分だけの簡単な要約。 日本でも違った意味で話題になっている CAPTHA だが、アクセシビリティの観点からするといろいろ問題があるのは直に分かるだろう。 著者の brothercake は「近頃私はひどく怒っている」という書き出しで始まるエントリを、自らの blog に上げている。Technology is the last, best hope for accessibility このエントリで彼は、プログラマが「最先端でセクシーな」という名の下に一部の人々を置き去りにしていい気になっていると指摘する。 The Web は全ての人に開かれていなければならない。Sir TBL*1 も「ユニバーサル・アクセス」と言っていたし、ウェブに関わる HTTP や HTML は、プラットフォームやデバイスにと
target=”_blank”問題にクライアント側で対処する - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) target=”_blank”に関する議論 - 徒委記の内容が、なかなか興味深いです。 以前はユーザの意図に反して新しいウィンドウがぽこぽこ開のはよろしくないという考えが一般的でした。 実際、タスクバーもすぐゴチャゴチャになりますし、新しくウィンドウが開く度にいちいち表示を最大化し直すのは面倒です。 しかし最近ではタブブラウザが普及して、新しいウィンドウ(タブ)を開くリスクが減り、むしろメリットが増えています。 「戻る」ボタンでページを再表示するよりは、遷移先ページのタブを閉じるだけの方がよほどスピードも速く、ストレスを感じません。 マウスジェスチャーの「閉じる」機能などを使えば閉じる動作も楽になります。 ただ
Re: マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ) (agenda)
マウスのホイールによる入力エラーの可能性 (ユーザビリティ実践メモ) プルダウンメニュー（select要素）がフォーカスされている時にページをスクロールさせるつもりでマウスホイールを回転させると、選択項目（option要素）が変化してしまう危険があるらしい（Firefox使いには関係ない）。 be-bitは二つの解決策を呈示している。プルダウンを使わず、ラジオボタンによる選択とするという解決策は、選択肢が多い場合などあり必ずしも適切ではない。また<select ～ onchange="window.focus()"> のようにonchange属性を追加することで、プルダウン項目を選択した時点で自動的にフォーカスが解除されるようにするという方法も、Javascript依存であり十分ではないし、そもそもユーザーの予期しないオブジェクト（be bitの例ではwindow.focus()）にフォー
覚え書き@kazuhi.to: SwapSkills勉強会：CSSで作るiPod touchのWEB
SwapSkills勉強会：CSSで作るiPod touchのWEB 昨夜はApple Store銀座店で開催された「SwapSkills勉強会：CSSで作るiPod touchのWEB」というイベントに参加しました。しばらくの間CSS Niteからは足が遠のいてしまって、この手のイベントに参加するのは本当に久しぶりのこと。立ち見する羽目になったら嫌だなぁと思いつつ定時過ぎに退社、1階に陳列されていたはずのMacBook Airには目もくれず3階の会場に向かってみれば、座席にはまだ余裕があって一安心。最前列で講演を聞かせていただくことにしました。参加の動機？講師の菊池さんとは、昨年Web 2.0 Expoで初めてお会いしましたが、その前からmicroformats.bizの運営をはじめ、氏の活動にはちょっと注目していましたので。 話の内容としては、iPod touchが世に与えた影響に始ま
アクセスキーの改善とこれから | Web標準Blog | ミツエーリンクス
HTMLではリンクやフォームにaccesskey属性を設定して、キーボードショートカットを割り振ることができます。しかし、仕様上の制限や実装の違いなどの理由から、現在は効果的に利用できるものではありません。 HTML 4以降で定義されたaccesskey属性には、対象がリンクとフォームのみという制限が存在しています。昔のように静的なWebページのみであれば特に問題がありませんが、最近のWebアプリケーションのように多様なコントロールをもつものにとっては、この制限が厄介なものとなります。 これに対し、現在策定中のXHTML Access Moduleでは、新しくaccess要素というものを定義して問題の解決を図ろうとしています。 <access key="m" title="Main content" targetrole="main" /> access要素のkey属性にアクセスキーを指定
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
target="_blank"の是非 - iso no blog
外部リンクって別窓で開いてくれた方が親切だと思いません？何を隠そう僕は別窓大好き人間なのですが、どうもWEB界隈では「target="_blank"」はイラナイ子の烙印を押されているらしいですね。ションボリ。 「ユーザの意図しない勝手な動作はナンセンス」「っていうか死ね！」という事らしい。事実、標準化団体（W3C）も非推奨としているんだって。（ウソでした。非推奨とはしていないらしい。参考：target="_blank"は非推奨?） そんなわけで、僕は大好きにもかかわらず「target="_blank"」を辞めてみようかと思う。好きなことよりもWEB標準化を優先する男、超カッコイイ！！とかそういう話ではなくて、「長いものには巻かれまくる男」がキャッチコピーの僕なんで、その辺の大人の事情から察してください。よろしくお願い致します。 ってことで、今後はリンクがすべて同窓で開くので、どうして
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
Webアクセシビリティ出版記念セミナー 1コマ目 | securecat's exblog
Webアクセシビリティ出版記念セミナーへ行ってきました。 以下、感想というかメモというか： 『アクセシブルなコンテンツ、ナビゲーション、フォーム』（第6章～第8章から）（梅垣正宏さん） 「装飾的な画像のalt属性は、alt="" であって alt=" " のようにスペースは入れないこと。」 これ定番でまったくその通りだと思うのだけど、なんでスペースを入れるやり方が旧来あったかっていうと、ホームページ・リーダーの古いバージョンだか何だかが、alt="" だとファイル名を読み上げてしまうっていう挙動のがあって、それで alt=" " とする人たちがいたっていう歴史的経緯だったと思うのですよ。 その当時であれば、スクリーンリーダーなどのために alt=" " としましょう、みたいなことが言われていたはずで、ちょっと、なんだかなーって思ったり。 「<label>のコンテナは駄目」 コンテナという言
イギリス政府推奨のアクセスキー (kuruman.org > Kuruman Memo)
イギリス政府が推奨するアクセスキーなんてのがあるんですね。作成者が勝手気ままにつけたアクセスキーなんてのはよほどでない限り飾り以上のものにはなりませんから、こういう指針作りはそれなりの効果があるように思います。電車の中で携帯電話片手にブラウジングする社会人あふれる日本でもこのような指針ができればいいなぁと思う次第。 UK Government Access Keys Standardにあったリストを適当に邦訳しておく。 S: ナビゲーションのスキップ 1: トップページ 2: 最新情報、更新情報、新着 3: サイトマップ 4: 検索 5: よくある質問と回答、FAQ 6: ヘルプ 7: クレーム窓口 8: 契約条件、取引条件 9: 意見の受付、フィードバックフォーム 0: アクセスキーの詳細 サイトをいくつかに分類して、このような指針を設けておくというのがよいのかもしれない。さすがにこのま
ウノウラボで紹介されていたスターレイティングの不思議なリスト - JamDiary-twig
JavaScriptを使わないスターレイティングの作り方これCSS脳じゃね？と、ほんのりと一部で非難され気味なJavaScriptを使わないスターレイティングの作り方ですが、どこが変なのか明記されているソースが無かったので自分で作ってみる試み。CSSを切ったら意味不明なHTMLサンプルが併記されていますが、CSSを切るとリストに番号が振られているだけで、かなり意味不明です。せめて評価：星1つとか星3つ、とか。class名がCSS依存だよ所謂、class="red"問題ですね。ウノウラボさんで紹介されていた記事も、ul class="rating onestar"といった具合にCSS依存というか、CSSが無いと意味不明のclass名なので、そういうのはよろしくないんじゃないの？ということですね。CSSあってのHTMLになっちゃってるよ！ということです。そもそも、それ（星）はリストなのだろうか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.openvista.jp/archives/note/185/?185/