با استفاده از عناصر HTML معنایی صحیح ممکن است بتوانید اکثر یا تمام نیازهای دسترسی به صفحه کلید خود را برآورده کنید. این به این معنی است که زمان کمتری با tabindex
و کاربران راضی تر!
پشتیبانی از صفحه کلید به صورت رایگان (و تجربیات بهتر موبایل)
تعدادی از عناصر تعاملی داخلی با معنایی مناسب و پشتیبانی از صفحه کلید وجود دارد. مواردی که بیشتر توسعه دهندگان استفاده می کنند عبارتند از:
علاوه بر این، گاهی اوقات از عناصر با ویژگی contenteditable
برای ورود متن آزاد استفاده می شود.
به راحتی می توان از پشتیبانی صفحه کلید داخلی که این عناصر ارائه می دهند چشم پوشی کرد. در زیر چند نمونه از عناصر برای بررسی وجود دارد. به جای استفاده از ماوس، سعی کنید از صفحه کلید خود برای کار با آنها استفاده کنید. می توانید از TAB
(یا SHIFT + TAB
) برای جابجایی بین کنترل ها استفاده کنید و می توانید از کلیدهای جهت دار و کلیدهایی مانند ENTER
و SPACE
برای دستکاری مقادیر آنها استفاده کنید.
اگر یک تلفن دستی دارید، می توانید ببینید که بسیاری از اوقات این عناصر داخلی تعاملات منحصر به فردی در تلفن همراه دارند. تلاش برای بازتولید این تعاملات تلفن همراه خود کار زیادی است! این یک دلیل خوب دیگر برای چسبیدن به عناصر داخلی در هر زمان ممکن است.
به جای div
از button
استفاده کنید
یک ضد الگوی رایج دسترسی این است که یک عنصر غیر تعاملی، مانند یک div
یا یک span
را به عنوان یک دکمه با افزودن یک کنترل کننده کلیک به آن در نظر بگیرید.
اما برای اینکه یک دکمه قابل دسترسی در نظر گرفته شود باید:
- از طریق صفحه کلید قابل تمرکز باشید
- پشتیبانی از غیرفعال شدن
- برای انجام یک عمل از کلیدهای
ENTER
یاSPACE
پشتیبانی کنید - توسط یک صفحه خوان به درستی اعلام شود
دکمه div
هیچ کدام از این موارد را ندارد. این بدان معنی است که شما باید کد اضافی بنویسید تا آنچه را که عنصر button
به صورت رایگان به شما می دهد تکرار کنید!
به عنوان مثال، عناصر button
دارای یک ترفند منظم به نام * فعال سازی کلیک مصنوعی * هستند. اگر یک کنترل کننده «کلیک» را به یک button
اضافه کنید، زمانی که کاربر ENTER
یا SPACE
را فشار دهد اجرا می شود. یک دکمه div
این ویژگی را ندارد، بنابراین باید کد اضافی برای گوش دادن به رویداد keydown
بنویسید، بررسی کنید که کد کلید ENTER
یا SPACE
باشد و سپس کنترل کننده کلیک خود را اجرا کنید. اوه! این خیلی کار اضافی است!
تفاوت را در این مثال مقایسه کنید. برای کنترل هر یک از TAB
، و از ENTER
و SPACE
برای کلیک کردن روی آنها استفاده کنید.
اگر در سایت یا برنامه فعلی خود دکمه های div
دارید، آنها را با عناصر button
تعویض کنید. استایل دادن به button
آسان است و پر از قابلیت دسترسی است!
پیوندها در مقابل دکمه ها
یکی دیگر از ضد الگوهای رایج این است که با پیوند دادن رفتار جاوا اسکریپت به آنها، پیوندها را به عنوان دکمه در نظر بگیرید.
<a href="#" onclick="// perform some action">
هم دکمه ها و هم لینک ها از نوعی فعال سازی کلیک مصنوعی پشتیبانی می کنند. پس کدام را باید انتخاب کنید؟
- اگر با کلیک بر روی عنصر عملی در صفحه انجام می شود، از
<button>
استفاده کنید. - اگر با کلیک بر روی عنصر کاربر به صفحه جدیدی هدایت می شود، از
<a>
استفاده کنید. این شامل برنامههای وب تک صفحهای است که محتوای جدید را بارگیری میکنند و URL را با استفاده از History API بهروزرسانی میکنند.
دلیل این امر این است که دکمه ها و لینک ها به طور متفاوت توسط صفحه خوان ها اعلام می شوند. استفاده از عنصر صحیح به کاربران صفحهخوان کمک میکند تا بدانند چه نتیجهای را انتظار دارند.
TODO: DevSite - ارزیابی فکر کنید و بررسی کنید
یک ظاهر طراحی شده
برخی از عناصر داخلی، به ویژه <input>
، ممکن است سخت باشد. با کمی CSS هوشمند ممکن است بتوانید برخی از این محدودیت ها را برطرف کنید. پروژه WTFForms (با نام خنده دار) شامل یک شیوه نامه نمونه است که تعدادی تکنیک را برای استایل دادن به برخی از عناصر داخلی سخت تر نشان می دهد.
مراحل بعدی
استفاده از عناصر HTML داخلی می تواند دسترسی سایت شما را به میزان زیادی بهبود بخشد و حجم کاری شما را به میزان قابل توجهی کاهش دهد. سعی کنید در سایت خود برگه ای را مرور کنید و به دنبال کنترل هایی باشید که فاقد پشتیبانی از صفحه کلید هستند. در صورت امکان، آنها را برای جایگزین های استاندارد HTML تغییر دهید.
گاهی اوقات ممکن است عنصری را پیدا کنید که مشابهی در HTML نداشته باشد. اشکالی ندارد! برای یادگیری نحوه افزودن پشتیبانی صفحه کلید به کنترلهای تعاملی سفارشی با استفاده از tabindex
به ادامه مطلب بروید.