نمای کلی از فوکوس صفحه در قابلیت دسترسی
در این درس در مورد تمرکز و نحوه مدیریت آن در برنامه خود صحبت خواهیم کرد. فوکوس به این اشاره دارد که کدام کنترل روی صفحه (یک مورد ورودی مانند فیلد، کادر، دکمه یا پیوند) در حال حاضر ورودی را از صفحه کلید و از کلیپ بورد هنگام جای‌گذاری محتوا دریافت می‌کند.
این یک مکان عالی برای شروع یادگیری در مورد دسترسی است زیرا همه ما می دانیم که چگونه از صفحه کلید استفاده کنیم، ارتباط با آن و آزمایش آن آسان است و تقریباً برای همه کاربران مفید است.
کاربرانی که دارای اختلالات حرکتی هستند، که می تواند هر چیزی از فلج دائمی گرفته تا مچ دست پیچ خورده باشد، ممکن است برای پیمایش صفحه شما به صفحه کلید یا دستگاه سوئیچ تکیه کنند، بنابراین یک استراتژی فوکوس خوب برای ارائه یک تجربه خوب برای آنها حیاتی است.
و برای کاربران قدرتمندی که همه میانبرهای صفحه کلید دستگاه خود را می شناسند، این که بتوانند به سرعت سایت خود را تنها با صفحه کلید هدایت کنند، مطمئناً آنها را بازده بیشتری می کند.
بنابراین، یک استراتژی تمرکز به خوبی اجرا شده تضمین می کند که هرکسی که از برنامه شما استفاده می کند، تجربه بهتری دارد. در درس‌های آینده خواهیم دید که تلاشی که شما روی آن متمرکز می‌کنید، مبنای مهمی برای حمایت از کاربران فناوری کمکی و در واقع از همه کاربران است.
تمرکز چیست؟
فوکوس تعیین می کند که رویدادهای صفحه کلید در هر لحظه به کجا می روند. به عنوان مثال، اگر یک فیلد ورودی متن را متمرکز کنید و شروع به تایپ کنید، قسمت ورودی رویدادهای صفحه کلید را دریافت می کند و کاراکترهایی را که تایپ می کنید نمایش می دهد. در حالی که فوکوس دارد، ورودی چسبانده شده را نیز از کلیپ بورد دریافت می کند.
مورد فوکوس شده فعلی اغلب با حلقه فوکوس نشان داده می شود که سبک آن هم به مرورگر و هم به سبکی که نویسنده صفحه اعمال کرده است بستگی دارد. به عنوان مثال، کروم معمولاً عناصر متمرکز را با یک حاشیه آبی برجسته می کند، در حالی که فایرفاکس از یک حاشیه چین استفاده می کند.
برخی از کاربران کامپیوتر خود را تقریباً به طور کامل با صفحه کلید یا دستگاه ورودی دیگر کار می کنند. برای آن کاربران، تمرکز بسیار مهم است. این وسیله اصلی آنها برای رسیدن به همه چیز روی صفحه است. به همین دلیل، چک لیست Web AIM در بخش 2.1.1 بیان می کند که تمام عملکردهای صفحه باید با استفاده از صفحه کلید در دسترس باشند ، مگر اینکه کاری باشد که نمی توانید با صفحه کلید انجام دهید، مانند طراحی با دست آزاد.
به عنوان کاربر، می‌توانید با استفاده از Tab ، Shift+Tab یا کلیدهای جهت‌نما، کنترل کنید که کدام عنصر در حال حاضر متمرکز شده است. در Mac OSX این کار کمی متفاوت است: در حالی که Chrome همیشه به شما امکان می‌دهد با Tab پیمایش کنید، برای تغییر فوکوس در مرورگرهای دیگر مانند Safari باید Option+Tab فشار دهید. (می توانید این تنظیم را در بخش صفحه کلید تنظیمات سیستم تغییر دهید.)
ترتیبی که در آن فوکوس به جلو و عقب از طریق عناصر تعاملی از طریق Tab ادامه می‌یابد، جای تعجب نیست که ترتیب برگه نامیده می‌شود. اطمینان از اینکه صفحه خود را با ترتیب برگه های منطقی طراحی می کنید، مرحله مهمی است که بعداً به آن خواهیم پرداخت.
قابل تمرکز چیست؟
عناصر HTML تعاملی داخلی مانند فیلدهای متنی، دکمه‌ها و فهرست‌های انتخابی به طور ضمنی قابل فوکوس هستند، به این معنی که به طور خودکار در ترتیب برگه‌ها درج می‌شوند و مدیریت رویدادهای صفحه کلید داخلی را بدون دخالت برنامه‌نویس دارند.
اما همه عناصر قابل تمرکز نیستند. پاراگراف ها، div ها، و عناصر مختلف دیگر صفحه، زمانی که صفحه را وارد می کنید، متمرکز نمی شوند، و این بر اساس طراحی است. اگر کاربر نتواند با آن ارتباط برقرار کند، به طور کلی نیازی به تمرکز روی چیزی نیست.
تجربه تمرکز
بیایید برخی از تکنیک های تمرکز را که در مورد آن بحث کردیم، امتحان کنیم. با استفاده از Chrome، به صفحه ماکت سایت این شرکت هواپیمایی بروید و فقط با استفاده از ورودی صفحه کلید، بلیط خاصی را جستجو کنید. صفحه ورودی ماوس را نمی‌پذیرد، بنابراین نمی‌توانید تمرین را رد کنید (نه اینکه ما به شما اعتماد نداریم ;-).
پارامترهای بلیط که باید مشخص کنید عبارتند از:
- یک طرفه
- به ملبورن
- خروج در 12 اکتبر 2017 (10/12/2017)
- بازگشت در 23 اکتبر 2017 (10/23/2017)
- صندلی کنار پنجره
- نمی خواهید پیشنهادات تبلیغاتی دریافت کنید
هنگامی که فرم را بدون خطای ورودی با موفقیت تکمیل کردید و دکمه جستجو را فعال کردید، فرم به سادگی پاک و بازنشانی می شود. ادامه دهید و فرم را تکمیل کنید، سپس برگردید.
بیایید بررسی کنیم که فرم چگونه از ورودی صفحه کلید شما استفاده می کند. با اولین فشار دادن Tab شما، مرورگر موارد ناوبری پروازها، هتل‌ها و اتومبیل‌های اجاره‌ای را برجسته می‌کند. همانطور که به فشار دادن Tab ادامه می دهید، به گروه دکمه های رادیویی می روید که در آنجا می توانید با استفاده از کلیدهای جهت دار، از بین مسیر رفت و برگشت، یک طرفه یا چند شهر انتخاب کنید.
از طریق فیلدهای نام و آدرس با تکمیل اطلاعات مورد نیاز ادامه دهید. وقتی به عنصر انتخاب مقصد رسیدید، می‌توانید از کلیدهای پیکان برای انتخاب شهر استفاده کنید، یا می‌توانید برای تکمیل خودکار فیلد شروع به تایپ کنید. به همین ترتیب، در قسمت های تاریخ، می توانید از کلیدهای جهت دار استفاده کنید یا فقط تاریخ را تایپ کنید.
انتخاب نوع صندلی نیز بر روی کلیدهای جهت دار متکی است، یا می توانید "w"، "a" یا "n" را برای پرش به گزینه صندلی تایپ کنید. سپس می‌توانید با فشار دادن کلید فاصله در حالی که چک باکس فوکوس شده است، پیشنهادات تبلیغاتی پیش‌فرض را غیرفعال کنید. در نهایت روی دکمه Search متمرکز شده و Enter فشار دهید تا فرم ارسال شود.
تعامل با یک فرم فقط با استفاده از صفحه کلید و عدم نیاز به جابجایی به ماوس و بازگشت برای تکمیل یک کار بسیار مفید است. از آنجایی که تمام عناصر استفاده شده در فرم، تگ های HTML بومی با فوکوس ضمنی هستند، فرم با صفحه کلید به خوبی کار می کند و برای افزودن یا مدیریت رفتار تمرکز نیازی به نوشتن کدی ندارید.