سیوڈو کلاسز کے ساتھ قابل رسائی فارم

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

فارم کی رسائی؟

آپ نے غالباً ہر جگہ "رسائی" کی اصطلاح سنی ہو گی یا نمبر، a11y۔ اس کا کیا مطلب ہے؟ یہ بہت سارے جوابات کے ساتھ ایک بہت اچھا سوال ہے۔ جب ہم طبعی دنیا کو دیکھتے ہیں، تو رسائی کا مطلب ہے کہ آپ کے کاروبار میں آپ کے باتھ رومز میں تیز کنٹینرز رکھنا، اس بات کو یقینی بنانا کہ پہیے سے مدد کرنے والے لوگوں کے لیے ریمپ موجود ہوں، اور ہر اس شخص کے لیے ہاتھ میں بڑے پرنٹ کی بورڈ جیسے پیری فیرلز کا ہونا جس کی ضرورت ہے۔

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

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

توجہ مرکوز کرنے کا طریقہ

فوکس، رسائی اور ویب کے تجربے کے حوالے سے، وہ بصری اشارے ہے کہ صفحہ پر، UI میں، یا کسی جزو کے اندر کسی چیز کے ساتھ بات چیت کی جا رہی ہے۔ CSS بتا سکتا ہے کہ ایک انٹرایکٹو عنصر کب فوکس ہوتا ہے۔

ہمیشہ اس بات کو یقینی بنائیں کہ فوکس انڈیکیٹر یا فوکس ایبل عناصر کے گرد انگوٹھی تجربے کے ذریعے مناسب رنگ کے تضاد کو برقرار رکھتی ہے۔

فوکس اس طرح لکھا جاتا ہے اور اگر آپ اسے اسٹائل کرنے کا انتخاب کرتے ہیں تو آپ کی برانڈنگ سے مماثل اسٹائل کیا جا سکتا ہے۔

:focus {
  * / INSERT STYLES HERE /*
}

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

*جو نیچے ہے وہ مت کرو!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

اندر دیکھو!

CSS کا استعمال کرتے ہوئے توجہ مرکوز کرنے کے بہترین طریقوں میں سے ایک یہ ہے کہ یہ مضمون کیا ہے۔ اگر آپ نے چیک آؤٹ نہیں کیا ہے۔ :focus-within چھدم کلاس، یقینی طور پر اس پر ایک نظر ڈالیں! جب سیمنٹک مارک اپ اور سی ایس ایس استعمال کرنے کی بات آتی ہے تو بہت سے پوشیدہ جواہرات ہوتے ہیں، اور یہ ان میں سے ایک ہے۔ بہت ساری چیزیں جنہیں نظر انداز کیا جاتا ہے وہ ڈیفالٹ کے ذریعے قابل رسائی ہوتی ہیں، مثال کے طور پر، سیمنٹک مارک اپ ڈیفالٹ کے ذریعے قابل رسائی ہے اور اسے ہر وقت div's پر استعمال کیا جانا چاہیے۔

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/ur/">Home</a></li>
      <li><a href="/ur/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

۔ header, nav, main, section, aside، اور footer تمام معنوی عناصر ہیں۔ دی h1 اور ul معنوی اور قابل رسائی بھی ہیں۔

جب تک کہ کوئی حسب ضرورت جزو نہ ہو جسے تخلیق کرنے کی ضرورت ہے، تب تک a div استعمال کرنے کے لئے ٹھیک ہے، کے ساتھ جوڑا ARIA (قابل رسائی رچ انٹرنیٹ ایپلی کیشنز). ہم بعد کی پوسٹ میں ARIA میں گہرا غوطہ لگا سکتے ہیں۔ ابھی کے لیے آئیے فوکس کرتے ہیں…دیکھتے ہیں کہ میں نے وہاں کیا کیا…اس سی ایس ایس سیڈو کلاس پر۔

۔ :focus-within pseudo class آپ کو کسی عنصر کو منتخب کرنے کی اجازت دیتا ہے جب اس میں موجود کسی بھی نزولی عنصر پر فوکس ہو۔

:focus-within کارروائی میں!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

اوپر دیا گیا مثالی کوڈ نارنجی کا پس منظر کا رنگ شامل کرے گا، کچھ پیڈنگ شامل کرے گا، اور لیبل کا رنگ سیاہ میں بدل دے گا۔

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

استعمال کرنے کے لیے ایک اور کیس :focus-within کم بصارت والے صارفین کے لیے لیبلز کو بولڈ، ایک مختلف رنگ، یا ان کو بڑا کرنا ہوگا۔ اس کے لیے مثالی کوڈ کچھ نیچے کی طرح نظر آئے گا۔

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within کے مطابق پورے بورڈ میں براؤزر کی زبردست سپورٹ بھی ہے۔ کیا میں استعمال کر سکتا ہوں.

نتیجہ

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

جامع جگہیں بنانے کے لیے سیمنٹک مارک اپ اور سی ایس ایس جیسی ٹیکنالوجی کا استعمال ویب کو ایک بہتر جگہ بنانے میں ایک اہم حصہ ہے، آئیے آگے بڑھتے رہیں اور زندگی بدلتے رہیں۔

CSS-Tricks on پر یہاں ایک اور زبردست وسیلہ دیکھیں استعمال کرتے ہوئے :focus-within.

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