یہ ایک چھوٹی سی سیریز میں دوسری پوسٹ ہونے جا رہی ہے جو ہم فارم تک رسائی پر کر رہے ہیں۔ اگر آپ نے پہلی پوسٹ چھوٹ دی ہے تو چیک کریں۔ سیوڈو کلاسز کے ساتھ قابل رسائی فارم. اس پوسٹ میں ہم دیکھیں گے :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)
- علمی اوورلوڈ صارف کی پریشانی کا سبب بن سکتا ہے۔ اس بات کو یقینی بنائیں کہ مختلف متعامل عناصر پر سٹائل کو مستقل رکھیں
براؤزر سپورٹ۔
یہ براؤزر سپورٹ ڈیٹا سے ہے۔ کیا میں استعمال کر سکتا ہوں، جس میں مزید تفصیل ہے۔ ایک نمبر اشارہ کرتا ہے کہ براؤزر اس ورژن اور اس سے اوپر کے فیچر کو سپورٹ کرتا ہے۔
ڈیسک ٹاپ
کروم | فائر فاکس | IE | ایج | سفاری |
---|---|---|---|---|
86 | 4* | نہیں | 86 | 15.4 |
موبائل / ٹیبلٹ۔
Android کروم | Android فائر فاکس | اینڈرائڈ | iOS سفاری |
---|---|---|---|
123 | 124 | 123 | 15.4 |
روابط
- SEO سے چلنے والا مواد اور PR کی تقسیم۔ آج ہی بڑھا دیں۔
- پلیٹو ڈیٹا ڈاٹ نیٹ ورک ورٹیکل جنریٹو اے آئی۔ اپنے آپ کو بااختیار بنائیں۔ یہاں تک رسائی حاصل کریں۔
- پلیٹوآئ اسٹریم۔ ویب 3 انٹیلی جنس۔ علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
- پلیٹو ای ایس جی۔ کاربن، کلین ٹیک، توانائی ، ماحولیات، شمسی، ویسٹ مینجمنٹ یہاں تک رسائی حاصل کریں۔
- پلیٹو ہیلتھ۔ بائیوٹیک اینڈ کلینیکل ٹرائلز انٹیلی جنس۔ یہاں تک رسائی حاصل کریں۔
- ماخذ: https://css-tricks.com/managing-user-focus-with-focus-visible/
- : ہے
- : ہے
- : نہیں
- :کہاں
- $UP
- 09
- 1
- 11
- 12
- 13
- 16
- 22
- 27
- 2nd
- 31
- 7
- 8
- 9
- 91
- 98
- a
- ہمارے بارے میں
- اس کے بارے میں
- اوپر
- رسائی پذیری
- قابل رسائی
- کے مطابق
- شامل کیا
- انہوں نے مزید کہا
- جوڑتا ہے
- عمر
- ایجنٹ
- یلگورتم
- یلس
- تمام
- بھی
- ہمیشہ
- am
- سفیر
- an
- اور
- لوڈ، اتارنا Android
- ایک اور
- کوئی بھی
- درخواست
- کا اطلاق کریں
- درخواست دینا
- کیا
- ارد گرد
- AS
- At
- مصنفین
- واپس
- کی بنیاد پر
- BE
- اس سے پہلے
- شروع ہوتا ہے
- کیا جا رہا ہے
- نیچے
- BEST
- سیاہ
- جرات مندانہ
- سرحد
- دونوں
- پایان
- برانڈ
- برائن
- روشن
- بھائیوں
- براؤزر
- براؤزر
- برائن
- عمارت
- لیکن
- بٹن
- by
- آیا
- کر سکتے ہیں
- کیس
- کیونکہ
- کچھ
- چیک کریں
- انتخاب
- میں سے انتخاب کریں
- کروم
- طبقے
- کلک کریں
- بند
- کوڈ
- تعاون
- آتا ہے
- مکمل طور پر
- اندراج
- اس کے برعکس
- مکالمات
- کونے
- بنائی
- CSS
- موجودہ
- موجودہ حالت
- کٹ
- اعداد و شمار
- دن
- کم ہے
- سمجھا
- پہلے سے طے شدہ
- ڈیمو
- ڈیزائن
- تفصیل
- کا پتہ لگانے کے
- اس بات کا تعین
- DID
- بیماری
- تکلیف
- do
- کرتا
- نہیں کرتا
- کر
- نہیں
- اپنی طرف متوجہ
- خشک
- ابتدائی
- ایج
- عنصر
- عناصر
- وغیرہ
- سب کچھ
- بالکل
- مثال کے طور پر
- تجربہ
- آنکھ
- گر
- نمایاں کریں
- مل
- فائر فاکس
- پہلا
- توجہ مرکوز
- توجہ مرکوز
- کے لئے
- فارم
- فارم
- آگے
- سے
- ملتا
- GIF
- فراہم کرتا ہے
- Go
- جا
- اچھا
- عظیم
- گروپ
- ہدایات
- تھا
- ہینڈل
- ہے
- ہونے
- مدد
- ہائی
- پر روشنی ڈالی گئی
- ہوم پیج (-)
- کس طرح
- کیسے
- HTML
- HTTP
- HTTPS
- i
- ie
- if
- تصویر
- پر عملدرآمد
- اہم
- in
- قابل رسائی
- اشارہ کرتا ہے
- اشارے
- معلومات
- ان پٹ
- کے اندر
- کے بجائے
- بات چیت
- بات چیت
- بات چیت
- انٹرایکٹو
- iOS
- IT
- صرف
- رکھیں
- جان
- جانیں
- چھوڑ دیا
- سطح
- کی طرح
- لنکس
- اب
- دیکھو
- دیکھنا
- بنا
- بناتا ہے
- بنانا
- مینیجنگ
- مارجن
- مارکیٹنگ
- میچ
- کا مطلب ہے کہ
- برا
- یاد آیا
- موبائل
- زیادہ
- سب سے زیادہ
- منتقل
- آگے بڑھو
- موزیلا
- my
- خود
- تشریف لے جائیں
- تشریف لے جارہا ہے
- سمت شناسی
- ضرورت ہے
- نہیں
- کوئی بھی نہیں
- تعداد
- of
- سرکاری
- on
- ایک
- صرف
- کھول
- or
- ہمارے
- باہر
- خاکہ
- پر
- خود
- صفحہ
- حصہ
- مقام
- پلاٹا
- افلاطون ڈیٹا انٹیلی جنس
- پلیٹو ڈیٹا
- کافی مقدار
- پوسٹ
- طاقت
- پیش گوئی
- محفوظ کر رہا ہے
- فراہم
- فراہم کرنے
- وجہ
- وجوہات
- وصول
- موصول
- درج
- یاد
- ہٹا
- ہٹا دیا گیا
- ہٹاتا ہے
- بالترتیب
- نتیجہ
- واپسی
- رنگ
- روب
- حکمرانی
- سفاری
- دوسری
- دیکھنا
- سیریز
- ہونا چاہئے
- دکھائیں
- ظاہر
- شوز
- تخروپن
- سائٹ
- چھوٹے
- ٹھوس
- کچھ
- کچھ
- مخصوص
- تصریح
- کھڑے ہیں
- شروع کریں
- حالت
- نے کہا
- ابھی تک
- حمایت
- تائید
- کی حمایت کرتا ہے
- اس بات کا یقین
- سوئچ کریں
- نحو
- تکنیک
- ٹیکنالوجی
- کہ
- ۔
- کے بارے میں معلومات
- ان
- ان
- تو
- وہاں.
- وہ
- بات
- اس
- ان
- کے ذریعے
- بھر میں
- وقت
- کرنے کے لئے
- سب سے اوپر
- ٹرگر
- سچ
- دو
- قسم
- استعمالی
- استعمال کی شرائط
- رکن کا
- صارفین
- استعمال
- کا استعمال کرتے ہوئے
- مختلف
- مختلف
- ورژن
- کی طرف سے
- ویڈیو
- نظر
- دورہ
- بصری
- W3
- چاہتے ہیں
- تھا
- راستہ..
- we
- ویب
- ویب سائٹ
- اچھا ہے
- تھے
- کیا
- جب
- چاہے
- جس
- جبکہ
- پوری
- کیوں
- گے
- ساتھ
- بغیر
- کام کرتا ہے
- فکر
- گا
- تم
- نوجوان
- اور
- زیفیرنیٹ