ایچ ٹی ایم ایل کی فہرستیں بورنگ ہیں۔ وہ نہیں کرتے do بہت زیادہ، اس لیے ہم ان کے بارے میں نہیں سوچتے ہیں باوجود اس کے کہ وہ کتنے بڑے پیمانے پر استعمال ہوتے ہیں۔ اور ہم اب بھی وہی کام کرنے کے قابل ہیں جو ہم نے ہمیشہ انہیں اپنی مرضی کے مطابق کرنے کے لیے کیے ہیں، جیسے مارکر کو ہٹانا، ترتیب کو تبدیل کرنا، اور حسب ضرورت کاؤنٹر بنانا۔

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

واضح کرنے کے لیے، یہ وہ HTML عناصر ہیں جن کے بارے میں ہم بات کر رہے ہیں:

• آرڈر کردہ فہرستیں۔ <ol>
• بے ترتیب فہرستیں۔ <ul>
• تفصیل کی فہرستیں۔ <dl>
• انٹرایکٹو فہرستیں۔ <menu>

ترتیب شدہ فہرستیں، غیر ترتیب شدہ فہرستیں، اور متعامل فہرستوں میں فہرست اشیاء شامل ہیں (<li>) جو ہم کس قسم کی فہرست کے ساتھ کام کر رہے ہیں اس کے مطابق دکھائے جاتے ہیں۔ ایک ترتیب شدہ فہرست (<ol>) فہرست اشیاء کے آگے نمبر دکھاتا ہے۔ غیر ترتیب شدہ فہرستیں (<ul>) اور مینو عناصر (<menu>) فہرست اشیاء کے آگے بلٹ پوائنٹس دکھاتا ہے۔ ہم ان کو "لسٹ مارکر" کہتے ہیں اور وہ سٹائل بھی کر سکتے ہیں کا استعمال کرتے ہوئے ::مارکر چھدم عنصر. تفصیل کی فہرستیں وضاحت کی اصطلاحات استعمال کرتی ہیں (<dt>) اور تفصیل کی تفصیلات (<dd>) کے بجائے <li> اور فہرست مارکر نہیں ہے. سمجھا جاتا ہے کہ وہ میٹا ڈیٹا اور لغت کو ظاہر کرنے کے لیے استعمال کیے جائیں گے، لیکن میں یہ نہیں کہہ سکتا کہ میں نے انہیں کبھی جنگل میں دیکھا ہے۔

آئیے آسان چیزوں کے ساتھ شروعات کریں — فہرست کے انداز کو درست طریقے سے (کم از کم میری رائے میں) دوبارہ ترتیب دینے کا طریقہ۔ اس کے بعد، ہم مضحکہ خیز پر روشنی ڈالنے سے پہلے رسائی کے چند مسائل پر ایک نظر ڈالیں گے۔ <menu> عنصر، جسے جان کر آپ حیران رہ سکتے ہیں… دراصل فہرست کی ایک قسم بھی ہے!

فہرست کے انداز کو دوبارہ ترتیب دینا

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

مثال کے طور پر، ہم فہرست آئٹمز کے آگے مارکر کو آسانی سے ہٹا سکتے ہیں۔ یہاں کچھ نیا نہیں:

/* Zap all list markers! */
ol, ul, menu { list-style: none;
}

لیکن جدید سی ایس ایس کے پاس مخصوص فہرست مثالوں کو نشانہ بنانے میں ہماری مدد کرنے کے نئے طریقے ہیں۔ ہم کہتے ہیں کہ ہم تمام فہرستوں سے مارکر کو صاف کرنا چاہتے ہیں، سوائے اس کے کہ وہ فہرستیں ظاہر ہوں۔ طویل شکل کا مواد، جیسے ایک مضمون. اگر ہم نئے سی ایس ایس سیوڈو کلاس فنکشنز کی طاقتوں کو یکجا کرتے ہیں۔ :where() اور :not()، ہم ان مثالوں کو الگ تھلگ کر سکتے ہیں اور ان صورتوں میں مارکروں کی اجازت دے سکتے ہیں:

/* Where there are lists that are not articles where there are lists... */
:where(ol, ul, menu):not(article :where(ol, ul, menu)) { list-style: none;
}

