نوشته های حسین شیروانی

چالش‌های دسترس‌پذیری برای کاربرانی با مشکلات شناختی و یادگیری

حسین شیروانی — Sun, 25 Jun 2023 21:16:00 +0330

مشکلات شناختی و یادگیری به‌لحاظ گستره آن، افراد مختلفی را می‌تواند تحت تاثیر قرار دهد. مشکلات عصبی، رفتاری، اختلالات روانی و افزایش سن می‌تواند دیگر توانایی‌های انسان مانند بینایی، شنوایی، گفتاری، حرکتی و حتی فهم اطلاعات را با مشکل مواجه کند. به‌طور متقابل، هر مشکلی در شرایط بینایی، شنوانی، حرکتی و گفتاری می‌تواند چالش‌های یادگیری و شناختی در فرد ایجاد کند. بنابراین با افزایش دسترس‌پذیری و ایجاد شرایط و ابزار مساعد برای این افراد، تا حد زیادی می‌توان به آن‌ها کمک کرد. به‌طور مثال، افرادی که از اختلال اوتیسم رنج می‌برند، ممکن‌است از صفحه‌خوان‌ برای فهم محتوای وب کمک بگیرند. در ادامه به بررسی چند مشکل رایج در این حوزه می‌پردازیم.ناوبری و قالب‌بندی پیچیده در صفحاتبسیاری از افراد در فهم و تعامل با ناوبری‌ها و قالب‌بندی‌های پیچیده در صفحات وب با مشکل روبرو می‌شوند. به‌طور مثال در یافتن پیوندی خاص. این پیچیدگی صرفاً به‌واسطه تقسیم‌بندی اطلاعات نیست. گاهی از اوقات به‌لحاظ سبک طراحی و ویژگی‌های بصری می‌تواند پیچیده باشد. باز/بسته شدن در حالتی خاص یا با روشی خاص می‌تواند از این قبیل پیچیدگی‌ها باشد.قالب‌بندی پیچیده باعث می‌شود ‌کاربر زمان بیشتری را برای پیداکردن محتوای مدنظر خود صرف کند. در صورتی که وب‌سایت دارای حالت واکنش‌گرا (Responsive) باشد، برخی از کاربران به‌خصوص افرادی که از مشکلات بینایی رنج می‌برند، ممکن است اندازه صفحه مرورگر را کاهش دهند تا حالت واکنش‌گرا فعال شود. زیرا در این حالت محتوای وب‌سایت در یک ستون نمایش داده می‌شود که علاوه بر اندازه مناسب برای این افراد، راحت‌تر در آن پیمایش می‌کنند. در مقابل برخی از افراد علاقه‌ای به اسکرول زیاد در صفحه ندارند. بنابراین طراحی بایستی تا حد امکان انعطاف‌پذیر طراحی شوند تا ‌افراد برحسب نیازشان بتوانند آن را تغییر دهند.شکل ۱ - عموماً وب‌سایت‌های خبری برای این دسته از کاربران پیچیدگی زیادی دارندشکل ۲ - تغییر اندازه صفحه به حالت واکنش‌گرا، تجربه بهتری در استفاده به این دسته از کاربران می‌دهد.طراحی منعطفخواندن متن بر خلاف تصور می‌تواند چالش‌های زیادی به همراه داشته باشد. اندازه فونت، سبک (Style) فونت، ارتفاع خط و رنگ نوشته در خوانایی آن تاثیرگذارند. برای افرادی که مشکلات شناختی یا یادگیری دارند، بهترین رویکرد استفاده از ابزارهای مرورگر و Stylesheetهای اختصاصی است تا مطابق نیازشان باشد. در این حالت کاربران می‌توانند اندازه و سبک فونت، رنگ پس‌زمینه، خطوط حاشیه، فاصله خط، حاشیه‌های اطراف و … را تغییر دهند. البته ایجاد این تغییرات منوط به ارائه چنین امکانی از سمت وب‌سایت است.متنفهم جمله‌های پیچیده و طولانی، واژگان نامعمول، عبارت‌های عامیانه، استعاره‌ها و اینطور ساختارها برای این دسته از کاربران مشکل است. از طرفی، استفاده از عنوان،‌ زیرعنوان، بهره‌گیری از Bulletها، لیست‌ها و تصاویر و به‌عبارت دیگر ایجاد ساختار مناسب اطلاعات در متن، می‌تواند به فهم محتوا توسط کاربران کمک کند. تصویردر فضای وب تصاویر همانقدر که می‌توانند به درک بهتر متن کمک کنند، به همان میزان می‌توانند باعث سردرگمی شوند. بنابراین بایستی هوشمندانه و هدفمند از آن‌ها بهره گرفت تا کاربر به راحتی به هدف خود برسد. آیکون‌ها که خود تصویر محسوب می‌شوند، بایستی با موقعیتی که استفاده شدند و درکی که کاربر از آن‌ها دارد،‌ سازگار باشند. به‌طور مثال همه کاربران درک مشترکی از آیکون + دارند. بنابراین استفاده آن در کنار برچسبی که مفهوم «اضافه‌کردن» دارد، به درک عملکرد المان کلی کمک می‌کند.حرکت و انیمیشنجابجاشدن، چشمک‌زدن محتوای متنی یا ویدیو یا صوتی که به‌صورت خودکار پخش می‌شود و امکان متوقف‌کردن آن هم وجود ندارد برای کاربران می‌تواند اذیت‌کننده باشد. معمولاً در وب‌سایت‌های فروشگاهی با هدف جلب توجه کاربر در مورد یک تخفیف یا موارد مشابه از این روش‌ها استفاده می‌شود. برای برخی از کاربران چنین نمونه‌هایی می‌تواند آزاردهنده باشد. به‌طور مثال تکرار یک رخداد با فرکانس مشخص می‌تواند باعث تشنج در برخی کاربران شود یا تمرکز کاربران را از بین ببرد. بنابراین بایستی تا حد امکان استفاده از انیمیشن‌ها محدود و زمان رخداد آن‌ها کوتاه باشد یا امکانی برای کاربر درنظر گرفته شود که بتواند آن را غیرفعال کند. به طور مثال دکمه Play/Pause در Slideshow

چالش‌های دسترس‌پذیری برای ناشنوایان و افرادی با مشکلات گفتاری

حسین شیروانی — Tue, 13 Jun 2023 15:08:20 +0330

