Guidelines
Security UX
பாதுகாப்பு பயனர் அனுபவம்
Guidelines and UI components for authenticating users safely. Focuses on MFA/OTP designs, password entry visibility controls, and defensive warnings.
பயனர்கள் தங்கள் கணக்குகளைப் பாதுகாப்பாக இயக்கவும் அங்கீகரிக்கவும் உதவும் இடைமுக வடிவமைப்புகள்.
1. இருபடி அங்கீகாரம் (MFA / OTP Entry)
இருபடி அங்கீகாரம் (MFA) மற்றும் ஒருமுறை கடவுச்சொல் (OTP) பெட்டிகளில் குவியக் கட்டுப்பாடு மிக முக்கியமானது. பயனர் ஒவ்வொரு பெட்டியையும் தனித்தனியாக கிளிக் செய்ய வேண்டியதில்லாமல், தானியங்கு முறையில் தட்டச்சு செய்ய உதவ வேண்டும்.
முக்கிய விதிகள்:
- தானியங்கு நகர்வு (Autofocus): ஒரு பெட்டியில் எண் தட்டச்சு செய்யப்பட்டவுடன் குவியம் (Focus) அடுத்த பெட்டிக்கு நகர வேண்டும்.
Backspaceஅழுத்தும்போது முந்தைய பெட்டிக்குச் செல்ல வேண்டும். - விசைப்பலகை மேம்பாடு: மொபைல் சாதனங்களில் எண்களை மட்டும் உள்ளிட ஏதுவாக
inputMode="numeric"மற்றும்pattern="[0-9]*"பண்புகளைப் பயன்படுத்தவும். - HTML5 Autocomplete (W3C Standard): குறுஞ்செய்திகளில் வரும் குறியீடுகளைத் தானாக நிரப்ப
autocomplete="one-time-code"என்பதைப் பயன்படுத்தவும் (WCAG 1.3.5). - விளக்க உரை: கடவுச்சொல் எந்த எண்ணிற்கு அல்லது முகவரிக்கு அனுப்பப்பட்டது என்பதை தமிழ் மற்றும் ஆங்கிலத்தில் தெளிவாகக் காட்டவும்.
2. கடவுச்சொல் வடிவமைப்பு மற்றும் பின்னூட்டம்
படிவத்தை சமர்ப்பித்த பிறகு பிழைகளை அறிவிக்காமல், தட்டச்சு செய்யும்போதே கடவுச்சொல் விதிகளை சரிபார்க்கும் எளிய பட்டியலை வழங்க வேண்டும்.
ஊடாடும் வடிவமைப்பு விதிகள்:
- கடவுச்சொல் வலிமை: கடவுச்சொல் வலிமையை விளக்கும் வர்ண அளவீடு சிவப்பு (மிக மெலிந்தது) முதல் பச்சை (மிக வலிமையானது) வரை மாற வேண்டும்.
- தெரிவுத்தன்மை பொத்தான்: குறியீடுகளை சரிபார்க்க ஒரு கண் சின்னத்தை (Eye and EyeOff) அமைத்து, அதனை விசைப்பலகை மூலம் இயக்க அனுமதிக்க வேண்டும்.
- WAI-ARIA விதிகள்: விதிகள் பூர்த்தி செய்யப்பட்டதை பச்சை நிற சரிபார்ப்பு மூலம் காட்டவும். மேலும், இது மாறும் போது திரை வாசிப்பான்களுக்கு தெரிவிக்க
aria-live="assertive"பண்பைப் பயன்படுத்தவும்.