آرتا مکبری
آرتا مکبری
خواندن ۳ دقیقه·۲ سال پیش

نکته‌های وبِ فراگیر؛ هم‌ترازی بلوک‌های متن از طرفین صفحه

پاراگراف‌های متن نباید با هردو سمت صفحه هم‌تراز (Justified) شده باشد
پاراگراف‌های متن نباید با هردو سمت صفحه هم‌تراز (Justified) شده باشد


[نسخه صوتی مقاله در ساندکلاد]

بلوک‌های متن کاملاً طرفین‌تراز (Fully justified)، مرکزچین یا چپ‌چین در زبان فارسی، بارهای شناختی نامناسبی را برای کاربران دارای ناتوانی‌های شناختی ایجاد می‌کنند. بارهای شناختی نهایتاً منجر به «هزینه تعاملی (Interaction Cost)» غیرضروری خواهند شد و عدم رضایت کاربر را از محصول به‌همراه خواهد داشت.

با یک سوال کاربردی شروع می‌کنیم. مطمئن هستید که محتوای متنی شما همیشه راست‌چین باشد و فضای خالی هر دو طرف صفحه را پر نکند؟ یا به عبارتی بلوک متنی طرفین‌تراز (Justified) نباشد؟

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

بسیاری از افراد دارای ناتوانی‌های شناختی (Cognitive Disabilities) با بلوک‌های متنی که طرفین‌تراز هستند (هم‌تراز با حاشیه چپ و راست صفحه) مشکل زیادی دارند. به عنوان مثال، ناتوانیِ پنهانِ دیسلکسیا (خوانش‌پریشی یا دُش‌خوانی) که یک ناتوانی‌ شناختی است؛ بلوک‌های متن طرفین‌تراز فضاهای سفید نابرابری را بین کلمات به وجود می‌آورند که باعث ایجاد یک اختلال بصریِ (Visual Noise) ناخواسته به‌نام «رودخانه‌های سفیدِ پایین‌رونده در صفحه (Rivers of White)» می‌شوند. این اختلال بصری که می‌تواند خواندن متن را برای این فراد دشوار کند. بهترین راه برای جلوگیری از این مشکل، ایجاد طرح‌بندی (Layouting) متنی است که بلوک‌های متن طرفین‌تراز (هم‌تراز با حاشیه چپ و راست صفحه) نباشند.

نویز بصری دیسکسیا به‌نام «رودخانه‌های سفید پایین رونده در صفحه (rivers of white)
نویز بصری دیسکسیا به‌نام «رودخانه‌های سفید پایین رونده در صفحه (rivers of white)


گزینه‌های قابل‌تغییر برای مؤلفه‌های بصری متن

کاربرانِ دارای اختلالات بینایی یا شناختی ممکن است برای استفاده از وب‌سایت شما احتیاج داشته باشند؛ ویژگی‌های ظاهری آن را سفارشی کنند.

برخی کاربران برای راحتی بیشتر در خواندن، احتیاج به رنگ پس‌زمینه و پیش‌زمینهٔ خاصی دارند. برای بعضی دیگر از کاربران، دنبال کردن خطوط طولانی یا متن‌های فاصله‌بندی‌شده (Justified text) دشوار است و عده‌ای هم زمانی‌که خطوط و پاراگراف‌ها به هم نزدیک باشند نمی‌توانند متون را بخوانند.

از آنجایی که هر کاربر نیاز‌های متفاوتی دارد، ارائه طیف وسیعی از گزینه‌هایی که به کاربران امکان انتخاب می‌دهد، به اکثر افراد در خواندن متون کمک خواهد کرد.

پنج گزینهٔ زیر را به شکل مرکب در نظر بگیرید؛ چرا که همگی باید درست در جای خود قرار بگیرند تا انطباق با شاخص موفقیت ۱.۴.۸ – مؤلفه‌های بصری انجام پذیرد:

  1. کاربران می‌توانند رنگ پس‌زمینه و پیش‌زمینه را به دلخواه تغییر دهند؛
  2. اندازهٔ بلوک های متنی از هشتاد نویسه بیشتر نباشد؛
  3. متن با هردو سمت صفحه هم طراز (Justified) نشده باشد؛
  4. فاصلهٔ حداقلیِ ۱.۵ برابر اندازه قلم برای ارتفاع بین خطوط پاراگراف‌ها (Line height) لحاظ شده باشد (از منظری دیگر، فاصله بین خطوط حداقل ۱.۵ برابر فاصلهٔ بین پاراگراف‌ها باشد و فاصلهٔ بین پاراگراف‌ها حداقل 1.5 برابر بزرگتر از فاصلهٔ بین خطوط باشد)؛ و
  5. فاصلهٔ بین پاراگراف‌ها (Paragraph spacing) حداقل ۲ برابر اندازه قلم باشد؛ و
  6. کاربران بدون نیاز به اسکرول افقی می توانند اندازهٔ متن را تا ٪۲۰۰ افزایش دهند.

نکته‌

تمام گزینه‌های قابل‌تنظیم مربوط به مؤلفه‌های بصری را به سربرگ اضافه کنید تا اولین چیزی باشد که کاربران با ورود به وب‌سایت، آن را مشاهده می‌کنند.

صفحهٔ قابلیت دسترسی وب‌سایت BBC طیف‌ خوبی از گزینه‌های رنگی و فاصله‌گذاری‌ها را به خوبی رعایت کرده و می‌تواند نمونهٔ مناسبی برای انطباق با موارد ۱ تا ۴ باشد.



دسترسی‌پذیریمتنjustifiedمحتوابلوک‌های متن
طراح ارشد محصول، تحلیلگر تجربه‌ کاربر، حامی دسترسی‌پذیری در ایران
شاید از این پست‌ها خوشتان بیاید