உங்கள் ஒற்றை பக்க பயன்பாடுகளை திரை வாசகர்களுடன் செயல்படச் செய்யுங்கள்

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

பக்கத் தலைப்பை அடிப்படையாகக் கொண்ட ஒரு செய்தியை உருவாக்குவதும், ஒரு புதிய பார்வை ஏற்றப்பட்டதாக ஒரு பயனுள்ள செய்தியின் மூலம் வெளிப்படையாக அறிவிக்க ஒரு ARIA நேரடி பிராந்தியத்தை பயன்படுத்துவதும் ஒரு தீர்வாகும். முதலில் ViewContent புதுப்பிக்கப்படும் போது அழைக்கப்படும் ஒரு செயல்பாட்டை உருவாக்கவும். AngularJS இந்த நோக்கத்திற்காக $ viewContentLoaded நிகழ்வை வழங்குகிறது. கட்டுப்படுத்தி குறியீட்டில், நிகழ்வைக் கேட்டு ஒரு செயல்பாட்டை அழைக்கவும் (காபிஸ்கிரிப்டில்):

app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, அறிவிப்பு_ பார்வை_ ஏற்றப்பட்டது

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

இதைச் செய்வதற்கான ஒரு வழி, பார்வைத் தலைப்பைச் சேமிக்க பார்வையில் எங்காவது ஒரு தரவு பண்பைப் பயன்படுத்துவது:

document.title = $ (’[data-viewtitle]’). தரவு ’viewtitle’

இப்போது புதுப்பிக்கப்பட்ட பக்க தலைப்பைப் பயன்படுத்தி ஒரு செய்தியை உருவாக்கி, அதை அறிவிக்கவும்:

ann .announce (document.title + ’, view load’)

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

முதலில், ஏரியா-லைவ் = "கண்ணியமான | உறுதியான" ஐப் பயன்படுத்தி உள்ளடக்கத்தை அறிவிக்க உங்கள் பக்கத்தில் ஒரு ‘அறிவிப்பாளர்’ நேரடி பகுதியை உருவாக்கவும். நேரடி பிராந்திய பாத்திரங்கள் (எ.கா. பங்கு = "எச்சரிக்கை | டைமர் | பதிவு") உட்பட வேறு எந்த நேரடி பகுதிகளையும் பயன்படுத்த வேண்டாம். ஒரு எடுத்துக்காட்டு நேரடி பகுதி:

div aria-live = "கண்ணியமான" id = "அறிவிப்பாளர்"> (உரை சேர்க்கப்பட்டது அல்லது புதுப்பிக்கப்பட்டது இங்கே அறிவிக்கப்படும்) / div>

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

இறுதியாக, எந்தவொரு அணுகல் நுட்பத்தையும் போலவே, $ .announce () ஐ நியாயமாகப் பயன்படுத்தவும். குறிப்பிடத்தக்க UI புதுப்பிப்புகளைத் தொடர்புகொள்வதற்கு மட்டுமே இது பயன்படுத்தப்பட வேண்டும்.

சொற்கள்: பேட்ரிக் ஃபாக்ஸ்

பேட்ரிக் ஃபாக்ஸ் ஆஸ்டினில் உள்ள ரேஸர்ஃபிஷில் வலை யுஐ தொழில்நுட்ப இயக்குநராக உள்ளார். இந்த கட்டுரை முதலில் நிகர இதழின் 271 இதழில் வெளிவந்தது.

இதை விரும்பினீர்களா? இவற்றைப் படியுங்கள்!

• டிஜிட்டல் அணுகலுக்கான வடிவமைப்பாளரின் வழிகாட்டி
• சிறந்த இலவச ஸ்கிரிப்ட் எழுத்துருக்கள்
• இலவச கிராஃபிட்டி எழுத்துரு தேர்வு