ಫಾರ್ಮ್ ದೋಷಗಳಿಗಾಗಿ (Form Errors) ARIA ಅನ್ನು ಹೇಗೆ ಜೋಡಿಸುವುದು
ಹೆಚ್ಚಿನ ಫಾರ್ಮ್ಗಳು ದೃಷ್ಟಿ ಇರುವ ಬಳಕೆದಾರರಿಗೆ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಆದರೆ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನವನ್ನು (assistive technology) ಬಳಸುವವರಿಗೆ ವಿಫಲವಾಗುತ್ತವೆ. ದೃಷ್ಟಿ ಇರುವ ಬಳಕೆದಾರರು ಕೆಂಪು ಬಾರ್ಡರ್ ಮತ್ತು ದೋಷ ಸಂದೇಶವನ್ನು ನೋಡುತ್ತಾರೆ. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಸುವವರಿಗೆ ಹೆಚ್ಚಾಗಿ ಏನೂ ಕೇಳಿಸುವುದಿಲ್ಲ.
ನೀವು ಇದನ್ನು ಎರಡು ARIA ಗುಣಲಕ್ಷಣಗಳು (attributes) ಮತ್ತು ಒಂದು ಸಣ್ಣ ಲೈವ್ ರೀಜನ್ (live region) ಮೂಲಕ ಸರಿಪಡಿಸಬಹುದು. ಈ ಬದಲಾವಣೆಗೆ 50 ಸಾಲುಗಳಿಗಿಂತ ಕಡಿಮೆ ಕೋಡ್ ಬೇಕಾಗುತ್ತದೆ.
ನಿಮ್ಮ ದೋಷಗಳನ್ನು ಇನ್ಪುಟ್ಗಳಿಗೆ (inputs) ಹೇಗೆ ಸಂಪರ್ಕಿಸುವುದು ಎಂಬುದು ಇಲ್ಲಿದೆ.
aria-describedbyಬಳಸಿ ಇನ್ಪುಟ್ ದೋಷದ ಎಲಿಮೆಂಟ್ ಅನ್ನು (error element) ಸೂಚಿಸಬೇಕಾಗುತ್ತದೆ. ನಿಮ್ಮ ಇನ್ಪುಟ್ಗೆaria-describedbyಅನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಅದರ ಮೌಲ್ಯವನ್ನು (value) ನಿಮ್ಮ error div ನ ID ಗೆ ಹೊಂದಿಸಿ.
ಉದಾಹರಣೆ:
- Input ID:
email-input - Error ID:
email-error - Code:
aria-describedby="email-error"
ಬಳಕೆದಾರರು ಇನ್ಪುಟ್ ಮೇಲೆ ಗಮನ ಹರಿಸಿದಾಗ (focus), ಸ್ಕ್ರೀನ್ ರೀಡರ್ ದೋಷ ಸಂದೇಶವನ್ನು ಓದುವಂತೆ ಇದು ಸೂಚಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬಳಿ ಸಹಾಯ ಪಠ್ಯ (help text) ಇದ್ದರೆ, ನೀವು ಒಂದೇ ಬಾರಿಗೆ ಹಲವು ID ಗಳನ್ನು ಸೇರಿಸಬಹುದು.
aria-invalidಬಳಸಿ ಈ ಗುಣಲಕ್ಷಣವು ಬಳಕೆದಾರರಿಗೆ ನಮೂದಿಸಿದ ಮಾಹಿತಿ ತಪ್ಪಾಗಿದೆ ಎಂದು ತಿಳಿಸುತ್ತದೆ. ದೋಷ ಕಂಡುಬಂದಾಗaria-invalidಅನ್ನುtrueಎಂದು ಹೊಂದಿಸಿ. ದೋಷ ನಿವಾರಣೆಯಾದಾಗ ಅದನ್ನುfalseಎಂದು ಹೊಂದಿಸಿ.
ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು ಎಂದರೆ, ವ್ರ್ಯಾಪರ್ div ಅನ್ನು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆरঙಿಸುವುದು ಆದರೆ ಕೇವಲ ಇನ್ಪುಟ್ಗೆ ಮಾತ್ರ aria-invalid ನೀಡುವುದು. ಇದು ಹೊಂದಾಣಿಕೆಯ ಕೊರತೆಯನ್ನು (mismatch) ಉಂಟುಮಾಡುತ್ತದೆ. ನಿಮ್ಮ ದೃಶ್ಯ ಶೈಲಿಗಳು (visual styles) ಮತ್ತು ARIA ಗುಣಲಕ್ಷಣಗಳು ಒಂದೇ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಲೈವ್ ರೀಜನ್ (live region) ಅನ್ನು ಸೇರಿಸಿ
ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡುತ್ತಿರುವಾಗಲೇ ದೋಷವು ಕಾಣಿಸಿಕೊಂಡರೆ, ಅವರು ಅದನ್ನು ಗಮನಿಸದೇ ಇರಬಹುದು. ನಿಮ್ಮ error div ಮೇಲೆ
aria-live="polite"ಬಳಸಿ.
aria-live="polite"ಎಂಬುದು ನೈಸರ್ಗಿಕ ವಿರಾಮದ ಸಮಯದಲ್ಲಿ ದೋಷವನ್ನು ಘೋಷಿಸಲು ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗೆ ಸೂಚಿಸುತ್ತದೆ.- ತುರ್ತು ಪರಿಸ್ಥಿತಿ ಇಲ್ಲದ ಹೊರತು "assertive" ಅನ್ನು ಬಳಸಬೇಡಿ. ಫಾರ್ಮ್ ದೋಷಗಳು ತುರ್ತು ಪರಿಸ್ಥಿತಿಗಳಲ್ಲ.
- ಅಸಿಂಕ್ ವ್ಯಾಲಿಡೇಶನ್ (async validation) ಅನ್ನು ನಿರ್ವಹಿಸಿ ನೀವು ಹಿನ್ನೆಲೆಯಲ್ಲಿ (background) ಬಳಕೆದಾರರ ಹೆಸರು ಅಥವಾ ವಿಳಾಸವನ್ನು ಪರಿಶೀಲಿಸುತ್ತಿದ್ದರೆ, ಸಿಸ್ಟಮ್ ಕೆಲಸ ಮಾಡುತ್ತಿದೆ ಎಂದು ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಯಬೇಕು.
- Pattern A: ಪರಿಶೀಲನೆ ನಡೆಯುತ್ತಿರುವಾಗ ಇನ್ಪುಟ್ ಮೇಲೆ
aria-busy="true"ಬಳಸಿ. - Pattern B: "Verifying username..." ನಂತಹ ಸ್ಥಿತಿ ಅಪ್ಡೇಟ್ಗಳನ್ನು ಘೋಷಿಸಲು ಗುಪ್ತ ಲೈವ್ ರೀಜನ್ (hidden live region) ಬಳಸಿ.
ವಿವಿಧ ಸ್ಕ್ರೀನ್ ರೀಡರ್ಗಳಲ್ಲಿ Pattern B ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿದೆ.
ಪರೀಕ್ಷಿಸುವುದು (Testing) ಕಡ್ಡಾಯವಾಗಿದೆ. ಸ್ವಯಂಚಾಲಿತ ಪರಿಕರಗಳು (Automated tools) ಸಹಕಾರಿಯಾಗಿದ್ದರೂ, ಅವು ಮ್ಯಾನುಯಲ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಬದಲಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. Windows ನಲ್ಲಿ NVDA ಅಥವಾ macOS ನಲ್ಲಿ VoiceOver ಬಳಸಿ.
ನಿಮ್ಮ ಪರೀಕ್ಷಾ ಚೆಕ್ಲಿಸ್ಟ್:
- ಫೀಲ್ಡ್ಗೆ Tab ಮಾಡಿ. ಲೇಬಲ್ ಘೋಷಿಸಲ್ಪಡಬೇಕು.
- ತಪ್ಪಾದ ಮೌಲ್ಯವನ್ನು ನಮೂದಿಸಿ. ದೋಷವು ಘೋಷಿಸಲ್ಪಡಬೇಕು.
- ಮತ್ತೆ ಫೀಲ್ಡ್ಗೆ Tab ಮಾಡಿ. ಲೇಬಲ್ ಮತ್ತು ದೋಷ ಎರಡೂ ಒಟ್ಟಿಗೆ ಘೋಷಿಸಲ್ಪಡಬೇಕು.
- ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ. ದೋಷ ಸಂದೇಶವು ಅಳಿಸಿಹೋಗಬೇಕು.