پنهان کردن عناصر در CSS: راه دسترسی

Summarize this content to 400 words in Persian Lang
پنهان کردن عناصر در UI شما امری رایج است، اما انجام این کار به شیوه ای قابل دسترس تضمین می کند که برخی از کاربران را ناخواسته حذف نکنید. در این مقاله به سه حالت می پردازیم:

پنهان کردن عناصر از صفحه خوان
نمایش عناصر فقط به صفحه‌خوان‌ها.
پنهان کردن عناصر از همه کاربران، از جمله صفحه خوان.

هر بخش شامل نمونه های کد و مورد استفاده عملی است

پنهان کردن عناصر از صفحه خوان

اگر می خواهید یک عنصر برای کاربران بینا قابل مشاهده باشد اما از صفحه خوان ها پنهان باشد، می توانید از آن استفاده کنید aria-hidden=”true” ویژگی یا CSS.

aria-hidden=”true”>This content is hidden from screen readers.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

موارد استفاده کنید

مخفی کردن تصاویر پس زمینه
نمادهای تزئینی یا عناصر بصری که اطلاعات معنی داری را منتقل نمی کنند.

aria-hidden=”true”>+
Add Item

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمایش عناصر فقط به صفحه‌خوان‌ها

برای اینکه یک عنصر برای صفحه خوان ها قابل مشاهده باشد اما برای کاربران بینا نامرئی شود، می توانید از تکنیک “بصری پنهان” استفاده کنید. Tailwind CSS یک کلاس ابزار از پیش ساخته شده را ارائه می دهد، sr-only، برای این منظور.

class=”sr-only”>
This content is only visible to screen readers.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نوشتن sr-only کلاس در CSS به این شکل است

.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

موارد استفاده کنید

برای برچسب زدن عناصر تعاملی مانند ورودی ها بدون نمایش بصری متن:
for=”username” class=”sr-only”>Username
type=”text” id=”username” name=”username”>

ارائه اطلاعات اضافی برای کاربران صفحه خوان با استفاده از aria-describedby
class=”sr-only” id=”instructions”>
Password must include 8 characters, one number, and one special
symbol.

type=”password” aria-describedby=”instructions”>

پنهان کردن عناصر ورودی برای دکمه های رادیویی سفارشیهنگام ایجاد دکمه‌های رادیویی سفارشی (یا چک باکس)، اغلب عنصر ورودی اصلی را پنهان می‌کنید و آن را با یک عنصر سبک بصری جایگزین می‌کنید. برای انجام این کار به صورت قابل دسترس، ورودی پنهان باید برای صفحه خوان ها قابل مشاهده باشد.

پنهان کردن عناصر از همه کاربران

برای پنهان کردن کامل یک عنصر هم از دید کاربران بینا و هم از صفحه خوان ها، می توانید استفاده کنید display: none یا visibility: hidden.

.hidden {
display: none;
/* or visibility: hidden; */
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کلاس را اعمال کنید:

class=”hidden”>This content is hidden from all users.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

TL; DR

در اینجا یک جدول خلاصه شده است که چگونه ویژگی های مختلف CSS بر روی دید برای انواع مختلف کاربران تأثیر می گذارد:

ویژگی CSS
برای همه کاربران پنهان می شود
پنهان برای کاربران بینا
برای صفحه خوان ها پنهان می شود
یادداشت ها

display: none
✅
✅
✅
به طور کامل عنصر را از درخت بصری و دسترسی حذف می کند.

visibility: hidden
✅
✅
✅
عنصر را به صورت بصری پنهان می کند اما آن را در درخت چیدمان و دسترسی نگه می دارد.

opacity: 0
❌
✅
❌
عنصر را کاملا شفاف می کند اما همچنان برای صفحه خوان ها قابل مشاهده است و تعاملی است.

clip: rect(0, 0, 0, 0)
✅
✅
❌
معمولاً در تکنیک “بصری پنهان” استفاده می شود. رندر بصری اما در دسترس را حذف می کند.

position: absolute; width: 1px; height: 1px;
✅
✅
❌
با تکنیک “بصری پنهان” استفاده می شود. عناصر را در دسترس صفحه خوان ها نگه می دارد.

aria-hidden=”true”
❌
❌
✅
عنصر را از درخت دسترس‌پذیری حذف می‌کند، اما آن را به صورت بصری باقی می‌گذارد.

overflow: hidden
❌
✅ (در صورت خارج از محدوده)
❌
اگر محتوا از ظرف سرریز شود اما بر روی صفحه‌خوان‌ها تأثیری نگذارد، محتوا را به صورت بصری پنهان می‌کند.

height: 0; width: 0;
✅
✅
❌
محتوا را به صورت بصری پنهان می کند در حالی که آن را برای صفحه خوان ها در دسترس نگه می دارد.

z-index: -1
❌
✅
❌
عنصر را پشت سر دیگران جابجا می‌کند و آن را برای کاربران بینا نامرئی می‌کند اما برای صفحه‌خوان قابل دسترسی است.

opacity: 0; pointer-events: none;
✅
✅
❌
یک عنصر را کاملاً شفاف و غیر تعاملی می کند، اما برای صفحه خوان ها قابل دسترسی است.

 aria-hidden="true">This content is hidden from screen readers.

   aria-hidden="true">+
  Add Item

 class="sr-only">
  This content is only visible to screen readers.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none;
  /* or visibility: hidden; */
}

 class="hidden">This content is hidden from all users.