AccSell Meetupã«è¡ã£ã¦VoiceOverã®ä½¿ãæ¹ãæãã¦ããã£ã
ã¯ããã«
2019/01/19 (Sat) ã« AccSell Meetup #14 ã«è¡ã£ã¦ãiOS ã®ã¹ã¯ãªã¼ã³ãªã¼ãã¼ã§ãã VoiceOver ã®ä½¿ãæ¹ã«ã¤ãã¦æãã¦ããã£ã¦ããã
äºã¶ææ以ä¸åã®ãã¨ã ãã©ãæãåºããªãããã°ã¨ãã¦æ®ãã¦ãããã¨æãã
ã¤ãã³ãã®æ¦è¦ã¯ãã¡ãã®ãã¼ã¸ã«è¼ã£ã¦ããã
AccSell Meetup 014『おしえて!iOS VoiceOver 2019新春ver.』|お知らせ|AccSell
ã¤ãã³ãã«åå ããã¨ãã®åçãä¸æãåããªãã£ããã¨ãæãã¾ãããã©ãã©ããªæãã ã£ãã㯠AccSell ã®ãã¼ã ãã¼ã¸ã PodCast ã«ã¦èªããã¦ããã
ãã¼ãã¢ããä¸ã¯é³å£°ããåå¹ã¸ã®å¤æã¢ããªã§ããUDãã¼ã¯ãæ´»èºããããã¯ããããªã¤ãã³ãã§ä½¿ã£ã¦ã»ãããªã¨æã£ãã udtalk.jp
ã©ãããã¢ããã¼ã·ã§ã³ã§åå ããã
æ®æ®µæ¥åã§ã¢ã¯ã»ã·ããªãã£ã«ã¤ãã¦åãçµãã¨ãã¯ãimg è¦ç´ ã® alt ãé©åã«è¨å®ããã ã£ãããé©åã«è¦åºãè¦ç´ ã使ã£ã¦ãã¼ã¸ãæ§é åããããã©ã¡ããã¨ãã㨠SEO æ¹é¢ãæèããã³ã¼ãã£ã³ã°ããã¦ããã
a11y ã®æèã§ã³ã¼ãã£ã³ã°ãã¦ããå®éã«ä½¿ããã¦ããã¨ãããè¦ããã¨ããªãã®ãåé¡ã ãªã¨æã£ã¦ãã¦ãå ¨ç²ã§ãããªãã a11y ã®åèæ´»åãè¡ã£ã¦ããä¸æ ¹ãããè¬å¸«ã¨ãã¦ã話ããããæ©ä¼ãããã¨ã®ãã¨ã§åå ããã
ã¤ãã³ãã¬ã
å½æ¥ã¯ååå¾åã§2ã¤ã®ã»ãã·ã§ã³ãè¡ãããã
以ä¸ãå½æ¥ã®éãªã¡ã¢ã
ã¤ã³ãããã¯ã·ã§ã³ w/ æ¤æ¨ãã
ãã·ã¼ã³ãªã¼ããã«?
- Machine = UserAgent
- User Agent Accessibility Guidelines (UAAG) 2.0
- HTML ã解éããããããããã¤ã¹ã Machine ã¨å®ç¾©ã§ãã..?
WAI-ARIA
- html5 ã®ãã¼ã¯ã¢ããã ãã§ã¯è¡¨ç¾ã§ããªããã®ã表ç¾ã§ããããã«ä»æ§åããã
- 表ç¾ã§ããªãhtmlã®ä¾
- ã¿ãã ul li ã§å®è£
role
å±æ§ãã¤ãããã¨ã§ãªã¹ãã§ã¯ãªãã¿ãã§ãããã¨ããã·ã³ã«ä¼ãããã¨ãã§ããaria-expand="true"
ã§ãªã¹ããéãã¦ãããéãã¦ãããã表ç¾ã§ãã
- 表ç¾ã§ããªãhtmlã®ä¾
ã¯ã¼ã¯ã·ã§ãã w/ ä¸æ ¹ãã
VoiceOver
- iOS 㨠macOS ã®ãVoiceOver ã¯æä½æ§ãã¾ã£ããéã
- ä¸æ©ééãã¨å¸°ãã¬äººã¨ãªã..!
- å
¨ç²ã®äººã¯ã¹ã¯ãªã¼ã³ã«ã¼ãã³ããã使ãï¼ã»ã¨ãã©ï¼
- ã¹ãããè¦ãè¦ãããªãããã«ãããã
- ã·ã³ã°ã«ã¿ããã§é¸æ(Activate)
- ããã«ã¿ããã§é¸æä¸ã®è¦ç´ ãã¯ãªãã¯
- ããã«ã¿ããã¯é¸æä¸ã®è¦ç´ ã®ä¸ãããã«ã¿ããããå¿ è¦ã¯ãªã
- activate ã«ãã¦ããè¦ç´ ããããªããç»é¢ä¸ã®ã©ããããã«ã¿ãããã¦ã決å®ã§ãã
- 両æã使ãã¨æä½æ§ããããï¼ã¹ããªããã¿ããï¼
- å·¦æã§ããè¦ç´ ãactivateããã¾ã¾ãããããæãé¢ããªã
- å³æã§ç»é¢ã®ã©ãã§ãããã®ã§ã·ã³ã°ã«ã¿ãããã
- ããã§ããã«ã¿ãããããã¨ã¨åãåä½ã«ãªã
- ãããã¦ã¿ãã¨ãããã«æä½æ§ããã
- ããã«ã¿ãããã¦é·æ¼ã
- ãã©ãã°ã¢ã³ãããããã®ãããªãµãã¾ãããã
- ãã«ã
- 4æ¬æãããã«ã¿ããã§ãã«ãã¢ã¼ã
- 2æ¬æã®ã¹ã¯ã©ãã§ãã«ãçµäº
ã¹ã¯ã©ã
: 2æ¬æãã¹ã¯ãªã¼ã³ä¸ã§ãããããããã
- ãã¿ã³ã«ã©ãã«ãä»ãã¦ããªããã®ã«ãèªåã§ã©ãã«ãã¤ãããã¨ãã§ãã
- ã課é¡ãVoiceOver ã§å¤©æ°ã¢ããªãæ¢ãã¦ãã ãã
- 3/6ãã¼ã¸ã® official ãã©ã«ãã®2ãã¼ã¸ç®ã«ããã®ã§é£ããã£ã
- VoiceOver ã«æ £ãã¦ãã人ã§ããã©ãã«ããã®ãããããªãã¢ããªãæ¢ãã®ã¯å¤§å¤
- æ¤ç´¢ãå©ç¨ãã¦è¦ã¤ãããã¨ãã§ããã..?
- VoiceOver ã使ãã¨ãã¯ç»é¢ã®åããããã¯ãã¦ããã¨æ¥½
- ã課é¡ããä»æ¥ã¯ AccSell Meetup ã«æ¥ã¦ãã¾ããã㨠VoiceOver ã使ã£ã¦å
¥åãã¦ã¿ã¾ãããã
- æåãæ¥æ¬èªå ¥åãã§ããªãã¦éæ¹ã«ãããï¼æ¥æ¬èªãã¼ãåå ¥åãã¼ãã¼ããoffã«ãã¦ããããï¼
- ãã®ãã¼ã¸ãåèã«ãªã£ã
ãã¼ã¿ã¼ã¸ã§ã¹ãã£ã¼
- ãããç¥ããªã㨠VoiceOver ã7å²ãããæããã¦ãã..?
- ä¸æ¬æã®ä¸ä¸ããªã㯠ã®ãµãã¾ãããã¼ã¿ã¼ã§è¨å®ãã
- ããã¹ããèªãã¨ãã®ä½¿ããæ¹ -ãè¡ãåä½ã§ç§»åãã¦ããåèªãåä½ã§æ¢ã
- ã³ãã¼ï¼ãã¼ã¹ã(ããã¹ãã®é¸æ)
- ãã¼ã¿ã¼ã®ç·¨éã使ã -ãã³ãã¢ã¦ãã»ãã³ãã¤ã³ã§é¸æç¯å²ãæ¡ç¸®ãã
- ãã¼ã¿ã¼ã®ããã¹ãé¸æã使ã
- ã³ããã®æä½ã¯ãã¡ããã¡ã大å¤..
- å
¥åã¢ã¼ã
- ã¿ããã¢ã¼ããæ®æ®µä½¿ã£ã¦ããã£ããã
VoiceOver 㧠Web é²è¦§
- 2æ¬æã§ã·ã³ã°ã«ã¿ããã§ãã¼ã¸èªã¿ä¸ãã»ä¸æåæ¢ããã°ã«ãã
- ãã¼ã¿ã¼ãæ´»ç¨ãã¦èªã¿é£ã°ãã¦ãã
- ARIAã©ã³ããã¼ã¯?
ã¢ã¯ã»ã·ããªãã£ãã§ãã¯
- ä¼ããã¹ãæ
å ±ã¯ éä¸è¶³ãªã é³å£°åãããã
- æ å ±éå¤ã«ãªã£ã¦ããªãã?ãã¨ããè¦ç¹ãå¿ è¦
- 1æ¬æä¸ä¸ããªãã¯ã®å種æä½ã§é©åãªããã²ã¼ã·ã§ã³ãã§ããã
- è¦åºããã©ã³ããã¼ã¯ããã©ã¼ã ã³ã³ããã¼ã«ãã©ãã«ãªã©ãè¨å®ããã¦ããã..?
- img è¦ç´ ã® longdesc å±æ§ã¯htmlã®ä»æ§ã«ã¯è¼ã£ã¦ãããã対å¿ãã¦ããã©ã¦ã¶ã対å¿ã§ãã¦ããªã
- ä»æ§ãæºãããã¨ãã¦ãã¢ã¯ã»ã·ãã«ã§ã¯ãªã..
ã¯ã¼ã¯ã·ã§ããã®ãããã«
- æã¯è¦è¦é害è
ã®ä¸ã§ã¯æºå¸¯ã¨ããã°ãããããã³ä¸æã ã£ã
- æè¿ã¯ iPhone ãé¸æã VoiceOver ã使ã人ãå¢ãã¦ãã
- VoiceOver 人工ã¯å¢ãã¦ãã¦ãã
- VoiceOver ã§æ£ããåä½ããã¨ãã¹ã¤ããã¤ã³ã¿ã¼ãã§ã¼ã¹ï¼æãåããªããªã©ã®é害ãæã¤äººã使ãï¼ã§ãæ£ããåä½ãã
æ°ã¥ã
- ã¤ãã³ãã«æ¥ã¦æã£ãã®ããè¦è¦ã«é害ã®ããæ¹ãåå ããã¦ãããã¨
- å ¨ç²ããã¼ãã¸ã§ã³
- ãã¼ãã¸ã§ã³ã¨ããã®ãä»ã¾ã§æèã§ãã¦ããªãã£ã
- ãã¤ã¬ä¼æ©ã®ã¨ããªã©ãæ¤æ¨ãããä»ãæ·»ã£ã¦æ¡å ããã¦ããã®ãå°è±¡ã«æ®ã£ã¦ã
- ãããªãã¯ãªãããã¯ããéçºãã¦ããã®ã§ããã°ã常㫠a11y ãèæ
®ãã¦ä½ãå¿
è¦ããã
- Webããã¤ãã£ãã¢ããªã©ã¡ããå¿ è¦
- ã©ããªã«ãã¤ããã©ã¼ãã³ã¹ãªãµã¤ããä½ã£ã¦ããä¸é¨ã®äººã使ããªãã®ã§ã¯å¯ç¨æ§ãä½ã
ãããã«
ãã®ã¤ãã³ãã«åå ã㦠a11y ã«å¯¾ããæèãçµæ§å¤ãã£ãã
ç»åã« alt ãè¨å®ããã¦ããªããã¨ãã©ãã ãæ·±å»ãªãã¨ãªã®ããç解ã§ããã
a11y ã¨ããªã¢ããªã¼ã¯å²ã¨ä¼¼ã¦ããã¨æã£ãã
ä¾ãã°ãã©ããªã«ãã¬ã¤ã§ãªã·ã£ã¬ãªå»ºç¯ç©ã§ãã£ã¦ã段差ã ããã§ã¯å©ç¨ãã«ãããã¿ãããªã
ã¾ã ã¢ã¯ã»ã·ãã«ãªWebãä½ãåããªãã¨åãã£ãã®ã§ãå¼ãç¶ãåå¼·ãã¦ããããã

