アークウェブ
アクセシビリティ
Wiki
Web制作会社アークウェブのスタッフが、アクセシビリティに関するTips・ノウハウをまとめているWikiです
http://www.ark-web.jp/accessibility/2304.html
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
Ajaxのアクセシビリティ対応
Ajaxのアクセシビリティ対応/DOMで追加、修正されたコンテンツを読み上げさせることができるか?
Ajaxのアクセシビリティ対応/JavaScript OFF用、アンカーリンク
Ajaxのアクセシビリティ対応/JavaScript+OFF用、アンカーリンク
Ajaxのアクセシビリティ対応/情報収集
BracketName
FormatRule
FrontPage
Help
InterWiki
InterWikiName
InterWikiSandBox
InterWikiテクニカル
MenuBar
PHP
PukiWiki
PukiWiki/1.4
PukiWiki/1.4/Manual
PukiWiki/1.4/Manual/Plugin
PukiWiki/1.4/Manual/Plugin/A-D
PukiWiki/1.4/Manual/Plugin/E-G
PukiWiki/1.4/Manual/Plugin/H-K
PukiWiki/1.4/Manual/Plugin/L-N
PukiWiki/1.4/Manual/Plugin/O-R
PukiWiki/1.4/Manual/Plugin/S-U
PukiWiki/1.4/Manual/Plugin/V-Z
RecentDeleted
SandBox
ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法
WAI-ARIA
WAI-ARIA/Live Regionのサポート状況、利用現状
WAI-ARIA/NVDAのLive Regionのサポート状況(2009.12.28)
WikiEngines
WikiName
WikiWikiWeb
YukiWiki
Zen Cart日本語版のアクセシビリティ対応/JIS:2009(改正原案)への追加対応
Zen Cart日本語版のアクセシビリティ対応/PC-Talkerでチェック
Zen Cart日本語版のアクセシビリティ対応/ホームページリーダーのチェック+α
Zen Cart日本語版のアクセシビリティ対応/現標準テンプレートを「富士通アクセシビリティ・アシスタンス」でチェック
Zen Cart日本語版のアクセシビリティ対応/現標準テンプレートをキーボード操作でチェック
Zen Cart日本語版のアクセシビリティ対応/目視チェック(JIS2009)
clip/Windows Vista対応の音声ブラウザ:アクセシビリティ対応ソフトウェア
jCarouselLiteのautoにて停止/再スタートできるようにするアクセシビリティ対応
jQuery UI に見る WAI-ARIA の実装:dialog 編
tag
tag/Ajax
tag/HTML5
tag/JIS X 8341-3
tag/JavaScript
tag/WCAG 2.0
tag/jQuery
tag/だれコン
tag/スクリーンリーダー
tag/試験方法
だれコン/2010-11-26シンポジウム
アクセシビリティメモ
アクセシビリティメモ/JIS X 8341-3 2009の7.3.3.4をZen-Cartに適用するには。
アクセシビリティメモ/JIS:2009 改正原案公開レビュー版 エクストリームリーディング会(1)
アクセシビリティメモ/W3CのMobile Web Best Practices 1.0
アクセシビリティメモ/「JIS X 8341-3 2009」のeXtream Reading(1)
アクセシビリティメモ/「JIS X 8341-3 2009」のeXtream Reading(2)
アクセシビリティメモ/「JIS X 8341-3」を読む(1)
アクセシビリティメモ/「JIS X 8341-3」を読む(2) (附属書1 (参考) ウェブコンテンツに関する例示)
アクセシビリティメモ/「Webアクセシビリティ JIS規格完全ガイド 改訂版」エクストリーム・リーディング会(1)
アクセシビリティメモ/「Webアクセシビリティ JIS規格完全ガイド 改訂版」エクストリーム・リーディング会(2)
アクセシビリティメモ/「改正迫るウェブアクセシビリティの規格(JIS X 8341-3)の改正のポイントと動向」
アクセシビリティメモ/『本物のWebアクセシビリティー・セミナー』 パネルディスカッション「東西の視覚障害者に、生の声を聞く」
アクセシビリティメモ/アックゼロヨン・アワード アクセシビリティ最高得点サイトのPDCAサイクル
アクセシビリティメモ/アックゼロヨン・シンポジウムVol.1「アクセシビリティのこれから」メモ
アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト2」をシェア
アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト」をシェア
アクセシビリティメモ/書籍「Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~」 第1章
プロジェクト/lightwindowをアクセシブルにしよう
プロジェクト/lightwindowをアクセシブルにしよう/lightwindow2.0とは?
プロジェクト/lightwindowをアクセシブルにしよう/lightwindowの課題
ヘルプ
機能テスト/1/1
議事録/template
近藤
計画
志田
実践アクセシビリティ
実践アクセシビリティ/JIS X 8341-3 2009を試験してみてわかった制作上の問題点
整形ルール
竹村
中野
日本語
** インストール方法 [#t21c4241] - jCarouselLiteと同じです。Option が増えただけという認識でOKです。
タイムスタンプを変更しない
** はじめに [#dfbd9cb5] こんにちは、[[竹村]]です。 最近、jCarouselLite の利用頻度の高くなってきています。 jCarouselLite は、表示エリアが限られている場所で多くの画像バナーを表示できるウィジェットです。 下記のようなものです。 http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/normal.html #ref(sample_nomal.jpg,nolink,左右のボタンをクリックすると画像バナーがスクロールして表示されている) jCarouselLiteの公式サイト:http://gmarwaha.com/jquery/jcarousellite/ jCarouselLite は画像バナーを指定した秒数待ってから自動的にスクロールする機能があります。 これによって、ボタンを押さなくてもループ再生されるのでアクティブ感が得られるのは良いのですが、 ''自動的にループ再生できるくせに、停止や再スタートの機能がありません。'' これでは、JIS X 8341-3:2009 7.2.2.2 (WCAG 2.0 2.2.2, 2.2.3)に適用できないため、改修しました。 現在は、githubからダウンロードできるようにしています。 http://github.com/tiadeen2/jCarouselLite_auto_controller #blikimore ** 目次 [#b79c4176] #contents ** なぜ jCarousel を使わない? [#g38c9b22] autoの停止/再スタートは実は jCarousel (http://sorgalla.com/jcarousel/ ) に実装してあります。 …が、なぜ jCarousel を使わないで、jCarouselLite にこだわるか、というと''既に jCarouselLite を使って実装したサイトがあるから'' です。 jCarouselLiteは jCarouselより導入が簡単です。よって、既に実装済みのものをリプレイスするよりは 機能の差分をプラスした方がやり易いと判断しました。 ** インストール方法 [#t21c4241] - jCarouselLiteと同じです。Option が増えただけという認識でOKです。 ** 追加したOption [#n463583f] 4つ追加してあります。 - btnStart, btnStop : 停止/再生ボタンのElement名を指定する。autoオプションがnullでなければ、自動的にbtnStartを押した挙動となる。 - afterStop, afterStart : 停止/再生ボタンが実行された時に呼び出されるコールバック関数を指定しておける。 btnStart, btnStop は、btnPrev, btnNext と同じように「Element名」を指定します。 afterStop, afterStart は、afterEnd と同じように「停止時、再生時に呼び出されるコールバック関数」を指定します。 ** サンプル [#qac7fc5b] このコールバック関数で、再生ボタンを停止ボタンに差し替えたりすることができます。 下記のような感じです。 <script type="text/javascript"> $(".jcarousellite").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", auto: 1000, btnStart: ".start", btnStop: ".stop", afterStart: function() { $(".start").css("display", "none"); $(".stop").css("display", "block"); }, afterStop: function() { $(".start").css("display", "block"); $(".stop").css("display", "none"); } }); </script> : <style type="text/css"> .start {display:none} </style> : <div class="jcarousellite"> <div class="controller"> <button class="prev">前へ</button> <button class="stop">停止</button> <button class="start">再生</button> <button class="next">次へ</button> </div> <div class="carousel"> <ul> <li><img src="example1.jpg" alt="example1" /></li> <li><img src="example2.jpg" alt="example2" /></li> <li><img src="example3.jpg" alt="example3" /></li> </ul> </div> </div> - 最初は再生ボタンが表示されないようにCSS上で .start を非表示にしています。 - afterStart, afterStop のコールバック関数で表示/非表示を入れ替えています。 上記コードの実際のサンプルは↓こちらにあります。 http://okra.ark-web.jp/~takemura/public/js/jcarousellite/acc/ #ref(sample_acc.jpg,nolink,停止ボタンをクリックすると自動スクロールが止まり、手動で前後ボタンをクリックしても、停止中は自動スクロールにはなりません。再度自動スクロールにするには、再生ボタンをクリックします。) ** ダウンロード [#ya1fa04c] 上記に書きましたが、githubからダウンロードできるようにしています。 http://github.com/tiadeen2/jCarouselLite_auto_controller ** さいごに [#m901912c] 今回の実装にはWAI-ARIAへの対応などは含まれていません。 実装のアラを探せば色々あると思いますが、ちょっとずつ対応して、 それを公開していければと思っています。 #blikifooter(竹村) Tag: [[JavaScript>tag/JavaScript]], [[jQuery>tag/jQuery]]
テキスト整形のルールを表示する
アークウェブのサービスやソリューションはこちら
サービス
Webの企画・戦略立案
Webデザイン
Webシステム開発
Zen Cartソリューション
Zen Cart導入コンサルティング, RFP作成, トラブル診断
Zen Cartで大規模ECサイト構築
Zen Cartモジュールの開発・カスタマイズ
Zen Cart制作会社(デザイン・企画会社)様向けサービス
Zen Cart海外向け・多言語ECサイトの制作
Zen Cartのデザイン, ペルソナ/シナリオ法, RIA(Ajax・Flex)
Zen Cartのセキュリティ・運用保守サポート
Zen Cart企画・マーケティング戦略, SEO・SEM(サーチエンジン広告)
Zen Cartハイエンド版(大規模サイト用高可用バージョン)
EC-CUBEとZen Cart 機能比較表(概要)
Zen Cart携帯モジュール(モバイルショップ構築用)
Zen Cartの導入事例
Zen-Cart.JPのご紹介とアークウェブの取り組み
Zen-Cartモバイルショップ構築サービス
Movable Typeソリューション
企業サイトでのMovable Type活用
Movable Type用プラグイン一覧
MT用フォーム作成プラグイン「A-Form」
A-Formパートナー制度
その他ソリューション
AjaxでRIA開発
Ruby on Rails
Flexによる業務システム構築
ペルソナ/シナリオ法
ビジネスブログ
SNS・ソーシャルソフトウェア
SEO・SEM
アークウェブのCSR(企業の社会的責任)
アークウェブのCSR指針