சிஎஸ்எஸ் பிரத்யேக அகார்டியன்: ஒற்றை வெளிப்படுத்தல் கட்டுப்பாட்டு வழிகாட்டி

அகார்டியன்கள் உள்ளடக்கத்தை படிப்படியாக வெளிப்படுத்தப் பயன்படுத்தப்படும் ஒரு பொதுவான பயனர் இடைமுக வடிவமாகும். அவை தகவல்களைச் சுருக்கமான, ஒழுங்கமைக்கப்பட்ட முறையில் வழங்க உங்களை அனுமதிக்கின்றன, குறிப்பாக மொபைல் சாதனங்களில் பயனர் அனுபவத்தை மேம்படுத்துகின்றன. இந்த வழிகாட்டியில், சிஎஸ்எஸ் மட்டும் கொண்டு ஒரு பிரத்யேக அகார்டியனை (single disclosure accordion என்றும் அழைக்கப்படுகிறது) எவ்வாறு உருவாக்குவது என்பதை நாம் ஆராய்வோம். இந்த வகை அகார்டியன் எந்த நேரத்திலும் ஒரு பகுதி மட்டுமே திறந்திருப்பதை உறுதிசெய்கிறது, இது உங்கள் பயனர்களுக்கு ஒரு சுத்தமான மற்றும் கவனம் சிதறாத உலாவல் அனுபவத்தை வழங்குகிறது.

பிரத்யேக அகார்டியனை ஏன் பயன்படுத்த வேண்டும்?

சாதாரண அகார்டியன்கள் ஒரே நேரத்தில் பல பகுதிகளைத் திறந்து வைக்க அனுமதிக்கும்போது, பிரத்யேக அகார்டியன்கள் பல நன்மைகளை வழங்குகின்றன:

• மேம்படுத்தப்பட்ட கவனம்: பயனரை ஒரு திறந்த பகுதிக்கு மட்டும் கட்டுப்படுத்துவதன் மூலம், நீங்கள் அவர்களின் கவனத்தை ஈர்த்து, அறிவாற்றல் சுமையைக் குறைக்கிறீர்கள்.
• மேம்படுத்தப்பட்ட வழிசெலுத்தல்: பிரத்யேக அகார்டியன்கள், குறிப்பாக சிக்கலான உள்ளடக்கக் கட்டமைப்புகளில் வழிசெலுத்தலை எளிதாக்குகின்றன. பயனர்கள் தாங்கள் எங்கே இருக்கிறார்கள் மற்றும் என்ன காட்டப்படுகிறது என்பதை எப்போதும் அறிவார்கள்.
• மொபைலுக்கு உகந்தது: சிறிய திரைகளில், ஒரு பிரத்யேக அகார்டியன் மதிப்புமிக்க திரை இடத்தைச் சேமிக்க உதவுகிறது மற்றும் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது.
• தெளிவான படிநிலை: ஒற்றை வெளிப்படுத்தல் பொறிமுறையானது உங்கள் உள்ளடக்கத்தின் படிநிலைக் கட்டமைப்பை வலுப்படுத்துகிறது, இது புரிந்துகொள்வதை எளிதாக்குகிறது.

சிஎஸ்எஸ் மட்டும் கொண்ட அணுகுமுறை

அகார்டியன்களை உருவாக்க ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படலாம் என்றாலும், சிஎஸ்எஸ் மட்டும் கொண்ட அணுகுமுறை பல நன்மைகளை வழங்குகிறது:

• ஜாவாஸ்கிரிப்ட் சார்பு இல்லை: ஜாவாஸ்கிரிப்ட்டின் தேவையை நீக்குகிறது, இது பக்க ஏற்றுதல் நேரங்களையும் சாத்தியமான இணக்கத்தன்மை சிக்கல்களையும் குறைக்கிறது.
• அணுகல்தன்மை: சரியாகச் செயல்படுத்தப்படும்போது, சிஎஸ்எஸ் மட்டும் கொண்ட அகார்டியன்கள் மாற்றுத்திறனாளிகளுக்கு மிகவும் அணுகக்கூடியதாக இருக்கும்.
• எளிமை: அடிப்படை அகார்டியன் செயல்பாட்டிற்கு, சிஎஸ்எஸ் மட்டும் கொண்ட அணுகுமுறை செயல்படுத்துவதற்கும் பராமரிப்பதற்கும் எளிமையானதாக இருக்கும்.