در این نوشته به بررسی کلی چالش‌های دسترسی به فضای وب برای ناشنوایان و افرادی که مشکلات گفتاری دارند می‌پردازیم.مشکلات شنوایی (Hearing disabilities)اغلب تصور می‌شود افرادی که توانایی شنوایی یا گفتاری خودشان را از دست دادند یا از بدو تولد آن را نداشتند، مشکل خاصی در استفاده از فضای وب ندارند زیرا بیشتر جنبه بصری دارد. اما در واقعیت افرادی که ناشنوا یا کم‌شنوا هستند برای دیدن یک ویدیو نیازمندی‌هایی زیر را دارند: زیرنویس زبان اصلی (Closed Captions)زیرنویس ترجمه‌شده (Subtitles)متن گفتار (Transcript)زبان اشاره (Sign Language)هر کدام از این موارد می‌توانند مکمل دیگری باشند. به‌طور مثال در حالت‌هایی که درک متن برای افراد ناشنوا دشوار است، از زبان اشاره استفاده می‌کنند.زیرنویس زبان اصلی (Closed Captions)محتوای صوتی ویدیوهای صدادار در صورتی که به‌کمک زیرنویس یا متن گفتار در اختیار کاربر کم‌شنوا یا ناشنوا قرار نگیرند به‌طور کامل از دسترسشان خارج هستند یا به‌عبارتی دسترس‌ناپذیر محسوب می‌شوند. اما در صورت وجود زیرنویس، بایستی با محتوای صوتی همگام باشد. به‌عبارت دیگر دقیقاً در زمان مکالمات در ویدیو زیرنویس‌ها نمایش داده شوند زیرا محتوای زیرنویس به‌طور طبیعی ضمن تماشای ویدیو خوانده می‌شود و اگر هماهنگی وجود نداشته باشد اذیت‌کننده خواهد بود.تعداد زیادی از پلتفرم‌های تحت وب، مانند یوتیوب، امکان تبدیل گفتار به متن را برای تولید زیرنویس به‌صورت خودکار ارائه می‌دهند. به‌صورت کلی این سرویس بسیار کمک‌کننده است اما هنوز برای افراد توان‌خواه یک سرویس قابل اطمینان حساب نمی‌شود. زیرا قابلیت تشخیص انواع لهجه‌ها و البته پشتیبانی از زبان‌های مختلف به این سرویس اضافه نشده است. به‌طور مثال یک کاربر فارسی‌زبان نمی‌تواند از این سرویس در یوتیوب استفاده کند. از نظر بصری هم بایستی دقت داشت که زیرنویس‌ها پس‌زمینه و اندازه فونتشان مناسب باشد تا به‌راحتی خوانده شوند.نکته مهم دیگر هم پخش‌کننده رسانه (Media Player) است که استفاده می‌شود. اگر از افزونه‌های مرتبط استفاده می‌کنید، افزونه‌ای را انتخاب کنید که گزینه‌های آن به‌طور مثال Play/Pause، تنظیم صدا یا فعال‌سازی زیرنویس با فضای پس‌زمینه آن تضاد رنگ (Contrast) کافی داشته باشد تا کاربر به‌راحتی آن‌ها را ببیند.شکل ۱ - تمامی گزینه‌های موردنیاز کاربر در دسترس و به‌وضوح قابل دیدن هستندمتن گفتار (Transcript)برای بسیاری از ناشنوایان خواندن متن زیرنویس یا متن گفتار مرتبط با ویدیو کار راحتی نیست و بیشتر آن‌ها ترجیح می‌دهند از زبان اشاره برای درک محتوای ویدیو بهره ببرند. بنابراین در وب‌سایت‌هایی که متن زیادی دارد، بهره‌گیری از نمادها، آیکون‌ها، عکس‌ها و رنگ‌های متفاوت می‌تواند کمک زیادی به درک محتوا توسط این افراد کند.مشکلات گفتاری (Speech disabilities)دلایل مختلفی می‌تواند باعث ایجاد اختلال کامل یا جزئی در گفتار افراد شود:ناتوانی در صحبتاختلالات گفتاریدژنراسیون (Degeneration)ناشنوایی یا شنوایی جزئیبیماری کوتاه‌مدتاختلالات در محیطبا توجه به کاربرد فزاینده دستیارهای صوتی مانند Amazon Alexa یا Microsoft Cortana، افرادی با این‌گونه اختلالات در استفاده از این امکانات چالش دارند. بنابراین بایستی جایگزین‌های دیگری در اختیار این دسته از کاربران قرار بگیرد.سخن آخردر دنیای دسترس‌پذیری وب، ابزارهای مختلفی بایستی در کنار یکدیگر قرار بگیرند تا شخص توان‌خواه با کمترین دردسر به فضای وب دسترسی داشته باشد. بنابراین اگر شخصی به هر دلیلی از دستیار صوتی نمی‌تواند استفاده کند، ابزار دیگری برای جبران این عدم‌دسترسی بایستی در اختیارش قرار گیرد. در نتیجه بایستی در طراحی تا حد امکان تمامی احتمالات را در نظر بگیریم تا طراحی ما فراگیر یا Inclusive باشد.

چالش‌های مرتبط با کم‌بینایی در فضای وب و نقش دسترس‌پذیری در کاهش آن‌ها

حسین شیروانی — Sun, 04 Jun 2023 01:13:43 +0330

افراد کم‌بینا در موارد زیر می‌توانند در تعامل با فضای وب با چالش مواجه شوند:اندازه فونتاندازه کوچک برای فونت‌ها می‌تواند برای این دسته از کاربران مشکل ایجاد کند. برخی از کاربران با استفاده از ابزارهای بزرگنمایی (Zoom یا Magnification) تا حدودی از این مشکل خودشان را خلاص می‌کنند. با این حال تفاوت بسیار زیادی میان بزرگنمایی و بزرگ‌بودن اندازه فونت در صفحه است. به همین دلیل پشتیبانی وب‌سایت از تغییر اندازه فونت می‌تواند نقش مؤثری داشته باشد. البته بسیاری از مرورگرها هم این قابلیت را اضافه کردند و کاربر با مراجعه به بخش تنظیمات (Browser Settings) می‌تواند اندازه فونت پیش‌فرض را تغییر دهد.تضاد رنگ ناکافیتضاد رنگ کم می‌تواند برای کاربرانی که مشکلات بینایی، شناختی و یادگیری دارند چالش برانگیز باشد. حتی کاربران گوشی همراه، در محیط‌هایی که شدت نور زیاد است می‌توانند در دیدن و خواندن محتوا با مشکل روبرو شوند. بنابراین این امکان وجود دارد که بخشی از متن، یک المان، یک حالت و … را کاربر نبیند.وابستگی به رنگرنگ یکی از مؤلفه‌های اصلی در طراحی وب است. با این حال برخی از کاربران در درک رنگ مشکل دارند (به‌دلیل مشکلات بینایی، افزایش سن و …). به همین دلیل تنها استفاده از رنگ نمی‌تواند رویکرد مناسبی باشد. به‌طور مثال فرمی را درنظر بگیرید که در صورت بروز خطا تنها رنگ حاشیه (‌‌Border) فیلد متنی را تغییر دهد. حالت دیگر می‌تواند برای پیوندها باشد وقتی تنها از رنگ برای تمییز دادن آن‌ها استفاده شود (خط زیر آن‌ها یا Underline به‌کمک CSS برداشته شده باشد). در این حالت‌ها برخی از کاربران نمی‌توانند وضعیت را تشخیص دهند. بنابراین استفاده از المان‌های جانبی مانند آیکون مرتبط یا وجود Underline در دو مثال اخیر می‌تواند راه‌حل مناسبی برای این مشکل باشد.مثال دیگر در سایت‌های فروشگاهی می‌تواند اتفاق بیفتد. اگر دسته‌بندی فقط براساس رنگ باشد، این دسته از کاربران نمی‌توانند به راحتی میان رنگ‌ها تفکیک قائل شوند. بنابراین قراردادن نام رنگ می‌تواند به آن‌ها کمک کند.انیمیشن و محتوای متحرکانیمیشن و محتوای متحرک می‌تواند برای کاربران مطرح‌شده در بالا سردرگمی ایجاد کند. حالتی را تصور نمایید که یه کاربری از ابزار بزرگ‌نمایی استفاده می‌کند و در حالتی مشخص یک انیمیشن اجرا شود که برروی نمایش کل صفحه تاثیر بگذارد. بنرهای تبلیغاتی، ویدیو کلیپ‌ها، تصویرهای متحرک و مواردی از این قبیل می‌توانند این چنین شرایطی ایجاد کنند. حتی می‌توانند مشکلاتی جدی به‌همراه داشته باشند. به‌طور مثال، دیدن تصاویری که با یک بسامد مشخص نمایش داده می‌شوند، می‌تواند باعث تشنج در افراد حساس به نور شود.محدوده دیدمحدوده دید بخشی است که کاربر برروی آن تمرکز کرده و در حال مطالعه آن قسمت است. زمانی که بخشی از محتوا را با ابراز بزرگ‌نمایی می‌خواند، اگر تغییری در خارج از محدوده دید اتفاق بیفتد (یا پیش‌زمینه)، کاربر متوجه آن نخواهد بود. به‌طور مثال، در یک سایت فروشگاهی کاربر با ابزار بزرگ‌نمایی در حال بررسی و اعمال تنظیمات مدنظر خود در بخش فیلترها است. با انتخاب هر فیلتر نتایج جستجو تغییر می‌کند اما به‌دلیل این‌که تنها بخش فیلترها در محدود دید کاربر است، ممکن است متوجه اعمال تغییرات نشود و حتی ممکن است پس از انتخاب به‌دنبال دکمه اعمال فیلتر باشد.سخن پایانیدر زمان مطالعه این نوشته ممکن است این موضوع به ذهن شما خطور کند که برخی از این موارد (یا همه آن‌ها) در محصولاتی که روزانه با آن‌ها سروکار دارید حل شده‌اند. با این حال، آشنایی با این چالش‌ها و مشکلاتی که می‌تواند برای برخی از کاربران ایجاد کند به جلوگیری از تکرار آن‌ها و برنامه‌ریزی برای طراحی Inclusive کمک خواهد کرد.

چالش‌های نابینایان در فضای وب و نقش دسترس‌پذیری در کاهش آن‌ها

حسین شیروانی — Sun, 07 May 2023 22:13:33 +0330

