HTML Accessibility

আসসালামু আলাইকুম। HTML নিয়ে তো অনেক কিছুই জানলাম আমরা। আজ একটু অন্য কিছু জানার চেষ্টা করি। আজ কথা বলবো ইন্টারেস্টিং একটা টপিক - HTML Accessibility নিয়ে। HTML Accessibility এর একদম বেসিক কিছু জিনিসপত্র নিয়ে কথা হবে আজকের এই পোস্টে। সো, লেটস স্টার্ট . . .

🟢 HTML Accessibility কি?

প্রথমেই মাথায় আসে HTML Accessibility - এই জিনিসটা কি। তাইনা? আচ্ছা বলি তাহলে। পৃথিবীতে অসংখ্য মানুষ আছে যারা ভিজুয়্যালি ডিজেবল (চোখে ঠিকমত দেখতে পায়না বা কালার ব্লাইন্ড)। আবার অনেকে আছে যারা ঠিকমত শুনতে পায়না। এ ধরনের মানুষরাও যেনো ইন্টারনেটের সুবিধা পেতে পারে ও সব ধরনের ওয়েবসাইট ব্যবহার করতে পারে সেই জন্যে ওয়েবসাইটকে তাদের জন্যে অ্যাক্সেসিবল করে রাখা প্রয়োজন। এটাই হচ্ছে Web Accessibility. Web Accessibility একটি ব্রড টার্ম। এর মধ্যে আছে HTML Accessibility, CSS Accessibility, JavaScript Accessibility, Multimedia Content Manage ইত্যাদি।

আমরা মুলত আলোচনা করবো HTML Accessibility নিয়ে। অর্থাৎ, কোনো একটা ওয়েবসাইটের HTML কন্টেন্টগুলো তৈরি করার সময় সেটা এমনভাবে যেনো তৈরি করা হয় যাতে যারা ডিজেবল পার্সন তারাও যেনো বিভিন্ন Assistive Technologies (যেমন: Screen Reader, Voice Recognition) ব্যবহারের মাধ্যমে সেই ওয়েবসাইটগুলো ব্যবহার করতে পারে।

🟢 Assistive Technologies কি?

এখন আপনাদের মাথায় আসতে পারে Assistive Technologies কি? Assistive Technologies হচ্ছে এমন কিছু টুলস বা ডিভাইস যেগুলো ব্যবহার করে ডিজেবল পার্সনরা বিভিন্ন ডিজিটাল কন্টেন্ট বা ওয়েব কন্টেন্ট এক্সেস করতে পারে। অনেক ধরনের Assistive Technologies আছে। যেমন: Screen Readers Software, Braille Displays, Speech Recognition Software ইত্যাদি।

যারা ভিজুয়্যালি ডিজেবল তারা Screen Reader অ্যাপ্লিকেশন ব্যবহার করে কন্টেন্ট এক্সেস করতে পারে। Screen Reader সফটওয়্যার একটি ওয়েব পেজের সমস্ত কন্টেন্ট ইউজারকে পড়ে শোনাবে।
আবার যারা ইনজুরিতে আক্রান্ত বা যাদের কিবোর্ড-মাউস ব্যবহার করার এবিলিটি নাই তারা
Speech Recognition অ্যাপ্লিকেশন ব্যবহার করে কম্পিউটারকে ভয়েস কমান্ড দিতে পারে। ইউজারের ভয়েস কমান্ডের উপর ভিত্তি করে ফলাফল দেখায়।

🟢 HTML Accessibility কেনো দরকার?

শুধু যে ডিজেবল পার্সনরা যেনো ওয়েব কন্টেন্টগুলো এক্সেস করতে পারে সেই জন্যে HTML Accessibility দরকার - এমন কিন্তু নয়। অনেক দেশের রুলস এন্ড রেগুলেশনে বলা থাকে যেনো কন্টেন্টগুলো সবার জন্যে এক্সেসিবল হয়। তা না হলে ফাইনও দিতে হতে পারে।

এছাড়া সার্চ ইঞ্জিন অপটিমাইজেশনের ক্ষেত্রেও কোনো একটা ওয়েবসাইটকে র‍্যাঙ্ক করাতে হলেও ওয়েবসাইটকে এক্সেসিবল করা প্রয়োজন।

🟢 HTML কন্টেন্টকে কিভাবে Accessible করা যায়?

• Sematic ট্যাগ ব্যবহারের মাধ্যমে:

HTML কন্টেন্টকে Accessible করতে Semantic ট্যাগ খুব গুরুত্বপূর্ণ ভুমিকা পালন করে। Semantic ট্যাগ ওয়েব কন্টেন্টকে একটা মিনিংফুল স্ট্রাকচার দেয়। এই ধরনের ট্যাগগুলো বিভিন্ন ধরনের Assistive Technologies কে একুরেটলি ওয়েব কন্টেন্ট অ্যাক্সেস করতে সাহায্য করে।

