অ্যাক্সেসিবল থিম তৈরির সেরা অনুশীলনগুলো

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

এর আইনি এবং ব্যবসায়িক দিক তো আছেই, তবে সবচেয়ে গুরুত্বপূর্ণ হলো এক্সেসিবিলিটি গাইডলাইন মেনে চললে সবার জন্যই ব্রাউজিং অভিজ্ঞতা অনেক ভালো হয়।

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

এই পাঠে, আপনি এক্সেসিবল HTML এর মৌলিক বিষয়গুলি শিখবেন এবং কীভাবে সেগুলো আপনার WordPress থিমে প্রয়োগ করবেন তা জানবেন।

মৌলিক বিষয়সমূহ

HTML যতটা শক্তিশালী, ততটাই এক্সেসিবল।

এটা নিজেই চেষ্টা করুন: আপনার কোড এডিটর খুলুন এবং একটি বৈধ HTML পৃষ্ঠা তৈরি করুন—যা সঠিকভাবে মার্কআপ করা হয়েছে ল্যান্ডমার্ক, শিরোনাম, টেক্সট, বাটন, লিংক, ফর্ম ইত্যাদি দিয়ে।

আপনি চাইলে নীচের কোডটি ব্যবহার করতে পারেন।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>
</head>
<body>

<header>
    <h1>আমার ওয়েবসাইটে স্বাগতম</h1>
    <nav>
        <ul>
            <li><a href="#home">হোম</a>
            <li><a href="#about">সম্পর্কিত</a>
            <li><a href="#services">সেবা</a>
            <li><a href="#contact">যোগাযোগ</a></li>
        </ul>
    </nav>
</header>

<main>
    <article id="home">
        <h2>হোম</h2>
        <p>এটি হোম সেকশন, যেখানে পরিচিতিমূলক কনটেন্ট পাওয়া যাবে।</p>
        <form name="Just a button">
            <button type="button">আমাকে ক্লিক করুন!</button>
        </form>
    </article>

    <article id="about">
        <h2>সম্পর্কিত</h2>
        <p>এই সেকশনটি ওয়েবসাইট বা এর পেছনে থাকা ব্যক্তি/কোম্পানির তথ্য ধারণ করে।</p>
        <p><a href="https://example.com">তাদের পূর্ণ প্রোফাইল দেখুন</a></p>
    </article>

    <article id="services">
        <h2>সেবা</h2>
        <p>যে সেবা গুলি প্রদান করা হয় তার বিস্তারিত এখানে পাওয়া যাবে।</p>
    </article>

    <article id="contact">
        <h2>যোগাযোগ</h2>
        <form action="#" method="post" name="contact" autocomplete="on">
            <fieldset>
                <legend>চলুন কথা বলি</legend>
                <div><label for="name">নাম:</label></div>
                <div><input type="text" id="name"></div>
                <div><label for="email">ইমেইল:</label></div>
                <div><input type="email" id="email"></div>
                <div><label for="message">বার্তা:</label></div>
                <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
                <div><input type="submit" value="জমা দিন"></div>
            </fieldset>
        </form>
    </article>
</main>

<footer>
    <p>© 2024 আমার ওয়েবসাইট</p>
</footer>

</body>
</html>

এবার কোডটি Web Accessibility Checker-এর মতো একটি অনলাইন টুল দিয়ে পরীক্ষা করুন এবং দেখুন কোনও অ্যাক্সেসিবিলিটি সমস্যা দেখাচ্ছে না।

সমস্যাগুলো সাধারণত তখনই শুরু হয় যখন আপনি এতে স্টাইল, স্ক্রিপ্ট বা মিডিয়া অ্যাসেট যুক্ত করেন। আধুনিক WordPress থিম ডেভেলপার হিসেবে আপনি মূলত এই প্রযুক্তিগুলো নিয়েই কাজ করবেন—যেমন React-ভিত্তিক ব্লক, PHP দিয়ে তৈরি প্যাটার্ন এবং theme.json থেকে জেনারেট হওয়া CSS।

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

চলুন কিছু কৌশল এবং সেরা প্র্যাকটিসগুলো দেখি, যা ডেভেলপার এবং ডিজাইনাররা কাস্টম ব্লক, টেমপ্লেট এবং প্যাটার্ন তৈরি করার সময় অনুসরণ করতে পারেন।

সেমান্টিক HTML

সবকিছুকে <div> এলিমেন্ট দিয়ে মুড়িয়ে দেওয়ার বদলে HTML এর সেমান্টিক বা অর্থপূর্ণ এলিমেন্টগুলো ব্যবহার করুন।

এটি আপনাকে অহেতুক জটিল কোড বা “চাকা নতুন করে আবিষ্কার” করার মতো ঝামেলা থেকে বাঁচাবে।

ল্যান্ডমার্কস

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

উদাহরণস্বরূপ, কেবল কয়েকটি <div> এবং তাদের ক্লাস ব্যবহার করার পরিবর্তে:

<div class="header">
    <h1>আমার ওয়েবসাইটে স্বাগতম</h1>
</div>


<div class="nav">
    <ul>
        <li><a href="#home">হোম</a></li>
        <li><a href="#about">সম্পর্কিত</a></li>
        <li><a href="#services">সেবা</a></li>
        <li><a href="#contact">যোগাযোগ</a></li>
    </ul>
</div>

আপনি প্রাসঙ্গিক সেকশনগুলোর জন্য ল্যান্ডমার্কস ব্যবহার করতে পারেন।

<header>
    <h1>আমার ওয়েবসাইটে স্বাগতম</h1>
</header>


<nav>
    <ul>
        <li><a href="#home">হোম</a></li>
        <li><a href="#about">সম্পর্কিত</a></li>
        <li><a href="#services">সেবা</a></li>
        <li><a href="#contact">যোগাযোগ</a></li>
    </ul>
</nav>

আপনি যদি Site Editor এর মাধ্যমে থিম ডিজাইন বা তৈরি করেন, তবে সেখানেও ল্যান্ডমার্ক সেট করা সম্ভব।

Group, Row, এবং Stack ব্লকগুলোকে কন্টেন্ট সেকশনিং এলিমেন্ট হিসেবে ডিফাইন করতে, ব্লকটি সিলেক্ট করুন, Settings ওপেন করুন এবং Advanced সেকশনটি এক্সপ্যান্ড করুন।

নিচে স্ক্রল করুন এবং ব্লকের কাজ ও অবস্থান অনুযায়ী HTML ELEMENT হিসেবে header, main, section, article, aside, বা footer সিলেক্ট করুন।

শিরোনাম

টেমপ্লেটে শিরোনাম যোগ করার সময় সবসময় সঠিক ক্রমে শিরোনাম ব্যবহার করুন, H2 থেকে শুরু করে ক্রমানুসারে H6 পর্যন্ত।

Site Editor-এ, Document Overview > Outline এ ক্লিক করে দেখে নিন কোনো লেভেল বাদ পড়েছে কিনা বা সবকিছু ঠিকঠাক আছে কিনা।

বাটন বনাম লিঙ্ক

ইউজার অ্যাকশন ডিজাইন করার সময় বাটন এবং লিঙ্ক ব্যবহারের ক্ষেত্রে নিম্নলিখিত বিষয়গুলো বিবেচনা করুন:

যদি আপনি চান ব্যবহারকারীরা কোনো অ্যাকশন সম্পন্ন করুক, তবে button element ব্যবহার করুন।
যদি আপনি চান তারা অন্য কোনো পেজে নেভিগেট করুক, তবে anchor element (<a>) ব্যবহার করুন।
যদি কোনো লিঙ্ককে বাটনের মতো দেখাতে হয়, যেমন ল্যান্ডিং পেজের কল-টু-অ্যাকশন, তবে CSS দিয়ে সেটিকে স্টাইল করুন।

ফর্ম

আপনার থিমে কোনো ফর্ম ডিজাইন করলে, নিচের নির্দেশিকা অনুসরণ করুন:

সবসময় ফর্মটি form element এর মধ্যে রাখুন।

ইনপুট ফিল্ডে সর্বদা সঠিক type এবং মেলানো অ্যাট্রিবিউট সেট করুন। উদাহরণস্বরূপ, যদি ইনপুটের type tel হিসেবে ডিফাইন করেন, তবে মোবাইল ডিভাইসে সংখ্যার কিপ্যাড প্রদর্শিত হবে।

<input type="tel" name="phone" id="phone" required>

