سپنتا پویا — طراح محصول

واژهٔ ACCESSIBILITY با یازده حرف میانی شمرده‌شده که به A11Y کوتاه می‌شود
نویسنده: Interaction Design Foundation · منبع: بنیاد طراحی تعامل (IxDF) · ترجمهٔ آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۱ دقیقه

دسترس‌پذیری (اکسسبیلیتی) چیست؟

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

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

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

A11Y؛ نام دیگر دسترس‌پذیری

واژهٔ ACCESSIBILITY با یازده حرف میانی شمرده‌شده که به A11Y کوتاه می‌شود
چرا A11Y — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

در جامعهٔ طراحی زیاد به شکل کوتاه‌شدهٔ A11Y برمی‌خورید. این یک «عددواژه» (numeronym) است: بین حرف A و حرف Y در واژهٔ Accessibility دقیقاً یازده حرف قرار دارد، پس آن یازده حرف را با عدد ۱۱ جایگزین می‌کنند. این شکل کوتاه به‌ویژه در شبکه‌های اجتماعی و هشتگ‌ها رایج است.

تلفظش هم یکدست نیست؛ بعضی «اِی-اِلِوِن-وای»، بعضی «اَلای» (مثل واژهٔ ally به‌معنای هم‌پیمان) و بعضی هم کل واژه را کامل می‌گویند. چون این اصطلاح برای مخاطب ناآشنا گنگ است، بهتر است در متن‌های عمومی دست‌کم یک‌بار توضیحش دهید. نکتهٔ اصلی پشت این نام هم همان پیام همیشگی است: محصولی که دسترس‌پذیر باشد، به همه بهتر خدمت می‌کند.

دسترس‌پذیری در برابر کاربردپذیری

دو دایرهٔ متداخل: دسترس‌پذیری («آیا این فرد اصلاً می‌تواند؟») در برابر کاربردپذیری («چقدر راحت؟») و اشتراکشان
دسترس‌پذیری همان کاربردپذیری نیست — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

این دو مفهوم به هم نزدیک‌اند اما یکی نیستند. کاربردپذیری (Usability) بر سه ستون تکیه دارد: اثربخشی (کاربر به هدفش می‌رسد؟)، کارایی (با چه سرعت و چه زحمتی؟) و رضایت (تجربه چقدر خوشایند بود؟). دسترس‌پذیری اما یک قدم پیش‌تر می‌رود و می‌پرسد: آیا همهٔ کاربران، از جمله افراد دارای معلولیت، می‌توانند به تجربه‌ای هم‌ارز دست پیدا کنند؟

در تئوری این دو هم‌پوشانی دارند و بعضی چارچوب‌ها دسترس‌پذیری را زیرمجموعهٔ کاربردپذیری می‌دانند. اما در عمل تفکیک‌شان مهم است: پروژه‌های کاربردپذیری اغلب تجربهٔ کاربرانِ دارای معلولیت را نادیده می‌گیرند، در حالی که دسترس‌پذیری آگاهانه همان کاربران را در مرکز توجه قرار می‌دهد. به بیان ساده، محصولی می‌تواند برای کاربر میانگین بسیار کاربردپذیر باشد اما برای کسی که با صفحه‌خوان کار می‌کند عملاً غیرقابل‌استفاده بماند.

طراحی دسترس‌پذیر به همه کمک می‌کند

مهم‌ترین سوءتفاهم دربارهٔ دسترس‌پذیری این است که آن را «امکاناتی برای گروهی اقلیت» بدانیم. واقعیت این است که تقریباً همهٔ ما، دیر یا زود و در موقعیت‌های مختلف، از قابلیت‌های دسترس‌پذیری بهره می‌بریم:

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

این همان ایدهٔ آشنای «اثر حاشیهٔ پیاده‌رو» است؛ شیبی که برای ویلچر ساخته شد، به چرخ‌دستی خرید، کالسکه و چمدان چرخ‌دار هم خدمت می‌کند. برآوردها نشان می‌دهد نادیده‌گرفتنِ دسترس‌پذیری می‌تواند حدود ۱۶٪ از جمعیت جهان را از محصول شما کنار بگذارد؛ رقمی که هیچ کسب‌وکاری نباید به‌سادگی از کنارش بگذرد.

فراتر از اخلاق و شمول، دسترس‌پذیری منطق تجاری روشنی هم دارد: بسیاری از حوزه‌های قضایی (مثل اتحادیهٔ اروپا) برای محصولات غیرقابل‌دسترس جریمه در نظر می‌گیرند؛ ساختار معنایی و متن جایگزینِ درست، سئو (SEO) را تقویت می‌کند؛ دامنهٔ دستگاه‌ها و محیط‌های قابل‌استفاده گسترده‌تر می‌شود؛ و در نهایت، برند شما به‌عنوان برندی فراگیر و مسئول شناخته می‌شود.

