چگونه وب سایت قابل دسترسی یک موسسه خیریه برجسته ساخته شده است

محتوا

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

RNIB یک موسسه خیریه پیشرو است که تقریباً به دو میلیون نفر از افراد مبتلا به کم بینایی در انگلیس اطلاعات و پشتیبانی ارائه می دهد. آژانس دیجیتال Precedent در یک مناقصه برای ایجاد سایت جدیدی برای خیریه برنده شد. این تیم برای ایجاد سایتی کاملاً در دسترس و کارآمد که برای کاربران با سطوح مختلف ضعف بینایی مناسب است ، رویکرد «فرم زیر عملکرد» را ایجاد کرد.ما با تیم صحبت کردیم تا بدانیم که آنها چگونه این کار را انجام داده اند ...

خلاصه اصلی چه بود؟

آدام الستون: برای طراحی و ساخت یک وب سایت پاسخگو در دروپال که بالاترین استانداردهای دسترسی را داشته باشد و RNIB را قادر به ارائه خدمات آنلاین بیشتر و تجربه آنلاین بهتر کند.

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

چگونه پروژه را شروع کردید؟

اد ریچاردز: اکثر بازدیدکنندگان سایت دارای سطح مختلفی از مشکلات مربوط به بینایی هستند ، بنابراین در مراحل استراتژی و UX پروژه ما با مشاور دسترسی Léonie Watson کار کردیم. این امر ما را قادر می سازد تا الزامات ، بیانیه های آزمون و پیاده سازی آموزش را تدوین کنیم.

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

چگونه به نمونه سازی نزدیک شدید؟

ER: وقتی رویکرد مدولار را فرموله کردیم ، توانستیم نمونه اولیه همه ماژول ها را کاغذ کنیم. انباشته شدن ماژول ها این کار را بسیار کارآمد کرده و حتی ما را قادر می سازد تا نمونه اولیه نمای موبایل ، تبلت و دسک تاپ را کاغذ بیاوریم ، که با تولید همه ماژول ها به عنوان اشیا Smart هوشمند به نحوه کار ما در فتوشاپ کمک می کند.

BP: سپس یک نمونه اولیه تعاملی ایجاد کردیم. در ابتدا ما از این برای آزمایش ماژول های پاسخگو استفاده می کردیم ، اما سپس به عنوان یک راهنمای سبک تعاملی برای تست قابلیت دسترسی استفاده شد. سرانجام به مرجعی برای ادغام دروپال تبدیل شد.

AE: راهنمای سبک تعاملی در هنگام ادغام دروپال واقعاً خوب کار کرده است ، زیرا به ما امکان می دهد تا ایده های خارج از دروپال را به سرعت پیاده سازی و آزمایش کنیم. همچنین برای پایدار نگه داشتن HTML و پاکسازی HTML Drupal مرجع خوبی بود.

با ما در مورد رنگ صحبت کنید. چگونه پالت خود را انتخاب کردید؟

ER: برای دسترسی مطلوب ، باید رنگ های متضاد داشته باشید - اما ما نمی خواستیم سایت قدیمی را که در همه جا از رنگ ثابت استفاده می کرد ، تکرار کنیم. ما یک پالت از رنگ های مارک تولید کردیم و از ابزارهای کنتراست رنگ برای برآوردن نسبت های کنتراست WCAG استفاده کردیم.

در مورد تایپوگرافی چطور - آیا در اینجا تصمیم هوشمندانه ای گرفته اید؟

BP: تایپوگرافی بخشی از تغییر گسترده تری در مارک تجاری RNIB توسط The Good Agency بود ، اما اطمینان از اینکه ما در فرمول های نسبت کنتراست رنگ WCAG هستیم بسیار مهم بود. اینها همه با فرمول ریاضی طراحی شده و ارتفاع پایه ما را که ریتم عمودی تایپوگرافی را تشکیل می دهد هدایت می کند.

آیا می توان سایتی در دسترس و زیبا داشت؟

ER: بله کاملا. طراحی ساده ای که در رابطه با قابلیت استفاده یکپارچه به دست آوردیم گواه آن است.

BP: رنگ مارک ، تایپوگرافی و ریتم عمودی همه با دقت مورد بررسی ، آزمایش و محاسبه قرار گرفتند. من فکر می کنم این رویکرد "فرم به دنبال عملکرد" ​​می تواند به سایتهایی منجر شود که از داخل و خارج زیبا هستند.

سایت پاسخگو است آیا به نظر شما این کار سنگین بود یا آزاد کننده؟

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

چگونه نیاز به تغییر مقیاس سایت در داخل ویندوز مرورگر را مدیریت کردید؟

BP: بزرگنمایی صفحه در سایتهای پاسخگو واقعاً خوب عمل می کند ، بنابراین این امر کمک کرد. صفحه با داشتن نمای تبلت 250 درصد عالی به نظر می رسد و با حرکت در بین نمایش های پاسخگو تا 500 درصد در جایی که نمای موبایل را نشان می دهد ، ثابت می ماند.

کدام فناوری های کمکی را به کار گرفتید و به کار گرفتید؟

BP: در هنگام تولید نمونه اولیه و راهنمای سبک تعاملی ، مخلوط به گردش کار کمک کرد. استفاده از این روش بهمراه BEM و SMACSS به فرمول بندی کمک کرده و کد را قابل نگهداری می کند. از کتابخانه داخلی mix Sass ما برای اطمینان از در دسترس بودن همه موارد اضافه شده استفاده شد.

AE: ما از Git flow استفاده کردیم و بر اساس داستانهای کاربر و اسپرینت ها روی یک ویژگی کار کردیم و گردش کار را آزاد کردیم. ما همچنین از Jenkins و Drush برای اتوماسیون انتشارها و استقرار سریع و قابل اعتماد استفاده کردیم.

تنها توصیه ای که می توانید به طراحان وب ارائه دهید تا به دنبال دسترسی بیشتر سایت های خود باشند ، چیست؟

BP: هنگامی که HTML از نظر معنایی ، بدون هیچ CSS یا JS ساختار یافت ، صفحه شما قابل دسترسی خواهد بود ، بنابراین فقط تمام سبک های اضافه شده را آزمایش کنید. یکی از راه های انجام این کار افزودن WAI-ARIA است ، اما در مصرف آن زیاده روی نکنید زیرا به شما اطلاعات زیادی می دهد ، به خصوص اگر با HTML5 ترکیب شود.

AE: در صفحه خوان ها فقط با استفاده از صفحه کلید تست کنید - فقط قرار دادن برگه در سایت برای دیدن اینکه چگونه کار می کند واقعاً کمک می کند.

ER: ماهیت مبهم دسترسی به این معنی است که آزمایش کاربر بسیار مهم است. درک چگونگی تعامل کاربران با سایت RNIB و فرمول بندی راه حل ها در نتیجه بی نظیری که به دست آورده ایم مهم بود.

این مقاله در اصل در شماره مجله 256 منتشر شده است.