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
78
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
250
VR and Motion Capture
excdinc
0
53
第65回 WordBench大阪「WordPressコミュニティに3年間参加して」
excdinc
0
150
WordBench Osaka #64 テーマもくもく会
excdinc
1
140
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.4k
Other Decks in Design
See All in Design
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
UXデザインはなぜ定着しないのか?
designstudiopartners
0
570
マルチプロダクトにおけるデザイナーの挑戦-デザイン初め新年会2025
u_ri_ta
2
190
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
340
Crisp Code inc. ブランドガイドライン
so_kotani
1
180
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
210
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.2k
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
270
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
860
250131_product meetup
motokoishida
0
190
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
290
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
440
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Documentation Writing (for coders)
carmenintech
71
4.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
GraphQLとの向き合い方2022年版
quramy
46
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building Adaptive Systems
keathley
41
2.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
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
ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞Δ࣌ʹ ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