بهینه سازی پیمایش صفحه کلید با استفاده از tabindex و ARIA

هرچه کاربر سریعتر بتواند رابط کاربری شما را پیمایش کند، بهتر است. هرچه سریعتر بتوانند به محتوای مورد نیاز خود برسند، بهتر است. بنابراین، هرچه مراحل کمتری را طی کنند، تجربه کلی رابط کاربری آنها کارآمدتر خواهد بود. و این در مورد برگه‌های صفحه‌کلید نیز صدق می‌کند: هر چه کاربر هنگام پیمایش باید در برگه‌های کمتری توقف کند، سریع‌تر به جایی که باید باشد می‌رسد. نحوه علامت گذاری محتوای خود تأثیر مستقیمی بر تجربه کاربر دارد. اما ما می‌توانیم با بهینه‌سازی نشانه‌گذاری مخصوص کاربران صفحه‌کلید، UX را به‌طور چشمگیری بهبود ببخشیم.

کلیک می کند. شیرآلات بخش ها مراحل

اگر کار با طراحان UX چیزی به من یاد داده است، این است که هر چه کاربر باید قدم های کمتری برای گذراندن سفر خود بردارد، بهتر است. به این ترتیب، آنها معمولاً تجربه‌هایی را طراحی می‌کنند تا اطمینان حاصل کنند که کلیک‌های کمتری برای رساندن کاربر به پایان سفر مورد نیاز است.
به‌عنوان یک مهندس طراح، وقتی در مورد «گام‌ها» و «کلیک‌ها» صحبت می‌کنم، مغزم نمی‌تواند به ضربه‌ها و زبانه‌ها نیز فکر کند. زیرا کاربر می تواند به روش های مختلفی با رابط کاربری تعامل داشته باشد، نه تنها با استفاده از ماوس. ضربه‌ها عملاً معادل لمس کلیک‌ها هستند، بنابراین تصور می‌کنم این تجربه برای آن‌ها به اندازه غیرلمسی بهینه‌سازی می‌شود. اما تجربه برای کاربران صفحه کلید معمولاً کمی متفاوت است.

به عنوان یک مهندس طراح، وظیفه من سنجش و ارائه مشاوره و توصیه هایی برای اطمینان از اینکه طراحی رابط کاربری برای کاربران در زمینه های مختلف کار می کند، است. این بدان معنی است که من بازخورد ارائه می کنم تا اطمینان حاصل کنم که تجربه کاربری از صفحه کلید، در میان دیگران، نیز در نظر گرفته می شود. طرح‌ها اغلب در صورت نیاز و بر اساس بحث‌های UX تغییر می‌کنند. اما اغلب اوقات توسعه دهندگان ما می توانند دسترسی و بهینه سازی UX و بهبودهایی را انجام دهند که نیازی به بحث طراحی و/یا مجوز ندارند. و وقتی می توانیم، باید.

کاربری که با استفاده از ماوس به یک رابط کاربری پیمایش می کند و با آن تعامل برقرار می کند، معمولاً می تواند با تلاش کمی در صفحه حرکت کند – او به معنای واقعی کلمه مکان نما را به جایی که می خواهد حرکت می دهد. نشانگر ماوس “حرکت می کند” بالا صفحه به اصطلاح مگر اینکه از یک ضدالگوی طراحی استفاده کنید، به ندرت موانعی بر سر راه آنها وجود دارد، زیرا اکثر طرح ها معمولاً برای تعاملات خود بهینه می شوند. مهم نیست که چند لینک در صفحه وجود دارد، آنها می توانند مستقیماً به لینک مورد نظر خود بروند، روی آن کلیک کرده و ادامه دهند.

از طرف دیگر یک کاربر صفحه کلید نمی تواند بدون عبور از یک سری تب ها به جایی برود شما برای آنها تعریف شده است. اگر شخصی در مقابل پله‌ها ایستاده بود، کاربر صفحه‌کلید باید برای رسیدن به مقصد از پله‌ها بالا می‌رفت (در مقایسه با کاربر موشی که یک جفت کفش پرنده جادویی پوشیده یا از هاوربرد استفاده می‌کند. مگس می کند از پله ها بالا 😅). هر چه پله‌ها پله‌های بیشتری داشته باشند، پله‌های بیشتری باید بالا بروند، مسیر طولانی‌تر و دشوارتر می‌شود. هیچ میانبری برای رسیدن سریعتر و کارآمدتر به جایی که می خواهند وجود ندارد… مگر اینکه شما فراهم کند آنها را با میانبرها در پست دیگری در این مورد توضیح خواهم داد. در این پست می‌خواهم در مورد نشانه‌گذاری و اینکه چگونه می‌توان گاهی اوقات برای ناوبری صفحه‌کلید کارآمدتر بهینه‌سازی کرد، صحبت کنم. به عنوان مثال، می خواهم در مورد لیست مقالات صحبت کنم.

