ãŠå‰ã‚‰ã¯ã¾ã img ã‚¿ã‚°ã® alt 属性ã®ä»˜ã‘方を間é•ã£ã¦ã„ã‚‹ - Qiita
1行㧠alt属性ã¯ã€ã€Œå…¨ã¦ã® ç”»åƒã‚’ãã®alt属性ã®ãƒ†ã‚ストã«ç½®ãæ›ãˆãŸã¨ãã«ãƒšãƒ¼ã‚¸ã®æ„味ãŒå¤‰ã‚らãªã„ ã€ã‚ˆã†ã«ã¤ã‘る。 （HTMLã®æ¨™æº–è¦æ ¼æ›¸ã‚ˆã‚Šï¼‰ マジã§ã“ã‚Œã«å°½ãる。 具体例 例１：ãƒã‚´ ⌠間é•ã£ãŸãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—
label 㧠input[type="file"] を装飾ã™ã‚‹ãª
input[type="file"] ãªè¦ç´ を装飾ã™ã‚‹æ–¹æ³•ã‚’検索ã—ãŸã¨ãã«ã€æ¬¡ã®ã‚ˆã†ãªé–“é•ã£ãŸ label è¦ç´ ã®ä½¿ã„方を紹介ã™ã‚‹è¨˜äº‹ã°ã‹ã‚Šãƒ’ットã™ã‚‹ã®ãŒæ°—ã«ãªã£ãŸã®ã§æ›¸ãã¾ã—ãŸã€‚label è¦ç´ を使ã£ã¦ã‚‚å•é¡Œãªã„å ´åˆã‚‚ã‚ã‚Šã¾ã™ãŒã€é–“é•ã£ãŸä½¿ã„方をã—ã¦ã„る（ã—よã†ã¨ã—ã¦ã„る）人ã«å±Šãã‚„ã™ã„よã†ã«ã“ã®ã‚ˆã†ãªè¡¨é¡Œã«ã—ã¦ã„ã¾ã™ã€‚ 何ãŒå•é¡Œã‹ 上記ã®æ–¹æ³•ã¯ input è¦ç´ ã‚’ display: none ã§éžè¡¨ç¤ºã«ã—ã€label è¦ç´ を使ã£ã¦ãƒ’ãƒƒãƒˆé ˜åŸŸã‚’æ‹¡å¤§ã•ã›ã¦ã€Œãƒ•ã‚¡ã‚¤ãƒ«ã‚’é¸æŠžã€ãƒœã‚¿ãƒ³ã‚’表ç¾ã™ã‚‹ã¨ã„ã†æ–¹æ³•ã§ã™ãŒã€ã“ã®æ–¹æ³•ã§ã¯ãƒ•ã‚©ãƒ¼ã‚«ã‚¹ãŒå½“ãŸã‚Šã¾ã›ã‚“。ã¾ãŸã€tabindex 属性ã«éžè² ã®å€¤ã‚’è¨å®šã—フォーカスを当ã¦ã‚‰ã‚Œã‚‹ã‚ˆã†ã«ã—ã¦ã‚‚ label 㯠clickable ãªè¦ç´ ã§ã¯ãªã„ã®ã§ Space / Enter ã‚ー㧠click イベントを発ç«ã™ã‚‹ã“ã¨ãŒã§ãã¾ã›ã‚“。 ã©ã†ã™ã‚‹ã¹ãã‹ butto
![label 㧠input[type="file"] を装飾ã™ã‚‹ãª](https://cdn-ak-scissors.b.st-hatena.com/image/square/abcddc7bb77ffd423240f83b7922f8b6d66776fc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fjF5h3Vm--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Alabel%252520%2525E3%252581%2525A7%252520input%25255Btype%25253D%252522file%252522%25255D%252520%2525E3%252582%252592%2525E8%2525A3%252585%2525E9%2525A3%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adqn%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxMjZlNDcxNWEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Webã®ãƒ«ãƒ“仕様ã«ã¯ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを阻害ã—ã¦ã„ã‚‹é¢ãŒã‚る。「日本DAISYコンソーシアムã€ãŒæ”¹å–„を求ã‚ã¦ãƒ–ラウザベンダã€WHATWGã€W3Cらã«å…¬é–‹æ›¸ç°¡
Webã®ãƒ«ãƒ“仕様ã«ã¯ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを阻害ã—ã¦ã„ã‚‹é¢ãŒã‚る。「日本DAISYコンソーシアムã€ãŒæ”¹å–„を求ã‚ã¦ãƒ–ラウザベンダã€WHATWGã€W3Cらã«å…¬é–‹æ›¸ç°¡ ã™ã¹ã¦ã®äººãŒç‰ã—ãæƒ…å ±ã«ã‚¢ã‚¯ã‚»ã‚¹ã§ãã‚‹ã“ã¨ã‚’目指ã—ã€å›½éš›è¦æ ¼ã§ã‚ã‚‹DAISY（Digital Accessible Information System：アクセシブルãªæƒ…å ±ã‚·ã‚¹ãƒ†ãƒ ï¼‰è¦æ ¼ã®é–‹ç™ºãƒ»ç¶æŒãƒ»æ™®åŠã®ãŸã‚ã«è¨ç«‹ã•ã‚ŒãŸå›½éš›å›£ä½“「DAISYコンソーシアムã€ã®æ£ä¼šå“¡ã§ã‚る「日本DAISYコンソーシアムã€ã¯ã€Web上ã®æ–‡æ›¸ã®æ–‡å—や熟語ã«ãƒ«ãƒ“を振るãŸã‚ã®Web標準仕様ãŒã€å¼±è¦–や失èªç—‡ãªã©ã‚’å«ã‚€ã•ã¾ã–ã¾ãªãƒãƒ³ãƒ‡ã‚£ã‚ャップをæŒã¤äººã€…ã«ã¨ã£ã¦ã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを阻害ã—ã¦ã„ã‚‹é¢ãŒã‚ã‚‹ã¨ã—ã¦ã€æ”¹å–„を求ã‚る公開書簡をWebブラウザベンダã€WHATWGã€W3Cå®›ã¦ã«é€ä»˜ã—ã¾ã—ãŸã€‚ ãã®ä¸€éƒ¨ã‚’引用ã—ã¾ã™ã€‚ The historical purpose of
WAI-ARIAã‚’å¦ã¶ã¨ãã«æ•´ç†ã—ã¦ãŠããŸã„ã“ã¨
çµè«– ãƒãƒ¼ãƒ«ã«ã¤ã„ã¦çŸ¥ã‚‹ HTMLã®æš—é»™ã®ãƒãƒ¼ãƒ«ã‚’知る ãƒãƒ¼ãƒ«ã‚’知ã£ãŸä¸Šã§ãƒãƒ¼ãƒ«ã«å¯¾ã—ã¦ä½¿ç”¨ã§ãるプãƒãƒ‘ティ/ステートを使ㆠ(ãŠã¾ã‘) markuplintを使ãŠã† aria属性を使ã†å‰ã« ã¾ãšã€ã„ããªã‚Šaria-labelã‚„aria-selectedã¨ã‹ã«æ‰‹ã‚’出ã•ãªã„。 aria-selectedã¨ã‹ã‚’発見ã—ã¦ã—ã¾ã†ã¨ã€Œoptionè¦ç´ 以外ã«ã‚‚selectedã¿ãŸã„ãªæ„å‘³ã‚’ä»˜åŠ ã§ãã‚‹ã‚“ã ï¼ã™ã’ãˆï¼ä½¿ã£ã¦ã¿ã‚ˆã†ï¼ã€ã¿ãŸã„ãªæ°—æŒã¡ãŒæ²¸ã上ãŒã£ã¦ã—ã¾ã†ã€‚ã‚ã‹ã‚‹ã€‚ã¨ã£ã¦ã‚‚よãã‚ã‹ã‚‹ã‚ˆã€‚当時ã¼ãã‚‚ãã†ã ã£ãŸã‹ã‚‰ã€‚ ãŸã ã€ãã“ã¯ãã£ã¨æˆ‘æ…¢ã—ã¦ã»ã—ã„。 ãªãœã‹ã¨è¨€ã†ã¨ã€aria属性ã¯ã€ä½¿ã£ã¦ã„ã„ã¨ãã¨æ‚ªã„ã¨ããŒã‚る。ãã¡ã‚“ã¨WAI-ARIAã¨ã„ã†ä»•æ§˜ã¨ã€ARIA in HTMLã‚„Core Accessibility API Mapping (Core-AAM)ã¨ã„ã†ä»•æ§˜ã§æ±ºã‚られã¦ã„ã£ã¦ã„ã‚‹[1]ã®
HTML: アクセシビリティã®åŸºç¤Ž - ウェブ開発をå¦ã¶ | MDN
完全ãªåˆå¿ƒè€…ã¯ã“ã¡ã‚‰ã‹ã‚‰!ウェブ入門ウェブ入門基本的ãªã‚½ãƒ•ãƒˆã‚¦ã‚§ã‚¢ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã‚¦ã‚§ãƒ–サイトをã©ã‚“ãªå¤–見ã«ã™ã‚‹ã‹ãƒ•ã‚¡ã‚¤ãƒ«ã®æ‰±ã„HTML ã®åŸºæœ¬CSS ã®åŸºæœ¬JavaScript ã®åŸºæœ¬ã‚¦ã‚§ãƒ–サイトã®å…¬é–‹ã‚¦ã‚§ãƒ–ã®ã—ãã¿HTML — Structuring the webHTML概論HTML 入門HTML を始ã‚よã†ãƒ˜ãƒƒãƒ‰éƒ¨ã«ã¯ä½•ãŒå…¥ã‚‹? HTML ã®ãƒ¡ã‚¿ãƒ‡ãƒ¼ã‚¿HTML テã‚ストã®åŸºç¤Žãƒã‚¤ãƒ‘ーリンクã®ä½œæˆé«˜åº¦ãªãƒ†ã‚スト整形文書ã¨ã‚¦ã‚§ãƒ–サイトã®æ§‹é€ HTML ã®ãƒ‡ãƒãƒƒã‚°æ‰‹ç´™ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—コンテンツã®ãƒšãƒ¼ã‚¸ã®æ§‹é€ 化Multimedia and embeddingマルãƒãƒ¡ãƒ‡ã‚£ã‚¢ã¨ãã®åŸ‹ã‚è¾¼ã¿HTML ã®ç”»åƒå‹•ç”»ã¨éŸ³å£°ã®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„object ã‹ã‚‰ iframe ã¾ã§ — ãã®ä»–ã®åŸ‹ã‚è¾¼ã¿æŠ€è¡“ウェブã¸ã®ãƒ™ã‚¯ã‚¿ãƒ¼ã‚°ãƒ©ãƒ•ã‚£ãƒƒã‚¯ã®è¿½åŠ レスãƒãƒ³ã‚·ãƒ–ç”»åƒMozilla ã®ã‚¹ãƒ—ラッシュページHTML tablesH
マークアップを進化ã•ã›ã‚‹ WAI-ARIA ã®åŸºæœ¬
マークアップを進化ã•ã›ã‚‹ WAI-ARIA ã®åŸºæœ¬ ç§ @masuP9 WAI-ARIAã¨ã¯ä½•ã‹ WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAã¯ã€ã‚¦ã‚§ãƒ–コンテンツãŠã‚ˆã³ アプリケーションã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティã¨ç›¸äº’é‹ç”¨æ€§ã‚’改良ã™ã‚‹ãŸã‚ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワークをæä¾›ã™ã‚‹æŠ€è¡“仕様ã§ã‚る。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIA㯠ウェブã®ã‚¢ã‚¯ã‚»ã‚·ãƒ“リティを 高ã‚ã‚‹ãŸã‚ã®æŠ€è¡“仕様 WAI-ARIAã¯ãªãœå¿…è¦ã‹ アプリケーション化ã™ã‚‹ã‚¦ã‚§ãƒ– Notion Figma G Suite 3D CAD etc... æ„味も振る舞ã„ã‚‚ æ—¢å˜ã®HTMLã§ã¯è¡¨ç¾ã§ããªããªã£ã¦ã㟠例ãˆã° タブUI é–‹ã„ã¦ã„
1
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}