2013年度の卒論用に，スマホのアクセシビリティを卒論で扱う学生が知っておくべき事をまとめました．このサイト自体が，スマホで良く用いられるjQuery Mobileの枠組みで作成されていますので，PC，タブレット，スマホ（とスクリーンリーダの組み合わせ）など色々な環境で閲覧してみてください．また，jQuery Mobile（のアクセシビリティ）を調べる際の素材にしてください．
モバイルサイトで使われている基本技術は，HTML5とCSS3にJavaScriptを組み合わせたものです．単なるサイトを越えたウェブアプリケーション(WebApp)も同じ技術で作られています．
略（書籍などで調べてください）
略（書籍などで調べてください）
略（書籍などで調べてください）
略（書籍などで調べてください）
詳細は別ページ「jQuery Mobile」参照
ARIAはAccessible Rich Internet Applicationの略です．つまりRIAは，いわゆる動的なウェブのこと．それまでの静的なウェブ，つまり，リンクをクリックするかフォームを提出するかしなければページ遷移しないしページの一部の内容が変わることも（基本的に）ないウェブとは異なり，JavaScriptやAjaxなどの技術を使って，ページの一部だけが変更されたり，リンクやフォーム要素のクリック以外でもページを操作できたりするウェブを指しています．
W3C/WAI(Web Accessibility Initiative)で，いかにしてRIAのアクセシビリティを確保するかが検討されました．その成果がWAI-ARIAという技術仕様で，2011年1月にW3Cの勧告候補になりました（未だ勧告になっていないことに驚いた）．W3CサイトのWAI-ARIA Overviewに豊富な情報があります（Technical Solutionsセクションは必読）．
このセクションの最後に書いてあるWAI-ARIAがWeb制作者に提供する機能のまとめを引用します：
- Roles to describe the type of widget presented, such as "menu," "treeitem," "slider," and "progressmeter"
（メニューや木構造やスライダーや進捗バーなどのウィジェットの種類を示すrole）- Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
（ヘッダーや領域やテーブル（グリッド）などのページの構造を示すrole）- Properties to describe the state widgets are in, such as "checked" for a check box, or "haspopup" for a menu.
（チェックボックスがチェック済みやメニューがポップアップされているなどのウィジェットの今の状態を示すproperty）- Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page （刻々と変わる株価表示などのlive regionを定義するproperty．live regionが変化したときに重要度によってその変化を通知する方針．）
- Properties for drag-and-drop that describe drag sources and drop targets
（ドラッグ＆ドロップに対応するためのドラッグ操作のソースとターゲットを示すproperty）- A way to provide keyboard navigation for the Web objects and events, such as those mentioned above
（上記に述べたイベントやWebオブジェクトをキーボードでナビゲーションする方法）
WAI-ARIAそのものではありませんが，ナビゲーションを容易にする方法の一つがtab indexです．ウェブページでタブキーを押すと，リンク要素とフォーム要素を次々とたどっていくことができます．HTML5などでは，tabindex属性を用いることで，任意の要素をタブキーでナビゲーションできるようになります．また，その順番も指定できます．さらに，ツリー表示で子要素が閉じているときに＋キーを押せば子要素（ツリー）が開いたり－キーを押すと閉じたりといった操作をできるように指定できます．WAI-ARIAでも，tabindexを用いて重要なコンテンツをナビゲーションできるようにすることを求めています．
上記の引用でも分るようにWAI-ARIAでは（そのコンテンツでのウィジェットの種類や役割や構造を示す）role属性と（コンテンツの性質や状態を示す）property属性及びstate属性を用いて，アクセシビリティ確保に必要な情報をUA（ブラウザやスクリーンリーダなど）に提供します．詳細はWAI-ARIA参照．
Live regionを用いることでページの変化をUA（User Agent，つまりブラウザやスクリーンリーダなど）に通知し，その処理方法を決めることができます．Live Regionを使わない場合，株価が変わったりメニューが開いたりといったコンテンツ内の変化をスクリーンリーダが気づかないか或いは気づいてもページの最初からページ全体を読みあげるといったことになっていました．しかし制作者がLive Regionを用いていてスクリーンリーダがLive Regionに対応している場合，Live regionを付けた領域内の変化に対して，aria-live属性を指定して通知方法（off, polite, asssertive）を選ぶことができます．
参考：Jucy Studioの最近の記事：WAI-ARIA Live Regions Updated
レスポンシブルWebデザイン（responsible web design）：簡単に言えば，画面幅などユーザの利用環境に合わせてデザインを最適化すること．画面幅が広いPCブラウザ用，画面幅が狭いスマホ用と別々にサイトを制作するのではなく，画面幅が広いときでも狭いときでも見やすいように（CSSを用いて）一つのサイト（ページ）をデザインすること．jQuery Mobileもこの方針で作成されている．
プログレッシブ・エンハンスメント(peogressive enhancement)：最新のHTML5やCSS3やJavaScript等をサポートしている高機能な環境ではリッチなインタラクションと見栄えの良い表示を提供すると同時に，そのような機能を持たない（古い）環境でもページのコンテンツや基本機能が問題なく提供されるデザイン方針．jQuery Mobileもこの方針で作成されている．
1個のhtmlファイル内の<div data-role="page">が1ページになる．同じhtmlファイル内に複数のページが置かれる．ページの概念が今までと違うことに注意．ページ間ナビゲーション用のメカニズムも持っている．タブ表示がサポートされなかったのもこれに関係あるのではないかと思う．
a要素も特殊な意味を持つので注意が必要．詳しくは下記「UI component」参照（注：アンカーが使えない．）
横幅が狭いスマホを考慮して，長い文字列を省略表示，navbarに6つ以上項目があると複数列で表示などの工夫がある．
縦スクロールを避けるためにdiv要素を折りたたみ・展開表示可能
タッチ操作に最適化されている．a要素を画面幅一杯のボタン風に表示してクリックできる領域を広げている．アイコンの大きさや（画面幅に応じて幅が変わる）ボタンの最小横幅，リンク領域の高さなどにもそれが表れている．
本家のjQuery Mobileデモページ．jQuery Mobileがどういう物かよく分る．
jQuery MobileのUI要素を下記にまとめます．（要素毎にアクセシビリティを吟味すると良いと思う）
li要素の中にp要素を入れるとその要素は弱めて表示される
上記リストはjQuery Mobile特有のli要素の使い方も示しています．一行目のToolbar componentsは画面表示ではその下の2行の見出しに見えますが，マークアップでは下2行と同じレベルにあるli要素です．この行にはdata-role="list-divider"という属性が付与されているので，見かけ上見出しに見えているだけ．これはアクセシビリティ問題を起こしそうな気がします．
スマホで表示すると，会社名は通常のテキスト入力IMEになるが，電子メールや電話番号や誕生日はそれぞれに適した入力メソッドが表示されるのが分る（HTML5の機能）．
スライダーの例（アクセシビリティを確認したい）
フリップトグル スイッチの例（アクセシビリティを確認したい）
僕は未だに画面表示からこのトグルスイッチの状態（ONかOFFか）を読み取ることができない．
iOS4以上はWAI-ARIA対応と称している
Webアクセシビリティやその評価方法の基本は，『Webアクセシビリティ～ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践～』の1章や「簡単ユニバーサル・ウェブ」のウェブのアクセシビリティ参照．下記にはキーワードだけ書いておきます．
Webアクセシビリティ基盤委員会の資料など参照
スクリーンリーダを用いて評価．視覚で取得できる全ての情報が音声でも表示されるか，画面を見ずに音声で聞いただけで理解・記憶できるか，キーボードやタッチ（ジェスチャ）だけで操作できるかをチェック．
miChecker：JSが生成したHTMLではなくて元HTMLを評価することに注意．でもjQuery Mobileはプログレッシブエンハンスメントで作成されているので問題ないかも．或いは，JSやCSS3が使えるが故の問題が生じているかも．
WebAIM：使えるかも．要確認
参考サイト
スマホのアクセシビリティに関連した卒論では下記などが取り扱う題材になるのではないかと思います．
4年生がVoiceOverやTalkBackなどを用いてスマホサイトのアクセシビリティ問題を発見．PCでチェックしたりソースを確認したりすることも含む．
jQuery Mobileの仕様を眺めていて下記にA11y問題がある可能性があると思いました．（注：改良されているかもしれないので，最新版のjQuery Mobileで確認すべし）
Autocomplete accessibility updates: We’re now using a live-region to guide screenreader users when using autocomplete, making the widget a lot more accessible.と書かれている．
今のスマホ全盛時代でも下記ガイドラインやチェックツールは妥当なのかを検討する．