افراد نابینا یا کم‌بینا از صفحه خوان‌ها برای ارتباط با سیستم و به‌خصوص برای فضای وب بهره می‌گیرند. صفحه خوان نرم‌افزاری است که تمامی محتوای نمایشگر را برای کاربر می‌خواند و این خوانش بایستی به‌گونه‌ای باشد که منظور را با بیشترین میزان به کاربر منتقل کند.جایگزین‌ها (Alternatives)صفحه خوان‌ها از جایگزین‌ها استفاده می‌کنند. یکی از مثال‌های رایج، تصاویر هستند که دیدن آن‌ها برای این دسته از کاربران چالش محسوب می‌شود و اگر با متن جایگزین معرفی نشوند، برای کاربر قابل فهم نیستند. متن‌های جایگزین (Text alternatives) برای عکس‌ها، دکمه‌ها و کنترل‌ها استفاده می‌شود. تصاویری که معنای خاصی دارند، به‌طور مثال کاری را انجام می‌دهند، حتما بایستی همراه متن جایگزین طراحی شوند تا کاربر از معنا و هدف آن آگاه شود.این موضوع در مورد ویدیوها نیز صدق می‌کند. البته در این حالت، کاربران از توضیحات صوتی (Audio Description) یا متن مکالمات بهره می‌گیرند. توضیحات صوتی به کاربر این امکان را می‌دهد که رخدادهای داخل ویدیو را متوجه شود. به‌طور مثال در مورد زبان بدن افراد، حرکت‌ها، یا تغییرات دیگری که در صفحه رخ‌داده‌است، توضیح دهد.اما نکته‌ای که در خصوص این دو نوع جایگزین مهم هست، کیفیت تهیه آن‌هاست. به‌طور مثال برای تهیه توضیحات صوتی بایستی به اختصار در بیان توجه شود. از طرفی بسیاری از تصاویر که اصلاً نیاز به توضیح ندارند می‌توانند از دامنه این موارد حذف شوند تا به‌طور کلی کاربر درگیرشان نشود. چون به‌هرحال اطلاعات اضافی می‌تواند سرعت این افراد را در پیمایش صفحه کاهش دهد.دسترس‌پذیری با صفحه کلیدهمانطور که می‌دانید، استفاده از صفحه خوان به‌‌طور کامل وابسته به صفحه کلید است. بنابراین، مشابه پست‌های قبلی، رعایت حالت‌های Focus برای این دسته از کاربران اهمیت زیادی دارد.ساختارعنوان‌های واضح و قابل فهم، لیست‌ها، پاراگراف‌ها، جدول‌های شامل اطلاعات و فرم‌ها از جمله المان‌هایی هستند که کاربر توان‌خواه بایستی امکان خوانش آن‌ها به‌کمک صفحه خوان را داشته باشد تا بخش موردنظرش را بازدید/مطالعه کند. حتی کاربرانی که مشکلی در زمینه بینایی ندارند هم براساس عنوان‌ها و … صفحات را پیمایش می‌کنند. بنابراین حفظ ساختار اهمیت زیادی دارد.صفحه خوان‌هاصفحه خوان‌ها تمامی المان‌های موردنیاز کاربر را با نام، وضعیت و وظیفه آن‌ بیان می‌کنند. علاوه بر این، به کاربر این اختیار را می‌دهد تا به‌راحتی عنوان‌ها، فرم‌ها و … را پیمایش کند. به‌طور مثال Jaws یا NVDA برای سیستم عامل Windows یا VoiceOver برای سیستم عامل macOS و iOS یا TalkBack برای Android ازین موارد هستند. البته این ابزار مختص افراد نابینا نیست. افرادی که به‌لحاظ شناختی یا یادگیری مشکلاتی دارند هم می‌توانند از آن بهره بگیرند، چون به افزایش تمرکز و فهم بهتر متن یا تصویر می‌تواند کمک کند.برخی کاربران که از بریل (Braille) برای خواندن استفاده می‌کنند، می‌توانند صفحه خوان را با نمایشگر خاصی که به‌صورت پویا بریل را نمایش می‌دهند ترکیب کنند. این سخت‌افزار در کنار صفحه کلید استفاده می‌شود و شامل پین‌های متعدد است که برای ساخت بریل جابجا می‌شوند. یک نمونه بلوتوثی این نمایشگر را می‌توانید در پیوندهای زیر ببینید.Braille DisplayIntroducing Chameleon 20: A 20-Cell Refreshable Braille Display

نقش ورودی با گفتار (Speech Input) در افزایش دسترس‌پذیری به فضای وب و چالش‌های آن

حسین شیروانی — Sat, 29 Apr 2023 20:42:05 +0330

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

انواع کنترل‌های سوئیچی (Switch Controls) و نقش آن‌ها در افزایش دسترس‌پذیری به فضای وب

حسین شیروانی — Fri, 21 Apr 2023 13:26:54 +0330

نوعی دستگاه که عملکردی مانند سوئیچ دارد. دکمه‌های کنترلی سوئیچ ماشینتان را درنظر بگیرید که با فشار دادن یک دکمه یک عمل به‌طور مثال بازشدن درها انجام می‌گیرد. این نوع دستگاه‌ها برای افرادی که در قسمت بالایی بدن مشکلات حرکتی دارند کاربرد زیادی دارد. به‌طور مثال افرادی که به موارد‌ زیر دچار هستند:آسیب گرفتگی پیوسته (RSI)فلج مغزیاسکلروز جانبی آمیوتروفیک (ALS)پارکینسونغیر از این موارد، این نوع دستگاه برای افرادی که مشکلات یادگیری و شناختی هم دارند می‌تواند مفید باشد.با توجه به نیاز هر فرد (برحسب میزان ناتوانی)، انواع مختلفی از سوئیچ هم ساخته شده‌است:مدل دکمه‌ای: این مدل با دست، پا یا سر عمل می‌کند و می تواند تک‌دکمه یا چنددکمه‌ای باشد (نمایش نمونه).مدل دم و بازدم (Sip-and-puff): این مدل با قراردادن یک شی لوله‌ای یا نِی‌مانند در دهان و انجام دم و بازدم کار می‌کند. به‌طور مثال دوبار بازدم برای Double Click هست یا یک‌بار دم برای Right Click (نمایش نمونه)مدل دوربینی: این مدل با حرکت سر کار می‌کند. به‌طور مثال خم‌کردن سر به سمت راست برای تایید انجام یک عمل است (نمایش نمونه). مدل ردیاب چشم: در این مدل بخشی که فرد به آن نگاه می‌کند یا حرکت چشم ردیابی می‌شود (نمایش نمونه).توصیه می‌شود برای درک بهتر عملکرد هر مدل به پیوندهای «نمایش نمونه» مراجعه شود.

افزایش دسترس‌پذیری به فضای وب با صفحه کلید

حسین شیروانی — Wed, 12 Apr 2023 15:06:49 +0330

