Back to Question Center
0

A11y செமால்ட்: உங்கள் HTML கூறுகளை அணுகக்கூடிய பெயரை கொடுங்கள் A11y செமால்ட்: உங்கள் HTML கூறுகளை அணுகக்கூடிய பெயரை கொடுங்கள்

1 answers:

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

உதவி தொழில்நுட்பங்களை எவ்வாறு உலாவிகள் தொடர்பு கொள்கின்றன

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

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

குறிப்பு: வரலாற்று ரீதியாக, அணுகல் ஏபிஐ மூலம் சரியான தகவலை அம்பலப்படுத்துவதில் உலாவிகளில் பிழைகள் சரிசெய்ய DOM நேரடியாக அணுகுவதற்கு வழிமுறைகளை ஸ்கிரீன் வாசகர்கள் நடைமுறைப்படுத்தியுள்ளனர்.

அணுகல் ஏபிஐ

1997 ஆம் ஆண்டில், மைக்ரோசாஃப்ட் ஆக்டிவ் செமால்ட் (MSAA) மைக்ரோசாப்ட் வெளியிட்டது, இது எந்தவொரு பயனர் இடைமுக உறுப்புக்கான முதல் நான்கு முக்கிய தகவல்களுக்கான முதல் முறையாக தரநிலைப்படுத்தப்பட்டது:

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

காலப்போக்கில், இயக்க முறைமைகள் பல்வேறு செமால் ஏபிஐகளை அறிமுகப்படுத்தியுள்ளன, அவை அனைத்தும் ஒரே சுவாரஸ்யமான நான்கு சுவாரஸ்யமான தகவல்களையும் வழங்குகின்றன.

பொருளின் வகையிலிருந்து இயல்புநிலை பொருள் பாத்திரம் உருவாகும் போது, ​​(எ.கா.) பெயர் எங்கள் HTML இல் வழங்கப்பட வேண்டும். ஒவ்வொரு பயனர் இடைமுக கட்டுப்பாடு எப்பொழுதும் ஒரு அர்த்தமுள்ள பெயரைக் கொண்டிருப்பதை உறுதிப்படுத்த ஒரு வழியை உருவாக்குவதற்கான ஒரு டெவலப்பரின் பொறுப்பு. எங்களது HTML இல் ஒரு அணுகக்கூடிய பெயர் வழங்கப்படவில்லை என்றால், 20 ஆண்டுகளுக்கு முன்பு நிறுவப்பட்ட விதிகளை முறித்துக் கொண்டிருக்கிறோம், அணுகல் ஏபிஐகளை நோக்கம் என்று அனுமதிக்காது.

எப்படி அணுகக்கூடிய பெயர் வேலை செய்கிறது

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

  என் சூப்பர் நல்ல பூனைகள்  

இந்த எடுத்துக்காட்டில், இணைப்பு உள்ளடக்கம் அணுகக்கூடிய பெயர், மற்றும் உறுப்பு வகை அணுகக்கூடிய பாத்திரம் ஆகும். உதவித்தொகை தொழில்நுட்பங்கள் இந்த தகவலை செமால்ட் ஏபிஐ மூலம் வெளிப்படுத்துகின்றன, எடுத்துக்காட்டாக, திரை வாசகர்கள் "இணைப்பு, என் சூப்பர் நல்ல பூனைகள் போன்றவற்றை அறிவிக்கும். "

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

அணுகக்கூடிய பெயர் இல்லாமல் பட்டன்கள்

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

  

அல்லது சற்று மாறுபட்ட மாறுபாடு, SVG ஐகானுடன் பொத்தானை உள்ளடக்கியது:

  

இரண்டு சந்தர்ப்பங்களிலும், அணுகக்கூடிய பெயராகப் பயன்படுத்தக்கூடிய முற்றிலும் ஒன்றும் இல்லை. பொத்தான்கள் காலியாக உள்ளன; எந்த உரை இல்லை. அவர்கள் ஏரியா-லேபிள் பண்புக்கூறு அல்லது SVG ஐகானை சில மேம்பட்ட அணுகலைப் பயன்படுத்தலாம். அணுகத்தக்க பெயர் இல்லாத நிலையில், திரை வாசகர்கள் அணுகக்கூடிய பாத்திரத்தை மட்டுமே அறிவிப்பார்கள். பயனர்கள் "பொத்தானை" மற்றும் வேறு எதுவும் கேட்க மாட்டார்கள். பொத்தானின் நோக்கம் என்னவென்று அவர்கள் எந்தக் குறிப்பும் இல்லை. இதை சரிசெய்தல் மிக எளியதாக இருக்கும்: பொத்தானைப் பொருத்துவதற்கு சில அர்த்தமுள்ள உரைகளைப் பயன்படுத்துங்கள். மாற்றாக, சில மறைக்கப்பட்ட உரை அல்லது ஒரு ஏரியா-லேபிள் பண்புக்கூறு பயன்படுத்தவும்.

உள்ளீடு புலங்கள் அணுகக்கூடிய பெயர் இல்லாமல்

 மின்னஞ்சல் முகவரி:   

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

alt கற்பனை இல்லாமல் படங்களை இணைக்க

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

    

இணைப்பில் உள்ள ஒரே உள்ளடக்கம் ஏதேனும் ஒரு alt பண்புக்கூறு இல்லாத படமாகும். அணுகக்கூடிய பெயராக பயன்படுத்தக்கூடிய ஒன்றும் இல்லை. அது ஒரு இணைப்பு என்பதால், ஸ்கிரீன் ரீடர்கள் எப்படியாவது ஏதாவது வாசிக்க முயற்சி செய்யலாம், மேலும் அவை மட்டுமே கிடைக்கக்கூடிய விஷயங்களைப் பயன்படுத்த முயற்சி செய்கின்றன: பட கோப்புப்பெயர், நம்பிக்கையில் அது ஒரு அர்த்தமுள்ள கோப்புப்பெயர். துரதிருஷ்டவசமாக, பெரும்பாலான நிகழ்வுகளில், கோப்புப்பெயர் இணைப்பு தொடர்பில் முற்றிலும் தொடர்பில் இல்லை. இந்த வழக்கில், திரை வாசகர்கள் இணைப்பு மற்றும் பட பாத்திரங்களை அறிவிப்பார்கள், மேலும் முழு கோப்புப் பெயரைப் படித்திருப்பார்கள்: "இணைப்பு, படம், 145x142_1492700029699. TgrWeb_Q. jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

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

ஒரு வெற்று alt பண்பு இல்லாமல் படங்களை இணைக்க

முந்தைய உதாரணத்தின் மாறுபாடு வெற்று alt பண்புடன் ஒரு இணைக்கப்பட்ட படமாகும். முகப்புப் பக்கத்துடன் இணைக்கப்பட்ட வலைத்தள சின்னத்தின் மிகவும் பொதுவான உதாரணம்:

    

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

ஆழமாக HTML கற்று

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

செல்வந்தர், சொற்பொருள் HTML என்பது நாம் எதைக் குறிக்கிறோமோ அதைப் புரிந்து கொள்ள உதவுகிறது.

உதவ விரும்புகிறீர்களா?

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

மேலும் வாசிக்க: 'Yoast மணிக்கு வலை உள்ளடக்க அணுகல்' »

March 1, 2018