ඔබ කීපයක් ටැබ් කරමින් පෝරමයක් පුරවාගෙන යන විට, බොත්තමක් හෝ ඉන්පුට් එකක් වටා දිස්වන සුළුවූ රේඛාව ඔබට හොඳින් හැඟේ. මේක නේටිව් ෆෝකස් රින්ග් කියලා කියන එක, බ්රවුසරය අපේක්ෂා කරන පරිදි ස්වයංක්රීයව පෙන්වන ඉදිරිපත් කිරීමක්.
මම අලුත් ලොග් ඉන් පෝරමක් නිර්මාණය කරන අතරතුර, outline:none කියලා CSS එකේ ලියලා, ඒ රින්ග් අඩු කරලා. ඒක නිසා කී-බෝඩ් භාවිතා කරන පරිශීලකයන්ට පෝරමයේ ඕනෑම ක්ෂේත්රයක් තෝරාගෙන ඇති බව නොදැන ගන්න පුළුවන්. ඒ වගේම, වෙනත් අභිලාෂයන්ට box-shadow එකක් එක්කරලා හදලා බලනවාද? බ්රවුසර අනුව එය වෙනස් වීම, කේතය අධික වීම, හයි-කොන්ට්රාස්ට් තේමා වල අස්ථිරතාව වැනි ගැටළු උදාවෙයි.
මෙවැනි ගැටළුවක් පෙනෙන්නේ ඇයි කියලා බලනවා නම්, ෆෝකස් රින්ග් කියන්නේ පරිශීලකයා කී-බෝඩ් (Tab) හරහා ෆෝකස් ලබා ගත් අවස්ථාවල පමණක් පෙන්වීමයි. මවුස් ක්ලික් කරලා ඇත්නම් බොහෝ බ්රවුසරයන් රින්ග් අඳුරු කරයි. මෙය බ්රවුසරයක් පසුපස තිබෙන input modality heuristics මගින් තීරණය වේ.
බ්රවුසරවල රින්ග් අඳුරු කිරීමේ ක්රමය වර්ගවලට අනුව වෙනස් වේ. Chrome හි FocusRingController කියන අභ්යන්තර කොටස කී-බෝඩ් සිග්නල් අසා, රින්ග් පෙන්වීමට සලස්වයි. Firefox හි එය CSS outline ගුණයෙන් දෘශ්යම කරයි, Safari හිද Chrome සමඟ සමාන නමුත් වර්ණ සහ තීව්රතාව වෙනස් වේ. එමනිසා රින්ග් එක CSS එකක් පමණක් නොව, OS‑මට්ටමේ හෝ බ්රවුසර‑මට්ටමේ විශේෂ ආකාරයකින් ඇඳේ.
ඔබට නේටිව් රින්ග් වෙනුවට ඔබේම ශෛලියක් යෙදීමට අවශ්ය නම්, :focus-visible පසුපාදය භාවිතා කරන්න. එය බ්රවුසරයේ heuristics අනුව, පමණක් රින්ග් පෙන්වීමට අවශ්ය තැනට යෙදේ. මෙය outline:none කරමින් සියලු ෆෝකස් අඩු නොකර, අභිලාෂිත පරිශීලකයන්ට පෙනෙන පරිදි රින්ග් පෙන්වීමට උපකාරී වේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- ශ්රී ලාංකීය සංවර්ධකයින් – නේටිව් ෆෝකස් රින්ග් අධ්යයනයෙන්, ආකර්ශනීය UI/UX නිර්මාණය කරමින්, අන්තර්ජාල සමාජයන්ට ප්රවේශය වැඩි කර ගත හැක.
- විද්යාල සිසුන් – වෙබ් ප්රවේශය සහ අභිලාෂිත පරිසර සැකසුම් ගැන ඉගෙන ගනිමින්, ජාත්යන්තර මට්ටමේ සම්මාන ලැබීමට හැකියාව ලැබේ.
- ව්යාපාරික වෙබ් අඩවි – ප්රවේශය සම්පූර්ණ කිරීමෙන්, ගනුදෙනුකරුවන්ගේ අත්දැකීම උසස් කර, නීතිමය අනුකූලතාවය (WCAG) රැකගත හැක.
- ඉ-කොමර්ස් – කී-බෝඩ් පරිශීලකයන්ට නිශ්චිත තෝරා ගැනීමේ හැකියාව ලබාදීමෙන්, පාරිභෝගික පිරිවැය අඩු කරයි.
ඉතින්, නේටිව් ෆෝකස් රින්ග් ගැන අවධානයක් නොදෙන්නේ නම්, ඔබේ වෙබ් අඩවිය පරිශීලක‑හිතකාමී නොවෙයි. ඒ නිසා, :focus-visible භාවිතා කරමින්, ප්රවේශය සහ නවීන UI එකක් එකතු කරගැනීම අත්යවශ්යයි.
ඔබේ පළපුරුදු ව්යාපෘතිවල මෙම උපදෙස් අනුගමනය කර, සියලු පරිශීලකයන්ට සුවිශේෂී අත්දැකීමක් ලබාදෙන්න.