انواع محدودیت‌های دسترس‌پذیری

چهار محدودیت (دیدن، شنیدن، حرکت، تفکر) در سه حالت دائمی، موقت و موقعیتی
یک سد، سه حالت — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

برای اینکه طراحی‌مان واقعاً فراگیر باشد، باید بدانیم با چه گونه‌هایی از محدودیت روبه‌روییم. نکتهٔ کلیدی این است که بسیاری از این محدودیت‌ها دائمی نیستند و می‌توانند موقتی یا موقعیتی باشند:

  • - بینایی: نابینایی، کم‌بینایی و انواع کوررنگی (مثلاً دشواری در تفکیک قرمز و سبز).
  • - حرکتی و جسمی: از کاربر ویلچر تا کسی که به‌خاطر شکستگی موقتاً فقط با یک دست تایپ می‌کند.
  • - شنوایی: ناشنوایی و کم‌شنوایی، یا صرفاً بودن در محیطی که نمی‌شود صدا را شنید.
  • - تشنج و حساسیت نوری: صرع حساس به نور که می‌تواند با چشمک‌زدن‌های سریع صفحه تحریک شود.
  • - یادگیری و شناختی: نارساخوانی (دیسلکسیا)، اختلال تمرکز و دشواری‌های پردازش زبان.
  • - موقعیتی و محیطی: کاربرِ خواب‌آلود، دستِ مشغول، یا کسی که در مترو با اینترنت ضعیف و نور کم کار می‌کند.

همان‌طور که بیلی گرگوری، متخصص دسترس‌پذیری، به‌طعنه می‌گوید وقتی تجربهٔ کاربری همهٔ کاربران را در نظر نگیرد، دیگر «تجربهٔ کاربری» نیست؛ بلکه فقط «تجربهٔ بعضی کاربران» است. طراحی خوب یعنی این «بعضی» را تا حد ممکن به «همه» نزدیک کنیم.

راهنمای عملی برای طراحی دسترس‌پذیر

دسترس‌پذیری یک مقصد نیست، یک تمرین همیشگی است. استاندارد مرجع در این حوزه، WCAG (رهنمودهای دسترس‌پذیری محتوای وب) است که کنسرسیوم وب جهانی (W3C) منتشرش می‌کند. در کنار پایبندی به این استاندارد، این کارهای عملی بیشترین تأثیر را دارند:

یک عکس و سه متن جایگزین برای آن: خالی، «photo»، و توصیف واقعی — با داوری هرکدام
نوشتن متن جایگزین — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)
  • - سلسله‌مراتب درستِ تیترها: از تگ‌های عنوان (h1 تا h6) به‌ترتیب منطقی استفاده کنید و ظاهرشان را با CSS تنظیم کنید، نه با پرش‌های بی‌قاعده. صفحه‌خوان‌ها به همین ساختار برای ناوبری تکیه می‌کنند.
  • - متن جایگزین (alt) برای تصاویر محتوایی: هر تصویری که معنا حمل می‌کند باید توصیف متنی داشته باشد تا کاربرِ صفحه‌خوان از محتوایش باخبر شود؛ تصاویر صرفاً تزئینی را با متن جایگزین خالی رها کنید.
  • - لینک‌های معنادار: متن لینک باید مستقل از متن اطراف هم قابل‌فهم باشد؛ «اینجا کلیک کنید» بد است، «دانلود راهنمای WCAG» خوب. لینک‌ها باید نشانهٔ بصری هم داشته باشند.
  • - رنگ هرگز تنها حاملِ معنا نباشد: کنتراست بالا انتخاب کنید و اطلاعات را علاوه بر رنگ با شکل، برچسب یا الگو هم منتقل کنید تا کاربر کوررنگ چیزی را از دست ندهد.
  • - فرم‌های سازگار با صفحه‌خوان: هر ورودی برچسب صریح داشته باشد و در جای لازم از نقش‌ها و صفت‌های ARIA استفاده کنید.
  • - نشانه‌گذاری معتبر و ساختارمند: از عناصر درستِ HTML (مثل فهرست‌ها) استفاده کنید و کد را با ابزارهای اعتبارسنجی W3C بررسی کنید.
  • - جایگزین برای صوت و ویدیو: برای پادکست و فایل صوتی رونوشت متنی و برای ویدیو زیرنویس فراهم کنید.
  • - زبان ساده و شفاف: جمله‌ها را کوتاه و سلسله‌مراتب اطلاعات را روشن نگه دارید تا بار شناختی کم شود.
  • - آزمونِ بدون‌ماوس: کل مسیرهای اصلی را فقط با صفحه‌کلید طی کنید و از ابزارهایی مثل WAVE و Color Oracle برای سنجش دسترس‌پذیری و شبیه‌سازی کوررنگی استفاده کنید.

