さっきヒロッキさんで明日からできる自作テーマ自宅プロジェクトのアクセスビリティにも2018ですよろしくお願いしますはい、こんにちわ、よろしくお願いしますえーと、今日は今日はオビジマアリーナへようこそに出しちゃいましたアリーナの皆さん、ご連絡してますか?イェーイイェーイアクセスビリティはすごい分かりやすいお話いただいて僕もアクセスビリティも話したんですけどちょっとおかしながらどうしようかなと思ってで、ちょっと頑張ってアクセスビリティのセッションをしらえるちょっとこれを用意してちょっともう少しスマホで呼ぶ人は読んでいただくとご自分のお手元で僕がこれからした事を見ていただけるのでで、これがお前の事を呼ばない方はWCオビジマンのカシュタルでツイッターのペースの方も僕が書いてありますので今日は最初は見たことない言われるの違っちゃったので2回やれますそちらから言っていただくと僕もこれから社長室で見ていただけるのでぜひそちらを確認いただけるというのが思いますで、僕はサイティなんですけど一緒にいるあなたはツイッターさんですねはいお年はいつですか?8歳8歳ですねお父さんは51歳ですね別にそれは誰も聞いたですねじゃあお父さんは何の話をしますか?お父さん、もう一緒に言いますお母さん、あの辺ではいじゃあお母さんの話をお願いしますはい、ありがとうございますはい、ということでですね明日からできる自作典の自作プレジェクトのツイッター作で入門2018年でで、改めましたサイティなんですけどこれ別にバイク屋がなくてですねこれは経営者なんですけど経営者何って言いますか東京にある株式会社FGM会社におりましてで、そこで平内一日カスタム人の生産職員のお仕事をしておりますで、今日お話しすることざっくりこの3つワンダーブレスのワンダーブレスのアクセスビディータイツそれから自作テーマを作る時のアクセスビディータイツで、3つ目にプロジェクトのアクセスビディータイツこの3つということでお話をしますで、今日以降忘れずに言っていただきたいアクセスビディータイツアクセスビディータイツこれをぜひこうやって書いていただきたいなと思いますまずちょっと質問なんですけど皆さんのお手元になって非常に手軽にアクセスビディータイツを意識したいかできるもの何のがあるでしょうかこれ別に何個ことは何ですかもしかしたら今スライドご覧になるかもしれないですスマホーアイフォンガーとボイスオーバーアンドライドガーとトークバッティングという読め上げる速度がもともと入っていましてそれでちょっとグラウドを持ちますけど他のアフリケーションなんかも読み上げなことができますちなみにこれの使ったことあるってことよろしくお願いしますよろしくお願いします今回はぽちぽちいらっしゃいますありがとうございますでも使ったことがない方が多分どんどんどんと思うのでちょっとそれを出募していくようなっていうのがボイスオーバーで読め上げたこれは西川さんの実効員長読み上げっていうご挨拶の記事を今で一説読み上げたところなんですけどまあ男ビジマとか西川の部下じゃんまあちょっと部分的にちゃんと合ってないところはある犠牲をでもちゃんとブログの記事を書いたものが本勢でも読み上げられるこういうのはもう普通にもう誰のアイフォンガーアンドライドがこれ実現できてますでこれって特別なことしてないんだけどもこれってちゃんと読み上げられてくださいでもちろん音声ブラウザに対応することそのことだけがじゃあアクセスしていく対応になっているかっていうもちろんそんなことはないんですけどもでも今のブログの記事を書いただけでセマンチックのコーディングをしていればアクセスしていくこれがじゃあできるかってっていうのが今日の話ですでこれはちゃんと読みとしてこれをこのもの機能拡張になりますけどもちろん対応発表もであとプロの開発中ですと開発中のところにアクセスビディ多分っていうのが新しくありましてでそちらで実際にツリーな顔見ることができますでまずワードプレスのアクセスビディーなんですけどもワードプレスもうこうやってしたいからアクセスビディに対応しておりますでこちらのコンデックスのアクセスビディーのところですとかあとシラクのチャンネルなんかもご覧いただけますでテーブルのアクセスビディーこれはデフォルトのテーマ2017とかですけどもこれはもともとWCAG2.0まじまさんのセッションでちょっとお話がありますけどこちらにもきちんと準備をした可能性になります2.1が先月勧告されましたのでいずれ2.1のことに合わせていただきたいと思いますでアクセスビディファイルをするためのプラグインけども実際ありましてこれ例えば上のAWP-A11iっていうプラグインは京都の時代工房さんという制作会社さんが配布している渋谷さんの方が作っているプラグインですこれはコンテンツの部分がきちんとアクセスビディータイムできているかどうかとのチェックする質問がありますそこでまた疑問があるんですけどデフォルトのものはいいとしてじゃあ自分が作る自作テーマの場合アクセスビディーどうなのかそうするとたぶんこの4つぐらい多分ポイントとしてあるのかなと思うまして一つは世間的に光源のアクセスビディータイム二つ目はディス837-1の320-1837-1は優しいっていうやさなんですけどこれさっきのWCAGと基本的に同じ内容をディスの企画にしたものというものがそれにきちんと順序できるかどうかあとはロール属性アリア属性こういったものに適用ちゃんと活用していこうもう一つアクセスビディータイムを使うっていうのが一つの方法かなと思いますセマンテックにコーディングするたぶんこれは皆さんHTML5を書いて長いと思うのでこれはたぶん大体の人できてると思うんですよ言ってもタイトル多分正しく使う皆さんねH1X普通に使います文書構成を正しくアクアップするこれまでたぶん皆さんほとんどできてるだろうと思うんですで基本のフォーカス消さないこれCSSでフォーカスなんとかしてないですこれキーボードフォーカスたぶん当然これ分かれたと思うんですこういうやつですねこうやってタブキーでフォーカスが利用するっていうやつですでそれとあと装飾やぞこれもどういうふうにコーディングするかちょっとポイントかなと思いますちょっとここだけフォーカスしようと思うんですが装飾やぞ使うときにこんな感じでこれたぶんちょっと見づらいと思うのでお手元でお手元で見ていただくほうがいいと思うんですけれども例えばアイフォンをアイのタブでかこってでアリアヒルヒズン属性ですねアリア属性のヒズンを使うであるいはスタンでアイフォンをかこってあげてでこれちょっと今かぶりをしてますけどこれですねオルトオルトのところをかなりしておくここですねこんな感じでオルトのところをかなりしておけば今に呼び上げられないのでアイフォンをこうしてもう使えるでちょっと一部これ僕もすごく使いやすいのでずっと使っちゃってたこともあるんですけど技術要素ビフォアとかあったとかを装飾画像についてもらうのは正直あまりおすすめ進行的な面から言うとあんまりお勧めができないというのはCSSで仮にCSSが読み込まれる内容が関係になってしまうとこれがあるいは技術要素は音声ブラウザーだと読み上げられてしまうのでその音声ブラウザで読み上げる必要がないものまで読み上げられてしまうというものがあったりしますでもしCSSでどうしても使いたいなっていう場合はバックグラムでイネジトを使おうといいのかなと思いますでそれとまたちょっと別のままですけどこういうのちょっとこれも見づらいんですけどフォームで例えば必須のマークとかありますよね私はどういうふうにマークアップするかって話なんですけどこれが今はそもそも装飾ではないのでこれをきちんとHTMLで装飾しましょうという話になりますもちろんこういうようなスパンとなってももちろん何か別のマークアップをすることがあるかもしれないですけどもCSSやっぱり読み込まれないことっていうのは可能性としてやっぱりあると思いますで意味のあるもの当然例えば目が見える人にはそのウェブサイトを訪れたとしてもそのアイコンがきちんと読め上げられるようにっていう場合では僕はきちんとHTMLでこう読み込ませる必要がありますであとこれさっきほどのまだBCH2.0とほぼ農業の内容ですけどもこういったもの内容への順序それからロール属性アリア属性これもよく分からないとはいつつ例えばブルトストラビとか使っているとあると思うので多分見たこともあると思いますもしかしたら使ったことはないかもしれないけれども意識しないで実は使っていたりとかというものがあると思うのでこういうのもちょっと調べてみると面白いんじゃないかなと思いますあと例えばこういうクラブインこういうプラグインを出ることで例えば宮下さんが作っていらっしゃるコンタクトコンのセブンなのがアクセスミスリティ非常に気を使っているのでそのプラグインを出て書き出される人も少しほど上にもうすでに例えばこういったプラグインを使うことで大物な部分という感じではそれもまた気にしなくてもいいということがあったりしますでまあこれは3問なんですけどもワードプレスにアクセスミスリティ講演のスタンダードというものが存在しますなのでちょっと興味持たれた方はぜひちょっとこういうのを読んでいただけるといいんじゃないかなと思いますでいよいよプロジェクトがアクセスミスリティにたいだったんですけどプロジェクトマネージャーさんいらっしゃると思うんですけど多分正直に答えていただきたいんですけどアクセスミスリティだいたいアクセスミスリティだいたい頭回しになってると思うんですよそうわからないのではないですわからないのではないですコスとかかれそうなんか難しそうとかまあそういうのあると思うんですねで結局なんでそれ頭回しになるかと言ったら多分アクセスミスリティやってももう考えないと思ってるからでだけどまあこれちょっと考えていただけるとこれは実はそんなことがなんで例えばじゃあ近くつでスマホでちょっとECサイズ見てましたTシャツのサイズに用意してでTシャツの一覧ページにいたところでなんか電話とかかかりながって呼び込まれたら画像が呼び込まれなくてだいたいテキストが出ましたでそれでパッと画面を見たらそこにどう思いますそれでいやわかっとるかという話なんですTシャツのテージにいたんですかでTシャツTシャツって出てきたらそれなんとか分かんないからそのページたときをぜるじゃないですかだけどそんなTシャツTシャツ出てきたところに例えば枠の耳のところ指の鼻があってで頭台にかじりついている映画胸のところについてるTシャツにかりかわしく書いてあったんですがそしたらもしかしたらそれかわいいのかなとちょっと思うと思うんですけどでも枠の絵の書いてあるTシャツなんだだって分かったらきっとそれはまあじゃあそのときに画面を呼べないからじゃあときまくしといてあと読み遅くなったことなんじゃないですかだけどただTシャツって書いてあるから絶対そこに閉じるじゃないですか多分そこですでに機械掃除してるんじゃないかというの僕は考えますそういうところにちょっとずつ気持ちを使われることでもしかしたらそのウェブサイトPVもっと上がる可能性があるという可能性きっとあると思うんですねじゃあどこまでも求めるかという話になるとまず最初に方針を決めるのが必要だと思いますもちろんそのウェブサイトプロジェクトも大きい考えるとプロジェクトマネージャーさんあるいはディレクターさんが方針を決めることになると思うので出会えればそういう人がちょっと脳筋も短いしお金もよさも少ないからじゃあもう一回しょうもないからアクセスミリティ今回は対応しないでいこうというのを当然選択肢としてはあると思います逆にもしそうであるのがそういう今回のプロジェクトはアクセスミリティ対応しませんよということをクラウンドさんも含めて全員でそれはお話を進んできてあって全員がこういう目的でこのウェブサイトを例えばプロジェクトとしてはアクセスミリティ対応してないのにだけどコーダーさんがアクセスミリティ対応してないのにおかしいとか言って一人でやってたからそれって明らかにそれこしといたのにみんながこのクラウンドさんはアクセスミリティ対応するつもりでいたのに実はみんなそのつもりがなくてやってたらクラウンドさんからそれが起こることそうじゃないのになるじゃんきっとそういうことなのでこれはもうプロジェクト対応そういう脳筋とやっていた方がで基準を知るということでその先ほどお話しした例えばダブルシンシリティ対応が達成基準ということがありますシングルA、ダブルA、トリックルAという基準があるのでまずはこの基準を知りましょうということとあと例えばコースとかけられないとかにしても公式出る人に上がっているケーマを使うというのも一つの選択肢としてあるのかなと思いますでアクセシビリティ対応するアクセシビリティ対応っていうのがありましてそれで締まり込むと昨日の時点今日の時点にも多分変わってないんですが今123件アクセシビリティ対応したテーマっていうものがありますそれをベースに使うっていうのも一つの選択肢としてあると思うんですがたぶん皆さんも存じだと思うんですけど英語ベースでデザインが作られているテーマだったりすると日本割れたさんにめっちゃかっこよくないっていうことって結構結構起きると思うんですねこのデモサイトすげぇいけてたのに日本語を入れたらなんでこんなの結構新たなと思うんですけどそこで老法です今オーシケジレクトにコールドボックスっていうたぶんこの会社がいると思うんですけどミルコンっていう男の子が作ってテーマがありましてもうミルコンって日本人なんて日本語にも最初から考慮されたレザンビのテーマなんですけどもこれ今公開されたのがたぶん1.5.5なんですけどもこれもページのGitHubに行くとですね1.6.0が既にGitHub上では公開されていましてシントアクセシビティレディーと書かれておりましてで今オーシケジレクトにの方でもアクセシビティ対応のチェック中ということなので今人が足りないのでちょっとスピードは遅いかもしれないですけど次1.6.0がオーシケジレクトにレディーされた時にはアクセシビティタブシント作ったでシントにともにも対応しているという話になりますから是非ともこれ一つの選択肢の一つでこういうものを使うというのはありませんかなと思いますでとにかく例えばそのアクセシビティ難しく確かにおっしゃることはわかりますなので全部やり必要はなくてもう一番最初の部分からでいいと思うんです例えば間島さんが昨日のセッションでお話されたようにもう本当にコントロスト文字とバックグラウンドのコントロストを気をつけましょうとそういうところだけでもいいと思いますし例えばコーディングのところにしてもマジでマンティックにコーディングすることを気をつけようでそれだけでもいいと思いますで何よりその1回経済で終わらせるんじゃなくてその計測してやることがきっと大事だと思いますでインターネットがこれだけたくさんの方が来てでそのインターネットのウェブサイトの30%を占めるワードクラスで今アクセスベルティングことを進めていくでこれってすごく意気のあることなんじゃないかな僕はすごく思っていてでたくさんのウェブサイトがどんなそうやってアクセスベルに対応していくからどんな人でも簡単でそのウェブサイトだったら必要な写真だったら教え物が変えるそういう風になっていくのはすごく理想なんじゃないかなと思っていてでこれだけ皆さんいらしたらいいですからちょっとずつでいいので進められるといいんじゃないかなと思いますで最後にこれです最初も話しましたアクセスベルティング品質なんですだからこれをたくまっていくことで使う人も例えばクライアンドさんもみんながやっぱりちょっとずつでいいので意識して進めていけるといいんじゃないかなと思いますということで一番最後になりましたけど今日のセッション僕が久しぶりにとはいえそんなにむちゃくちゃ詳しいわけじゃないのでクリーンの井原さんあとサイバーエージューから松田さんにちょっとお手伝いいただいてキュルビックいただいたのがまだちゃんと反映できてなかったんですけどあと僕のむちゃくちゃに答えてアクセスベルティングタイルのテーマを即興してくれているのが見るものがあと僕をここの場に呼んでくださったオケジマのスタッフの皆さんあと会場にいらせていただいた皆さんあと僕がこうやって下げるというので両方気分で一緒について来てくれた僕の家族におめでとうございました