Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Slide of session for accessibility ready them...
Search
exc-D
July 09, 2016
Design
0
83
A Slide of session for accessibility ready theme in WordCamp Kansai 2016
A Slide of session for accessibility ready theme in WordCamp Kansai 2016
exc-D
July 09, 2016
Tweet
Share
More Decks by exc-D
See All by exc-D
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
290
VR and Motion Capture
excdinc
0
59
第65回 WordBench大阪「WordPressコミュニティに3年間参加して」
excdinc
0
150
WordBench Osaka #64 テーマもくもく会
excdinc
1
150
WordPress用ローカル環境構築ツール 「Local by Flywheel」を使ってみて
excdinc
0
2k
WordPress最新事情と広がる地域コミュニティ 関西オープンフォーラム2016
excdinc
1
140
WordPress Codex 日本語版を翻訳してみよう!
excdinc
0
240
How to use the 3D Printer and create the 3D Model data for printing
excdinc
1
130
フルスクラッチのテーマで サイトを作る楽しみ
excdinc
1
8.7k
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
270
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
260
portfolio.pdf
onof003
0
200
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
450
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
220
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
160
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
940
「UXとUIの違い」v2
shirasu3
0
260
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Music & Morning Musume
bryan
46
6.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Code Reviewing Like a Champion
maltzj
526
40k
Site-Speed That Sticks
csswizardry
13
930
Being A Developer After 40
akosma
91
590k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Designing for Performance
lara
610
69k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Writing Fast Ruby
sferik
630
62k
Transcript
ΞΫηγϏϦςΟରԠͷςʔϚ͕ ެࣜσΟϨΫτϦʹొ͞ΕΔ·Ͱ WordCamp Kansai 2016 ࣮ߦҕһ ദݪɹ߶ʢΧογʔʣ ʙςʔϚ࡞ͷखॱͱϨϏϡʔ࣌ͷରॲํ๏ͷҰྫʙ
ࣗݾհ ొஃऀɿദݪɹ߶ʢ͔͠Βɹ͚ͨ͠ʣ χοΫωʔϜɿΧογʔ Digistry ද ϑϦʔϥϯεWebσβΠφʔ େֶɾઐֶߍͷߨࢣ ത࢜ʢܳज़ʣେࡕܳज़େֶ 2011 ઐ߈ɿใσβΠϯ
͜ͷηογϣϯͷ֓ཁ ʮBG-PhotoFrameʯͱ͍͏ΞΫηγϏϦςΟରԠͷ ςʔϚΛ࡞ɻΞΫηγϏϦςΟͷςʔϚϨϏϡʔΛܦ ͯެࣜσΟϨΫτϦొ͞Ε·ͨ͠ɻ ϨϏϡʔ࣌ͷঢ়گͱɺ࡞ͬͯྑ͔ͬͨͳͲΛ͓͠ ͠·͢ɻ ͜Ε͔ΒςʔϚΛ࡞Δਓɺ·ͨ࡞ͬͨςʔϚΛΞΫ ηγϏϦςΟରԠʹ͢Δํͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ
࣍ • WebΞΫηγϏϦςΟͱ • ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞͖͔͚ͬͨͬ • ΞΫηγϏϦςΟͷςʔϚϨϏϡʔ • ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞ͯ͠ྑ͔ͬͨ͜ͱ
WebΞΫηγϏϦςΟͱ ߴྸऀোऀͳͲ৺ͷػೳʹ੍ͷ͋Δ ਓΛؚΊɺWebΛར༻͢Δͯ͢ͷਓ͕Web Ͱఏڙ͞Ε͍ͯΔใΛऔಘ͠ɺαʔϏε ػೳΛར༻Ͱ͖Δ͜ͱ (ࣾ)ຊWebΞΫηγϏϦςΟڠձϗʔϜϖʔδΑΓ http://www.jawaa.or.jp/Accessibility/
ΞΫηγϏϦςΟରԠͷ WordPressςʔϚΛ࡞Δҙٛ WordPressίϛϡχςΟ͚ͩͰͳ͘ ใࣾձʹߩݙɻ WordPressςʔϚΞΫηγϏϦςΟʹରԠ͢Δ͜ͱͰɺ αΠτ୭Ͱར༻Ͱ͖ΔΑ͏ʹɻ ୭ͰಋೖɺΧελϚΠζͰ͖ΔWordPressɻ
ΞΫηγϏϦςΟରԠͷ ςʔϚΛ࡞͖͔͚ͬͨͬ •WordCamp Tokyo 2015ͷίϯτϦϏϡʔλʔσΠ ʹࢀՃɻͦ͜ͰςʔϚ࡞Λߦ͏ɻ •ࣄͷҊ݅Ͱͭͬͨࣗ͘࡞ͷjQueryϓϥάΠϯΛε λʔλʔςʔϚʮ_s(ΞϯμʔείΞʔɾΤε)ʯʹ ΈࠐΈɻ
WordPressʹ͓͚Δ ΞΫηγϏϦςΟͷΨΠυϥΠϯ • ΩʔϘʔυૢ࡞ςετ • εΫϦʔϯϦʔμʔςετ • Χϥʔίϯτϥετɺ৭ςετ • ίʔυςετ
ςʔϚϨϏϡʔ࣌ʹ͜ΕΒͷςετ͕ߦΘΕ·͢ɻ https://make.wordpress.org/accessibility/handbook/testing/how-to-test-for-accessibility/
ΩʔϘʔυૢ࡞ςετ • λϒΩʔͰϘλϯͷબͷલਐɺޙਐ͕Ͱ͖Δ͜ͱ • ͯ͢ͷϘλϯʹΞΫηεͰ͖Δ͜ͱ • λϒΩʔͰͲͷϘλϯ͕ϑΥʔΧε͞Ε͍ͯΔ͔ɻ • ΩʔϘʔυͷΈͰૢ࡞͕ྃͰ͖ΔΑ͏ʹ͢Δɻ •
ΟϯυΛখͯ͘͞͠ϨεϙϯγϒϞʔυͰ࠶ςε τ • ҟͳΔϒϥβɺλϒϨοτεϚʔτϑΥϯͰςε τ͢Δ
εΫϦʔϯϦʔμʔςετ • ςετڥ • VoiceOver + Safari on Mac •
NVDA + Firefox on Windows • JAWS and IE 11 (no Edge yet) on Windows
ΞΫηγϏϦςΟͷϨϏϡʔΛड͚Δʹ /* Theme Name: Accessibility Ready Theme Theme URI: http://example.com/accessibility-ready-theme/
Description: Accessibility Ready Theme Author: John Doe Author URI: http://example.com Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: accessibility-ready-theme */ ςʔϚελΠϧγʔτ (style.css) ͷελΠϧγʔτϔομɺ ςʔϚͷಛΛهड़͢ΔTagsʹʮaccessibility-readyʯΛՃ͢Δɻ ެࣜσΟϨΫτϦʹΞοϓϩʔυ https://wordpress.org/themes/upload/ ϨϏϡΞʔ͕ͭ͘·Ͱ3ʙ4͔݄ͻͨ͢Βͭɻ
ϨϏϡʔ༰ͱߦͬͨमਖ਼
ϨϏϡʔ1 എܠ͍ͬͺ͍ʹը૾Λஔͯ͠Δ͚Ͳɺ͜Εͩ ͱจࣈ͕ݟ͑ͮΒ͍Ͱ͢ɻจࣈͷ෦ʹഎܠ৭Λ Ճ͑Δ͜ͱͰ͖·͔͢ʁ ϨϏϡΞʔ จࣈͱഎܠͷΧϥʔίϯτϥετ
ςʔϚΧελϚΠβʔʹഎܠը૾ͱίϯςϯπΤϦΞͷ എܠͷಁ໌Λม͑ΒΕΔػೳΛՃ จࣈͱഎܠͷΧϥʔίϯτϥετ मਖ਼༰
ϘλϯͷϑΥʔΧε࣌ʹ৭͕స͢ΔΑ͏ʹ ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ2 ϘλϯͷΧϥʔίϯτϥετ
ͯ͢ͷϘλϯͰϑΥʔΧε࣌ͷ৭Λస ɹ मਖ਼༰ ௨ৗ࣌ ϗόʔ࣌ ϑΥʔΧε࣌ ϘλϯͷΧϥʔίϯτϥετ
ΩʔϘʔυૢ࡞ςετ TabΩʔͰϑΥʔΧεͰ͖Δ֤Ϙλϯͷ ॱ൪Λௐઅ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ3
TabΩʔૢ࡞ ɹ मਖ਼༰ tabΩʔ(safaritab+option)ͰϘλϯΛϖʔδ্ Ͱஔ͞Ε͍ͯΔॱ൪௨ΓʹϑΥʔΧεͰ͖ΔΑ ͏ʹमਖ਼ɻ όοΫάάϥϯυϞʔυ ϑΥτϑϨʔϜϞʔυ
എܠͷը૾ؚΊͯஔ͞Ε͍ͯΔͯ͢ ͷը૾ʹaltଐੑΛՃ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ4 εΫϦʔϯϦʔμʔ
ɹ मਖ਼༰ εΫϦʔϯϦʔμʔ എܠʹஔ͍ͯ͠ΔΪϟϥϦʔը૾ʹରͯ͠ altଐੑΛՃʢϑΝΠϧ໊͕ʹೖΔΑ͏ʹʣ <ul> <li><img src="http://site.dev/wp-content/uploads/bg-1.jpg" alt="bg-1"></li> <li><img
src="http://site.dev/wp-content/uploads/bg-2.jpg" alt="bg-2"></li> <li><img src="http://site.dev/wp-content/uploads/bg-3.jpg" alt="bg-3"></li> </ul> <ul> <li><img src="http://site.dev/wp-content/uploads/bg-1.jpg"></li> <li><img src="http://site.dev/wp-content/uploads/bg-2.jpg"></li> <li><img src="http://site.dev/wp-content/uploads/bg-3.jpg"></li> </ul>
ͯ͢ͷϘλϯʹରͯ͠ʮscreen-reader-text ʯϥϕϧΛ Ճ͍ͯͩ͘͠͞ɻ bootstrapͷάϥϑΟοΫΞΠίϯΛͬͯΔϘλϯʹରͯ͠ ʮaria-hidden=trueʯͷଐੑΛՃ͍ͯͩ͘͠͞ɻ ϨϏϡΞʔ ϨϏϡʔ5 εΫϦʔϯϦʔμʔ
ɹ मਖ਼༰ εΫϦʔϯϦʔμʔ <span class="glyphicon glyphicon-chevron-right"></span> ΞΠίϯͷΈͷϘλϯεΫϦʔϯϦʔμʔͰಡ Έ্͛ΛεΩοϓɻ ΘΓʹ"screen-reader-text"ΫϥεͷspanཁૉΛ Ճ͠ɺͪ͜Βͷ༰͕ಡΈ্͛ΒΕΔΑ͏ʹ͢Δɻ
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> <span class="screen-reader-text">Switch Mode</span>
• ݕࡧϑΥʔϜͷSubmitϘλϯΛද͍ࣔͤͯͩ͘͞͞ɻ • ίϝϯτϑΥʔϜͷPost CommentϘλϯ͕খ͗͢͞ ΔͷͰαΠζΛेʹͱ͍ͬͯͩ͘͞ɻ ϨϏϡΞʔ ϨϏϡʔ6 ϑΥʔϜͷϘλϯ
ɹ मਖ਼༰ εΫϦʔϯϦʔμʔ • ݕࡧϑΥʔϜͷݕࡧϘλϯ͕ඇදࣔʹͳ͍ͬͯͨͷͰɺදࣔͤͨ͞ɻ • ίϝϯτߘͷϘλϯͷେ͖͕͞খ͔ͬͨͨ͞ΊɺेͳαΠζΛऔͬ ͨɻ
ଞʹϨϏϡʔͱमਖ਼ΛॏͶͯɾɾɾ
ΊͰͨ͘ొ͞Ε·ͨ͠ʂ Ξοϓϩʔυ͔Βొ·ͰԆ͙Β͍͔͔Γ·ͨ͠ɻ https://ja.wordpress.org/themes/bg-photo-frame/
ΞΫηγϏϦςΟରԠͷςʔϚΛ ࡞ͯ͠ྑ͔ͬͨ͜ͱ
ྑ͔ͬͨ͜ͱ • ਓʹ༏͍͠ςʔϚ͕࡞Ε·ͨ͠ɻ • ͜͜ʹొஃͰ͖Δωλ͕Ͱ͖·ͨ͠ • ԿΑΓΞΫηγϏϦςΟʹ͍͍ͭͯ͢͝ษڧʹ ͳΓ·ͨ͠ɻ
ଞʹྑ͔ͬͨ͜ͱ ݱࡏςʔϚσΟϨΫτϦʹ4000ݸ͙Β͍ͷςʔϚ ͕ొதɻͦͷ͏ͪΞΫηγϏϦςΟରԠͷςʔϚ 100ݸͪΐͬͱɻඇৗʹগͳ͍Ͱ͢ɻ ࡞ͬͨςʔϚཱ͕ͭνϟϯεʂ ࣮ྗΛΞϐʔϧͰ͖Δνϟϯεʂ https://ja.wordpress.org/themes/tags/accessibility-ready/ https://ja.wordpress.org/themes/browse/new/
ϨϏϡʔͷܦҢ͜͜ͰݟΕ·͢ɻ https://themes.trac.wordpress.org/ticket/28202
ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞Δ࣌ʹ ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