WordPressをCMSとして使うための必須プラグイン集 - Trans
WordCamp Kyotoも無事に終わったので、記念エントリー。当日の様子に関しては、 レポート：WordCamp Kyoto 2009 最速レポート｜gihyo.jp … 技術評論社 WordCamp Kyoto » スポンサー・スタッフ・参加者によるレポート などをご参照ください。また、プレゼンのスライドは、WordCamp Kyoto » スピーカーのスライド & 資料集で公開されています。 さて、それでは本題。WordPressをCMSとして使用する際に必須のプラグインを自分のメモも兼ねて掲載します。 必須プラグイン //akismet.com/">Akismet:スパムコメントなどの対処。 //contactform7.com/">Contact Form 7:お問い合わせなどのフォームをどこにでも設置できる。 //www.lopo.it/duplicate-post.tar.
HTML5を書き直した。 - Trans
先日公開したわかりやすい技術文章の書き方にid:vantguarde先生から、 HTML5といってるけどなんか違うなあ。sectioning contentの使い方に問題が多い。 http://b.hatena.ne.jp/vantguarde/20090817#bookmark-15373666 と赤点をいただいたので、再試ということで書き直しました。リライトしたページはすでに公開中。 違和感を感じるところ あくまでも自分の感覚としてですが、なんとなく「このへんはもう少しまともな書き方ないのかな、でもわからん」というところを何点か。 <header role="banner" id="banner"> ... <aside id="abstract"> <p>このページは、プログラムやコードなどの主に技術文書を書く方々のために、 分かりやすい文章を書くためにはどうすればよいのかについて説
WAI-ARIA導入（日本語訳） - Trans
著者: Gez Lemon件名: Introduction to WAI ARIA日付: 2008年8月1日URL: http://dev.opera.com/articles/view/introduction-to-wai-aria/訳者: Arata Kojima著作: This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license. WAI-ARIA導入 ARIAにはじめて触れる人たちのためにこの記事は書かれている。障害を持つ人たちがWebを使うにあたってぶつかる潜在的な難しさとHTMLの理解を必要とする。ユーザを観察すると、いくつかのRIAと親和性が高いことが分かるだろう。 この記事を読んだあと、ARIAが何の役に立つか、Webサイトにど
ユーザビリティ・アクセシビリティの入門リソース - Trans
当エントリーはイメディオで2月28日に実施する『初級Webマスターを卒業したい人のための「使いやすいWebサイト」構築術』のフォロー用エントリーです。 はじめに このエントリーを書き始めてから思い出したのですが、よくよく考えてみるとlevaさんが下記のエントリーでまとめてくれていています。 ウェブユーザビリティについて考え始めたい人にオススメのウェブページ集 ウェブユーザビリティについて考え始めたい人にオススメの5冊 こちらで紹介されているものは僕も推薦できるものばかりですので（全部読んだわけでもないのですが）、当エントリーではちょっと違った視点からユーザビリティ・アクセシビリティの入門リソースを紹介したいと思います。 書籍 誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書) 作者: ドナルド・A.ノーマン,D.A.ノーマン,野島久雄出版社/メーカー: 新曜社発売日:
Google検索結果ページのアクセシビリティ - Trans
Googleの検索結果ページがアクセシビリティの観点からいろいろと実験されています。この動きは本当に面白いです。 Google検索結果のページ 百聞は一見にしかずということで、まずはこれを見てください。 これがGoogleの検索結果のページです。普段見ている検索結果のページとはちょっと違いますね。検索結果のアイテムにフォーカスが当たり、フォントサイズが大きくなっています。その上で、そのアイテム周りに薄い青色の背景色がかけられています。 この検索結果をどのように出したかと言いますと、 Google Experimental Searchのページへ行く Accessible ViewのJoin this experimentをクリック Google（英）で何か検索する という流れです。Official Google Blog: Accessible View: An ARIA for web
盲ろう者のアクセシビリティ - Trans
（社福）全国盲ろう者協会が昨年度出版したマニュアルを元に盲ろう者へのアクセシビリティをまとめておきます。 出版物の紹介 ご存じの通り（？）、僕はNPO業界にいるためか、こういう情報がどこかしらから入ってきたりします。社会福祉法人全国盲ろう者協会が出版した報告書とマニュアルを紹介します。 盲ろう者向けパソコン指導者等 養成研修事業報告書 盲ろう者向けパソコン指導マニュアル 〜WindowsXP編〜 僕には盲ろう者の知り合いがいないので、盲ろう者向けのアクセシビリティとはどんなものなのか見当もつかなかったのですが、この報告書のおかげで朧気ながらイメージできました。といっても、この報告書はアクセシビリティではなく、盲ろう者にどのようにパソコン指導をすればよいのか、ということがメイントピックなのですが。 さて、そもそも盲ろう者とはどういう障害を持つ人のことを言うのか。Wikipediaによると、
アクセシビリティが必要な人たちの生の声が聞けるような動画を集めたサイトを作りたいと思っているんだけど、ご意見をもらえませんか？ - Trans
タイトルが長いですが、決してid:Hamachiya2さんのEOMネタではないのでご了承を（このネタ自体は大好きなんですが）。 アクセシビリティを学ぶ方法 僕自身は元々Webサイトを自分で作りたい！という思いからコーディングを学び、今はアクセシビリティにどんどんシフトしているわけですが、ちょうど1、2年前にアクセシの勉強を本格的に始めたときにすぐに壁にぶつかりました。 実感しにくいんですよね、アクセシビリティって。 もちろん、どんなコードやデザイン、ワークフローを持っていればよりアクセシブルなサイトを作れるかというノウハウはいろんなサイトや書籍を読めば何となくは分かります。でも、そういう机上の理論だけで作ったアクセシブルなサイトというものが、アクセシを必要とする障がい者や高齢者にとって「本当にアクセシブルかどうか」は結局のところ分からないんです。 その理由はたぶん簡単で障がい者や高齢者と直
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の導入が進むに連れて、スクリーンリーダーが対応できないという課題がいろいろと出てきています。そ
インクルーシブデザインワークショップに行ってきたよ！ - Trans
今後のアクセシビリティを考える上で、インクルーシブデザインは一つのキーポイントになるかもしれないと思い込み、熱くなって書いてみると、かなりgdgdな文章が出来上がりました。 インクルーシブデザインとは何ぞや？ 僕が参加したインクルーシブデザインワークショップは神戸芸術工科大学で行われたもの。ただ、主催は京都大学なのでインクルーシブデザインユニット inclusive design unitのWebサイトが参考になります。 さて、僕も数ヶ月前に初めて知った言葉なのですが、このインクルーシブデザインとはあるデザインプロセスのことを言います。日英どちらもWikipediaに掲載されていないようので、ワークショップでいただいた資料から引用し、簡単にその概念を紹介しておきます。 インクルーシブデザインとは高齢者や障害者のある人など、特別なニーズを抱えた消費者をデザインプロセスの上流工程へ積極的に巻き
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？ - Trans
アクセシビリティの基本でありながら、奥が深いalt属性。こんな視点もあるのだということを書いておきます。 追記（2008年7月14日）：文章中に誤解を招く表現がありましたので、文章を追記しました。 ある視覚障害者の意見 上のタイトルは皆さんを煽っているわけではなく、僕が実際に言われたこと。 どこのセミナーか講演会かは覚えていないのですが、決してプロレベルではないが自分でもWebサイトを制作できる全盲の視覚障害者（スクリーンリーダー利用者）がそのときに言っていた言葉。 もう少しちゃんと説明すると、もし何らかの画像があった場合に、僕たちのようなWebサイト制作者がそのimg要素のalt属性に何を入れればよいのかをパッと閃かなかったときに「とりあえず」alt属性を空にしているよね、と言われたということです。 僕はこれを言われたときに本当に胸に刺さるものがありました。思い当たる節が多すぎた（追記（
HTML×CSSのプレビュー型とアーキテクト型コーディングフロー - TRANS [hatena]
CSSにはプレビュー型とアーキテクト型コーディングフローというのがあり、今後はアーキテクト型コーディングが主流になるのでは！というアイディアを思いつき、実際にコーディングしてみたら｡･･･挫折しました。ただ、こういう考え方もありなのかなと思い、書いておきます。 プレビュー型コーディング 先に申し上げておきますが、このプレビュー型とアーキテクト型コーディングフローとはどこかのCSSハッカーの言葉ではなく、僕が便宜上名付けただけです。というわけで知った顔して誰かに話しても、全く通じないこと請け合いなので気をつけてください。 さて、ここでいうプレビュー型コーディングとはこんなコーディングフローのことを意味しています。 HTMLをコーディング PhotoshopやFireworksの画像をスライス HTMLで書いたid属性やclass属性を軸にCSSをコーディング 多少の前後はあるにせよ、このフロ
![HTML×CSSのプレビュー型とアーキテクト型コーディングフロー - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a92eaeb578d1b9d0378f95c9320a0332cc4a9f95/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676522962%2F1448268251)
Flash Liteとらくらくホン - Trans
急増するFlash Liteとアクセシブルな携帯電話、らくらくホン。いつか見た景色が繰り返されそうではあるのですが。 Flash Liteはらくらくホンで読み上げられるのか。 ふと思いついたのがこの疑問です。（追記）やはり難しいようです。コメントを参照してください。 世間では携帯電話の旬なネタといえばやはりiPhoneなわけですが、アクセシビリティの中ではDoCoMoのらくらくホンかと。らくらくホンについてあまり詳しくない方は（僕もですが）、次のリンク先を参照してください。 FMWORLD（個人） 携帯電話(F672i) : 富士通 音声ですべて操作できる携帯電話が変える人生。 (Junnama Online (Mirror)) ＜徹底検証＞ドコモ、ＦＯＭＡらくらくホンIIIで強化された読み上げ機能 ユニバーサロンリポート らくらくホンはコンテンツを音声で読み上げる機能がついていて、それが
情報を重複させないサイト構造 - Trans
強調したい情報がある、だから繰り返したい！でも、それってユーザビリティ・アクセシビリティは高くないかもしれないのです。 某視覚障害者のMLにて 普段はソフトウェアの使い方や近況報告のようなMLなのですが、たまに僕たちのようなサイト制作者にとっては興味深い投稿がされます。例えば、視覚障害者からのこんな内容でした。 「JR東日本のメールでのお問い合わせが使いにくくて仕方がない」という内容。というわけで覗いてみました。 情報量が多すぎる！ まず、指摘のあったその問題のページは、JR東日本：ご意見・ご要望の受付です。当ブログからでは分かりにくいのですが、実は手前のページからポップアップウィンドウで開きます。また、お問い合わせするだけなのになぜこんなにも個人情報を入力しなければならないのか、という疑問も沸いてきます。 では、このポップアップウィンドウを開く手前のページはどこなのか。それがJR東日本：
福祉情報工学研究会での気付きや学び - Trans
福祉情報工学研究会に参加して、そこで得た気付きや学びを皆さんとざっくりと共有しておきます。 福祉情報工学研究会 僕が参加したのは、第42回 福祉情報工学研究会です。前半しか参加しなかったのですが、その主な内容は今年4月に発表された視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007の要約的な紹介でした。個人的には、生の渡辺哲也先生を見れたことが一番の大きな収穫だったかもしれませんが、それはさておき。本当にざっくりなのですが、メモを紹介します。 触覚ディスプレイ 触覚ディスプレイが面白い。パソコン上にある文字や画像を点字のような形にして触覚に伝える機器。それに画像を表示し、普及できるように研究中。ユニプラン社を参考。 今まで視覚障害者に画像を伝える方法は代替テキスト（alt属性のような）しかなかったが、この機器は触覚によるモノの形の認知ができる。 Windows付属のペイントな
はてなクラブとユーザビリティテスト - Trans
はてなクラブがユーザビリティのための品質向上を目指すのであれば、もっと対象ユーザを絞り込むべきだと思います。 ユーザビリティテストの肝 先日、はてなクラブの募集が開始されました（僕も申し込みました）。既にいろんな人たちがブクマコメントなどで突っ込んでいるのですが、ユーザビリティテストの考え方がちょっと甘いかなと思います。 今までのid:jkondoの発言から、はてなはキャズム越えを狙い、YouTubeやmixiのように一般ユーザが使うようなWebサービスになろうとしているのだと思います。そうすると、今一番意見を求めなければならないのははてなを使っていないユーザです（ユーザにとっての既存サービスの改善のためのユーザビリティテストであれば、ユーザを対象とするユーザビリティテストは合っているのですが）。 ユーザビリティテストを行う上で重要なのはテスターのリクルーティングだと思います。はてなクラブ
リンクテキストとアクセシビリティとスクリーンリーダーの動作 - 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]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca97218ef8242074e15cf05e7764859f63dc3901/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523057%2F1460995386)
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
slides.js
Web標準の人たちがS5を使っているのを見て、自分も使ってみたいと思い、色々と実験。ただ、日本語ドキュメントがほとんど見つからなかったので、備忘録としてもメモしておく。参考にどうぞ。 そもそも、S5って何だ？ 単純に言うと、インターネット上でマイクロソフトのパワーポイントを表現するようなもの。例えば、2xupさんとかがプレゼンの資料として公開している。でも、「それだけなら、パワーポイントをダウンロードするなり、PDF化すればいいんじゃないの？」と思われるかもしれないが、S5はXHTML＋CSSのWeb標準で実装されたパワーポイントのツールのようなものなので、検索エンジンにも引っ掛かるし、アクセシビリティにも対応できる。このへんが便利かなと思っている。 S5を使うために必要な技術 まず、HTMLなり、XHTMLが読み書きできること。デザインを自由自在に変えたいのなら、CSSも必要。S5自体は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
