はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります! この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
![サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6ef964056102e158a0191304df4c105915af38d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg4JUUzJTgyJTg0JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgxJUFFVUklRTMlODMlODclRTMlODIlQjYlRTMlODIlQTQlRTMlODMlQjMlRTMlODIlOTIlRTMlODElOTklRTMlODIlOEIlRTYlOTklODIlRTMlODElQUIlRTclOUYlQTUlRTMlODElQTMlRTMlODElQTYlRTMlODElOEElRTMlODElOEYlRTMlODElQTglRTglODklQUYlRTMlODElODQlRTMlODIlQTIlRTMlODIlQUYlRTMlODIlQkIlRTMlODIlQjclRTMlODMlOTMlRTMlODMlQUElRTMlODMlODYlRTMlODIlQTMlRTMlODElQUUlRTMlODElOTMlRTMlODElQTgmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWNlY2I3YzA2OGE1MmY5ODEyZDc3NTUyNDk5NWIxMzM0%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwa2FiZWNoaXlvMTMlMjBpbiUyMFFpaXRhJUU2JUEwJUFBJUU1JUJDJThGJUU0JUJDJTlBJUU3JUE0JUJFJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04NGE3ZjRkNzVlODE1YWMzNTg3N2M4ZTM4MjM0ZGY2NA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3a3b3a8db2decfc4072049b23b50d91d)