با وجود آنکه تلاش‌های بسیاری از جانب توسعه‌دهندگانی که در حال ارتقا و بهبود بوت‌استرپ هستند را می‌بینم، اما چند قسمت وجود داشت که این کتابخانه محبوب رابط‌کاربری در آن سقوط کرد. اما با وجود حتی این مشکلات هم، هر روز در حال بهتر شدن است و تا به حال می‌شود گفت که مشکلات بسیاری از آن حل شده است. این بهبود وضعیت منجر به محبوب شدن این فریمورک شده، تا جایی که در حال حاضر می‌توانیم مشاهده کنیم که تقریبا ۳.۶ درصد وبسایت‌های جهان از این فریمورک استفاده می‌کنند.
به تازگی نسخه ۴ بوت‌استرپ عرضه شده، پس بیاید به آن نگاهی بیاندازیم و ببینیم آیا هیچکدام از مشکلاتی که من قبلا با آن داشتم حل شده است یا خیر.
چیزی که ما در طراحی جستجو می‌کنیم :
دسترسی‌پذیری
وقتی شروع به ایجاد یک وبسایت می‌کنید مواردی وجود دارند که به دسترسی‌پذیری مرتبط می‌شوند و شما نیاز خواهید داشت که آن‌ها را در نظر بگیریم. باور دارم که این موضوع تجربه کاربری را برای همگان بهتر می‌کند و مشکلات زیادی را برای افراد مختلفی پوشش می‌دهد.
لایه‌بندی
یکی از راه‌های رسیدن به دسترسی‌پذیری و داشتن وبسایتی موفق با این قابلیت، داشتن لایه‌بندی ساده و آسان برای استفاده است. این قابلیت باید در تمام دستگاه‌ها به همین شکل باشد. در بسیاری از مواقع تنها این مسئله قسمت عظیمی از ماجرا را حل می‌کند.
امتیاز مثبت : داشتن یک رابط کاربری همراه با سیستم لایه‌بندی زیبا و آسان برای استفاده، همچنین به افرادی که توانایی استفاده از ماوس را ندارند و یا از اسکرین‌ریدر‌ها استفاده می‌کنند، قابلیت استفاده بهتر از وبسایت را می‌دهد.
فونت
داشتن فونتی که برای خواندن مناسب باشد نیز یکی دیگر از موارد مهم در دسترسی‌پذیری است. معلولیت‌هایی وجود دارد که باعث می‌شود توانایی خواندن برخی فونت‌ها و برخی نوشته‌ها برای افراد سخت شود به همین دلیل انتخاب فونت مناسب بسیار مهم است.
تا جایی که می‌توانید از فونت‌های کامیک و عجیب و غریب خودداری کنید. خواندن متن بالا برای افراد عادی هم بسیار سخت است، در یک آمار نشان داده که تنها ۱۵ درصد از جمعیت می‌توانند چنین چیزی را مطالعه کنند.
فونت‌های سنس-سریف به صورت عمومی در حال استفاده است، هرچند که ممکن است به اندازه موارد قبلی جذاب و کامیک نباشند اما خواندن را برای افراد مختلف ساده‌تر می‌کنند.
رنگ
انتخاب رنگ نیز یکی از موارد مهم است که باید به آن توجه داشت. اگر رنگ‌های شما تشابه و کنتراست نزدیک به هم داشته باشند خواندن را برای افراد مختلف سخت می‌کنند.
بنابراین بسیار مهم است که فونت مناسب و معقولی را انتخاب کنید. می‌تواند کنتراست آن‌ها را از طریق این ابزار چک کنید.
بیاید دسترسی‌پذیری بوت‌استرپ را آزمایش کنیم
بیاید ببینیم بوت‌استرپ در مقابل این شاخص‌ها چگونه عمل می‌کند.
لایه‌بندی
درحالی که معمولا وبسایت شما به یک لایه‌بندی سفارشی نیاز دارد اما بوت‌استرپ لایه‌بندی‌های پیشفرضی را تهیه کرده که می‌توانید از آن‌ها استفاده کنید، گرید‌سیستم یکی از آن موارد است. بسیاری از مردم تنها برای این از بوت استرپ استفاده می‌کنند چون روند طراحی وبسایت واکنشگرا را برای آن‌ها بسیار سریع می‌کند و بدین شکل می‌توانند وبسایت شان را در قالب‌های متفاوت و دستگاه‌های مختلف نمایش دهند.
امتیاز مثبت : قسمت لایه‌بندی بوت‌استرپ که معمولا ساختن آن کمی دشوارتر از قسمت‌های دیگر است تقریبا بخش عظیمی از وبسایت را شامل می‌شود، به همین دلیل ناوبری در وبسایت با استفاده از کیبورد در مغایرت با ماوس از یک حالت منطقی و سفارشی‌سازی شده پیروی می‌کند. به این شیوه شما می‌توانید به اکثر بخش‌های وبسایت دسترسی کاملی داشته باشید.
در مثال زیر می‌توانید لینکی برای برگشت به بالا مشاهده کنید همچنین دو لینک دیگر نیز موجود است، وقتی شما لینک اولی را انتخاب کردید قسمت نمای شما به بالای وبسایت مراجعه می‌کند اما اگر یک بار دیگر تب را بزنید به پایین وبسایت می‌روید.
یکی دیگر از مثال‌ها می‌توان به فرم زیر اشاره کرد در این صفحه تمرکز کیبورد بجای اینکه در ابتدا روی فرم اصلی باشد روی قسمت سایدبار قرار دارد و این موضوع ممکن است بسیار سردرگم‌کننده و عجیب باشد.
وقتی آخرین بار این مورد را در نسخه‌های جدید بوت استرپ مشاهده کردم بسیار بهبود یافته بود اما مورد دیگری که باید تغییر می‌کرد این بود که در کنار گذاشتن قابلیت هاور برای ماوس باید قابلیت focus را نیز برای کیبورد فراهم می‌کردند. برای مثال:
a:hover,
a:focus {
text-decoration: underline;
}
بدون این، وقتی کیبورد روی قسمتی اشاره دارد هیچ نشانه یا قابلیتی نشان‌دهنده این نیست که کاربر در کجا قرار دارد. اضافه کردن چنین قابلیتی به فرم‌ها، برچسب‌ها، دکمه‌ها و… باعث می‌شود که وضعیت دسترسی‌پذیری بسیار بهتر شود.
فونت
به صورت پیشفرض بوت‌استرپ همراه با فونت Helvetica Neue عرضه می‌شود که یک فونت سنس-سریف است.
سنس-سریف فونتی بسیار کاربرپسند و قابل خواندن است. بنابراین من فکر می‌کنم در این زمینه بوت استرپ یک انتخاب قابل دسترس است. این فونت با تعداد زیادی از مرورگرها و دستگاه‌های موبایل متفاوت قابلیت سازگاری خوبی دارد به همین منظور اصلا مهم نیست که به چه شکی از آن استفاده می‌کنید. این فونت‌ها همچنین از واحد اندازه گیری em بهره می‌برند که مقایس‌‌پذیری روی دستگاه‌های کوچک‌تر را بهتر می‌کنند.
رنگ
بیشتر رنگ‌هایی که در بوت‌استرپ استفاده می‌شود بدان شکل مناسب قابل دسترس نیستند. البته این موضوع را می‌توانید در مستندات بوت‌استرپ نیز مشاهده کنید.
بیشتر رنگ‌هایی که به صورت پیشفرض در بوت استرپ قرار دارد و برای المان‌های مختلف استفاده می‌شود، کمتر روی کنتراست و سازگاری آن کار شده است.
نسخه ۴ام آن نسبت نسخه ۳ام تغییرات و بهبود‌های بسیار خوبی در زمینه کنتراست رنگ داشته اما با این وجود باز هم باید با دقت موارد را انتخاب کنید به این دلیل که همه چیز ممکن است با همدیگر متضاد باشند و برای تجربه کاربری وبسایت مشکل ایجاد کنند.
ابزاری که در بالاتر معرفی شد برای اینکار کمک بسیاری به شما می‌کند برای مثال کنتراست مربوط به پس زمینه آبی و رنگ سفید را می‌توانید در زیر مشاهده کنید:
نکته مثبت : بررسی کردن رنگ‌هایی که استفاده می‌کنید از طریق یک ابزار که برای کوررنگی تعبیه شده نیز حالت مناسب و بررسی مفید است. تقریبا ۸ درصد افراد به کوررنگی نسبت به رنگ قرمز دچار هستند پس مشاهده آن و ترکیبات مربوط به آن برای‌شان سخت است. ابزارهای متفاوتی برای بررسی اینحالت وجود دارد که می‌توانید در این لینک مشاهده کنید.
نکته مثبتی دیگر : بررسی وبسایت با استفاده از رنگ‌هایی که کنتراست بالایی دارند نیز برای بررسی دسترسی‌پذیری گزینه خوبی است. برخی افراد بدلیل وجود کم بینی مرورگرشان را روی این حالت قرار می‌دهند تا به صورت واضح‌تری بتوانند همه چیز را ببینند. برای مثال در مرورگر فایرفاکس اگر وارد قسمت تنظیمات شوید می‌توانید به صورت زیر کنتراست مربوط به پس زمینه و رنگ قلم را تغییر دهید:
آخرین باری که از بوت استرپ نسخه ۳ استفاده کردم، با فعال کردن این ویژگی ورودی‌ها را به صورت کاملا مبهمی نشان می‌داد. این دفعه به نظر بهتر از سابق است.
در برخی حالت‌ها رنگ سیاه پس‌زمینه تمام ورودی‌ها و برچسب‌ها را نیز پنهان می‌کند و شما نمی‌توانید هیچ چیزی را مشاهده کنید.
خوشبختانه حل کردن این مسئله بسیار ساده است. تنها کافی است که رنگ پس زمینه را به صورت transparent دربیاورید.
input {
background-color: transparent !important;
}
حال با این کار دکمه‌ها نیز بهتر نمایش داده می‌شوند.
آیا بوت‌استرپ دسترسی‌پذیر است ؟
به صورت کلی جواب این سوال نه است، نه کاملا! توسعه‌دهندگان ویژگی‌های دسترسی‌پذیری متفاوتی را به بوت استرپ اضافه کرده‌اند که این خود قدم بزرگی است اما این انتهای مسیر نیست.
طراحان و توسعه‌دهندگان نیز باید در زمان طراحی وبسایت حتی با بوت استرپ روند طراحی دسترسی‌پذیر را در ذهن داشته باشند. با در نظر گرفتن چنین حالتی و با کمک بوت‌استرپ و سعی خودتان می‌توانید وبسایت بسیار خوب و منطقی را ایجاد کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید