কিছুক্ষণ আগে, আমি এমন একটি উপাদান পাঠিয়েছিলাম যার প্রতিটি পরিমাপ ছিল যা আমি পরীক্ষা করতে পারি। কীবোর্ড নেভিগেশন কাজ করেছে। ARIA ভূমিকা সঠিকভাবে প্রয়োগ করা হয়েছে। স্বয়ংক্রিয় নিরীক্ষাগুলি একটি অভিযোগ ছাড়াই পাস করেছে। এবং এখনও, একজন স্ক্রিন রিডার ব্যবহারকারী কীভাবে এটি ট্রিগার করবেন তা বের করতে পারেনি। যখন আমি নিজে কীবোর্ড-অনলি নেভিগেশন এবং NVDA দিয়ে পরীক্ষা করেছিলাম, তখন আমি একই জিনিস দেখেছিলাম: মিথস্ক্রিয়া আমার প্রত্যাশা অনুযায়ী আচরণ করেনি।
চেকলিস্টের কিছুই একটি ত্রুটি চিহ্নিত করেনি৷ প্রযুক্তিগতভাবে, সবকিছু “সঠিক” ছিল। কিন্তু বাস্তবে, উপাদানটি অনুমানযোগ্য ছিল না। এখানে উপাদানটির একটি সরলীকৃত সংস্করণ রয়েছে যা সমস্যার সৃষ্টি করেছে:
আপনি ডেমোতে দেখতে পাচ্ছেন, মার্কআপটি মোটেও জটিল নয়:
এবং এটি ঠিক করা প্রত্যাশার চেয়ে সহজ ছিল। আমাকে ARIA সরাতে হয়েছিল role বৈশিষ্ট্য আমি ভাল উদ্দেশ্য সঙ্গে যোগ.
মার্কআপ আগের তুলনায় আরও কম জটিল:
এই অভিজ্ঞতাটি আমার অ্যাক্সেসযোগ্যতার বিষয়ে চিন্তাভাবনা পরিবর্তন করেছে। সবচেয়ে বড় পাঠ ছিল এই: শব্দার্থিক এইচটিএমএল অনেক বেশি অ্যাক্সেসিবিলিটি কাজ করে যা আমরা ইতিমধ্যেই এটির জন্য ক্রেডিট দিয়ে থাকি – এবং ARIA এর অপব্যবহার করা সহজ যখন আমরা এটিকে শর্টকাট এবং একটি পরিপূরক উভয় হিসাবে ব্যবহার করি।
আমরা অনেকেই ইতিমধ্যে ARIA এর প্রথম নিয়ম জানি: এটি ব্যবহার করবেন না। ভাল, এটা ব্যবহার করুন. কিন্তু না যখন আপনার প্রয়োজনীয় সুবিধা এবং কার্যকারিতা ইতিমধ্যেই আছে, যেমনটি যোগ করার আগে আমার ক্ষেত্রে ছিল role সম্পত্তি।
আমাকে স্পষ্টভাবে ধাপে ধাপে ব্যাখ্যা করতে দিন যা ঘটেছে, কারণ আমি মনে করি আমার ত্রুটি আসলে একটি খুব সাধারণ অভ্যাস। আমি এখানে যা বলছি তা ঠিক বলেছে এমন অনেকগুলি নিবন্ধ রয়েছে, কিন্তু আমি এটি প্রায়ই বাস্তব জীবনের অভিজ্ঞতার মাধ্যমে শুনে এটিকে অভ্যন্তরীণ করতে সহায়তা করে বলে মনে করি।
মন্তব্য: এই নিবন্ধটি কীবোর্ড নেভিগেশন এবং একটি স্ক্রিন রিডার (NVDA) ব্যবহার করে নেটিভ এবং ARIA-সংশোধিত উপাদানগুলিতে প্রকৃত মিথস্ক্রিয়া আচরণ পর্যবেক্ষণ করার জন্য পরীক্ষা করা হয়েছিল।
1: সম্ভব সহজতম মার্কআপ দিয়ে শুরু করুন
আবার, এটি মাত্র একটি নেটিভ সহ একটি ন্যূনতম পৃষ্ঠা এবং ARIA নেই। এবং ডিফল্টরূপে, এটি কীবোর্ড ফোকাস এবং প্রদর্শন কার্যকারিতা ব্যবহার করে অনুমতি দেয় ট্যাব, প্রবেশ করাএবং স্থান ভিন্ন চিন্তা। জিওফ সম্প্রতি শব্দার্থিক HTML উপাদানগুলির অ্যাক্সেসিবিলিটি সুবিধাগুলি ব্যাখ্যা করে এই কেসটি করেছেন৷
মিথস্ক্রিয়া যদি একটি ক্রিয়াকে ট্রিগার করে তবে সেই উপাদানটি একটি বোতাম। এবং এই ক্ষেত্রে, একটি স্ক্রিপ্ট চালানোর জন্য ডিজাইন করা হয়েছে যা ব্যবহারকারীর প্রোফাইলে পরিবর্তনগুলি সংরক্ষণ করে:
সেই একটি লাইন আমাদের বিনামূল্যে একটি আশ্চর্যজনক পরিমাণ দেয়:
- সঙ্গে কীবোর্ড সক্রিয়করণ
EnterএবংSpaceকী - সঠিক ফোকাস আচরণ
- একটি ভূমিকা যা সহায়ক প্রযুক্তি ইতিমধ্যে বুঝতে পারে
- স্ক্রিন রিডারে ক্রমাগত ঘোষণা
এই সময়ে, আছে না ARIA – এবং এটি ইচ্ছাকৃত। কিন্তু আমার CSS এ স্টাইলিং বোতামের জন্য একটি বিদ্যমান ক্লাস ছিল, তাই আমি এটি যোগ করেছি:
2: কিছু যোগ করার আগে মূল আচরণ পর্যবেক্ষণ করুন
শুধুমাত্র মূল উপাদান দিয়ে, আমি তিনটি জিনিস পরীক্ষা করেছি:
- শুধুমাত্র কীবোর্ড (ট্যাব, প্রবেশ করা, স্থান)
- একটি স্ক্রিন রিডার (নিয়ন্ত্রণ কীভাবে ঘোষণা করা হয় তা শুনছি)
- ফোকাস ক্রম পৃষ্ঠার মধ্যে
সবকিছুর আচরণ অনুমানযোগ্য ছিল। ব্রাউজার ব্যবহারকারীরা যা আশা করে ঠিক তাই করছিল। এই পদক্ষেপটি গুরুত্বপূর্ণ কারণ এটি একটি বেসলাইন স্থাপন করে। যদি কিছু পরে ভেঙে যায়, আপনি জানেন যে এটি HTML এর কারণে হয়নি। প্রকৃতপক্ষে, DevTool-এর অ্যাক্সেসিবিলিটি প্যানেলে উপাদানটি পরিদর্শন করে আমরা দেখতে পাচ্ছি যে সবকিছুই নিখুঁতভাবে কাজ করছে।
3: সৎ উদ্দেশ্যযুক্ত ARIA যোগ করুন
আমি যখন বোতামটিকে একটি লিঙ্কের মতো আচরণ করার চেষ্টা করেছি তখন সমস্যাটি এসেছিল:
আমি স্টাইলিং এবং রাউটিং কারণে এটি করেছি। এই বোতামটি ডিফল্টের চেয়ে একটু ভিন্নভাবে স্টাইল করা দরকার .cta ক্লাস এবং আমি ভেবেছিলাম আমি পরিবর্তনকারী ক্লাস ব্যবহার করার পরিবর্তে ARIA বৈশিষ্ট্য ব্যবহার করতে পারি। আপনি দেখতে শুরু করতে পারেন কিভাবে আমি শৈলীকে নির্দেশিত করতে এবং কার্যকারিতাকে প্রভাবিত করতে দিই। ক এখনও এই উদ্দেশ্যে সঠিক উপাদান, কিন্তু নকশা প্রয়োজনীয়তার কারণে আমি এটি একটি লিঙ্কের মত দেখতে চেয়েছিলাম। যে উপাদান একটি দিতে পারেন link তাই ভূমিকা, ডান?
উপরিভাগে, কিছুই ভাঙ্গা বলে মনে হচ্ছে না। স্বয়ংক্রিয় সরঞ্জামগুলি শান্ত ছিল। কিন্তু প্রকৃত ব্যবহারে, ফাটলগুলি দ্রুত উপস্থিত হয়েছিল:
- স্থান নিয়ন্ত্রণ আর নির্ভরযোগ্যভাবে কাজ করে না।
- স্ক্রিন রিডাররা পরস্পরবিরোধী ভূমিকা ঘোষণা করেছে।
- কীবোর্ড ব্যবহারকারীরা এমন আচরণের সম্মুখীন হয়েছেন যা একটি বোতাম বা লিঙ্কের সাথে ঠিক মেলে না।
ARIA এখানে স্পষ্টতা যোগ করেনি; এটি অস্পষ্টতার পরিচয় দিয়েছে। কিন্তু আমি ইতিমধ্যে আমার কাজ “পরীক্ষা” করেছি এবং আমি উপাদানটি মিশ্রিত করা ছাড়া আমার সাথে কিছুই ঘটবে বলে মনে হয়নি role অন্য ধরনের উপাদান দিয়ে। আবার, এটি যা লাগে তা হল DevTools এ একটি দ্রুত নজর দেওয়া।
4: শব্দার্থবিদ্যায় ফিরে যান
সমাধান চতুর ছিল না. এটা সস্তা ছিল আমি আমার শৈলী ফিরিয়ে এনেছি, স্টাইলিংয়ের জন্য একটি ক্লাস ব্যবহার করেছি এবং অ্যাক্সেসযোগ্য ভূমিকা পরিবর্তন করার আগে শব্দার্থিক মার্কআপে ফিরে গিয়েছি:
আমি জানি এটা সহজ শোনাচ্ছে: যদি এটি একটি ক্রিয়া হয়, তাহলে a ব্যবহার করুন . যদি এটি আপনাকে কোথাও নিয়ে যায় তবে একটি লিঙ্ক ব্যবহার করুন () কিন্তু, বাস্তবে, আমরা টাইপ করা প্রতিটি কী দিয়ে সিদ্ধান্ত নিচ্ছি এবং গন্তব্যের সাথে ক্রিয়াগুলিকে যুক্ত করা ঠিক ততটাই সহজ। এই ক্ষেত্রে, আমি সম্পূর্ণরূপে সঠিক উপাদান ব্যবহার! আমার ভুল ছিল মনে করা যে ARIA আমার CSS এর জন্য একটি উপযুক্ত স্টাইলিং হুক।
একবার সঠিক উপাদান উপস্থিত হলে – ARIA এর অনুপস্থিতি – সমস্যাগুলি অদৃশ্য হয়ে যায়। পরিবর্তে, আমি একটি নতুন ক্লাসনাম সংজ্ঞায়িত করতে পারি এবং, আপনি এটি অনুমান করেছেন, শৈলী সহ ধরে রাখার শৈলী ব্যবহার করুন।
ঠিক তেমনই, আমি আমার প্রয়োজনীয় উপাদানটিকে স্টাইল করতে সক্ষম হয়েছিলাম এবং যে ব্যবহারকারী সমস্যাটি রিপোর্ট করেছেন তিনি নিশ্চিত করতে সক্ষম হয়েছিলেন যে সবকিছু প্রত্যাশিত হিসাবে কাজ করছে। স্ট্যাকের মধ্যে ARIA-এর স্থান সম্পর্কে একটি মৌলিক ভুল বোঝাবুঝি থেকে এটি একটি অনিচ্ছাকৃত ভুল।
কেন এটা ঘটতে থাকে
ARIA বৈশিষ্ট্যগুলি কোনও কিছুর প্রকৃতি নির্ধারণ করতে ব্যবহৃত হয় তবে তারা নেটিভ উপাদানগুলির আচরণগত ডিফল্টগুলিকে পুনরায় সংজ্ঞায়িত করে না। যখন আমরা শব্দার্থবিদ্যার বাইরে চলে যাই, তখন আমরা স্বচ্ছভাবে এর জন্য দায়িত্ব নিই:
- কীবোর্ড মিথস্ক্রিয়া,
- ফোকাস ব্যবস্থাপনা,
- প্রত্যাশিত ঘোষণা, এবং
- প্ল্যাটফর্ম-নির্দিষ্ট quirks.
এটি রক্ষণাবেক্ষণের জন্য একটি বৃহৎ পৃষ্ঠ এলাকা, এবং সেই কারণেই ছোট ARIA পরিবর্তনগুলি বড় এবং অপ্রত্যাশিত প্রভাব ফেলতে পারে।
একটি নিয়ম আমি এখন অনুসরণ করি
এখানে কর্মপ্রবাহ যা আমাকে সবচেয়ে বেশি সময় এবং বাগ বাঁচিয়েছে:
- অভিপ্রায় জানাতে মৌলিক HTML ব্যবহার করুন।
- কীবোর্ড এবং স্ক্রিন রিডার দিয়ে পরীক্ষা করুন।
- শুধুমাত্র ডায়ালগে ARIA যোগ করুন অনুপস্থিত রাষ্ট্রভূমিকা পুনঃসংজ্ঞায়িত না.
যদি ARIA মনে করে যে এটি ভারী উত্তোলন করছে, এটি সাধারণত একটি চিহ্ন যে মার্কআপ ব্রাউজারের সাথে লড়াই করছে।
যেখানে ARIA করে সংযুক্ত
একটি উদাহরণ নেটিভ ব্যবহার করে একটি সাধারণ প্রকাশ উইজেট হবে প্লাস aria-expanded স্থিতি যোগাযোগ করতে – ARIA প্রদর্শন ব্যবহার করা হয় রাজ্য যোগ করুনশব্দার্থবিদ্যা প্রতিস্থাপন করবেন না।
এই ডেমো একটি নেটিভ ব্যবহার করে সঙ্গে aria-expandedযা জাভাস্ক্রিপ্টের ছিটা দিয়ে টগল করা হয়েছে:
const button = document.getElementById("toggle");
const panel = document.getElementById("panel");
button.addEventListener("click", () => {
const expanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !expanded);
panel.hidden = expanded;
});অ্যাক্সেসযোগ্য অবস্থান (true/false) বোতামের শব্দার্থবিদ্যা পরিবর্তন না করেই সঠিকভাবে যোগাযোগ করা হয়।
এখন, আমি জানি যে ARIA প্রয়োজনীয় যখন:
- প্রসারিত বা ঘনীভূত অবস্থা যোগাযোগ করা,
- গতিশীল আপডেট ঘোষণা করা হচ্ছে,
- আসলে কাস্টম উইজেট তৈরি, এবং
- হাইলাইট সম্পর্ক HTML প্রকাশ করতে পারে না।
এইভাবে ব্যবহার করা হলে, ARIA এর সাথে প্রতিদ্বন্দ্বিতা করার পরিবর্তে শব্দার্থিক HTML এর পরিপূরক।
প্ল্যাটফর্মটি আপনার জন্য কাজ করতে দিন
আমার করা সবচেয়ে বড় অ্যাক্সেসিবিলিটি উন্নতি হল আরও বৈশিষ্ট্য সম্পর্কে শেখা না – এটি ব্রাউজাররা ইতিমধ্যে বুঝতে পারে এমন বৈশিষ্ট্যগুলির উপর নির্ভর করে৷ শব্দার্থিক HTML একটি বেসলাইন নয় যেখান থেকে আপনি এগিয়ে যান। এটি এমন ভিত্তি যার উপর অন্য সবকিছু নির্ভর করে।
এবং আমি সত্যিই আশা করি আপনি আমার অভিজ্ঞতা থেকে শিখবেন। আমরা সবাই ভুল করি। দুর্ভাগ্যবশত এটি কাজের অংশ। কিন্তু আমরা যদি তাদের কাছ থেকে শিখতে না পারি তবে তারা কী ভাল, যদিও এর অর্থ কঠিন পাঠ।
