دسترسی

بهبود دسترسی برای صفحات وب

Alice Boxhall

Dave Gash

Meggin Kearney

Rob Dodson

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

خلاصه

• بیاموزید که دسترسی به چه معناست و چگونه در توسعه وب کاربرد دارد.
• یاد بگیرید که چگونه وب سایت ها را برای همه قابل دسترس و قابل استفاده کنید.
• بیاموزید که چگونه دسترسی اولیه را با کمترین تأثیر توسعه اضافه کنید.
• بیاموزید که چه ویژگی های HTML در دسترس هستند و چگونه از آنها برای بهبود دسترسی استفاده کنید.
• درباره تکنیک‌های پیشرفته دسترسی برای ایجاد تجارب دسترسی صیقلی بیاموزید.

درک دسترسی، دامنه و تأثیر آن می تواند شما را به یک توسعه دهنده وب بهتر تبدیل کند. این راهنما به شما کمک می کند تا بفهمید چگونه می توانید وب سایت های خود را برای همه قابل دسترس و قابل استفاده کنید.

املای «دسترس‌پذیری» ممکن است دشوار باشد، اما انجام آن لازم نیست دشوار باشد. در این راهنما، می‌بینید که چگونه می‌توانید با کمترین تلاش، چند برد آسان به دست آورید تا به بهبود دسترسی کمک کنید، چگونه می‌توانید از آنچه در HTML تعبیه شده است برای ایجاد رابط‌های قابل دسترس‌تر و قوی‌تر استفاده کنید، و چگونه از برخی تکنیک‌های پیشرفته برای ایجاد تجربیات قابل دسترس صیقلی استفاده کنید. .

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

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

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

دسترسی چیست؟

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

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

به عنوان مثال، اگرچه ما تمایل داریم بحث خود را در مورد دسترسی به کاربرانی با مشکلات فیزیکی متمرکز کنیم، اما همه می‌توانیم با تجربه استفاده از رابطی که به دلایل دیگر در دسترس ما نیست ارتباط برقرار کنیم. آیا تا به حال در استفاده از سایت دسکتاپ در تلفن همراه با مشکل مواجه شده اید یا پیام "این محتوا در منطقه شما موجود نیست" را مشاهده کرده اید یا نتوانسته اید منوی آشنا را در رایانه لوحی پیدا کنید؟ اینها همه مسائل دسترسی هستند.

همانطور که بیشتر یاد می گیرید، متوجه خواهید شد که پرداختن به مسائل دسترسی به این مفهوم گسترده تر و کلی تر، تقریبا همیشه تجربه کاربری را برای همه بهبود می بخشد. بیایید به یک مثال نگاه کنیم:

این فرم دارای چندین مشکل دسترسی است.

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

حالا بیایید دسته دسترسی خود را تکان دهیم و فرم را با آن مشکلات حل شده ببینیم. ما می‌خواهیم متن را تیره‌تر کنیم، طرح را طوری تغییر دهیم که برچسب‌ها به چیزهایی که برچسب‌گذاری می‌کنند نزدیک شوند، و برچسب را برای مرتبط شدن با کادر انتخاب اصلاح کنیم تا بتوانید با کلیک کردن روی برچسب، آن را نیز تغییر دهید.

کدام را ترجیح می دهید استفاده کنید؟ اگر گفتید "نسخه در دسترس"، در مسیر درک یک فرض اصلی این راهنما هستید. اغلب، چیزی که یک مسدودکننده کامل برای چند کاربر است، برای بسیاری دیگر نیز دردسرساز است، بنابراین با رفع مشکل دسترسی، تجربه را برای همه بهبود می‌بخشید.

دستورالعمل های دسترسی به محتوای وب

در سراسر این راهنما، ما به دستورالعمل‌های دسترسی به محتوای وب (WCAG) 2.0 ، مجموعه‌ای از دستورالعمل‌ها و بهترین شیوه‌ها که توسط متخصصان دسترس‌پذیری گردآوری شده‌اند، اشاره می‌کنیم تا به معنای «دسترسی» به روشی روشمند بپردازیم.

