ShotaroHirose59
commented
3 months ago What is accessibility?
障害のある人を含む誰もが使用できる Web アプリケーションを設計および実装することを指す。 アクセシビリティの詳細はLearn Accessibilityで学べる。
Using the ESLint accessibility plugin in Next.js
アクセシビリティの問題を早期に発見するのに役立つeslint-plugin-jsx-a11y
代替テキストのない画像がある場合、aria-* 属性と role 属性が間違って使用されている場合などに警告する。
eslint-plugin-jsx-a11yはpackage.jsonではなくlock.jsonに入ってたので、何かの依存で入ってるっぽい。esslintかもしくはデフォルトで入っているか。
Imageコンポーネントのalt属性を削除するとwarnが出ることを確認した。VS Codeでも警告してくれる。
./app/ui/invoices/table.tsx
45:25 Warning: Image elements must have an alt prop,
either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-textビルドプロセスにlintの実行が含まれているので、vercelデプロイ時にもwarnログが出る
Improving form accessibility
実装中のアプリではフォームのアクセシビリティを向上させるために、すでに次の 3 つのことを行っている。
- Semantic HTML: Using semantic elements (,
ShotaroHirose59
commented
3 months ago Form validation
Client-Side validation
最も簡単な方法は、フォーム内の <input>要素と <select> 要素に required 属性を追加すること。
Server-Side validation
サーバー上のフォームを検証することで、次のことが可能になる
- Ensure your data is in the expected format before sending it to your database.
- Reduce the risk of malicious users bypassing client-side validation.
- Have one source of truth for what is considered valid data.
コードが書いたがrhfと少し違うな。 RHFもサーバー側のエラーキャッチできるし、useStateFormでも可能
In the previous chapter, we looked at how to catch errors (including 404 errors) and display a fallback to the user. However, we still need to discuss another piece of the puzzle: form validation. Let's see how to implement server-side validation with Server Actions, and how you can show form errors using the useFormState hook - while keeping accessibility in mind!
https://nextjs.org/learn/dashboard-app/improving-accessibility
アクセシビリティとサーバー側の検証を学べるっぽい
Topics
キーワード