بسیاری از افرادی که دارای ناتوانی جسمی هستند، امکان استفاده از ماوس را ندارند و از ابزارهای دیگری مانند صفحه کلید، کنترل با صدا (Voice Control) یا ابزارهای اشاره‌گر (Pointing devices) برای تعامل و جابجایی در فضای وب بهره می‌برند. از جنبه طراحی و کدنویسی، المان‌هایی مانند دکمه‌ها، پیوندها، کنترل‌ها بایستی به کمک صفحه کلید (علاوه بر ماوس) قابل دسترسی باشند. المان‌های اصلی HTML حالت Focus مشخصی دارند. اما المان‌هایی که به‌کمک تگ‌های div یا span ساخته می‌شوند، بایستی با استفاده از JavaScript حالت تعاملی برای آن‌ها ایجاد کرد. بنابراین اگر همچین اقدامی برای این دسته از المان‌ها صورت نگیرد، عملاً امکان دسترسی کاربر به این موارد وجود ندارد. به‌طور مثال، بسیاری از توسعه‌دهندگان برای تعریف یک دکمه اختصاصی از تگ‌های div و span استفاده می‌کنند و بنابراین نیاز است تا حالت‌های مختلف (State) این المان جدید را مشخص کنند.شکل ۱ - نمونه المان‌های تعریف‌شده با div که حالت Focus ندارندشکل ۲ - نمونه المان‌های تعریف‌شده با div که حالت Focus دارندتعریف حالت Focusالمان‌ها باید حالت Focus مناسب داشته باشند. بدین معنی که وقتی به‌کمک صفحه کلید انتخاب می‌شوند، این انتخاب به‌وضوح مشخص باشد. به‌طور مثال تغییر رنگ محسوسی داشته باشند یا دور المان خط یا خط‌چین نمایش داده شود (استفاده از Outline در CSS) که کاربر متوجه شود در حال حاضر بروی کدام المان قرار دارد.شکل ۳ - یک نمونه حالت Focus مناسب شکل ۴ - یک نمونه حالت Focus نامناسب. در این حالت کاربر به‌سختی متوجه خواهد شد که کدام دکمه انتخاب شده‌است.پیوندها، دکمه‌ها و فرم‌ها (و المان‌های وابسته آن) به‌صورت پیش‌فرض توسط صفحه کلید قابل دسترسی هستند. اما برخی المان‌ها در صفحه با ماوس (یا لمس‌کردن) قابل تعامل نیستند زیرا نیازی به حالت تعاملی ندارند. اگر برای این دسته از المان‌ها حالت Focus تعریف شود (مثلا استفاده از tabindex)، امکان ایجاد سردرگمی برای کاربر وجود دارد. برای اطلاعات بیشتر در مورد tabindex به این پیوند مراجعه فرمایید.ترتیب Focus ترتیب انتخاب المان‌ها بایستی درست باشد (استفاده از tabindex). به‌عبارت دیگر کاربر باید با یک ترتیب درست تمامی المان‌های موردنیاز در صفحه را به‌کمک صفحه کلید پیمایش کند و این پیمایش از یک توالی منطقی تبعیت کند تا کاربر به‌راحتی به هدف خود برسد.در وب‌سایت‌های فارسی ترتیب المان‌ها از راست به چپ و بالا به پایین است. بنابراین یک ترتیب منطقی از بخش‌ها به‌صورت زیر است:هدر نوار ناوبری اصلیناوبری درون صفحهمحتوای اصلیفوتر شکل ۵ - پیمایش المان‌ها با Tab و Shift + Tabتبعاً داخل هر بخش مجدداً توالی بایستی منطقی باشد تا کاربر را سردرگم نکند و بتواند پیمایش خود را انجام دهد. به‌طور مثال اگر در یک بخش سه عدد کارت به‌صورت ستونی کنار هم باشند، کارت‌ها بایستی از راست به چپ پیمایش شوند و محتوای هر کارت باید از بالا به پایین پیمایش شود.انتقال به وضعیت جدیدیکی از مشکلات رایج در ترتیب المان‌ها، زمانی رخ می‌دهد که یک المان، محتوا یا وضعیت صفحه را تغییر می‌دهد و در صورت عدم بروزرسانی حالت Focused در شرایط جدید، مجدداً کاربر با مشکل مواجه می‌شود. به‌طول مثال دکمه تایید پرداخت منجر به باز شدن یک مودال (Modal) در صفحه می‌شود. اگر حالت Focused به مودال منتقل نشود، کاربر بایستی تمامی المان‌های پشت مودال را پیمایش کند تا به بخش مودال برسد که امری بسیار زمان‌بر و اذیت‌کننده است.شکل ۶ - نمونه انتقال به وضعیت جدید نمایش Tooltipیکی از مشکلات رایج دیگر، نمایش Tooltip ها است. این کامپوننت فقط با قرارگرفتن نشانگر ماوس بروی المان موردنظر نمایش داده می‌شود. اگر به‌شکل مناسبی پیاده‌سازی نشود، برخی کاربران نمی‌توانند به این راهنماها با صفحه کلید دسترسی داشته باشد. به‌طور مثال، راهنماهای گام‌به‌گام که در بسیاری از محصولات وجود دارند از نمونه Tooltipهای قابل دسترس با صفحه کلید محسوب می‌شوند.شکل ۷ - نمونه Tooltip قابل دسترس با صفحه کلیدردکردن پیوندهادر وب‌سایت‌هایی که بخش ناوبری پیچیده‌ای دارند، بهتر است پیوندی مانند «Skip to Content» در بالاترین قسمت صفحه و به‌عنوان اولین پیوندی که کاربر با آن برخورد می‌کند قرار گیرد تا کاربر بدون پیمایش بخش ناوبری به محتوای صفحه دسترسی پیدا کند.صفحه کلیدهای مجازیاین نوع صفحه‌کلید که در گوشی‌های همراه یا تبلت‌ها مورد استفاده هستند، به‌دلیل نزدیکی حروف و فضای کم لمس‌کردن بخش موردنظر از صفحه می‌توانند برای کاربر مشکلاتی ایجاد کنند. به‌طور مثال برای افرادی که مشکل لرزش دست ‌دارند. برای کاهش تاثیر این مشکلات که ناشی از محدودیت‌های سیستمی است، بایستی امکانات دیگری هم در کنار صفحه کلید ارائه شود. به‌طور مثال:امکان تعامل با صداارائه اطلاعات به‌صورت چند گزینه‌ای: بهره‌گیری از دکمه‌های Radio یا Checkbox ها به‌جای درخواست از کاربر برای واردکردن اطلاعات در فیلد متنیپشتیبانی از واژگان یا عبارت‌های پیشنهادیتکمیل فرم‌ها با استفاده از اطلاعات از پیش تعیین‌شدهسخن پایانیبرای بررسی میزان اهمیت دسترس‌پذیری در یک وب‌سایت با صفحه کلید، کافی است ماوس را کنار بگذارید و تنها با صفحه کلید به پیمایش در صفحه موردنظر ادامه بدهید.   در پیوند زیر اطلاعات بیشتری در مورد دسترس‌پذیری با صفحه کلید وجود دارد که توصیه می‌کنم مطالعه کنید:Keyboard Accessibilityنکته مهم: بسیاری از کاربرانی که ناتوانی جسمی دارند و از گوشی‌های موبایل استفاده می‌کنند، معمولا از صفحه کلید فیزیکی برای تعامل با دستگاه بهره می‌برند. بنابراین بررسی دسترس‌پذیری در این دستگاه‌ها هم مهم است.

فناوری‌های کمکی (Assistive Technologies) در وب

حسین شیروانی — Thu, 06 Apr 2023 01:10:03 +0330

افرادی که به هر دلیلی به‌صورت موقت یا دائمی دارای تانوانی جسمی هستند، به‌روش‌های مختلف و برحسب نیازشان با فضای وب تعامل می‌کنند. برخی افراد به‌کمک نرم‌افزار و سخت‌افزار خاصی با وب تعامل می‌کنند و بسیاری تنظیمات مرورگر یا بستری که از آن استفاده می‌کنند را مطابق نیازشان تغییر می‌دهند.به‌طور کلی، این دو روش به‌ترتیب با عنوان‌های فناوری‌های کمکی و روش‌های تطبیقی شناخته می‌شود:فناوری‌های کمکی: به نرم‌افزار و سخت‌افزاری گفته می‌شود که امکان تعامل با بستر دیجیتال را برای افراد میسر می‌کند. به‌طور مثال صفحه‌خوان‌ها (Screen Readers)روش‌های تطبیقی: روش‌هایی هستند که افراد ناتوان برای تعامل با بستر دیجیتال از آن بهره می‌برند تا با شرایطشان تطبیق پیدا کند. به‌طور مثال تغییر رنگ‌ها در مرورگر یا تغییر اندازه پنجره مرورگرنکته مهم: لزوماْ یک فناوری کمکی یا روش تطبیقی با یک نوع ناتوانی مرتبط نیست. به‌عبارتی افراد با ناتوانی‌های متفاوت می‌توانند از یک فناوری مشترک استفاده کنند. به‌طور مثال فردی که نابیناست یا فردی که مشکلات یادگیری و شناختی دارد، هردو می‌توانند از صفحه‌خوان‌ها استفاده کنند. حتی ممکن است یک شخص چند ناتوانی داشته باشد و ترکیبی از فناوری‌ها و روش‌های مختلف را استفاده کند.بسیاری از فناوری‌های کمکی که در ابتدا برای افراد ناتوان طراحی شده، بعد از مدتی به‌عنوان یک ابزار ضروری مورد استفاده عموم مردم قرار گرفتند. به‌طور مثال، صفحه‌کلید، قابلیت تشخیص صدا یا قابلیت بزرگ‌نمایی در گوشی‌های همراه.یکی از ابزارهای رایج امروز که برای این‌گونه افراد تهیه شده، زیرنویس‌ها (Closed Captions) و توضیحات صوتی (Audio Description) هستند. زیرنویس‌ها در ابتدا توسط افراد ناشنوا یا کم‌شنوا مورد استفاده بودند. اما امروزه افرادی که قصد یادگیری زبان جدیدی دارند یا در محیطی هستند که سر و صدا زیادی وجود دارد یا امکان گفتگو وجود ندارد هم از آن بهره می‌گیرند.در صورت علاقه به مطالعه بیشتر در این خصوص به این پیوند مراجعه نمایید.

نکات مرتبط با دسترس‌پذیری و تعامل کاربر در فیلد متنی (Text field)

حسین شیروانی — Mon, 30 Aug 2021 12:11:37 +0430

