قابل رسائی فرنٹ اینڈ کمپوننٹس کی تعمیر

رسائی (Accessibility) ایک ضرورت ہے۔ کوئی انتخاب نہیں۔

کوڈنگ سے پہلے منصوبہ بندی کریں۔ اپنے صارفین کی فہرست بنائیں۔

  • اسکرین ریڈر استعمال کرنے والے صارفین۔
  • صرف کی بورڈ استعمال کرنے والے صارفین۔
  • رنگوں کی تفریق نہ کر پانے والے (color blind) صارفین۔

سب سے پہلے نیٹیو HTML استعمال کریں۔

  • بٹنوں کے لیے button ٹیگز استعمال کریں۔
  • فارمز کے لیے input ٹیگز استعمال کریں۔
  • ARIA صرف اس وقت شامل کریں جب نیٹیو HTML ناکام ہو جائے۔

کی بورڈ کو ترجیح دیں۔

  • یقینی بنائیں کہ ہر کنٹرول ماؤس کے بغیر کام کرے۔
  • فوکس انڈیکیٹرز (focus indicators) کو نمایاں رکھیں۔
  • ماڈلز (modals) میں فوکس کو محدود (trap) رکھیں۔

صرف بصارت سے بڑھ کر چیزوں کے لیے ڈیزائن کریں۔

  • غلطیوں کو ظاہر کرنے کے لیے صرف رنگ کا استعمال نہ کریں۔
  • الرٹس (alerts) میں ٹیکسٹ لیبلز شامل کریں۔
  • اپنے کنٹراسٹ ریشو (contrast ratios) کو چیک کریں۔

غلطیوں کو بہتر طریقے سے سنبھالیں۔

  • صارفین کو غلطیاں درست کرنے کے واضح طریقے فراہم کریں۔
  • غلط ان پٹس کے لیے aria-invalid استعمال کریں۔
  • اپ ڈیٹس کے لیے aria-live استعمال کریں۔

اپنے کام کی جانچ کریں۔

  • axe-core یا Lighthouse استعمال کریں۔
  • اپنی سائٹ کو اسکرین ریڈر کے ساتھ آزمائیں۔
  • ہر بٹن کو Tab key کے ساتھ چیک کریں۔

کسٹم divs کے بجائے نیٹیو ایلیمنٹس کا انتخاب کریں۔ یہ وقت بچاتا ہے اور بہتر کام کرتا ہے۔

ماخذ: https://dev.to/therizwansaleem/building-accessible-inclusive-frontend-components-patterns-patterns-patterns-1aem