راهنمای ایجاد تب های دسترس پذیر

سئو تب‌ها

نظر شما در رابطه با سئو تب‌ها چیست؟ آیا محتوای تمامی تب‌ها در سئو سایت تاثیر گذار است و یا تنها محتوای اولین تب؟

گوگل تنها محتواهای قابل مشاهده در صفحه را برای رتبه‌بندی یک سایت مورد استفاده قرار می‌دهد، بنابراین اگر تنها اولین تب شما قابل مشاهده باشد گوگل تنها محتوای آن را برای رتبه‌بندی سایت شما مورد استفاده قرار می‌دهد و از محتوای سایر تب‌ها صرف نظر می‌کند.

در 27 جولای 2015 یکی از اعضای ارشد گوگل در یک توئیت اعلام نمود که گوگل از این به بعد برای محتواهای مخفی صفحه نیز عمل رتبه‌بندی را انجام خواهد داد اما برای آن‌ها اعتبار بسیار کم‌تری را نسبت به محتواهای قابل مشاهده صفحه قائل خواهد بود، زیرا از نظر گوگل این محتواها به عنوان محتواهای غیر ضروری سایت شما در نظر گرفته می‌شوند.

در چه مواردی باید از تب‌ها استفاده نمود؟

مهمترین هدف استفاده از تب‌ها این است که به کاربران‌ اجازه دهیم تا در هر زمان تنها به یک محتوا در بین یک گروه از محتواهای مرتبط به هم دسترسی داشته باشند. گروه محتواها باید حاوی اطلاعاتی باشند که دیدن و تعامل برقرار کردن با آن‌ها یا کلا ضروری نباشد و یا این که تنها محتوای یکی از گروه‌ها برای ما مهم و ضروری باشد.

در صورتی که همه محتوا‌هایی که قصد دارید آن‌ها را به‌ وسیله تب‌ها گروه‌بندی کنید جزء محتواهای اصلی شما هستند و برای‌تان مهم است که تمامی این محتواها در رتبه‌بندی سایت‌تان تاثیر داشته باشند، بهتر است که از تب‌ها استفاده نکنید. در چنین مواردی برای حفظ رتبه مناسب در سئو و همچنین بهبود حس تجربه کاربری می‌توانید از anchor ها استفاده نمایید.

یک نمونه از سایت‌هایی که قبلا از تب‌ها به اشتباه استفاده می‌کرد (تا سال 2007) اما در حال حاضر به درستی آن‌ها را حذف نموده سایت آمازون است. در این سایت به دلیل این که تمامی محتواها جزء مطالب اصلی و ضروری بودند، آمازون آن‌ها را از درون تب‌ها خارج نمود.

اما مواردی هم وجود دارد که در آن‌ها همه محتواها جزء موارد اصلی و ضروری به حساب نمی‌آیند و تنها یک گروه از محتواها برای رتبه‌بندی سایت مهم است، حتی در برخی از موارد ممکن است هیچ کدام از محتواها برای رتبه‌بندی سایت مهم نباشند. در چنین مواردی استفاده از تب‌ها یک راهکار مناسب است زیرا هم باعث خلوت شدن صفحه ما می‌شود و هم این که تجربه کاربری را بهبود می‌بخشد.

برای مثال در صفحات ورود/ثبت نام غالبا هیچ محتوای مهمی برای افزایش رتبه‌بندی سایت وجود ندارد، علاوه بر این کاربر در هر زمان تنها می‌تواند از یکی از این دو فرم استفاده نماید، بنابراین در این مورد استفاده از تب‌ها می‌تواند مفید باشد.

