طراحی اپلیکیشن وب قابل دسترس یک جزء کلیدی برای ارائه یک تجربه کاربری مثبت و رضایت کلی کاربر برنامه است. یک برنامه تحت وب در دسترس، دسترسی برابر به افراد با توانایی های متنوع و افراد در مکان های جغرافیایی مختلف را تضمین می کند. افرادی که محدودیت‌های مربوط به توانایی‌های شنوایی، شناختی، گفتاری یا بینایی و محدودیت‌های موقتی مربوط به ناتوانی‌های کوتاه‌مدت، اتصال آهسته به اینترنت یا حتی نور شدید خورشید دارند، باید بتوانند به برنامه وب شما دسترسی داشته باشند. هنگام ساختن قسمت جلویی برنامه وب خود، از همان ابتدا از راه حل های دسترسی استفاده کنید تا از مشکلات دسترسی و نیاز به انجام مجدد هر کاری بعداً در طول فرآیند ساخت جلوگیری کنید. اطمینان حاصل کنید که محتوای برنامه شما توسط خزنده های وب و صفحه خوان ها قابل پیمایش است و در عین حال تجربه کاربری مثبتی را برای کاربران فراهم می کند.
دسترسی یک الزام قانونی در بسیاری از کشورها و صنایع است. شما باید این دستورالعمل ها را درک کنید و راه حل های دسترسی را در طراحی ظاهری خود بگنجانید. موارد مختلف کسب و کار اهمیت دسترسی به محتوای وب را نیز برجسته می کند.
منابعی مانند MDN و WCAG دستورالعمل ها و پیشنهادات ضروری را برای افزایش دسترسی به برنامه وب شما ارائه می دهند. همچنین می‌توانید دوره آموزش دسترس‌پذیری را در web.dev شرکت کنید.
وابستگی متقابل بین اجزای مختلف یک جنبه ضروری برای دسترسی به یک برنامه وب برای کاربران مختلف است.
رنگ و کنتراست
استفاده از رنگ عامل اصلی در ارزیابی دسترسی به یک برنامه وب است. کاربران فرانت اند باید بتوانند محتوای صفحه را درک کنند و رنگ و کنتراست به طور قابل توجهی بر درک کاربران از محتوا تأثیر می گذارد. شرایط مشاهده و ناتوانی‌های مربوط به بینایی می‌تواند موقتی، موقعیتی یا دائمی باشد، اما باید در هنگام ساختن صفحه اصلی برنامه وب خود در نظر گرفته شود. ایجاد کنتراست صحیح یا تفاوت در روشنایی بین رنگ های استفاده شده در رابط کاربری می تواند برنامه وب شما را برای کاربران مختلف در دسترس تر کند. نسبت کنتراست تفاوت روشنایی بین پس زمینه و متن را فراهم می کند.
برای اندازه‌گیری کنتراست، می‌توانید از فرمول نسبت کنتراست استفاده کنید تا مطمئن شوید که حداقل کنتراست برای متن یا نمادهای پس‌زمینه وجود دارد. اشکال زیادی از اختلالات درک رنگ وجود دارد که باید در نظر گرفته شود، اما مدل‌های رنگی جدید می‌توانند اطمینان حاصل کنند که محتوا به درستی درک می‌شود، حتی اگر در مقیاس خاکستری مشاهده شود.
استفاده از تم تیره اغلب برای پشتیبانی از رنگ و کنتراست برای دسترسی توصیه می شود. تم های تیره اغلب برای ورودی بصری به دلیل نور سفید و مشکلات خواندن ترجیح داده می شوند. از آنجایی که برنامه‌های مبتنی بر محتوا شامل مقدار زیادی متن و تصویر هستند، استفاده هوشمندانه از رنگ و نسبت کنتراست برای پاسخگویی به نیازهای متنوع کاربران بسیار مهم است.
در web.dev درباره رنگ و کنتراست بیشتر بیاموزید .
تایپوگرافی
تایپوگرافی به انتخاب و چیدمان متن اشاره دارد به طوری که برای کاربران مختلف خوانا و خوانا باشد. یکی از بیشترین تغییر تنظیمات دسترسی، اندازه فونت پیش‌فرض در دستگاه‌ها است. برخی از کاربران ممکن است بخواهند متن بیشتری را با اندازه فونت کوچکتر روی صفحه قرار دهند یا متن را تا حد امکان بزرگ کنند، بنابراین، انعطاف پذیر و خوانا بودن اندازه تایپوگرافی بسیار مهم است. کاراکترهای متن باید برای خواننده قابل تشخیص باشد و متن کلی باید خوانا باشد. در طول طراحی ظاهری برنامه خود، حتماً حروفی را انتخاب کنید که دارای خوانایی و خوانایی باشد.
تایپ فیس
تایپ فیس یا خانواده فونتی که برای برنامه وب خود انتخاب می کنید باید به صورت بصری برای طیف وسیعی از خوانندگان قابل دسترسی باشد. تایپ فیس طراحی بصری حروف مورد استفاده در متن برنامه شما است. بسیاری از مطالعات اهمیت تایپ فیس را هنگام ارزیابی دسترسی به محتوای وب توصیف می کنند. یافتن تعادل بین برند، اهداف طراحی رابط کاربری شما و سهولت خواندن، برنامه شما را برای طیف وسیع تری از کاربران لذت بخش تر می کند. هنگام ساخت ظاهر صفحه خود، در نظر بگیرید که چگونه گزینه‌های تایپ‌فیس و همچنین گزینه‌های فونت درون آنها، به سهولت دسترسی و طراحی کلی برنامه شما کمک می‌کنند.
اندازه فونت
اجازه زوم مرورگر را برای کمک به کاربرانی که بینایی کم یا ناتوانی در درک رنگ دارند، در نظر بگیرید. فونت متن در برنامه وب شما باید برای خوانندگان مختلف قابل مشاهده باشد. تغییرات اندازه قلم را می توان با تغییر از px به rem به دست آورد. واحدهای Rem امکان اندازه فونتی را فراهم می کنند که با عنصر ریشه برنامه wep مطابقت دارد. این یک گزینه همه کاره است که دسترسی کلی برنامه وب شما را افزایش می دهد.
ساختار و طرح
ویژگی‌های ساختاری و طرح‌بندی مختلف بر دسترسی رابط کاربری شما تأثیر می‌گذارد. ویژگی های چیدمان که باید در نظر گرفته شود شامل فاصله و تراز بلوک متن و همچنین فضای بین خطوط متن و حتی حروف جداگانه است. از شبکه ها استفاده کنید و اجزایی را که می خواهید در طراحی خود بگنجانید تجسم کنید. چیدمان و ساختار محتوا باید برای کاربران جذاب و لذت بخش باشد. ممکن است استفاده از طرح‌بندی‌های پیچیده یا پس‌زمینه‌های شلوغ با بلوک‌های متنی متعدد برای برخی از کاربران، مانند آن‌هایی که ADHD دارند، دشوار باشد. حتماً در طول فرآیند طراحی ظاهری خود، فراگیر بودن را در اولویت قرار دهید.
ARIA و HTML
برنامه های کاربردی اینترنت غنی قابل دسترسی (ARIA) شامل مجموعه ای از دستورالعمل ها و ویژگی ها برای کمک به دسترسی بیشتر برنامه های کاربردی وب برای کاربران است. ARIA HTML را تکمیل می‌کند و ویجت‌های جاوا اسکریپت، به‌روزرسانی‌های محتوای زنده و پیام‌های خطا را در میان دیگران فعال می‌کند. استفاده صحیح از ARIA برای دسترسی بیشتر برنامه وب شما ضروری است. استفاده نادرست از ARIA می تواند منجر به خطا شود و در واقع برنامه شما را کمتر در دسترس کاربران قرار دهد.
در صورت امکان از برچسب‌های ARIA برای معرفی قالب‌های جایگزین سازگار با خط بریل و تبدیل متن به گفتار (TTS) استفاده کنید. نقش‌ها و برچسب‌های ARIA به شما امکان می‌دهند درخت دسترسی را زمانی که با درخت dom متفاوت است تغییر دهید. این برچسب ها هنگام استفاده از برچسب های غیر استاندارد مانند div که به عنوان دکمه قابل کلیک استفاده می شود نیز مهم هستند. زمانی که یک عنصر HTML پشتیبانی از قابلیت دسترسی نداشته باشد، ARIA مورد نیاز است. هنگام طراحی برنامه مبتنی بر محتوا، مطمئن شوید که صفحه‌خوان‌ها و سایر دستگاه‌های کمکی به خوبی پشتیبانی می‌شوند تا به برنامه شما در دسترسی هر چه بیشتر کاربران کمک کنند.
درباره ARIA و HTML در web.dev بیشتر بیاموزید .
بین المللی شدن
بین المللی سازی به طراحی یک برنامه کاربردی وب برای دسترسی به کاربران با زمینه های مختلف زبانی و فرهنگی اشاره دارد. برنامه وب شما باید با زبان‌ها، مناطق جغرافیایی و ترجیحات فرهنگی مختلف بدون تغییر کد قابل‌توجهی سازگار باشد. مؤلفه‌های کلیدی بین‌المللی‌سازی شامل پشتیبانی چندزبانه، بومی‌سازی، جداسازی محتوا، قالب‌بندی تاریخ و زمان، جهت متن، و مذاکره زبان و غیره است.
با بین المللی کردن برنامه وب خود، می توانید تجربه ای فراگیر و کاربرپسند برای مخاطبان گسترده جهانی ایجاد کنید. بین المللی سازی برای هر برنامه وب با پایگاه کاربری متنوع یا هدف گسترش بین المللی ضروری است.
خواص منطقی
هنگام ایجاد استایل در CSS مطمئن شوید که به جای ویژگی هایی مانند top / down / left / right start / end استفاده کنید. این تضمین می‌کند که منوها و طرح‌بندی‌های سایت بر اساس آن برای زبان‌های RTL تغییر می‌کنند.
محتوای جایگزین
ویژگی lang را در تگ HTML با پیوندهایی به اسناد جایگزین در هدر قرار دهید تا نشانه گذاری سفارشی برای محتوای خود ارائه دهید. در صورتی که زبان تعریف شده با زبان پیش فرض مرورگر متفاوت باشد، این به مرورگر امکان می دهد صفحه صحیح را انتخاب کند. این می تواند به مرورگرهای وب و موتورهای جستجو کمک کند تا زبان صفحه را درک کنند، که برای ارائه صحیح محتوا و سئوی مؤثر مهم است.
بین المللی
شیء Intl در جاوا اسکریپت ابزار مهمی برای ایجاد برنامه های کاربردی وب چندزبانه و آگاه از فرهنگ است. قابلیت‌های بین‌المللی‌سازی و بومی‌سازی را در برنامه‌های کاربردی وب فراهم می‌کند و تضمین می‌کند که رابط و محتوای شما برای کاربران در سراسر جهان قابل درک و از نظر فرهنگی مناسب است. ویژگی های ارائه شده توسط شی Intl عبارتند از قالب بندی تاریخ و زمان، قالب بندی اعداد و ترتیب رشته ها.
درباره بین المللی سازی در web.dev بیشتر بیاموزید .
تشکیل می دهد
فرم های HTML بخش مهمی از برنامه های کاربردی وب محتوا محور هستند. آنها تعامل کاربر را فعال می کنند و یک روش ساختاریافته برای جمع آوری اطلاعات کاربر ارائه می دهند. اگر فرم‌های HTML برای مخاطبان وسیعی در دسترس نباشد، می‌تواند منجر به ناامیدی و نارضایتی کاربران شود.
برای دسترسی به فرم های HTML، از عناصر HTML معنایی برای همه فیلدهای فرم استفاده کنید. این به فناوری های کمکی کمک می کند تا هدف هر زمینه را درک کنند و تکمیل آنها را برای کاربران آسان تر کند. همچنین، مطمئن شوید که تمام فیلدهای فرم را به وضوح برچسب گذاری کنید. این به کاربران کمک می کند اطلاعات دقیق و مفیدی ارائه دهند. همچنین مهم است که دسترسی به فرم های HTML خود را آزمایش کنید. این را می توان با استفاده از فناوری های کمکی برای شبیه سازی تجربه کاربری که به چنین فناوری هایی برای مصرف محتوای برنامه شما نیاز دارد، انجام داد.