アクセス可能なWebフォームを作成する方法

Feb 2, 2026

操作方法

フォームはあなたのビジネスにユーザーを接続し、彼らがあなたのサイトやアプリに来たものを達成するのを助けるので、フォームはウェブの不可欠な要素です。そうは言われている、あなたはあなたのすべてのユーザーが恐ろしい経験を受けることなくあなたのフォームを使うことができるようにしたいです。目標は、これらの主要なユーザーの対話をできるだけ摩擦のないものとしてすることです。

建物のフォームが時々難しい仕事になる可能性があるのは本当ですが、それらを適度にアクセス可能にすることはあなたが思うかもしれないと思うように複雑ではありません（良い ウェブサイトビルダー スーパーシンプルにするでしょう）。「アクセシビリティを心配する時間がない」や「後でアクセス可能にする時間がない」のように、頻繁に投げられた言い訳があります。これらの言い訳は、（常にではない場合）無効であり、あなたのチームがこの考え方を変更するのを助けることができます。

もっとアドバイスをお探しですか？私たちはあなたがトピックの投稿でカバーされています ウェブホスティング に クラウドストレージ 。

13ユーザーテストソフトウェアの最良の部分

フォームを構築するときに考慮する必要があるいくつかの質問があります。

視覚障害を持つ人が私のフォームを使っているのでしょうか。
ユーザーは入力のためにどのデータが予想されるかを明確に示していますか？
使いやすいフォームです - ユーザーはそれを素早く理解することができるでしょうか？
フォームを完成させるためにキーボードを使用することができますか？

基本購読フォームの作成方法

私はあなたが先に進むのを助けるためにいくつかのスターターコードを与えました。上手これから始めますそして最終的にこれに行きます。

私はあなたに簡単な購読フォームを構成するものであるものがいくつか提供しましたが、このフォームをより使いやすくするためにここでできることがたくさんあります。あなたが作成したものでは、良い意味のHTMLを使ってあなたに長い道のりを得るでしょう。

を接続して始めましょう ＆lt;入力＆gt; それぞれの要素 ＆lt;ラベル＆gt; 秒私達はこれを与えることによってこれをします ＆lt;入力＆gt; IDとそれを使用する ＆lt;ラベル＆gt; 。これらのために「名前」と「Eメール」を使うことができます。私たちはすでに2つのことをしました：

プログラムでラベルを入力に関連付けました。この利点は、その入力が集中している場合、それがスクリーンリーダーユーザーにラベルを読み取ることです。
ユーザーはラベルをクリックすることができ、それぞれの入力がフォーカスされますので、ユーザーは目標サイズが大きいようになりました。

私たちの入力とラベルがすべて有線であるので、HTML入力タイプを定義できます。これらは本当に便利で、優れたユーザーエクスペリエンスを与えるための非常に簡単な方法です。の追加 タイプ 属性は、ユーザーがフォームを自動入力するのに役立ち、モバイルユーザーのためのより適切なキーボードも提供します。私たちのユースケースのために私たちがすることができます type = "text" 入力と名前の場合 type = "Eメール" 電子メール入力の場合

また、どのようなデータ（およびそのフォーマット）が彼らからどのような種類のデータ（そしてそのフォーマット）のどんな種類のアイデアを持つこともできます。ここではかなり明白ですが、それは必ずしもそうではありません。常に視聴可能であるラベルと予想される入力を伝達するプレースホルダーを提供することは一般的に良い習慣です。これを使用しないことを意味します プレースホルダー ユーザーが入力を開始すると、ラベルが表示されない入力の視覚ラベルとしての属性。これは多くの開発者にとって人気の練習であり、本当にすべてのために寝る必要があります。電子メールの名前と「[email protected]」という名前の「EX.JANE DOE」のプレースホルダーを提供できます。

今、私たちは焦点を取ります状態スタイリング。フォーカス状態のデフォルトのスタイルはブラウザ間で異なります。ここでの場合、入力にボタンと一致する太い色の輪郭があるようにします。

あなたのウェブサイトをより利用可能にするための14の簡単な方法

入力セレクタにフォーカススタイルを追加します

最後に、ボタン要素の周囲にいくつかの焦点スタイルを追加する必要があります。これはしばしば見落とされていますが、キーボードのみがどこにいるのかを知っているのは本当に役立ちます。これを追加する必要があります ＆amp; :: Moz-Focus-Innner Firefoxでデフォルトのスタイルを取り除くためのビット（将来の使用のためにそのスニペットを保存することをお勧めします）。

そのように、私たちはあなたが誇りに思うことができる基本的な購読フォームを持っています。良いセマンティクスを使用しているため、フォームはキーボードのみを介してアクセス可能です（タブとSpacebar / Enterキーを使用してみてください）。ボタンに使用される色は、WCAGのAAA規格（Webコンテンツアクセス可能性ガイドライン）を満たす11.51の色比である。私たちは、視覚的なユーザーとスクリーンリーダーユーザーの両方のためのラベルと、私たちのキーボードを使って友達のためのスタイルされたフォーカス状態を提供しました。最後に、フォントがに設定されていることに注意してください 18px 体内に。これは私たちの形式をはるかに読みやすくします（あなたは14pxを超えて滞在するようにしてください）。

念頭に置いてアクセシビリティを設計して構築することは練習しますが、それはより良い開発者になるでしょう、そしてウェブをより良い場所にするのを助けます。

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Webデザイナーの受賞歴のある会議は、4月24日から25日にNYCに戻ります。チケットを予約するには画像をクリックしてください

この記事はもともと発行316に発行されました ネット Webデザイナーや開発者向けの世界で最も売れている雑誌。 ここに問題316を購入してください または ここで購読する 。

関連記事：

このフリーツールでアクセシビリティを修正する失敗します
2019年に開発者向けの50素晴らしい新しいツール
あなたのデザインはどのくらいアクセス可能ですか？

アクセス可能なWebフォームを作成する方法

基本購読フォームの作成方法

入力セレクタにフォーカススタイルを追加します

操作方法 - 最も人気のある記事

キャンバスを伸ばす方法とオイル塗料の設定

How to make a photo collage in Photoshop CC

JamStack：今日より速く、より効率的なWebサイトを構築する

artrageから始めましょう

Slick UIアニメーションを作成する

等尺性タイポグラフィの設計方法

CSS表示プロパティを理解する

ベクターツールを使用する：Webデザイナーのアプローチ

カテゴリ