یک ترفند عملی هم این است که در کنار پرسوناهای اصلی، یک «پرسونای ثانویه» با تأکید بر نیازهای دسترس‌پذیری بسازید تا این کاربران در کل فرایند طراحی دیده شوند.

اصول چهارگانهٔ POUR

چیپ‌های وضعیت با رنگ تنها در برابر رنگ به‌همراه آیکون و واژه، در حالت عادی و در شبیه‌سازی دوترانوپی
رنگ هرگز نباید تنها حامل پیام باشد — نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

قلب استاندارد WCAG را می‌توان در چهار اصل خلاصه کرد که سرواژهٔ آن‌ها POUR است. هر محتوای دسترس‌پذیر باید این چهار ویژگی را داشته باشد:

  • - قابل‌ادراک (Perceivable): کاربر باید بتواند محتوا را با حواسش دریافت کند. یعنی برای هر تصویر، صوت و ویدیو جایگزینی وجود داشته باشد که از راه حسی دیگر قابل‌درک باشد.
  • - قابل‌عمل (Operable): کاربر باید بتواند با ابزارهای گوناگون — صفحه‌کلید، ماوس، لمس، صدا یا حرکت — رابط را کنترل کند؛ نه فقط با یک روش خاص.
  • - قابل‌فهم (Understandable): محتوا و عملکرد رابط باید روشن و پیش‌بینی‌پذیر باشد و در جای لازم راهنمایی و بازخورد به کاربر بدهد.
  • - پایدار و مقاوم (Robust): کد باید معتبر و استاندارد باشد تا با فناوری‌های کمکیِ امروز و فردا — از صفحه‌خوان‌ها تا مرورگرهای آینده — سازگار بماند.

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

سطوح WCAG و اینکه واقعاً کدام را هدف بگیریم

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

  • - سطح A: کمینهٔ مطلق. اگر رد شوید، بخشی از کاربران عملاً نمی‌توانند از محصول استفاده کنند. این سطح انتخاب نیست.
  • - سطح AA: هدف عملی تقریباً همهٔ محصولات، و همان سطحی که در بیشتر قوانین و قراردادها به آن ارجاع می‌شود. اگر یک هدف می‌خواهید، همین است.
  • - سطح AAA: سخت‌گیرانه و برای همهٔ محتوا عملی نیست؛ خودِ سند هم نمی‌گوید که کل یک سایت باید AAA باشد.

از میان معیارها، چهار مورد بیشترین بازده را دارند و اگر وقت محدودی دارید همین‌ها را درست کنید: کنتراست متن (کمینهٔ ۴.۵ به ۱ برای متن معمولی و ۳ به ۱ برای متن درشت در سطح AA)، هدف لمس با اندازهٔ کافی، قابلیت پیمایش کامل با کیبورد با حالت فوکوس دیدنی، و برچسب فرم که واقعاً به فیلدش وصل باشد. این چهارتا بخش بزرگی از خطاهای واقعی را پوشش می‌دهند.

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

دسترس‌پذیری در رابط فارسی

این بخش هم در منبع نیست و از کار روی محصولات فارسی‌زبان می‌آید. چند مسئله وجود دارد که در راهنماهای انگلیسی‌زبان نمی‌بینید:

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

ارتفاع خط و خوانایی. حروف متصل فارسی زیر و بالای خط کرسی امتداد دارند؛ با ارتفاع خط کمِ متعارفِ لاتین، سطرها به هم می‌چسبند و متن برای کاربر کم‌بینا یا نارساخوان عملاً ناخواندنی می‌شود. این یک انتخاب زیبایی‌شناختی نیست، بخشی از دسترس‌پذیری است.

قلم و اندازهٔ کوچک. بسیاری از قلم‌های فارسی در اندازه‌های کوچک جزئیاتشان را از دست می‌دهند و نقطه‌ها به هم می‌رسند. متن ریز فارسی زودتر از متن ریز لاتین ناخوانا می‌شود، پس کمینهٔ اندازهٔ متن‌تان را سخاوتمندانه‌تر بگذارید.

ارقام و صفحه‌خوان. ترکیب ارقام فارسی و لاتین در یک متن، خوانش صفحه‌خوان را نامنظم می‌کند. در هر صفحه یکدست بمانید. برای شمارهٔ کارت، شبا و کد ملی هم قالب را در متن دائمی کنار فیلد بنویسید، نه فقط در پیام خطا.

