Twitterでアクセシビリティについて話し合うようなメッセージが流れていて、都合で参加できなかったのでわかる範囲でまとめておきます。 どちらかというと、視覚障害者（音声利用者）寄りの内容です。 音声利用（スクリーンリーダー）をするには、それぞれのOSについて下記のようなツールがあります。 私自身は晴眼者で、音声利用をする機会はほぼなくて、盲ろう者（視聴覚重複障害）のボランティアの経験が少しある程度です。 紹介しているツールについての詳しい知識はありませんのであらかじめご了承お願いします。 音声利用ツール Mac, iPhone, iPad VioceOver for Mac VoiceOver for iPhone Windows ナレーター for Windows PC-Talker for Windows NVDA for Windows Android Android ユーザー補助機能の概要 Android TalkBack を有効にする WordPress 当サイトもそうですが、仕事でWordPressを使う機会が多いので、WordPressのアクセシビリティについて探してみました。 Make WordPress Accessible ここから辿っていくと良さそうです。 例えば Readability を開いてみると、 Good practice: Start with a short summary of the content Divide the rest of the text in short blocks Use headings and lists and meaningful link text Avoid large blocks of text という説明があります。 音声利用の場合、コンテンツを全て読み上げてからでないとそこに何が書かれているかわかりませんので、あまり階層が深くて複雑なページ構成になっていると、読みたい記事があってもなかなかたどり着けないと思います。上に引用したように、先頭にサマリーがあって、テキストが比較的短いブロックに分かれていて、見出しやリンク文字列が理解しやすい、大きなブロックは出来るだけ避ける、といった配慮が必要と思います。 参考資料 Web Content Accessibility Guidelines (WCAG) 2.0 論文作成・発表アクセシビリティガイドライン（Ver.3.0） 総務省:みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)
Category: Design
Categories
レスポンシブウェブデザインのメモ書き
WordPressによるウェブサイトの制作で、TwentyThirteenをカスタマイズする場合。 課題 ヘッダ下のメニューは非表示 サイドバーにメニューを配置 プルダウンメニューに切り替わるところでサイドメニューを非表示 ヘッダ下のメニューは非表示 Basic Structureにて、 .nav-menu { visibility: hidden; } とする。 サイドバーにメニューを配置 .site-main .sidebar-container { height: auto; margin: 0 auto; max-width: 240px; position: absolute; top: 0; } テンプレート上、 header -> contents -> sidebar -> footer という順番になっているので、 例えば左上に絶対座標で位置を指定し、 コンテンツ領域はサイドバーの幅＋アルファの左マージンを設定する。 プルダウンメニューに切り替わるところ 幅が狭くなったところでサイドメニューを消して、メインメニューを表示させる。 @media (max-width: 643px) { … #sidemenu { visibility: hidden; } .nav-menu { visibility: visible; } まとめ Basic Structureで基本的な設定をしておいて、 @mediaで幅の大きいものから順にCSSをカスタマイズしていく。 上の方（基本またはサイズの大きい方）で設定したものは、 下の方（サイズの小さい方）に引き継がれる。
Categories
UX パターン (Windows)
Twitterのタイムラインで見かけた記事をWordPressアプリで共有してみるテストです。
2013年2月16日（土曜日）にCreator’s village in EHIMEさんとWordBench愛媛の共催で「早春CMS祭り」というセミナーを開催しました。 開催内容はこちら(ATND) http://atnd.org/events/35423 ツイッターのまとめ http://togetter.com/li/458104 僭越ながら、私の発表資料はこちら http://www.slideshare.net/twikaz/cms-festa0216 昨年秋、WordBench愛媛を作る際にお世話になった三好さん。@takayukister WordBenchのメッセージでやり取りをしていたところ「愛媛」というキーワードがあったので勢いで講師をお願いしたところ、快く引き受けてくださいまして、はるばる松山まで講演にきていただきました。 ということで、せっかく三好さんに来て頂くので少しでも多くの方にご参加いただこうと思い、Creator’s village in EHIMEの@bornknow108さんに共催をお願いしたところ、快く引き受けてくださいましてトップバッターとして登壇をしていただきました。 そして、最近いろいろなコミュニティに積極的に参加され、プレゼンもされている@0310lanさんにお声がけしたところ、快く引き受けてくださいまして、ウェブサービスのCMSをメインにご紹介いただきました。 さらに、@bornknow108さんからのご紹介で@netachoさんにも劇画調に各種CMSをご紹介いただきました。さすがWebディレクターです。プレゼン内容はまさにエンターテインメントでした。 ショートセッションでは昨年のWordBench愛媛で自作のプラグインをつくってこられたわたなべさんに、プラグイン開発の技術要素についてご紹介をいただきました。プレゼン資料がきれいに作られていて尊敬。 ラストのセッションはオートクチュールの中村さん。@shinyajp ソーシャルアプリで益々ご発展の様子。お忙しい中ありがとうございました。 それと、今回のセミナーで会場を提供してくださったイヨテツケーターサービス様には会場設営から当日の受け付け、ドリンクの提供など大変感謝しております。さらに、開催当日の午前中にコワーキングスペースを無料提供してくださったシトラス・スペース・カンパニー様にもお世話になりました。 ご参加いただいた皆様もふくめ、お礼申し上げます。 ありがとうございました。
Categories
Inkscapeの練習
以前の記事でも紹介をしたのですが、Androidアプリのアイコンを作る際に少し作り方を変えてみようと思って Inkscape を使い始めました。何かのセミナーでこのツールを教わったような… で、あらためて使い方を勉強してみようと調べたところ Inkscaper というサイトが見つかりました。 ということで、簡単なサンプル。
Categories
引き続き WordPress のテーマ
比較的シンプルなテーマを2点ほど取り上げて ざっとHTML5の対応について調べてみました。 Suffusion http://wordpress.org/extend/themes/suffusion Fiver http://wordpress.org/extend/themes/fiver Suffusionの場合、トップページにはsectionタグが見つからなかったのですが、 コンテンツの詳細ページで使われていました。
Categories
PageLines – WordPressのテーマ
先日、CSS Niteというセミナーに参加しました。 http://cssnite-matsuyama.com/vol01/ http://cssnite.jp/ HTML5とCSS3を中心に、各講師の方それぞれの切り口で 貴重なお話を聴かせていただきました。 せっかく勉強したので何か実践してみようと思い、 WordPressのテーマを HTML5 というキーワードで検索。 #実践という割には、やる気が感じられないですね。(汗 まぁともかく、PageLinesというテーマを見つけてインストール。 最近のテーマは各種SNSへの対応はもちろんのこと、 ダッシュボードの設定画面がとても充実しています。 以下、1点気になったので、メモ書き。 フッターに Twitter Bar があって、 アカウントを設定すると最近のツイートが表示されるとか。 ですが、どうもうまく動作せず。 そこで、非表示にしようと思ったのですが、 設定の場所がすぐには見つからず。 ということでスクリーンショットを貼っておきます。
Categories
IE9プレビュー版リリース
IE9プレビュー版がリリースされたようです。 http://ie.microsoft.com/testdrive/Default.html 「Acid3テストでのスコアは55」 Acid3とは、 http://ja.wikipedia.org/wiki/Acid3 http://ja.wikipedia.org/wiki/Acid2 YoutubeがIE6のサポート終了 http://internet.watch.impress.co.jp/docs/news/20100315_354818.html Web標準から大きく外れたものは対象から外していきたい今日この頃です。