[B! a11y] Akinekoã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯

Akineko id:Akineko

a11yã«é–¢ã™ã‚‹Akinekoã®ãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ (8)

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

${{author_name}}$
{{author_name}}{{created}}
{{ #comment }}{{ comment }}{{ /comment }}
- {{ label }}

${{author_name}}$

{{{comment_expanded}}}

{{label}}

{{#is_bookmark}}ãƒªã‚¹ãƒˆ{{/is_bookmark}}{{^is_bookmark}}ãƒªãƒ³ã‚¯{{/is_bookmark}}

Webã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£å¦ç¿’ãƒªã‚½ãƒ¼ã‚¹ã¾ã¨ã‚ ï¼ˆ2023å¹´3æœˆç‰ˆï¼‰
ç¤¾å†…å‘ã‘ã«ã¾ã¨ã‚ã¦ã„ãŸã‚‚ã®ã‚’åŠ ç†ä¿®æ£ã—ã¦å…¬é–‹ã—ã¾ã™ã€‚ ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã®å¦ç¿’ã‚’å§‹ã‚ã‚‹äººã®åŠ©ã‘ã«ãªã‚Œã°å¬‰ã—ã„ã§ã™ã€‚ YouTube freee ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ç ”ä¿®å‹•ç”»ï½žå…¨è·ç¨®å¯¾è±¡ï½ž freee ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ç ”ä¿®å‹•ç”»ï½žæŠ€è¡“è·å¯¾è±¡ï¼ˆBasicï¼‰ freee ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ç ”ä¿®å‹•ç”»ï½žæŠ€è¡“è·å¯¾è±¡ï¼ˆAdvanceï¼‰ a11ygo go A11yTokyoMeetup Webã‚³ãƒ³ãƒ†ãƒ³ãƒ„ å…¨èˆ¬ WCAG WAI-ARIA HTML/CSS ãƒ‡ã‚¶ã‚¤ãƒ³ã‚·ã‚¹ãƒ†ãƒ ã€ã‚¬ã‚¤ãƒ‰ãƒ©ã‚¤ãƒ³ ãã®ä»– æ›¸ç± ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£å…¨èˆ¬ HTML
Akineko 2023/03/08
a11y
ãƒªãƒ³ã‚¯
Web ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãŸã‚ã®ã‚¦ã‚§ãƒ–ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã®åŸºç¤Ž
Web ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã®ãŸã‚ã®ã‚¦ã‚§ãƒ–ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã®åŸºç¤Ž 2023.02.18 ã‚¦ã‚§ãƒ–ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã‚’å¯¾è±¡ã«ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã®å¯¾å¿œã«ã¤ã„ã¦è§£èª¬ã—ãŸè¨˜äº‹ã€‚ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã‚’å‘ä¸Šã•ã›ã‚‹ãŸã‚ã«ã¯ã€æ£ã—ã„HTMLã®æ›¸ãæ–¹ãŒå¿…è¦ã§ã‚ã‚‹ã€‚HTMLè¦ç´ ã«ã¯ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã«é–¢ã™ã‚‹æ©Ÿèƒ½ãŒå…ƒã€…å‚™ã‚ã£ã¦ã„ã‚‹ãŸã‚ã€é©åˆ‡ãªHTMLã‚’é¸æŠžã—ä½¿ç”¨ã™ã‚‹ã“ã¨ãŒå¤§åˆ‡ã ã€‚è¤‡é›‘ãªUIã®å ´åˆã¯WAI-ARIAã‚’ä½¿ç”¨ã—ã€ARIA Authoring Practices Guideã«åŸºã¥ãé©åˆ‡ã«å®Ÿè£…ã™ã‚‹å¿…è¦ãŒã‚ã‚‹ã€‚UIãƒ©ã‚¤ãƒ–ãƒ©ãƒªé¸ã³ã®éš›ã«ã¯ã€WAI-ARIAã«å¾“ã£ãŸå®Ÿè£…ã‚’è¡Œã£ã¦ã„ã‚‹ã‹ãŒåŸºæº–ã®1ã¤ã¨ãªã‚‹ã€‚ ã“ã®è¨˜äº‹ã¯ã€ã‚¦ã‚§ãƒ–ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã¨ã—ã¦ä»•äº‹ã‚’ã•ã‚Œã¦ã„ã‚‹ã»ã†ã‚’å¯¾è±¡ã«æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚æ—¥ã€…ã®ã‚¦ã‚§ãƒ–ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®é–‹ç™ºã®ä¸ã§æ„è˜ã—ã¦ãŠããŸã„åŸºç¤Žçš„ãªå†…å®¹ã‚’ãƒ¡ã‚¤ãƒ³ã«è¨˜è¼‰ã—ã¦ã„ã¾ã™ã€‚ ãã®ãŸã‚ã€ã“ã“
Akineko 2023/02/20
a11y
ãƒªãƒ³ã‚¯
ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ç¬¬ä¸€æ©ã€labelãŒè¶…é‡è¦ãªè©±ã€‚~ placeholderã˜ã‚ƒãƒ€ãƒ¡ãªã®ï¼Ÿ~
ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£è¦³ç‚¹ã§å¿…é ˆã®<label>è¦ç´ ã«ã¤ã„ã¦ã€ ãã®é‡è¦æ€§ ãªãœé‡è¦ãªã®ã‹ã€‚ãƒ¡ãƒªãƒƒãƒˆãƒ»ãƒ‡ãƒ¡ãƒªãƒƒãƒˆ placeholderã˜ã‚ƒãƒ€ãƒ¡ãªã®ã‹ ãªã©ã«ã¤ã„ã¦ã¾ã¨ã‚ã¾ã™ã€‚ labelã®é‡è¦æ€§ ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£è¦³ç‚¹ã§labelã¯ã©ã®ãã‚‰ã„é‡è¦ãªã®ã§ã—ã‚‡ã†ã‹ï¼Ÿ é©åˆãƒ¬ãƒ™ãƒ« A é©åˆãƒ¬ãƒ™ãƒ«ã¨ã¯ã€ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ä¸Šã®é‡è¦åº¦ã‚’ç¤ºã™æŒ‡æ¨™ã®ã“ã¨ã§ã™ã€‚ WCAG 2.1ã®é©åˆãƒ¬ãƒ™ãƒ«ã¯ã€ãƒ¬ãƒ™ãƒ«Aã€ãƒ¬ãƒ™ãƒ«AAã€ãƒ¬ãƒ™ãƒ«AAAã®3ã¤ã«åˆ†ã‹ã‚Œã¦ã„ã¾ã™ã€‚ ãã®ä¸ã§ãƒ¬ãƒ™ãƒ«Aã¨ã¯ã€ æœ€ä½Žé™ã®ãƒ¬ãƒ™ãƒ«ã§ã‚ã‚Šã€é”æˆã§ãã¦ã„ãªã„ã¨ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ãƒªãƒ¼ãƒ€ãƒ¼ã‚„æ‹¡å¤§é¡ãªã©ã®æ”¯æ´æŠ€è¡“ã‚’ç”¨ã„ã¦ã‚‚ã‚µãƒ¼ãƒ“ã‚¹ã‚’åˆ©ç”¨ã§ããªã„ã“ã¨ã‚’æ„å‘³ã—ã¾ã™ã€‚ ãªãœãã‚“ãªã«é‡è¦ï¼Ÿ labelè¦ç´ ãŒã‚ã‚‹ã“ã¨ã®ãƒ¡ãƒªãƒƒãƒˆ 1. é¸æŠžãŒå®¹æ˜“ã«ãªã‚‹ ãƒ©ã‚¸ã‚ªãƒœã‚¿ãƒ³ã‚„ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ãªã©ã®å°ã•ãªé¸æŠžæ¬„ã®å ´æ‰€ã‚’æ£ç¢ºã«ã‚¯ãƒªãƒƒã‚¯/ã‚¿ãƒƒãƒ—ã§ããªãã¦ã‚‚ã€éš£æŽ¥ã™ã‚‹ãƒ©ãƒ™ãƒ«ã‚’ã‚¯ãƒªãƒƒã‚¯/ã‚¿ãƒƒãƒ—ã™ã‚‹ã“
Akineko 2022/11/01
a11y
ãƒªãƒ³ã‚¯
AtomicDesign ã®ä»•åˆ†ã‘ã‚’ãƒ†ã‚¹ãƒˆã§åˆ¤å®šã™ã‚‹
AtomicDesign ã«ã¯ã€ŒAtoms ã‹ Molecules ã‹ï¼Ÿã€Molecules ã‹ Organisms ã‹ï¼Ÿã€ã®åˆ¤å®šãŒæ‚©ã¾ã—ã„â€¦ã¨ã„ã†èª²é¡ŒãŒã‚ã‚Šã¾ã™ã€‚ã“ã‚Œã¯ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ãƒ»ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼é–“ã§ã¯ã‚‚ã¡ã‚ã‚“ã€ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼åŒå£«ã§ã‚‚è§£é‡ˆå·®ç•°ãŒã‚ã‚‹ã‚ˆã†ã§ã™ã€‚æ˜Žç¢ºãªåˆ¤å®šè»¸ãŒãªã‘ã‚Œã°ã€ã„ãšã‚Œãƒ–ãƒ¬ãŒç”Ÿã˜ã€è¦å¾‹ã®ãªã„ãƒ‡ã‚¶ã‚¤ãƒ³ã‚·ã‚¹ãƒ†ãƒ ã«ãªã‚Šã‹ãã¾ã›ã‚“ã€‚ ã“ã®çŠ¶æ³ã«å¯¾ã—ã€Œã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã‚’è»¸ã«ã™ã‚‹ã€ã¨ã„ã†ç™ºæƒ³ã«è‡³ã‚Šã€ã©ã®ã‚ˆã†ã«ä»•åˆ†ã‘ã‚‹ã‹ã‚’å…ˆæ—¥ã®æŠ•ç¨¿ã§ç´¹ä»‹ã—ã¾ã—ãŸã€‚ã“ã®ã‚¢ã‚¤ãƒ‡ã‚£ã‚¢ã¯ã‚¿ã‚¤ãƒˆãƒ«ã®ã¨ãŠã‚Šã€Œãƒ†ã‚¹ãƒˆã€ã§æ©Ÿæ¢°çš„ã«åˆ¤å®šå¯èƒ½ã§ã™ã€‚ AtomicDesign ã‚«ã‚¹ã‚¿ãƒ ãƒžãƒƒãƒãƒ£ãƒ¼é–¢æ•° ã€ŒAtomicDesign ã®ä»•åˆ†ã‘ã‚’ãƒ†ã‚¹ãƒˆã§åˆ¤å®šã™ã‚‹ã€ãŸã‚ã«ã€ç‹¬è‡ªã®ã‚«ã‚¹ã‚¿ãƒ ãƒžãƒƒãƒãƒ£ãƒ¼é–¢æ•°ã‚’è¨ã‘ã¾ã™ã€‚æ™®æ®µåˆ©ç”¨ã—ã¦ã„ã‚‹'@testing-library/jest-dom'ã‚‚ã‚«ã‚¹ã‚¿ãƒ ãƒžãƒƒãƒãƒ£ãƒ¼ã®ãƒ©ã‚¤ãƒ–ãƒ©ãƒªã§ã™ãŒã€ã“ã®ã‚«ã‚¹ã‚¿ãƒ ãƒž
Akineko 2022/07/09
React

a11y

ãƒ†ã‚¹ãƒˆ
ãƒªãƒ³ã‚¯
Accessibility (ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£) - MDN Web Docs ç”¨èªžé›†: ã‚¦ã‚§ãƒ–é–¢é€£ç”¨èªžã®å®šç¾© | MDN
ã‚¦ã‚§ãƒ–ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ (ç•¥èªž: A11Yã€Accessibility ã® A ã‹ã‚‰ Y ã¾ã§ã®é–“ã« 11 æ–‡å—ãŒæŒŸã¾ã‚Œã¦ã„ã‚‹ãŸã‚ã€ã“ã®ã‚ˆã†ã«ç•¥ã™) ã¯ã€èº«ä½“çš„ãŠã‚ˆã³æŠ€è¡“çš„ãªåˆ¶ç´„ã«ã‚ˆã‚‰ãšã€ã‚¦ã‚§ãƒ–ã‚µã‚¤ãƒˆã‚’ä½¿ã„ã‚„ã™ãä¿ã¤ãŸã‚ã®ãƒ™ã‚¹ãƒˆãƒ—ãƒ©ã‚¯ãƒ†ã‚£ã‚¹ã§ã™ã€‚ã‚¦ã‚§ãƒ–ã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ã¯ã€W3C ã® Web Accessibility Initiative (ç•¥ç§°: WAI) ã«ã‚ˆã£ã¦ã€æ¨™æº–åŒ–ã¨è°è«–ãŒã•ã‚Œã¦ã„ã¾ã™ã€‚
Akineko 2022/06/27
a11y
ãƒªãƒ³ã‚¯
freeeã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ãƒ¼ãƒ»ã‚¬ã‚¤ãƒ‰ãƒ©ã‚¤ãƒ³ â€” freeeã‚¢ã‚¯ã‚»ã‚·ãƒ“ãƒªãƒ†ã‚£ãƒ¼ãƒ»ã‚¬ã‚¤ãƒ‰ãƒ©ã‚¤ãƒ³ Ver. 202408.0-RELEASE+5.0.2
ã“ã®ã‚¬ã‚¤ãƒ‰ãƒ©ã‚¤ãƒ³ã¯ã€å‚è€ƒæƒ…å ±ã®è¿½åŠ ã‚„è¡¨ç¾ã®æ”¹å–„ãªã©ã§ã€éšæ™‚æ›´æ–°ã•ã‚Œã¾ã™ã€‚ ãƒªãƒªãƒ¼ã‚¹:Ver. 202408.0-RELEASE+5.0.2 ã‚¬ã‚¤ãƒ‰ãƒ©ã‚¤ãƒ³ãƒ»ãƒãƒ¼ã‚¸ãƒ§ãƒ³ï¼šVer. 202408.0-RELEASE ãƒã‚§ãƒƒã‚¯ã‚·ãƒ¼ãƒˆãƒ»ãƒãƒ¼ã‚¸ãƒ§ãƒ³ï¼š5.0.2 æ›´æ–°æ—¥:2024å¹´8æœˆ20æ—¥
Akineko 2022/06/27
ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰

a11y
ãƒªãƒ³ã‚¯
ã‚¢ã‚¯ã‚»ã‚·ãƒ–ãƒ«ãªãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã®å®Œå…¨ã‚¬ã‚¤ãƒ‰ - å‰ç·¨ | POSTD
ã‚¯ã‚¤ãƒƒã‚¯ã‚µãƒžãƒªãƒ¼ â€ ç§ãŸã¡ã¯ä¸€é€£ã®çŸã„è¨˜äº‹ã§é–‹ç™ºè€…ã¨ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ã«ã¨ã£ã¦æœ‰ç”¨ãªãƒ„ãƒ¼ãƒ«ã‚„ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’ç´¹ä»‹ã—ã¦ãŠã‚Šã€ç›´è¿‘ã®è¨˜äº‹ã§ã¯CSSç›£æŸ»ãƒ„ãƒ¼ãƒ«ã¨CSSã‚¸ã‚§ãƒãƒ¬ãƒ¼ã‚¿ã‚’å–ã‚Šä¸Šã’ã¾ã—ãŸã€‚ã“ã®è¨˜äº‹ã§ã¯ã‚¿ãƒ–ã‚„ãƒ†ãƒ¼ãƒ–ãƒ«ã‹ã‚‰ãƒˆã‚°ãƒ«ã‚„ãƒ„ãƒ¼ãƒ«ãƒãƒƒãƒ—ã¾ã§ã€ä¿¡é ¼æ€§ã®é«˜ã„ã‚¢ã‚¯ã‚»ã‚·ãƒ–ãƒ«ãªã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’è¦‹ã¦ã„ãã¾ã™ã€‚ ç›®æ¬¡ ä»¥ä¸‹ã«ã™ã¹ã¦ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ–ãƒ«ãªã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’ã‚¢ãƒ«ãƒ•ã‚¡ãƒ™ãƒƒãƒˆé †ã«è¨˜è¼‰ã—ã¾ã—ãŸã€‚ç›®æ¬¡ã‚’ã‚¹ã‚ãƒƒãƒ—ã™ã‚‹ã‹ã€ã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦1ã¤ãšã¤ãŠèªã¿ãã ã•ã„ã€‚ :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
Akineko 2022/06/27
ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰

a11y
ãƒªãƒ³ã‚¯
a11yã¨ãƒ†ã‚¹ãƒˆã‚’åŒæ™‚ã«æ”¹å–„ã™ã‚‹è©±
ã“ã‚Œã¾ã§ã€a11y æ”¹å–„ãƒ»ãƒ†ã‚¹ãƒˆæ‹¡å……ã«ã‚ãŸã‚Šã€Œã©ã®ã‚ˆã†ã«æ”¹å–„ã™ã¹ãã‹ï¼Ÿã©ã®ã‚ˆã†ã«æ›¸ãã¹ãã‹ï¼Ÿã€ã¨ã„ã†ç‚¹ãŒãƒãƒ¼ãƒ‰ãƒ«ã ã¨æ„Ÿã˜ã¦ã„ã¾ã—ãŸã€‚Chrome ã§ a11y tree ã‚’ç¢ºèªã™ã‚‹ã«ã¯ã€dev tools ã®éš…ã®éš…ã‚’ã¤ã¤ãå¿…è¦ãŒã‚ã‚Šã€ã‚ã¾ã‚Šä½“é¨“ã®è‰¯ã„ã‚‚ã®ã§ã¯ãªãã€æ°—ã«å…¥ã£ãŸã‚¨ã‚¯ã‚¹ãƒ†ãƒ³ã‚·ãƒ§ãƒ³ã‚‚ã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚ Testing Library ã¯ã€Œèª°ã‚‚ãŒã‚¢ã‚¯ã‚»ã‚¹ã§ãã‚‹ã‚¯ã‚¨ãƒªãƒ¼ã€ã‚’å„ªå…ˆçš„ã«ä½¿ç”¨ã™ã‚‹ã“ã¨ã‚’æŽ¨å¥¨ã—ã¦ã„ã¾ã™ãŒã€ã‚¢ãƒ—ãƒªã‚±ãƒ¼ã‚·ãƒ§ãƒ³ãŒã¯ã˜ã‚ã‹ã‚‰ a11y ã«è€ƒæ…®ã•ã‚ŒãŸä½œã‚Šã«ãªã£ã¦ã„ã‚‹ã¨ã¯é™ã‚Šã¾ã›ã‚“ã€‚ã“ã‚Œã‚‰ã®èƒŒæ™¯ã‹ã‚‰ã€Œdata-testidã€ã®ã‚ˆã†ãªã€ãƒ†ã‚¹ãƒˆå‘ã‘å±žæ€§ã«é ¼ã‚‹ãƒ¯ãƒ¼ã‚¯ã‚¢ãƒ©ã‚¦ãƒ³ãƒ‰ã§ä¹—ã‚Šåˆ‡ã‚‹ã“ã¨ã‚‚å°‘ãªãã‚ã‚Šã¾ã›ã‚“ã§ã—ãŸã€‚ Full page accessibility tree ä»Šå¹´ 1 æœˆã«ãƒªãƒªãƒ¼ã‚¹ã•ã‚ŒãŸChrome98 ã®æ–°æ©Ÿèƒ½ã¨ã—ã¦ã€ŒFull page accessibility
Akineko 2022/05/26
a11y

ãƒ†ã‚¹ãƒˆ
ãƒªãƒ³ã‚¯
1