دسترسی پذیری (Accessibility) وب سایت های فارسی

در این مقاله قصد دارم در کنار بررسی میزان دسترسی پذیری (Accessibility) وب سایت های مطرح ایرانی، دسترسی پذیری رو به زبان ساده واستون تعریف کنم و توضیح بدم چرا دسترسی پذیری یکی از پیش نیاز های هر وب سایت و نرم افزاریه.
writing-accessibility-post-on-flight
الان تازه سوار هواپیما شدم و دارم بعد از یک سفر ۳ روزه از تورنتو بر می گردم به کلگری. سفرم یه سفر کاری از طرف شرکت بود برای آموزش و تشکیل یک گروه تخصصی Accessibility. اگر معنی این کلمه رو نمی دونید نگران نباشین! توضیح میدم.
هفت ماه پیش کار جدیدم رو شروع کردم. قبلا با و برای خیلی شرکت ها کار کردم ولی این اولین باره که برای شرکتی با نزدیک هزار کارمند در کشورهای مختلف کار می کنم. از اول که اینجا شروع به کار کردم دنبال این بودم که ببینم چه جای خالی ای رو می تونم پر کنم. پیش فرضم این بود که احتمالا با توجه به اینکه این شرکت پروژه های پیچیده برای مشتریان بزرگ انجام میده جای خالی زیادی توش نیست و باید سخت باشه توش پیشرفت کردن. اولین پروژه م در این شرکت پروژه بزرگ و مهمی برای بزرگترین مشتریمون (نیسان و اینفینیتی) بود که شامل ساختن دو وب سایت جدید Responsive و مدرن ظرف ۴ ماه می شد. توی اون پروژه روشی نزدیک به Agile رو پیاده می کردیم و تیم بزرگی بطور خیلی نزدیک با هم کار می کردن. حدود ۳۰ برنامه نویس و کلی تخصص های دیگه از مدیریت پروژه گرفته تا طراح گرافیک و طراح تجربه کاربری و Copywriter و Strategist و Tech Lead و Tech Director و برنامه نویس Frontend و Backend و QA و Release Engineer و غیره! خیلی واسم تجربه جالبی بود و خوشبختانه خیلی بهتر از چیزی که ازم انتظار داشتن ظاهر شدم. دلایل اصلیش هم می تونم بگم سه چیز بود:
  • علاقه و اشتیاق زیادی که به این کار دارم و اهمیت دادن زیاد به نتیجه کار. بعلاوه تجربه فنی زیاد.
  • مقالات زیادی که بخاطر علاقه م در وقت آزادم در سایت هایی از جمله Smashing magazine می خونم و بروز بودن دانشم.
  • هماهنگی سریع با تیم و برقراری ارتباط خوب و سازنده که از علل اصلیش تجربه کارم در دو شرکت کانادایی قبلی و تجربه کارم در تیم Averta بود.

مدتی که گذشت متوجه شدم اکثر برنامه نویس های تیم فاکتور اول و دوم رو زیاد ندارن. شاید بخشیش بخاطر اینکه این بزرگترین و حساس ترین پروژه ای بود که تا حالا روش کار کرده بودن و انرژی زیادی ازشون گرفته بود. من خیلی وقت ها تا دیروقت سرکار موندم و حتی بعضی آخرهفته ها هم کار کردم و سعی کردم خیلی بیشتر از انتظاری که ازم می رفت کمک کنم. یکی از کارهایی که تلاش کردم عملی کنم این بود که وب سایت جدید رو تا حد امکان Accessible کنیم. با چند نفر از Lead ها و Director ها که دوست شده بودم راجع بهش صحبت کردم. اکثرشون تصور واضحی از Accessibility نداشتن و فقط کلمه ش رو اینور اونور کمی شنیده بودن.

دسترسی پذیری (Accessibility) چیست؟

واسشون توضیح دادم که همه جای دنیا از جمله آمریکا افرادی هستن با مشکل بینایی. خیلی ها کوررنگن. مثل مارک زاکربرگ موسس فیس بوک که اصلا رنگ آبی فیس بوک رو برای همین انتخاب کرد که بخاطر کوررنگیش سبز و قرمز رو نمیتونه درست ببینه ولی آبی رو خوب می بینه. خیلی ها -چه جوون و چه افراد مسن- بیناییشون ضعیفه یا نابینان.
یه عده ناتوانی حرکتی دارن. مثلا قدرت ماهیچه ایشون کمه و نمی تونن از موس کامپیوتر یا کیبورد استفاده کنن – نمونه حادش فیزیکدان معروف استیون هاوکینگ.
بعضی ها مشکل شنوایی دارن و مثلا ویدیو که می بینن ممکنه صداش رو نشنون. مثل رییس جمهور سابق آمریکا بیل کلینتون.
دسته چهارم و آخر ناتوانی های جسمی میشه کسانی که مشکلات ذهنی دارن. این دسته شامل خیلی مشکلات از حافظه کوتاه مدت ضعیف تا قدرت تمرکز پایین و بیش فعالی و خوانش‌پریشی میشه که دنیل ردکلیف بازیگر فیلم هری پاتر داره و خوندن رو براش خیلی دشوار می کنه.
همه شون با تاسف سر تکون دادن و گفتن آره متاسفانه بعضی ها خیلی از این مشکلات رنج می برن و احتمالا کامپیوتر رو خیلی کم می تونن استفاده کنن یا اصلا نمی تونن.
گفتم می تونین حدس بزنین چند نفر در آمریکا  ناتوانی های جسمی (Disability) دارن؟ رقم هایی بین ۱ تا ۲۰ میلیون حدس زدن. گفتم طبق اخرین سرشماری حدود ۵۰ میلیون نفر در آمریکا حداقل یک ناتوانی جسمی دارن. یعنی ۱۵ درصد جمعیت. در دنیا هم درصدش در همین حدوده. همشون چشماشون گرد شد و (حداقل به ظاهر) بیشتر تاسف خوردن.
بعد واسشون توضیح دادم واسه هرکدوم از این ناتوانی ها چه نرم افزار ها و سخت افزار هایی وجود داره که به این افراد امکان استفاده از کامپیوتر و اینترنت رو میده. اینجا دیگه واقعا تعجب کردن چون حالا فکر کردن خیلی از بیننده های پروژه های خودشون هم می تونن از اینجور افراد باشن. گفتم نه اشتباه نکنید! این سایت هایی که ما داریم می سازیم ایراداتی دارن که اکثر این افراد قادر به استفاده ازشون نیستن (البته من حواسم به صفحات و امکاناتی که خودم می سازم هست. منظورم بقیه بود!) برای اینکه این افراد امکان استفاده از سایت هایی که ما می سازیم رو داشته باشن باید یک سری اصول و قواعد رو رعایت کنیم و خودمون رو جای این افراد بذاریم.

اگر با شنیدن این ها احساس همدلی (empathy) با این افراد نمی کنید و Accessible بودن تمام نرم افزار ها و وب سایت هارو ضروری نمی دونید به این فکر کنید که بین مردم کلی آدم هست که ناتوانی های جسمی دارن (از هر  ۶ یا ۷ نفر یک نفر). اگه دفتر کلگری ما ۳۵۰ نفریم این یعنی ۵۰ نفر ناتوانی های جسمی دارن. ۵۰ نفر هرروز ۸ ساعت زیر یک سقف کنار شمان که نمی تونن خوب از نرم افزاراتون استفاده کنن و شما بهشون حس ناتوانی میدین. بیشتر بهش فکر کنید. این همه آدم اطرافتون عینک می زنن. آیا کسی که چشمش ضعیفه معلوله؟ نه؟ تا قبل اینکه عینک ساخته بشه چی؟ اون موقع معلول بودن. اما اختراعات و ساخته های ما آدم ها باعث شد این افراد با چشم ضعیف دیگه معلول نباشن. بیشتر که بهش فکر کنید درک می کنید فرد معلولی وجود نداره…شما با کارتون دیگران رو معلول می کنید.

چطور سر از تورنتو درآوردم

دیگه فرصت نبود که بیشتر واسشون توضیح بدم ولی خیلی واسشون جالب بود و ازم دعوت کردن یک ماه بعد واسه کل تیم فنی یک ارائه مطلب (Presentation) بذارم و با این موضوع آشناشون کنم. البته اون موقع دیگه اواخر پروژه نیسان و اینفینیتی بود و امیدم این بود که برای پروژه های بعدی شرایط بهتر بشه. ۲ هفته بعد از طریق یکی از Team lead ها فهمیدم فردی به نام Seth Kane در دفتر شیکاگومون در سمت Tech Lead کار می کنه و تخصص اصلیش همین Accessibility هست و وقتی فهمیده که من این بحث رو به دفتر اصلی (کلگری) دارم میارم خیلی استقبال کرده. خلاصه با سث کلی صحبت کردم و آشنا شدم و ازش دعوت کردم توی ارائه مطلب کمکم کنه. هم بخاطر اینکه اون تجربه ش در این زمینه و در آموزش این موضوع خیلی بالاتر بود هم اینکه من تابحال در کانادا presentation نداده بودم و وقتم اصلا نداشتم روش کار کنم و نگران بودم خوب پیش نره و بجا اینکه تیم رو به موضوع علاقمند کنه زده شون کنه.

در نهایت ظرف ۲-۳ روز کل اسلایدهارو آماده کردم و با سث هماهنگ شدم و با هم presentation رو انجام دادیم. فکر می کنم حدود ۳۰ نفر از تیم فنی اومدن یا آنلاین بهمون ملحق شدن و خیلی ها به موضوع علاقمند شدن و بعدش ازم تشکر کردن. اما دریغ از کوچکترین تغییر در پروژه های بعدی و Accessible شدنشون! از طرفی تیم طراحی سر از این موضوع در نمی آوردن و طراحیشون هزار و یک مشکل Accessibility داشت. از طرف دیگه تیم مدیریت پروژه و Account manager اصلا توی محاسبات مالی و زمانیشون این موضوع رو حساب نمی کردن. بعلاوه اینها من هم درگیر کلی پروژه prototyping بودم که Accessibility لازم نداشتن (مثل چت بات ها و اپ هولولنز) و فرصت این رو نداشتم که بیشتر این دانش رو در شرکت و به تیم های مختلف گسترش بدم. سث هم کل وقتش صرف کمک به تیم شیکاگو و نیویورک و تورنتو میشه و به شدت مشغوله. خلاصه یک جورهایی از این موضوع ناامید شدم و دیگه دنبالش نرفتم به جز صحبت هایی که گاهی وقتا سرناهار با همون همکارا می کردم. تا اینکه چند ماه پیش چند مشتری جدید از جمله شرکت بیمه آمریکایی Blue Shield of California و یک دانشگاه آمریکایی پیدا کردیم که قانونا باید Accessible می بودن و چند تیم در کلگری مشغول کار روشون شدن. تو این پروژه ها قرار بود من کار Accessibility Lead رو به عهده بگیرم ولی مدیر پروژه ها بدون اطلاع ما خیلی بخش هارو پیش بردن و به مشکل خوردن. همینا باعث شد بحث Accessibility بیشتر توی شرکت راه بیفته و با تلاش سث شرکت رقم قابل توجهی سرمایه گزاری کرد تا ۱۷ نفر با تخصص های Development و QA و UX از دفاتر کلگری و نیویورک و شیکاگو و آمریکای جنوبی برای یک دوره تخصصی Accessibility بفرسته تورنتو و از یک شرکت متخصص در این زمینه به اسم Deque که دفاتر دیگه ما برای Accessibility Review ازشون کمک می گیرن بخواد این دوره رو برگزار کنه. این ۱۷ نفر قرار شده بشن سفیرهای Accessibility شرکت و با گسترش دانش و دادن مشاوره به دیگران سعی کنن هرچه زودتر تمام پروژه های جدید شرکت رو Accessible کنن. توی این دوره تخصصی از مسایل سطح بالا مثل پروسه کلی بهینه برای پروژه های Accessible و آموزش و همکاری با متخصصین رشته های مختلف و نقش ها و مسئولیت ها تا مسایل ریز و تخصصی و فنی کلی صحبت شد و برای همه بسیار مفید بود. برای من هم (بخصوص مسایل غیر فنی و کلی تر) خیلی مفید بود و بهم انرژی مثبت داد که می تونیم تمام پروژه هامون رو با کمک هم Accessible کنیم. تنها چیزی که در این حین ناراحتم می کرد (و سالهاست کرده) اینه که در ایران هیچ کس راجع به این موضوع صحبت نمی کنه. هرچقدر جستجو می کنم هیچ مقاله ای مثلا درباره Web Accessibility به فارسی پیدا نمی کنم. رفتم یه سری سایت دولتی که اتفاقا بیشتر بازدیدکننده هاشون ممکنه معلول باشن و یه سری از پربیننده ترین سایت های ایرانی رو بررسی مختصری کردم تا ببینم طبق استاندارد جهانی WCAG 2.0 که سالهاست در آمریکا و کانادا و کشورهای دیگه دنیا استفاده میشه چقدر Accessible هستن. برای این تست از مرورگر کروم در سیستم عامل مک و صفحه‌خوان (Screen Reader) رایگان NVDA در یک Windows Virtual Machine استفاده می کنم. نتایج تستم رو اینجا با شما به اشتراک می ذارم:

بررسی دسترسی پذیری (Accessibility) سایت های فارسی

سایت بهزیستی کشور

  • تگ HTML صفت lang رو نداره در نتیجه نرم افزارهای صفحه‌خوان نمی فهمن زبان صفحه فارسیه و درست نمی خوننش.[۱]
  • Responsive نیست. توی مانیتورهای کوچک خیلی استفاده ازش سخته.
  • کاربرانی که فقط از کیبورد استفاده می کنن (مثل خیلی ها که مشکلات ماهیچه ای دارن) اصلا نمی تونن از سایت استفاده کنن. چون با Tab به خوبی نمیشه به تمام لینک های صفحه رسید و اسلایدر بالای صفحه الکی همش Focus رو می گیره وقتی Tab می زنی و بعضی المان ها هم در حالت Focus هیچ تغییری نمی کنن و نمیشه فهمید Focused شدن.
  • اسلایدر بالای صفحه اصلی خیلی سریع اسلایدش عوض میشه و کسی که سرعت خواندنش کمه (یا حتی هر آدمی!) احتمالا نمی رسن بخوننش. هیچ راهی هم واسه pause کردنش نیست. انیمیشنش هم خیلی حواس پرت کنه و کسانی که ناتوانایی های ذهنی دارن رو می تونه خیلی اذیت کنه.
  • در کل انقدر ایرادات این سایت زیاده و ابتداییه که بیشتر از این بررسیش نمی کنم. بریم سراغ بعدی…

 

سازمان بهزیستی استان تهران

  • یکی از اولین پیش نیازهای هر وب سایت و بخصوص وب سایت های Accessible اینه که باید بشه بدون استفاده از موس از تمام وب سایت استفاده کرد. در این وب سایت زیرمنو هارو هیچ جوره نمیشه با کیبورد باز کرد! و بدلیل اینکه حالت focus رو خیلی از لینک ها نشون نمیدن اصلا با کیبورد نمیشه از این وب سایت استفاده کرد.
  • باز هم اسلایدری که قابل pause نیست مگر اینکه موس رو استفاده کنی و روش نگه داری.
  • این سایت هم انقدر ایرادات ابتدایی داره که دیگه ادامه نمیدم. کلا از بهزیستی بگذریم. بریم سراغ بیمه…

 