وبلاگ ها، مجلات آنلاین و سایر نشریات معمولاً لیستی از مقالات یا پست ها را نمایش می دهند. با نگاهی به چنین پست‌هایی، اغلب متوجه یک الگوی آشنا در بیشتر این فهرست‌ها می‌شوید: یک پست دارای آناتومی معمولی است که معمولاً شامل موارد زیر است:

• تصویر کوچک،
• عنوان پست،
• نام نویسنده،
• برچسب های پست،
• گزیده یا شرح،
• و لینک “ادامه مطلب”

دادن یا گرفتن یک یا چند مورد. بنابراین یک پست می تواند شامل تمام موارد فوق بدون تصویر کوچک باشد. یا می تواند فقط شامل یک تصویر کوچک، عنوان و توضیحات باشد. همچنین ممکن است شامل پیوندی به بخش نظرات در صفحه کامل مقاله باشد. و غیره

به طور معمول، تصویر کوچک، عنوان پست، و پیوند بیشتر بخوانید به یک صفحه منتهی می‌شوند: صفحه کامل مقاله، در حالی که نام نویسنده و فهرست برچسب‌ها به صفحات مربوطه منتهی می‌شوند. اگر کاربر بینا هستید و می‌خواهید کل پست را بخوانید، روی تصویر کوچک، عنوان یا پیوند بیشتر بخوانید تا به آنجا برسید. حتی ممکن است بتوانید روی کل پست کلیک کنید اگر برای آن برچسب گذاری شده است.

اما این آناتومی پست چگونه بر کاربر صفحه کلید تأثیر می گذارد؟

پیمایش لیست پست ها با صفحه کلید

اگر از صفحه‌کلید برای پیمایش صفحه‌ای که حاوی فهرستی از پست‌ها است استفاده می‌کنید، متوجه می‌شوید که گاهی اوقات مجبور می‌شوید دو یا سه بار پشت سر هم از یک پیوند عبور کنید. برای نشان دادن، تجربه مرور صفحات اول نیویورک تایمز، مدیوم و فوربس را ثبت کردم:

اگر مرتباً از صفحه کلید استفاده می کنید، احتمالاً متوجه خواهید شد که چند بار پشت سر هم از طریق یک پیوند یکسان بروید. اگر می‌خواهید به برگه‌ای برسید که بعد از فهرست‌های مقاله در این صفحه آمده است، باید چندین برگه را قبل از رسیدن به آنجا باز کنید.

هنگامی که یک لیست پست با ساختاری مشابه طراحی می شود، معمولاً برای آن بهینه می شود ماوس بینا/کاربر لمسی. چنین کاربری مجموعه‌ای سخاوتمندانه از آیتم‌ها برای کلیک کردن یا ضربه زدن روی آن‌ها خواهد داشت که همگی به صفحه‌ای منتهی می‌شوند که احتمالاً می‌خواهند در نهایت از آن بازدید کنند.

اما این طراحی برای کاربران صفحه کلید بهینه نشده است. زمانی که یک کاربر صفحه کلید باید دو یا سه بار پشت سر هم از طریق یک لینک عبور کند، این کار را انجام می دهد کند کردن زیرا سفر آنها به معنای واقعی کلمه 200٪ یا 300٪ طولانی تر از آنچه می تواند / باید باشد می شود.

بسته به ساختار و آناتومی پست، گاهی اوقات می‌توانیم تجربه کاربر صفحه‌کلید را با تلاش بسیار کمی توسعه‌دهنده به‌طور چشمگیری بهبود ببخشیم.

بهینه سازی ناوبری با استفاده از صفحه کلید tabindex و aria-hidden