WCAG حول چهار اصل سازماندهی شده است که اغلب با نام اختصاری POUR نامیده می شود:

• قابل درک : آیا کاربران می توانند محتوا را درک کنند؟ این به ما کمک می کند در نظر داشته باشیم که فقط به این دلیل که چیزی با یک حس قابل درک است، مانند بینایی، به این معنی نیست که همه کاربران می توانند آن را درک کنند.

• قابل اجرا : آیا کاربران می توانند از مؤلفه های رابط کاربری استفاده کنند و محتوا را هدایت کنند؟ به عنوان مثال، چیزی که نیاز به تعامل شناور دارد نمی‌تواند توسط کسی که نمی‌تواند از ماوس یا صفحه لمسی استفاده کند، کار کند.

• قابل درک : آیا کاربران می توانند محتوا را درک کنند؟ آیا کاربران می توانند رابط کاربری را درک کنند و آیا به اندازه کافی سازگار است تا از سردرگمی جلوگیری شود؟

• قوی : آیا محتوا می تواند توسط طیف گسترده ای از عوامل کاربر (مرورگرها) مصرف شود؟ آیا با فناوری کمکی کار می کند؟

در حالی که WCAG یک نمای کلی جامع از معنای در دسترس بودن محتوا ارائه می دهد، اما می تواند کمی سخت باشد. برای کمک به کاهش این موضوع، گروه WebAIM (دسترسی به وب در ذهن) دستورالعمل های WCAG را در یک چک لیست آسان برای دنبال کردن، به طور خاص برای محتوای وب، تقطیر کرده است.

چک لیست WebAIM می‌تواند خلاصه‌ای کوتاه و سطح بالا از آنچه باید پیاده‌سازی کنید به شما ارائه دهد، در حالی که در صورت نیاز به تعریف گسترده، به مشخصات WCAG زیربنایی پیوند می‌دهد.

با در دست داشتن این ابزار، می توانید جهت کار دسترسی خود را ترسیم کنید و مطمئن باشید که تا زمانی که پروژه شما معیارهای ذکر شده را برآورده می کند، کاربران شما باید تجربه مثبتی در دسترسی به محتوای شما داشته باشند.

درک تنوع کاربران

هنگام یادگیری در مورد دسترسی، به درک طیف متنوع کاربران در جهان و انواع موضوعات دسترسی که بر آنها تأثیر می گذارد کمک می کند. برای توضیح بیشتر، در اینجا یک جلسه پرسش/پاسخ آموزنده با ویکتور تساران، مدیر برنامه فنی گوگل، که کاملاً نابینا است، وجود دارد.

در گوگل چه کار می کنید؟

اینجا در Google وظیفه من این است که اطمینان حاصل کنم که محصولات ما برای همه کاربران متنوع ما، صرف نظر از نقص یا توانایی، کار می کنند.

کاربران چه نوع آسیب هایی دارند؟

وقتی به انواع آسیب‌هایی فکر می‌کنیم که دسترسی شخصی به محتوای ما را دشوار می‌کند، بسیاری از مردم بلافاصله کاربر نابینایی مانند من را به تصویر می‌کشند. و درست است، این نقص واقعاً می تواند استفاده از بسیاری از وب سایت ها را خسته کننده یا حتی غیرممکن کند.

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

بیایید آن ها را یکی یکی مرور کنیم. آیا می توانید چند نمونه از اختلالات بینایی را ذکر کنید؟

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

در حال حاضر، واقعاً غیرعادی است که به معنای واقعی کلمه بینایی نداشته باشید، اما با این وجود، احتمال زیادی وجود دارد که حداقل یک نفر را بشناسید یا ملاقات کرده باشید که اصلاً نمی تواند ببیند. با این حال، تعداد بسیار بیشتری از کاربران کم دید نیز وجود دارد.

این طیف وسیعی است، از فردی مانند همسرم که هیچ قرنیه چشمی ندارد - بنابراین در حالی که اساساً می تواند چیزهایی را ببیند که در خواندن چاپ مشکل دارد و از نظر قانونی نابینا است - تا کسی که ممکن است بینایی و نیازهای ضعیفی داشته باشد. استفاده از عینک طبی بسیار قوی

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