توصیه‌هایی برای بهبود تجربه کاربری تب‌ها

  • همیشه محتوای تب‌ها را به صورت نزولی سازماندهی کنید، یعنی مهم‌ترین تب در ابتدا و کم اهمیت‌ترین تب در انتها باشد.
  • تب‌ها را باید همانند یک تب طراحی نمود، استفاده از طراحی‌های نامتعارف تنها باعث سردرگمی کاربران می‌شود.
  • تب‌ها باید در یک سطر نمایش داده شوند. اگر تب شما بیش از دو زبانه دارد توصیه می‌شود که در دستگاه‌های کوچک‌تر مانند موبایل آن را به ویجت آکاردیون تبدیل کنید تا کاربران بتواند به سادگی با آن تعامل برقرار کنند.
  • همیشه مهم‌ترین تب را به صورت پیش فرض در حالت انتخاب شده قرار دهید.
  • تب فعال باید دارای سبکی متمایز از سایر تب‌ها باشد و همچنین رویدادهای صفحه کلید و ماوس را برای آن غیر فعال کنید.
  • متن زبانه تب‌ها باید کوتاه، مفهومی و واضح باشد. سعی کنید این متن از یک تا سه کلمه بیشتر نباشد.
  • متن زبانه تب‌ها باید کمی ضخیم‌تر از متن عادی صفحه باشد.
  • زمان پاسخگویی تب‌ها در هنکام کلیک کاربر باید تا حد ممکن کوتاه باشد.
  • هرگز تب‌ها را با بردن اشاره‌گر ماوس بر روی زبانه آن‌ها (hover) فعال نکنید. زیرا این کار در دستگاه‌های لمسی مانند موبایل و تبلت باعث بروز مشکل تطبیق پذیری می‌شود.
  • تحت هیچ شرایطی از تب‌ها برای ارائه breadcrumb ها استفاده نکنید.
  • سعی کنید تا جای ممکن درون پنل تب‌ها از اسکرول استفاده نکنید و تمام محتوای پنل، بدون اسکرول قابل مشاهده باشد.
  • باید بتوان با تب‌ها به طور کامل به وسیله صفحه کلید تعامل برقرار کرد.
  • مطمئن شوید که تب‌های شما برای حالتی که کاربر جاوا اسکریپت را در مرورگرش غیر فعال کرده نیز به درستی در دسترس هستند. برای این کار می‌توانید تب‌ها را طوری سبک‌دهی کنید که در چنین وضعیتی به صورت anchor عمل نمایند.
  • یک سبک متمایز را برای وضعیتی تعریف کنید که اشاره‌گر ماوس و یا فوکوس صفحه کلید به زبانه تب‌های غیر فعال می‌ر‌ود.
  • هرگز از آیکون‌ها به عنوان جایگزینی برای متن زبانه تب‌ها استفاده نکنید زیرا ممکن است کاربران معنای آیکون‌های شما را به درستی تشخیص ندهند. از آیکن‌ها در کنار متن برای زیبا‌تر شدن تب‌ها استفاده نمایید.
توصیه می‌شود در صورتی که محتوای تب‌های شما ایستا هستند، یعنی نیازی به بارگذاری از سوی سرور ندارند در هنگام دسترسی به آن‌ها از طریق صفحه کلید با رفتن فوکوس صفحه کلید به زبانه هر تب پنل مرتبط با آن زبانه به صورت خودکار نمایان شود، یا به عبارتی دیگر آن تب فعال گردد. اما در صورتی که محتوای یک و یا تمامی تب‌ها نیاز به بارگذاری از سوی سرور را دارند آن‌گاه تب‌ها را تنها باید با فشردن کلید‌های Enter یا Space فعال نمود.

دسترس پذیر کردن تب‌ها

نقش‌ها، ویژگی‌ها و وضعیت‌های WAI-ARIA

  • عنصری که گروه تب‌ها در درون آن پیچانده می‌شوند باید دارای نقش tablist باشد. غالبا از عنصر <ul> برای این کار استفاده می‌شود.
  • تمامی عناصری که برای ایجاد زبانه تب‌ها مورد استفاده قرار می‌گیرند باید دارای نقش tab باشند. غالبا برای این کار از عناصر <a> یا <button>استفاده می‌شود.
  • تمامی عناصری که برای ایجاد پنل تب‌ها مورد استفاده قرار می‌گیرند باید دارای نقش tabpanel باشند.
  • تمامی عناصر دارای نقش tab باید دارای ویژگی aria-controls باشند که به پنل مرتبط به آن‌ها ارجاع می‌کند.
  • زبانه تب فعال باید دارای وضعیت aria-selected="true" باشد. برای زبانه تب‌های غیر فعال از وضعیت aria-selected="false" استفاده کنید.
  • تمامی عناصر دارای نقش tabpanel باید دارای ویژگی aria-labelledby باشند که به زبانه مرتبط به آن‌ها ارجاع می‌کند.
  • در صورتی که ویجت تب‌تان را به صورت Vertical طراحی کرده‌اید باید به عنصر با نقش tablist ویژگی aria-orientaion="vertical" را اضافه کنید. مقدار پیش فرض این ویژگی برای ویجت تب aria-orientaion="horizontal" می‌باشد.
  • در صورتی که محتوای یک پنل به وسیله فناوری اجاکس بارگذاری می‌شود باید با استفاده از ویژگی‌های aria-live, aria-atomic, aria-relevant و ... این مورد را به فناوری‌های کمک‌رسان اطلاع دهید.
  • در تب‌های تک انتخابی باید به پنلی که به صورت پیش فرض محتوای آن قابل مشاهده است ویژگی aria-hidden="false" را بدهید. برای سایر پنل‌ها (پنل‌ تب‌های غیر فعال) از ویژگی aria-hidden="true" استفاده کنید.
