অ্যাক্সেসযোগ্যতা

আপনার ওয়েবসাইটকে যথাসম্ভব বেশি মানুষের কাছে সহজলভ্য করার একটি উপায় হলো পেজগুলোকে বিভিন্ন স্ক্রিন সাইজের সাথে মানিয়ে নেওয়ার সুযোগ দেওয়া। এর পাশাপাশি আরও কিছু বিষয় বিবেচনা করা উচিত, যেগুলো আপনার মনে রাখা প্রয়োজন।

বর্ণান্ধতা

একেকজন একেকভাবে রঙ উপলব্ধি করে। প্রোটানোপিয়ায় আক্রান্ত ব্যক্তিরা লাল রঙকে একটি স্বতন্ত্র রঙ হিসেবে দেখেন না। ডিউটেরানোপিয়ায় সবুজ রঙ অনুপস্থিত থাকে। আর ট্রাইটানোপিয়ায় আক্রান্ত ব্যক্তিদের ক্ষেত্রে এটি নীল।

কিছু টুল আপনাকে একটি সাধারণ ধারণা দিতে পারে যে, বিভিন্ন ধরনের বর্ণদৃষ্টিসম্পন্ন মানুষের কাছে আপনার রঙের বিন্যাসগুলো কেমন দেখায়।

ফায়ারফক্সের অ্যাক্সেসিবিলিটি ট্যাবে ' সিমুলেট ' লেবেলযুক্ত একটি ড্রপ-ডাউন মেনু রয়েছে, যেখানে বিভিন্ন অপশনের একটি তালিকা থাকে।

ক্রোম ডেভটুলস-এর রেন্ডারিং ট্যাব আপনাকে দৃষ্টিশক্তির ঘাটতি অনুকরণ করার সুযোগ দেয়।

এগুলো ব্রাউজার-নির্দিষ্ট টুল। অপারেটিং সিস্টেম স্তরেও বিভিন্ন ধরনের দৃষ্টিশক্তি অনুকরণ করা সম্ভব।

Mac-এ, এখানে যান:

1. সিস্টেম পছন্দ
2. প্রবেশগম্যতা
3. প্রদর্শন
4. রঙিন ফিল্টার
5. রঙিন ফিল্টার সক্রিয় করুন

বিকল্পগুলো থেকে একটি বেছে নিন।

সাধারণত, বিভিন্ন উপাদানের মধ্যে পার্থক্য করার জন্য শুধুমাত্র রঙের উপর নির্ভর করা ভালো ধারণা নয়। উদাহরণস্বরূপ, আপনি আপনার লিঙ্কগুলোকে চারপাশের লেখা থেকে ভিন্ন রঙের করতে পারেন—এবং করা উচিতও। কিন্তু এর পাশাপাশি লিঙ্কগুলোর নিচে দাগ দেওয়া বা সেগুলোকে বোল্ড করার মতো অন্য কোনো স্টাইলিং নির্দেশকও প্রয়োগ করা উচিত।

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

রঙের বৈসাদৃশ্য

কিছু রঙের সংমিশ্রণ সমস্যা তৈরি করতে পারে। যদি ফোরগ্রাউন্ড কালার এবং ব্যাকগ্রাউন্ড কালারের মধ্যে যথেষ্ট বৈসাদৃশ্য না থাকে, তাহলে লেখা পড়া কঠিন হয়ে পড়ে। রঙের দুর্বল বৈসাদৃশ্য ওয়েবের সবচেয়ে সাধারণ অ্যাক্সেসিবিলিটি সমস্যাগুলোর মধ্যে একটি, কিন্তু সৌভাগ্যবশত, ডিজাইন প্রক্রিয়ার শুরুতেই এটি শনাক্ত করা সম্ভব।

আপনার টেক্সট এবং ব্যাকগ্রাউন্ড রঙের কনট্রাস্ট রেশিও পরীক্ষা করার জন্য এখানে কিছু টুল দেওয়া হলো, যা আপনি ব্যবহার করতে পারেন:

• VisBug হলো একটি ব্রাউজার এক্সটেনশন যা সকল প্রধান ডেস্কটপ ব্রাউজারে পাওয়া যায়।
• ফায়ারফক্সের অ্যাক্সেসিবিলিটি ইন্সপেক্টর ভিজ্যুয়াল কনট্রাস্টের সমস্যাগুলো পরীক্ষা করতে পারে।
• এছাড়াও আপনি Chrome DevTools ব্যবহার করে কম-কনট্রাস্ট টেক্সট খুঁজে বের করে ঠিক করতে পারেন।
• মাইক্রোসফটের এজ ব্রাউজারে, আপনি কালার পিকার ব্যবহার করে টেক্সটের রঙের বৈসাদৃশ্য পরীক্ষা করতে পারেন।

আপনার CSS-এ color এবং background-color সবসময় একসাথে ডিক্লেয়ার করা একটি ভালো অভ্যাস। ব্যাকগ্রাউন্ড কালারটি ব্রাউজারের ডিফল্ট কালার হবে, এমনটা ধরে নেবেন না। মানুষ তাদের ব্রাউজারের ব্যবহৃত রঙ পরিবর্তন করতে পারে এবং করেও থাকে।

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

উচ্চ বৈসাদৃশ্য

কিছু লোক তাদের অপারেটিং সিস্টেমকে হাই-কন্ট্রাস্ট মোডে সেট করে রাখেন। আপনিও আপনার অপারেটিং সিস্টেমে এটি চেষ্টা করে দেখতে পারেন।

Mac-এ, এখানে যান:

1. সিস্টেম পছন্দ
2. প্রবেশগম্যতা
3. প্রদর্শন

কনট্রাস্ট বাড়ানোর বিকল্পটি নির্বাচন করুন।

কেউ হাই কনট্রাস্ট মোড চালু করেছে কিনা তা শনাক্ত করার জন্য একটি মিডিয়া ফিচার রয়েছে। এই prefers-contrast মিডিয়া ফিচারটি থেকে তিনটি মান জানা যায়: no-preference , less ’ এবং more ’। এই তথ্য ব্যবহার করে আপনি আপনার সাইটের কালার প্যালেট সমন্বয় করতে পারেন।

ব্যবহারকারীরা তাদের অপারেটিং সিস্টেমে বিপরীত রং ব্যবহার করার জন্য একটি পছন্দও সেট করতে পারেন।

Mac-এ, এখানে যান:

1. সিস্টেম পছন্দ
2. প্রবেশগম্যতা
3. প্রদর্শন

রং উল্টানোর বিকল্পটি নির্বাচন করুন।

নিশ্চিত করুন যে, বিপরীত রঙে ব্রাউজ করা কোনো ব্যক্তির কাছেও আপনার ওয়েবসাইটটি বোধগম্য থাকে। বক্স শ্যাডোর দিকে খেয়াল রাখুন—রঙ উল্টে গেলে এগুলি সামঞ্জস্য করার প্রয়োজন হতে পারে।

ফন্টের আকার

মানুষ তাদের ব্রাউজারে শুধু রঙই পরিবর্তন করতে পারে না, তারা ডিফল্ট ফন্ট সাইজও পরিবর্তন করতে পারে। দৃষ্টিশক্তি কমে আসার সাথে সাথে, তারা তাদের ব্রাউজার বা অপারেটিং সিস্টেমের ডিফল্ট ফন্ট সাইজ পরিবর্তন করতে পারে এবং বছর গড়ানোর সাথে সাথে সংখ্যাগুলো বাড়িয়ে তুলতে পারে।

আপনি আপেক্ষিক ফন্ট সাইজ ব্যবহার করে এই সেটিংগুলো অনুযায়ী কাজ করতে পারেন। px মতো একক ব্যবহার করা থেকে বিরত থাকুন। এর পরিবর্তে rem বা ch মতো আপেক্ষিক একক ব্যবহার করুন।

আপনার ব্রাউজারের ডিফল্ট টেক্সট সাইজ সেটিং পরিবর্তন করে দেখুন। আপনি আপনার ব্রাউজার প্রেফারেন্সেস থেকে এটি করতে পারেন। অথবা, কোনো ওয়েব পেজ দেখার সময় জুম ইন করেও এটি করতে পারেন। ডিফল্ট ফন্ট সাইজ ২০০% বাড়ালেও কি আপনার ওয়েবসাইটটি ঠিকঠাক কাজ করে? ৪০০% বাড়ালে কেমন হয়?

ডেস্কটপ কম্পিউটারে ফন্ট সাইজ ৪০০% পর্যন্ত বাড়িয়ে আপনার ওয়েবসাইট ভিজিট করা কোনো ব্যক্তির লেআউট, ছোট স্ক্রিনের ডিভাইসে সাইট ভিজিট করা কোনো ব্যক্তির লেআউটের মতোই হওয়া উচিত।

কীবোর্ড নেভিগেশন

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

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

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

ব্যবহারকারী যখন এক লিঙ্ক থেকে অন্য লিঙ্কে বা এক ফর্ম ফিল্ড থেকে অন্য ফর্ম ফিল্ডে ট্যাব করবেন, তখন ডকুমেন্ট কাঠামোতে উপাদানগুলো যে ক্রমে প্রদর্শিত হবে, সেই ক্রমেই সেগুলোতে ফোকাস করা হবে। এই ক্রমটি ভিজ্যুয়াল অর্ডারের সাথেও মিল থাকা উচিত।

