طراحی وب برای گجت‌های پوشیدنی با صفحه‌های کوچک: استفاده از متن‌های جایگزین برای دکمه‌ها
دکمه‌های آیکونی در گجت‌های پوشیدنی ممکن است برای همه قابل درک نباشند. طراحی باید از متن جایگزین یا برچسب برای دکمه‌ها استفاده کند.
طراحی وب برای گجت‌های پوشیدنی با صفحه‌های کوچک، استفاده از متن‌های جایگزین برای دکمه‌ها را به یک ضرورت دسترس‌پذیری و کاربردپذیری تبدیل می‌کند، نه یک انتخاب اختیاری.
در این نوشته، نشان می‌دهیم چرا متن جایگزین (Alt Text) روی دکمه‌های پوشیدنی، هم برای دسترس‌پذیری و هم برای تجربه‌ی کاربری حیاتی است.
از معیارهای WCAG تا الگوهای عملی نوشتن متن جایگزین، همه‌چیز را با نگاه مهندسی مرور می‌کنیم.
هدف این است که تیم‌های طراحی بتوانند دکمه‌هایی بسازند که برای همه، از جمله کاربران با ناتوانی بینایی، قابل استفاده باشند.
در پایان، یک چارچوب عملی برای نوشتن متن جایگزین دکمه‌ها در پوشیدنی ارائه می‌شود.
شروع: دکمه‌ای که برای همه قابل فهم نیست
یک بار رابط یک دستبند سلامتی را با صفحه‌خوان تست کردم. دکمه‌ی اصلی فقط یک آیکون داشت و متن جایگزین آن «دکمه» بود. کاربر نابینا نمی‌دانست این دکمه چه کاری انجام می‌دهد. آن روز فهمیدم متن جایگزین، یک جزئیات نیست؛ یک بخش اساسی از تجربه است.
طراحی وب برای گجت‌های پوشیدنی با صفحه‌های کوچک، به‌طور طبیعی تمایل به آیکون‌های ساده دارد. اما همین سادگی، اگر با متن جایگزین مناسب همراه نباشد، تجربه را برای بخش بزرگی از کاربران ناقص می‌کند.
چرا متن جایگزین روی دکمه‌ها حیاتی است
متن جایگزین (Alternative Text) در اصل برای تصاویر طراحی شده است، اما در مورد دکمه‌ها به معنای متنی است که صفحه‌خوان (Screen Reader) برای کاربر می‌خواند یا به‌عنوان راهنمای بافتی نمایش می‌دهد.
در پوشیدنی، چون فضای بصری محدود است، اغلب دکمه‌ها فقط آیکون دارند. این یعنی بدون متن جایگزین، کاربر با ناتوانی بینایی هیچ راهی برای فهم عملکرد دکمه ندارد. برای مبانی، تفاوت UI و UX نقطه‌ی شروع خوبی است، چون دسترس‌پذیری در هر دو لایه نقش دارد.
حتی برای کاربران بینا، متن جایگزین می‌تواند به‌عنوان راهنمای صوتی یا در حالت‌های خاص (مانند نور شدید) مفید باشد. اطلاعات بیشتر درباره‌ی ویژگی Alt را می‌توانید در ویکی‌پدیا ببینید.
دکمه‌ای که فقط آیکون دارد، برای کاربر نابینا اصلاً وجود ندارد.
معیارهای WCAG و الزامات دسترس‌پذیری
WCAG (Web Content Accessibility Guidelines) مجموعه‌ای از استانداردهای بین‌المللی برای دسترس‌پذیری وب است. این استانداردها در سطح AA و AAA الزامات مشخصی برای متن جایگزین دارند.
برای مطالعه‌ی جزئیات بیشتر، WCAG چیست و چه کاربردی دارد منبع کاملی است. در اینجا به‌طور خلاصه اشاره می‌کنیم که معیار 1.1.1 (Non-text Content) الزام می‌کند هر محتوای غیرمتنی که عملکردی دارد، باید متن جایگزین داشته باشد.
متن جایگزین در سطوح مختلف انطباق
| سطح | الزام | نکته |
|---|---|---|
| A | متن جایگزین پایه | حداقل قابل قبول |
| AA | متن جایگزین معنادار | رایج‌ترین سطح |
| AAA | متن جایگزین بافتی | بالاترین سطح |
در پوشیدنی، چون فضای بصری محدود است، رسیدن به سطح AA معمولاً کافی است، اما سطح AAA تجربه را به‌طور چشمگیری ارتقا می‌دهد. مطالعه‌ی استانداردهای دسترس‌پذیری وب می‌تواند چارچوب کامل‌تری ارائه دهد.
اصول نوشتن متن جایگزین مؤثر
نوشتن متن جایگزین مؤثر، یک مهارت است. متن باید کوتاه، معنایی و بافتی باشد. سه اصل کلیدی وجود دارد:
- هدف دکمه را توصیف کند، نه ظاهر آن
- از کلمات عمومی مانند «دکمه» یا «کلیک» پرهیز کند
- در بافت جمله‌ی صفحه‌خوان، طبیعی خوانده شود
برای مثال، به‌جای «آیکون قلب» بهتر است بنویسیم «افزودن به علاقه‌مندی‌ها». به‌جای «آیکون ذره‌بین» بهتر است بنویسیم «جستجو».
طول مناسب متن جایگزین
متن جایگزین باید کوتاه باشد، معمولاً بین ۵ تا ۱۵ کلمه. بیشتر از این، کاربر را خسته می‌کند. کمتر از این، معنا را کامل منتقل نمی‌کند.
در پوشیدنی، متن جایگزین باید حتی کوتاه‌تر باشد، چون توجه کاربر محدود است. بین ۳ تا ۸ کلمه، معمولاً بهترین نتیجه را می‌دهد.
متن جایگزین در برابر متن قابل مشاهده
نکته‌ی مهمی که در پروژه‌ها دیده‌ام این است: متن جایگزین نباید با متن قابل مشاهده تکرار شود. اگر دکمه‌ای متن قابل مشاهده دارد، متن جایگزین می‌تواند خالی باشد یا نقش مکمل داشته باشد. برای مطالعه‌ی جزئیات بیشتر، نقش Typography در تجربه کاربری را ببینید.
الگوهای عملی برای دکمه‌های پوشیدنی
در پوشیدنی، الگوهای خاصی برای متن جایگزین وجود دارد که در پروژه‌های متعددی مؤثر بوده‌اند.
الگوی اول: متن جایگزین توصیفی
در این الگو، متن جایگزین عملکرد دکمه را توصیف می‌کند. مثال: دکمه‌ی آیکون ساعت → «تنظیم زنگ هشدار».
الگوی دوم: متن جایگزین با بافت
در این الگو، متن جایگزین شامل بافت صفحه است. مثال: در صفحه‌ی تنظیمات، دکمه‌ی آیکون چرخ‌دنده → «تنظیمات عمومی دستگاه».
الگوی سوم: متن جایگزین پویا
در این الگو، متن جایگزین بر پایه‌ی وضعیت دکمه تغییر می‌کند. مثال: دکمه‌ی پخش → «شروع پخش» و پس از لمس → «توقف پخش».
هر یک از این الگوها در بافت خود مؤثر است. انتخاب درست، نیازمند درک هدف کاربر است. مطالعه‌ی تست کاربر در UX می‌تواند به تصمیم‌گیری بهتر کمک کند.
متن جایگزین خوب، متن جایگزینی است که کاربر نابینا هم بتواند بدون حدس، عملکرد دکمه را بفهمد.
تست متن جایگزین با کاربران
تست متن جایگزین با کاربران نابینا، بهترین راه برای ارزیابی کیفیت آن است. اما حتی بدون دسترسی به کاربران نابینا، می‌توان از ابزارهایی مانند screen readerها برای تست اولیه استفاده کرد.
معیارهای کلیدی تست متن جایگزین:
- زمان درک عملکرد دکمه (Time to Understand)
- نرخ خطا در تشخیص عملکرد (Error Rate)
- رضایت ذهنی کاربر (Subjective Satisfaction)
یکی از یافته‌های مهم در پروژه‌ها این است که متن جایگزین با بافت، معمولاً نتایج بهتری از متن جایگزین توصیفی ساده می‌دهد. مطالعه‌ی تجربه کاربری و اندازه‌گیری آن چارچوب مفیدی ارائه می‌دهد.
ابزارهای تست
ابزارهای رایج برای تست متن جایگزین شامل NVDA، JAWS و VoiceOver است. در پوشیدنی، به‌طور خاص، VoiceOver روی watchOS و TalkBack روی Wear OS پرکاربرد هستند.
پرسش‌های پرتکرار درباره‌ی متن جایگزین
آیا هر دکمه‌ای باید متن جایگزین داشته باشد؟
هر دکمه‌ای که عملکردی دارد و فقط با آیکون نشان داده می‌شود، باید متن جایگزین داشته باشد. دکمه‌هایی که متن قابل مشاهده دارند، می‌توانند متن جایگزین خالی داشته باشند.
متن جایگزین چقدر باید طولانی باشد؟
در پوشیدنی، بین ۳ تا ۸ کلمه. در وب، بین ۵ تا ۱۵ کلمه.
آیا می‌توان از کلمه «دکمه» در متن جایگزین استفاده کرد؟
معمولاً نه. screen readerها خودشان اعلام می‌کنند که عنصر یک دکمه است، پس تکرار آن، اطلاعات اضافی و بی‌فایده است.
چگونه متن جایگزین را برای دکمه‌های پویا بنویسیم؟
متن جایگزین باید بر پایه‌ی وضعیت فعلی دکمه نوشته شود. اگر دکمه‌ای در حالت «پخش» است، متن جایگزین «توقف پخش» باشد و برعکس.
آیا متن جایگزین بر سئو هم تأثیر دارد؟
بله، به‌طور غیرمستقیم. متن جایگزین معنادار، به درک موتورهای جستجو از محتوای صفحه کمک می‌کند. برای مطالعه‌ی بیشتر، تگ alt تصاویر چگونه سئو را بهبود می‌دهد را ببینید.
اشتباهات رایج در متن جایگزین
در پروژه‌های متعددی این الگوها را دیده‌ام. برای مطالعه‌ی جزئیات بیشتر، اشتباهات رایج در طراحی رابط کاربری منبع خوبی است.
- استفاده از نام فایل به‌عنوان متن جایگزین
- استفاده از کلمات عمومی مانند «تصویر» یا «دکمه»
- نادیده‌گرفتن بافت صفحه در متن جایگزین
- تکرار متن قابل مشاهده در متن جایگزین
- نادیده‌گرفتن حالت‌های پویا
- عدم تست با screen reader
برای دیدن تصویر کامل‌تر از اشتباهات مرتبط، اشتباهات رایج بهینه‌سازی موبایل را ببینید.
از دسترس‌پذیری تا معماری اطلاعات
در لایه‌ی پیشرفته، متن جایگزین بخشی از معماری اطلاعات است، نه یک جزئیات فنی. هر متن جایگزین، یک قطعه از دانش معنایی است که به کاربر منتقل می‌شود. کیفیت این انتقال، به کیفیت طراحی کل سیستم وابسته است.
یک رویکرد پیشرفته، استفاده از گراف دانش (Knowledge Graph) برای تولید متن جایگزین بافتی است. در این رویکرد، متن جایگزین بر پایه‌ی روابط معنایی بین عناصر صفحه تولید می‌شود، نه به‌صورت دستی.
در سطح معماری، توصیه می‌شود لایه‌ی محتوا از لایه‌ی نمایش جدا باشد. این جداسازی، امکان تولید متن جایگزین به‌صورت خودکار و بافتی را ساده‌تر می‌کند. برای مطالعه‌ی چارچوب‌های پیشرفته، اشتباهات رایج در طراحی تجربه کاربری می‌تواند به‌عنوان چک‌لیست منفی مفید باشد.
تجربه‌ی عملی نشان می‌دهد که در پوشیدنی، دسترس‌پذیری نه یک هزینه، بلکه یک سرمایه‌گذاری است. رابطی که برای همه قابل استفاده باشد، برای همه بهتر است.
اگر روی یک پروژه‌ی پوشیدنی کار می‌کنید، پیشنهاد می‌کنم از همان ابتدا متن جایگزین را در فرآیند طراحی بگنجانید، نه به‌عنوان یک مرحله‌ی بعدی. تفاوت بین یک رابط معمولی و یک رابط عالی، در همین جزئیات پنهان است. ♿
اگر تجربه‌ای در نوشتن متن جایگزین برای دکمه‌های پوشیدنی دارید، خوشحال می‌شوم بدانم کدام چالش بیشترین زمان را از شما گرفت. تجربه‌تان را در دیدگاه‌ها بنویسید.