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
270
VR and Motion Capture
excdinc
0
56
第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.5k
Other Decks in Design
See All in Design
UXデザインはなぜ定着しないのか?
designstudiopartners
0
810
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
harutaka Vision Deck
zenkigenforrecruit
0
170
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
480
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
280
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
7 Core Values of Round-L
wired888
0
780
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.7k
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
100
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Bash Introduction
62gerente
613
210k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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
ΞΫηγϏϦςΟରԠͷςʔϚΛ࡞Δ࣌ʹ ͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