آموزش HTML : دسترسیپذیری جدول HTML
در مقاله قبلی، به یکی از مهمترین ویژگیهای دسترسیپذیر کردن جداول HTML برای کاربران کمبینا - عنصر <th> - پرداختیم. در این مقاله، این مسیر را ادامه میدهیم و به ویژگیهای دسترسیپذیری بیشتر به جداول HTML مانند زیرنویسها/خلاصهها، گروهبندی ردیفها به بخشهای سر، بدنه و پاورقی جدول و تعیین محدوده ستونها و ردیفها میپردازیم.
استفاده از سرستونها و سر سطرها
صفحهخوانها تمام سرتیترها را شناسایی کرده و از آنها برای ایجاد ارتباط برنامهنویسیشده بین آن سرتیترها و سلولهایی که به آنها مربوط میشوند، استفاده میکنند. ترکیب سرتیترهای ستون و ردیف، دادههای هر سلول را شناسایی و تفسیر میکند، به طوری که کاربران صفحهخوان میتوانند جدول را مشابه یک کاربر بینا تفسیر کنند.
ما قبلاً در مقاله قبلی خود به سربرگها پرداختهایم - به افزودن سربرگ با عناصر <th> مراجعه کنید.
اضافه کردن عنوان به جدول با استفاده از <caption>
شما میتوانید با قرار دادن جدول خود درون یک عنصر و قرار دادن آن درون عنصر ، به آن عنوان (caption) بدهید. باید آن را درست زیر تگ آغازین قرار دهید.
همانطور که از مثال کوتاه بالا میتوانید استنباط کنید، عنوان جدول باید شامل توضیحی از محتوای جدول باشد. این برای همه خوانندگانی که میخواهند هنگام مرور صفحه، به سرعت متوجه شوند که آیا جدول برایشان مفید است یا خیر، مفید است، اما به ویژه برای کاربران نابینا. به جای اینکه یک صفحهخوان محتوای بسیاری از سلولها را فقط برای فهمیدن موضوع جدول بخواند، کاربر میتواند به عنوان آن تکیه کند و سپس تصمیم بگیرد که آیا جدول را با جزئیات بیشتری بخواند یا خیر.
عنوان جدول مستقیماً در زیر برچسب قرار میگیرد.
ویژگی summary همچنین میتواند در عنصر برای ارائه توضیحات استفاده شود - این توضیحات نیز توسط صفحهخوانها خوانده میشوند. با این حال، توصیه میکنیم به جای آن از عنصر استفاده کنید، زیرا summary منسوخ شده است و توسط کاربران بینا قابل خواندن نیست (در صفحه نمایش داده نمیشود).
افزودن ساختار با <thead> و <tbody> و <tfoot>
هرچه ساختار جداول شما کمی پیچیدهتر میشود، مفید است که تعریف ساختاری بیشتری به آنها بدهید. یک راه روشن برای انجام این کار استفاده از و است که به شما امکان میدهد بخشهای سربرگ، بدنه و پاورقی را برای جدول مشخص کنید.
این عناصر لزوماً جدول را برای کاربران صفحهخوان قابل دسترستر نمیکنند. آنها به خودی خود هیچ بهبود بصری ایجاد نمیکنند، اما برای اعمال بهبودهای ظاهری و طرحبندی از طریق CSS بسیار مفید هستند که میتواند دسترسیپذیری را بهبود بخشد. برای مثالهای جالب، در مورد یک جدول طولانی، میتوانید سربرگ و پاورقی جدول را در هر صفحه چاپ شده تکرار کنید و میتوانید بدنه جدول را در یک صفحه نمایش دهید و با پیمایش به بالا و پایین، محتویات را در دسترس داشته باشید.
برای استفاده از آنها، باید به ترتیب زیر قرار گیرند:
- عنصر باید بخشی از جدول که هدر است را در بر بگیرد - این معمولاً اولین ردیفی است که شامل عنوان ستونها میشود، اما لزوماً همیشه اینطور نیست. اگر از عناصر استفاده میکنید، هدر جدول باید درست زیر آنها قرار گیرد.
- عنصر باید بخش اصلی محتوای جدول را که هدر یا پاورقی جدول نیست، در بر بگیرد و باید بعد از بیاید.
- عنصر باید بخشی از جدول را که پاورقی است در بر بگیرد - برای مثال، این میتواند یک ردیف نهایی با موارد موجود در ردیفهای قبلی باشد که با هم جمع شدهاند. باید بعد از بیاید.
اگر را در کد خود مشخص نکنید، همیشه به طور ضمنی در هر جدولی گنجانده میشود. برای بررسی این موضوع، یکی از مثالهای قبلی خود را که شامل نمیشود باز کنید و به کد HTML در ابزارهای توسعهدهنده مرورگر خود نگاه کنید - خواهید دید که مرورگر این تگ را برای شما اضافه کرده است. ممکن است تعجب کنید که چرا اصلاً باید زحمت گنجاندن آن را بکشید - باید این کار را بکنید، زیرا کنترل بیشتری بر ساختار و استایل جدول شما میدهد.
افزودن ساختار به جدول ثبت هزینهها
بیایید شما این عناصر جدید را به کار بگیرید.
اول از همه، یک فایل HTML جدید به نام spending-record.html ایجاد کنید و کد HTML زیر را درون آن قرار دهید:
سپس، یک فایل CSS به نام minimal-table.css در همان دایرکتوری که فایل HTML شما قرار دارد، ایجاد کنید و آن را با محتوای زیر پر کنید:
سعی کنید ردیف هدرهای واضح را درون یک عنصر ، ردیف "SUM" را درون یک عنصر و بقیه محتوا را درون یک عنصر قرار دهید.
در مرحله بعد، یک ویژگی colspan اضافه کنید تا سلول "SUM" در چهار ستون اول قرار گیرد، بنابراین عدد واقعی در پایین ستون "Cost" ظاهر میشود.
بیایید کمی استایلبندی ساده به جدول اضافه کنیم تا ببینیم این عناصر چقدر برای اعمال CSS مفید هستند. موارد زیر را به فایل CSS خود اضافه کنید:
ذخیره و رفرش کنید و به نتیجه نگاهی بیندازید. اگر عناصر و در جای خود نبودند، برای اعمال همان استایلبندی، باید انتخابگرها/قوانین بسیار پیچیدهتری مینوشتید.
ما انتظار نداریم که شما الان CSS را کاملاً درک کنید. وقتی ماژولهای CSS ما را بررسی کنید، در این مورد بیشتر خواهید آموخت.
میتوان ویژگی scope را به عنصر اضافه کرد تا به صفحهخوانها بگوید که دقیقاً سربرگ مربوط به کدام سلولها است - آیا برای ردیفی که در آن قرار دارد، سربرگ است یا مثلاً برای ستون؟ با نگاهی به مثال رکورد هزینه از قبل، میتوانید به طور واضح سربرگهای ستون را به صورت سربرگ ستون به این صورت تعریف کنید:
و هر ردیف میتواند یک سرصفحه به این شکل تعریف کند (اگر علاوه بر سرصفحه ستون، سرصفحه ردیفها را نیز اضافه کنیم):
خوانندگان صفحه نمایش، نشانهگذاریهایی که به این شکل ساختار یافتهاند را تشخیص میدهند و به کاربران خود اجازه میدهند که مثلاً کل ستون یا ردیف را به طور همزمان بخوانند.
scope دو مقدار دیگر نیز دارد - colgroup و rowgroup. این دو مقدار برای عنوانهایی استفاده میشوند که بالای چندین ستون یا ردیف قرار میگیرند. اگر به جدول "اقلام فروخته شده در آگوست ۲۰۱۶" نگاهی بیندازید، خواهید دید که سلول "Clothes" بالای سلولهای "Trousers"، "Skirts" و "Dresses" قرار دارد. همه این سلولها باید به عنوان سربرگ () علامتگذاری شوند، اما "Clothes" عنوانی است که بالای سر قرار میگیرد و سه زیرعنوان دیگر را تعریف میکند. بنابراین "Clothes" باید یک ویژگی داشته باشد، در حالی که بقیه ویژگی را دریافت میکنند:
یک جایگزین برای استفاده از ویژگی scope، استفاده از ویژگیهای id و headers برای ایجاد ارتباط بین سلولهای داده و سلولهای header است.
یک عنصر میتواند برای یک سلول داده () یا در جداول پیچیدهتر، برای یک سلول header دیگر () عنوانی ارائه دهد. این به شما امکان میدهد هدرهای لایهای یا گروهی ایجاد کنید، که در آن یک هدر چندین سلول دیگر را توصیف میکند.
ویژگی headers برای پیوند یک سلول، یا ، به یک یا چند سلول header استفاده میشود. این یک لیست از رشتهها را که با فاصله از هم جدا شدهاند، میگیرد. ترتیب رشتهها مهم نیست. هر رشته باید با شناسه منحصر به فرد یک عنصر که سلول به آن مرتبط است، مطابقت داشته باشد.
این روش به جدول HTML شما تعریف صریحتری از موقعیت هر سلول، بر اساس هدرهای ستون و ردیفی که به آن تعلق دارد، میدهد، چیزی شبیه به یک صفحه گسترده. برای اینکه این روش به خوبی کار کند، جدول شما باید شامل هدرهای ستون و ردیف باشد.
بیایید به بخشی از مثال «اقلام فروخته شده در آگوست ۲۰۱۶» نگاهی بیندازیم تا نحوه استفاده از ویژگیهای id و headers را ببینیم:
یک شناسه منحصر به فرد به هر عنصر در جدول اضافه کنید.
برای سلولهای سربرگ: به هر عنصر یک ویژگی headers اضافه کنید که به عنوان یک زیرعنوان عمل کند، یعنی یک سلول سربرگ با یک سربرگ دیگر بالای آن. مقدار، شناسه عنوان سطح بالا است. در مثال ما، این "clothes" برای سربرگهای ستون و "belgium" برای سربرگ ردیف است.
برای سلولهای داده: به هر عنصر یک ویژگی headers اضافه کنید و شناسههای عنصر(های) مرتبط را به صورت یک لیست با فاصله از هم جدا کنید. میتوانید مانند یک صفحه گسترده عمل کنید: سلول داده را پیدا کنید، سپس سربرگهای سطر و ستونی را که آن را توصیف میکنند، پیدا کنید. ترتیب شناسههای مشخص شده مهم نیست، اما حفظ ثبات آن به سازماندهی آن کمک میکند و خوانایی کد را بهبود میبخشد.
این روش ارتباط بسیار دقیقی بین سرتیترها و سلولهای داده ایجاد میکند، اما از نشانهگذاری بسیار بیشتری استفاده میکند و هیچ جایی برای خطا باقی نمیگذارد. رویکرد محدوده معمولاً برای اکثر جداول کافی است.