پاییز گذشته، من این فرصت را داشتم که روی طراحی مجدد آینده یک نشریه آنلاین کار کنم. من برای ساختن یک پایه جلویی کاملاً جدید برای طراحی استخدام شدم. من تاکید زیادی بر این دارم که طراحی جدید تا حد امکان در دسترس و جامع اجرا شود. بنابراین، طبیعتاً، می‌خواستم مطمئن شوم که این تجربه برای کاربران صفحه کلید نیز بهینه شده است.

به عنوان یک نشریه آنلاین، شامل صدها مقاله است و این مقالات به عنوان لیستی از پست ها در صفحه اصلی و سایر صفحات سایت نمایش داده می شود.

در فرآیند آزمایش یک مؤلفه در پایین صفحه اصلی برای دسترسی، متوجه شدم که پیمایش صفحه برای رسیدن به آن مؤلفه به دلیل تعداد زیاد پست‌ها در صفحه، بیشتر از آنچه که دوست داشتم طول کشید. البته، این تجربه برگه‌ای، تجربه معمولی از تمام وب‌سایت‌های مشابهی است که من تا به حال بازدید کرده‌ام. اما فقط به این دلیل که یک تجربه معمولی است به این معنی نیست که نمی توان آن را بهبود بخشید.

پس از یک بحث طولانی در مورد قابلیت استفاده و دسترسی، یک افزودنی کوچک به نشانه گذاری ایجاد کردم که ناوبری صفحه کلید را بهبود می بخشد. با کاهش تعداد پیوندهای برگه. تعداد اتصالات تغییر نمی کند. توانایی تقسیم پیوند انجام می دهد. این بدان معناست که کاربری که با استفاده از صفحه‌کلید پیمایش می‌کند، در هر پست به جای سه لینک، تنها از طریق یک پیوند به صفحه کامل مقاله می‌رود و به طور کلی تجربه صفحه‌کلید را سریع‌تر و کارآمدتر می‌کند.

پیاده سازی ساده است:

1. با استفاده از آن از قرار دادن لینک در برگه ها جلوگیری کنید tabindex = "-1"، و
2. پنهان کردن پیوند گفته شده از صفحه خوان از طریق aria-hidden = "true"زیرا شما نمی خواهید یک صفحه خوان پیوندی را نشان دهد که کاربر نتواند با آن تعامل داشته باشد.

من این را برای تصاویر بندانگشتی اعمال کرده‌ام، زیرا از آنها برای انتقال اطلاعات مرتبط خاص در یک پست استفاده نمی‌شود (آنها بیشتر شبیه عکس‌های روی جلد تزئینی هستند) و پیوندهای ادامه مطلب. فقط عنوان پست در جدول باقی می ماند و پیوند به صفحه نویسنده نیز وجود دارد. بنابراین به جای داشتن چهار تب در هر ورودی، کاربر اکنون دو برگه دارد. به این ترتیب، پیمایش در لیست طولانی پست‌ها دو برابر سریع‌تر از یک تجربه معمولی خواهد بود.

نشانه گذاری برای هر ورودی مقاله به این صورت بود:

article class="post ...">
    a href="/path/to/full-article/" class="post__thumb" aria-hidden="true" tabindex="-1">
        
    a>
    div class="post__content">
        a href="/path/to/full-article/" class="post__title">
            h2 class="h3">Inspirational Website of the Week: Dean Bradshawh2>
        a>

        div class="post__excerpt">
            
        div>

       a href="/path/to/full-article/" class="post__more-link" aria-hidden="true" tabindex="-1">
            svg aria-hidden="true" focusable="false" width="16" height="7" viewBox="0 0 16 7">svg>
        a>
    div>
article>

در زیر دو کد زنده وجود دارد که می‌توانید با استفاده از صفحه‌کلید از آن‌ها عبور کنید تا تفاوت بین تجربه پیش‌فرض معمولی و تجربه اتصالات قطع شده را ببینید:

به قلم نگاه کن
نسخه نمایشی پست وبلاگ: بهینه سازی پیمایش صفحه کلید با استفاده از tabindex و ARIA توسط Sara Soueidan (@SaraSoueidan)
در CodePen.

به قلم نگاه کننسخه نمایشی پست وبلاگ: بهینه سازی پیمایش صفحه کلید با استفاده از tabindex و ARIA توسط Sara Soueidan (@SaraSoueidan)
در CodePen.

یک اندازه برای همه مناسب است نه مناسب همه