- ä½è : Heydon Pickering
- åºç社/ã¡ã¼ã«ã¼: ãã¼ã³ãã¸ã¿ã«
- çºå£²æ¥: 2018/03/05
- ã¡ãã£ã¢: Kindleç
- ãã®ååãå«ãããã°ãè¦ã
ããã«è¡ãäºå®ãªã®ã§ã¾ãã¬ããæ¸ãããã
ES2018ã§å ¥ã£ãUnicode property escapes in regular expressionsã調ã¹ã¦ã¿ã
ã¯ããã«
- ã¯ããã«
- 使ãæ¹
- æ¸å¼ã«ã¤ãã¦
- UnicodePropertyName
- General_Category
- Script, Script_Extensions
- Binary Unicode property
- UnicodePropertyName
- 調ã¹æ¹
- UnicodePropertyValue ã«å±ããæåä¸è¦§ã調ã¹ã
- ããæåã«æå®ããã¦ããå±æ§ã調ã¹ã
- ãããã«
- åèã«ããè¨äº
ES2018ã§æ£è¦è¡¨ç¾ã¾ããã®æ©è½ã«ããã¤ãã®ä¾¿å©ãªè¡¨ç¾ãå ¥ã£ãã
ä¾ãã°ãããªæãã
ããããChrome*1 ã®ã³ã³ã½ã¼ã«ã§å
¥åãã¦è©¦ããã¨ãã§ããã
// `ã²ãããª` ã®ã¿ã®æååãªãtrue /^\p{sc=Hiragana}+$/u.test('ããããã') // true // `ã«ã¿ã«ã` ã®ã¿ã®æååãªãtrue /^\p{sc=Katakana}+$/u.test('ã¢ã¤ã¦ã¨ãªãã') // true // `æ¼¢å` ã®ã¿ã®æååãªãtrue /^\p{sc=Han}+$/u.test('ð ®·é家') // true // `æ¼¢å` 以å¤ãå«ã¾ãã¦ããã®ã§false /^\p{sc=Han}+$/u.test('ã»ã¼') // false // `æ¼¢åã£ã½ãæå` ã®ã¿ã®æååãªãtrue /^\p{scx=Han}+$/u.test('å¹³ææåã»ã¼') // trueç¶ããèªã
webpack+babel-loader+power-assert+jsdomã§ããã³ãã¨ã³ãéçºç°å¢ãä½ã
ãã®è¨äºã¯ JavaScript Advent Calendar 2015 10æ¥ç®ã®è¨äºã§ãã
å»å¹´ã¯ä¸»ã« gulp ã«ãã©ã¼ã«ã¹ããå 容ã§ããããä»åã¯JSã®ãã«ãã¨ãã¹ãã«ãã©ã¼ã«ã¹ããå ¥éè¨äºã§ãã
- ãããã¨
- ES2015ã§æ¸ããã³ã¼ããWebpackã§ãã«ããã
- babel@6ç³»ã使ã
- Mocha + power-assert + jsdom ã§ãã¹ããæ¸ã
- ES2015ã§æ¸ããã³ã¼ããWebpackã§ãã«ããã
- ãããªããã¨
- gulpã¾ãã
- React.js
- CSSãã«ãã¾ãã
æçµçãªã³ã¼ãã¯ãã¡ãã«ä¸ãã¦ããã¾ãã(ãããç°¡ç´ ãªåºæ¥ã§ã)ã
GitHub - sskyu/webpack-power-assert-jsdom-skeleton
ã¯ããã«
ä»å¹´ã¯React.jsãJSerã®ä¸ã§å®çããæãããã¾ããã
Fluxã®èãæ¹ãæè¯ãããReduxãFluxç³»ãã¬ã¼ã ã¯ã¼ã¯ã§ããã¡ã¯ãã«ãªããããªé°å²æ°ãåºãã¤ã¤ãReactiveæ¹é¢ããã¯Cycle.jsãç»å ´ãã¦ããã³ãã¨ã³ãã®æè¡ã¯æµããæ©ãã§ããã
ä¸æ¹ã§ãã«ãå¨ãã¯å»å¹´ããã»ã¨ãã©å¤ãã£ã¦ãã¾ããã
ES2015ã®ã·ã³ã¿ãã¯ã¹ã使ãããå ´å㯠babel.js ã§ãã©ã³ã¹ãã¤ã«ããã¦ããã©ã¦ã¶åãã®ãã«ãã« browserify ã¾ã㯠webpack ã使ãã¾ãã
Browserify vs Webpack
ããããã®ç¹å¾´ãåæãã¦ã¿ãã¨
- Browserify
- ã³ã¢ã¯CommonJSå½¢å¼ã®ã¢ã¸ã¥ã¼ã«ããã©ã¦ã¶ã§ãæ±ããããã«ãããã¨
- åä¸ã®ãã¡ã¤ã«ãåºåãã
- 工夫ããã°è¤æ°ãã¡ã¤ã«ã®åºåãå¯è½
- ä»ã®æ©è½ã¯ãã©ã°ã¤ã³ã¨ãã¦æä¾ããã
- e.g. babelify, coffeeify, etc...
- Webpack
- ããã©ã«ãã§å¤æ©è½
- CommonJS, AMDå½¢å¼ã®ã¢ã¸ã¥ã¼ã«ããã©ã¦ã¶ã§ãæ±ããããã«ãã
- CSSã®ãã«ã
- è¤æ°ãã¡ã¤ã«ã®åºåãããã©ã«ãã§ãµãã¼ãããã¦ãã
- loaderãå ãããã¨ã§æ§ã ãªæ©è½ãå ãããã¨ãå¯è½
- JSãã¡ã¤ã«ããCSSãImageãèªã¿è¾¼ããã¨ãå¯è½
- ããã©ã«ãã§å¤æ©è½
å¹³ããè¨ãã°ãBrowserifyã¯ã·ã³ãã«ãªæ©è½ãæä¾ãã¦ãã¦ãWebpackã¯ããã³ãã§å¿ è¦ãããªæ©è½ãããããæä¾ãã¦ãã¾ãã
Webpackã®æ¹ãå¤æ©è½ã ããè¯ãããã«è¦ãã¾ããã沢山ã®æ©è½ãå¯çµåãã¦ãããããã°ãçã¾ãããããªã¹ã¯ãããã¾ãã
Browserifyã§Webpackã¨åããã¨ããããã¨ããã¨æ¸ãæ¹ã工夫ããªãã¦ã¯ãªããæåã¯é£ãããããããªãã§ãããé·æçã«è¦ãã¨æ©è½ãã·ã³ãã«ã§æ¡å¼µæ§ã®ããBrowserifyã®æ¹ãã¡ã³ããã³ã¹ããããããããã¾ããã
Webpackãéé£ãã¦ãã訳ã§ã¯ãªãã®ã§ããã®è¨äºã§ã¯Webpackãæ¡ç¨ããã±ã¼ã¹ã§ç´¹ä»ãã¦ããã¾ãã
ç¶ããèªãYAPC::Asia Tokyo 2015ã«è¡ã£ã¦ãã
8/21, 8/22ã¨YAPC::Asia Tokyo 2015@ããã°ãµã¤ãã«è¡ã£ã¦ããã
ããã°ãæ¸ãã¾ã§ãã¤ããã·ã¼ã
ã¯ããã«
èªåãè¦ã¦ãããã¼ã¯ã ãæ¸ãã¾ãã
èããªãã£ããã¼ã¯ã¯togetterãè¦ãã¨ã©ã¤ãæããã¤ã¤èªããã®ã§
å¾ã»ã©èªãã§ã¿ãã
ES6æ§æã® ... (Spread operator)㨠{ prop } (shorthand property names)ã«ã¤ãã¦
æ¨æ¥twitterè¦ã¦ãããããªã®ãæµãã¦ãã¾ãã¦
Concatenating arrays in ES6:
arr = [...a, ...b, ...c]; // ES6
arr = a.concat(b, c); // ES5
http://t.co/4scyTyhmIo
— Axel Rauschmayer (@rauschma) 2015, 6æ 3
ä½ã ãã®æ¸ãæ¹ãã¨æ°ã«ãªã£ãã®ã§èª¿ã¹ã¦ã¿ãã
ç¶ããèªã