المقدمة
إذا كنت ترغب في زيادة إمكانية الوصول إلى موقعك ، لكنك تعتقد أنك بحاجة إلى تثبيت شيء ما أو التعامل مع بعض الخدمات ، فإليك مجموعة من 5 أدوات متوفرة في متصفح Chrome ، والتي يمكنك من خلالها تحديد ما إذا كانت هناك مشاكل في التوفر.
إخلاء صغير ، أعلم أن العديد منكم يستخدمون DevTools بنشاط ، ومع ذلك ، أذكرك أنه من الملائم استخدام الاختصار Cmd + Shift + C / Ctrl + Shift + C لفتح DevTools.
مفتش الوصول
بالإضافة إلى DOM ، ينشئ المستعرض شجرة إمكانية الوصول (AOM ، نموذج كائن إمكانية الوصول) أو شجرة إمكانية الوصول (المزيد هنا ). وفقًا لذلك ، يتيح لك مراقب إمكانية الوصول عرض المعلومات في هذه الشجرة ، على نحو مشابه لكيفية عرض بنية DOM الخاصة بأداة التحقق في علامة التبويب العناصر.
بالنسبة للجزء الأكبر ، يحتوي AOM على معلومات من ARIA وسمات الدور ، وهي الطريقة التي يحاول بها قراء الشاشة تحديد الغرض من عنصر DOM.
يمكنك العثور على هذا والأداة في علامة التبويب "العناصر" ، في علامة التبويب "إمكانية الوصول" الإضافية.
محاكي الرؤية السيئة
DevTools , .
DevTools, . More tools, Rendering. , , “Emulate vision deficiencies”.
DevTools :
( ?)
- , .
- –, – .
-
, , , , - , . .
Lighthouse , . , Accessibility.
Lighthouse :
ARIA -
ROLE -
Lang HTML
Tabindex
alt
, , , alt. , - “”, “ ”, “”,
. , .
, DevTools , .
- DevTools, , CSS color
, :
()
()
Inspect element tooltip
, . , DevTools , . DevTools.
Inspect element tooltip , .
, ,
, , .– FronteersConf
شكرًا على القراءة ، آمل أن تساعدك هذه الأدوات في تسهيل الوصول إلى مشاريعك.