お世話になります。
ウェブアクセシビリティを考える上で、入力画面でエラーが出た際にエラーメッセージをラベルと入力フィールドの間に出るようにしたいのですが、うまくいきません。
因みに高齢者にも見やすいように黒い枠を入力フィールドに入れております。
以下のコードを入れました。
JavaScript
document.addEventListener(‘DOMContentLoaded’, function() {
const input = document.getElementById(‘name’);
if (!input) {
console.error(‘入力フィールドが見つかりません’);
return;
}
const formItem = input.closest(‘.form-item’);
if (!formItem) {
console.error(‘.form-item クラスを持つ親要素が見つかりません’);
return;
}
const label = formItem.querySelector(‘label’);
if (!label) {
console.error(‘ラベル要素が見つかりません’);
return;
}
// エラーメッセージ要素を作成
const errorMessage = document.createElement(‘div’);
errorMessage.className = ‘error-message’;
errorMessage.textContent = ‘必須項目です’;
// エラーメッセージをラベルの後に挿入
label.parentNode.insertBefore(errorMessage, label.nextSibling);
// バリデーション関数
function validateInput() {
if (input.value.trim() === ‘’) {
formItem.classList.add(‘error’);
errorMessage.style.display = ‘block’;
} else {
formItem.classList.remove(‘error’);
errorMessage.style.display = ‘none’;
}
}
// 初期状態でエラーメッセージを非表示に
errorMessage.style.display = ‘none’;
// イベントリスナーを追加
input.addEventListener(‘blur’, validateInput);
input.addEventListener(‘input’, validateInput);
});
また、CSSも以下のように微調整しました：
```css
.form-item {
margin-bottom: 20px;
position: relative;
}
.form-item label {
display: block;
margin-bottom: 5px;
}
.error-message {
color: #0f62fe;
font-size: 0.9em;
margin-bottom: 5px;
display: none;
}
.el-input {
width: 100%;
height: 40px;
padding: 0 8px;
border: 1px solid #090909;
box-sizing: border-box;
font-size: 16px;
line-height: 38px;
background-color: #fff;
}
.form-item.error .el-input {
border-color: #0f62fe;
border-width: 1px;
border-left-width: 4px;
background: #ECF9FF;
color: #0f62fe;
}
しかし、あらかじめ設定した黒い枠と入力フィールドがずれてしまいます。
また、以下のようなエラーが出ました。
入力フィールドが見つかりません
どこに間違いがあるのでしょうか。
お忙しいところ恐縮ですが、よろしくお願いいたします。