CSS order প্রপার্টি ব্যবহারের ক্ষেত্রে সতর্ক থাকুন। HTML-এ এলিমেন্টগুলোর যে ক্রম থাকে, তার থেকে ভিন্ন একটি দৃশ্যমান ক্রমে সাজানোর জন্য আপনি এটি flexbox এবং grid-এর সাথে একত্রে ব্যবহার করতে পারেন। এটি একটি শক্তিশালী বৈশিষ্ট্য হলেও, যারা কিবোর্ড দিয়ে নেভিগেট করেন, তাদের জন্য এটি বিভ্রান্তিকর হতে পারে।

আপনার ওয়েব পেজগুলোর ট্যাবিং ক্রম সঠিক আছে কিনা তা নিশ্চিত করতে কিবোর্ডের tab কী ব্যবহার করে পরীক্ষা করুন।

ফায়ারফক্স ব্রাউজারের ডেভেলপার টুলসের অ্যাক্সেসিবিলিটি প্যানেলে ‘শো ট্যাবিং অর্ডার’ নামে একটি অপশন রয়েছে। এটি চালু করলে প্রতিটি ফোকাসযোগ্য এলিমেন্টের উপরে সংখ্যা প্রদর্শিত হবে।

হ্রাসকৃত গতি

ওয়েব ডিজাইনকে প্রাণবন্ত করে তোলার জন্য অ্যানিমেশন ও মোশন চমৎকার উপায়। কিন্তু কিছু মানুষের জন্য এই নড়াচড়া খুবই বিভ্রান্তিকর হতে পারে এবং এমনকি বমি বমি ভাবও সৃষ্টি করতে পারে।

একটি ফিচার কোয়েরি আছে যা জানিয়ে দেয় ব্যবহারকারী কম গতি পছন্দ করবেন কিনা। এটিকে prefers-reduced-motion বলা হয়। যেখানেই CSS ট্রানজিশন বা অ্যানিমেশন ব্যবহার করছেন, সেখানেই এটি অন্তর্ভুক্ত করুন।

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion মিডিয়া কোয়েরিটি বিশেষভাবে স্ক্রিনের মুভমেন্টের জন্য ব্যবহৃত হয়। আপনি যদি কোনো এলিমেন্টের রঙে ট্রানজিশন ব্যবহার করেন, তবে সেটি prefers-reduced-motion দ্বারা প্রভাবিত হওয়া উচিত নয়। অপাসিটি ট্রানজিশন এবং ক্রস-ফেড ব্যবহার করাও ঠিক আছে। রিডিউসড মোশন মানে এই নয় যে কোনো অ্যানিমেশন থাকবে না।

কণ্ঠস্বর

মানুষ ভিন্ন ভিন্ন উপায়ে ওয়েব ব্যবহার করে। সবাই আপনার ওয়েবসাইটটি স্ক্রিনে দেখছে না। স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তিগুলো স্ক্রিনে প্রদর্শিত তথ্যকে কথ্য শব্দে রূপান্তরিত করে।

স্ক্রিন রিডার ওয়েব ব্রাউজারসহ সব ধরনের অ্যাপ্লিকেশনের সাথে কাজ করে। একটি ওয়েব ব্রাউজার যাতে স্ক্রিন রিডারের সাথে কার্যকরভাবে যোগাযোগ করতে পারে, তার জন্য অ্যাক্সেস করা ওয়েব পেজটিতে প্রয়োজনীয় অর্থগত তথ্য থাকা প্রয়োজন।

পূর্বে আপনারা শিখেছেন যে, দৃষ্টিহীন ব্যবহারকারীদের কাছে বাটনটির উদ্দেশ্য নির্দিষ্ট করার জন্য শুধুমাত্র আইকনযুক্ত বাটনগুলোতে একটি অ্যাট্রিবিউট অন্তর্ভুক্ত করতে হয়। শক্তিশালী মৌলিক HTML-এর গুরুত্বের এটি মাত্র একটি উদাহরণ।

শিরোনাম

<h1> , <h2> , <h3> ইত্যাদির মতো হেডিংগুলো বিচক্ষণতার সাথে ব্যবহার করুন। স্ক্রিন রিডারগুলো এই হেডিংগুলো ব্যবহার করে আপনার ডকুমেন্টের একটি রূপরেখা তৈরি করে, যা কিবোর্ড শর্টকাটের মাধ্যমে নেভিগেট করা যায়।

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

কাঠামো

