【CSS Tips】リンクにフォーカスできないと思ったら、display: contents が原因だったCSSアクセシビリティ はじめに 偶然フォーカスできないリンクを見つけて原因を調べたところ、aタグにdisplay: contentsが指定されていたのが原因だったのでその備忘録です。 なぜdisplay: contentsを指定するとフォーカスができなくなるのか そもそも、display: contentsとは、ボックスツリーを生成するかどうかを指定するプロパティです。 display: contentsが指定された要素は、表示はされるけどボックスツリー上では無視されるようになります。 このdisplay: contentsにはアクセシビリティ上のバグが複数報告されており、この挙動もその1つと思われます。 報告されているバグは、display: contentsが指定されている要素の
![【CSS Tips】リンクにフォーカスできないと思ったら、display: contents が原因だった - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a79840e6ce7eb8fdab7209a07be3013c01900c3a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwQ1NTJTIwVGlwcyVFMyU4MCU5MSVFMyU4MyVBQSVFMyU4MyVCMyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MyU5NSVFMyU4MiVBOSVFMyU4MyVCQyVFMyU4MiVBQiVFMyU4MiVCOSVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MSVBQSVFMyU4MSU4NCVFMyU4MSVBOCVFNiU4MCU5RCVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MiU4OSVFMyU4MCU4MWRpc3BsYXklM0ElMjBjb250ZW50cyUyMCVFMyU4MSU4QyVFNSU4RSU5RiVFNSU5QiVBMCVFMyU4MSVBMCVFMyU4MSVBMyVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTI1YWY0MTZmYWFhMDhlNzk3NjFkM2M0ZDg1MzM5YTM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa2FiZWNoaXlvMTMlMjBpbiUyMFFpaXRhJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lOGFiYzRmNGJmMDM1YThiNzExMmU5NzI0MjgyMTA2Yg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D98d7d77c467af52d202279435b5f0fc5)