استعمال کیوں :where() بجائے :is()? کی خصوصیت :where() ہمیشہ صفر ہے، جبکہ :is() اپنے سلیکٹرز کی فہرست میں سب سے مخصوص عنصر کی خاصیت لیتا ہے۔ تو، استعمال کرتے ہوئے :where() چیزوں کو اوور رائیڈ کرنے کا ایک کم طاقتور طریقہ ہے اور آسانی سے خود کو اوور رائیڈ کیا جا سکتا ہے۔

UA کی طرزیں فہرست آئٹم کے مواد کو اس کے مارکر سے جگہ دینے کے لیے پیڈنگ بھی لگاتی ہیں۔ ایک بار پھر، یہ کچھ معاملات میں باکس کے بالکل باہر ایک بہت ہی عمدہ استطاعت ہے، لیکن اگر ہم پہلے ہی فہرست مارکر کو ہٹا رہے ہیں جیسا کہ ہم نے اوپر کیا تھا، تو ہم اس پیڈنگ کو بھی مٹا سکتے ہیں۔ کے لیے یہ ایک اور کیس ہے۔ :where():

:where(ol, ul, menu) { padding-left: 0; /* or padding-inline-start */
}

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

یاد رکھیں کہ UA طرزیں ایک اضافی لاگو کرتی ہیں۔ 40px کرنے کے لئے <menu> عنصر

لہذا ہم کیا کرنا چاہتے ہیں فہرست مارکروں کو کنٹینر کے باہر "لٹکنے" ​​سے روکنا ہے۔ ہم اسے کے ساتھ ٹھیک کر سکتے ہیں list-style-position جائیداد:

یا نہیں… شاید یہ اسٹائلسٹک ترجیح پر آتا ہے؟

فہرستوں کے ساتھ رسائی کے نئے خدشات

بدقسمتی سے، جب فہرستوں کی بات آتی ہے تو رسائی کے چند خدشات ہیں - یہاں تک کہ ان جدید دور میں بھی۔ ایک تشویش درخواست دینے کا نتیجہ ہے۔ list-style: none; جیسا کہ ہم نے UA اسٹائلز کو ری سیٹ کرتے وقت کیا تھا۔

مختصراً، سفاری نہیں ہے ترتیب شدہ اور غیر ترتیب شدہ فہرستیں پڑھیں list-style: none اصل فہرستوں کے طور پر، جیسے اسکرین ریڈر کے ساتھ مواد کو نیویگیٹ کرتے وقت۔ دوسرے لفظوں میں، مارکروں کو ہٹانے سے فہرست کے معنوی معنی بھی ختم ہو جاتے ہیں۔ دی اس فکس کے لیے درست کریں۔ اسے لاگو کرنے کے لئے اے آر آئی اے list فہرست میں کردار اور a listitem فہرست اشیاء میں کردار تو اسکرین ریڈرز انہیں اٹھا لیں گے:

<ol style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ol> <ul style="list-style: none;" role="list"> <li role="listItem">...</li> <li role="listItem">...</li> <li role="listItem">...</li>
</ul>

عجیب طور پر ، سفاری اسے ایک خصوصیت سمجھتا ہے۔ ایک کیڑے کے بجائے. بنیادی طور پر، صارفین رپورٹ کریں گے کہ اسکرین ریڈرز بہت زیادہ فہرستوں کا اعلان کر رہے ہیں (کیونکہ ڈویلپر ان کا زیادہ استعمال کرتے ہیں)، اس لیے اب، صرف وہی role="list" اسکرین ریڈرز کے ذریعہ اعلان کیا جاتا ہے، جو حقیقت میں اتنا عجیب نہیں ہے۔ سکاٹ اوہارا ہے ایک تفصیلی راستہ یہ سب کیسے نیچے چلا گیا.

دوسری قابل رسائی تشویش ہمارے اپنے بنانے میں سے ایک نہیں ہے (ہورے!) تو، آپ جانتے ہیں کہ کس طرح آپ کو سمجھا جاتا ہے ایک شامل کریں aria-label کرنے کے لئے <section> عنوانات کے بغیر عناصر؟ ٹھیک ہے، کبھی کبھی ایسی فہرست کے ساتھ ایسا کرنا سمجھ میں آتا ہے جس میں عنوان کا عنصر شامل نہ ہو جو فہرست کو بیان کرنے میں مدد کرتا ہو۔

<!-- This list is somewhat described by the heading -->
<section> <h2>Grocery list</h2> <ol role="list"> <!-- ... --> </ol>
</section> <!-- This list is described by the aria-label -->
<ol role="list" aria-label="Grocery list"> <!-- ... -->
</ol>

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

کسی حد تک متعلقہ خبروں میں، ایرک بیلی نے ایک بہترین تحریر لکھی۔ وہ کیوں اور کیسے سمجھتا ہے۔ aria-label ایک کوڈ بو ہونا.

رکو ، <menu> کیا ایک فہرست ہے؟

ٹھیک ہے، تو، آپ ممکنہ طور پر ان سب کے بارے میں سوچ رہے ہیں۔ <menu> عناصر جو میں کوڈ کی مثالوں میں پھسل رہا ہوں۔ یہ اصل میں انتہائی سادہ ہے؛ مینو غیر ترتیب شدہ فہرستیں ہیں سوائے اس کے کہ وہ انٹرایکٹو آئٹمز کے لیے ہیں۔ یہاں تک کہ وہ غیر ترتیب شدہ فہرستوں کے طور پر رسائی کے درخت کے سامنے آتے ہیں۔

سیمنٹک ویب کے ابتدائی دنوں میں، میں نے غلطی سے مان لیا کہ مینو ایسے ہی تھے۔ <nav>s یہ یقین کرنے سے پہلے کہ وہ سیاق و سباق کے مینو (یا "ٹول بار" کے بطور قیاس کا کہنا ہے کہ) کیونکہ ایچ ٹی ایم ایل اسپیک کے ابتدائی ورژن نے یہی کہا ہے۔ (MDN میں ایک دلچسپ تحریر ہے۔ سے متعلق تمام فرسودہ چیزوں پر <menu> اگر آپ بالکل دلچسپی رکھتے ہیں۔)

تاہم، آج یہ مینو استعمال کرنے کا سیمنٹک طریقہ ہے:

<menu aria-label="Share article"> <li><button>Email</button></li> <li><button>Twitter</button></li> <li><button>Facebook</button></li>
</menu>

ذاتی طور پر، میرے خیال میں اس کے لیے کچھ اچھے استعمال کے معاملات ہیں۔ <menu>. یہ آخری مثال لیبل میں لپیٹے ہوئے سماجی اشتراک کے بٹنوں کی فہرست دکھاتی ہے۔ <menu> عنصر، قابل ذکر پہلو یہ ہے کہ "مضمون کا اشتراک کریں" لیبل سیاق و سباق کی ایک اہم مقدار میں حصہ ڈالتا ہے جو بٹن کے کام کی وضاحت کرنے میں مدد کرتا ہے۔

کیا مینو بالکل ضروری ہے؟ نہیں۔ HTML نشانیاں? یقینا نہیں. لیکن اگر آپ کم لطف اندوز ہوتے ہیں تو وہ موجود ہیں۔ <div>s اور آپ کو ایسا لگتا ہے جیسے جزو استعمال کرسکتا ہے۔ aria-label اضافی سیاق و سباق کے لیے۔

اور کچھ؟

جی ہاں، مذکورہ بالا بھی ہے۔ <dl> (تفصیل کی فہرست) عنصر، تاہم، MDN ان کی فہرستوں پر غور نہیں کرتا اسی طرح — یہ اصطلاحات پر مشتمل گروپس کی فہرست ہے — اور میں یہ نہیں کہہ سکتا کہ میں نے انہیں واقعی استعمال میں دیکھا ہے۔ MDN کے مطابق، ان کا استعمال میٹا ڈیٹا، لغت، اور کلیدی قدر کے جوڑوں کی دیگر اقسام کے لیے ہونا چاہیے۔ میں ان سے صرف اس بنیاد پر بچوں گا کہ تمام اسکرین ریڈرز ان کا مختلف طریقے سے اعلان کرتے ہیں۔

لیکن آئیے چیزوں کو منفی نوٹ پر ختم نہ کریں۔ یہاں بہت عمدہ چیزوں کی ایک فہرست ہے جو آپ فہرستوں کے ساتھ کر سکتے ہیں:

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔یہاں کلک کریں
• پلیٹو بلاک چین۔ Web3 Metaverse Intelligence. علم میں اضافہ۔ یہاں تک رسائی حاصل کریں۔
• ماخذ: https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/