أخطاء HTML و CSS التي ألتقي بها كشخص بلا قيود صحية

هناك الكثير من الجدل حول توفر الواجهة في الوقت الحالي. إنه لأمر رائع أن ينتبه الناس إلى هذا ويبدأوا في تطوير واجهات يمكن للأشخاص الذين لديهم بعض القيود استخدامها.

لكننا ننسى الأشخاص الذين ليس لديهم قيود صحية. لديهم أيضًا الحق في استخدام الواجهات كما يرونها مناسبة. لذلك ، أود أن أخبركم بالعديد من الحالات التي أواجه فيها واجهات لا يمكن الوصول إليها ، كشخص بدون قيود صحية.

لا تقم بإضافة لون الخلفية لكتلة صورة الخلفية

عندما كنت أقود سيارتي إلى المنزل ، كنت أرغب في رؤية موقع المجمع السكني حيث كنت أنظر إلى الشقة. أثناء تحميل الموقع ، رأيت عادةً شاشة بيضاء.

عندما تم تحميله ، رأيت خطًا أبيض وصورة خلفية جميلة للمجمع. لا أعرف لماذا لم يضيف المطورون خلفية ملونة للكتلة باستخدام لون الخلفية. ولكن إذا فعلوا ذلك ، فسأكون قادرًا على قراءة النص في وقت سابق وعدم انتظار تحميل الصورة.

لا تفعل هذا

.hero {
  background-image: url("example.jpg");
}

يمكنك القيام بالأمر

.hero {
  background-image: url("example.jpg");
  background-color: #919191;
}

لا تستخدم أنواع البريد الإلكتروني والهاتف الخاصة لعلامة الإدخال

عندما تملأ حقول النموذج من هاتفك ، فمن الملائم ظهور لوحة مفاتيح خاصة لإدخال البريد الإلكتروني أو رقم الهاتف على الفور.

, . , email tel input.

<input type="text" placeholder="  ">
<input type="text" placeholder="  ">

<input type="email" placeholder="  ">
<input type="tel" placeholder="  ">
<!--  -->
<input inputmode="email" placeholder="  ">
<input inputmode="tel" placeholder="  ">

outline

, . , - outline , .

.button:focus {
  outline: none;
}

, . .

-

, role=”button” div span. , , , . .

- , . enter, . .

<div role="button">  </div>

<button>  </button>

label

. “, ” . , - . . , .

, label.

<div class="form-group">
  <input type="checkbox">
  <span>, </span>
</div>

<label class="form-group">
  <input type="checkbox">
  <span>, </span>
</label>

px font-size

أنا أستخدم شاشة تبعد عني مسافة متر تقريبًا ، لذا لدي وضع نص أكبر في Google Chrome. وعندما أصل إلى موقع يتم فيه تحديد الخط بالبكسل ، يتعين عليّ زيادته بشكل إضافي من خلال التكبير / التصغير.

على الرغم من أن المطورين يمكنهم استخدام rems ، فلن يكون لدي أي إزعاج.

لا تفعل هذا

.hero {
  font-size: 16px;
}

يمكنك القيام بالأمر

.hero {
  font-size: 1rem;
}