بسیاری از کاربران حتی از ترکیبی از اینها استفاده می کنند، مانند دوست من لورا که از ترکیب حالت کنتراست بالا، زوم مرورگر و تبدیل متن به گفتار استفاده می کند.

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

اوه، و نباید فراموش کنم که به افراد با دید رنگی ضعیف اشاره کنم - حدود 9٪ از مردان به نوعی کمبود دید رنگی دارند! به علاوه حدود 1٪ از زنان. آنها ممکن است در تشخیص قرمز و سبز یا زرد و آبی مشکل داشته باشند. دفعه بعد که اعتبار سنجی فرم را طراحی کردید به آن فکر کنید.

در مورد اختلالات حرکتی چطور؟

بله، اختلالات حرکتی، یا اختلالات مهارت. این گروه از کسانی که ترجیح می‌دهند از ماوس استفاده نکنند، چون ممکن است مقداری RSI یا چیز دیگری داشته‌اند و آن را دردناک بدانند، تا افرادی که ممکن است از نظر جسمی فلج باشند و دامنه حرکتی محدودی برای قسمت‌های خاصی از بدنشان دارند را شامل می‌شود. بدن

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

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

عالی، بیایید در مورد اختلالات شنوایی صحبت کنیم.

این گروه می تواند از ناشنوایان عمیق تا کم شنوا متغیر باشد. و مانند بینایی، شنوایی ما با افزایش سن کاهش می یابد. بسیاری از ما از وسایل معمولی مانند سمعک برای کمک به ما استفاده می کنیم.

برای کاربران کم شنوا باید مطمئن شویم که به صدا متکی نیستیم، بنابراین مطمئن شوید که از مواردی مانند زیرنویس‌ها و رونوشت‌های ویدیویی استفاده می‌کنید و اگر صدا بخشی از رابط است، نوعی جایگزین ارائه کنید.

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

بسیار خوب، ممکن است کمی در مورد اختلالات شناختی توضیح دهید؟

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

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

بنابراین، چگونه می‌توانید نظر خود را در مورد دسترسی خلاصه کنید؟

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

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

بیایید نگاهی به چند نمونه واقعی از اختلالات دسترسی بیندازیم و ببینیم که آنها در کدام دسته‌ها و انواع قرار می‌گیرند. توجه داشته باشید که برخی از اختلالات ممکن است در بیش از یک دسته یا نوع قرار گیرند.

آسیب فشاری مکرر: به عنوان مثال، سندرم تونل کارپ، آرنج تنیس بازان، انگشت ماشه ای

مراحل بعدی

ما قبلاً مقدار زیادی از زمین را پوشش داده ایم! شما خوانده اید در مورد

• دسترسی چیست و چرا برای همه مهم است
• WCAG و چک لیست دسترسی WebAIM
• انواع مختلفی از اختلالات را باید در نظر بگیرید

برای بقیه راهنما، به جنبه های عملی ایجاد وب سایت های قابل دسترس می پردازیم. ما این تلاش را حول سه موضوع اصلی سازماندهی خواهیم کرد:

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

• معناشناسی : ما مطمئن خواهیم شد که رابط کاربری خود را به شیوه ای قوی بیان می کنیم که با انواع فناوری های کمکی کار می کند.

• استایل : ما طراحی بصری را در نظر خواهیم گرفت و به چند تکنیک برای ایجاد عناصر بصری رابط تا حد امکان منعطف و قابل استفاده نگاه خواهیم کرد.

هر یک از این موضوعات می تواند یک دوره کامل را پر کند، بنابراین ما تمام جنبه های ایجاد وب سایت های قابل دسترس را پوشش نمی دهیم. با این حال، ما اطلاعات کافی برای شروع به شما می دهیم و مکان های خوبی را به شما معرفی می کنیم که می توانید در مورد هر موضوع اطلاعات بیشتری کسب کنید.