رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

جست‌وجو

وضعیت: پیش‌نویس 
<form class="hq-search" role="search" data-hq-search onsubmit="return false">
  <label class="hq-visually-hidden" for="q">جست‌وجو در مقاله‌ها</label>
  <svg class="hq-search__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/></svg>
  <input class="hq-input hq-search__input" id="q" type="search" placeholder="جست‌وجو در مقاله‌ها" autocomplete="off" />
  <button class="hq-search__clear" type="button" aria-label="پاک کردن" hidden><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"/></svg></button>
</form>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • وقتی محتوا آن‌قدر زیاد است که مرور فهرست کافی نیست: مقاله‌ها، پروژه‌ها، کتابخانهٔ آیکن.
  • برای پالایش یک جدول یا فهرست بلند در داشبورد.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای کمتر از حدود ده مورد؛ همه را نشان دهید.

متن نمونه

Section titled “متن نمونه”

متن نمونه می‌گوید کجا جست‌وجو می‌شود: «جست‌وجو در مقاله‌ها». برچسب پنهان (hq-visually-hidden) همان متن را برای صفحه‌خوان دارد، چون آیکن ذره‌بین برچسب دیدنی کافی است.

نتیجه‌ها

Section titled “نتیجه‌ها”
  • اگر نتیجه‌ها هم‌زمان با تایپ به‌روز می‌شوند، تعداد نتیجه را در یک ناحیهٔ aria-live اعلام کنید.
  • نبود نتیجه یک حالت خالی است: بگویید چیزی پیدا نشد و چه چیزی را امتحان کنند.
انجام بده«جست‌وجو در مقاله‌ها»؛ دامنه روشن است.
انجام نده«جست‌وجو...» بدون دامنه، یا ذره‌بین بدون فیلد که کاربر باید حدس بزند.