<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>WAI-ARIA &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/wai-aria/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>Webアクセシビリティの重要性が加速する！「アクセシビリティやるぞ！祭り」詳細レポート</title>
		<link>/shumpei-shiraishi/11717/</link>
		<pubDate>Wed, 10 Dec 2014 00:00:38 +0000</pubDate>
		<dc:creator><![CDATA[白石 俊平]]></dc:creator>
				<category><![CDATA[デザイン]]></category>
		<category><![CDATA[サイト制作]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[IndieUI]]></category>
		<category><![CDATA[UX]]></category>
		<category><![CDATA[WAI-ARIA]]></category>
		<category><![CDATA[アクセシビリティ]]></category>
		<category><![CDATA[グラフィックレコーディング]]></category>

		<guid isPermaLink="false">/?p=11717</guid>
		<description><![CDATA[連載： イベントレポート (29)2014年12月4日、ヤフー、ミツエーリンクス、ビジネス・アーキテクツの合同によるイベント「アクセシビリティやるぞ！祭り」が開催されました。 このイベントは、「来るべき近未来のために業界...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/eventarchives/" class="series-159" title="イベントレポート" data-wpel-link="internal">イベントレポート</a> (29)</div><p>2014年12月4日、ヤフー、ミツエーリンクス、ビジネス・アーキテクツの合同によるイベント「アクセシビリティやるぞ！祭り」が開催されました。</p>

<div id="attachment_11718" style="width: 3274px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.01.12.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo1.jpg" alt="アクセシビリティやるぞ！祭り" width="640" height="480" class="alignnone size-full wp-image-11841" srcset="/wp-content/uploads/2014/12/photo1.jpg 640w, /wp-content/uploads/2014/12/photo1-300x225.jpg 300w, /wp-content/uploads/2014/12/photo1-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">アクセシビリティやるぞ！祭り</p></div>

<p>このイベントは、「来るべき近未来のために業界の認識をアップデートすべく」（<a href="http://a11yfes.peatix.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">イベントページ</a>より）企画されたとのこと。近未来ってどういうことか、ちょっと気になります。</p>

<p>また、先日の<a href="https://html5experts.jp/shumpei-shiraishi/11532/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">木達一仁さんに行ったインタビュー</a>でも、「『アクセシビリティが当たり前の社会』というビジョンを実現するために、HTML5 Experts.jpとしても、お手伝いできることは何でもします！」と言った約束も守らねばなりません。</p>

<p>ということで、タイトルからしてちょっと楽しそうなこのイベント、無理を言って取材させてもらっちゃいました。今回はそのレポート記事になります。</p>

<h2>「アクセシビリティ＝高齢者・障害者対応」は大間違い！</h2>

<p>最初のセッションはヤフーでマークアップエンジニア/フロントエンジニアを担当していらっしゃる（最近では「アクセシビリティエンジニア」と名乗っているそうです）福本翔さんによる「<strong>やはりお前らのWebアクセシビリティは間違っている</strong>」でした。</p>

<p><div id="attachment_11719" style="width: 3274px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.08.39-e1417744113103.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo2.jpg" alt="やはりお前らのWebアクセシビリティは間違っている" width="640" height="480" class="alignnone size-full wp-image-11842" srcset="/wp-content/uploads/2014/12/photo2.jpg 640w, /wp-content/uploads/2014/12/photo2-300x225.jpg 300w, /wp-content/uploads/2014/12/photo2-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">「やはりお前らのWebアクセシビリティは間違っている」</p></div>
<div id="attachment_11720" style="width: 3274px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.08.50-e1417744054598.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo3.jpg" alt="Yahoo! Japan 福本 翔氏" width="640" height="480" class="alignnone size-full wp-image-11843" srcset="/wp-content/uploads/2014/12/photo3.jpg 640w, /wp-content/uploads/2014/12/photo3-300x225.jpg 300w, /wp-content/uploads/2014/12/photo3-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">Yahoo! Japan 福本 翔氏</p></div></p>

<p>講演スライドは<a href="http://i.yimg.jp/images/creativeblog/141204/a11yfes.pdf" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">こちらからダウンロード</a>できます（PDF）。</p>

<p>タイトルは少し挑発的ですが、内容はとても真摯な内容。一般的にアクセシビリティというと、未だに「高齢者や障害者への対応」という認識が一般的ですが、それが大きな間違いであると指摘。そのように考えてしまうことが、「自分のサービスは高齢者や障害者を主な対象とはしていない」といった考えに繋がり、アクセシビリティへの配慮をおざなりにするマインドにつながりかねません。</p>

<p>そしてそれだけではありません。これまでWebは、スクリーンを通じて視覚で認識するのが当たり前でした。でも今後は違います。スマートウォッチのように、非常に小さいスクリーンしか備えないデバイスもあれば、スクリーンを持たないデバイスでインターネットにアクセスするのも普通になるはずです。</p>

<p>利用者も様々。デバイスも様々。コンテキストも様々。組み合わせは膨大であり、コンテンツ制作者が全ての利用シーンをコントロールすることはとてもできません。</p>

<div id="attachment_11724" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.10.26-e1417745354270.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo4.jpg" alt="利用者は様々" width="640" height="480" class="alignnone size-full wp-image-11845" srcset="/wp-content/uploads/2014/12/photo4.jpg 640w, /wp-content/uploads/2014/12/photo4-300x225.jpg 300w, /wp-content/uploads/2014/12/photo4-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">利用者は様々</p></div>

<div id="attachment_11728" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.10.52-e1417745544433.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo5.jpg" alt="デバイスも様々" width="640" height="480" class="alignnone size-full wp-image-11846" srcset="/wp-content/uploads/2014/12/photo5.jpg 640w, /wp-content/uploads/2014/12/photo5-300x225.jpg 300w, /wp-content/uploads/2014/12/photo5-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">デバイスも様々</p></div>

<div id="attachment_11726" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.11.01-e1417745381748.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo6.jpg" alt="コンテキストも様々" width="640" height="480" class="alignnone size-full wp-image-11847" srcset="/wp-content/uploads/2014/12/photo6.jpg 640w, /wp-content/uploads/2014/12/photo6-300x225.jpg 300w, /wp-content/uploads/2014/12/photo6-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">コンテキストも様々</p></div>

<p>そこでアクセシビリティの確保が重要になります。高いアクセシビリティを備えたWebコンテンツは、デバイスにとってもアクセスしやすいため、ユーザーの利用シーンに合わせて自動的に調整するのも容易です。</p>

<p><div id="attachment_11849" style="width: 650px" class="wp-caption alignnone"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.15.42-e1417768153738.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo7.jpg" alt="入出力機器がコンテンツを利用者に届ける際、アクセシビリティが重要となる" width="640" height="480" class="size-full wp-image-11849" srcset="/wp-content/uploads/2014/12/photo7.jpg 640w, /wp-content/uploads/2014/12/photo7-300x225.jpg 300w, /wp-content/uploads/2014/12/photo7-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /><p class="wp-caption-text">入出力機器がコンテンツを利用者に届ける際、アクセシビリティが重要となる</p></div></a></p>

<p>アクセシビリティのポイントは「ヒューマンリーダブル」「マシンリーダブル」「利用、操作可能な代替手段が存在すること」の3つですが、前述したユーザーエージェントによる支援を最大限受けるためには、「マシンリーダビリティ」を確保することが非常に重要。</p>

<div id="attachment_11722" style="width: 3274px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.13.50-e1417745055658.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo8.jpg" alt="Webアクセシビリティ対応の3つのポイント" width="640" height="480" class="alignnone size-full wp-image-11851" srcset="/wp-content/uploads/2014/12/photo8.jpg 640w, /wp-content/uploads/2014/12/photo8-300x225.jpg 300w, /wp-content/uploads/2014/12/photo8-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">Webアクセシビリティ対応の3つのポイント</p></div>

<p>マシンリーダビリティを高めるには、HTMLの様々な要素を「正しく、より良く」使うこと、WAI-ARIAを使うこと、Microdata、Microformat、RDFaなどの構造化データを利用するなどが挙げられます。こうした手法を地道に実践していくことで、既存のデバイスだけではなくまだ見ぬ未来のデバイスも、Webコンテンツをうまく取り扱える可能性があります。「アクセシビリティは未来への投資」というわけですね。</p>

<p>そして最後に、Webの創始者ティム・バーナーズ＝リー氏の言葉を引用しつつ、「Webアクセシビリティを高めることは、Webの本質を実践していくことである」という印象的なメッセージを残してセッションは終了しました。</p>

<div id="attachment_11723" style="width: 3274px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.21.50-e1417745178329.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo9.jpg" alt="ティム・バーナーズ＝リーのおことば" width="640" height="480" class="alignnone size-full wp-image-11852" srcset="/wp-content/uploads/2014/12/photo9.jpg 640w, /wp-content/uploads/2014/12/photo9-300x225.jpg 300w, /wp-content/uploads/2014/12/photo9-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">ティム・バーナーズ＝リーのおことば</p></div>

<h2>Webアクセシビリティの現状 &#8211; アクセシビリティ対応が法律で義務化！？</h2>

<p>次は、ミツエーリンクス取締役CTOの木達一仁さんによる「<strong>Webアクセシビリティの現状ダイジェスト2014</strong>」です。先日公開した、<a href="https://html5experts.jp/shumpei-shiraishi/11532/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">木達さんのインタビュー記事</a>も合わせてお読みいただけると、いろいろ面白いのではないかと思います（宣伝）。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.23.45-e1417756124604.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo10.jpg" alt="ミツエーリンクス取締役CTOの木達一仁さん" width="640" height="480" class="alignnone size-full wp-image-11854" srcset="/wp-content/uploads/2014/12/photo10.jpg 640w, /wp-content/uploads/2014/12/photo10-300x225.jpg 300w, /wp-content/uploads/2014/12/photo10-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" />　　ミツエーリンクス取締役CTOの木達一仁さん</a></p>

<p>このセッションでは、Webアクセシビリティの現状について、海外動向と国内動向、そして標準化技術の動向などをわかりやすくまとめてくださいました。</p>

<iframe src="//www.slideshare.net/slideshow/embed_code/42358077" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://html5experts.jp//www.slideshare.net/mlca11y/20141204-a11yfes" title="Webアクセシビリティの現状ダイジェスト 2014" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Webアクセシビリティの現状ダイジェスト 2014</a> </strong> from <strong><a href="https://html5experts.jp//www.slideshare.net/mlca11y" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Mitsue-Links Co.,Ltd. R&amp;D Department Accessibility Team</a></strong> </div>

<p>まず海外動向ですが、オーストラリアやニュージーランド、アメリカなどでは法律による義務化が既に進められているそう。（詳しくは上のスライドか、「<a href="http://waic.jp/news/20140804.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ウェブアクセシビリティ基盤委員会 障害者差別解消法の基本方針に関する意見書</a>」の後半に、海外各国の動向がまとめられているのでそちらをご覧ください）。</p>

<p>特に航空業界ではACAA (<a href="http://en.wikipedia.org/wiki/Air_Carrier_Access_Act" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Air Carrier Access Act</a>）という法律によってアクセシビリティの取り組みが義務化されているのですが、その対象範囲が米国内の企業にかぎらず、米国に乗り入れを行う企業にも及ぶため、航空業界ではアクセシビリティの取り組みが非常に進んでいるとのこと。</p>

<div id="attachment_11733" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.30.23-e1417757125847.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo11.jpg" alt="海外で進む法制化（例）" width="640" height="480" class="alignnone size-full wp-image-11855" srcset="/wp-content/uploads/2014/12/photo11.jpg 640w, /wp-content/uploads/2014/12/photo11-300x225.jpg 300w, /wp-content/uploads/2014/12/photo11-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">海外で進む法制化（例）</p></div>

<p>そして我が国では、総務省が2010年に公開した「<a href="http://www.soumu.go.jp/main_sosiki/joho_tsusin/w_access/index_02.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">みんなの公共サイト運用モデル改定版（2010年度）</a>」がガイドラインとして存在します。
とはいえそこはやはりガイドラインの限界、特に強制力があるわけではないので、公共機関や民間企業の自助努力はあれども、アクセシビリティへの対応は遅れている状態です。</p>

<div id="attachment_11734" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.36.23-e1417757146893.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo12.jpg" alt="アクセシビリティに積極的な企業はまだ多くない印象" width="640" height="480" class="alignnone size-full wp-image-11856" srcset="/wp-content/uploads/2014/12/photo12.jpg 640w, /wp-content/uploads/2014/12/photo12-300x225.jpg 300w, /wp-content/uploads/2014/12/photo12-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">アクセシビリティに積極的な企業はまだ多くない印象</p></div>

<p>そこで日本でも、法制化に向けて既にことは動き出しています。<a href="http://www.mofa.go.jp/mofaj/gaiko/jinken/index_shogaisha.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">国連が定めた障害者の権利に関する条約</a>への批准に伴い、<a href="http://www8.cao.go.jp/shougai/suishin/sabekai.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">障害者差別解消法</a>が制定され（再来年2016年より施行）、Webコンテンツも法律の対象範囲になるのはほぼ間違いないとのこと。「アクセシビリティに配慮していないWebサイトは法律違反に当たる」という時代が、現実のものになるかもしれません。</p>

<div id="attachment_11735" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-19.37.58-e1417757493110.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo13.jpg" alt="障害者差別解消法の今後には要注目" width="640" height="480" class="alignnone size-full wp-image-11857" srcset="/wp-content/uploads/2014/12/photo13.jpg 640w, /wp-content/uploads/2014/12/photo13-300x225.jpg 300w, /wp-content/uploads/2014/12/photo13-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a><p class="wp-caption-text">障害者差別解消法の今後には要注目</p></div>

<h3>HTML5がバラバラに！？ &#8211; アクセシビリティ関連技術の標準化動向</h3>

<p>続いて、アクセシビリティに関連したWeb技術の標準化動向が次々に紹介されました。</p>

<h4>WCAG 2.0</h4>

<p>まずは<a href="http://www.w3.org/TR/WCAG20/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WCAG (Web Content Accessibility Guidelines)</a>。Web文書のアクセシビリティに関するガイドラインであるWCAGは、2008年に2.0が勧告されて以来一度も変更されていないそう。2012年には<a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=58625" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ISOの標準 (ISO/IEC 40500:2012)</a>にもなっています。</p>

<div id="attachment_11784" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568-1024x814.png" alt="WCAG2.0" width="1024" height="814" class="size-large wp-image-11784" srcset="/wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568-1024x814.png 1024w, /wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568-300x238.png 300w, /wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568-207x164.png 207w, /wp-content/uploads/2014/12/a755dc80db4d94419cec57bc26148568.png 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">WCAG2.0</p></div>

<p>ただ、WCAGは技術非依存が前提になっているため、抽象度が高く、ハッキリ言って「難しい」。なので、様々な関連文書がWCAGを補足する形で公開されており、それらも理解の助けになるそうです。</p>

<ul>
<li><a href="http://www.w3.org/WAI/tutorials/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Web Accessibility Tutorials</a></li>
<li><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Understanding WCAG 2.0</a>・・・<a href="http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">日本語訳</a>もあります。</li>
<li><a href="http://www.w3.org/TR/WCAG20-TECHS/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Techniques for WCAG 2.0</a>・・・<a href="http://waic.jp/docs/WCAG-TECHS/Overview.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">日本語訳</a>もあります。</li>
<li><a href="http://www.w3.org/TR/WCAG-EM/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WCAG-EM</a>・・・Website Accessibility Conformance Evaluation Methodologyの略で、WCAG 2.0に適合しているかどうかを評価するための方法をまとめたガイドライン。</li>
</ul>

<h4>WAI-ARIA</h4>

<p><a href="http://www.w3.org/TR/wai-aria/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WAI-ARIA</a>とは、W3C内のWeb Accesibility Initiativeによって策定された、WebコンテンツやWebアプリケーションのアクセシビリティと相互運用性を向上させる技術です（ちなみに読み方は「ウェイ・アリア」だそう）。こちらは勧告されたのは今年（2014年）の3月ですが、既に広く利用されていた技術でもあり、<a href="https://momdo.github.io/wai-aria/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">仕様書の日本語訳</a>や、HTMLでWAI-ARIAを使用するにあたってのテクニックを紹介した「<a href="http://www.w3.org/TR/aria-in-html/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Using WAI-ARIA in HTML</a>」にも<a href="https://imagedrive.github.io/spec/using_wai-aria_in_html.xhtml" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">日本語訳</a>があります。</p>

<p>ちなみに木達さんは、2010年の段階ですでにWAI-ARIAに関するスライドを公開していらっしゃいました。</p>

<iframe src="//www.slideshare.net/slideshow/embed_code/5806569" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://www.slideshare.net/mlca11y/waiaria" title="アクセシビリティを加速するWAI-ARIA" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">アクセシビリティを加速するWAI-ARIA</a> </strong> from <strong><a href="http://www.slideshare.net/mlca11y" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Mitsue-Links Co.,Ltd. R&amp;D Department Accessibility Team</a></strong> </div>

<h4>HTML5</h4>

<p>次は皆さんおなじみの<a href="http://www.w3.org/TR/html5/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5</a>（<a href="http://momdo.github.io/html5/Overview.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">日本語訳</a>）。先日（2014年10月28日）勧告された際には、非常に話題になりましたね。</p>

<div id="attachment_11790" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc-1024x721.png" alt="HTML5仕様" width="1024" height="721" class="size-large wp-image-11790" srcset="/wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc-1024x721.png 1024w, /wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc-300x211.png 300w, /wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc-207x145.png 207w, /wp-content/uploads/2014/12/ccf6b5874062dfd71960448a72dffbdc.png 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">HTML5仕様</p></div>

<p>HTML5で導入された様々な要素は、アクセシビリティを高める上で重要な役割を担います。例えば<a href="http://html5accessibility.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5 Accessibility</a>というサイトでは、各ブラウザにおけるHTML5のアクセシビリティ機能への対応状況をスコア化してくれています。</p>

<div id="attachment_11791" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6-1024x705.png" alt="HTML5 Accessiblityによる、各ブラウザのアクセシビリティ対応状況。IE頑張れ！" width="1024" height="705" class="size-large wp-image-11791" srcset="/wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6-1024x705.png 1024w, /wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6-300x206.png 300w, /wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6-207x142.png 207w, /wp-content/uploads/2014/12/4e6d480a2d4af80baa399ec4ecedebe6.png 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">HTML5 Accessiblityによる、各ブラウザのアクセシビリティ対応状況。IE頑張れ！</p></div>

<p>HTML5仕様に関して気になる動きとしては、先日開催された<a href="http://www.w3.org/2014/11/TPAC/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">W3C TPAC</a>というイベントで、HTML仕様の（CSS3と同様に）モジュール化が話題に挙がっていたとのこと。この先の見通しはまだ不透明な段階ですが、もしかすると次期バージョンと目されていた<a href="http://www.w3.org/TR/html51/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">HTML5.1</a>は解体され、モジュールごとに進化していくようなことになるのかもしれません。</p>

<p>ほか、木達さんのセッションではデバイス非依存のUIを定義しようとする試みである<a href="http://www.w3.org/WAI/intro/indieui" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">IndieUI</a>や、動画に字幕やキャプションを追加するためのフォーマットである<a href="http://dev.w3.org/html5/webvtt/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">WebVTT</a>についても言及がありました。興味がある方は、木達さんのスライド資料や仕様書を参照してみてください。</p>

<h3>実践！Webアクセシビリティ</h3>

<p>最後は、BA 制作本部 シニアインフォメーションアーキテクト 伊原 力也さんによる「アクセシビリティ対応をプロジェクトに取り入れるには？」というセッションでした。実際の制作現場でアクセシビリティ対応を行っていくにあたって、プロジェクト計画の立て方、クライアントや制作メンバーとのコミュニケーション、そしてアクセシビリティに対するそもそもの心構えなどについて、実践的な話をされていたのが印象的でした。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.15.48.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.15.48-1024x1024.jpg" alt="アクセシビリティ対応をプロジェクトに取り入れるには？" width="1024" height="1024" class="aligncenter size-large wp-image-11793" srcset="/wp-content/uploads/2014/12/2014-12-04-20.15.48-1024x1024.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.15.48-150x150.jpg 150w, /wp-content/uploads/2014/12/2014-12-04-20.15.48-300x300.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.15.48-207x207.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.15.48.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>

<iframe src="//www.slideshare.net/slideshow/embed_code/42362542" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

<div style="margin-bottom:5px"> <strong> <a href="https://html5experts.jp//www.slideshare.net/rikiha/a11yfes-rikiha" title="アクセシビリティ対応をプロジェクトに取り入れるには？" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">アクセシビリティ対応をプロジェクトに取り入れるには？</a> </strong> from <strong><a href="https://html5experts.jp//www.slideshare.net/rikiha" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Rikiya Ihara</a></strong> </div>

<p>現在、アクセシビリティ対応はその必要性や重要性が十分に認識されておらず、上流工程における考慮漏れが頻繁に発生しているとのこと。それを、現場で「誰かがなんとかしている」というのがよくある話。</p>

<div id="attachment_11795" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.18.20.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.18.20-1024x768.jpg" alt="（今回のプロジェクトで）アクセシビリティどうするの？" width="1024" height="768" class="size-large wp-image-11795" srcset="/wp-content/uploads/2014/12/2014-12-04-20.18.20-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.18.20-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.18.20-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.18.20.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">（今回のプロジェクトで）アクセシビリティどうするの？</p></div>

<p>伊原さんは、プロジェクトの設計段階でアクセシビリティに対する配慮がきちんとなされていないことに大きな問題がある、と指摘。
UXの構成要素を表す3つの図（古典的なUXハニカム、それを再構成した<a href="https://html5experts.jp/noriyo/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">浅野紀世さん</a>の手によるUXピラミッド、さらにそれを<a href="http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Webサイトの評価軸という点から再構成したもの</a>）を引き合いに出しつつ、「アクセシビリティはWebサイトのUXにおける一番土台となるもの」と位置付けます。</p>

<div id="attachment_11803" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.24.50.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.24.50-1024x768.jpg" alt="UXハニカム" width="1024" height="768" class="size-large wp-image-11803" srcset="/wp-content/uploads/2014/12/2014-12-04-20.24.50-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.24.50-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.24.50-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.24.50.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">UXハニカム</p></div>

<div id="attachment_11804" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.25.27.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.25.27-1024x768.jpg" alt="UXピラミッド" width="1024" height="768" class="size-large wp-image-11804" srcset="/wp-content/uploads/2014/12/2014-12-04-20.25.27-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.25.27-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.25.27-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.25.27.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">UXピラミッド</p></div>

<div id="attachment_11805" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.26.15.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.26.15-1024x768.jpg" alt="UXピラミッド改" width="1024" height="768" class="size-large wp-image-11805" srcset="/wp-content/uploads/2014/12/2014-12-04-20.26.15-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.26.15-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.26.15-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.26.15.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">UXピラミッド改</p></div>

<h3>アクセシビリティの問題は、8割が設計に潜んでいる！</h3>

<p>実際にプロジェクトにおいてアクセシビリティ対応を実践していくには、まず最初にアクセシビリティへの対応方針について、最初にプロジェクト内で意思統一を行うのが大事です。</p>

<p>アクセシビリティの対応を最初に明言したからと言って、制作メンバーから面倒がられることはない、とのこと。むしろ、明確な方針があることが制作にあたっての「よい手がかり」になるそうです。</p>

<div id="attachment_11807" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.28.27.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.28.27-1024x768.jpg" alt="アクセシビリティ対応を最初に宣言することが、制作者にとって疎まれることはあまりない。" width="1024" height="768" class="size-large wp-image-11807" srcset="/wp-content/uploads/2014/12/2014-12-04-20.28.27-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.28.27-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.28.27-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.28.27.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">アクセシビリティ対応を最初に宣言することが、制作者にとって疎まれることはあまりない。</p></div>

<p>また、アクセシビリティへの対応を行うと宣言することが、クライアントから問題視されることも実はありません。専門家が「やった方がいい」というものを否定するクライアントはいませんし、そもそも最初に話を合わせておけば、「アクセシビリティのための追加コスト」は不要になるはずです。</p>

<p>そして実際の方針決めですが、リニューアルの場合はまず現状調査から入り、「<a href="http://waic.jp/docs/accessibility-plan-guidelines/201308/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ウェブアクセシビリティ方針策定ガイドライン</a>」を参照しながら進めるのがよいそうです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.39.31.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.39.31-1024x768.jpg" alt="アクセシビリティ方針を立てる" width="1024" height="768" class="aligncenter size-large wp-image-11808" srcset="/wp-content/uploads/2014/12/2014-12-04-20.39.31-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.39.31-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.39.31-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.39.31.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>

<p>「アクセシビリティ対応をやらない」と決めるのも、立派に「方針」。これは聞いているぼくも目からウロコでした。
<a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.41.41.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.41.41-1024x768.jpg" alt="2014-12-04 20.41.41" width="1024" height="768" class="aligncenter size-large wp-image-11816" srcset="/wp-content/uploads/2014/12/2014-12-04-20.41.41-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.41.41-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.41.41-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.41.41.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>

<p>伊原さんのセッションは、「問題の8割が『設計』に潜んでいる」というメッセージを残して終わりました。アクセシビリティはWebサイトの土台を支えるものであり、そこをないがしろにして工程を進めてしまうと、後から取り返しがつかないということでしょう。</p>

<div id="attachment_11809" style="width: 1034px" class="wp-caption aligncenter"><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-20.50.28.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/2014-12-04-20.50.28-1024x768.jpg" alt="アクセシビリティの問題の8割は設計に潜んでいる" width="1024" height="768" class="size-large wp-image-11809" srcset="/wp-content/uploads/2014/12/2014-12-04-20.50.28-1024x768.jpg 1024w, /wp-content/uploads/2014/12/2014-12-04-20.50.28-300x225.jpg 300w, /wp-content/uploads/2014/12/2014-12-04-20.50.28-207x155.jpg 207w, /wp-content/uploads/2014/12/2014-12-04-20.50.28.jpg 640w" sizes="(max-width: 1024px) 100vw, 1024px" /></a><p class="wp-caption-text">アクセシビリティの問題の8割は設計に潜んでいる</p></div>

<h2>楽しくてためになる「お祭り」でした！</h2>

<p>今回のイベントは、何かとマジメな方向に振れてしまいがちな「アクセシビリティ」というテーマを、「お祭り」というかたちでまとめあげていて、聞いているこちらもリラックスして楽しむことができました。</p>

<p>グラフィックレコーディングをこの目で見れたのも、なかなかに収穫。次回の開催が今から待ち遠しいです！</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-21.02.38.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo23.jpg" alt="" width="480" height="640" class="alignnone size-full wp-image-11859" srcset="/wp-content/uploads/2014/12/photo23.jpg 480w, /wp-content/uploads/2014/12/photo23-225x300.jpg 225w, /wp-content/uploads/2014/12/photo23-155x207.jpg 155w" sizes="(max-width: 480px) 100vw, 480px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-21.00.47.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo24.jpg" alt="" width="480" height="640" class="alignnone size-full wp-image-11860" srcset="/wp-content/uploads/2014/12/photo24.jpg 480w, /wp-content/uploads/2014/12/photo24-225x300.jpg 225w, /wp-content/uploads/2014/12/photo24-155x207.jpg 155w" sizes="(max-width: 480px) 100vw, 480px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/12/2014-12-04-21.03.16.jpg" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/12/photo25.jpg" alt="" width="480" height="640" class="alignnone size-full wp-image-11861" srcset="/wp-content/uploads/2014/12/photo25.jpg 480w, /wp-content/uploads/2014/12/photo25-225x300.jpg 225w, /wp-content/uploads/2014/12/photo25-155x207.jpg 155w" sizes="(max-width: 480px) 100vw, 480px" /></a></p>
]]></content:encoded>
		
		<series:name><![CDATA[イベントレポート]]></series:name>
	</item>
	</channel>
</rss>
