Designing dyslexia-friendly navigational components: accessibility insights and atomic design patterns

Designing dyslexia-friendly navigational components: accessibility insights and atomic design patterns | UX Collective

webブラウザのデフォルト設定のリンクの下線は文字とくっついる為、dyslexiaには邪魔なる

https://scrapbox.io/files/67f2328f4d44f44199f5f0f4.png

少し離せば見やすくなる

https://scrapbox.io/files/67f51ba76d987e8489b523f2.png

GitHubでも適用されてた

https://scrapbox.io/files/67f232c43fd934e8e75d9a42.png

https://gyazo.com/765c2dd09532cd56c6adb08f078f831e

data-a11y-link-underlineという属性で制御している

githubはこのスタイリングをアクセシビリティと捉えている

離れてる方が読みやすいshokai.icon

でも0.2remなので、下に突き出た文字とギリギリくっついてしまっている。0.3remにした方が良いと思う

Cosenseでも離してみようshokai.icon

まず本文内の下線から試す

これが

https://scrapbox.io/files/67f232d2f3d43be21eba9bff.png

https://scrapbox.io/files/67f232d4eaa1ae750e4e6d1c.png

こうなる

https://scrapbox.io/files/67f232d7db7a0b52286b3adb.png

https://scrapbox.io/files/67f232db9df24207cdb4110c.png