[IMO] ページのアクセシビリティ補強対応 #221
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yamanoku
commented
May 16, 2021
| @@ -60,7 +60,7 @@ export const Result: VFC<Props> = ({ | |||
| return ( | |||
| <Card> | |||
| {heading} | |||
| <div role="img" aria-label={`星 5 つ中 ${integerScore} つ`}> | |||
There was a problem hiding this comment.
星 5 つ中というラベルであった時、VoiceOver の日本語読み上げだと
「ほしごつなか」と読み上げてしまうので、f9238f6 (#221) にて丁寧な言葉に対応しました。
yamanoku
commented
May 16, 2021
| @@ -25,6 +25,7 @@ export const Share: VFC<Props> = ({ dajare, isDajare, integerScore }) => { | |||
| hashtags={['ダジャレ判定']} | |||
| className="px-4 py-2 bg-twitter text-white rounded-sm" | |||
| resetButtonStyle={false} | |||
| aria-label="結果をツイート" | |||
There was a problem hiding this comment.
<button> の中の結果をツイート文言とダブってしまうのですが、
<TwitterShareButton> では aria-label="twitter" がデフォルトになっているため
読み上げ時に何のボタンなのかが分からなくなるため、上書きする意味で変更しました。
yamanoku
commented
May 16, 2021
Comment on lines
+48
to
+50
| <label htmlFor="input-dajare" className="sr-only"> | ||
| ダジャレ入力欄 | ||
| </label> |
There was a problem hiding this comment.
<input> タグにはそれに紐づく <label> が必要なため
.sr-only で見た目上見えないようにして関連付けました。
https://tailwindcss.com/docs/screen-readers
ygkn
approved these changes
May 16, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
こんにちは。本日開催されていた焼肉争奪戦！NU CAMP Dev&Pub LT Party を観覧枠で聴いていたものです。
星の点数読み上げ対応をされていると聴いたときは、素晴らしい対応だなと思いました。
ソースコードの方拝見させていただいて、アクセシビリティ観点での補強として出させて頂きました。
完全に IMO （個人的な意見）なプルリクエストになりますが、もしよければ見ていただければと思います 🙏🏼