ইনপুট ফিল্ডটি কীসের জন্য, তা বোঝাতে কেবল placeholder টেক্সটের ওপর নির্ভর করবেন না; সবসময় এক্সেসিবল লেবেল ব্যবহার করুন।

যেকোনো সার্চ ফর্মের জন্য search element ব্যবহার করুন।

লগইন ফর্ম ডিজাইন করার সময়, autocomplete অ্যাট্রিবিউট ব্যবহার করে পাসওয়ার্ড ম্যানেজারকে ফর্ম পূরণে সাহায্য করতে পারেন।

<input type="password" autocomplete="current-password">

ডিফল্টভাবে, বেশিরভাগ ব্রাউজার ফোকাস করা এলিমেন্টে ফোকাস রিং দেখায়।

যদি আপনি এই ফোকাস রিং এর প্রদর্শন পরিবর্তন করতে চান, :focus-visible pseudo-class ব্যবহার করুন, এবং ফোকাস রিং সম্পূর্ণভাবে মুছে ফেলবেন না।

রঙ

যথেষ্ট কনট্রাস্টের সাথে এক্সেসিবল রঙ প্যালেট তৈরি করুন।

টেমপ্লেট এডিট করার সময়, WordPress আপনাকে সতর্ক করবে যদি আপনি এমন টেক্সট এবং ব্যাকগ্রাউন্ড রঙ ব্যবহার করেন যা যথেষ্ট কনট্রাস্ট দেয় না।

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

টাইপোগ্রাফি

ফন্ট সাইজ সেট করার সময় relative units যেমন rem ব্যবহার করুন, px ব্যবহার এড়িয়ে চলুন।

কন্টেন্টের প্রস্থ 50 থেকে 70 ক্যারেক্টারের মধ্যে সীমিত রাখুন; এ জন্য character বা ch unit একদম পারফেক্ট।

ফন্ট সাইজ অনুযায়ী পর্যাপ্ত line spacing ব্যবহার করুন।

ব্যবহারকারীর পছন্দকে প্রাধান্য দিন

রেসপনসিভ ডিজাইনের মূল ভিত্তি হলো media queries, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।

কিছু media query যেমন prefers-color-scheme বা prefers-reduced-motion সরাসরি এক্সেসিবিলিটি সাথে যুক্তসাথে যুক্ত, তবে pointer, hover, বা scripting এর মতো query ব্যবহার করে ডিভাইস অনুযায়ী কম্পোনেন্টের আচরণ সমন্বয় করা যায়।

ARIA ওয়ার্কঅ্যারাউন্ড

ARIA হলো Accessible Rich Internet Applications framework এর সংক্ষিপ্ত রূপ, এবং এটি প্রায়ই HTML কন্টেন্টকে স্ক্রীন রিডারের জন্য আরও এক্সেসিবল করার দ্রুত উপায় হিসেবে উল্লেখ করা হয়।

তবে ARIA ব্যবহার করার সবচেয়ে গুরুত্বপূর্ণ নিয়ম হলো এটি শুধুমাত্র তখনই ব্যবহার করা যখন সত্যিই প্রয়োজন। আদর্শভাবে, স্ক্রিন রিডারকে কন্টেন্টের অর্থ বোঝাতে সবসময় HTML-এর নিজস্ব ফিচারগুলো ব্যবহার করা উচিত।

ভুলভাবে ব্যবহৃত ARIA অ্যাট্রিবিউট এক্সেসিবিলিটি কমিয়ে দেয়, তাই সেগুলি এড়িয়ে চলুন যদি না আপনার HTML নিয়ন্ত্রণ নেই বা ডাইনামিক কনটেন্ট হ্যান্ডেল করতে হয়।

আরও তথ্যের জন্য, MDN’s WAI-ARIA basics দেখুন।

সারসংক্ষেপ এবং আরও পড়ার জন্য

এক্সেসিবিলিটি একটি চলমান প্রক্রিয়া। একটি ছোটো উন্নতিও আপনার সাইটের ভিজিটরের জন্য বড় পার্থক্য তৈরি করতে পারে, এবং এর কোনো নেতিবাচক প্রভাব নেই। এটি কখনোই ব্যবহারকারীর অভিজ্ঞতা খারাপ করবে না।

আরও শিখতে, W3C Web Accessibility Initiative (WAI) Tutorials দেখুন।