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
81
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
58
第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
120
フルスクラッチのテーマで サイトを作る楽しみ
excdinc
1
8.6k
Other Decks in Design
See All in Design
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
株式会社バクタム 会社説明資料
bactum
0
360
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
400
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
110
decksh object reference
ajstarks
2
1.3k
root COMPANY DECK / We are hiring!
root_recruit
1
24k
minpaku-community-scrum-patterns
norinity1103
1
440
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
190
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
460
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
160
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Agile that works and the tools we love
rasmusluckow
331
21k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
232
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Typedesign – Prime Four
hannesfritz
42
2.8k
Mobile First: as difficult as doing things right
swwweet
224
10k
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
ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞Δ࣌ʹ ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