همه فهرست های مقاله یکسان ایجاد نمی شوند. در مثال های بالا، پیوندهای زیادی بین هر یک از پیوندهای متوالی در صفحه کامل مقاله وجود نداشت. در هر یک از مثال‌ها، گزیده پست کوتاه است و هیچ پیوندی در آن وجود ندارد، و هیچ لیست برچسبی پس از عنوان پست وجود ندارد که عنوان را از پیوند ادامه مطلب جدا کند.

بسته به اینکه چگونه CMS یا SSG خود را برای تولید قطعه‌ها تنظیم کرده‌اید، می‌توان آنها را به صورت متن ساده یا نشانه‌گذاری کامل تولید کرد. به عنوان مثال، در این وبلاگ، اسنیپت ها به صورت متن ساده تولید می شوند، بنابراین هیچ لینکی ندارند. با codrops، snippet ها در واقع snippet نیستند – آنها توضیحات سفارشی مقاله هستند، بنابراین با طراحی آنها هیچ پیوندی نیز ندارند. اما همه پست‌ها یا توضیحات نمونه بدون لینک ارائه نمی‌شوند.

وقتی آنجاست هستند چندین پیوند بین عنوان و لینک ادامه مطلب، این کار را انجام می دهد مهم است تا کاربر از لینک ادامه مطلب استفاده کند. برای نشان دادن، من روند گذر از وب‌سایت Lea Verou را ضبط کرده‌ام، جایی که او گزیده‌ای طولانی‌تر از یک پست ثبت شده را نشان می‌دهد و در برخی موارد حاوی تعداد زیادی لینک است.

از آنجایی که تعداد زیادی لینک بعد از عنوان پست در هر ورودی وجود دارد، به خواندن ادامه دهید پیوند در پست های لیا برای تجربه صفحه کلید ضروری است. پیوند اکنون میانبر صفحه کامل مقاله است. اگر وجود نداشت یا حذف می شد، کاربر باید برای بازدید از کل مقاله به عنوان پست برگردد، که بی معنی است. این یک نمونه از زمانی است که شما انجام می دهید نه می خواهید استفاده کنید tabindex و ARIA یک پیوند را رد کنید زیرا این کار را می کند بدتر شدن تجربه کاربر

چند سال پیش، زمانی که پایه و اساس قسمت جلویی مجله Smashing را ساختم، رویکرد متفاوتی برای انتشار پست ها در پیش گرفتم. پست‌ها به صورت “نقشه” طراحی شده‌اند و نقشه‌ها ملاحظات پیاده‌سازی خاص خود را دارند که در پست قبلی خود درباره پیوندهای تودرتو مستند کردم.

هر طراحی دارای ملاحظات کاربردی خاص خود است که باید در نظر گرفته شود. برای بهبود تجربه، باید طراحی را با استفاده از صفحه کلید و در صورت امکان با کاربران واقعی آزمایش کنید – آنها معمولاً می توانند اطلاعات زیادی را ارائه دهند که ممکن است ما طراحان/توسعه دهندگان از دست بدهیم.

به طور خلاصه:

• همه کاربران شما از ماوس برای پیمایش صفحات شما استفاده نمی کنند.
• نحوه علامت گذاری اقلام خود تأثیر مستقیمی بر نحوه تعامل افراد با آنها دارد.
• پیوندها می توانند به طور پیش فرض فوکوس کنند، اما ممکن است منطقی باشد که از برخی پیوندها صرف نظر کنید اگر طراحی و تجربه کاربر اجازه دهد.
• یک قانون کلی خوب برای چنین مواردی این است که اگر چندین پیوند متوالی به یک صفحه دارید، احتمالاً با پرش برخی از آن پیوندها برای کاهش تعداد برگه ها به یک، امکان بهبود ناوبری صفحه کلید وجود دارد. هرچه تعداد برگه‌ها کمتر باشد، بهتر است، تا زمانی که دیگر جنبه‌های کاربری را کاهش ندهد یا به خطر نیندازد.
• هیچ قانونی وجود ندارد که برای همه مناسب باشد. یک رویکرد ممکن است برای یک طراحی کار کند اما برای دیگری نه.

و بار دیگر: هر طراحی با چالش ها و ملاحظات خاص خود همراه است. آنها را در نظر بگیرید، گزینه های خود را بسنجید، با کاربران واقعی تست کنید، از صفحه کلید استفاده کنید، و در صورت لزوم بهینه سازی کنید. در پایان روز، همیشه باید در مورد آن باشد کاربر تجربه