பிரத்யேக அகார்டியனை உருவாக்குதல்: படிப்படியான வழிகாட்டி

சிஎஸ்எஸ் மட்டும் கொண்ட பிரத்யேக அகார்டியனை உருவாக்கும் செயல்முறையை நாம் விரிவாகப் பார்ப்போம். எச்டிஎம்எல் கட்டமைப்பு, சிஎஸ்எஸ் வடிவமைப்பு மற்றும் ஒற்றை வெளிப்படுத்தல் பொறிமுறைக்குப் பின்னால் உள்ள தர்க்கம் ஆகியவற்றை நாம் காண்போம்.

1. எச்டிஎம்எல் கட்டமைப்பு

நமது அகார்டியனின் அடித்தளம் எச்டிஎம்எல் கட்டமைப்பு ஆகும். அகார்டியன் பகுதிகளை உருவாக்க, நாம் <input type="radio"> கூறுகள், <label> கூறுகள் மற்றும் <div> கூறுகளின் கலவையைப் பயன்படுத்துவோம்.

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <label for="section1">பிரிவு 1</label>
  <div class="content">
    <p>பிரிவு 1 க்கான உள்ளடக்கம்.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">பிரிவு 2</label>
  <div class="content">
    <p>பிரிவு 2 க்கான உள்ளடக்கம்.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">பிரிவு 3</label>
  <div class="content">
    <p>பிரிவு 3 க்கான உள்ளடக்கம்.</p>
  </div>
</div>

விளக்கம்:

• <div class="accordion">: இது முழு அகார்டியனுக்குமான முக்கிய கொள்கலன்.
• <input type="radio" name="accordion" id="section1" checked>: ஒவ்வொரு பகுதியும் ஒரு ரேடியோ பட்டனுடன் தொடங்குகிறது. name="accordion" பண்புக்கூறு மிகவும் முக்கியமானது; இது அனைத்து ரேடியோ பட்டன்களையும் ஒன்றாகக் குழுவாக்குகிறது, ஒரே நேரத்தில் ஒன்றை மட்டுமே தேர்ந்தெடுக்க முடியும் என்பதை உறுதி செய்கிறது. id பண்புக்கூறு ரேடியோ பட்டனை அதன் தொடர்புடைய லேபிளுடன் இணைக்கப் பயன்படுகிறது. முதல் ரேடியோ பட்டனில் உள்ள checked பண்புக்கூறு அதை இயல்பாகத் திறந்திருக்கும் பகுதியாக ஆக்குகிறது.
• <label for="section1">பிரிவு 1</label>: லேபிள் ஒவ்வொரு பகுதிக்கும் கிளிக் செய்யக்கூடிய தலைப்பாகச் செயல்படுகிறது. for பண்புக்கூறு தொடர்புடைய ரேடியோ பட்டனின் id உடன் பொருந்த வேண்டும்.
• <div class="content">: இது ஒவ்வொரு பகுதியின் உண்மையான உள்ளடக்கத்தைக் கொண்டுள்ளது. ஆரம்பத்தில், இந்த உள்ளடக்கம் மறைக்கப்பட்டிருக்கும்.

2. சிஎஸ்எஸ் வடிவமைப்பு

இப்போது, சிஎஸ்எஸ் பயன்படுத்தி அகார்டியனை வடிவமைப்போம். ரேடியோ பட்டன்களை மறைப்பது, லேபிள்களை வடிவமைப்பது மற்றும் ரேடியோ பட்டனின் நிலையின் அடிப்படையில் உள்ளடக்கத்தின் தெரிவுநிலையைக் கட்டுப்படுத்துவது ஆகியவற்றில் நாம் கவனம் செலுத்துவோம்.

.accordion {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion input[type="radio"] {
  display: none;
}

.accordion label {
  display: block;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
}

.accordion input[type="radio"]:checked + label {
  background-color: #ddd;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
}

விளக்கம்:

• .accordion input[type="radio"] { display: none; }: இது ரேடியோ பட்டன்களைப் பார்வையிலிருந்து மறைக்கிறது. அவை இன்னும் செயல்படும், ஆனால் பயனருக்குத் தெரியாது.
• .accordion label { ... }: இது லேபிள்களை வடிவமைத்து, அவற்றை கிளிக் செய்யக்கூடிய தலைப்புகள் போலக் காட்டுகிறது. அவை ஊடாடும் தன்மையைக் குறிக்க cursor என்பதை pointer ஆக அமைக்கிறோம்.
• .accordion .content { ... display: none; }: ஆரம்பத்தில், display: none; ஐப் பயன்படுத்தி ஒவ்வொரு பகுதியின் உள்ளடக்கத்தையும் மறைக்கிறோம்.
• .accordion input[type="radio"]:checked + label { ... }: இது தற்போது தேர்ந்தெடுக்கப்பட்ட (checked) ரேடியோ பட்டனின் லேபிளை வடிவமைக்கிறது. அது செயலில் உள்ளது என்பதைக் குறிக்க பின்னணி நிறத்தை மாற்றுகிறோம். + (adjacent sibling selector) தேர்ந்தெடுக்கப்பட்ட ரேடியோ பட்டனுக்கு உடனடியாகப் பின்வரும் லேபிளைக் குறிவைக்கிறது.
• .accordion input[type="radio"]:checked + label + .content { ... display: block; }: இது தற்போது தேர்ந்தெடுக்கப்பட்ட பகுதியின் உள்ளடக்கத்தைக் காட்டுகிறது. மீண்டும், தேர்ந்தெடுக்கப்பட்ட ரேடியோ பட்டனுக்குப் பின்தொடரும் லேபிளைத் தொடர்ந்து வரும் .content div ஐக் குறிவைக்க, நாம் இரண்டு முறை adjacent sibling selector (+) ஐப் பயன்படுத்துகிறோம். இதுவே சிஎஸ்எஸ் மட்டும் கொண்ட அகார்டியன் தர்க்கத்தின் திறவுகோல் ஆகும்.

3. அணுகல்தன்மை பரிசீலனைகள்

எந்தவொரு வலைக் கூறுக்கும் அணுகல்தன்மை மிக முக்கியமானது. உங்கள் சிஎஸ்எஸ் மட்டும் கொண்ட அகார்டியனை அணுகக்கூடியதாக மாற்றுவதற்கான சில பரிசீலனைகள் இங்கே:

• விசைப்பலகை வழிசெலுத்தல்: பயனர்கள் விசைப்பலகையைப் பயன்படுத்தி அகார்டியனில் செல்ல முடியும் என்பதை உறுதிப்படுத்தவும். ரேடியோ பட்டன்கள் இயல்பாகவே விசைப்பலகையால் கவனம் செலுத்தக்கூடியவை, ஆனால் ஒரு லேபிளில் கவனம் செலுத்தும்போது நீங்கள் காட்சி குறிப்புகளை (எ.கா., ஒரு focus outline) சேர்க்க விரும்பலாம்.
• ARIA பண்புக்கூறுகள்: ஸ்கிரீன் ரீடர்களுக்குக் கூடுதல் சொற்பொருள் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, ஒரு பகுதி திறந்திருக்கிறதா அல்லது மூடப்பட்டிருக்கிறதா என்பதைக் குறிக்க aria-expanded ஐயும், லேபிளை தொடர்புடைய உள்ளடக்கப் பகுதியுடன் இணைக்க aria-controls ஐயும் பயன்படுத்தலாம்.
• சொற்பொருள் எச்டிஎம்எல்: பொருத்தமான இடங்களில் சொற்பொருள் எச்டிஎம்எல் கூறுகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, லேபிள்களை வெறுமனே வடிவமைப்பதற்குப் பதிலாகப் பகுதி தலைப்புகளுக்கு <h2> அல்லது <h3> கூறுகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• மாறுபாடு: வாசிப்புத்திறனுக்காக உரைக்கும் பின்னணிக்கும் இடையே போதுமான வண்ண வேறுபாடு இருப்பதை உறுதி செய்யவும்.

நமது எச்டிஎம்எல் கட்டமைப்பில் ARIA பண்புக்கூறுகளை எவ்வாறு சேர்ப்பது என்பதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked aria-controls="content1">
  <label for="section1" aria-expanded="true">பிரிவு 1</label>
  <div class="content" id="content1" aria-hidden="false">
    <p>பிரிவு 1 க்கான உள்ளடக்கம்.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false">பிரிவு 2</label>
  <div class="content" id="content2" aria-hidden="true">
    <p>பிரிவு 2 க்கான உள்ளடக்கம்.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false">பிரிவு 3</label>
  <div class="content" id="content3" aria-hidden="true">
    <p>பிரிவு 3 க்கான உள்ளடக்கம்.</p>
  </div>
</div>

மேலும் aria-expanded மற்றும் aria-hidden ஐப் புதுப்பிக்க தொடர்புடைய சிஎஸ்எஸ்:

.accordion [aria-expanded="true"] {
 background-color: #ddd;
}

.accordion [aria-hidden="false"] {
 display: block;
}

.accordion [aria-hidden="true"] {
 display: none;
}

4. மேம்பட்ட தனிப்பயனாக்கம்

அடிப்படை அகார்டியன் கட்டமைப்பை உங்கள் குறிப்பிட்ட வடிவமைப்புத் தேவைகளுக்கு ஏற்ப பல்வேறு வழிகளில் தனிப்பயனாக்கலாம்:

• அனிமேஷன்கள்: உள்ளடக்கப் பகுதிகளை மென்மையாகத் திறக்கவும் மூடவும் சிஎஸ்எஸ் transition அல்லது animationகளைச் சேர்க்கவும். எடுத்துக்காட்டாக, உள்ளடக்கத்தின் height அல்லது opacity ஐ அனிமேட் செய்ய transition பண்பைப் பயன்படுத்தலாம்.
• ஐகான்கள்: ஒவ்வொரு பகுதியின் திறந்த/மூடிய நிலையைக் காட்சிப்படுத்த லேபிள்களில் ஐகான்களைச் சேர்க்கவும். ஐகான்களைச் சேர்க்க நீங்கள் சிஎஸ்எஸ் pseudo-elements (::before அல்லது ::after) பயன்படுத்தலாம்.
• கருப்பொருள்: உங்கள் வலைத்தளத்தின் ஒட்டுமொத்த வடிவமைப்புடன் பொருந்தும் வகையில் வண்ணங்கள், எழுத்துருக்கள் மற்றும் இடைவெளிகளைத் தனிப்பயனாக்கவும்.

உள்ளடக்க உயரத்திற்கு ஒரு எளிய transition சேர்ப்பதற்கான ஒரு எடுத்துக்காட்டு இங்கே:

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
  height: auto; /* முக்கியம்: உள்ளடக்கம் அதன் இயல்பான உயரத்திற்கு விரிவடைய அனுமதிக்கிறது */
}

5. உலகளாவிய எடுத்துக்காட்டுகள் மற்றும் தழுவல்கள்

சிஎஸ்எஸ் மட்டும் கொண்ட பிரத்யேக அகார்டியன் என்பது பல்வேறு கலாச்சாரங்கள் மற்றும் பிராந்தியங்களில் உள்ள பல்வேறு சூழல்களுக்கு ஏற்றவாறு மாற்றியமைக்கக்கூடிய ஒரு பல்துறை வடிவமாகும். இங்கே சில எடுத்துக்காட்டுகள்:

• இ-காமர்ஸ் தயாரிப்புப் பக்கங்கள்: விவரக்குறிப்புகள், விமர்சனங்கள் மற்றும் ஷிப்பிங் தகவல் போன்ற தயாரிப்பு விவரங்களை ஒழுங்கமைக்கப்பட்ட முறையில் வழங்கவும். இருப்பிடத்தைப் பொருட்படுத்தாமல் ஆன்லைன் ஷாப்பிங்கிற்கு தயாரிப்புத் தகவல் மிக முக்கியம் என்பதால் இது உலகளவில் பொருந்தும்.
• அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ) பிரிவுகள்: அடிக்கடி கேட்கப்படும் கேள்விகளையும் பதில்களையும் காட்டவும். இது உலகெங்கிலும் உள்ள வலைத்தளங்களில் ஒரு பொதுவான பயன்பாடாகும், இது பயனர்கள் விரைவாகத் தகவல்களைக் கண்டறியவும் ஆதரவுக் கோரிக்கைகளைக் குறைக்கவும் உதவுகிறது.
• ஆவணங்கள் மற்றும் பயிற்சிகள்: சிக்கலான ஆவணங்கள் அல்லது பயிற்சி உள்ளடக்கத்தை நிர்வகிக்கக்கூடிய பிரிவுகளாக ஒழுங்கமைக்கவும். இது மென்பொருள் நிறுவனங்கள், கல்வி நிறுவனங்கள் மற்றும் உலகளவில் ஆன்லைன் கற்றல் வளங்களை வழங்கும் எந்தவொரு நிறுவனத்திற்கும் நன்மை பயக்கும்.
• மொபைல் வழிசெலுத்தல்: அதிக எண்ணிக்கையிலான மெனு உருப்படிகளைக் கொண்ட வலைத்தளங்களுக்கு, குறிப்பாக மொபைலுக்கு உகந்த வழிசெலுத்தல் மெனுவை உருவாக்க ஒரு பிரத்யேக அகார்டியனைப் பயன்படுத்தவும். ஸ்மார்ட்போன்கள் மற்றும் டேப்லெட்களில் வலைத்தளங்களை அணுகும் பயனர்களுக்கு இது தடையற்ற அனுபவத்தை உறுதி செய்கிறது.
• படிவங்கள்: நீண்ட படிவங்களை ஒரு அகார்டியன் கட்டமைப்பைப் பயன்படுத்தி சிறிய, நிர்வகிக்கக்கூடிய படிகளாகப் பிரிக்கவும். இது பயனர் நிறைவு விகிதங்களை மேம்படுத்தலாம் மற்றும் படிவத்தை கைவிடுவதைக் குறைக்கலாம். அதிகபட்ச பயனர் அனுபவத்திற்கு லேபிள்களை உள்ளூர் மொழிகளில் மொழிபெயர்ப்பதைக் கருத்தில் கொள்ளுங்கள்.

6. பொதுவான இடர்பாடுகள் மற்றும் தீர்வுகள்

சிஎஸ்எஸ் மட்டும் கொண்ட அணுகுமுறை பயனுள்ளதாக இருந்தாலும், அறிந்திருக்க வேண்டிய சில சாத்தியமான இடர்பாடுகள் உள்ளன:

• சிஎஸ்எஸ் தனித்தன்மை: உங்கள் சிஎஸ்எஸ் விதிகள் எந்தவொரு முரண்பாடான பாணிகளையும் மீறுவதற்குப் போதுமான தனித்தன்மையைக் கொண்டிருப்பதை உறுதி செய்யவும். மேலும் குறிப்பிட்ட தேர்வாளர்களைப் பயன்படுத்தவும் அல்லது !important முக்கியச் சொல்லை எச்சரிக்கையுடன் பயன்படுத்தவும்.
• அணுகல்தன்மை சிக்கல்கள்: அணுகல்தன்மை பரிசீலனைகளைப் புறக்கணிப்பது மாற்றுத்திறனாளி பயனர்களுக்குத் தடைகளை உருவாக்கக்கூடும். எப்போதும் உங்கள் அகார்டியனை ஸ்கிரீன் ரீடர்கள் மற்றும் விசைப்பலகை வழிசெலுத்தல் மூலம் சோதிக்கவும்.
• சிக்கலான உள்ளடக்கம்: அகார்டியன் பிரிவுகளுக்குள் மிகவும் சிக்கலான உள்ளடக்கத்திற்கு, ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வு அதிக நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்கக்கூடும்.
• உலாவி இணக்கத்தன்மை: சீரான நடத்தையை உறுதிப்படுத்த உங்கள் அகார்டியனை வெவ்வேறு உலாவிகளில் சோதிக்கவும். பெரும்பாலான நவீன உலாவிகள் இந்த அணுகுமுறையில் பயன்படுத்தப்படும் சிஎஸ்எஸ் தேர்வாளர்களை ஆதரிக்கும்போது, பழைய உலாவிகளுக்கு பாலிஃபில்கள் அல்லது மாற்றுத் தீர்வுகள் தேவைப்படலாம்.

7. சிஎஸ்எஸ் மட்டும் கொண்ட அகார்டியன்களுக்கு மாற்றுகள்