بیمه ایران

  • باز هم اسلایدری که autoplay داره و pause نمیشه.
  • وقتی با کیبورد صفحه رو می گردید دو مشکل اساسی هست: نمیشه در سایت جستجو کرد – وقتی روی منوی اصلی سایت هستید در مرورگر Chrome انقدر کنتراست بین مستطیلی که دور لینک می بینید (focus outline) و رنگ پس زمینه پایینه که دیدنش خیلی سخته. بازم وضعیتش بهتر از سایت های بهزیستیه. بریم سراغ یه قسمت پرکاربرد: خدمات الکترونیکی
  • توی صفحه خدمات الکترونیکی یه لینک Skip to content گذاشتن برای کاربران کیبورد. نشون میده به Accessibility فکر کردن. ولی بازم اسلایدری که دکمه pause نداره…کلا مثل اینکه در ایران اسلایدر رو حتی از اینجا هم بیشتر دوست دارن! در حالی که تمام مطالعات و آزمایشات نشون میده که اسلایدر ها تاثیر چندان مثبتی ندارن و تجربه کاربری بدی خلق می کنن.
  • توی صفحه خدمات الکترونیکی بعضی از دکمه های اصلی که اتفاقا خیلی ممکنه برای معلولین مهم باشن -مثل دکمه مراجع درمانی طرف قرارداد با بیمه ایران- contrast بین رنگ نوشته شون (#ffffff) و رنگ پس زمینه شون (#f5c200) اصلا در حد استاندارد WCAG AA نیست و کسی که مثلا کوررنگی داشته باشه ممکنه اصلا نتونه اون نوشته روی دکمه هارو بخونه. اطلاعات اضافی: اگر می خواید چک کنید ببینید رنگ یک نوشته کنتراست کافی با رنگ پس زمینه ش داره می تونید از ابزارهایی مثل این استفاده کنید: WebAIM Color Contrast Checker
  • من رفتم به صفحه مراجع درمانی طرف قرارداد که اون رو بررسی کنم ولی چه با موس چه کیبورد نتونستم جستجویی کنم که نتیجه بده! هیچی پیدا نمی کرد. یا بیمه ایران هیچ مرجع طرف قراردادی در تهران نداره یا سایتشون مشکل داره! بریم سراغ بعدی…

 

پایگاه اطلاع رسانی سازمان تامین اجتماعی

  • تگ HTML صفت lang رو نداره.[۱]
  • وقتی با دکمه Tab کیبورد میری روی منوی اصلی اون آیتم هایی که زیرمجموعه دارن focus outline نشون نمیدن… نمی فهمی روشونی. حداقل خوبه که با کیبورد می تونی بازشون کنی! اما چند ثانیه بعد زیرمنو خود به خود بسته میشه!! فکر کنم یه ربطی به اسلایدرها داره.
  • اون اسلایدر وسط صفحه نه دکمه pause داره نه میشه با کیبورد رفت روی دکمه های زیرش تا اسلاید رو عوض کرد.
  • اینم بیش از این جای بررسی نداره. بریم سراغ سایت بانک ها…

 

بانک ملت

  • دو دقیقه توی loading منتظر موندم باز نشد. بریم سراغ یه بانک دیگه…

 

بانک سامان

  • تگ HTML صفت lang رو داره…اما زبان صفحه رو انگلیسی (en) در نظر گرفته![۱]
  • در CSS این سایت یه کدی هست که بدترین کاریه که با accessibility یک وب سایت می تونید بکنید:
    * {outline: none !important;}
  • همین دو ایراد کافیه تا یک وب سایت تقریبا اصلا accessible نباشه. علی رقم اینکه سایت بانک سامان از همه سایت هایی که تا اینجا بررسی کردم زیباتر به نظر میاد، از نظر Accessibility بدترین سایته و افراد با ناتوانی های جسمی‌ (حدود یک ششم جمعیت کشور) رو اصلا در نظر نگرفته. ببینیم بانک های دیگه چه کردن…

 

بانک ملی

  • تگ HTML صفت lang رو نداره.[۱]
  • بریم به اینترنت بانک. اینجا تگ html صفت lang رو داره ولی خالیه!
  • فرم ورود اصلا accessible نیست. فیلد ها هیچکدوم label ندارن و فقط placeholder دارن. مشکل placeholder دو چیزه. یکی اینکه صفحه خوان ها اصلا نمی خوننش، در نتیجه یک فرد نابینا اصلا نمی تونه از این فرم استفاده کنه. و دیگری اینکه وقتی چیزی تایپ کنید دیگه معلوم نیست که توی کدوم فیلد هستید. بعضی افراد با ناتوانی های ذهنی ممکنه اینطوری دچار مشکل بشن.
  • بانک ملی هم مثل بانک سامان در بخش اینترنت بانک اومده outline لینک های focus شده رو کاملا برداشته. که گشتن در سایت با کیبورد رو غیر ممکن می کنه.
    :focus, a:focus, button:focus, input:focus {outline: none;}

 

بانک پارسیان

  • تگ HTML صفت lang رو نداره.[۱]
  • فرم جستجو با کیبورد قابل دسترسی نیست.
  • زیرمنوها در حالت focus به حد کافی مشخص نیستن (outline خیلی نازکه).
  • اسلایدرش با کیبورد قابل کنترل نیست. ضمنا قابل pause هم نیست.
  • کلا سایتی که صفت lang رو نداشته باشه زیاد ارزش بررسی نداره. بریم سراغ سایت دانشگاه ها…

 

دانشگاه شریف

  • ای بابا! در سایت دانشگاه شریف هم تگ HTML صفت lang رو نداره.[۱]
  • اسلایدر با کیبورد قابل کنترل و pause نیست.
  • سیستم آموزش دانشگاه چطور؟ اون هم صفت lang رو نداره. ضمن اینکه فیلد های فرمش label ندارن. یعنی کلا افرادی که از صفحه خوان استفاده می کنن نمی تونن از سیستم آموزش استفاده کنن…بریم ببینیم شاید سایت دانشگاه تهران که دانشجوهاش بیشترن بهتر باشه…

 

دانشگاه تهران

  • متاسفانه این کد CSS رو داره:
    a:link, a:hover, a:active, a:visited, a:focus {outline: none;}
    در نتیجه سایت اصلا با کیبورد قابل استفاده نیست.
  • حالا سایت دانشگاه ها مشکل داره. ببینیم اصلا افرادی که به سایت های accessible نیاز دارن می تونن به دانشگاه وارد بشن یا نه. سایت سنجش رو ببینیم…

 

سازمان سنجش آموزش کشور

  • تگ HTML صفت lang رو نداره.[۱]
  • در خیلی از محتوای صفحات رنگ متن ۶۶۶۶۶۶ هست و رنگ پس زمینه e1e1e1. این دو رنگ کنتراست کافی رو ندارن و برای افراد کوررنگ یا با بینایی ضعیف مشکل ایجاد می کنن.
  • بریم سراغ چندتا از پربیننده ترین سایت های فارسی

 

دیجی کالا

  • همون اول یک modal باز کرد که با کیبورد هیچ جوری قابل بستن نبود. یعنی کاربران کیبورد اصلا نمی تونن از سایت استفاده کنن. فقط با موس بسته میشد.Digikala Pageload Modal
  • تگ HTML صفت lang رو نداره.[۱]
  • فیلد جستجو label نداره.
  • منو رو با کیبورد نمیشه استفاده کرد (زیرمنوها باز نمیشن).
  • متاسفانه outline لینک ها در CSS برداشته شده و با کیبورد نمی فهمید الان کجای صفحه هستید.
    a {outline: 0;}
  • با وجود چنین ایرادات اساسی ای نیازی به بررسی بیشتر نیست. باید بگم از دیجی کالا خیلی بیش از این انتظار داشتم. ببینیم رقیبشون چه کرده…

 

بامیلو

  • بامیلو هم همون ابتدا یک modal باز کرد که با کیبورد نمیشد رفت روی دکمه بستنش.
  • تگ HTML صفت lang رو به درستی داره.
  • فیلد جستجو label نداره.
  • منوی اصلی (بالا سمت چپ) با کیبورد قابل استفاده نیست چون در حالت focus تغییری نمی کنه و زیرمنوهارو نمیشه با کیبورد باز کرد.
  • در لیست دسته ها، زیرمنو هارو که با کیبورد سعی می کنی باز کنی روی گزینه مادر کلیک می کنه. در نتیجه لیست با کیبورد قابل استفاده نیست.
  • اسلایدر با کیبورد قابل کنترل و pause نیست.

 

سایت های پربیننده دیگه مثل آپارات و بلاگفا هم صفت lang رو در تگ html ندارن و اصلا accessible نیستن.

 

نتیجه

من مطمئنم هیچ کدوم از سازنده های این وب سایت ها با دونستن اینکه چطور یک سایت accessible میشه چنین سایت هایی نساختن. مطمئنا همه این افراد تلاش می کنن سایت هایی بسازن که توسط همه قابل استفاده باشه. اما از اونجایی که در منابع فارسی بسیار بسیار به ندرت اشاره ای به دسترسی پذیری میشه این دانش وارد ایران نشده و متخصصین ایرانی گرچه در خیلی زمینه ها مهارت بالایی دارن در این زمینه مهارت بالایی کسب نکردن و دنبالش هم هیچوقت نرفتن. من با نوشتن این مقاله به هیچ وجه قصد بی کیفیت شمردن کار این متخصصین رو ندارم و علت نوشتن این مقاله فقط و فقط افزایش آگاهی خوانندگان در زمینه دسترسی پذیری وب بوده و مثال ها تنها برای نشون دادن میزان جدی بودن این مشکل در سایت های ایرانی آورده شدن.
۲۱ میلیون نفر از جمعیت ایران مشکلات بینایی دارن. اگر ناتوانایی های حرکتی، شنوایی و ذهنی رو هم در نظر بگیریم احتمالا حدود ۳۰ میلیون نفر با ناتوانی های جسمی در ایران وجود داره.
همونطور که می بینید بیشتر سایت های مهم و پربازدید ایرانی اهمیت زیادی به این تعداد زیاد از جمعیت ایران ندادن. هرچند حتی اگه تعداد کم بود طبق قانون اساسی این افراد هم باید از حقوق مشابه افراد دیگه برخوردار می بودن و باید بهشون کاملا اهمیت داده میشد و اگر اینجا بحث جمعیت تحت تاثیر رو پیش کشیدم فقط برای نشان دادن وخامت و گستردگی مشکله.
من فکر می کنم این مشکل در کشور ایران بیشتر از نبود دانش Accessibility نشات می گیره که خود اون می تونه نشات گرفته از عدم سرمایه گذاری کافی ارگان های دولتی در این زمینه باشه.
امیدوارم این مقاله آغازی باشه تا حداقل چند نفر از ما بیشتر به موضوع Accessibility فکر کنیم و راجع بهش یاد بگیریم و به همه هم نوعانمون اهمیت بدیم. لطفا اگر خوندن این مقاله رو مفید دیدید به اشتراک بذاریدش. امیدوارم این حرف ها به گوش مسئولین و مدیران هم برسه تا بتونیم زودتر شاهد پیشرفت در این زمینه باشیم.
منتظر نظراتتون هستم

[۱] برای فهم بهتر مشکل نبود صفت lang در تگ html این ویدیو رو تماشا کنید:
(اگر به یوتیوب دسترسی ندارید روی آپارات تماشا کنید)
افرادی که بینایی ضعیف یا نابینایی دارن برای استفاده از کامپیوتر از نرم افزارهای صفحه خوان (screen reader) استفاده می کنن. برای اینکه این نرم افزارها بتونن صفحات وب رو به درستی بخونن برنامه نویسان وب وظیفه دارن کد استاندارد و semantic بنویسن و قواعد مربوط به دسترسی پذیری (Accessibility)‌ رو رعایت کنن. سازمان W3C سالهاست در این زمینه راهنمایی ها و استاندارد های خوبی تحت نام WCAG 2.0 منتشر کرده که به تمام برنامه نویسان وب خوندن و یادگیریشون رو بسیار توصیه می کنم.
در بیشتر سایت های فارسی (حتی سایت هایی که افراد با ناتوانی های جسمی ممکنه خیلی نیاز داشته باشن استفاده کنن٬ مثل سایت بیمه و تامین اجتماعی) تگ html صفت lang رو نداره. در نتیجه صفحه خوان ها (Screen readers) محتوای صفحه رو حرف به حرف می خونن بجای کلمه به کلمه.
سایت بی بی سی فارسی به درستی صفت lang رو با مقدار fa در html قرار داده. به همین دلیل این سایت توسط screen reader ها به درستی خونده میشه. برای این ویدیو از نرم افزار رایگان NVDA روی یک virtual machine استفاده کردم.

اردلان نقشینه

من اردلان یک توسعه دهنده وب و مدیر تکنولوژی هستم که از ۸ سالگی وارد عرصه طراحی و توسعه وب شدم و تابحال بیش از یکصد وب سایت و نرم افزار تحت وب برای خودم یا برای مشتریانی از جمله شرکت های Fortune 500 ساختم. در سال ۱۳۹۲ بعد از دریافت مدرک کارشناسیم از دانشگاه صنعتی شریف تهران به شهر کلگری کانادا مهاجرت کردم. این روزها در کنار برنامه نویسی و مدیریت روی مهارت های اقتصادی و کارآفرینیم هم کار می کنم.

نوشته های مرتبط

۳۲ نظر

  1. امیر گفت:

    ببین من بر اساس تجربه خودم به این نتیجه رسیدم که در کل خروجی html اهمیت چندانی برای توسعه دهنده های اینجا نداره … توی شرکت های نرم افزاری که بودم یکجورایی این مسئله بسیار سطح پایین و پیش افتاده بود مطرح کردنش.. توی پروژه های متوسط و بازاری هم اصلا زمان و هزینه پروژه اجازه سمانتیک کردن سایت رو هم نمیده چه برسه قابلیت دسترسی برای معلولین !!!

    • می دونم چی میگی. ولی اگر طراح و برنامه نویس دانش و تجربه در این زمینه داشته باشن سمانتیک نوشتن کد یک صفحه و Accessible کردنش زمان اضافه ای نمی گیره. کلا خیلی از کارهایی که برای Accessible کردن یک سایت باید انجام بدی اگر حین ساخت انجام بشه چندان به زمان و هزینه پروژه اضافه نمی کنه. ولی در پروژه های بزرگ یا پروژه هایی که هدفشون بیشتر افراد با ناتوانی های جسمی هستن باید استاندارد سطح بالاتری رعایت بشه که در اون حالت یه مقدار به هزینه اضافه میشه.

  2. حمید رضا گفت:

    سلام
    مطلب خیلی خوبی بود
    میشه در مورد outline بیشتر توضیح بدی؟چون این ویژگی به ندرت استفاده میشه
    بنظرم این سایت های که مقدار outline رو برابر با ۰ یا none میزارن به خاطر اینکه از css rest استفاده میکنن

    • وقتی یک المان focus میشه باید به نحو واضحی این حالت رو نشون بده. Outline راه خوبیه چون در حالت عادی معمولا المان ها Outline ندارن و وقتی خط جدیدی دور المان ظاهر میشه٬ بیننده سایت به راحتی متوجهش میشه. اگر outline رو برمی داری باید از راه دیگه ای حالت focus رو حتما نشون بدی.

  3. یو سی گفت:

    با سلام و احترام
    آموزش بسیار عالی و یک تلنگر خیلی مهم بود.
    ما همیشه در یو سی تلاش می کردیم نسبت به اندازه فونت نوشته، رنگ آنها، رنگ پس زمینه و… برای استفاده همه نوع چشم، فکر کنیم؛ اما موضوعاتی را شما مطرح کردید که واقعاً هیچ وقت به ذهنمان نرسیده بود.
    خیلی ممنون که زمان می گذارید و دانش روز را منتقل می کنید.

  4. sUni گفت:

    نوشته‌ات واقعاً فکرم رو درگیر کرد.
    بعد از نوشته‌ای که دربارۀ UX توضیحاتی داده بودی، خیلی درباره “تجربۀ کاربر” فکر کردم. حتی حس می‌کردم موضوع مورد علاقمه که تا این حد جذبش شدم! ولی حتی یک بار هم به یک کاربر ناتوان/کم‌توان فکر نکرده بودم!
    وقتی به عنوان ” بررسی دسترسی پذیری (Accessibility) سایت های فارسی ” رسیدم، یهو به خودم اومدم و تازه یادم اومد که دو نفر رو خودم به شخصه می‌شناسم که خیلی زیاد از اینترنت استفاده می‌کنن ولی از لحاظ جسمی کم‌توان هستن و به مشکلاتی که ممکنه داشته باشن فکر کردم…همیشه برام دسترسی یکیشون و اینکه ممکنه استفاده‌اش از سیستم خیلی سخت باشه فکر کرده بودم، ولی چنین موضوعی هیچ‌وقت به ذهنم نرسید؛ حتی بعد از خوندن نوشته‌ات دربارۀ UX.

    خلاصه که فکر بهش بدجوری تکونم داد.
    مایلم قدمی بردارم؛ توسعه‌دهنده، برنامه‌نویس یا طراح وب نیستم، اما شاید بتونم به عنوان یه مترجم، یه قدم کوچیکی بردارم برای جلب نظر بقیه.

    اگر همۀ مردم تو کل دنیا مثل تو فکر می‌کردن، دنیا جای قشنگ‌تری می‌شد.
    مرسی برای نوشتن این مطلب.

  5. جابر گفت:

    سلام، مرسی بابت مطلب،

    واقعا تعجب کردم که گفتی کارمندهای شرکتتون راجب این موضوع نمیدونستن یا فقط اسمش رو شنیده بودن! چون چند وقته اخیر به این موضوع دارن بیشتر توجه میکنن حتی سایت های آموزشی و سایت هایی که تو صنعت وب مطلب میذارن حداقل دو یا سه تا مطلب در این مورد نوشتن

    اینکه تو ایران به این مسائل که اهمیت نمیدن به کنار! حتی خیلی ها راجبش هم نمیدونن! ولی اینکه اونجا هم گفتی تو شرکت که توضیح دادی براشون تازگی داشت واقعا تعجب بر انگیز بود‌! چون

    آمار هایی که دادی خیلی باعث شدن که حتی بیشتر از قبل این موضوع برام مهم باشه، تنها دلیلی که باعث میشه کد نویس یا طراح به مسائلی مثل accessibility و ux اهمیت بدن، فقط و فقط علاقه ای که به کارشون دارن میتونه باعثشش بشه (مثل شما)

    راستش دلم خیلی پره :دی اگر بخوام راجب یه سری مسائل در مورد صنعت وب تو ایران بهت بگم باید یه دوساعتی تو اسکایپ گوش بدی…

    • آره خیلی ها این روزها راجع به Accessibility می نویسن. ولی اینها شاید مثلا ۲-۳ درصد جامعه توسعه دهندگان وب باشن. و این ۲-۳ درصد اشتراک زیادی داره با اون مثلا ۴-۵ درصدی که کلا در اینترنت مطلب منتشر می کنن! اینطور میشه که وقتی مقالات رو می خونی فکر می کنی اکثرا راجع به این موضوع آگاهن ولی وارد بازار که میشی می بینی اصلا اینطور نیست.
      همینه که می بینی اکثر وب سایت ها و وب اپ های جدید هنوز Accessible نیستن.

  6. درود
    مطلب فوق العاده ای بود و مشخصه زمان زیادی هم برای نوشتنش صرف شده، در یه جلمه میتونم بگم توی وب پارسی تاحالا همچین مقاله ای به عمرم ندیده بودم!!! ولی موضوع واقعا جالبیه، من خودم یک بار موسم رو جا گذاشته بودم، اومدم با کیبورد شروع کردم، تونستم مرورگر رو با کلی زحمت باز کنم : / بعد تونستم فقط یه صفحه وب باز کنم، یعنی یه تب، و هرکاری کردم تب رو نتونستم ببندم یا تب جدید باز کنم، و کلا اون روز بیخیال PC شدم :-)، ولی در کل توی ایران کسی به این چیزا توجه نمیکنه و همینکه سایت باز بشه کافیه!! ولی بین همه اینا سایت بانک ملت بهتر بود از همه و فقط تگ lang رو نداشت، به امیدروزی که حداقل شرکتی مثل تاژان وب این چیز ها رو رعایت کنه…
    یاحق

    • ممنونم از نظرت رضا.
      البته نداشتن صفت lang یکی از بزرگترین و ابتدایی ترین ایراداته. ضمنا من در این مقاله من فقط به تعداد خیلی کمی از اشکالات اصلی تر اشاره کردم. اگر تمام اشکالات این سایت ها رو بخوای لیست کنی صدها آیتم میشه.

  7. رضا گفت:

    سلام
    نه تنها این صفت lang سایت ها جدی نگرفتن بلکه وقتی جستجو کردم مطلبی در موردش وجود نداشت اصن میشه شما یکم درموردش توضیح بدین یعنی چطور میتونیم توی سایتمون این صفت رو اضافه کنیم!!
    راستی از تمام زحماتتون بابت مطالب سپاسگزارم ساده و بسیار قابل فهم!

  8. محمد گفت:

    شما برای برنامه نویسی html از چه ادیتوری استفاده میکنید؟ سیستم عاملتون چیه؟ سمت سرور کدوم زبان ها خوبن؟

    • من روی لپ تاپ شرکت از IntelliJ و روی لپ تاپ خودم از Sublime Text 3 استفاده می کنم. از مک بیشتر استفاده می کنم ولی PC هم دارم که سالی چند بار استفاده می کنم.
      سمت سرور الان فقط Node.js کار می کنم ولی این فقط ترجیح شخصیه (و البته علاقه و دلیل خوب برای نیاز به serverside rendering). زبان های خوب دیگه هم هستن. بستگی به پروژه داره.

  9. حمید رضا گفت:

    سلام
    شما که این همه تجربه توی طراحی وب و… داری چرا برای وبلاگ خودت یه قالب اختصاصی طراحی نکردی؟
    این قالبی که روی وبلاگته یه قالب رایگانه به اسم Hueman و توی مخزن وردپرس هم موجوده
    https://fa.wordpress.org/themes/hueman
    فقط یکم قالب شما از لحاظ سایدبار اینا فرق داره و گرنه طرح اصلی یکی هست.
    قسمت انگیسی هم که بسیار ساده هست

    • بله. قبلا قالب سایتم رو از صفر خودم ساخته بودم. چند سال بعد دیدم سرم خیلی شلوغه نمیرسم قالب رو بروزرسانی کنم گفتم از یک قالب خوب آماده استفاده کنم. این قالب رو فارسی کردم و یک سری تغییرات جزیی دادم و همین رو استفاده کردم. چون تغییراتم رو به صورت child theme داده بودم می تونستم قالب رو آپدیت کنم که خوب شد واسم.
      اتفاقا قالب قسمت انگلیسی بیشتر مورد علاقه مه تا اینجا! کلا خیلی وقته که علاقه م به طراحی مینیمال با تایپاگرافی قوی خیلی بیشتر شده. ولی فعلا وقتش نیست که سایت خودم رو تغییری بدم. دارم رو یه سایت جدید کار می کنم که بزودی اینجا راجع بهش صحبت می کنم.

  10. داریوش گفت:

    سلام
    خوشحال میشم، در این نظرسنجی(https://survey.sbu.ac.ir/) شرکت کنید و نظرات خوب و کارشناسی خودتون بگید.

  11. جواد گفت:

    فکر کنم گوگل توی amp هم بعضی از این موارد رو در نظر میگیره

  12. mahdi-prgrmmr گفت:

    سلام
    من دانشجوی مهندسی کامپیوترم و یکی از دغدغه هایی که دارم یادگیری زبان انگلیسی هست که برا یک برنامه نویس بشدت ضروری هست اما متاسفانه هنوز نتونستم یاد بگیرم
    امکان داره در موردش توضیح جامع و کاملی ارایه بدهید( منابع و راهکار )
    با تشکر

  13. محمد گفت:

    سلام
    یه سوال داشتم:
    من به نرم افزار های ۳d ، طراحی وب (front end) , برنامه نویسی c++ و افترافکت و پریمیر علاقه دارم و تا یک حدی توی همه این زمینه ها کار کردم ولی الآن که دانشجو شدم بالاخره باید یک حوزه رو انتخاب کنم تا به صورت تخصصی توش کار کنم. اما موندم کدوم رو انتخاب کنم؟!
    لطفا راهنمایی کنید ، اصلا کار درستی بوده توی این همه حوزه مختلف کار کردن؟ البته قبلا به دید حرفه به اینا نگاه نمیکردم و فقط به خاطر علاقه بوده.
    به نظرتون همشون رو به صورت آماتور ادامه بدم و در یک حوزه بیشتر کار کنم یا وقتی یکی رو انتخاب کردم بقیه رو کلا تعطیل کنم؟
    اصلا چطوری باید زمینه اصلی کاری رو پیدا کرد؟ بدجوری توی انتخاب گیر کردم 🙁

    • من خودم هم خیلی چیزها همینطوری در حد آماتور امتحان کردم و این خیلی فایده ها واسم داشته. باعث چیزهای جدید رو راحت تر یاد بگیرم و با افرادی که تخصص های متفاوت دارن خیلی بهتر ارتباط برقرار کنم و کار کنم. توصیه م اینه که همیشه دنبال علاقه هات برو٬ ولی یه زمینه رو هم انتخاب کن که بیشتر از همه توش پیش بری٬ مثل توسعه front-end مثلا.

  14. نام گفت:

    خیلی از وب سایت ها حتی برای افراد سالم هم چندان بهینه نیستند ، نمونش صفحه ی پرداخت الکترونیکیِ بانک ها که دقیقا همون صفحه ی ای که برای وب ساختند رو روی موبایل هم نمایش میده که باعث میشه وارد کردن اطلاعات حساب به شکل ترسناکی سخت باشه ؛ یا همین وب سایت خودِ شما ، وقتی که داشتم مطلب رو می خوندم و الان که دارم این کامنت رو می نویسم هر ۲۵ ثانیه یکبار می ره توی یک سایت دیگه … بچه ها ازتون خواهش می کنم به حرفای آقای نقشینه گوش بدید ، دسترس پذیر طراحی کنید دیگه …

    • درسته. کلا به زمینه UX خیلی در ایران کم لطفی شده٬ مثل قدیم اینجا.

      اینکه میرید به یه سایت دیگه احتمالا نشونه یه ویروس یا add-on ناخواسته ست که روی کامپیوترتون نصب شده.

  15. حمید گفت:

    فکر میکنم وب شما خیلی بیشتر از چیزی که انتظار میره برای یه آماتور مث من و حتی حرفه ای های طراحی وب مفیده!
    اعتقاد دارم نشر چیزهای خوب عمر آدمو زیاد میکنه! به شخصه وقتی یه چیز خوبی به دیگران هدیه میدم خیلی خوشحال تر میشم تا اینکه بخوام منفعت طلبانه فقط خودم ازش استفاده کنم. اینطوری از خدا عمر میگیرم 🙂
    اَی زنده باد اردلان.

  16. sajjad hoseinian گفت:

    سلام برای من یک سوال پیش اومده شما برای اپلیکیشن های تحت وب از چه زبانی بیشتر اوقات استفاده می کنید ممنونم.

  17. حامد گفت:

    بررسی خیلی دقیقی بود. مرسی اردلان جان

  18. امین ضیاغم گفت:

    با سلام آقا اردلان گل.

    آقا توی اینستاگرام دیدم که قراره آخرای پائیز تشریف بیارید ایران و دوره ای برگزار کنید. آیا امکانش هست که در صورتی که مقدمات و شرایط حضورتون توی اهواز برای برگزاری سیمیناری فراهم بشه، تشریف بیارید؟
    تیم ما کاملا آماده همکاری با شما رو جهت برگزاری سمینار مورد نظرتون داره.

    در صورتی که مقدور می باشد، علاقه مندان اهوازی را بی نصیب نگذارید.

    با تشکر
    امین ضیاغم