یہ ایک چھوٹی سی سیریز میں دوسری پوسٹ ہونے جا رہی ہے جو ہم فارم تک رسائی پر کر رہے ہیں۔ اگر آپ نے پہلی پوسٹ چھوٹ دی ہے تو چیک کریں۔ سیوڈو کلاسز کے ساتھ قابل رسائی فارم. اس پوسٹ میں ہم دیکھیں گے :focus-visible اور اسے اپنی ویب سائٹس میں کیسے استعمال کیا جائے!

فوکس ٹچ پوائنٹ

اس سے پہلے کہ ہم آگے بڑھیں۔ :focus-visibleآئیے دوبارہ دیکھیں کہ کیسے :focus آپ کے سی ایس ایس میں کام کرتا ہے۔ فوکس وہ بصری اشارے ہے جس کے ساتھ کی بورڈ، ماؤس، ٹریک پیڈ، یا معاون ٹیکنالوجی کے ذریعے کسی عنصر کے ساتھ بات چیت کی جا رہی ہے۔ کچھ عناصر قدرتی طور پر انٹرایکٹو ہوتے ہیں، جیسے لنکس، بٹن اور فارم عناصر۔ ہم اس بات کو یقینی بنانا چاہتے ہیں کہ ہمارے صارفین جانتے ہیں کہ وہ کہاں ہیں اور وہ کیا بات چیت کر رہے ہیں۔

یاد رکھیں اپنے CSS میں ایسا نہ کریں۔!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

جب آپ فوکس ہٹاتے ہیں، تو آپ اسے اس کے لیے ہٹا دیتے ہیں۔ ہر کوئی! ہم اس بات کو یقینی بنانا چاہتے ہیں کہ ہم توجہ کو محفوظ کر رہے ہیں۔

اگر کسی وجہ سے آپ کو توجہ ہٹانے کی ضرورت ہے، تو یقینی بنائیں کہ فال بیک بھی ہے۔ :focus آپ کے صارفین کے لیے اسٹائل۔ وہ فال بیک آپ کے برانڈنگ رنگوں سے میل کھا سکتا ہے، لیکن یقینی بنائیں کہ وہ رنگ بھی قابل رسائی ہیں۔ اگر مارکیٹنگ، ڈیزائن، یا برانڈنگ ڈیفالٹ فوکس رنگ کے انداز کو پسند نہیں کرتی ہے، تو اب وقت آگیا ہے کہ بات چیت شروع کریں اور اسے دوبارہ شامل کرنے کے بہترین طریقے پر ان کے ساتھ تعاون کریں۔

کیا ہے focus-visible?

چھدم کلاس، :focus-visible، بالکل ہمارے ڈیفالٹ کی طرح ہے۔ :focus چھدم کلاس. یہ صارف کو یہ اشارہ دیتا ہے کہ صفحہ پر کچھ توجہ مرکوز کی جا رہی ہے۔ جس طرح سے آپ لکھتے ہیں۔ :focus-visible کٹ اور خشک ہے:

:focus-visible {
  /* ... */
}

استعمال کرتے وقت :focus-visible ایک مخصوص عنصر کے ساتھ، نحو کچھ اس طرح نظر آتا ہے:

.your-element:focus-visible {
  /*...*/
}

استعمال کرنے کے بارے میں بڑی بات۔ :focus-visible کیا آپ اپنے عنصر کو نمایاں کر سکتے ہیں، روشن اور جرات مندانہ! اس کے بارے میں فکر کرنے کی ضرورت نہیں ہے کہ آیا عنصر کو کلک/ٹیپ کیا گیا ہے۔ اگر آپ کلاس کو لاگو نہ کرنے کا انتخاب کرتے ہیں، تو پہلے سے طے شدہ صارف ایجنٹ فوکس رِنگ ہوگا جو کچھ لوگوں کے لیے ناپسندیدہ ہے۔

کی پچھلی کہانی focus-visible

