Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティからはじめる、 WebサイトのUI/UXデザイン

Rikiya Ihara
March 03, 2016
13

アクセシビリティからはじめる、 WebサイトのUI/UXデザイン

Rikiya Ihara

March 03, 2016
Tweet

More Decks by Rikiya Ihara

Transcript

  1. 本日の流れ  ご挨拶・ご紹介  セッション1: マークアップからの取り組み ~ボトムアップのアプローチ~  セッション2: デザインからの取り組み

    ~ビジュアルデザインとコンテンツ設計のアプローチ~  セッション3: 戦略からの取り組み ~トップダウンのアプローチ~ 3
  2. HTMLでマークアップした場合 <!DOCTYPE html> <html lang=“ja”> <head> <title>デザイニングWebアクセシビリティ</title> </head> <body> <h1>デザイニングWebアクセシビリティ</h1>

    <h2>訴求ポイント (この本が既存の本と異なる点)</h2> <ul> <li>「ガイドライン対策」ではなく、実際にコンテンツをアクセシブルにするための実践的な内容</li> <li>解決アプローチの例として、実際に公開されているサイトの実例を多数紹介</li> <li>上流から下流まで、制作プロセスの全てをカバー</li> <li>デザイン、実装だけではなく、戦略や設計のプロセスにおける取り組みを重視</li> </ul> <h2>取り組みの背景</h2> <p>ウェブコンテンツは本来、ユニバーサルなものです。PCのブラウザで閲覧するだけでなく、スマートフォンでアクセスした り、合成音声で読み上げたり、点字で出力したりと、ユーザーの状況に併せてさまざまな形に変えながらアクセスすることがで きます。</p> </body> </html> 30
  3. そのソース <div id="earthquakettitle" class="prt-disasterInfo"> <p style="margin:0 0 10px -3px"> <a

    href="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message_large.png" alt="日本年金機構に おける不正アクセスによる情報流出事案について" border="0"></a> </p> <!— <p style="margin:0 0 10px -3px"> <a href="/kinkyu/150603.html"><img src="common/images/parts/nenkin_message.png" alt="日本年金機構不正アク セス事案について 年金情報をめぐり、なりすましなどの犯罪が起こっています。 ご注意ください。" border="0"></a> </p> --> 38
  4. 大臣のHTML <div class=“contents”> <p class=“ruby”>しおざき やすひさ</p> <p class=“name”>塩崎 恭久</p> <p><a

    href=“/kouseiroudoushou/profile/daijin.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <div class=“image”> <img src=“images/daijin_img_01.jpg” alt=“塩崎 恭久” width=“137” height=“155” /> </div> 43
  5. 副大臣のHTML <div class=“contents”> <p class=“ruby”>たけうち ゆずる</p> <p class=“name”>竹内 譲</p> <p><a

    href=“/kouseiroudoushou/profile/hukudaijin01.html” class=“ico-link”>プロフィールはこちら</a></p> </div> <div class=“image”> <img src=“images/hukudaijin_img_01.jpg” alt=“” width=“137” height=“155” /> </div> 44
  6. 46

  7. 文部科学省の組織図のalt <imgsrc=“04/001.gif” alt=“平成27年度文部科学省の組織図 (平成27年10月1日現在) 文部科学大臣 副大臣(2名) 大臣政務官(2名) 事務次官 文部科学審議官(2名) 大臣官房

    人事課 総務課 会計課 政策課 国際課 文教施設企画部 施設企画課 施設助成課 計画課 参事官 生涯学習政策局 政策課 調査企画課 生涯学習推進課 (後略、全129行) 53
  8. AOI Pro. の組織図周辺のマークアップ <object class=“svg-image” data=“/files/chart-5-2.svg” width=“100%”> <div class=“bass-list-A01”> <ul>

    <li>株主総会 <ul> <li>監査役会</li> </ul> </li> <li>取締役会</li> <li>代表取締役社長 <ul> <li>経営会議</li> <li>第一プロダクションディビジョン <ul> <li>制作ユニット</li> (後略) 58
  9. AOI Pro. の組織図そのもののマークアップ (抜粋) <g id=“svg-obj01-01”> <use xlink:href=“#svg-box01-01”/> <text x=“100”

    y=“21”>株主総会</text> </g> <g id=“svg-obj01-02”> <use xlink:href=“#svg-box01-01”/> <text x=“100” y=“21”>取締役会</text> <path d=“M100 0v-49” /> </g> <g id=“svg-obj01-03”> <use xlink:href=“#svg-box01-01”/> <text x=“100” y=“21”>代表取締役社長</text> <path d=“M100 0v-50” /> </g> <g id=“svg-obj02-01”> <use xlink:href=“#svg-box01-02”/> <text x=“100” y=“21”>監査役会</text> <path d=“M0 15h-100” /> </g> 59
  10. インタラクションとは Inter - action  相互作用のこと  ユーザーとシステムの相互作用のこと 狭義には 

    ユーザーがなんらか操作(入力)すると 動いたり変化したりして反応(出力)するもの 89
  11. 116

  12. 151

  13. 156