محتوای تولیدشده دسترس‌پذیر

  • از content برای انتقال نوشتار معنی‌دار (برچسب‌ها، وضعیت، دستورالعمل‌ها) استفاده نکنید — آن را در DOM نگه دارید (WCAG F87). استدلال نوشتار جایگزین برای کاهش آسیب در مواردی است که تزئین به‌طور تصادفی معنایی را منتقل می‌کند، نه یک مجوز.
  • از آرگومان نوشتار جایگزین content برای ارائه نوشتار جایگزین برای صفحه‌خوان‌ها استفاده کنید. به‌عنوان مثال «content: url(cloud.svg) / "Save";»
  • از content: "text" / ""; استفاده کنید تا نوشتار صرفاً تزئینی برای صفحه‌خوان‌ها خوانده نشود.
  • از آرگومان نوشتار جایگزین خالی برای تصاویر استفاده نکنید — این تصاویر به‌طور پیش‌فرض نمایشی هستند. مثلاً این اشتباه است: content: url(cloud.svg) / "";.
  • از آرگومان نوشتار جایگزین برای توصیف اموجی‌ها استفاده نکنید، مگراینکه توصیف با نام رسمی اموجی متفاوت باشد. مثلاً content: "🎉" / "celebration"; را انجام ندهید، اما content: "🎉" / "Yay!"; مشکلی ندارد.

فقط زمانی از آرگومان نوشتار جایگزین استفاده کنید که نوشتار با مقدار اصلی متفاوت باشد و ازقبل در DOM وجود نداشته باشد. یعنی این اشتباه است:

HTML:

<button class="save">Save</button>

سرویس مقایسه قیمت:

button.save::before {
  content: url(cloud.svg) / "Save";
}

صفحه‌خوان آن را به‌صورت «ذخیره ذخیره» می‌خواند.