توجه!نوشته پیش‌رو ادامه مقاله قبلی با عنوان «فیلد متنی (Text field)؛ نکات مرتبط با طراحی آن» است. در این نوشته دو مبحث دسترس‌پذیری و تعامل کاربر را مورد بررسی قرار می‌دهیم.این نوشته مناسب چه افرادی است؟اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.اطلاعات این نوشته مطابق چه استانداردی است؟از این اطلاعات می‌توانید به‌عنوان راهنمایی برای افزایش دسترس‌پذیری فیلدهای متنی وب‌سایت یا برنامه‌کاربردی تا سطح AAA استاندارد WCAG 2.0 استفاده کنید.دسترس‌پذیریاستفاده از حروف بزرگ ممنوع!این مورد بیشتر برای زبان‌هایی مانند انگلیسی، فرانسه و ... کاربرد دارد. استفاده از حالت بزرگ حروف (Capital) در این زبان‌ها به‌عنوان برچسب فیلد ورودی به‌دلیل پایین‌آوردن خوانایی آن امری نادرست است. در این حالت ارتفاع تمامی حروف یکسان است و کاربر به‌سختی می‌تواند آن را بخواند. از طرفی ممکن است صفحه‌خوان کلمه را حرف به حرف (مانند مخفف چند کلمه) بیان کند و کاربر متوجه آن نشود.نوشتار درست برچسب فیلد متنی، حرف اول بزرگ و بقیه حرف‌ها کوچک (درست)استفاده از حرف‌های بزرگ در نوشتن برچسب فیلد متنی (نادرست)اندازه قلماندازه قلم بایستی به مقداری باشد که خوانایی متن حفظ شود. مقدار ۱۶px اندازه مناسبی برای متن حساب می‌شود. البته این مقدار بسته به نوع تایپ‌فیس، زبان موردنظر و پلتفرمی که برروی آن المان نمایش داده می‌شود، می‌تواند متفاوت باشد.اندازه قلم مناسب برای فیلد متنی (درست)اندازه قلم نامناسب برای فیلد متنی که خوانایی را پایین می‌آورد (نادرست)رنگ برچسبتوصیه می‌شود تا رنگ برچسب از پالت رنگی برنامه کاربردی باشد. علاوه بر این بایستی تضاد رنگ (Contrast) کافی با پس‌زمینه خود داشته باشد. به‌طور کلی W3C توصیه می‌کند تا برای متن از نسبت‌های زیر به‌منظور ایجاد تضاد رنگ مناسب استفاده شود:برای متن کوچک بایستی حداقل نسبت تضاد رنگی ۴/۵ به ۱ (4.5:1) با پس‌زمینه وجود داشته باشد.برای متن بزرگ بایستی حداقل نسبت تضاد رنگی ۳ به ۱ (3:1) با پس‌زمینه وجود داشته باشد (اندازه 14pt Bold یا 18pt Regular یا بزرگ‌تر).حداقل تضاد رنگ مناسب (۴/۵ به ۱) برای برچسب فیلد متنی که خوانایی را تضمین می‌کند (درست)تضاد رنگ ناکافی برای برچسب فیلد متنی (نادرست)اختصاص فضای مناسب برای دستگاه‌های لمسیبا توجه به این‌که بیشتر کاربران امروزی از دستگاه‌های لمسی مانند موبایل یا تبلت استفاده می‌کنند، توصیه می‌شود تا برای راحتی کاربر فاصله المان‌ها به‌اندازه‌ای باشد که حین تعامل به‌راحتی قابل انتخاب باشند. بهتر است محدوده لمسی (Touch target) ۴۸px برای فاصله میان المان‌ها درنظر گرفته تا المان موردنظر به‌درستی انتخاب شود. هم‌چنین اندازه ارتفاعی فیلدهای ورودی بهتر است بین ۳۲px تا ۴۰px طراحی شود تا به‌راحتی امکان انتخاب آن‌ها با انگشت وجود داشته باشد.طراحی فیلدهای ورودی Keyboard-friendlyکاربر بایستی بتواند تمامی فیلدهای ورودی را به کمک صفحه کلید با فشردن Tab یا Shift+Tab پیمایش کند و تغییرات خود را اعمال کند. وب‌سایت W3C در خصوص نحوه الگوی تعامل با صفحه کلید جزئیاتی را مشخص کرده است. برای مطالعه آن می‌توانید به پیوند زیر مراجعه کنید.W3C Design Pattern for Keyboard Interactionامکان پیمایش مناسب درون وب‌سایت به‌کمک Tab و Shift + Tabتعامل کاربربهره‌گیری از پیش‌فرض‌های هوشمنددرج حجم زیادی از اطلاعات در فرم‌ها امری طاقت‌فرسا برای بسیاری از کاربران محسوب می‌شود و بهتر است با بهره‌گیری از روش‌های مختلف در راستای کاهش تعامل کاربر با آن‌ها تلاش کرد. یکی از روش‌های رایج در این خصوص، استفاده از مقادیر پیش‌فرض است که به‌صورت هوشمند انتخاب می‌شوند. این مقادیر بر اساس دیگر اطلاعات قابل محاسبه هستند. به‌طور مثال اگر فیلدی برای انتخاب کشور یا شهر دارید، بر اساس اطلاعات موقعیت‌یابی یا آدرس IP که پلتفرم شما آن را محاسبه می‌کند، می‌توانید این نوع فیلدها را مقداردهی نمایید. بسیاری از برنامه‌های کاربردی مانند Telegram، WhatsApp و ... در زمان ثبت نام یا افزودن حساب با شماره موبایل چنین امکانی را ارائه می‌دهند.درج نام کشور و پیش‌شماره آن با استفاده از سرویس موقعیت‌یاب گوشی هوشمندتکمیل و پیشنهاد خودکار اطلاعاتتکمیل فرم‌ها به‌صورت خودکار با ارائه پیشنهاد یا استفاده از Dropdown ها، به افزایش دقت اطلاعات واردشده توسط کاربر کمک می‌کند. به‌عبارت دیگر موضوع موردنظر را به‌همان شکلی که در ذهنش وجود دارد نشان می‌دهد. علاوه بر این در زمانی که ایده مناسبی برای جستجو در مورد موضوع موردنظر خود ندارید یا عبارتی که قصد جستجوی آن را دارید از زبان دیگری است، این ویژگی می‌تواند مفید واقع شود. در واقع پیشنهاد خودکار با ارائه لیستی از کلیدواژه‌ها و عبارت‌های مرتبط با موضوع مورد جستجوی کاربر به او کمک می‌کند. به‌طور مثال موتور جستجوگر گوگل این دو سرویس را به کاربران خود ارائه می‌دهد.امکان Auto-Complete در موتور جستجوگر گوگلپیشنهاد نتیجه‌های احتمالی در موتور جستجوگر گوگل برمبنای ورودی کاربر

فیلد متنی (Text field)؛ نکات مرتبط با طراحی آن

حسین شیروانی — Sat, 14 Aug 2021 18:11:11 +0430

مقدمههمانطور که می‌دانید، تمامی برنامه‌های کاربردی در پلتفرم‌های مختلف حداقل یک فرم همراه با فیلد متنی (Text field) برای ورود اطلاعات توسط کاربر دارند. بنابراین طراحی و پیاده‌سازی مناسب این المان برای این‌که قابل فهم و دسترس‌پذیر باشد، دارای اهمیت است.این نوشته مناسب چه افرادی است؟اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.اطلاعات این نوشته مطابق چه استانداردی است؟از این اطلاعات می‌توانید به‌عنوان راهنمایی برای افزایش دسترس‌پذیری فیلدهای متنی وب‌سایت یا برنامه‌کاربردی تا سطح AAA استاندارد WCAG 2.0 استفاده کنید.در این نوشته ضمن معرفی فیلد متنی، طراحی این المان را برای افزایش خوانایی، دسترس‌پذیری و کارایی آن بررسی می‌کنیم.فیلد متنی چیست؟فیلد متنی یکی از کنترلگر ورودی است که به کاربر اجازه ورود اطلاعات را می‌دهد. تقریباً در تمامی برنامه‌های کاربردی برروی تمامی پلتفرم‌ها، حداقل یک فیلد ورودی وجود دارد. به‌طور مثال صفحه موتور جستجوگر گوگل شامل یک فیلد متنی است که شما عبارت موردنظر خود را در آن نوشته و دکمه جستجو را فشار می‌دهید.ساختار یک فیلد متنیهر فیلد متنی از ۶ جز زیر تشکیل شده‌است:۱- محل درج اطلاعات (Container)۲- آیکون پایانی (Trailing icon) – اختیاری۳- متن Placeholder – اطلاعات ورودی کاربر جایگزین این متن می‌شود.۴- متن راهنما (Helper text)/متن خطا (Error text) – اختیاری۵- برچسب۶- آیکون پیشرو (Leading icon) – اختیاریطراحی ظاهری و خواناییظاهر مناسبدر ابتدای امر بسیار مهم است که فیلد متنی به شکل استاندارد خود طراحی شود. بسیاری از طراحان فیلدها را به‌گونه‌ای طراحی می‌کنند که شبیه دکمه یا سایر المان‌های رابط کاربری می‌شود. شکل ظاهری یک المان، شیوه تعامل کاربر با آن را مشخص می‌کند.فیلد متنی شبیه دکمه (Button)علاوه بر این، قالب Container و شکل طراحی فیلدهای متنی، وجود یا عدم وجود حاشیه (Border) و انحنا در آن (لبه‌های تیز یا انحنادار به‌عبارت دیگر Squared یا Rounded) و موارد این چنین به سبک طراحی محصول یا برنامه کاربردی شما وابسته است.استفاده از آیکون پیشروآیکون پیشرو به‌عنوان یک بخش اختیاری در طراحی فیلد متنی تلقی می‌شود. با این حال در برخی حالت‌ها تجربه بهتری برای کاربر ایجاد می‌کند و به او کمک می‌کند تا محتوای مناسب درج برای آن فیلد را درک کند (شاید بدون نگاه به برچسب فیلد).آیکون پیشرو در فیلد متنیموقعیت مناسب برچسببه‌طور کلی دو روش برای قرارگیری برچسب مرتبط با فیلد متنی وجود دارد. روش اول (Top-aligned) در بالا و سمت راست (برای زبان‌های راست به چپ) یا بالا سمت چپ (برای زبان‌های چپ به راست) قرار می‌گیرد.در حالت (Top-aligned) برچسب‌ها از ابتدا در بالای فیلد متنی قرار می‌گیرد.در روش دوم (Floating) برچسب درون فیلد متنی قرار می‌گیرد و در زمان تعامل کاربر با آن، به بالای فیلد جابجا می‌شود.جابجایی برچسب به بالای فیلد متنی در زمان تعامل با المانهر دو روش به‌لحاظ تجربه کاربر مناسب است. بنابراین هر کدام که با سبک طراحی محصول یا برنامه کاربردی شما همگام است را انتخاب کنید. لازم به ذکر است که پیش‌تر برچسب‌ها را کنار فیلد ورودی قرار می‌دادند. این روش چندان توصیه نمی‌شود. زیرا چشم کاربر در هنگام تعامل با فرم به‌صورت زیگ‌زاگی برچسب و فیلد مرتبط با آن را دنبال می‌کند که می‌تواند اذیت‌کننده باشد. حتی در برخی فرم‌های طولانی ممکن است کاربر نتواند ارتباطی میان برچسب و فیلد آن ایجاد کند.برچسب متنی کوتاهبرچسب‌ها برای راهنمایی کاربران نیستند. برچسب‌ها بایستی کوتاه و گویا باشند و تمام واژه‌های آن دیده شوند. بنابراین در برچسب‌های خود از یک یا دو کلمه استفاده کنید تا کاربر به‌سرعت متوجه آن شود. در صورتی که به توضیح اضافی نیاز دارید، از متن کمکی (Helper text) استفاده کنید.طراحی جدید فرم ثبت نام آمازون (درست)طراحی قدیم فرم ثبت نام آمازون (نادرست)برچسب متنی خوانابه‌طور کلی فیلد متنی را بایستی به‌گونه‌ای طراحی کنید که کاربر متوجه نوع ورودی آن شود. استفاده از یک برچسب مشخص، خوانا و قابل فهم به این موضوع کمک شایانی می‌کند. البته موارد استثنائی وجود دارند که کاربر از طریق آیکون موجود در فیلد متوجه نوع ورودی آن می‌شود. به‌طور مثال در سیستم عامل Android و iOS، فیلد ورودی زیر با آیکون ذره‌بین نشان‌دهنده جستجو است و کاربر با اولین نگاه متوجه عملکرد آن می‌شود.نمونه یک فیلد جستجو با آیکون مناسب در سیستم عامل اندرویدنمونه یک فیلد جستجو با آیکون مناسب و امکان ثبت اطلاعات با صدا در سیستم عامل iOSمتن Placeholderانتخاب متن مناسب برای Placeholder در آگاهی‌رسانی و شیوه تعامل کاربر با فیلد متنی بسیار مهم است. به‌طور مثال اگر از کاربر درخواست ثبت نام استان دارید، از نام استان به‌عنوان متن Placeholder استفاده نکنید. زیرا ممکن است کاربر را به اشتباه بیاندازد. از طرفی تضاد رنگی آن بایستی با ورودی اصلی متفاوت و کم‌رنگ‌تر باشد تا کاربر متوجه شود اطلاعاتی از پیش در داخل فیلد نوشته نشده‌است.استفاده مناسب از Placeholder (درست)استفاده نامناسب از Placeholder (نادرست)با این حال، بر اساس مطالعاتی که توسط NNGroup به‌لحاظ دسترس‌پذیری برروی Placeholder شده‌است، بسیاری از نرم‌افزارهای دسترس‌پذیری که برروی مرورگرهای وب وجود دارند، علی‌رغم پیشرفت‌هایی که داشتند، تعامل قابل قبولی با Placeholder ندارند و می‌توانند سه مشکل مهم زیر را ایجاد کنند:۱- رنگ خاکستری روشن که به‌صورت پیش‌فرض برای متن Placeholder استفاده می‌شود، تضاد رنگی کمی نسبت به پس‌زمینه خود دارد. امکان خواندن چنین متنی برای کاربرانی که مشکلات بینایی دارند سخت است.۲- در بسیاری از طراحی‌ها متن Placeholder پنهان می‌شود و عبارت ورودی جایگزین آن می‌شود. بنابراین بایستی کاربر به‌خاطر داشته باشد که چه فیلدی را تکمیل می‌کند. در حالت ممکن است کاربران متوجه نشوند که این فیلد قابل انتخاب است و بایستی مقداری داخل آن درج کند. زیرا متنی را در حال حاضر درون فیلد می‌بیند. هم‌چنین زمانی که متن Placeholder ناپدید نمی‌شود، کاربر بایستی آن را حذف کند که تلاشی را از سمت او می‌طلبد. این موارد برای کاربرانی که اختلالات حرکتی یا شناختی دارند، مشکلاتی را به‌همراه دارد.۳- بسیاری از صفحه‌خوان‌ها نمی‌توانند متن Placeholder را بخوانند. بنابراین افرادی که مشکلات بینایی دارند، ممکن است متوجه این متن نشوند.بنابراین توصیه‌ می‌شود برای کاربردپذیری و دسترس‌پذیری بهتر، متن Placeholder را خارج فیلد متنی انتقال دهید یا از شیوه‌های مدرن که در زمان تعامل کاربر با فیلد، متن Placeholder را به بالا یا گوشه فیلد متنی منتقل می‌کنند (مانند Google یا Twitter)، استفاده نمایید.راهنمای درج اطلاعاتداده ورودی به فیلدهای متنی در شکل‌های مختلف هستند. توصیه می‌شود تا جای ممکن فیلدهای متنی به‌صورت سازگار با شیوه ورود اطلاعات توسط کاربر طراحی شوند. با این حال همیشه چنین چیزی امکان‌پذیر نیست. به‌طور مثال، فیلد ورودی شماره تلفن می‌تواند با علامت «+»، پیش‌شماره کشور، پیش‌شماره استان یا بدون این موارد طراحی شود. در این حالت با ارائه قالب مشخص برای ورودی می‌توانید کاربر را راهنمایی کنید.شماره موبایل به‌صورت خودکار در قالب مشخص‌شده تنظیم می‌شود. بنابراین کاربر برای ورود اطلاعات دچار سرگردمی نمی‌شود.مشخص‌نمودن قالب ورودی با Placeholder. مشکل اصلی این روش پنهان‌شدن قالب با ورود اولین کاراکتر توسط کاربر است.پیشوند و پسوندپیشوند و پسوند برای زمانی است که ورودی فیلد متنی بیان‌گر کمیت از یک واحد باشد. به‌طور مثال برای مبلغ پول از نماد ارزها یا برای ارتفاع از واحدهای اندازه‌گیری آن‌ها استفاده می‌شود.استفاده از پسوند متر در فیلد متنی برای راهنمایی روش درج اندازه قداستفاده از پسوند ریال در فیلد متنی برای مشخص‌کردن واحد مبلغ واریزیاندازه مناسب فیلدتوصیه می‌شود تا اندازه فیلد متنی بر اساس اندازه ورودی آن تنظیم شود تا علاوه بر خوانایی، کاربر به‌راحتی با آن تعامل داشته باشد. بنابراین اندازه فیلد به‌گونه‌ای بایستی باشد تا مقدار ورودی احتمالی آن نمایش داده شود.اندازه مناسب فیلد متنی برای کدپستی (درست)اندازه نامناسب فیلد متنی برای کدپستی (نادرست)آیکون پایانیاستفاده از این آیکون امکان تعامل بهتر با فیلد متنی را به کاربر می‌دهد. به‌طور مثال اگر از علامت «ضربدر» استفاده کنید که معنای حذف/پاک‌کردن را دارد، کاربر می‌تواند به راحتی محتوای داخل فیلد را در کم‌ترین زمان ممکن پاک کند. به‌خصوص در موبایل و تبلت که پاک‌کردن محتوا سخت‌تر از دسکتاپ است.امکان حذف متن ورودی به‌کمک آیکون پایانی «ضربدر»در حالتی که کاربر اطلاعات نادرستی را وارد فیلد می‌کند بهتر است از آیکون خطا (Error) یا در زمان درج اطلاعات درست از آیکون تایید (Check) استفاده کرد. این مورد به‌دلیل افزایش دسترس‌پذیری از اهمیت بالایی برخوردار است. زیرا کاربرانی که به‌لحاظ بینایی مشکل دارند، امکان تشخیص رنگ برای ایشان مشکل است. بنابراین از آیکون موجود می‌توانند به وضعیت پیش‌آمده پی ببرند. در خصوص نمایش خطا دو نکته بایستی رعایت شود:۱- تا زمان وجود خطا، پیام مربوط به آن بایستی حفظ شود.۲- پیام خطا بایستی راهنمای کاربر باشد تا به شیوه مناسب بتواند آن را اصلاح کند. تنها بیان وجود خطا قابل قبول نیست.نمایش متفاوت وجود خطا یا درج درست اطلاعات با رنگ‌ها و آیکون‌های پایانی مناسبهم‌چنین زمانی که می‌خواهید از کاربر رمز عبور دریافت کنید، بهتر است امکان بازبینی رمزعبور درج‌شده را به او بدهید.قراردادن آیکون پایانی مناسب برای نمایش رمز عبور واردشده توسط کاربرعلاوه بر این، اگر امکان درج/جستجو اطلاعات بر اساس صدا یا تصویر (برای افزایش دسترس‌پذیری) را به کاربر می‌دهید، بایستی از آیکون مخصوص به آن استفاده نمایید. درج/جستجو اطلاعات بر اساس صدا یا تصویر در نوار جستجوی گوگلوضعیت‌های مختلف فیلد متنیبرای هر فیلد متنی بایستی وضعیت‌های مناسبی از نظر بصری برای Focused ،‌Disabled ،Error و ... مشخص شود تا زمانی که انتخاب، لمس یا برروی آن کلیک می‌شود تغییر وضعیت محسوسی مانند تغییر رنگ، اضافه‌شدن سایه در اطراف و ... اتفاق بیفتد.نمایش وضعیت Focused برای فیلد متنی با رنگ متفاوتاطلاعات کمکیاطلاعات کمکی باید در زمان ضرورت برای راهنمایی بیشتر کاربر استفاده شود. به‌طور مثال برای توضیح شیوه استفاده از شماره موبایل یا انتخاب نام کاربری و رمز عبور مناسب. توصیه می‌شود توضیحات شما بیشتر از ۱۰۰ کلمه نباشد.نمایش اطلاعات کمکی در زیر فیلد متنی برای راهنمایی بهتر کاربرانتخاب صفحه کلید بر اساس نوع ورودی (مناسب موبایل و تبلت)توصیه می‌شود تا در دستگاه‌های لمسی در زمان استفاده از فیلدهای متنی، صفحه کلید متناسب با آن فیلد باز شود.صفحه کلید عددی برای شماره تلفنصفحه کلید حرفی و عددی برای پست الکترونیک

چک‌لیست سریع بررسی دسترس‌پذیری در وب

حسین شیروانی — Thu, 15 Jul 2021 00:44:04 +0430

مقدمهدر سال‌های اخیر دسترس‌پذیری، به‌عنوان یکی از چالش‌های مهم حوزه طراحی محصول، مورد توجه بسیاری از کمپانی‌ها و شرکت‌های مختلف با هدف افزایش کارآیی محصولات آن‌ها و جذب مخاطب بیشتر قرار گرفته است. در این نوشته به‌دنبال مرور برخی نکته‌های مرتبط با دسترس‌پذیری در وب هستم و هدف آن آگاهی بیشتر در خصوص آزمون‌های دسترس‌پذیری برای مشکلاتی است که غالباً در صفحه‌های وب اتفاق می‌افتد.این نوشته مناسب چه افرادی است؟اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.اطلاعات این نوشته مطابق چه استانداردی است؟از این اطلاعات می‌توانید به‌عنوان راهنمایی برای ارزیابی میزان دسترس‌پذیری محتوای وب‌سایت خود به‌منظور انطباق با سطح A استاندارد WCAG 2.0 استفاده کنید. سطح A این استاندارد به‌عنوان پایین‌ترین سطح موردنیاز برای تمامی وب‌سایت‌ها، اپلیکیشن‌ها و محتواهای الکترونیکی مانند سندهای متنی (Documents) است.بخش‌های مورد ارزیابی کدامند؟در این نوشته برخی موارد به‌منظور ارزیابی بخش‌های زیر از صفحه وب ارائه شده‌است:عنوان صفحه (Page title)متن جایگزین برای عکس (Image text alternatives)تضاد رنگ (Color contrast)دسترسی به صفحه کلید (Keyboard access)فرم‌ها و برچسب‌ها (Forms and labels)جایگزین‌های چندرسانه‌ای (Multimedia alternatives)ساختار پایه (Basic structure)عنوان صفحهعنوان صفحه در نوار عنوان پنجره مرورگر، نتایج حاصل از موتور جستجوگر و عنوان بوک‌مارک‌ها/علاقه‌مندی‌ها نمایش داده و جز اولین المان‌های صفحه است که توسط صفحه‌خوان‌ها (Screen Reader) خوانده می‌شود. عنوان مناسب برای صفحه با هدف راهنمایی و کمک به افراد از اهمیت زیادی برخوردار است. زیرا به آن‌ها کمک می‌کند تا متوجه شوند در چه صفحه‌ای هستند.کجا را بررسی کنیم؟در مرورگرهای وب، به متن ثبت‌شده در نوار عنوان پنجره دقت نمایید یا با قراردادن مکان‌نما برروی زبانه مرورگر (Browser Tab)، متنی که پدیدار می‌شود را بررسی نمایید.دنبال چه چیزی باشیم؟بررسی نمایید تا اندازه عنوان انتخابی کافی باشد و خلاصه محتوای صفحه را توصیف نماید.بررسی نمایید تا عنوان صفحه متفاوت از عنوان دیگر صفحه‌ها باشد.نمونه زبانه مرورگر وب با عنوان صفحهمتن جایگزین برای عکسمتن جایگزین نشان‌دهنده هدف یک عکس، طراحی و جدول است و زمانی استفاده می‌شوند که امکان دیدن آن وجود ندارد. زمانی که صفحه‌خوان استفاده می‌شود، کاربران می‌توانند متن جایگزین را به‌جای عکس بشنوند. هم‌چنین هنگامی که کاربران نمایش عکس و تصویر را برای افزایش سرعت دانلودها و کاهش استفاده از پهنای باند غیرفعال می‌کنند، متن جایگزین می‌تواند به‌جای تصویر توسط بازدیدکننده استفاده شود.کجا را بررسی کنیم؟درون فایل HTML خود را بررسی کنید تا برای تمامی عکس‌ها با تگ ، ویژگی (attribute) alt مقدار داشته باشد.دنبال چه چیزی باشم؟اگر یک عکس نشان‌دهنده اطلاعاتی مفید برای فهم بهتر محتوای صفحه باشد، پس نیاز به متن جایگزین دارد.اگر یک عکس تنها برای زیبایی استفاده شده‌است و افراد نیازی به آن ندارند، پس مقدار جایگزین آن بایستی خالی (""=alt) باشد.متن جایگزین بایستی تجربه کاربری مشابهی را ایجاد کند و لزوماً بیانگر محتوای عکس نباشد. به‌طور مثال، متن جایگزین دکمه جستجو با یک عکس ذره‌بین بایستی کلمه «جستجو» باشد نه «ذره‌بین».نمونه عکس با متن جایگزین تنظیم‌شده برای alt در تگ imgنمونه تگ مورد استفاده برای نمایش عکس با متن جایگزین در پارامتر alt به‌صورت زیر است:تضاد رنگمتن بایستی تضاد رنگی کافی نسبت به پس‌زمینه خود داشته باشد. تضاد بالا، به‌طور مثال متن تیره برروی پس‌زمینه روشن، برای برخی افراد که مشکلات بینایی دارند موردنیاز است. البته این موضوع برای بسیاری از افراد که به‌لحاظ کهولت سن حساسیت خود نسبت به تضاد رنگ‌ها را از دست می‌دهند نیز صادق است.کجا را بررسی کنیم؟بخش‌هایی درون صفحه وب که رنگ متن با پس‌زمینه همراه است یا عکس‌هایی که تضاد رنگ کمی دارند.برای سازگاری با سطح AA استاندارد WCAG 2.0، صفحه‌های وب بایستی حداقل نسبت تضاد 4.5:1 برای متن با اندازه نرمال (یا نسبت 3:1 برای متن با اندازه بزرگ) را داشته باشند.به هیچ عنوان پیام‌های مهم را درون عکس استفاده نکنید. متن موجود در عکس، زمانی که از ابزار تغییر اندازه متن استفاده می‌شود، تغییر نمی‌کنند.برای بررسی تضاد رنگ می‌توانید از ابزارهایی مانند ColorZilla، WebAIM Contrast Checker و Coolors استفاده نمایید.دسترسی به صفحه کلیدبسیاری از کاربران امکان استفاده از ماوس را ندارند و تعامل آن‌ها با وب‌سایت به کمک صفحه کلید است. کاربرانی که دارای نابینایی یا ناتوانی حرکتی هستند از ابزارهای فناوری کمکی یا Assistive Technology استفاده می‌کنند (این ابزارها به صفحه کلید وابسته هستند تا به‌درستی اجرا شوند). در صورت انتخاب یک المان به‌کمک صفحه کلید و قرارگرفتن در وضعیت Focused، بایستی این وضعیت برای کاربر مشخص شود. هم‌چنین کاربر بایستی بتواند به کمک صفحه کلید، المان‌های داخل صفحه را به‌ترتیب منطقی پیمایش کند.المان موجود در نوارناوبری در حالت Focused قرار گرفته استکجا را بررسی کنیم؟کاربران بایستی بتوانند در یک چرخه (Cycle) تکرارپذیر، المان‌های داخل صفحه را پیمایش کنند (به کمک Tab و Shift+Tab).دنبال چه چیزی باشیم؟بررسی نمایید که با فشردن دکمه Tab برروی صفحه کلید، المان‌های مختلف صفحه مانند لینک‌ها، فیلدهای فرم، دکمه‌ها و کنترلگرهای رسانه قابل پیمایش هستند و در وضعیت Focused قرار می‌گیرند.بررسی نمایید که هیچ تله‌ای در زمان کار با صفحه کلید وجود ندارد. بدین معنا که با انتخاب Tab به بخشی وارد شوید که با همین دکمه نتوان از آن خارج شد.برای وضعیت Focused هر المان، یک حالت بصری مشخص نمایید.آیتم‌های لیست Drop-down بایستی بدون اجرای کاری به‌صورت خودکار، به کمک کلیدهای جهت یا Tab قابل پیمایش باشند.المان‌های موجود در صفحه با Tab و Shift+Tab قابل پیمایش هستند و هر المان حالت Focused به‌خصوصی داردفرم‌ها و برچسب‌هاراه‌کارهای واضح، برچسب‌ها و کنترل خطا برای دسترس‌پذیری فرم‌ها بسیار مهم است. نشانه‌گذاری (Markdown) برچسب‌های فرم (Form labels) به‌روش صحیح امکان تعامل با فناوری کمکی را مهیا می‌کند و کاربر را به شکل بهتری درون فرم، راهنمایی و جهت‌دهی می‌کند.کجا را بررسی کنیم؟به کمک Tab میان فیلدهای فرم در صفحه وب جابجا شوید.برروی برچسب‌های فیلد فرم (Form field labels) کلیک نمایید تا مطمئن شوید که فیلد ورودی مرتبط با آن در وضعیت Focused قرار گرفته‌است.به‌دنبال چه چیزی باشیم؟مطمئن شوید که تمامی کنترلگرهای فرم (Form controls) را می‌توان به کمک Tab پیمایش کرد.مطمئن شوید که تمامی لیست‌های Drop-down به کمک کلیدهای جهت یا Tab قابل دسترس هستند.برروی برچسب‌های فیلد فرم کلیک کنید تا مطمئن شوید نشانه‌گذاری برچسب به‌درستی انجام شده‌است. برچسب‌ها زمانی که به‌درستی انتخاب شوند، قابل کلیک می‌شوند و باعث می‌شوند تا فیلد مرتبط با آن‌ها در وضعیت Focused قرار بگیرد.نشانه‌گذاری درست برچسب‌ها – با انتخاب هر برچسب، فیلد مرتبط در حالت Focused قرار می‌گیردبررسی نمایید که فیلدهای اجباری به‌درستی مشخص شده‌اند. لازم به ذکر است که برچسب هر فیلد در فرم به کاربر کمک می‌کند تا کنترلگر ورودی آن را شناسایی و به‌درستی با آن تعامل کند.پیام‌های خطا را واضح و قابل فهم تنظیم کنید و در زمان حل مشکل، کاربر را راهنمایی و مطلع نمایید. توصیه می‌شود تا پیش از تایید فرم توسط کاربر، خطاهای موجود به او اطلاع داده شود.نمایش خطاهای موجود در اطلاعات واردشده قبل از تایید فرم توسط کاربرجایگزین‌های چندرسانه‌ایاستفاده از صدا برای افراد ناشنوا یا کم‌شنوا امکان‌پذیر نیست. اطلاعات بصری در ویدیوها به‌شکل مشابه برای افراد نابینا یا افرادی که مشکلات بینایی دارند قابل دیدن نیست. بهتر است راهی جایگزین برای این افراد استفاده شود تا امکان برخورداری از این قبیل اطلاعات برای ایشان مهیا باشد.کجا را بررسی کنیم؟گوش‌دادن به صدا در زمان بارگیری محتوابررسی وجود پخش‌کننده‌های ویدیو در صفحهدنبال چه چیزی باشیم؟مطمئن شوید تا فایل صوتی به‌صورت خودکار در زمان بازشدن صفحه وب پخش نمی‌شود. در صورتی که صدا بایستی پخش شود، پس از ۳ ثانیه آن را متوقف نمایید.مطمئن شوید تا کنترل‌هایی برای نگه‌داشتن موقت یا توقف کامل پخش صدا در اختیار کاربر وجود دارد.امکان تنظیم صدا برای کاربر میسر باشد.تمامی فایل‌های صوتی که از پیش ضبط شده‌اند بایستی زیرنویس (Subtitle) داشته باشند.نمونه پخش‌کننده فایل صوتی/تصویری با دکمه‌های کنترلیساختار پایهصفحه‌های وب از ستون‌ها (Columns)، بخش‌ها (Sections)، رنگ‌‌های متعدد و جنبه‌های بصری دیگری تشکیل شده‌است که به سازمان‌دهی اطلاعات برای افرادی که وضعیت عادی این صفحه‌ها را می‌بینند، کمک می‌کند. بیننده این صفحه‌ها در حالت عادی نمی‌تواند کنترل ترتیب اطلاعات را تغییر دهد. برخی افراد با بینایی ضعیف، نحوه نمایش صفحه را به‌گونه‌ای تغییر می‌دهند که محتوای داخل آن قابل خواندن باشد. به‌طور مثال، ممکن است این افراد شیوه نمایش را از حالت چندستونه به تک‌ستونه یا اندازه متن یا موارد دیگر را تغییر دهند. البته در زمانی که محتوای یک صفحه به‌صورت خطی و تک‌ستونه تنظیم شده‌است، ترتیب قرارگرفتن محتوا می‌تواند مشکل‌ساز باشد.کجا را بررسی کنیم؟عکس‌ها را غیرفعال و از متن جایگزین آن استفاده نمایید.استفاده از فایل CSS Style Sheet را غیرفعال کنید.بررسی نمایید که نشانه‌گذاری جدول‌های درون صفحه به‌درستی انجام شده باشند.نمونه خطی‌شده (Linearize) وب‌سایتنمونه وب‌سایت با CSS غیرفعالدنبال چه چیزی باشیم؟از ابزارهای توسعه وب در مرورگر خود استفاده و با غیرفعال‌کردن CSS و نمایش متن جایگزین برای عکس، ساختار خطی محتوای صفحه را بررسی نمایید (مانند افزونه Web Developer در مرورگر Google Chrome). مطمئن شوید ترتیب خطی محتوای صفحه معنادار باشد.مطمئن شوید که داده‌های داخل جدول به کمک Header مناسب نشانه‌گذاری شده‌اند. از تگ برای مشخص‌کردن Header استفاده نمایید و پارامتر «scope» را با مقدارهای «col» و «row» اضافه کنید که ارتباط Header ها با سطر و ستون مشخص شود.Valueبررسی نمایید که بلوکه‌های متنی دارای عنوان واضح باشند تا پیمایش محتوای صفحه را برای کاربر تا جای ممکن تسهیل کنند.در صورتی که از محتوای تهیه‌شده لذت بردید، تقاضا دارم من را در شبکه‌های اجتماعی اینستاگرام و توییتر دنبال کنید.