هنگامی که برای اولین بار یادگیری کد نویسی برای طراحی سایت را شروع کرده بودم، فکر این که باید تمام موارد درباره زبان برنامه نویسی، سیستم مدیریت محتوا و به ویژه استانداردهای دسترسی به وب را بدانم، برای من ترسناک بود. با وجود اینکه دسترسی به وب دارای پیامدهای اخلاقی و حقوقی زیادی است، اما در طراحی سایت و برنامه نویسی خیلی مورد بحث و توجه قرار نگرفته است. به طوری که وقتی صحبت از نوشتن کدی بود که می بایست با استانداردهای دستیابی به وب تطابق داشته باشد، حتی برای من سخت بود که بدانم از کجا باید شروع کنم.
با گذشت زمان و با تحقیق متوجه شدم که گروه هایی با هدف دسترسی به وب برای همه افراد وجود دارد. علاوه بر این، متوجه شدم که برای نوشتن کدی که مطابق با استانداردها باشد، لازم نیست تمام الزامات دسترسی به وب را به خاطر بسپارم و به نظر می رسید که جستجو برای پاسخ، به جای حفظ کردن آن، بخشی طبیعی از روند توسعه وب است. بنابراین، چه یک توسعه دهنده با تجربه باشید یا یک تازه کار، می توانید کدی بنویسید که قابلیت دسترسی به وب را برای همه افراد فراهم کند.
هدف من در این مقاله معرفی کاملی از مفاهیم مهم پیرامون قابلیت دسترسی به وب است که امیدوارم به تمام توسعه دهندگان وب در این زمینه کمک کند تا بتوانید از آن در برنامه کد نویسی خود استفاده کنید. پس تا انتها با من همراه باشید.
آنچه در ادامه می خوانید:
- دسترسی به وب چیست؟
- اجرای قابلیت دسترسی به وب
- دستورالعمل های دسترسی به وب چیست؟
- چگونه می توانید وب سایت های قابل دسترسی ایجاد کنید، حتی اگر تازه کار هستید؟
- طراحان و توسعه دهندگان هنگام ساخت وب سایت و برنامه های وب چه موانع دسترسی را باید در نظر داشته باشند؟
- چگونه می توانید کد خود را برای مشکلات دسترسی به وب بررسی کنید؟
- از کجا می توانید بیشتر یاد بگیرید؟
دسترسی به وب (Web Accessibility) چیست؟
دسترسی به وب باعث می شود تا همه افراد حتی با داشتن ناتوانی های جسمی بتوانند محتوای یک وب سایت را درک کرده و با آن کار کنند. بنابراین، بخش اصلی دسترسی به وب برای افرادی با ناتوانی های جسمی دائمی یا موقت است. موارد زیادی وجود دارد که طراحان و توسعه دهندگان وب باید هنگام ایجاد رابط کاربری و تجربه کاربری به آن توجه کنند. همه موارد، از رمزگشایی متن برای خوانندگان کم بینا گرفته تا تمرکز محتوایی برای کاربران دارای اختلالات حرکتی که عمدتا از صفحه کلید استفاده می کنند همگی باید مورد توجه قرار گیرد.
تیم بنرز لی، مدیر W3C و مخترع شبکه جهانی وب می گوید: ” قدرت وب در جهانی بودن آن است. دسترسی همه به آن بدون توجه به معلولیت یک جنبه ضروری است. “
اجزای قابلیت دسترسی به وب
برای درک بهتر دسترسی وب بیایید ابتدا کمی بیشتر در خصوص محتوای وب سایت صحبت کنیم. همانطور که می دانید محتوای وب تمامی اطلاعات موجود در یک صفحه مانند متن، عکس، صدا و فیلم است. جالب اینجاست که کدها و نشانه گذاری کدها هستند که ساختار و نمایش یک محتوا و ارتباط با کاربر را ایجاد می کنند. بنابراین به نوعی جزئی از محتوای وب سایت محسوب می شوند.
کد نوشته شده در ابتدا باید توسط مرورگر وب تفسیر شود تا محتوای وب سایت برای افراد قابل دسترسی باشد. در مرحله بعد این محتوا ها باید توسط سایر فناوری ها تفسیر شوند تا افراد با ناتوانی جسمی هم بتوانند به آن دسترسی داشته باشند. این فناوری ها شامل نرم افزار یا تجهیزاتی مانند صفحه خوان و نرم افزار تشخیص صدا است که به اضافه کردن قابلیت های صوتی به متن، دستگاه های ردیابی چشم، ذره بین صفحه و سایر موارد کمک می کنند تا یک وب سایت برای افراد با ناتوانی جسمی هم قابل دسترسی باشد.
دستورالعمل های دسترسی به وب چیست؟
بیایید به تاریخچه نحوه ایجاد دستورالعمل های دسترسی به وب و چگونگی رشد و توسعه آن نگاهی بیندازیم. کنسرسیوم (مجموعه ای از سازمان ها، انجمن ها و شرکت ها) شبکه جهانی وب که عموماً به آن W3C شناخته می شود، جامعه ای است که استانداردهای بین المللی وب را تعیین می کند. در واقع این کنسرسیوم یک نیروی محرک برای توسعه استانداردهای دستیابی به وب، حمایت از جامعه وب با در اختیار گذاشتن اطلاعات و مطالب و استقبال از شرکت کنندگان برای پشتیبانی از قابلیت دسترسی وب است.
در سال 1999، این سازمان راهنمایی های دستیابی به وب را برای توسعه دهندگان، طراحان و سازندگان محتوای وب منتشر کرد. دستورالعمل های دسترسی به محتوای وب به ویژه در نسخه دوم آن ها آمده و دارای چهار اصل قابل درک، قابل اجرا، قابل فهم و قوی بودن است.
- دستورالعمل های قابل درک برای شناسایی اجزای مختلف صفحه نیاز است.
- دستورالعمل های قابل اجرا، همه چیز در مورد اطمینان از قابل استفاده بودن اجزایی مانند پیمایش و جستجو در وب سایت است.
- بخش سوم این دستورالعمل در مورد قابل درک ساختن دستورالعمل ها، توضیحات تصویر و موارد مشابه است.
- سرانجام، دستورالعمل ها نشان می دهند که محتوای وب باید قوی باشد، به این معنی که قابل کار در بخش های مختلف کاربری و فناوری باشد.
این دستورالعمل ها در واقع مجموعه ای از توسعه دهندگان و طراحان استاندارد هستند که برای اطمینان از ایجاد محتوای وب قابل دسترسی می‌توان به آن ها مراجعه کرد. بنابراین، آن ها یک منبع باورنکردنی در این صنعت محسوب می شوند.
در حالی که W3C در سطح بین المللی فعالیت می کند اما بخشی از قوانین قابلیت دسترسی به وب در آن مربوط به ایالات متحده است. قانون معلولیت های آمریکا در سال 1990 برای حمایت از معلولین به قانون مدنی تبدیل شد که بخشی از آن دسترسی یکسان همه افراد به سایت ها را شامل می شود. علاوه بر قانون معلولیت آمریکا با اصلاحاتی که در قانون توانبخشی در سال 1998 انجام شد، می بایست دسترسی راحت به وب سایت های دولت و آژانس های فدرال برای همه فراهم باشد.
چگونه می توانید وب سایت های قابل دسترسی ایجاد کنید، حتی اگر تازه کار هستید؟
اگر به تازگی وارد دنیای طراحی سایت شده اید، چگونه می توانید یک وب سایت با قابلیت دسترسی برای افراد دارای ناتوانی جسمی راه اندازی کنید؟ در پاسخ با این سوال باید گفت که طراحی یک سایت که برای همه قابل دسترس باشد، حتی اگر یه توسعه دهنده تازه کار هم باشید با یادگیری نحوه کدگذاری و طراحی قابل اجرا است. در ادامه نکات مربوط به این کار را با هم بررسی می کنیم.
-
از زبان شفاف استفاده کنید
در حقیقت، یک قسمت از روش ایجاد دسترسی به وب به هیچ عنوان نیاز به دانستن نحوه کدگذاری ندارد. نوشتن بدون پیش فرض، کلید استفاده از زبان شفاف است. به عنوان مثال، به جای استفاده از مخفف یا اختصار، لغات را به صورت کامل بنویسید. به عنوان مثال، به جای Mar از کلمه March استفاده کنید. این کار برای پردازش دقیق اطلاعات سایت شما توسط خوانندگان مفید است.میانبر نوشتاری دیگری که باید از آن جلوگیری کرد، خط تیره است. یعنی به جای نوشتن 3-4، 3 الی 4 بنویسید. زبان شفاف برای دسترسی به برچسب های نوشتاری فرم ها، متن برای دکمه ها و سایر دستورالعمل ها نیز مهم است.
-
استفاده از HTML معنایی (HYPERTEXT brand language)
شما همچنین می توانید با نوشتن HTML معنایی دسترسی به سایت را ایجاد کنید. نوشتن HTML معنایی، یعنی از بیشترین عناصر توصیفی و مناسب در رابطه با محتوا استفاده کنید. این موضوع هنگام کد نویسی اهمیت دارد چرا که عناصر توصیفی باعث می شود تا تفسیر آن ها برای خوانندگان و سایر فناوری ها راحت تر باشد.
به عنوان مثال، اگرچه ممکن است هنگام کد نویسی عبارت “div” عملکرد خود را داشته باشد اما عبارت “h1” توصیفی تر بوده، بنابراین، کار برای خوانندگان صفحه نمایش و سایر فناوری های تفسیر آسان تر خواهد بود.
تصویر بالا یک مثال از نوشتن HTML معنایی در سمت راست و غیر معنایی در سمت چپ را نشان می دهد. هر دو نسخه یک محتوا را به صفحه وب ارائه می دهند. با این وجود نوشته سمت راست نسبت به چپ بیشتر معنایی و توصیفی است و خواننده صفحه قادر خواهد بود تا عنوان، محتوای اصلی، زیرعنوان و وجود دکمه را تشخیص دهد. استفاده از عناصر توصیفی، قسمت های قابل اجرا در محتوا را واضح تر می کند. به عبارتی در مثال بالا، HTML معنایی روشن می کند که یک دکمه در صفحه وجود دارد.
-
از متن توصیفی ALT استفاده کنید
هنگام نوشتن HTML، ویژگی های احتمالی عناصر را که به فناوری های دیگر امکان تفسیر صفحه را می دهد، به خاطر بسپارید. چرا که یکی از راه های کمک به خوانندگان ارائه توضیحات متنی در صفحه نمایش است. به عنوان مثال، اگر قرار است تصویری در وب سایت قرار داده شود، هنگام کد نویسی عبارت “alt” را که مربوط به توصیف تصویر در عنصر “img” است، را به کار ببرید.
به عنوان مثال HTML با استفاده از متن ALT برای یک تصویر
در صورت امکان، می توانید توصیف بیشتری داشته باشید، مانند:
به این ترتیب، صفحه خوان می تواند اطلاعات موجود در متن alt را به کاربری منتقل کند که نمی تواند تصویر را در حالت عادی تشخیص دهد. در صورت نیاز هم می توانید توصیفات بیشتری به تصویر اضافه کنید. شما همچنین با استفاده از برنامه های کاربردی غنی اینترنت (ARIA) می توانید صفحه خود را بیشتر در دسترس قرار دهید. برنامه های اینترنتی غنی در دسترس برای توصیف وضعیت، نقش، نوع عنصر و موارد دیگر که با HTML پایه در دسترس نیستند مفید هستند.
متن alt با توصیف بیشتر می تواند تجربه بهتری در کاربر ایجاد کند.
یک مثال HTML با استفاده از ARIA برای یک دکمه
در مثال بالا از علامت گذاری ARIA، در حال فشار دادن (press) و برچسب زدن (label) استفاده شده است. تایپ عبارت aria-pressed=true نشان می‌دهد که دکمه در حال فشار دادن یا روشن است. به این ترتیب صفحه خوان می تواند حالت “دکمه سویچ فشار داده شود” را بخواند. به عبارتی aria تفسیر ساده تری را برای صفحه خوان ایجاد می کند. برای بررسی دقیق تر راهنمایی های WAI در خصوص نوشتن روش های ARIA را نگاه کنید.
طراحان و توسعه دهندگان هنگام ساخت وب سایت و برنامه های وب چه موانع دسترسی را باید در نظر داشته باشند؟
یک میلیارد نفر در سطح جهان هستند که هر یک نوعی معلولیت را تجربه می کنند. با هدف فراگیر بودن، طراحان و توسعه دهندگان برای ایجاد دسترسی به وب اختلالات را از نظر شناختی، بینایی، حرکتی و شنوایی در نظر می گیرند. همچنین توجه به این نکته هم ضروری است که ناتوانی جسمی می تواند دائمی، موقعیتی یا موقت باشد.
روش های کاهش بار شناختی به طور کلی برای اختلالات شناختی مفید هستند. یک نوع اختلال شناختی، نارسایی در خواندن است. طبق مقاله Bureau of Accessibility نحوه ایجاد محتوا و طرح های قابل دسترسی برای افراد مبتلا به نارساخوانی، استفاده از قلم های ساده، به حداقل رساندن تزئین متن و داشتن فضای کافی بین پاراگراف ها و خطوط است که می تواند به خواننده در پردازش اطلاعات کمک کند. این تکنیک ها به طور کلی برای سایر اختلالات شناختی نیز مفید هستند.
هنگام طراحی برای افراد دارای نقص بینایی، دانستن نحوه استفاده از رنگ و متن بسیار مهم است. متن باید توسط خوانندگان صفحه قابل تشخیص بوده و بین پیش زمینه و پس زمینه تضاد قابل توجهی وجود داشته باشد و رنگ های به کار رفته باید قوی باشند اما نه آنقدر قوی و تند که در انتقال اطلاعات مهم مشکل ایجاد شود.
فراد دارای اختلالات حرکتی و بینایی ممکن است فقط متکی به صفحه کلید برای پیمایش در یک صفحه وب باشند. برای اطمینان از دسترسی به صفحه کلید، به کاربر اجازه دهید که سایت را با استفاده از دکمه تب مرور کند. هنگام پیمایش، عنصری که نقطه تمرکز است باید برای کاربر روشن باشد. به عنوان مثال، کاربر باید بتواند از دکمه تب برای رفتن از یک فرم به فرم دیگر استفاده کند. حین انجام این کار، باید برای کاربر مشخص باشد که در حال حاضر از کدام فرم استفاده می کند و در نهایت می تواند آن را ارسال کند.
زیرنویس هم روش اصلی دسترسی وب برای کسانی که دارای کم شنوایی هستند.
چگونه می توانید کد خود را برای مشکلات دسترسی به وب بررسی کنید؟
ما به عنوان توسعه دهنده وب می توانیم تمام موارد بالا را رعایت کرده و کد های خود را به صورت معنایی بنویسیم، از ARIA استفاده کنیم و موارد بسیار دیگر، اما تا زمانی که سایت را آزمایش نکنیم نمی دانیم سایت چگونه برای کاربران مورد نظر ما کار می کند. برای آزمایش قابلیت دسترسی سایت خود، کاری که باید انجام دهید استفاده از صفحه خوان برای تست کد های شما است. هر مرورگر و یا سیستم عامل باید یک صفحه خوان پیش فرض داشته باشد که شامل VoiceOver در Safari ، NVDA در فایرفاکس ، JAWS در اینترنت اکسپلورر و ChromeVox برای کروم است.
روش دیگر برای بررسی کد به منظور مشکلات دسترسی به وب فقط استفاده از صفحه کلید است. این شامل اطمینان از متمرکز بودن عناصر صحیح است که هنگام مرور صفحه می تواند قابل استفاده باشند. خوشبختانه، ابزارهایی مانند موارد زیر برای کمک به شما در طراحی و توسعه وب با قابلیت دسترسی برای همه وجود دارد.
ابزارهای دسترسی رایگان به وب
- یک پالت رنگی انتخاب کنید که با ابزار Google’s Material.io tool قابل دسترسی باشد.
- صفحه وب خود را با color contrast validator رنگ امتحان کنید.
- WAVE یک جستجوگر دسترسی شگفت انگیز است که توسط WebAIM برای تعیین انطباق با قابلیت دسترسی طراحی شده است
- البته لیستی طولانی تر از ابزارهای توسعه دهنده برای ایجاد یک وب سایت با قابلیت دسترسی توسط Jake Tracey وجود دارد.
مروری بر نکات ایجاد دسترسی به وب برای مبتدیان
-
زبان شفاف
مخفف و اختصار کلمات را بررسی کرده و از گذاشتن خط تیره اجتناب کنید.
-
HTML معنایی
اطمینان حاصل کنید که عناصر HTML با محتوای نوشته شده مطابقت دارند و ساختار محتوا را به خوبی ارائه می دهند.
-
گزینه های متن
مطمئن شوید که تصاویر موجود در صفحه وب دارای توصیفات لازم هستند.
-
استفاده از جستجوگر دسترسی
با استفاده از یک جستجوگر قابلیت دسترسی مانند WAVE ، قابلیت دسترسی به صفحه وب خود را بررسی کنید.
-
تست با صفحه خوان
همانطور که گفتیم بعد از تمام موارد بالا صفحه وب سایت خود را به وسیله یک صفحه خوان مورد آزمایش قرار دهید.
-
بزرگنمایی
صفحه وب سایت خود را بزرگ کنید تا ببینید عملکردهای مورد نیاز همچنان هم قابل انجام است و محتوا همچنان به خوبی در صفحه های دستگاه های مختلف نشان داده می شود یا خیر.
این نکات گفته شده را به عنوان یک توسعه دهنده تازه کار در نظر داشته باشید تا بعد از مدتی برای شما تبدیل به یک عادت شود. اگر هم برای فعالیت گسترده تر آماده هستید، می توانید از خود WebAIM یا راهنمای دسترسی به کنسرسیوم وب (Web Consortium’s) استفاده کنید.
از کجا می توانید بیشتر یاد بگیرید؟
متأسفانه، به توسعه دهندگان کمی در خصوص استانداردهای دسترسی به وب یا پیامدهای اخلاقی و قانونی بی توجهی به آن ها آموزش داده می‌شود. بنابراین اگر تازه کار هستید، ممکن است مجبور شوید برخی از تحقیقات خود را انجام دهید که در اینجا چند منبع برای دسترسی وجود دارد:
-
اسناد توسعه دهنده قابلیت دسترسی گوگل (Google’s Accessibility Developer Docs)
-
اسناد دسترسی خاص (React-specific Accessibility Docs)
-
جعبه ابزارهای بارگیری مایکروسافت (Microsoft’s downloadable inclusivity Toolkits)
-
کتاب طراحی فراگیر برای دنیای دیجیتال ریجن گیلبرت (UX Designer Regine Gilbert’s book Inclusive Design for a Digital World)
-
مشاور انطباق وب سایت ADA کریس ریونبرگ (Compliance expert Kris Rivenburgh) کسی که انطباق ADA وب را پوشش می دهد.
البته این را بدانید که هیچ سایتی با توجه به تغییر اولیت ها و مهلت های تعیین شده هرگز کامل نخواهد بود. با این حال، شما این قدرت را دارید که به فکر کاربر خود باشید و می توانید قدم هایی برای درک و کارکرد بهتر وب سایت خود برای همه بردارید.
منبع: skillcrush.com
آخرین دیدگاه‌ها