حتما همیشه از ویژگی aria-selected="false" برای تمام تب‌های غیر فعال استفاده کنید زیرا در صورت عدم استفاده از این ویژگی با تب‌های غیر فعال بر اساس قواعد پیش فرض پلت‌فرم و مرورگری که برنامه شما در آن اجرا شده رفتار می‌گردد که این کار باعث پایین آمدن سطح تطبیق پذیری ویجت شما می‌شود.

تعاملات صفحه کلید

  • هنگامی که یک ویجت تب، فوکوس صفحه کلید را می‌گیرد باید آن را به تب فعال انتقال دهد. سپس با فشردن کلید Tab از صفحه کلید کنترل فوکوس باید از تب فعال به عنصر فوکوس پذیر بعدی منتقل شود. در اغلب موارد این عنصر درون پنل مرتبط با تب فعال قرار دارد اما در مواردی که پنل تب فعال تنها حاوی متن باشد و هیچ عنصر فوکوس پذیری در آن قرار نداشته باشد آن‌گاه باید فوکوس را به تب بعدی منتقل نمود.
  • در ویجت‌های تبی که به صورت Horizontal طراحی شده‌اند و همچنین Direction صفحه با مقدار ltr تنظیم شده با فشردن کلید ← (Left Arrow)فوکوس صفحه کلید باید به تب قبلی برود. اگر فوکوس در حال حاضر در اولین تب مجموعه است آن‌گاه باید آن را به آخرین تب مجموعه انتقال دهید.
  • در ویجت‌های تبی که به صورت Horizontal طراحی شده‌اند و همچنین Direction صفحه با مقدار rtl تنظیم شده با فشردن کلید ← (Left Arrow)فوکوس صفحه کلید باید به تب بعدی برود. اگر فوکوس در حال حاضر در آخرین تب مجموعه است آن‌گاه باید آن را به اولین تب مجموعه انتقال دهید.
  • در ویجت‌های تبی که به صورت Horizontal طراحی شده‌اند و همچنین Direction صفحه با مقدار ltr تنظیم شده با فشردن کلید → (Right Arrow)فوکوس صفحه کلید باید به تب بعدی برود. اگر فوکوس در حال حاضر در آخرین تب مجموعه است آن‌گاه باید آن را به اولین تب مجموعه انتقال دهید.
  • در ویجت‌های تبی که به صورت Horizontal طراحی شده‌اند و همچنین Direction صفحه با مقدار rtl تنظیم شده با فشردن کلید → (Right Arrow)فوکوس صفحه کلید باید به تب قبلی برود. اگر فوکوس در حال حاضر در اولین تب مجموعه است آن‌گاه باید آن را به آخرین تب مجموعه انتقال دهید.
  • در ویجت‌های تبی که به صورت Vertical طراحی شده‌اند با فشردن کلید ↓ (Down Arrow) فوکوس صفحه کلید باید به تب بعدی برود. اگر فوکوس در حال حاضر در آخرین تب مجموعه است آن‌گاه باید آن را به اولین تب مجموعه انتقال دهید.
  • در ویجت‌های تبی که به صورت Vertical طراحی شده‌اند با فشردن کلید ↑ (Up Arrow) فوکوس صفحه کلید باید به تب قبلی برود. اگر فوکوس در حال حاضر در اولین تب مجموعه است آن‌گاه باید آن را به آخرین تب مجموعه انتقال دهید.
  • هنگامی‌که فوکوس صفحه کلید درون یک تب قرار دارد با فشردن کلیدهای Enter و یا Space آن تب باید فعال شود.
  • هنگامی‌که فوکوس در درون یک تب قرار داشته یاشد با فشردن کلید Home فوکوس باید به اولین تب مجموعه منتقل شود و با فشردن کلید End به آخرین تب مجموعه.
  • در صورتی که ویجت تب‌تان را به شکلی طراحی کرده‌اید که به کاربران‌تان امکان حذف کردن تب‌ها را می‌دهد با فشردن کلید Delete باید تبی که در حال حاضر فوکوس در آن قرار دارد و پنل مرتبط با آن را حذف نمایید. اگر هنوز تبی در مجموعه باقی مانده باشد آن‌گاه باید فوکوس را به تبی که بعد از تب حذف شده قرار دارد انتقال داد و بلافاصله آن تب و پنل مرتبط با آن را فعال نمود. در صورتی که تب حذف شده آخرین تب مجموعه باشد و دیگر هیچ تبی در مجموعه باقی نمانده باید فوکوس را از ویجت تب خارج کرده و آن را به عنصر فوکوس پذیر بعدی در صفحه انتقال دهید.