ایجاد دسترسی به وب: بهترین روش های CSS

تقریباً همه چیز نقشی در افزایش یا ایجاد دسترسی در وب برای همه کاربران دارد.

در این پست، ما بر روی برخی از راه‌هایی که می‌توانیم با استفاده از CSS دسترسی ایجاد کنیم، تمرکز خواهیم کرد. بیایید درست در آن شیرجه بزنیم!

بازنشانی CSS:

اگر به اندازه کافی در اطراف بوده اید، احتمالاً در مورد تنظیم مجدد css شنیده اید. این چند خط کد css است که تمام ویژگی های از پیش تعریف شده را به حالت پیش فرض یا صفر بازنشانی می کند. چند عنصر HTML وجود دارد که با استایل از پیش تعریف شده همراه است، این سبک ها ممکن است در مرورگرهای مختلف متفاوت باشند. عناصری مانند h1–h6 با یک حاشیه از پیش تعریف شده و سایر عناصر مانند <p>، <a>، <form> و غیره. بدون علامت گذاشتن این سبک ها می تواند منجر به مشکلات طرح بندی در مرورگرهای مختلف شود. چند کتابخانه وجود دارند که بازنشانی‌ها را ارائه می‌دهند که می‌توانید در برنامه خود استفاده کنید، می‌توانید در مورد برخی از بهترین کتابخانه‌های CSS Reset/Normalization مطالعه کنید تا بهترین کتابخانه را پیدا کنید. از طرف دیگر، می‌توانید چند خط کد را به شیوه نامه اصلی اضافه کنید تا استایل را در کل برنامه بازنشانی یا عادی کنید.

*{
    margin: 0 !important;
    padding: 0;
    box-sizing: border-box;
    font-size: 15px;
    max-width: 100%;
    list-style: none;
    text-decoration: none;
    font-weight: lighter;
}

قالب بندی فونت:

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

1. حفظ اندازه و وزن فونت یکسان برای متن مشابه. مثلا همه <h1> عناوین صفحه شما باید اندازه و فاصله یکسانی داشته باشند، همه زیرعنوان ها و متن معمولی نیز باید یکسان باشند.

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

3. از رنگ برای متمایز کردن پیام های مختلف استفاده کنید، به عنوان مثال در یک فرم، باید از رنگ های خاصی برای نمایش پیام ها یا هشدارهای مختلف مانند خطاها، هشدارها، اطلاعات و پیام های موفقیت استفاده کنید.

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

تضاد رنگ:

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

منبع تصویر: “نمودار کنتراست رنگ” توسط ThoughtCo، منتشر شده در 13 سپتامبر 2021. برگرفته از ThoughtCo.

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

موضوع

داشتن تم روشن، کم نور و تیره فقط برای زیبایی شناسی نیست، به ویژه برای کاربران با چشمان حساس و کسانی که تم خاصی را ترجیح می دهند بسیار مهم است، به عنوان مثال من به خصوص تم تیره را دوست دارم. شما به راحتی می توانید ترجیحات کاربر را با استفاده از prefers-color-scheme پرس و جو رسانه ای مانند آن;

.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

این سیستم عامل کاربر را برای یک موضوع ترجیحی بررسی می کند و معمولاً مقدار هر کدام را دارد light یا dark.

کاهش انیمیشن

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

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

باز هم از خواندن شما متشکرم و امیدوارم برای وقت خود ارزش قائل شده باشید. من را دنبال کنید @frontend_jedi تا از پست های من به روز بمانید و من را در توییتر @ دنبال کنیدFrontend_Jedi بیایید با هم ارتباط برقرار کنیم و رشد کنیم