طراحی پنجره هشدار زیبا با CSS

پنجره هشدار (alert/modal) یکی از اجزای مهم رابط کاربری است که برای اطلاع‌رسانی‌های فوری، تأیید عملیات‌ها یا نمایش خطاها استفاده می‌شود. طراحی زیبا و دسترس‌پذیر این پنجره‌ها هم تجربه کاربری را بهبود می‌دهد و هم احتمال خطا را کاهش می‌دهد. در این مقاله با اصول طراحی، نمونه کد، نکات دسترس‌پذیری و بهینه‌سازی‌های عملی آشنا می‌شوید.

اصول پایه طراحی پنجره هشدار

• وضوح پیام: عنوان کوتاه و متن واضح؛ کاربر باید فوراً بداند چه اتفاقی افتاده.
• اولویت رنگ‌ها: رنگ‌ها باید معنای منطقی داشته باشند (مثلاً قرمز برای خطا، زرد برای هشدار، سبز برای موفقیت).
• تمرکز و کنترل: دکمه‌های عمل (CTA) باید قابل تشخیص و در دسترس باشند.
• دسترس‌پذیری: استفاده از نقش‌های ARIA، مدیریت فوکوس و متن‌های خوانا برای صفحات خوان.
• انیمیشن‌های ملایم: برای جلب توجه بدون مزاحمت، از انیمیشن کوتاه و روان استفاده کنید.

ساختار HTML نمونه

<div class="alert-overlay" id="alert" role="dialog" aria-modal="true" aria-labelledby="alert-title" aria-describedby="alert-desc" hidden>
  <div class="alert-box">
    <button class="alert-close" aria-label="Close">&times;</button>
    <h2 id="alert-title">هشدار</h2>
    <p id="alert-desc">آیا مطمئن هستید می‌خواهید این کار را انجام دهید؟</p>
    <div class="alert-actions">
      <button class="btn-primary">تایید</button>
      <button class="btn-secondary">لغو</button>
    </div>
  </div>
</div>

این کد یک پنجره هشدار پایه ایجاد می‌کند: عنصر بیرونی با کلاس alert-overlay برای پوشش پس‌زمینه و عنصر داخلی alert-box برای محتوای هشدار. صفت‌های ARIA مانند role="dialog" و aria-modal="true" و شناسه‌های aria-labelledby و aria-describedby جهت دسترس‌پذیری اضافه شده‌اند. صفت hidden پنجره را در ابتدا پنهان نگه می‌دارد.

نمونه CSS پایه

/* Basic styles */.alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: grid;
  place-items: center;
  z-index: 1000;
}
.alert-box {
  background: #fff;
  border-radius: 8px;
  max-width: 420px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.alert-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.btn-primary {
  background: #2b6cb0;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
}
.btn-secondary {
  background: transparent;
  border: 1px solid #cbd5e0;
  padding: 8px 12px;
  border-radius: 6px;
}

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

نسخه بهینه شده: متغیرها، انیمیشن و دسترس‌پذیری

:root{
  --overlay: rgba(2,6,23,0.6);
  --bg: #ffffff;
  --accent: #2563eb;
  --danger: #dc2626;
  --radius: 10px;
  --shadow: 0 12px 40px rgba(2,6,23,0.35);
}
.alert-overlay {
  position: fixed; inset:0; display:grid; place-items:center;
  background: var(--overlay); z-index:1000;
  animation: fadeIn .16s ease-out;
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
.alert-box {
  background:var(--bg); border-radius:var(--radius);
  max-width:480px; width:90%;
  padding:20px; box-shadow:var(--shadow);
  transform: translateY(-8px); animation: slideUp .18s ease-out;
}
@keyframes slideUp { from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none} }
.alert-box:focus { outline: 3px solid rgba(37,99,235,0.2); }
.alert-close { background:none; border:none; font-size:20px; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; padding:8px 14px; border-radius:8px; }
.btn-primary:focus { box-shadow:0 0 0 4px rgba(37,99,235,0.12); }
@media (max-width:420px){ .alert-box{ padding:16px } }

در این نسخه از CSS متغیرها برای سهولت سفارشی‌سازی استفاده شده‌اند، انیمیشن‌های کوتاه برای ظاهر/ناپدید شدن اضافه شده و حالات فوکوس برای دسترس‌پذیری بهتر قرار داده شده‌اند. استفاده از width:90% و max-width باعث می‌شود پنجره در موبایل نیز مناسب باشد.

جاوااسکریپت: باز/بستن و مدیریت فوکوس

const openAlert = () => {
  const alert = document.getElementById('alert');
  alert.hidden = false;
  const focusable = alert.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  const first = focusable[0], last = focusable[focusable.length-1];
  first.focus();
  // trap focus
  const trap = (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault(); last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault(); first.focus();
      }
    } else if (e.key === 'Escape') {
      closeAlert();
    }
  };
  alert.addEventListener('keydown', trap);
  alert._trap = trap;
};
const closeAlert = () => {
  const alert = document.getElementById('alert');
  if (!alert) return;
  alert.hidden = true;
  if (alert._trap) alert.removeEventListener('keydown', alert._trap);
};

این اسکریپت ساده وظیفه باز و بسته کردن پنجره هشدار را دارد و یک focus trap ابتدایی پیاده‌سازی می‌کند تا هنگام باز بودن پنجره فوکوس داخل آن محبوس بماند. همچنین کلید Escape برای بستن پنجره کنترل شده است. در اپلیکیشن‌های پیچیده‌تر از لایبرری‌های تست‌شده یا الگوهای کامل‌تر مدیریت فوکوس استفاده کنید.

رنگ‌ها و معنای آن‌ها (جدول راهنما)

نکات تخصصی و بهترین رویه‌ها

• از پیام کوتاه و قابل فهم استفاده کنید و از اصطلاحات فنی پرهیز کنید.
• همیشه دکمهٔ پیش‌فرض را مشخص کنید (مثلاً تأیید) و آن را با استایل متمایز نشان دهید.
• در صورت نیاز به انتخاب‌های مهم، از تأیید دو مرحله‌ای استفاده کنید تا اشتباهات کاهش یابد.
• برای بارگذاری‌های طولانی یا خطاهای سیستمی، اطلاعات تکمیلی و راهنمایی برای کاربر فراهم کنید.
• در تست‌های دسترس‌پذیری با صفحه‌خوان‌ها و صفحه‌کلید مطمئن شوید رفتار درست است.

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

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال