‏هدر مورب جدول، این‌بار قابل‌دسترس

یه همکار از نویسنده پرسیده بود که چطور باید یه جدول رو که سلول گوشه‌اش با یه خط مورب به دو هدر تقسیم می‌شه (یکی مال ستون‌ها، یکی مال ردیف‌ها) به‌درستی markup کرد؛ همون چیزی که تو مستندات Apollo 16 دیده بود. اولین فکر نویسنده این بود که دو تا span بذاره تو همون سلول و با grid یا position جاشون بده، ولی به گفتهٔ خودش دسترسی‌پذیری این روش (که Wikipedia هم استفاده می‌کنه) مشکوک به‌نظر می‌رسید، برای همین رفت سراغ یه راه دیگه.

نویسنده می‌گه وقتی ایده‌اش رو با کارشناس‌های دسترسی‌پذیری مثل Alice Boxhall و Adrian Roselli مطرح کرد، اونا یه ایراد گرفتن: ردیف دومِ هدر که یه ردیف کامل از سلول‌ها نیست، قانون WCAG 1.3.3 رو نقض می‌کنه. راه‌حل پیشنهادیشون این بود که بیشتر سلول‌های ردیف اول با rowspan="2" کشیده بشن پایین:

<thead>
  <tr>
    <th scope="row">SCIENTIFIC DISCIPLINE</th>
    <th scope="col" rowspan="2">GEOLOGY</th>
    <th scope="col" rowspan="2">GEOPHYSICS</th>
    <th scope="col" rowspan="2">GEOCHEMISTRY</th>
  </tr>
  <tr>
    <th scope="col">EXPERIMENT</th>
  </tr>
</thead>

با این تغییر، گشت‌وگذار تو جدول کامل و بی‌نقص نشد ولی به گفتهٔ نویسنده به‌اندازه کافی قابل‌قبول بود. برای بخش ظاهری هم تا اون سلول گوشه چپ-بالا حالت مورب بگیره، رو به‌صورت relative پوزیشن می‌کنه و ردیف دوم رو absolute می‌ذاره روی ردیف اول، چسبیده به گوشه پایین-چپ:

thead {
  position: relative;
}
thead tr:nth-child(2) th {
  position: absolute;
  bottom: 0;
  left: 0;
}

بعد یه گرادیان خطی به‌عنوان background می‌ذاره تو سلول اول تا اون خط مورب کشیده بشه. نویسنده می‌گه گرید رو هم امتحان کرد ولی چیز بیشتری به position اضافه نمی‌کرد و دردسرهای خودشو داشت، مثلاً مجبور می‌شدی کل جدول رو به grid تبدیل کنی تا ستون‌ها هم‌تراز بمونن.

بزرگ‌ترین گیر کار Safari هست: این مرورگر فعلاً relative positioning رو روی اعمال نمی‌کنه (روی می‌کنه) و چیدمان به‌هم می‌ریزه. نویسنده می‌گه یه باگ بازِ موجود براش پیدا کرده و برای دور زدنش مجبور شده با یه ترفند مخصوص Safari (با @supports و خاصیت -apple-system-body) کار کنه؛ خودش هم از این راه‌حل خوشش نمیاد ولی می‌گه عمل‌گرا بوده و جواب می‌ده. در آخر هم نظر بقیه، مخصوصاً کاربرهای screen reader رو می‌خواد که بگن این راه‌حل به‌اندازه کافی خوب هست یا نه.

نکات کلیدی:

• ردیف ناقص تو هدر جدول قانون WCAG 1.3.3 رو نقض می‌کنه؛ راه‌حل، rowspan روی سلول‌های ردیف اوله
• ظاهر مورب با relative/absolute positioning و یه گرادیان خطی CSS ساخته می‌شه، نه با span دوتایی
• Safari هنوز relative positioning رو روی thead اعمال نمی‌کنه و یه باگ بازِ موجود داره
• نویسنده هنوز مطمئن نیست این راه‌حل برای screen readerها به‌اندازه کافی خوب باشه و نظر کاربرها رو می‌خواد