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

در این مقاله، روش‌هایی را به اشتراک می‌گذارم که CSS می‌تواند از قابلیت دسترسی پشتیبانی کند تا بتوانید از این تکنیک‌ها در پروژه‌های خود استفاده کنید.

پیش نیازها

برای دنبال کردن این آموزش، باید درک اولیه ای از HTML، CSS و کمی جاوا اسکریپت داشته باشید.

سبک های فوکوس را به روز کنید

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

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

شما می توانید سبک فوکوس پیش فرض یک عنصر را در CSS با استفاده از کلاس شبه :focus تغییر دهید. برای مثال، سبک فوکوس پیش‌فرض برای یک عنصر ورودی، یک طرح کلی آبی در کروم و یک طرح کلی آبی با افست طرح در فایرفاکس است، برای به‌روزرسانی سبک‌های تمرکز پیش‌فرض یک عنصر ورودی، می‌توانید این کار را انجام دهید:

 input :focus { outline : 2px solid #007BFF ; outline-offset : 2px ; border-radius : 1rem ; }

از تغییر محتوا اجتناب کنید

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

جابجایی محتوا همچنین می‌تواند در حین واکشی محتوای پویا اتفاق بیفتد، به‌ویژه زمانی که محتوای جدیدی مانند متن، تصاویر یا تبلیغات بدون رزرو فضای قبلی به صفحه اضافه می‌شود.

تغییر محتوا می تواند ناامید کننده باشد، به خصوص برای کاربران:

با ناتوانی های شناختی که ممکن است ردیابی جایی که در محتوا هستند را از دست بدهند.

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

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

می‌توانید با استفاده از آپشن های min-height یا aspect-ratio فضا را به محتوا اختصاص دهید تا از جابجایی‌ها جلوگیری کنید. در اینجا نحوه تخصیص فضا برای یک تصویر برای جلوگیری از جابجایی محتوا قبل از بارگیری کامل تصویر آمده است.

 img { width : 100% ; height : auto; aspect-ratio : 16 / 9 ; object-fit : cover; /* Ensures the image fits well within the allocated space */ }

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

 .new-content { transition : margin 0.3s ease-in-out, opacity 0.3s ease-in-out; }

کاهش حرکت

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

می‌توانید از جستجوی رسانه‌ای prefers-reduced-motion CSS برای کاهش یا غیرفعال کردن انیمیشن‌ها برای کاربران استفاده کنید.

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

در اینجا نحوه استفاده از prefers-reduced-motion برای ایجاد یک انیمیشن ساده تر آورده شده است:

 /* Default animation */ @keyframes complexAnimation { 0% { transform : translateX ( 0 ); opacity : 0 ; } 50% { transform : translateX ( 100px ); opacity : 0.5 ; } 100% { transform : translateX ( 0 ); opacity : 1 ; } } .element { animation : complexAnimation 2s ease-in-out; } /* Simpler animation for reduced motion preference */ @media ( prefers-reduced-motion: reduce) { @keyframes simpleAnimation { 0% { opacity : 0 ; } 100% { opacity : 1 ; } } .element { animation : simpleAnimation 1s ease-in-out; } }

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

توجه : اگر می‌خواهید حرکت کاهش‌یافته را در عمل ببینید، می‌توانید آن را در برگه رندر در Google Chrome فعال کنید.

تمرکز درون برای عناصر تودرتو

هنگامی که هر یک از عناصر فرزند آن فوکوس می‌شود، می‌توانید یک عنصر والد را برجسته یا استایل دهید تا مشخص شود در حال حاضر با کدام گروه (مانند ورودی‌های فرم یا منوهای کشویی) در حال تعامل است.

برای انجام این کار، می‌توانید از کلاس :focus-within CSS استفاده کنید که برای استایل دادن به عنصری استفاده می‌شود که هر یک از فرزندان آن فوکوس را از طریق پیمایش صفحه کلید یا تعامل کاربر دریافت می‌کنند.

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

 < style > fieldset { padding : 10px ; border : 1px solid #ccc ; } fieldset :focus-within { border-color : #007BFF ; /* highlight the fieldset when a user focuses on any input */ } </ style > < fieldset > < legend > Choose a color: </ legend > < label > < input type = "radio" name = "color" value = "red" > Red </ label > < label > < input type = "radio" name = "color" value = "green" > Green </ label > < label > < input type = "radio" name = "color" value = "blue" > Blue </ label > </ fieldset >

سفارشی کردن گزینه های کنتراست

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

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

برخی از این کاربران ممکن است سیستم هایشان را روی کنتراست بالا یا پایین تنظیم کنند تا به بهبود تجربه آنها کمک کند. برای سفارشی کردن تجربه آنها، می توانید از پرس و جو رسانه prefers-contrast CSS استفاده کنید.

پرس و جوی رسانه prefers-contrast به شما امکان می دهد کنتراست وب سایت یا برنامه خود را بر اساس تنظیمات سیستم کاربر تنظیم کنید.

در اینجا مثالی از استفاده از prefers-contrast آورده شده است:

 /* default styling preference */ body { background-color : white; color : black; } /* high contrast preference */ @media ( prefers-contrast: more) { body { background-color : black; color : white; } a { color : yellow; } } /* low contrast preference */ @media ( prefers-contrast: less) { body { background-color : #f0f0f0 ; color : #333 ; } a { color : #555 ; } } 

در مثال بالا، گزینه prefers-contrast: more تضمین می‌کند که وقتی کاربر کنتراست بالا را ترجیح می‌دهد، پس‌زمینه سیاه و متن سفید است، با پیوندهای زرد برای دید بهتر.

prefers-contrast: less طرح رنگ را برای کاربرانی که کنتراست کمتری را ترجیح می دهند، به رنگ ملایم تری تنظیم می کند. اگر کاربر اولویت خاصی برای کنتراست نداشته باشد یا ترجیحات او شناسایی نشود، از سبک پیش‌فرض استفاده می‌شود.

توجه : اگر طرح شما از حداقل رنگ‌ها استفاده می‌کند و کنتراست بالایی را بین متن و پس‌زمینه حفظ می‌کند یا با طرحی کار می‌کنید که متن آن حداقل است و تمرکز روی محتوای بصری است (مانند گالری‌های تصویر یا پخش‌کننده‌های ویدیو)، ممکن است به prefers-contrast نیاز نداشته باشید. prefers-contrast به همان اندازه اما هنوز هم تمرین خوبی است که تضادها را در نظر بگیرید.

حالت تاریک را فعال کنید

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

در اینجا مثالی از نحوه اضافه کردن سبک حالت تاریک به سایت خود با استفاده از متغیرهای CSS آورده شده است:

 :root { --background-color : #ffffff ; --text-color : #000000 ; } @media ( prefers-color-scheme: dark) { :root { --background-color : #000000 ; --text-color : #ffffff ; } } body { background-color : var (--background-color); color : var (--text-color); }

در مثال بالا، اگر مرورگر اولویت طرح رنگ تیره را تشخیص دهد، متغیرها به روز می شوند.

اگر می خواهید به کاربران اجازه دهید به صورت دستی بین حالت ها جابجا شوند، می توانید از جاوا اسکریپت برای این کار استفاده کنید:

 < style > /* Default light mode styles */ body { background-color : #ffffff ; color : #000000 ; } /* Dark mode styles */ body .dark-mode { background-color : #000000 ; color : #ffffff ; } </ style > < button id = "toggle-theme" > Toggle Theme </ button > < script > const toggleButton = document .getElementById( 'toggle-theme' ); toggleButton.addEventListener( 'click' , () => { document .body.classList.toggle( 'dark-mode' ); }); </ script >

از واحدهای rem برای تایپوگرافی پاسخگو استفاده کنید

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

کاربران می توانند اندازه فونت ترجیحی را در مرورگر یا سیستم عامل خود برای خوانایی بهتر تنظیم کنند. وقتی از rem استفاده می‌کنید، محتوای وب‌سایت مطابق با این تنظیم مقیاس می‌شود که تضمین می‌کند متن برای کاربران خیلی کوچک یا خیلی بزرگ نباشد (که ممکن است هنگام استفاده از واحدهای ثابت مانند px رخ دهد).

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

اندازه فونت ریشه پیش‌فرض (معمولاً 16 پیکسل) معمولاً از مرورگر به ارث می‌رسد، اما در صورت نیاز می‌توانید آن را به صراحت تنظیم کنید:

 html { font-size : 100% ; /* Default 16px */ }

پس از تنظیم اندازه فونت ریشه، می توانید از rem unit برای بقیه مطالب خود استفاده کنید. به عنوان مثال:

 h1 { font-size : 2.5rem ; /* Equivalent to 40px if root is 16px */ } p { font-size : 1rem ; /* Equivalent to 16px */ }

از انیمیشن ها برای تقویت UX استفاده کنید

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

در اینجا چند راه وجود دارد که انیمیشن ها می توانند به بهبود دسترسی کمک کنند:

می‌توانید از انیمیشن‌ها برای نشان دادن وضعیت بارگیری استفاده کنید تا به صورت بصری با کاربران ارتباط برقرار کنید که سیستم روی یک کار کار می‌کند.

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

انتقال‌های ظریف برای تغییر حالت به‌جای تغییرات ناگهانی (مانند یک مدال که فوراً ظاهر می‌شود) می‌تواند انتقال نرم‌تری را بین حالت‌های رابط مختلف ایجاد کند.

استفاده از هایلایت های متحرک یا افکت های لرزان در فیلدهای فرم می تواند بازخورد بصری را در مورد خطاهای ورودی به کاربران ارائه دهد. شما باید این انیمیشن ها را با برچسب ها یا ویژگی های ARIA جفت کنید تا مشخص شود کاربر باید چه چیزی را اصلاح کند.

انیمیشن ها می توانند به کاربران کمک کنند تا فوکوس را ردیابی کنند، به ویژه کاربران صفحه کلید یا افرادی که دارای اختلالات بینایی هستند. انتقال‌های CSS که عناصر متمرکز را برجسته می‌کنند (مثلاً با بزرگ‌کردن دکمه‌ها یا تغییر حاشیه) به کاربران کمک می‌کنند بفهمند کجای صفحه هستند.

بهترین روش ها:

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

از انیمیشن های بیش از حد طولانی یا مداوم که می تواند حواس کاربران را پرت کند یا آزار دهد، خودداری کنید.

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

نتیجه گیری

هنگامی که دسترسی را در نظر می گیریم، HTML به خوبی ساختار یافته پایه و اساس یک صفحه قابل دسترس را تشکیل می دهد – اما CSS نیز نقشی حیاتی در تقویت آن ساختار ایفا می کند.

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

ترکیب HTML قابل دسترس با CSS نه تنها رابط کاربری را بهبود می بخشد، بلکه از فناوری های کمکی نیز پشتیبانی می کند.

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

می توانید در لینکدین با من ارتباط برقرار کنید.

خبرکاو