இந்தக் கட்டுரை சிஎஸ்எஸ் மட்டும் கொண்ட அகார்டியன்களில் கவனம் செலுத்தியிருந்தாலும், பிற விருப்பங்களும் உள்ளன:

• ஜாவாஸ்கிரிப்ட் அகார்டியன்கள்: அகார்டியனின் நடத்தை மீது அதிக நெகிழ்வுத்தன்மை மற்றும் கட்டுப்பாட்டை வழங்குகின்றன. அனிமேஷன்களைச் சேர்க்க, சிக்கலான உள்ளடக்கத்தைக் கையாள, மற்றும் அணுகல்தன்மையை மேம்படுத்த ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படலாம். jQuery UI போன்ற நூலகங்கள் மற்றும் React மற்றும் Vue.js போன்ற கட்டமைப்புகள் உடனடியாகக் கிடைக்கக்கூடிய அகார்டியன் கூறுகளை வழங்குகின்றன.
• எச்டிஎம்எல் <details> மற்றும் <summary> கூறுகள்: இந்த நேட்டிவ் எச்டிஎம்எல் கூறுகள் எந்த ஜாவாஸ்கிரிப்ட்டும் இல்லாமல் ஒரு அடிப்படை அகார்டியன் செயல்பாட்டை வழங்குகின்றன. இருப்பினும், அவற்றுக்கு பிரத்யேக வெளிப்படுத்தல் நடத்தை இல்லை மற்றும் தனிப்பயனாக்கத்திற்கு சிஎஸ்எஸ் வடிவமைப்பு தேவைப்படுகிறது.

முடிவுரை

சிஎஸ்எஸ் மட்டும் கொண்ட பிரத்யேக அகார்டியனை உருவாக்குவது, குறிப்பாக மொபைல் சாதனங்களில் பயனர் அனுபவத்தை மேம்படுத்துவதற்கான ஒரு சிறந்த வழியாகும். சிஎஸ்எஸ் தேர்வாளர்கள் மற்றும் ரேடியோ பட்டன்களின் சக்தியைப் பயன்படுத்துவதன் மூலம், ஜாவாஸ்கிரிப்ட்டை நம்பாமல் ஒரு எளிய, அணுகக்கூடிய மற்றும் திறமையான அகார்டியனை நீங்கள் உருவாக்கலாம். அணுகல்தன்மையைக் கருத்தில் கொள்ளவும், வெவ்வேறு உலாவிகளில் சோதிக்கவும், உங்கள் குறிப்பிட்ட வடிவமைப்புத் தேவைகளுக்கு ஏற்ப குறியீட்டை மாற்றியமைக்கவும் நினைவில் கொள்ளுங்கள். இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள படிகளைப் பின்பற்றுவதன் மூலம், வலைத்தள வழிசெலுத்தலை மேம்படுத்தும் மற்றும் பயனர்கள் தங்களுக்குத் தேவையான தகவல்களை விரைவாகவும் எளிதாகவும் கண்டறிய உதவும் ஒரு தொழில்முறை மற்றும் பயனர்-நட்பு அகார்டியனை நீங்கள் உருவாக்கலாம். இந்த அணுகுமுறையால் வழங்கப்படும் ஒற்றை வெளிப்படுத்தல் பொறிமுறையானது ஒரு தூய்மையான, அதிக கவனம் செலுத்தும் பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.

இந்த நுட்பம் பல்வேறு சர்வதேச சூழல்களில் பொருந்தக்கூடியது, பயனரின் இருப்பிடம் அல்லது மொழியைப் பொருட்படுத்தாமல் ஒரு சீரான பயனர் அனுபவத்தை வழங்குகிறது. உள்ளடக்கத்தையும் வடிவமைப்பையும் உள்ளூர் விருப்பங்களுக்கு ஏற்ப மாற்றுவதன் மூலம், உலகெங்கிலும் உள்ள பயனர்களுடன் எதிரொலிக்கும் ஒரு அகார்டியனை நீங்கள் உருவாக்கலாம்.

மேலும் ஆதாரங்கள்

• எம்டிஎன் வலை ஆவணங்கள்: <input type="radio">
• எம்டிஎன் வலை ஆவணங்கள்: அருகிலுள்ள உடன்பிறப்பு சேர்ப்பி (+)
• WAI-ARIA ஆக்க நடைமுறைகள்: அகார்டியன்