ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪ್ರವೇಶಯೋಗ್ಯವಾಗಿಸುವುದು ಹೇಗೆ: WCAG 2.2 ಆರಂಭಿಕ ಮಾರ್ಗದರ್ಶಿ
ವೆಬ್‌ಸೈಟ್ ಪ್ರವೇಶಯೋಗ್ಯವಾಗಿಸಲು, ಅದನ್ನು ಮೌಸ್ ಜೊತೆಗೆ ಕೀಬೋರ್ಡ್, ಸ್ಕ್ರೀನ್ ರೀಡರ್, ಝೂಮ್ ಅಥವಾ ಸ್ವಿಚ್ ಸಾಧನದೊಂದಿಗೂ ಜನರು ಬಳಸುವಂತೆ ನಿರ್ಮಿಸಿ: ಬಟನ್‌ಗಳು, ಲಿಂಕ್‌ಗಳು, ಹೆಡಿಂಗ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳಿಗೆ ನಿಜವಾದ HTML ಅಂಶಗಳನ್ನು ಬಳಸಿ, ಚಿತ್ರಗಳಿಗೆ ಅರ್ಥಪೂರ್ಣ alt ಪಠ್ಯ ಕೊಡಿ, ಪಠ್ಯದ ಕಾಂಟ್ರಾಸ್ಟ್ ಹೆಚ್ಚಿರಲಿ ಮತ್ತು ಫೋಕಸ್ ಗೋಚರಿಸಲಿ. ಗುರಿಯಾಗಿಸಬೇಕಾದ ಮಾನದಂಡ WCAG 2.2 Level AA. ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷಕರು ಸಮಸ್ಯೆಯ ಒಂದು ಭಾಗ ಹಿಡಿಯುತ್ತಾರೆ; ಹತ್ತು ನಿಮಿಷದ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆ ಉಳಿದದ್ದರಲ್ಲಿ ಬಹಳ ಹಿಡಿಯುತ್ತದೆ.
ಆಚರಣೆಯಲ್ಲಿ “ಪ್ರವೇಶಯೋಗ್ಯ” ಎಂದರೆ ಏನು
ಪ್ರವೇಶಯೋಗ್ಯತೆ ಜನರ ಬಗ್ಗೆ: ಅಂಧರಾಗಿದ್ದು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಸುವವರು, ಕೀಬೋರ್ಡ್ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ನಡುಕ ಇರುವವರು, 200% ವರೆಗೆ ಝೂಮ್ ಮಾಡುವ ಕಡಿಮೆ ದೃಷ್ಟಿಯವರು, ಬಿಸಿಲಿನಲ್ಲಿ ಓದುವವರು, ತಾತ್ಕಾಲಿಕವಾಗಿ ಮುರಿದ ಮಣಿಕಟ್ಟು ಇರುವವರು. ಉತ್ತಮ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಸಾಮಾನ್ಯವಾಗಿ ಎಲ್ಲರಿಗೂ ಸೈಟ್ ಉತ್ತಮಗೊಳಿಸುತ್ತದೆ — ಸ್ಪಷ್ಟ ರಚನೆ, ಓದಲು ಸುಲಭ ಪಠ್ಯ, ದೋಷಗಳನ್ನು ವಿವರಿಸುವ ಫಾರ್ಮ್‌ಗಳು.
ಉಲ್ಲೇಖ ಮಾನದಂಡ W3C ಯ Web Content Accessibility Guidelines (WCAG). ಸೆಪ್ಟೆಂಬರ್ 2026 ರ ವೇಳೆಗೆ ಪ್ರಸ್ತುತ ಆವೃತ್ತಿ WCAG 2.2 (ಅಕ್ಟೋಬರ್ 2023 ರಲ್ಲಿ ಪ್ರಕಟ, ಡಿಸೆಂಬರ್ 2024 ರಲ್ಲಿ ನವೀಕರಿಸಲಾಗಿದೆ); WCAG 3 ಆರಂಭಿಕ ಕರಡು. WCAG ನಾಲ್ಕು ತತ್ವಗಳ ಸುತ್ತ ಸಂಘಟಿತವಾಗಿದೆ — ವಿಷಯ ಗ್ರಹಿಸಬಹುದಾದ, ಕಾರ್ಯಾಚರಿಸಬಹುದಾದ, ಅರ್ಥವಾಗುವ ಮತ್ತು ದೃಢವಾದ ಆಗಿರಬೇಕು — ಮತ್ತು ಮೂರು ಅನುಸರಣಾ ಮಟ್ಟಗಳನ್ನು ಹೊಂದಿದೆ:
| ಮಟ್ಟ | ಇದರ ಅರ್ಥ | ಯಾರು ಗುರಿಯಾಗಿಸುತ್ತಾರೆ |
|---|---|---|
| A | ಕನಿಷ್ಠ; ಇದು ಇಲ್ಲದಿದ್ದರೆ ಕೆಲವರು ಸೈಟ್ ಬಳಸಲಾರರು | ಎಲ್ಲರೂ |
| AA | ಸಾಮಾನ್ಯ ಗುರಿ; ಕಾಂಟ್ರಾಸ್ಟ್, ಫೋಕಸ್, ಗಾತ್ರ ಬದಲಾವಣೆ, ದೋಷ ನಿರ್ವಹಣೆ ಒಳಗೊಳ್ಳುತ್ತದೆ | ಹೆಚ್ಚಿನ ಸಂಸ್ಥೆಗಳು ಮತ್ತು ಅನೇಕ ಕಾನೂನುಗಳು |
| AAA | ಅತ್ಯಂತ ಕಠಿಣ; ಎಲ್ಲ ವಿಷಯಕ್ಕೂ ಸಾಧ್ಯವಿಲ್ಲ | ನಿರ್ದಿಷ್ಟ ಸೇವೆಗಳು ಮತ್ತು ಪ್ರೇಕ್ಷಕರು |
ಹಲವು ಸ್ಥಳಗಳಲ್ಲಿನ ಕಾನೂನುಗಳು WCAG ಅನ್ನು ಉಲ್ಲೇಖಿಸುತ್ತವೆ — ಉದಾಹರಣೆಗೆ European Accessibility Act, ಇದು ಜೂನ್ 2025 ರಿಂದ EU ನಲ್ಲಿ ಹಲವು ಗ್ರಾಹಕ ಮುಖಿ ಡಿಜಿಟಲ್ ಸೇವೆಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತಿದೆ. ನಿಮಗೆ ಯಾವ ನಿಯಮ ಅನ್ವಯವಾಗುತ್ತದೆ ಎಂಬುದು ನೀವು ಎಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತೀರಿ ಮತ್ತು ಏನು ಮಾರುತ್ತೀರಿ ಎಂಬುದರ ಮೇಲೆ ಅವಲಂಬಿತ; ಖಚಿತವಿಲ್ಲದಿದ್ದರೆ ಸಲಹೆಗಾರರೊಂದಿಗೆ ಪರಿಶೀಲಿಸಿ. ಈ ಮಾರ್ಗದರ್ಶಿ ಪ್ರಾಯೋಗಿಕ ಕೆಲಸವನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.
ಆಯ್ಕೆಗಳು: ಅಲ್ಲಿಗೆ ಹೇಗೆ ತಲುಪುವುದು
| ವಿಧಾನ | ಯಾವುದಕ್ಕೆ ಒಳ್ಳೆಯದು | ಬಿಡಬೇಕಾದದ್ದು |
|---|---|---|
| ಆರಂಭದಿಂದಲೇ ಅಳವಡಿಸಿ | ಹೊಸ ಸೈಟ್‌ಗಳು ಮತ್ತು ಆ್ಯಪ್‌ಗಳು | ಒಟ್ಟಾರೆ ಕಡಿಮೆ ಶ್ರಮ; ಮೊದಲೇ ಹೇಳಬೇಕು |
| ಪರಿಶೀಲಿಸಿ ಸರಿಪಡಿಸಿ | ಇರುವ ಸೈಟ್‌ಗಳು | ನಿಜವಾದ ಸಮಸ್ಯೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತದೆ; ಪ್ರತಿ ಪುಟಕ್ಕೆ ಕೇಂದ್ರೀಕೃತ ಪಾಸ್ ಬೇಕು |
| ವೃತ್ತಿಪರ ಲೆಕ್ಕಪರಿಶೋಧನೆ | ನಿಯಂತ್ರಿತ ವಲಯಗಳು, ದೊಡ್ಡ ಸೈಟ್‌ಗಳು, ಸಾರ್ವಜನಿಕ ಸಂಸ್ಥೆಗಳು | ಸಂಪೂರ್ಣ ಮತ್ತು ದಾಖಲಿತ; ಹಣ ಖರ್ಚಾಗುತ್ತದೆ |
| ಓವರ್‌ಲೇ ವಿಜೆಟ್ | ಶಿಫಾರಸು ಇಲ್ಲ | ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಸರಿಪಡಿಸಲಾರದು |
ಹೆಚ್ಚಿನ ಸಣ್ಣ ಸೈಟ್‌ಗಳಿಗೆ ಮೊದಲ ಎರಡು ಸಾಕು: AI ಗೆ ಆರಂಭದಿಂದಲೇ ಪ್ರವೇಶಯೋಗ್ಯವಾಗಿ ಕಟ್ಟಲು ಹೇಳಿ, ನಂತರ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಪರಿಶೀಲಿಸಿ.
ಹೆಚ್ಚು ಮುಖ್ಯವಾದ ಸರಿಪಡಿಸುವಿಕೆಗಳು
ಸರಿಯಾದ HTML ಅಂಶಗಳನ್ನು ಬಳಸಿ
ಹೆಚ್ಚಿನ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಸರಿಯಾದ HTML ಯಿಂದ ತಾನಾಗಿಯೇ ಬರುತ್ತದೆ. <button> ಫೋಕಸ್ ಆಗಬಹುದು, Enter ಮತ್ತು Space ಜೊತೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ, ಮತ್ತು ಬಟನ್ ಎಂದು ಘೋಷಿಸಲ್ಪಡುತ್ತದೆ. ಕ್ಲಿಕ್ ಹ್ಯಾಂಡ್ಲರ್ ಇರುವ <div> ಇವು ಯಾವುದೂ ಅಲ್ಲ. AI ಬರೆಯುವ ಕೋಡ್ ಕೆಲವೊಮ್ಮೆ ಎಲ್ಲದಕ್ಕೂ ಸ್ಟೈಲ್ ಮಾಡಿದ div ಬಳಸುತ್ತದೆ; ಸೆಮ್ಯಾಂಟಿಕ್ ಅಂಶಗಳನ್ನು ಕೇಳಿ:
- ಕ್ರಿಯೆಗಳಿಗೆ
<button>, ನ್ಯಾವಿಗೇಶನ್‌ಗೆ<a href> - ಪ್ರತಿ ಪುಟಕ್ಕೆ ಒಂದು
<h1>, ನಂತರ<h2>,<h3>ಕ್ರಮವಾಗಿ — ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು ಹೆಡಿಂಗ್‌ಗಳ ನಡುವೆ ಜಿಗಿಯುತ್ತಾರೆ - ಲ್ಯಾಂಡ್‌ಮಾರ್ಕ್‌ಗಳು:
<header>,<nav>,<main>,<footer> - ಪ್ರತಿ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗೆ ಸಂಪರ್ಕಿತ
<label> <html lang="en">ನಲ್ಲಿ ಪುಟದ ಭಾಷೆ
ನೇಟಿವ್ ಅಂಶ ಹೊಂದದಿದ್ದಾಗ ಮಾತ್ರ ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ — ಉದಾಹರಣೆಗೆ ಕಸ್ಟಮ್ ಟ್ಯಾಬ್ ಸೆಟ್ ಅಥವಾ combobox. ತಪ್ಪು ARIA ಏನೂ ಇಲ್ಲದುದಕ್ಕಿಂತ ಕೆಟ್ಟದು.
ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶ ಮತ್ತು ಗೋಚರ ಫೋಕಸ್
ಮೌಸ್‌ನಿಂದ ನೀವು ಮಾಡಬಹುದಾದ ಎಲ್ಲವೂ ಕೇವಲ ಕೀಬೋರ್ಡ್‌ನಿಂದಲೂ ಸಾಧ್ಯವಾಗಬೇಕು (WCAG 2.1.1). ಪುಟದ ಮೂಲಕ Tab ಒತ್ತಿ: ಪ್ರತಿ ಲಿಂಕ್, ಬಟನ್ ಮತ್ತು ಫೀಲ್ಡ್ ತಾರ್ಕಿಕ ಕ್ರಮದಲ್ಲಿ ತಲುಪಬೇಕು, ಮತ್ತು ಫೋಕಸ್ ಎಲ್ಲಿದೆ ಎಂದು ನೀವು ಯಾವಾಗಲೂ ನೋಡಬೇಕು (2.4.7 Focus Visible). WCAG 2.2 ಸೇರಿಸಿದೆ: ಫೋಕಸ್ ಆದ ಅಂಶ ಅಂಟಿಕೊಳ್ಳುವ ಹೆಡರ್ ಅಥವಾ ಕುಕೀ ಬ್ಯಾನರ್ ಹಿಂದೆ ಸಂಪೂರ್ಣವಾಗಿ ಮರೆಯಾಗಬಾರದು (2.4.11, Level AA).
ಸಾಮಾನ್ಯ ವೈಫಲ್ಯಗಳು: ಹೋವರ್ ಮೇಲೆ ಮಾತ್ರ ತೆರೆಯುವ ಮೆನುಗಳು, ಫೋಕಸ್ ಹಿಡಿದಿಡದ ಅಥವಾ Escape ನಿಂದ ಮುಚ್ಚಲಾಗದ ಮೋಡಲ್‌ಗಳು, ಮತ್ತು ಬದಲಿಯಿಲ್ಲದ CSS ನಲ್ಲಿ outline: none.
ಪಠ್ಯದ ಪರ್ಯಾಯಗಳು
ಪ್ರತಿ ಅರ್ಥಪೂರ್ಣ ಚಿತ್ರಕ್ಕೆ ಸಂದರ್ಭದಲ್ಲಿ ಏನು ತೋರಿಸುತ್ತದೆ ಎಂದು ಹೇಳುವ alt ಪಠ್ಯ ಬೇಕು (“ಟ್ಯಾಸ್ಟಿಂಗ್ ಮೆನು ಬಡಿಸುತ್ತಿರುವ ಬಾಣಸಿಗ”, “image1.jpg” ಅಲ್ಲ). ಅಲಂಕಾರಿಕ ಚಿತ್ರಗಳಿಗೆ ಖಾಲಿ alt="" ನೀಡಿ, ಆಗ ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಅವನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತದೆ. ಐಕಾನ್-ಮಾತ್ರ ಬಟನ್‌ಗಳಿಗೆ ಪ್ರವೇಶಯೋಗ್ಯ ಹೆಸರು ಬೇಕು (“Close”, “Search”). ವೀಡಿಯೊಗಳಿಗೆ ಕ್ಯಾಪ್ಷನ್, ಆಡಿಯೊಗೆ ಪ್ರತಿಲಿಪಿ ಬೇಕು.
ಬಣ್ಣ ಮತ್ತು ಕಾಂಟ್ರಾಸ್ಟ್
WCAG 2.2 AA ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1 ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತ ಬಯಸುತ್ತದೆ (1.4.3), ಮತ್ತು ಇನ್‌ಪುಟ್ ಗಡಿಗಳು ಹಾಗೂ ಅರ್ಥಪೂರ್ಣ ಐಕಾನ್‌ಗಳಂತಹ ಇಂಟರ್ಫೇಸ್ ಭಾಗಗಳಿಗೆ 3:1 (1.4.11). ತಿಳಿ ಬೂದು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯ ಮತ್ತು ತೆಳು ಬಟನ್‌ಗಳು ಸಾಮಾನ್ಯ ವೈಫಲ್ಯಗಳು. ಜೊತೆಗೆ, ಕೇವಲ ಬಣ್ಣದಿಂದ ಅರ್ಥ ತಿಳಿಸಬೇಡಿ — ಅಮಾನ್ಯ ಫೀಲ್ಡ್‌ನ ಕೆಂಪು ಗಡಿಗೆ ದೋಷ ಸಂದೇಶವೂ ಬೇಕು.
ಗಾತ್ರ ಬದಲಾವಣೆ ಮತ್ತು ರೀಫ್ಲೋ
200% ಝೂಮ್‌ನಲ್ಲಿ ಪಠ್ಯ ಬಳಸಬಹುದಾಗಿರಬೇಕು (1.4.4), ಮತ್ತು 320 CSS ಪಿಕ್ಸೆಲ್ ಅಗಲದಲ್ಲಿ ಪಕ್ಕಕ್ಕೆ ಸ್ಕ್ರೋಲ್ ಮಾಡದೆ ವಿಷಯ ಕೆಲಸ ಮಾಡಬೇಕು (1.4.10). ಒಂದು ಸ್ಪಂದನಶೀಲ ಲೇಔಟ್ ಇದರ ಬಹುಭಾಗ ನಿಭಾಯಿಸುತ್ತದೆ.
ಗುರಿ ಗಾತ್ರ, ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ದೋಷಗಳು
- ಗುರಿ ಗಾತ್ರ: WCAG 2.2 AA ಪಾಯಿಂಟರ್ ಗುರಿಗಳಿಗೆ ಕನಿಷ್ಠ 24 ಬೈ 24 CSS ಪಿಕ್ಸೆಲ್, ಅಥವಾ ಚಿಕ್ಕವುಗಳ ಸುತ್ತ ಸಾಕಷ್ಟು ಅಂತರ ಬೇಕು (2.5.8). ಫೋನ್‌ನಲ್ಲಿ ದೊಡ್ಡದು ಹೆಚ್ಚು ಸ್ನೇಹಪರ.
- ಫಾರ್ಮ್‌ಗಳು: ಗೋಚರ ಲೇಬಲ್‌ಗಳು (ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಮಾತ್ರವಲ್ಲ), ಸ್ಪಷ್ಟ ಸೂಚನೆಗಳು, ಮತ್ತು ಏನು ತಪ್ಪು ಮತ್ತು ಹೇಗೆ ಸರಿಪಡಿಸಬೇಕು ಎಂದು ಹೇಳುವ ದೋಷ ಸಂದೇಶಗಳು ಫೀಲ್ಡ್ ಪಕ್ಕದಲ್ಲಿ.
- ಲಾಗಿನ್: ಒಗಟು ಬಿಡಿಸಲು ಅಥವಾ ಪರ್ಯಾಯವಿಲ್ಲದೆ ಕೋಡ್ ಬರೆಸಲು ಜನರನ್ನು ಒತ್ತಾಯಿಸಬೇಡಿ; ಪಾಸ್‌ವರ್ಡ್ ಮ್ಯಾನೇಜರ್ ಮತ್ತು ಅಂಟಿಸುವಿಕೆಗೆ ಅವಕಾಶ ನೀಡಿ (3.3.8 Accessible Authentication).
ಕೆಲಸ ಮಾಡುವ ಪ್ರಾಂಪ್ಟ್‌ಗಳು
ಈ ಸೈಟ್ ಅನ್ನು WCAG 2.2 Level AA ಗೆ ಅನುಗುಣವಾಗಿ ಕಟ್ಟಿ: ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಲ್ಯಾಂಡ್‌ಮಾರ್ಕ್‌ಗಳು, ಪ್ರತಿ ಪುಟಕ್ಕೆ ಒಂದು h1 ಮತ್ತು ಕ್ರಮದಲ್ಲಿ ಹೆಡಿಂಗ್‌ಗಳು, ನಿಜವಾದ ಬಟನ್ ಮತ್ತು ಲಿಂಕ್ ಅಂಶಗಳು, ಪ್ರತಿ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗೆ ಲೇಬಲ್, ಗೋಚರ ಫೋಕಸ್ ಶೈಲಿಗಳು, ಕನಿಷ್ಠ 4.5:1 ಪಠ್ಯ ಕಾಂಟ್ರಾಸ್ಟ್, ಅರ್ಥಪೂರ್ಣ ಚಿತ್ರಗಳಿಗೆ alt ಪಠ್ಯ ಮತ್ತು ಅಲಂಕಾರಿಕ ಚಿತ್ರಗಳಿಗೆ alt="", ಮತ್ತು html lang ಹೊಂದಿಸಿ.
/signup ಮತ್ತು /checkout ಪುಟಗಳ ಪ್ರವೇಶಯೋಗ್ಯತೆಯನ್ನು ಪರಿಶೀಲಿಸಿ. ಕೇವಲ-ಕೀಬೋರ್ಡ್ ಬಳಕೆ, ಫೋಕಸ್ ಕ್ರಮ, ಗೋಚರ ಫೋಕಸ್, ಲೇಬಲ್‌ಗಳು, ದೋಷ ಸಂದೇಶಗಳು, ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಐಕಾನ್ ಬಟನ್‌ಗಳ ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಹೆಸರುಗಳನ್ನು ನೋಡಿ. ಪ್ರತಿ ಸಮಸ್ಯೆಯನ್ನು WCAG ಮಾನದಂಡದೊಂದಿಗೆ ಪಟ್ಟಿ ಮಾಡಿ, ನಂತರ ಅಗತ್ಯವಿರುವಷ್ಟೇ ದೃಶ್ಯ ವಿನ್ಯಾಸ ಬದಲಿಸಿ ಸರಿಪಡಿಸಿ.
ಮೊಬೈಲ್ ಮೆನು ಕೀಬೋರ್ಡ್‌ನಿಂದ ಬಳಸಲಾಗುವುದಿಲ್ಲ. ಅದನ್ನು aria-expanded ಇರುವ ಬಟನ್ ಮಾಡಿ, ತೆರೆದಾಗ ಫೋಕಸ್ ಮೆನುವಿನೊಳಗೆ ಸರಿಸಿ, Escape ನಿಂದ ಮುಚ್ಚಿ ಮತ್ತು ಫೋಕಸ್ ಅನ್ನು ಬಟನ್‌ಗೆ ಹಿಂತಿರುಗಿಸಿ.
ಹಂತ ಹಂತವಾಗಿ
- ಸ್ವಯಂಚಾಲಿತ ಪರಿಶೀಲನೆ ನಡೆಸಿ. Chrome DevTools ನಲ್ಲಿ Lighthouse ನ Accessibility ವಿಭಾಗ, ಅಥವಾ axe ಬ್ರೌಸರ್ ವಿಸ್ತರಣೆ, ಪ್ರತಿ ಮುಖ್ಯ ಪುಟದಲ್ಲಿ. ಅದು ವರದಿ ಮಾಡುವ ಎಲ್ಲವನ್ನೂ ಸರಿಪಡಿಸಿ.
- ಮೌಸ್ ತೆಗೆಯಿರಿ. ಪ್ರತಿ ಪುಟದ ಮೂಲಕ Tab ಒತ್ತಿ ಪ್ರಮುಖ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ — ಸೈನ್ ಅಪ್, ಹುಡುಕಾಟ, ಚೆಕ್‌ಔಟ್. ತಲುಪಲಾಗದ, ಫೋಕಸ್ ಕಾಣದ, ಅಥವಾ ಹೊರಬರಲಾಗದ ಯಾವುದೇ ವಿಷಯವನ್ನು ಗಮನಿಸಿ.
- 200% ಝೂಮ್ ಮಾಡಿ ಮತ್ತು ವಿಂಡೋ ಫೋನ್ ಅಗಲಕ್ಕೆ ಕುಗ್ಗಿಸಿ. ಏನೂ ಕತ್ತರಿಸಬಾರದು ಅಥವಾ ಪಕ್ಕಕ್ಕೆ ಸ್ಕ್ರೋಲ್ ಬೇಕಾಗಬಾರದು.
- ಹತ್ತು ನಿಮಿಷ ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪ್ರಯತ್ನಿಸಿ: Mac ಮತ್ತು iPhone ನಲ್ಲಿ VoiceOver, Android ನಲ್ಲಿ TalkBack, ಅಥವಾ Windows ನಲ್ಲಿ NVDA (ಉಚಿತ). ಹೆಡಿಂಗ್‌ಗಳು, ಲಿಂಕ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಕೇಳಿ. ಹೆಸರಿಲ್ಲದ “Button”, ಅಥವಾ “link, click here” ಎಂದರೆ ಇನ್ನೂ ಕೆಲಸ ಬಾಕಿ ಇದೆ.
- ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಿಸಿ ಪಠ್ಯ, ಬಟನ್ ಮತ್ತು ಇನ್‌ಪುಟ್‌ಗಳಿಗೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಪರಿಶೀಲಕದೊಂದಿಗೆ.
- ಸರಿಪಡಿಸಿ, ನಂತರ ಅದೇ ಕಾರ್ಯಗಳನ್ನು ಮತ್ತೆ ಪರೀಕ್ಷಿಸಿ.
- ಪ್ರವೇಶಯೋಗ್ಯತೆ ಹೇಳಿಕೆ ಪ್ರಕಟಿಸಿ — ನೀವು ಯಾವ ಮಾನದಂಡ ಗುರಿಯಾಗಿಸುತ್ತೀರಿ ಮತ್ತು ಸಮಸ್ಯೆಗಳನ್ನು ಹೇಗೆ ವರದಿ ಮಾಡಬೇಕು ಎಂದು. ಆ ವರದಿಗಳಿಗೆ ಉತ್ತರಿಸಿ.
ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
- ಕೋಡ್ ಸರಿಪಡಿಸುವ ಬದಲು ಓವರ್‌ಲೇ ವಿಜೆಟ್ ಅವಲಂಬಿಸುವುದು.
- ಫೋಕಸ್ ಔಟ್‌ಲೈನ್‌ಗಳನ್ನು ತೆಗೆಯುವುದು ಅವು ಅಚ್ಚುಕಟ್ಟಿಲ್ಲವೆಂದು, ಬದಲಿ ಇಲ್ಲದೆ.
- ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವೇ ಏಕೈಕ ಲೇಬಲ್ ಆಗಿರುವುದು. ಯಾರಾದರೂ ಟೈಪ್ ಮಾಡಲು ಆರಂಭಿಸಿದಾಗ ಅದು ಮಾಯವಾಗುತ್ತದೆ ಮತ್ತು ಆಗಾಗ್ಗೆ ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಆಗಿರುತ್ತದೆ.
- “Click here” ಮತ್ತು “Read more” ಲಿಂಕ್‌ಗಳು. ಸಂದರ್ಭವಿಲ್ಲದೆ, ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರಿಗೆ ಒಂದೇ ರೀತಿಯ ಲಿಂಕ್‌ಗಳ ಪಟ್ಟಿ ಕೇಳುತ್ತದೆ.
- ಕೀವರ್ಡ್‌ಗಳಿಂದ ತುಂಬಿದ alt ಪಠ್ಯ. Alt ಪಠ್ಯ ಜನರಿಗಾಗಿ; ಚಿತ್ರವನ್ನು ವಿವರಿಸಿ.
- ಒಮ್ಮೆ ಮಾತ್ರ ಪರೀಕ್ಷಿಸುವುದು. ಪ್ರತಿ ಹೊಸ ವೈಶಿಷ್ಟ್ಯ ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶವನ್ನು ಮುರಿಯಬಹುದು. ನಿಮ್ಮ ಪ್ರಾರಂಭಕ್ಕೆ ಮೊದಲಿನ ಪರೀಕ್ಷೆ ಗೆ ಕೀಬೋರ್ಡ್ ಪಾಸ್ ಸೇರಿಸಿ.
ಪ್ರವೇಶಯೋಗ್ಯತೆ ಪರಿಶೀಲನಾಪಟ್ಟಿ
- ಮುಖ್ಯ ಪುಟಗಳಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತ ಪರಿಶೀಲನೆ (Lighthouse ಅಥವಾ axe) ಶುದ್ಧ
- ಪ್ರತಿ ಕಾರ್ಯವನ್ನು ಕೇವಲ ಕೀಬೋರ್ಡ್‌ನಿಂದ ಪೂರ್ಣಗೊಳಿಸಬಹುದು
- ಫೋಕಸ್ ಯಾವಾಗಲೂ ಗೋಚರ ಮತ್ತು ಅಂಟಿಕೊಳ್ಳುವ ಅಂಶಗಳ ಹಿಂದೆ ಎಂದಿಗೂ ಮರೆಯಾಗುವುದಿಲ್ಲ
- ಸೆಮ್ಯಾಂಟಿಕ್ ಹೆಡಿಂಗ್‌ಗಳು, ಲ್ಯಾಂಡ್‌ಮಾರ್ಕ್‌ಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಲಿಂಕ್‌ಗಳು;
langಹೊಂದಿಸಲಾಗಿದೆ - ಅರ್ಥಪೂರ್ಣ alt ಪಠ್ಯ; ಅಲಂಕಾರಿಕ ಚಿತ್ರಗಳಿಗೆ
alt=""; ವೀಡಿಯೊಗಳಿಗೆ ಕ್ಯಾಪ್ಷನ್ - ಪಠ್ಯ ಕಾಂಟ್ರಾಸ್ಟ್ ≥ 4.5:1 (ದೊಡ್ಡ ಪಠ್ಯ ≥ 3:1); ಇಂಟರ್ಫೇಸ್ ಭಾಗಗಳು ≥ 3:1
- 200% ಝೂಮ್ ಮತ್ತು 320 px ಅಗಲದಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ
- ಪ್ರತಿ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗೆ ಗೋಚರ ಲೇಬಲ್ ಮತ್ತು ಸ್ಪಷ್ಟ ದೋಷ ಸಂದೇಶಗಳು
- ಸಮಸ್ಯೆಗಳನ್ನು ವರದಿ ಮಾಡುವ ದಾರಿಯೊಂದಿಗೆ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಹೇಳಿಕೆ
ಇವುಗಳ ಹಿಂದಿನ ಪರಿಕಲ್ಪನೆಗಳಿಗೆ, ವೆಬ್ ಪ್ರವೇಶಯೋಗ್ಯತೆ ಎಂದರೇನು ಓದಿ. ಪ್ರವೇಶಯೋಗ್ಯ ವಿನ್ಯಾಸ ಮತ್ತು ಉತ್ತಮ ವಿನ್ಯಾಸ ಬಹಳ ಅತಿಕ್ರಮಿಸುತ್ತವೆ; AI ಜೊತೆ ಚೆನ್ನಾಗಿ ಕಾಣುವ ಆ್ಯಪ್ ವಿನ್ಯಾಸ ದೃಶ್ಯ ಭಾಗವನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ.
Mythex ನಲ್ಲಿ ಪ್ರವೇಶಯೋಗ್ಯತೆ
Mythex ನೀವು ಕೇಳುವ ಮಾನದಂಡದೊಂದಿಗೆ ಕಟ್ಟುತ್ತದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಮೊದಲ ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ ಮತ್ತು ಅನುಸರಣೆಗಳಲ್ಲಿ “WCAG 2.2 AA” ಹಾಕಿ. Preview ನ ಫೋನ್-ಗಾತ್ರದ ಫ್ರೇಮ್ ಬಳಸಿ ಸಣ್ಣ ಪರದೆಗಳನ್ನು ಪರಿಶೀಲಿಸಬಹುದು (Preview and Code), ಆದರೆ ಕೀಬೋರ್ಡ್, ಝೂಮ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆಗಳು ಪ್ರಕಟವಾದ URL ನಲ್ಲಿ ಅಥವಾ ಪ್ರತ್ಯೇಕ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ತೆರೆದ preview ನಲ್ಲಿ ಉತ್ತಮ ಕೆಲಸ ಮಾಡುತ್ತವೆ. ಪುಟವನ್ನು ಪರಿಶೀಲಿಸಲು ಏಜೆಂಟ್‌ಗೆ ಹೇಳಿ, ಅದು ಕಂಡುಕೊಂಡದ್ದನ್ನು ಸರಿಪಡಿಸಲಿ, ನಂತರ ಸರಿಪಡಿಸಿದ್ದನ್ನು ನೀವೇ ಪರೀಕ್ಷಿಸಿ — ಸ್ವಯಂಚಾಲಿತ ಪಾಸ್ ಒಂದು ಆರಂಭ, ಅಂತಿಮ ಅನುಮೋದನೆಯಲ್ಲ.
ಪ್ರಶ್ನೆಗಳು
ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಈಗಿನ ಪ್ರವೇಶ ಮಾನದಂಡ ಯಾವುದು?
ಸೆಪ್ಟೆಂಬರ್ 2026 ರ ವೇಳೆಗೆ ಪ್ರಸ್ತುತ W3C ಮಾನದಂಡ WCAG 2.2, ಅಕ್ಟೋಬರ್ 2023 ರಲ್ಲಿ ಮೊದಲು ಪ್ರಕಟವಾದದ್ದು. ಹೆಚ್ಚಿನ ಸಂಸ್ಥೆಗಳು ಮತ್ತು ಅನೇಕ ಕಾನೂನುಗಳು Level AA ಗುರಿಯಾಗಿಸುತ್ತವೆ. WCAG 3 ಇನ್ನೂ ಆರಂಭಿಕ ಕರಡು.
ಪ್ರವೇಶ ಓವರ್‌ಲೇ ನನ್ನ ಸೈಟ್ ಅನ್ನು ಅನುಸರಣೆಯಲ್ಲಿ ಇಡಬಹುದೇ?
ಅದರ ಮೇಲೆ ಅವಲಂಬಿಸಬೇಡಿ. ಓವರ್‌ಲೇಗಳು ಪುಟದ ಮೇಲೆ ಟೂಲ್‌ಬಾರ್ ಸೇರಿಸುತ್ತವೆ, ಆದರೆ ಕೆಳಗಿನ ಕೋಡ್‌ನಲ್ಲಿರುವ ಕಾಣೆಯಾದ ಲೇಬಲ್‌ಗಳು, ಮುರಿದ ಕೀಬೋರ್ಡ್ ಪ್ರವೇಶ ಅಥವಾ ದುರ್ಬಲ ರಚನೆಯನ್ನು ಸರಿಪಡಿಸಲಾರವು. ಸೈಟ್ ಅನ್ನೇ ಸರಿಪಡಿಸುವುದೇ ಅದನ್ನು ಬಳಸಬಹುದಾಗಿಸುತ್ತದೆ.
ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷಕರು ಎಲ್ಲ ಸಮಸ್ಯೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯುತ್ತಾರೆಯೇ?
ಇಲ್ಲ. Lighthouse ಮತ್ತು axe ನಂತಹ ಉಪಕರಣಗಳು ಕಾಣೆಯಾದ alt ಪಠ್ಯ, ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಮತ್ತು ಲೇಬಲ್ ಇಲ್ಲದ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಹಿಡಿಯುತ್ತವೆ, ಆದರೆ ಅನೇಕ ಸಮಸ್ಯೆಗಳು — ಗೊಂದಲಮಯ ಫೋಕಸ್ ಕ್ರಮ, ಅರ್ಥವಿಲ್ಲದ ಲಿಂಕ್ ಪಠ್ಯ, ಇದ್ದರೂ ತಪ್ಪಾದ alt ಪಠ್ಯ — ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ನೊಂದಿಗೆ ಮನುಷ್ಯರು ಪರಿಶೀಲಿಸಬೇಕು.
WCAG ಯಾವ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಬಯಸುತ್ತದೆ?
WCAG 2.2 Level AA ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1 ಬಯಸುತ್ತದೆ, ಹಾಗೂ ಇನ್‌ಪುಟ್ ಗಡಿಗಳು ಮತ್ತು ಅರ್ಥ ಸೂಚಿಸುವ ಐಕಾನ್‌ಗಳಂತಹ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಘಟಕಗಳಿಗೆ 3:1.