بسیاری از افراد از توسعه مبتنی بر مؤلفه با استفاده از راهنماهای سبک الگو، کتابخانه های مؤلفه یا سیستم های طراحی کامل در فرآیند گردش کار توسعه خود استفاده می کنند. حتی اگر به طور رسمی از این ابزارها استفاده نکرده‌اید، احتمالاً از فرآیند مشابهی برای تقسیم کردن یک طراحی بزرگ برای یک وب‌سایت، برنامه یا سایر محصولات دیجیتالی به قطعات قابل مدیریت استفاده می‌کنید.
مانند ساخت یک ساختار فیزیکی، ساختن یک قطعه در یک زمان مهم است. اول، فونداسیون، سازه، دیوارها، پنجره ها، سقف، و همه چیز در این بین. ابزارهای توسعه مبتنی بر مؤلفه به ما این امکان را می دهند که این کار را برای وب سایت ها، برنامه ها و سایر محصولات دیجیتال انجام دهیم.
برخی از مزایای توسعه مبتنی بر مولفه شامل تقسیم کردن چیزها به قطعات قابل مدیریت است، بنابراین زمان توسعه کمتری با این اجزای قابل استفاده مجدد وجود دارد. این به طراحان، توسعه دهندگان فرانت اند و باطن و QA اجازه می دهد تا به طور همزمان کار کنند. و مشتریان، طراحان، PM ها و موارد دیگر، آن را دوست دارند زیرا می توانند روند ساخت را پیش نمایش کنند و پس از راه اندازی وب سایت از راهنمای سبک زندگی به عنوان مرجع استفاده کنند.
با این حال، وقتی به الگوها، اجزا و سیستم‌های طراحی با در نظر گرفتن قابلیت دسترسی نگاه می‌کنیم، سؤالاتی پیش می‌آید. چگونه می دانید که کدام الگوها در مورد دسترسی بهتر هستند؟ آیا باید از یک الگو/کتابخانه ثابت استفاده کنید یا الگوهای جدید ایجاد کنید؟ چگونه می دانید که آیا این الگوها واقعاً به کاربران شما کمک می کنند؟
با تعداد بی شماری از انتخاب های موجود، به راحتی می توان در مورد این موضوع گیج شد. هدف این ماژول ارائه اطلاعات کلی در مورد نحوه ارزیابی الگوها، اجزا و سیستم‌های طراحی برای دسترسی است و به شما نقطه شروعی می‌دهد تا به شما در انتخاب‌های در دسترس‌تر کمک کند.
انتقادی فکر کنید
انتخاب یک الگو، جزء یا سیستم طراحی قابل دسترس، علم موشکی نیست، اما به زمان و تفکر انتقادی نیاز دارد. در واقع، چیزی به نام "یک الگوی کامل" وجود ندارد، اما ممکن است گزینه های زیادی وجود داشته باشد که می توانند کار کنند. این در مورد یادگیری انتخاب بهترین گزینه برای موقعیت منحصر به فرد شما است.
در ماژول‌های آزمایشی بعدی، درباره تکنیک‌ها و روش‌های نحوه ارزیابی الگوها، اجزا و سیستم‌های طراحی برای دسترسی بیشتر خواهید آموخت. اما قبل از این مرحله، باید یک قدم به عقب برگردید و چند سوال اساسی از خود بپرسید، مانند:
- آیا یک الگو، مؤلفه یا سیستم طراحی قابل دسترس از قبل وجود دارد؟
- چه مرورگرها و فناوری کمکی (AT) را پشتیبانی می کنم؟
- آیا محدودیت کد/چارچوب یا سایر ادغام ها/عوامل/نیازهای کاربر وجود دارد که باید در نظر بگیرم؟
بسته به محیط برنامه نویس شما و نیازهای کاربر، ممکن است سوالات اضافی یا متفاوتی از آنها داشته باشید. این سوالات را به عنوان نقطه شروع خود در ارزیابی دسترسی خود در نظر بگیرید.
منابع تثبیت شده
قبل از ساختن چیزی کاملاً جدید، سعی و کوشش خود را انجام دهید و آنچه را که قبلاً از نظر الگوها، اجزا و سیستم‌های طراحی قابل دسترسی وجود دارد، مرور کنید. تنها با کمی تحقیق، ممکن است از یافتن راه حلی - یا چندگانه - که متناسب با نیازهای شما باشد، شگفت زده شوید.
برخی از منابع عالی برای الگوها، اجزا و سیستم های طراحی قابل دسترس عبارتند از:
- اجزای قابل دسترسی
- کتابخانه آریا دانشگاه دکه
- سیستم طراحی Gov.UK
- اجزای فراگیر
- MagentaA11y
- سیستم طراحی وب ایالات متحده (USWDS) که برای دولت فدرال ایالات متحده ایجاد شده است
- لیست الگوهای قابل دسترس از مجله Smashing
برای چارچوب‌های جاوا اسکریپت، منابع زیر کاملاً خارج از جعبه قابل دسترسی هستند یا برای دسترسی آسان می‌توان آنها را سفارشی کرد:
- وقتی CSS کافی نیست: الزامات جاوا اسکریپت برای اجزای قابل دسترس
- واکنش نشان دهید
- Angular: کتابخانه مواد
- Vue: Vuetensils
با این حال - و نمی توان به اندازه کافی روی این موضوع تاکید کرد - هرگز نباید فقط کد را کپی/پیست کنید و فرض کنید که در محیط شما قرار می گیرد و به طور خودکار نیازهای کاربر شما را برآورده می کند. این امر در مورد همه الگوها، اجزاء و سیستم های طراحی صادق است، حتی اگر برچسب کاملاً قابل دسترسی داشته باشند.
همه منابع را باید به عنوان نقطه شروع در نظر گرفت. حتما همه چیز را تست کنید!
پشتیبانی از مرورگرها و فناوری کمکی (AT).
پس از تحقیق در مورد چند الگوی پایه، مؤلفه یا یک سیستم طراحی کامل که ممکن است برای محیط توسعه دهنده شما کار کند، می توانید به پشتیبانی از فناوری کمکی بروید. یکی از انواع اصلی AT که می‌خواهید هنگام ارزیابی الگوها، اجزا و سیستم‌های طراحی روی آن تمرکز کنید، صفحه‌خوان‌ها هستند.
صفحه خوان ها با در نظر گرفتن مرورگرهای خاصی ساخته شده اند و زمانی که با این مرورگرها جفت شوند بهترین عملکرد را خواهند داشت. ما در ماژول تست AT با جزئیات بیشتری به این موضوع خواهیم پرداخت، اما برای اهداف ارزیابی الگو، درک وجود این ترکیبات مفید است، بنابراین می‌دانید از نظر پشتیبانی به چه چیزی نیاز دارید.
| صفحه خوان | سیستم عامل | سازگاری با مرورگر | هزینه |
|---|---|---|---|
| دسترسی به شغل با گفتار (JAWS) | پنجره ها | کروم، فایرفاکس، اج | نیاز به مجوز (نسخه 40 دقیقه ای رایگان وجود دارد) |
| دسترسی غیر بصری دسکتاپ (NVDA) | پنجره ها | کروم و فایرفاکس | رایگان (نیاز به دانلود دارد) |
| راوی | پنجره ها | حاشیه، غیرمتمرکز | رایگان (ساخته شده در دستگاه های ویندوز) |
| صداگذاری | سیستم عامل مک | سافاری | رایگان (ساخته شده در ماشین های macOS) |
| اورکا | لینوکس | فایرفاکس | رایگان (ساخته شده در توزیع های مبتنی بر Gnome) |
| TalkBack | اندروید | کروم و فایرفاکس | رایگان (ساخته شده در نسخه های خاصی از سیستم عامل اندروید) |
| صداگذاری | iOS | سافاری | رایگان (ساخته شده در دستگاه های iOS) |
پشتیبانی از مرورگر به طور کلی پیچیده است، و وقتی دستگاه های AT و مشخصات ARIA را به ترکیب اضافه می کنید، همه چیز پیچیده تر می شود.
اما این همه خبر بد نیست. خوشبختانه، منابع بزرگی مانند قابلیت دسترسی HTML5 ، پشتیبانی دسترس‌پذیری ، و فهرست بررسی توسعه در دسترس با کنترل سفارشی WCAG به ما کمک می‌کنند تا پشتیبانی کنونی مرورگر و دستگاه AT و حتی زمان استفاده از ARIA را در وهله اول بهتر درک کنیم.
این منابع زیرعناصر مختلف الگوی HTML و ARIA موجود، از جمله تست‌های جامعه منبع باز را تشریح می‌کنند. همچنین می‌توانید برخی از نمونه‌های الگو را برای مرورگرهای دسکتاپ و موبایل/دستگاه‌های AT مرور کنید. به این ترتیب، این منابع می توانند به شما کمک کنند تا در مورد الگوها، اجزاء و سیستم های طراحی که ممکن است بخواهید از آنها استفاده کنید، تصمیم در دسترس تری بگیرید.
ملاحظات دیگر
هنگامی که چند الگو یا مؤلفه پایه در دسترس را انتخاب کردید و پشتیبانی از مرورگر و دستگاه AT را در نظر گرفتید، می توانید به سؤالات زمینه ای خاص تر در مورد الگو، مؤلفه، سیستم طراحی و محیط توسعه دهنده بروید.
به عنوان مثال، اگر در یک سیستم مدیریت (CMS) کار می‌کنید یا کد قدیمی دارید، ممکن است محدودیت‌هایی برای استفاده از الگوها وجود داشته باشد. پس از بررسی، چندین انتخاب الگو ممکن است به سرعت به یک یا دو گزینه کاهش یابد.
بسیاری از چارچوب های جاوا اسکریپت به توسعه دهندگان این امکان را می دهند که تقریباً از هر الگوی که انتخاب می کنند استفاده کنند. در مواردی مانند این، ممکن است محدودیت های کمتری داشته باشید و می توانید در دسترس ترین گزینه الگو را انتخاب کنید.
هنگام انتخاب الگو، جزء یا سیستم طراحی، ملاحظات دیگری نیز وجود دارد، مانند:
- کارایی
- امنیت
- بهینه سازی موتور جستجو
- پشتیبانی از ترجمه زبان
- ادغام های شخص ثالث
این عوامل بدون شک در انتخاب الگوی شما نقش دارند، اما باید افرادی را نیز در نظر بگیرید که محتوا و کد خود را ایجاد می کنند. الگویی که انتخاب می‌کنید باید به اندازه کافی قوی باشد تا بتواند محدودیت‌های احتمالی در مورد محتوای تولید شده توسط ویرایشگر یا کاربر را کنترل کند، به علاوه به گونه‌ای ساخته شده باشد که توسعه دهندگان همه دانش دسترسی بتوانند از آن استفاده کنند.
درک خود را بررسی کنید
دانش خود را از الگوها آزمایش کنید
آیا اجزای قابل دسترسی همیشه برای کاربران در دسترس باقی می مانند؟