যেমন ধরেন আপনি ওয়েব পেজ তৈরি করতে যেয়ে সব জায়গায় <div> ট্যাগ ব্যবহার করেন। কিন্তু আপনি যদি এই <div> ট্যাগ ব্যবহার না করে ইন্ট্রোডাক্টরি কন্টেন্ট রাখার জন্যে <header> ট্যাগ ব্যবহার করতে পারেন, ন্যাভবারের জন্যে <nav> ট্যাগ ব্যবহার করতে পারেন, ওয়েবসাইটের সমস্ত কন্টেন্ট রাখার জন্যে <main> ট্যাগ, আর্টিকেল লেখার জন্যে <article> ট্যাগ, ফুটারের জন্যে <footer> ট্যাগ ব্যবহার করতে পারেন। এর ফলে ওয়েবপেজের একটা ক্লিয়ার, অর্গানাইজড, ও স্ট্রাকচারড লেআউট তৈরি হবে। ফলে Assistive Technologie গুলো ওয়েবসাইটকে ইউজারের কাছে আরও ডিটেইলসে প্রেজেন্ট করতে পারবে।

আরও কিছু Sematic ট্যাগ নিচে দেওয়া হলো।
<aside> - সাইডবারের কোনো কন্টেন্ট ব্যবহার করতে চাইলে ব্যবহার করা হয়।
<mark> - টেক্সটকে মার্ক বা চিহ্নিত করতে ব্যবহার করা হয়।
<figure> - ইমেজের জন্যে ব্যবহার করা হয়।
<figcaption> - কোনো ইমেজের ক্যাপশন দিতে চাইলে ব্যবহার করা হয়।
<details> - ইউজারকে অতিরিক্ত তথ্য দেখানোর জন্যে ব্যবহার করা হয়।
<section> - অনেকগুলো কন্টেন্টকে একসাথে রাখার জন্যে ব্যবহার করা হয়।

• Heading ট্যাগ এর সঠিক হায়ারারকি মেইনটেইন করতে হবে:

আমরা সবাই জানি ৬ ধরনের Heading ট্যাগ আছে। Heading ট্যাগগুলো ওয়েবপেজের সামারি বোঝায় ইউজারকে। এদের দুই ধরনের হায়ারারকি আছে। একটা হচ্ছে Top to Bottom (h1 → h2 → h3 → h4 → h5 → h6). ধরেন আপনি ওয়েব পেজে এক জায়গায় <h1> tag ব্যবহার করলেন। এরপর আপনি <h2> বা <h3> ব্যবহার না করে <h4> tag ব্যবহার করলেন। এতে করে হায়ারারকি স্ট্রাকচার ব্রেক হবে। এটা এক ধরনের Accessibility ইস্যু তৈরি করে। তাই আমাদের উচিৎ, হায়ারারকি ঠিকঠাক মেইনটেইন করা।
এবং আরেকটা হচ্ছে Bottom to Top (h6 → h5 → h4 → h3 → h2 → h1). এই ধরনের হায়ারারকিতে স্ট্রাকচার ব্রেক করলে কোনো সমস্যা হয় না। মানে আপনি <h6> ব্যবহারের পর <h3> ব্যবহার করতে পারবেন।

আরেকটি বিষয় হচ্ছে, শুধুমাত্র কোনো টেক্সটকে বড় করে দেখানোর জন্যে Heading ট্যাগ ব্যবহার করা ঠিক না।

• Navigation Link গুলো কে List Item এর মধ্যে রাখা:

Navigation Link গুলো কে List Item ( <li> ) এর মধ্যে রাখলে এতে করে Screen Reader যখন পড়বে তখন সবগুলো লিংককে একটা লিস্ট ধরে অর্ডারলি পড়বে।

<ol>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ol>

• Alt এট্রিবিউট ব্যবহার করা:

কোনো একটা ইমেজ ব্যবহার করলে অবশ্যই সেই ইমেজের জন্যে Alternative Text ব্যবহার করা উচিৎ। এতে করে যারা ব্লাইন্ড পার্সনরা তারা Screen Reader ব্যবহার করে সহজেই জানতে পারবে ইমেজটা কি রিলেটেড। এছাড়া লো ব্যান্ডউইথের কারনে যাদের ওয়েব পেজ লোড হতে সময় লাগে তারাও বুঝতে পারবে।

<img src="image.jpg" alt="A image of a boy who stand alone">

• Label ব্যবহার করা:

ওয়েবসাইটে অনেক সময় ফর্মের প্রয়োজন পড়ে। ফর্মে বিভিন্ন ধরনের ইনপুট নেয়া হয়। কোন ইনপুট ফিল্ড কি কাজের জন্যে সেটা বোঝার জন্যে <label> Tag ফর্ম ইনপুট ফিল্ডের সাথে যুক্ত করা হয় যাতে ইউজার ইনপুট ফিল্ডের কাছে ক্লিক করে Screen Reader এর মাধ্যমে এই ইনপুট ফিল্ডে কি ইনপুট দিতে হবে সেটা শুনে নিতে পারবে।

<label for="email">Email:</label> <input type="email" name="email" id="email">

• ARIA এট্রিবিউট ব্যবহার করা:

Accessible Rich Internet Applications (ARIA) এট্রিবিউট HTML Element এর Accessibility ইমপ্রুভ করতে সাহায্য করে। ARIA এট্রিবিউট বিভিন্ন Assistive Technologie যেমন: Screen Reader কে অতিরিক্ত ইনফরমেশন প্রোভাইড করে যাতে ওয়েবপেজের কন্টেন্ট ও ফাংশনালিটিকে আরও একুরেটলি ইউজারের কাছে উপস্থাপন করতে পারে Screen Reader. ARIA এট্রিবিউট মূলত অনেকগুলো এট্রিবিউটের সেট।

ধরুন আপনি আপনার ওয়েবসাইটে Font Awesome এর আইকন ব্যবহার করে কিছু সোশ্যাল মিডিয়ার লিংক শেয়ার করলেন। ঠিক এরকম।
<a href="https://facebook..com"><i class="fa-brands fa-facebook"></i></a>

এক্ষেত্রে Screen Reader এর সাহায্যে যখন ওয়েবসাইটটি এক্সেস করা হবে তখন সে ইউজারকে কোনো ইনফরমেশনই দিতে পারবে না যে এটা কিসের লিংক। এই সমস্যা সমাধানের জন্যে aria-label এট্রিবিউট ব্যবহার করা যেতে পারে। aria-label এট্রিবিউট ঐ লিংক সম্পর্কে ইউজারকে কিছু ইনফরমেশন করবে।

<a href="https://facebook..com" aria-label="This is a link of Facebook"><i class="fa-brands fa-facebook"></i></a>

• Tabindex এট্রিবিউট ব্যবহার করা:

tabindex এট্রিবিউট HTML Accessibility এর জন্যে গুরুত্বপূর্ণ। যখন একজন ইউজার কিবোর্ড ব্যবহার করে ওয়েবপেজ নেভিগেট করে তখন ওয়েবপেজের কন্টেন্টগুলো কোন অর্ডারে ফোকাস করবে সেটা tabindex এট্রিবিউটের মাধ্যমে একজন ডেভেলপার কন্ট্রোল করতে পারে।
ধরুন যখন একজন ব্লাইন্ড পার্সন Screen Reader এর মাধ্যমে আপনার ওয়েবসাইটটি এক্সেস করবে তখন তাকে আপনি প্রথমে আপনার ওয়েবসাইটের হেডিং সম্পর্কে জানাতে চাইছেন। সে ক্ষেত্রে আপনি হেডিং ট্যাগে tabindex="1" ব্যবহার করবেন।
<h1 tabindex="1">This is Heading</h1>

এরপর আপনার একটা ইমেজ সম্পর্কে জানাতে চাইছেন সে ক্ষেত্রে tabindex="2" ব্যবহার করবেন।
<img tabindex="2" src="me.jpg">

এক্ষেত্রে কিবোর্ডের Tab বাটন চাপলে প্রথমে হেডিং ট্যাগ ফোকাস হবে এরপর ইমেজ।

• সঠিক ভাষা ব্যবহার করতে হবে:

আপনি যদি আপনার ওয়েবসাইটের কোথাও লিখেন "Dec 2024" - তাহলে সেটা Screen Reader বা অন্যান্য Assistive Technologies বুঝতে পারবে না এবং সেই অনুযায়ী ইউজারকে সাহায্য করতে পারবে না। কিন্তু আপনি যদি December 2024 লিখেন তাহলে Screen Reader বা অন্যান্য Assistive Technologies সহজেই বুঝতে পারবে এবং সেই অনুযায়ী ইউজারকে সাহায্য করতে পারবে।

🟢 শেষ কথা

এই ব্লগ পোস্টে আমরা মূলত আলোচনা করেছি ভিজুয়্যালি ডিজেবল পার্সনদের জন্যে কিভাবে Accessible HTML কন্টেন্ট তৈরি করা যায়। একদমই বেসিক কিছু কথাবার্তা।

এই ডিজিটাল যুগে এসে ওয়েব কন্টেন্টকে সবার জন্যে এক্সেসিবল করা শুধু গুড প্র্যাকটিসই নয়, বরং এটা অত্যন্ত প্রয়োজনীয়। একজন ডেভেলপার হিসেবে সব ধরনের ইউজার, বিশেষ করে যারা ডিসেবল তারা যেনো বাধাহীন ও সুন্দরভাবে আমাদের তৈরি করা কন্টেন্টগুলো এক্সেস করতে পারে - এটা নিশ্চিত করা আমাদের দায়িত্ব।