متن جایگزین به فارسی، با اطلاعات واقعی. نوشتن «تصویر» یا رهاکردن متن جایگزین انگلیسی در یک صفحهٔ فارسی، هر دو بی‌فایده‌اند. متن جایگزین باید همان اطلاعاتی را بدهد که خوانندهٔ بینا از تصویر می‌گیرد — و اگر تصویر تزئینی است، خالی گذاشتنش درست‌تر از توصیف‌کردنش است.

جمع‌بندی

  • - دسترس‌پذیری یعنی محصول برای همه کار کند، فارغ از توانایی یا شرایط؛ نه امکاناتی حاشیه‌ای برای گروهی اقلیت.
  • - A11Y شکل کوتاه‌شدهٔ همین واژه است و بر این نکته پا می‌فشارد که طراحیِ دسترس‌پذیر به همه بهتر خدمت می‌کند.
  • - دسترس‌پذیری فراتر از کاربردپذیری می‌رود و آگاهانه کاربرانِ دارای معلولیت را در مرکز قرار می‌دهد.
  • - محدودیت‌ها می‌توانند دائمی، موقتی یا موقعیتی باشند: بینایی، حرکتی، شنوایی، شناختی و محیطی.
  • - WCAG استاندارد مرجع است و اصول چهارگانهٔ POUR (قابل‌ادراک، قابل‌عمل، قابل‌فهم، پایدار) قطب‌نمای عملی آن‌اند.
  • - هدف عملی تقریباً همهٔ محصولات سطح AA است؛ سطح A انتخاب نیست و AAA برای کل محتوا عملی نیست.
  • - چهار معیار بیشترین بازده را دارند: کنتراست متن، اندازهٔ هدف لمس، پیمایش کامل با کیبورد با فوکوس دیدنی، و برچسب فرمِ وصل‌شده.
  • - قبولی در ابزار خودکار به معنای دسترس‌پذیری نیست؛ سنجهٔ واقعی طی‌کردن صفحه فقط با کیبورد و یک بار با صفحه‌خوان است.
  • - در فارسی، اعلام جهت در کد (نه با ترفند بصری) و ارتفاع خط سخاوتمندانه پیش‌نیاز دسترس‌پذیری‌اند، نه جزئیات ظاهری.

منبع

این نوشته ترجمه‌ای آزاد است از مقالهٔ Accessibility: Definition and Best Practices منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF).

متن نسخهٔ اصلی تحت لایسنس CC BY-SA 4.0 منتشر شده و این ترجمه نیز با ذکر منبع ارائه می‌شود. تصاویر اما دیگر از منبع بازنشر نمی‌شوند: هر پنج نمودار این صفحه از نو و به‌دست مترجم کشیده شده‌اند. در نمودار «رنگ هرگز تنها حامل پیام نباشد»، شبیه‌سازی دوترانوپی با تقریب Viénot-Brettel و در فضای RGB خطی (نه گاما‌خورده) محاسبه شده و کدهای رنگ پای نمودار آمده است؛ همان‌جا هم صریح گفته شده که دو رنگ «یکسان» نمی‌شوند، بلکه از محور قرمز-سبز بیرون می‌روند و فاصله‌شان حدود ۴۶ درصد کم می‌شود. مقالهٔ اصلی نمونه‌ها و تصاویر بیشتری هم دارد که در نسخهٔ اصلی قابل مشاهده‌اند.

بخش‌های افزودهٔ مترجم که در مقالهٔ اصلی نیامده‌اند: بخش «سطوح WCAG و هدف عملی» شامل تفکیک سه سطح A و AA و AAA، چهار معیار پربازده (کنتراست، هدف لمس، پیمایش کیبورد با فوکوس دیدنی، و برچسب فرم)، و هشدار دربارهٔ کفایت‌نداشتن ابزارهای خودکار؛ و بخش «دسترس‌پذیری در رابط فارسی» شامل اعلام جهت در کد در برابر راست‌به‌چپ‌سازی بصری و اثرش بر ترتیب فوکوس، ارتفاع خط و خوانایی حروف متصل، افت جزئیات قلم فارسی در اندازهٔ کوچک، یکدستی ارقام برای صفحه‌خوان، و نوشتن متن جایگزین فارسی با اطلاعات واقعی.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - دسترس‌پذیری چیست؟
  • - دسترس‌پذیری در برابر کاربردپذیری
  • - به همه کمک می‌کند
  • - انواع محدودیت‌ها
  • - راهنمای عملی طراحی
  • - اصول چهارگانهٔ POUR
  • - سطوح WCAG و هدف عملی
  • - در رابط فارسی
  • - جمع‌بندی

برچسب‌ها

  • دسترس‌پذیری
  • A11Y
  • WCAG
  • UX
  • ترجمه