Guidelines
Keyboard Navigation
விசைப்பலகை வழிசெலுத்தல்
Master guidelines for keyboard accessibility (WCAG 2.2), detail keybinding matrices for complex UI components, and test focus traversal flows.
பயனர்கள் விசைப்பலகை மூலம் மட்டுமே அனைத்து கட்டுப்பாடுகளையும் எளிதாகவும் துல்லியமாகவும் இயக்குவதை உறுதிசெய்யும் வழிகாட்டி.
ஊடாடும் விசைப்பலகை சோதனை மாதிரி
பட்டியலைத் தேர்வு செய்து, விசைப்பலகையில் விசைகளை அழுத்தி, குவியம் (Focus) மாறும் தன்மையைக் கீழே உள்ள லாக் மூலம் நேரடியாகக் காணவும்.
குவியக் காட்டி விதிகள் (Focus Indicator)
விசைப்பலகையைப் பயன்படுத்தும் பயனர்களுக்கு எந்தக் கட்டுப்பாடு தற்போது குவியத்தில் உள்ளது என்பதைத் தெளிவாகக் காட்டுவது கட்டாயமாகும்.
- வடிவமைப்பு: அனைத்து கட்டுப்பாடுகளும்
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2குவிய வளையத்தைப் பயன்படுத்த வேண்டும். - விசைப்பலகைக்கு மட்டும்:
:focus-visibleபண்பைப் பயன்படுத்தி, விசைப்பலகை வழிசெலுத்தலின் போது மட்டுமே இந்த வளையம் தோன்றுவதை உறுதிசெய்யவும் (சுட்டி பயனர்களுக்கு இது தெரியாது). - நிற முரண்பாடு: பின்னணிக்கு ஏற்ப குறைந்தபட்சம் 4.5:1 முரண்பாடு இருப்பதை இந்த வளையத்தின் நிறம் உறுதிசெய்கிறது.
WAI-ARIA APG (Authoring Practices Guide): தனிப்பயனாக்கப்பட்ட ஊடாடும் கூறுகள் (உம்: தனிப்பயன் கீழ்தொங்கு பட்டிகள் அல்லது தாவல்கள்) அனைத்தும் தரப்படுத்தப்பட்ட WAI-ARIA APG விசைப்பலகை தொடர்பு மாதிரிகளைப் பின்பற்ற வேண்டும். இதனால் பயனர்கள் புதிய முறைகளைக் கற்கத் தேவையில்லாமல், வழக்கமான மற்றும் கணிக்கக்கூடிய அனுபவத்தைப் பெறுவார்கள்.
கூறுகளுக்கான விசைப்பலகை விதிகள்
| கூறின் வகை | விசை (Key) | விளக்கம் / நடத்தை |
|---|---|---|
| பொத்தான்கள் / செயல்கள் | Tab | குவியத்தை பொத்தானுக்கு நகர்த்தும். |
| Enter / Space | குறிப்பிட்ட செயலைத் தொடங்கும். | |
| Shift + Tab | குவியத்தை முந்தைய கட்டுப்பாட்டுக்கு நகர்த்தும். | |
| கீழ்தொங்கு பட்டி (Select) | Enter / Space | பட்டியலைத் திறந்து முதல் உருப்படியை முன்னிலைப்படுத்தும். |
| Arrow Down / Up | பட்டியலின் உருப்படிகளுக்கு இடையே நகரும். | |
| Enter / Space | முன்னிலைப்படுத்தப்பட்ட உருப்படியைத் தேர்வு செய்து பட்டியலை மூடும். | |
| Escape | தேர்வு செய்யாமல் பட்டியலை மூடி, குவியத்தை மீண்டும் பொத்தானுக்குக் கொண்டு வரும். | |
| தாவல்கள் (Tabs) | Tab | தாவல் பகுதிக்கு குவியத்தைக் கொண்டு வரும். |
| Arrow Left / Right | தாவல்களை மாற்றி அதற்கான உள்ளடக்கத்தைக் காட்டும். | |
| Home / End | முதல்/கடைசி தாவலுக்கு நேரடியாகக் குவியத்தை நகர்த்தும். | |
| மாடல்கள் / தாள் (Dialog) | Tab | மாடலுக்குள் இருக்கும் கட்டுப்பாடுகளுக்கு இடையே மட்டுமே குவியத்தை நகர்த்தும் (Focus Trap). |
| Escape | மாடலை மூடி, குவியத்தை முந்தைய பக்கத்திற்கு கொண்டு வரும். | |
| Shift + Tab | மாடலுக்குள் பின்னோக்கி குவியத்தை நகர்த்தும். |