با استفاده از عناصر 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 به ادامه مطلب بروید.