این صفحه مرجع جامعی از ویژگیهای دسترسیپذیری در Chrome DevTools است. این صفحه برای توسعهدهندگان وبی در نظر گرفته شده است که:
- درک اولیهای از DevTools داشته باشید، مثلاً نحوه باز کردن آن را بدانید.
- با اصول دسترسیپذیری و بهترین شیوهها آشنا هستند.
هدف از این مرجع، کمک به شما در کشف تمام ابزارهای موجود در DevTools است که میتوانند به شما در بررسی دسترسیپذیری یک صفحه کمک کنند.
اگر به دنبال راهنمایی برای پیمایش ابزارهای توسعه کروم با استفاده از یک فناوری کمکی مانند صفحهخوان هستید، به بخش پیمایش ابزارهای توسعه کروم با فناوری کمکی مراجعه کنید.
اگر میخواهید نحوهی توسعهی وبسایتهای دسترسپذیر را بیاموزید، به بخش «یادگیری دسترسیپذیری» مراجعه کنید.
مروری بر ویژگیهای دسترسیپذیری در Chrome DevTools
این بخش توضیح میدهد که چگونه DevTools در مجموعه ابزارهای کلی دسترسیپذیری شما جای میگیرد.
هنگام تعیین اینکه آیا یک صفحه قابل دسترسی است یا خیر، باید 2 سوال کلی را در ذهن داشته باشید:
- آیا میتوانم با صفحهکلید یا صفحهخوان در صفحه پیمایش کنم؟
- آیا عناصر صفحه به درستی برای خوانندگان صفحه نمایش علامت گذاری شده اند؟
به طور کلی، DevTools میتواند به شما در رفع خطاهای مربوط به سوال شماره ۲ کمک کند، زیرا این خطاها به راحتی به صورت خودکار قابل تشخیص هستند. سوال شماره ۱ نیز به همان اندازه مهم است، اما متأسفانه DevTools نمیتواند در آنجا به شما کمک کند. تنها راه برای یافتن خطاهای مربوط به سوال شماره ۱ این است که خودتان از یک صفحه با صفحه کلید یا صفحه خوان استفاده کنید. برای کسب اطلاعات بیشتر به نحوه انجام بررسی دسترسی مراجعه کنید.
بررسی دسترسیپذیری یک صفحه
به طور کلی، از بررسیهای دسترسی در پنل Lighthouse برای تعیین موارد زیر استفاده کنید:
- یک صفحه به درستی برای خوانندگان صفحه نمایش علامت گذاری شده است.
- عناصر متنی در یک صفحه نسبت کنتراست کافی دارند. همچنین به بخش «وبسایت خود را خواناتر کنید» مراجعه کنید.
برای حسابرسی یک صفحه:
- به آدرس اینترنتی (URL) که میخواهید حسابرسی کنید، بروید.
در DevTools، روی پنل Lighthouse کلیک کنید. DevTools گزینههای پیکربندی مختلفی را به شما نشان میدهد.
برای دستگاه ، اگر میخواهید یک دستگاه تلفن همراه را شبیهسازی کنید، موبایل را انتخاب کنید. این گزینه رشته عامل کاربر شما را تغییر میدهد و اندازه نمای صفحه را تغییر میدهد. اگر نسخه موبایل صفحه متفاوت از نسخه دسکتاپ نمایش داده شود، این گزینه میتواند تأثیر قابل توجهی بر نتایج حسابرسی شما داشته باشد.
در بخش Lighthouse ، مطمئن شوید که Accessibility فعال است. اگر میخواهید دستهبندیهای دیگر را از گزارش خود حذف کنید، آنها را غیرفعال کنید. اگر میخواهید راههای دیگری برای بهبود کیفیت صفحه خود پیدا کنید، آنها را فعال بگذارید.
بخش Throttling به شما امکان میدهد شبکه و CPU را کنترل کنید، که هنگام تجزیه و تحلیل عملکرد بار مفید است. این گزینه نباید به امتیاز دسترسی شما ربطی داشته باشد، بنابراین میتوانید از هر آنچه ترجیح میدهید استفاده کنید.
کادر انتخاب «پاک کردن فضای ذخیرهسازی» به شما امکان میدهد قبل از بارگذاری صفحه، تمام فضای ذخیرهسازی را پاک کنید، یا فضای ذخیرهسازی را بین بارگذاری صفحات حفظ کنید. این گزینه احتمالاً ربطی به امتیاز دسترسیپذیری شما ندارد، بنابراین میتوانید از هر آنچه ترجیح میدهید استفاده کنید.
روی «ایجاد گزارش» کلیک کنید. پس از ۱۰ تا ۳۰ ثانیه، DevTools گزارشی ارائه میدهد. گزارش شما نکات مختلفی در مورد چگونگی بهبود دسترسیپذیری صفحه ارائه میدهد.
برای کسب اطلاعات بیشتر در مورد حسابرسی، روی آن کلیک کنید.
برای مشاهده مستندات آن حسابرسی، روی «بیشتر بدانید» کلیک کنید.
همچنین ببینید: افزونهی aXe
ممکن است ترجیح دهید از افزونه aXe یا افزونه Lighthouse به جای پنل Lighthouse که به طور پیشفرض در کروم موجود است، استفاده کنید. آنها عموماً اطلاعات یکسانی را ارائه میدهند، زیرا aXe موتور زیربنایی است که پنل Lighthouse را پشتیبانی میکند. افزونه aXe رابط کاربری متفاوتی دارد و حسابرسیها را کمی متفاوت توصیف میکند.
یکی از مزایای افزونهی aXe نسبت به پنل Audits این است که به شما امکان میدهد گرههای خراب را بررسی و برجسته کنید.
آزمایش تغییر جهت محتوا با نوار ابزار دستگاه
معیار reflow در دستورالعملهای دسترسی به محتوای وب (WCAG) توصیه میکند که محتوای وب حتی با تغییر اندازه یا جهتگیری صفحه نمایش، بدون از دست دادن اطلاعات قابل مشاهده باقی بماند. با تراز کردن محتوا در یک ستون، کاربرانی که از متن بزرگشده استفاده میکنند، پشتیبانی میشوند. برای آزمایش نحوه reflow محتوای خود، اندازه صفحه نمایش را به صورت پویا با نوار ابزار Device در پنل Lighthouse تغییر دهید.
برای تغییر اندازهی نمای دید، دستگیرهها را به هر ابعادی که نیاز دارید بکشید. برای ابعاد خاص مورد نیاز برای آزمایش، به معیار موفقیت در WCAG reflow مراجعه کنید.
برگه دسترسی
تب دسترسیپذیری جایی است که میتوانید درخت دسترسیپذیری، ویژگیهای ARIA و ویژگیهای دسترسیپذیری محاسبهشده گرههای DOM را مشاهده کنید.
برای باز کردن برگه دسترسی :
- روی پنل عناصر کلیک کنید.
- در درخت DOM ، عنصری را که میخواهید بررسی کنید، انتخاب کنید.
- روی برگه «دسترسیپذیری» کلیک کنید. این برگه ممکن است پشت دکمه «زبانههای بیشتر » پنهان شده باشد.
برای دسترسی سریعتر در آینده، میتوانید زبانه «دسترسیپذیری» را به جلو بکشید.
مشاهده موقعیت یک عنصر در درخت دسترسی
درخت دسترسی زیرمجموعهای از درخت DOM است. این درخت فقط شامل عناصری از درخت DOM است که برای نمایش محتوای صفحه در یک صفحهخوان مرتبط و مفید هستند.
برای بررسی موقعیت یک عنصر در درخت دسترسی، از تب Accessibility ، گزینه Show accessibility tree را فعال یا غیرفعال کنید.
این گزینه، درخت DOM در پنل Elements را با یک درخت دسترسیپذیری تمام صفحه جایگزین میکند. این درخت به شما کمک میکند تا درک بهتری از نحوهی قرارگیری محتوای وب خود در معرض فناوریهای کمکی داشته باشید.
برای مرور درخت دسترسی، میتوانید گرهها را باز کرده و انتخاب کنید تا جزئیات آنها را در قسمت Computed properties مشاهده کنید.
در هر نقطهای میتوانید به درخت DOM برگردید. گره DOM مربوطه انتخاب شده باقی میماند. این یک روش عالی برای درک نگاشت بین گره DOM و گره درخت دسترسی آن است.
مشاهده ویژگیهای ARIA یک عنصر
ویژگیهای ARIA تضمین میکنند که صفحهخوانها تمام اطلاعات مورد نیاز برای نمایش صحیح محتوای یک صفحه را در اختیار دارند.
ویژگیهای ARIA یک عنصر را در برگه دسترسیپذیری مشاهده کنید.
ترتیب منبع عناصر را روی صفحه مشاهده کنید
عناصر موجود در صفحه همیشه به ترتیبی که در منبع هستند، ظاهر نمیشوند. این ممکن است کاربرانی را که برای پیمایش وب به فناوری کمکی وابسته هستند، گیج کند.
برای مشاهده و اشکالزدایی ترتیب سورس در وبسایت خود:
- بررسی یک عنصر در صفحه
- در عناصر > دسترسی > نمایشگر ترتیب منبع ، گزینهی « نمایش ترتیب منبع» (Show source order) را علامت بزنید.
در نمای دید (viewport)، DevTools عناصر تو در تو را با حاشیه مشخص میکند و آنها را با اعدادی مطابق با ترتیب منبعشان علامتگذاری میکند.
مشاهده ویژگیهای دسترسیپذیری محاسبهشده یک عنصر
برخی از ویژگیهای دسترسیپذیری به صورت پویا توسط مرورگر محاسبه میشوند. این ویژگیها را میتوان در بخش ویژگیهای محاسبهشده از تب دسترسیپذیری مشاهده کرد.
ویژگیهای دسترسی محاسبهشدهی یک عنصر را در برگهی دسترسیپذیری مشاهده کنید.
برگه رندرینگ
از تب Rendering برای شبیهسازی برخی از ویژگیهای رسانهای CSS بدون تعیین دستی آنها در کد یا محیط آزمایش خود استفاده کنید. این ویژگیهای رسانهای، ظاهر صفحه وب شما را بر اساس تنظیمات دستگاه کاربر تغییر میدهند. برای آزمایش دسترسیپذیری بصری صفحه خود، تب Rendering را باز کنید و گزینههای زیر را بررسی کنید:
- نقصهای بینایی را شبیهسازی کنید تا صفحه خود را از طریق چندین نقص بینایی شبیهسازی شده مختلف مشاهده کنید.
- ویژگی رسانهای CSS
prefers-color-schemeتا ببینید صفحه شما با حالت تاریک یا روشن چگونه به نظر میرسد. بسیاری حالت تاریک را به عنوان یک انتخاب زیباییشناختی میدانند، اما حالت تاریک به عنوان یک ابزار دسترسی، مفید بودن خود را در غیر این صورت اثبات میکند. - نوع رسانه CSS را شبیهسازی کنید تا صفحه خود را به سبک رسانه چاپی یا صفحه نمایش ببینید.
- ویژگی
forced-colorsدر CSS را شبیهسازی کنید تا ببینید اگر مرورگر حالت رنگهای اجباری را فعال کند، صفحه شما چگونه به نظر میرسد. - ویژگی رسانهای شبیهسازیشده CSS
prefers-contrastتا محتوای وب شما را با مقدار کنتراست بالاتر، پایینتر یا خاص مشاهده کند. - ویژگی رسانهای شبیهسازیشده CSS
prefers-reduced-motionتا محتوای وب شما را با حرکت کاهشیافته مشاهده کند. برخی از کاربران از محتوای متحرک دچار حواسپرتی یا حالت تهوع میشوند. از این گزینه استفاده کنید تا ببینید صفحه شما بدون انیمیشن یا مواردی مانند پیمایش روان چگونه به نظر میرسد. - ویژگی رسانهای شبیهسازی CSS،
prefers-reduced-transparencyتا در صورت درخواست کاربر برای کاهش جلوههای لایه شفاف یا نیمهشفاف مورد استفاده در دستگاه، نحوه نمایش محتوای وب شما را مشاهده کند.
متن با کنتراست پایین را کشف و اصلاح کنید
DevTools میتواند به طور خودکار مشکلات کنتراست پایین را پیدا کند و رنگهای بهتری را برای کمک به شما در رفع آنها پیشنهاد دهد. برای کسب اطلاعات بیشتر به بخش «وبسایت خود را خواناتر کنید» مراجعه کنید.