আপনার পেজের বিষয়বস্তুকে কাঠামোবদ্ধ করতে <main> , <nav> , <aside> , <header> , এবং <footer> এর মতো ল্যান্ডমার্ক এলিমেন্ট ব্যবহার করুন। এর ফলে স্ক্রিন-রিডার ব্যবহারকারীরা সরাসরি এই ল্যান্ডমার্কগুলোতে চলে যেতে পারবেন।

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

ফর্ম

নিশ্চিত করুন যে প্রতিটি ফর্ম ফিল্ডের সাথে একটি <label> এলিমেন্ট যুক্ত আছে। আপনি <label> এলিমেন্টের for অ্যাট্রিবিউট এবং ফর্ম ফিল্ডের সংশ্লিষ্ট id অ্যাট্রিবিউট ব্যবহার করে একটি ফর্ম ফিল্ডের সাথে লেবেল যুক্ত করতে পারেন।

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

ছবি

সর্বদা alt অ্যাট্রিবিউট ব্যবহার করে ছবিগুলোর একটি লিখিত বিবরণ দিন।

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

ছবিটি যদি শুধুমাত্র প্রদর্শনের জন্য হয়, তাহলেও আপনার alt অ্যাট্রিবিউটটি অন্তর্ভুক্ত করা উচিত, কিন্তু আপনি এটিকে একটি খালি মান দিতে পারেন।

<img src="texture.png">

<img src="texture.png" alt="">

জেক আর্চিবল্ড চমৎকার alt টেক্সট লেখার উপর একটি প্রবন্ধ প্রকাশ করেছেন।

লিঙ্ক

লিঙ্কের মধ্যে বর্ণনামূলক লেখা দেওয়ার চেষ্টা করুন। 'এখানে ক্লিক করুন' বা 'আরও' এর মতো শব্দগুচ্ছ ব্যবহার করা থেকে বিরত থাকুন।

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

আরিয়া

যথাযথ সিমান্টিক এইচটিএমএল ব্যবহার করলে আপনার ওয়েব পেজগুলো স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তি এবং ভয়েস অ্যাসিস্ট্যান্টের মতো অন্যান্য অডিও আউটপুটের জন্য আরও সহজলভ্য হবে।

কিছু ইন্টারফেস উইজেটের কোনো সংশ্লিষ্ট HTML এলিমেন্ট নেই, যেমন ক্যারোসেল, ট্যাব এবং অ্যাকর্ডিয়ন। সেগুলোকে HTML, CSS, JavaScript এবং ARIA-এর সমন্বয়ে একদম গোড়া থেকে তৈরি করতে হয়।

ARIA-এর পূর্ণরূপ হলো অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশনস (Accessible Rich Internet Applications)। এর শব্দভান্ডার আপনাকে এমন পরিস্থিতিতেও শব্দার্থিক তথ্য প্রদান করতে দেয়, যখন কোনো উপযুক্ত HTML এলিমেন্ট উপলব্ধ থাকে না।

যদি আপনাকে এমন ইন্টারফেস এলিমেন্ট তৈরি করতে হয় যা এখনও HTML এলিমেন্ট হিসেবে উপলব্ধ নয়, তাহলে ARIA সম্পর্কে জেনে নিন ।

জাভাস্ক্রিপ্ট দিয়ে আপনি যত বেশি কাস্টমাইজড কার্যকারিতা যোগ করবেন, ARIA সম্পর্কে আপনার তত বেশি বোঝার প্রয়োজন হবে। আপনি যদি সাধারণ HTML এলিমেন্ট ব্যবহার করেন, তবে আপনার ARIA-এর প্রয়োজন নাও হতে পারে।

যদি সম্ভব হয়, স্ক্রিন রিডার ব্যবহারকারী প্রকৃত ব্যক্তিদের দিয়ে পরীক্ষা করান। এটি কেবল তারা কীভাবে ওয়েব ব্যবহার করে সে সম্পর্কে আপনাকে আরও ভালো ধারণা দেবে না, বরং অ্যাক্সেসিবিলিটি মাথায় রেখে ডিজাইন করার ক্ষেত্রে অনুমান নির্ভরতাও দূর করবে।

প্রকৃত মানুষের উপর পরীক্ষা চালানো আপনার যেকোনো অনুমানকে উন্মোচন করার একটি চমৎকার উপায়। পরবর্তী মডিউলে, আপনি শিখবেন কীভাবে মানুষ আপনার ওয়েবসাইটগুলোর সাথে বিভিন্ন উপায়ে মিথস্ক্রিয়া করে—এটি এমন আরেকটি ক্ষেত্র যেখানে অনুমান করে ফেলা খুবই সহজ।

আপনার বোধগম্যতা যাচাই করুন

অভিগম্যতা সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন