2024.10.10 アクセシビリティLT会 #2 with Mix Leap Study ã§ã®ç™ºè¡¨ã‚¹ãƒ©ã‚¤ãƒ‰ã§ã™ã€‚
ã¿ã‚“ãªã«çŸ¥ã£ã¦æ¬²ã—ㄠ視覚éŽæ•ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティ
2024.10.10 アクセシビリティLT会 #2 with Mix Leap Study ã§ã®ç™ºè¡¨ã‚¹ãƒ©ã‚¤ãƒ‰ã§ã™ã€‚
aria-labelã¨aria-labelledbyを併用ã™ã‚‹å ´åˆã¨ã¯
アクセシビリティを考慮ã—ãŸãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã‚’ã—ãŸçµŒé¨“ãŒã‚ã‚‹æ–¹ã¯ã€aria-labelã‚„aria-labelledbyã«ã¤ã„ã¦ã”å˜ã˜ã§ã—ょã†ã€‚ã“れらã¯ã€è¦ç´ ã«ãƒ©ãƒ™ãƒ«ä»˜ã‘ã™ã‚‹ãŸã‚ã®WAI-ARIAプãƒãƒ‘ティã§ã™ã€‚多ãã®å ´åˆã€è¦ç´ ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ–ルãªåå‰ (accessible name) を決ã‚ã‚‹ãŸã‚ã«ä½¿ã‚ã‚Œã¾ã™ã€‚ aria-labelã¯ãƒ©ãƒ™ãƒ«ã‚’直接文å—列ã¨ã—ã¦æŒ‡å®šã™ã‚‹ãƒ—ãƒãƒ‘ティã§ã€aria-labelledbyã¯IDを通ã˜ã¦ä»–ã®è¦ç´ をラベルã¨ã—ã¦æŒ‡å®šã™ã‚‹ãƒ—ãƒãƒ‘ティã§ã™ã€‚ãã®ä½¿ã„分ã‘ã«ã¤ã„ã¦ã¯ã€ä»•æ§˜æ›¸[1]ã§ä»¥ä¸‹ã®ã‚ˆã†ã«èª¬æ˜Žã•ã‚Œã¦ã„ã¾ã™ã€‚ã¤ã¾ã‚Šã€å¯èƒ½ãªå ´åˆã¯aria-labelledbyã«å¯„ã›ã‚‹ã¹ãã ã¨ã„ã†ã“ã¨ã§ã™ã€‚ If the label text is available in the DOM (i.e. typically visible text content), authors SHOU
SPA ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを強化ã™ã‚‹ Nuxt ã® Route Announcer 機能
SPA ã«ãŠã‘るアクセシビリティ課題ã«ã¤ã„㦠シングルページアプリケーション（SPA）ã¯ã€1ã¤ã®HTMLファイルã«å¯¾ã—ã¦JavaScriptã¨Web APIを活用ã—ã¦ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ç´ æ—©ã„ページ切り替ãˆã®ä½“験をæä¾›ã™ã‚‹ã‚¦ã‚§ãƒ–アプリケーションã®ä¸€å½¢æ…‹ã§ã™ã€‚ ã—ã‹ã—ã€SPAã«ã¯ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティã®èª²é¡ŒãŒã‚ã‚Šã¾ã™ã€‚例ãˆã°ã€è¦–覚障害ã®ã‚るユーザーãŒä½¿ã†ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã¨ã„ã†æ”¯æ´æŠ€è¡“ã§ã¯ãƒšãƒ¼ã‚¸ãŒé·ç§»ã—ãŸã“ã¨ã‚’èªè˜ã§ããªã„ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ã“ã‚Œã¯ã€JavaScriptを使ã£ã¦ãƒšãƒ¼ã‚¸ã‚’切り替ãˆã‚‹éš›ã«ç™ºç”Ÿã™ã‚‹å•é¡Œã§ã™ã€‚ 具体的ã«ã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒã‚るページã‹ã‚‰åˆ¥ã®ãƒšãƒ¼ã‚¸ã¸ç§»å‹•ã—ãŸéš›ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ãŒæ–°ã—ã„ページã«ç§»å‹•ã—ãŸã“ã¨ã‚’èªè˜ã—ãªã„ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ ã“ã®å•é¡Œã‚’解決ã™ã‚‹ãŸã‚ã«ã€JavaScriptã¨WAI-ARIAã¨ã„ã†æŠ€è¡“を使ã£ã¦ã€Route Announcerã¨ã„ã†æ–¹æ³•ãŒã‚ã‚Šã¾ã™ã€‚ã“れを活用ã™ã‚‹ã“ã¨ã§ãƒšãƒ¼
ウェブ製作者ã®ãŸã‚ã®ã‚¦ã‚§ãƒ–アクセシビリティãƒãƒ³ãƒ‰ãƒ–ック｜ã¾ã—ã˜ã‚æ ªå¼ä¼šç¤¾
本ãƒãƒ³ãƒ‰ãƒ–ックã¯ã€ ã™ã¹ã¦ã®åˆ©ç”¨è€…ãŒã‚¦ã‚§ãƒ–サイトを利用ã§ãるよã†ã«ã™ã‚‹ãŸã‚ã«ã€é–‹ç™ºè€…ã®è¦–点ã‹ã‚‰ WCAG 2.0（JIS X 8341-3:2016）ã®é”æˆåŸºæº–ã‚’ 「概è¦ã€å®Ÿè·µã™ã¹ãã“ã¨ã€é‹ç”¨è€…ã¸ã®æ³¨æ„ã€é–‹ç™ºè€…ã¸ã®æ³¨æ„ã€ã«åˆ†ã‘ã¦ã€è¦ç‚¹ã‚’シンプルã«ã¾ã¨ã‚ã¦ã„ã¾ã™ã€‚ アクセシビリティã®æœ€åˆã®ä¸€æ©ã¨ã—㦠ウェブアクセシビリティをå‘上ã•ã›ã‚‹ãŸã‚ã®ç¬¬ä¸€æ©ã¨ã—ã¦ã€ä»¥ä¸‹ã®2点を確èªã™ã‚‹ã“ã¨ã‚’ãŠå‹§ã‚ã—ã¾ã™ã€‚ ã‚ーボードã®ã¿ã§ã‚µã‚¤ãƒˆã‚’æ“作ã§ãã‚‹ã‹ï¼Ÿ サイト内をタブã‚ーã§ç§»å‹•ã§ãã€é‡è¦ãªãƒœã‚¿ãƒ³ã‚„リンクã«ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ãŒå½“ãŸã‚‹ã‹ã‚’確èªã—ã¾ã—ょã†ã€‚ スクリーンリーダーã§æ£ã—ãèªã¿ä¸Šã’られるã‹ï¼Ÿ NVDAã‚„VoiceOverãªã©ã®ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã‚’使用ã—ã¦ã€ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ãŒè‡ªç„¶ã«èªã¿ä¸Šã’られã€å¿…è¦ãªæƒ…å ±ãŒæ¼ã‚Œã¦ã„ãªã„ã‹ã‚’確èªã—ã¦ãã ã•ã„。 ã¾ãšã¯ã“れらã®ç‚¹ã‚’確èªã—ã€ãã®å¾Œã®ã‚¹ãƒ†ãƒƒãƒ—ã¨ã—ã¦ã€Œé‹ç”¨æ™‚ã®ã‚¦ã‚§ãƒ–アクセシビリティã®
axe-core/playwrightã¨markuplintã‚’å°Žå…¥ã—アクセシビリティã®è‡ªå‹•ãƒ†ã‚¹ãƒˆã‚’ã§ãるよã†ã«ã—ãŸ
Web アクセシビリティã«èˆˆå‘³ãŒã‚ã£ãŸã®ã§ã€ã¾ãšæ©Ÿæ¢°çš„ãªãƒã‚§ãƒƒã‚¯ãƒ„ールã‹ã‚‰å¦ã‚“ã§çŸ¥è˜ã‚’増やãã†ã¨ã„ã†ã“ã¨ã§ã“ã®ã‚µã‚¤ãƒˆã« @axe-core/playwright 㨠markuplint ã‚’å°Žå…¥ã—ã¦ã¿ã¾ã—ãŸã€‚ @axe-core/playwright ã®ã‚»ãƒƒãƒˆã‚¢ãƒƒãƒ— 既㫠Playwright ãŒå°Žå…¥ã•ã‚Œã¦ã„る状æ³ã‚’想定ã—進ã‚ã¾ã™ã€‚ã¾ãš@axe-core/playwright をインストールã—ã¾ã™ã€‚ pnpm add -D @axe-core/playwright ã“ã®ã‚µã‚¤ãƒˆã®å ´åˆ VRT ã¨ã—㦠Playwright ã‚’å‹•ã‹ã—ã¦ã„るテストãŒã‚ã‚‹ã®ã§(éŽåŽ»è³‡æ–™)ã€ãã®ãƒ—ãƒã‚»ã‚¹ã«åŒå±…ã™ã‚‹å½¢ã§ axe を実行ã™ã‚‹ã“ã¨ã«ã—ã¾ã—ãŸã€‚ e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
å˜ä½“テストã§ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã‚’シミュレートã™ã‚‹ Virtual Screen Reader
å˜ä½“テストã§ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã‚’シミュレートã™ã‚‹ Virtual Screen Reader 2024.03.16 Virtual Screen Reader ã¯å˜ä½“テストã®ãŸã‚ã«ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ã‚’シミュレートã™ã‚‹ãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚ã“ã®ãƒ©ã‚¤ãƒ–ラリを使ã†ã“ã¨ã§ãƒžã‚¦ã‚¹ã‚„ã‚ボードã®æ“作をテストã™ã‚‹ã‚ˆã†ã«ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã«ã‚ˆã‚ŠæœŸå¾…ã™ã‚‹èªã¿ä¸Šã’ãŒè¡Œã‚れるã‹ã©ã†ã‹ã‚’テストã§ãã¾ã™ã€‚ãªãŠã€Virtual Screen Reader ã¯ã‚ãã¾ã§ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã®æŒ™å‹•ã‚’模倣ã—ãŸã‚‚ã®ã§ã‚ã‚Šã€ç¾å®Ÿã§ä½¿ã‚ã‚Œã¦ã„るスクリーンリーダーã«ã‚ˆã‚‹ãƒ†ã‚¹ãƒˆã‚’代替ã™ã‚‹ã‚‚ã®ã§ã¯ãªã„ã“ã¨ã«æ³¨æ„ã—ã¦ãã ã•ã„。
アクセシビリティã®è¬¬èª¬
覆㙠アクセシビリティã¯ä¸€éƒ¨ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ã—ã‹å½±éŸ¿ã‚’与ãˆãªã„ 影響ãŒå°ã•ã„ã‚ã‘ã§ã¯ãªã„。世界ã®äººå£ã®ç´„15%ã€æŽ¨å®š10億人ãŒéšœå®³ã‚’æŒã£ã¦æš®ã‚‰ã—ã¦ã„ã¾ã™ã€‚ 障害者ã¯ä¸–界最大ã®ãƒžã‚¤ãƒŽãƒªãƒ†ã‚£ã§ã™ã€‚ 障害者ã®æ•°ã¯åŠ‡çš„ã«å¢—åŠ ã—ã¦ã„ã¾ã™ã€‚ アクセシビリティã¯ä¸€éƒ¨ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã«ã—ã‹å½±éŸ¿ã‚’与ãˆãªã„ã«ã¤ã„㦠詳細を見る 障害者ã¯ã‚¦ã‚§ãƒ–サイトを利用ã—ã¦ã„ãªã„ ã©ã†ã—ã¦ãã®ã‚ˆã†ãªã“ã¨ãŒè¨€ãˆã‚‹ã®ã§ã—ょã†ã‹ã€‚ 色覚異常やé‹å‹•éšœå®³ãªã©ã®éšœå®³ã‚’æŒã¤å¤šãã®äººãŒã€ä»–ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¨åŒã˜ã‚ˆã†ã«ã‚¦ã‚§ãƒ–サイトを利用ã—ã¦ã„ã¾ã™ã€‚ ã¾ãŸã€ã©ã®ã‚ˆã†ãªæ‰‹æ®µã‚’ã‚‚ã£ã¦ã—ã¦ã‚‚多ãã®æ”¯æ´æŠ€è¡“ã§ã¯æ¤œå‡ºã§ãã¾ã›ã‚“。 障害者ã¯ã‚¦ã‚§ãƒ–サイトを利用ã—ã¦ã„ãªã„ã“ã¨ã«ã¤ã„㦠詳細を見る ウェブサイトをアクセシブルã«ã™ã‚‹ã«ã¯ã€ã‚³ã‚¹ãƒˆã¨æ™‚é–“ãŒã‹ã‹ã‚‹ プãƒã‚¸ã‚§ã‚¯ãƒˆã®åˆæœŸæ®µéšŽã‹ã‚‰ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを考慮ã—ã€é–‹ç™ºãƒãƒ¼ãƒ ãŒé©åˆ‡ãªã‚¹ã‚ルをæŒã£ã¦ã„ã‚Œã°ã€ãã®ã‚ˆã†ãªã“ã¨ã¯ãªã„ã‹ã‚‚ã—ã‚Œã¾
Web Content Accessibility Guidelines (WCAG) 2.1 (W3C First Public Working Draft 28 February 2017)
Web Content Accessibility Guidelines (WCAG) 2.2 W3C Recommendation 12 December 2024 More details about this document This version: https://www.w3.org/TR/2024/REC-WCAG22-20241212/ Latest published version: https://www.w3.org/TR/WCAG22/ Latest editor's draft:https://w3c.github.io/wcag/guidelines/22/ History: https://www.w3.org/standards/history/WCAG22/ Commit history Implementation report: https://w
aria-labelã§å§‹ã‚ã‚‹ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティ改善活動
ãã‚‚ãもアクセシブルãªã‚µãƒ¼ãƒ“スã¨ã¯ã€ã©ã®ã‚ˆã†ãªã‚µãƒ¼ãƒ“スã€å®Ÿè£…を指ã™ã®ã§ã—ょã†ã‹ã€‚ 端的ã«è¡¨ç¾ã™ã‚‹ãªã‚‰ã°ã€ã€Œä¼ãˆãŸã„æƒ…å ±ãŒæ£ã—ã„æ–‡æ›¸æ§‹é€ ã«ã‚ˆã£ã¦å®Ÿè£…ã•ã‚Œã¦ã„るサービスã€ã ã¨è€ƒãˆã¾ã™ã€‚ 例ãˆã°ä»¥ä¸‹ã®ã‚ˆã†ãªãƒœã‚¿ãƒ³ã®å®Ÿè£…ãŒã‚ã£ãŸã¨ã—ã¾ã™ã€‚ ã“ã¡ã‚‰ãŒãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã•ã‚ŒãŸçµæžœã§ã™ã€‚ ã“ã¡ã‚‰ãŒã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã®çµæžœã§ã™ã€‚ (Macã®å ´åˆcommand+F5ã§VoiceOverを使用ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚) ã“ã®ä¾‹ã®å ´åˆã€è¦–覚的ãªæƒ…å ±ã¨ã€æ”¯æ´æŠ€è¡“を介ã—ã¦å¾—ã‚‰ã‚Œã‚‹æƒ…å ±ã¨ã§å·®ç•°ãŒç”£ã¾ã‚Œã¦ã—ã¾ã£ã¦ã„ã¾ã™ã€‚ã“ã‚Œã¯ã‚¢ã‚¯ã‚»ã‚·ãƒ–ルã§ã¯ã‚ã‚Šã¾ã›ã‚“。（例外[1]ã‚‚ã‚ã‚Šã¾ã™ã€‚） ã“ã®ä¾‹ã®å ´åˆã€ãƒœã‚¿ãƒ³ã®åƒããŒç·¨é›†ã§ã‚ã‚Œã°ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã«ã‚ˆã‚Šå–å¾—ã—ãŸå‰Šé™¤ã¨ã„ã†æƒ…å ±ã¯èª¤ã‚Šã«ãªã‚Šã¾ã™ã€‚ スクリーンリーダーã®ã‚ˆã†ãªæ”¯æ´æŠ€è¡“ã¯ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティツリーを元ã«æƒ…å ±ã®å‡¦ç†ãƒ»å‡ºåŠ›ã‚’è¡Œã„ã¾ã™ã€‚ ã“ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティツリーã¯ã€DOMツリーã¨ã„ã†
Don't disable buttons
One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form
ãŠå‰ã‚‰ã¯ã¾ã img ã‚¿ã‚°ã® alt 属性ã®ä»˜ã‘方を間é•ã£ã¦ã„ã‚‹ - Qiita
1行㧠alt属性ã¯ã€ã€Œå…¨ã¦ã® ç”»åƒã‚’ãã®alt属性ã®ãƒ†ã‚ストã«ç½®ãæ›ãˆãŸã¨ãã«ãƒšãƒ¼ã‚¸ã®æ„味ãŒå¤‰ã‚らãªã„ ã€ã‚ˆã†ã«ã¤ã‘る。 （HTMLã®æ¨™æº–è¦æ ¼æ›¸ã‚ˆã‚Šï¼‰ マジã§ã“ã‚Œã«å°½ãる。 具体例 例１：ãƒã‚´ ⌠間é•ã£ãŸãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—
今ã‹ã‚‰ã§ã‚‚é…ããªã„ï¼èª°ã‚‚æ•™ãˆã¦ãã‚Œãªã‹ã£ãŸ React ã¨ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティーã®ä¸–ç•Œ
ã“ã®è¨˜äº‹ã¯ Front-End Study #3 ã§ç™ºè¡¨ã•ã‚ŒãŸãƒ©ã‚¤ãƒ–コーディングã®å†…容を記事ã«ã—ãŸã‚‚ã®ã§ã™ã€‚記事ä¸ã®ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã¯ GitHub ã§ã”覧ã„ãŸã ã‘ã¾ã™ã€‚ ã“ã®è¨˜äº‹ã¯ã€ã“ã‚Œã¾ã§ä¸€èˆ¬çš„ãªãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã ã£ãŸç§ãŒä¸€å¹´ã»ã©ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティーã«ã¤ã„ã¦å‹‰å¼·ã™ã‚‹ä¸Šã§ 「最åˆã«æ•™ãˆã¦ãれれã°ã‚ˆã‹ã£ãŸã®ã«ã€œï¼ã€ã¨æ€ã£ãŸå†…容 ã‚’ React 㨠Next.js を用ã„ã¦ç´¹ä»‹ã™ã‚‹ã‚‚ã®ã¨ãªã£ã¦ã„ã¾ã™ã€‚ èªã¿çµ‚ã‚ã£ãŸå¾Œã«æ¬¡ã«ã‚³ãƒ¼ãƒ‰ã‚’書ãéš›ã«ãµã¨æ„è˜ã§ãるよã†ãªã‚¢ã‚¯ã‚»ã‚·ãƒ“リティーã®æ™®éçš„ãªäº‹å®Ÿã‚’紹介ã—ã€æœ€å¾Œã«ä»Šå¾Œã® React ã®å‹•ãã«ã¤ã„ã¦è»½ã触れるもã®ã«ãªã£ã¦ã„ã¾ã™ã€‚目次ã¯æ¬¡ã®ã¨ãŠã‚Šã§ã™ï¼š åŸºæœ¬äº‹é … SPA ã®ãƒ«ãƒ¼ãƒ†ã‚£ãƒ³ã‚°ã«ã‚ˆã‚‹å•é¡Œ リッãƒãªã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã§ã®ä¾‹ Jest + React Testing Library ã§ã®ãƒ†ã‚¹ãƒˆ Reactã¨ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティーã®ä»Šå¾Œã®å‹•ã å½¹ã«ç«‹ã¤web
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
GitHub - yamanoku/awesome-japanese-a11y-companies: アクセシビリティã«å–り組む・推進ã—ã¦ã„る日本ä¼æ¥ã¾ã¨ã‚（éšæ™‚更新）
Accessibility testing with Storybook
{{#tags}}- {{label}}
{{/tags}}