اس سے پہلے کہ ہمارے پاس تھا۔ :focus-visible، صارف ایجنٹ اسٹائل لاگو ہوگا۔ :focus صفحہ پر زیادہ تر عناصر تک؛ بٹن، لنکس وغیرہ۔ یہ فوکس ایبل عنصر پر آؤٹ لائن یا "فوکس رنگ" کا اطلاق کرے گا۔ یہ بدصورت سمجھا جاتا تھا، زیادہ تر کو براؤزر کی فراہم کردہ ڈیفالٹ فوکس رنگ پسند نہیں تھی۔ فوکس رِنگ دیکھنے کے لیے ناموافق ہونے کے نتیجے میں، زیادہ تر مصنفین نے اسے ہٹا دیا… بغیر کسی فال بیک کے۔ یاد رکھیں، جب آپ ہٹاتے ہیں :focus، یہ استعمال میں کمی لاتا ہے اور کی بورڈ صارفین کے لیے تجربہ کو ناقابل رسائی بنا دیتا ہے۔

ویب کی موجودہ حالت میں، براؤزر اب ظاہری طور پر مختلف عناصر کے ارد گرد فوکس کی نشاندہی نہیں کرتا جب ان پر فوکس ہوتا ہے۔ اس کے بجائے براؤزر مختلف ہورسٹکس کا استعمال کرتا ہے تاکہ یہ تعین کیا جا سکے کہ یہ صارف کی کب مدد کرے گا، بدلے میں فوکس رِنگ فراہم کرتا ہے۔ کے مطابق خان اکیڈمیایک تحقیقی ہے، "ایک تکنیک جو اچھے انتخاب تلاش کرنے کے لیے الگورتھم کی رہنمائی کرتی ہے۔"

اس کا مطلب یہ ہے کہ براؤزر اس بات کا پتہ لگا سکتا ہے کہ صارف کی بورڈ، ماؤس، یا ٹریک پیڈ سے تجربے کے ساتھ تعامل کر رہا ہے یا نہیں اور اس ان پٹ قسم کی بنیاد پر، یہ فوکس رنگ کو جوڑتا یا ہٹاتا ہے۔ اس پوسٹ میں مثال ان پٹ کے تعامل کو نمایاں کرتی ہے۔

ابتدائی دنوں میں :focus-visible ہم استعمال کر رہے تھے a پولی فل ایلس باکس ہال اور برائن کارڈیل کی طرف سے بنائی گئی فوکس رِنگ کو سنبھالنے کے لیے، موزیلا بھی اپنی سیڈو کلاس کے ساتھ سامنے آئی، :moz-focusring، سرکاری تفصیلات سے پہلے۔ اگر آپ فوکس رنگ کے ابتدائی دنوں کے بارے میں مزید جاننا چاہتے ہیں تو چیک آؤٹ کریں۔ A11y کاسٹ روب ڈوڈسن کے ساتھ۔

توجہ کی اہمیت

آپ کی درخواست میں توجہ مرکوز کرنے کی بہت ساری وجوہات ہیں۔ ایک تو، جیسا کہ میں نے اوپر کہا، ہمیں ویب کے سفیروں کے طور پر یہ یقینی بنانا ہوگا کہ ہم بہترین، قابل رسائی تجربہ فراہم کر رہے ہیں۔ ہم نہیں چاہتے کہ ہمارے صارفین میں سے کوئی یہ اندازہ لگائے کہ وہ کہاں ہیں جب وہ تجربے کے ذریعے نیویگیشن کر رہے ہیں۔

ایک مثال جو ہمیشہ ذہن میں آتی ہے۔ دو نابینا بھائیوں کی ویب سائٹ. اگر آپ ویب سائٹ پر جاتے ہیں اور کلک/ٹیپ کرتے ہیں (یہ موبائل پر کام کرتا ہے)، نیچے بائیں کونے میں بند آنکھ، آپ کو آنکھ کھلی نظر آئے گی اور ایک سمولیشن شروع ہو جائے گا۔ بریڈ فورڈ اور برائن میننگ دونوں بھائیوں کو سٹارگارڈ کی بیماری کی چھوٹی عمر میں تشخیص ہوئی تھی۔ سٹارگارڈ کی بیماری آنکھ کے میکولر انحطاط کی ایک شکل ہے۔ وقت کے ساتھ ساتھ دونوں بھائی بالکل نابینا ہو جائیں گے۔ سائٹ پر جائیں اور یہ دیکھنے کے لیے آنکھ پر کلک کریں کہ وہ کیسے دیکھتے ہیں۔

اگر آپ ان کے جوتوں میں تھے اور آپ کو کسی صفحے پر جانا پڑا، تو آپ اس بات کو یقینی بنانا چاہیں گے کہ پورے تجربے میں آپ کو بخوبی معلوم ہو کہ آپ کہاں تھے۔ فوکس کی انگوٹھی آپ کو وہ طاقت دیتی ہے۔

ڈیمو

ذیل میں ڈیمو دکھاتا ہے کہ کیسے :focus-visible آپ کے CSS میں شامل ہونے پر کام کرتا ہے۔ ویڈیو کا پہلا حصہ ماؤس کے ساتھ نیویگیٹ کرتے وقت تجربہ دکھاتا ہے دوسرا صرف میرے کی بورڈ کے ذریعے نیویگیٹ کرتا ہے۔ میں نے خود کو بھی ریکارڈ کیا تاکہ یہ ظاہر کیا جا سکے کہ میں نے اپنے ماؤس کے استعمال سے اپنے کی بورڈ پر سوئچ کیا ہے۔

براؤزر یہ پیش گوئی کر رہا ہے کہ میرے ان پٹ (کی بورڈ/ماؤس) کی بنیاد پر فوکس رِنگ کے ساتھ کیا کرنا ہے، اور پھر ان عناصر میں فوکس رنگ شامل کرنا۔ اس صورت میں، جب میں کی بورڈ کے ساتھ اس مثال کے ذریعے نیویگیٹ کر رہا ہوں، ہر چیز پر فوکس ہو جاتا ہے۔ ماؤس کا استعمال کرتے وقت، صرف ان پٹ پر فوکس ہوتا ہے اور بٹن نہیں ہوتے۔ اگر آپ ہٹا دیں۔ :focus-visible، براؤزر ڈیفالٹ فوکس رنگ کا اطلاق کرے گا۔

نیچے کا کوڈ لاگو ہو رہا ہے۔ :focus-visible توجہ مرکوز کرنے والے عناصر کی طرف۔

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

اگر آپ اس کی وضاحت کرنا چاہتے ہیں۔ label یا وصول کرنے کے لیے بٹن :focus-visible صرف اس کے ساتھ کلاس شروع کریں۔ input or button بالترتیب.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

معاونت

اگر براؤزر سپورٹ نہیں کرتا ہے۔ :focus-visible آپ تعامل کو سنبھالنے کے لئے اپنی جگہ پر گر سکتے ہیں۔ نیچے کا کوڈ سے ہے۔ MDN کھیل کا میدان. آپ استعمال کرسکتے ہیں حمایت کرتا ہے۔ اصول پر یا "خصوصی استفسار" سپورٹ چیک کرنے کے لیے۔ ذہن میں رکھنے کے لئے ایک چیز، اصول کوڈ کے سب سے اوپر رکھا جانا چاہئے یا کسی دوسرے گروپ کے اصول کے اندر اندر اندر رکھا جانا چاہئے.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

مزید رسائی کے خدشات

اپنے تجربے کو تیار کرتے وقت ذہن میں رکھنے کے قابل رسائی خدشات:

• اس بات کو یقینی بنائیں کہ آپ اپنے فوکس انڈیکیٹر کے لیے جو رنگ منتخب کرتے ہیں، اگر بالکل نہیں، تو پھر بھی اس میں درج معلومات کے مطابق قابل رسائی ہیں۔ WCAG 2.2 نان ٹیکسٹ کنٹراسٹ (لیول AA)
• علمی اوورلوڈ صارف کی پریشانی کا سبب بن سکتا ہے۔ اس بات کو یقینی بنائیں کہ مختلف متعامل عناصر پر سٹائل کو مستقل رکھیں

براؤزر سپورٹ۔

روابط

• SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
• پلیٹو ڈیٹا ڈاٹ نیٹ ورک ورٹیکل جنریٹو اے آئی۔ اپنے آپ کو بااختیار بنائیں۔ یہاں تک رسائی حاصل کریں۔
• پلیٹوآئ اسٹریم۔ ویب 3 انٹیلی جنس۔ علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• پلیٹو ای ایس جی۔ کاربن، کلین ٹیک، توانائی ، ماحولیات، شمسی، ویسٹ مینجمنٹ یہاں تک رسائی حاصل کریں۔
• پلیٹو ہیلتھ۔ بائیوٹیک اینڈ کلینیکل ٹرائلز انٹیلی جنس۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/managing-user-focus-with-focus-visible/