aria-* Attributes এবং Accessibility Best Practices গাইড ও নোট

Accessibility (অ্যাক্সেসিবিলিটি) ওয়েবসাইটকে সকল ব্যবহারকারীর জন্য, বিশেষ করে প্রতিবন্ধীদের জন্য, সহজলভ্য এবং ব্যবহারযোগ্য করার প্রক্রিয়া। ARIA (Accessible Rich Internet Applications) হল একটি সেট অ্যাট্রিবিউট যা HTML এলিমেন্টগুলিকে আরও অ্যাক্সেসিবল করে তোলে। ARIA-* অ্যাট্রিবিউটস ব্যবহার করে আমরা ওয়েব কন্টেন্টের অর্থ ও কার্যকলাপ স্ক্রিন রিডার এবং অন্যান্য অ্যাক্সেসিবিলিটি টুলসকে স্পষ্টভাবে বোঝাতে পারি।

১. ARIA- Attributes কী?*

ARIA- Attributes* হল অতিরিক্ত HTML অ্যাট্রিবিউটস যা ওয়েব এলিমেন্টগুলির অ্যাক্সেসিবিলিটি বাড়াতে ব্যবহৃত হয়। এগুলি মূলত ডাইনামিক কন্টেন্ট এবং রিচ ইন্টারেক্টিভ এলিমেন্টগুলিকে অ্যাক্সেসিবল করার জন্য ডিজাইন করা হয়েছে।

প্রধান ARIA- Attributes:*

• role: এলিমেন্টের উদ্দেশ্য বা ভূমিকা নির্ধারণ করে।
• aria-label: এলিমেন্টের একটি বর্ণনামূলক লেবেল প্রদান করে।
• aria-labelledby: একটি এলিমেন্টকে অন্য এলিমেন্টের মাধ্যমে লেবেল করে।
• aria-describedby: একটি এলিমেন্টকে অন্য এলিমেন্টের মাধ্যমে বর্ণনা করে।
• aria-hidden: এলিমেন্টকে স্ক্রিন রিডার থেকে লুকিয়ে রাখে।
• aria-live: এলিমেন্টে পরিবর্তন ঘটলে স্ক্রিন রিডারকে জানায়।
• aria-expanded, aria-controls, aria-haspopup: ড্রপডাউন, মডাল, অ্যাকর্ডিয়ন ইত্যাদি ইন্টারেক্টিভ এলিমেন্টগুলির অবস্থা নির্দেশ করে।

২. ARIA- Attributes এর ব্যবহার*

২.১. role Attribute

role অ্যাট্রিবিউট ব্যবহার করে এলিমেন্টের ভূমিকা নির্ধারণ করা হয়। এটি স্ক্রিন রিডারকে এলিমেন্টের উদ্দেশ্য বুঝতে সাহায্য করে।

উদাহরণ:

<button role="switch" aria-checked="false">Toggle</button>

ব্যাখ্যা:

• role="switch": বাটনটিকে একটি সুইচ হিসেবে চিহ্নিত করে।
• aria-checked="false": সুইচের বর্তমান অবস্থা নির্ধারণ করে।

২.২. aria-label Attribute

aria-label ব্যবহার করে এলিমেন্টের একটি বর্ণনামূলক লেবেল প্রদান করা হয়, যা স্ক্রিন রিডার ব্যবহারকারীদের জন্য স্পষ্ট হয়।

উদাহরণ:

<button aria-label="বন্ধ করুন">X</button>

ব্যাখ্যা:

• aria-label="বন্ধ করুন": বাটনটির উদ্দেশ্য স্পষ্টভাবে বোঝায়, যা স্ক্রিন রিডার ব্যবহারকারীদের জন্য উপকারী।

২.৩. aria-labelledby Attribute

aria-labelledby ব্যবহার করে একটি এলিমেন্টকে অন্য এলিমেন্টের মাধ্যমে লেবেল করা হয়।

উদাহরণ:

<h2 id="modalTitle">মডাল শিরোনাম</h2>
<div role="dialog" aria-labelledby="modalTitle">
    <p>এটি একটি মডাল কন্টেন্ট।</p>
    <button>বন্ধ করুন</button>
</div>

ব্যাখ্যা:

• aria-labelledby="modalTitle": মডালকে তার শিরোনাম দিয়ে লেবেল করে, যা স্ক্রিন রিডারকে শিরোনামটি পড়তে নির্দেশ দেয়।

২.৪. aria-describedby Attribute

aria-describedby ব্যবহার করে একটি এলিমেন্টকে অন্য এলিমেন্টের মাধ্যমে বর্ণনা করা হয়।

উদাহরণ:

<label for="email">ইমেইল:</label>
<input type="email" id="email" aria-describedby="emailHelp">
<span id="emailHelp">আপনার ইমেইল ঠিকানা প্রদান করুন।</span>

ব্যাখ্যা:

• aria-describedby="emailHelp": ইনপুট ফিল্ডের বর্ণনা দেয়, যা স্ক্রিন রিডারকে অতিরিক্ত তথ্য সরবরাহ করে।

২.৫. aria-hidden Attribute

aria-hidden ব্যবহার করে একটি এলিমেন্টকে স্ক্রিন রিডার থেকে লুকিয়ে রাখা যায়।

উদাহরণ:

<div aria-hidden="true">
    <img src="decorative-image.png" alt="">
</div>

ব্যাখ্যা:

• aria-hidden="true": এই ডেকোরেটিভ ইমেজকে স্ক্রিন রিডার উপেক্ষা করে, কারণ এটি কোন গুরুত্বপূর্ণ তথ্য বহন করে না।

২.৬. aria-live Attribute

aria-live ব্যবহার করে এলিমেন্টে পরিবর্তন ঘটলে স্ক্রিন রিডারকে তা জানানো হয়।

উদাহরণ:

<div aria-live="polite">
    নতুন বার্তা আসছে...
</div>

ব্যাখ্যা:

• aria-live="polite": স্ক্রিন রিডার পরিবর্তন সম্পর্কে ব্যবহারকারীকে জানায়, তবে এটি মুল কন্টেন্টের পড়ার সাথে সামঞ্জস্য রেখে করে।

৩. Accessibility Best Practices

৩.১. সঠিক সেমান্টিক ট্যাগ ব্যবহার করুন

সঠিক সেমান্টিক ট্যাগ ব্যবহার করলে ওয়েবসাইটের কাঠামো স্পষ্ট হয় এবং স্ক্রিন রিডার সহজে কন্টেন্ট বুঝতে পারে।

উদাহরণ:

<header>
    <h1>আমার ওয়েবসাইট</h1>
    <nav aria-label="প্রধান নেভিগেশন">
        <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>
</header>

৩.২. অল্ট টেক্সট প্রদান করুন

সব ছবি এবং গ্রাফিক্সের জন্য বর্ণনামূলক alt টেক্সট ব্যবহার করুন, যা স্ক্রিন রিডার ব্যবহারকারীদের জন্য অপরিহার্য।

উদাহরণ:

<img src="logo.png" alt="আমার কোম্পানির লোগো">

ডেকোরেটিভ ইমেজের জন্য:

<img src="decorative-image.png" alt="">

৩.৩. ফর্ম এলিমেন্টে সঠিক লেবেল ব্যবহার করুন

ফর্ম ইনপুটগুলোর সাথে স্পষ্ট এবং সঠিক <label> ট্যাগ ব্যবহার করুন।

উদাহরণ:

<form>
    <div>
        <label for="username">ব্যবহারকারীর নাম:</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="email">ইমেইল:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <button type="submit">সাবমিট করুন</button>
</form>

৩.৪. কীবোর্ড নেভিগেশন নিশ্চিত করুন

সকল ইন্টারেক্টিভ এলিমেন্ট কীবোর্ড দিয়ে অ্যাক্সেসযোগ্য হওয়া উচিত, যাতে ব্যবহারকারীরা মাউস ছাড়া ওয়েবসাইট ব্যবহার করতে পারেন।

উদাহরণ:

<button>Click Me</button>
<a href="#home">হোম</a>
<input type="text" placeholder="Search...">

প্রয়োজন হলে tabindex ব্যবহার করুন:

<div tabindex="0">Focusable Div</div>

৩.৫. কনট্রাস্ট রঙ ব্যবহার করুন

টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে পর্যাপ্ত কনট্রাস্ট নিশ্চিত করুন, যাতে স্ক্রিন রিডার সহ সকল ব্যবহারকারীর জন্য কন্টেন্ট সহজে পড়া যায়।

উদাহরণ:

body {
    background-color: #FFFFFF; /* সাদা */
    color: #000000; /* কালো */
}

a {
    color: #1a0dab; /* গাঢ় নীল */
}

WCAG রেশিও মেনে চলুন:

• টেক্সটের জন্য কমপক্ষে ৪.৫:১ কনট্রাস্ট রেশিও থাকা উচিত।

৩.৬. ARIA অ্যাট্রিবিউটস ব্যবহার করুন

জটিল ইন্টারেক্টিভ এলিমেন্টগুলোর জন্য সঠিক ARIA রোল এবং অ্যাট্রিবিউটস ব্যবহার করুন।

উদাহরণ:

<button aria-label="Close" onclick="closeModal()">X</button>

<div role="alert" aria-live="assertive">
    এটি একটি গুরুত্বপূর্ণ সতর্কতা বার্তা।
</div>

৩.৭. ফোকাস ম্যানেজমেন্ট নিশ্চিত করুন

ডাইনামিক কন্টেন্ট পরিবর্তনের সময় ফোকাসকে সঠিকভাবে ম্যানেজ করুন, যাতে ব্যবহারকারীরা নতুন কন্টেন্ট সহজে অ্যাক্সেস করতে পারেন।

উদাহরণ: মডাল ওপেন করার সময় ফোকাস সেট করা

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>ফোকাস ম্যানেজমেন্ট উদাহরণ</title>
    <style>
        #myModal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <button onclick="openModal()">মডাল খুলুন</button>

    <div id="myModal" role="dialog" aria-labelledby="modalTitle" aria-modal="true">
        <h2 id="modalTitle">মডাল শিরোনাম</h2>
        <p>এটি একটি মডাল কন্টেন্ট।</p>
        <button onclick="closeModal()">বন্ধ করুন</button>
    </div>

    <script>
        function openModal() {
            const modal = document.getElementById('myModal');
            modal.style.display = 'block';
            modal.querySelector('button').focus();
        }

        function closeModal() {
            const modal = document.getElementById('myModal');
            modal.style.display = 'none';
        }
    </script>
</body>
</html>

ব্যাখ্যা:

• role="dialog" এবং aria-modal="true": মডালকে স্ক্রিন রিডার বোঝাতে সাহায্য করে।
• aria-labelledby="modalTitle": মডালের শিরোনাম সংযুক্ত করে।
• modal.querySelector('button').focus();: মডাল ওপেন করার সময় ফোকাসকে প্রথম ইনপুট বা বাটনে নিয়ে যায়।

৪. ARIA- Attributes এর Best Practices*

1. সঠিক ARIA রোল ব্যবহার করুন:
   • শুধু তখনই ARIA রোল ব্যবহার করুন যখন সেমান্টিক HTML ট্যাগ যথেষ্ট না হয়।
   • উদাহরণস্বরূপ, <div role="button"> ব্যবহার করা যেতে পারে যখন <button> ট্যাগ ব্যবহার করা সম্ভব না হয়।
2. কেবল প্রয়োজনীয় ARIA অ্যাট্রিবিউটস ব্যবহার করুন:
   • অতিরিক্ত ARIA অ্যাট্রিবিউটস ব্যবহার করলে কন্টেন্টের অ্যাক্সেসিবিলিটি কমে যেতে পারে।
   • শুধু সেই এলিমেন্টগুলিতে ARIA অ্যাট্রিবিউটস ব্যবহার করুন যা সত্যিই প্রয়োজন।
3. aria-hidden সতর্কতার সাথে ব্যবহার করুন:
   • শুধুমাত্র ডেকোরেটিভ এলিমেন্টগুলিকে লুকিয়ে রাখতে aria-hidden="true" ব্যবহার করুন।
   • গুরুত্বপূর্ণ কন্টেন্টকে লুকিয়ে রাখবেন না।
4. aria-live ব্যবহার করুন সঠিকভাবে:
   • শুধুমাত্র প্রয়োজনীয় এলিমেন্টগুলিতে aria-live ব্যবহার করুন, যেমন ডাইনামিক বার্তা বা সতর্কতা।
   • aria-live="polite" বা aria-live="assertive" নির্ধারণ করুন কন্টেন্টের গুরুত্ব অনুযায়ী।
5. aria-labelledby এবং aria-describedby সঠিকভাবে ব্যবহার করুন:
   • এলিমেন্টের সাথে তাদের লেবেল এবং বর্ণনা স্পষ্টভাবে যুক্ত করুন।
   • উদাহরণস্বরূপ, <input> ফিল্ডের জন্য সঠিক লেবেল এবং বর্ণনা প্রদান করুন।
6. ARIA এর সাথে সেমান্টিক HTML একত্রিত করুন:
   • ARIA অ্যাট্রিবিউটসকে সেমান্টিক HTML ট্যাগগুলোর সাথে একত্রিত করুন যাতে কন্টেন্টের কাঠামো এবং অর্থ স্পষ্ট হয়।
7. কন্টেন্ট আপডেটের সাথে ফোকাস ম্যানেজমেন্ট করুন:
   • ডাইনামিক কন্টেন্ট আপডেটের সময় ফোকাসকে সঠিকভাবে নিয়ন্ত্রণ করুন যাতে ব্যবহারকারীরা সহজে নতুন কন্টেন্ট অ্যাক্সেস করতে পারেন।

৫. উদাহরণ: ARIA Attributes সহ Accessible HTML পেজ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Accessible HTML পেজ উদাহরণ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #FFFFFF;
            color: #000000;
        }
        header, footer {
            background-color: #f4f4f4;
            padding: 20px;
            text-align: center;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 10px;
        }
        main {
            padding: 20px;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        /* টুলটিপ স্টাইল */
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <header>
        <h1>আমার ওয়েবসাইট</h1>
        <nav aria-label="প্রধান নেভিগেশন">
            <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>
    </header>

    <main>
        <article id="home">
            <h2>স্বাগতম!</h2>
            <p>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম। এখানে আপনি আমাদের সেবা সম্পর্কে জানতে পারবেন।</p>
            <figure>
                <img src="service.jpg" alt="আমাদের সেবার একটি চিত্র">
                <figcaption>আমাদের সেবার একটি চিত্র</figcaption>
            </figure>
        </article>

        <section id="about">
            <h2>আমাদের সম্পর্কে</h2>
            <p>আমরা একটি প্রযুক্তি ভিত্তিক প্রতিষ্ঠান যা উদ্ভাবনী সমাধান প্রদান করে। আমাদের লক্ষ্য হলো সকলের জন্য সহজলভ্য এবং কার্যকর সমাধান তৈরি করা।</p>
        </section>

        <aside>
            <h3>প্রিয় পোস্ট</h3>
            <ul>
                <li><a href="#post1">প্রবন্ধ ১</a></li>
                <li><a href="#post2">প্রবন্ধ ২</a></li>
            </ul>
        </aside>

        <section id="services">
            <h2>আমাদের সেবা</h2>
            <p>আমরা বিভিন্ন ধরনের সেবা প্রদান করি, যেমন ওয়েব ডেভেলপমেন্ট, ডিজাইন, এবং ডিজিটাল মার্কেটিং।</p>
            <button onclick="alert('সেবা সম্পর্কে আরও জানতে যোগাযোগ করুন।')">আরও জানুন</button>
        </section>
    </main>

    <footer>
        <p>© 2024 আমার ওয়েবসাইট. সর্বস্বত্ব সংরক্ষিত।</p>
    </footer>

    <!-- টুলটিপ এলিমেন্ট -->
    <div id="tooltip" class="tooltip">টুলটিপ</div>

    <script>
        // টুলটিপের জন্য JavaScript
        const tooltip = document.getElementById('tooltip');

        document.querySelectorAll('a').forEach(link => {
            link.addEventListener('mouseover', function(event) {
                tooltip.textContent = `আপনি ${this.textContent} লিঙ্কে হোভার করেছেন।`;
                tooltip.style.left = `${event.pageX + 10}px`;
                tooltip.style.top = `${event.pageY + 10}px`;
                tooltip.style.opacity = 1;
            });

            link.addEventListener('mouseout', function() {
                tooltip.style.opacity = 0;
            });
        });

        // মডাল উদাহরণ
        function openModal() {
            const modal = document.getElementById('myModal');
            modal.style.display = 'block';
            modal.querySelector('button').focus();
        }

        function closeModal() {
            const modal = document.getElementById('myModal');
            modal.style.display = 'none';
        }
    </script>
</body>
</html>

ব্যাখ্যা:

• সেমান্টিক ট্যাগ: ওয়েবসাইটের কাঠামো স্পষ্টভাবে চিহ্নিত করা হয়েছে <header>, <nav>, <main>, <article>, <section>, <aside>, এবং <footer> দিয়ে।
• aria-label: নেভিগেশন এলাকা বোঝাতে aria-label="প্রধান নেভিগেশন" ব্যবহার করা হয়েছে।
• অল্ট টেক্সট: ছবির জন্য বর্ণনামূলক alt অ্যাট্রিবিউট ব্যবহার করা হয়েছে।
• টুলটিপ: CSS এবং JavaScript ব্যবহার করে টুলটিপ তৈরি করা হয়েছে যা লিঙ্কের উপর হোভার করলে প্রদর্শিত হয়।
• ফর্ম এবং বাটন: ইন্টারেক্টিভ এলিমেন্টগুলোর সাথে স্পষ্ট লেবেল এবং অ্যাকশন সংযুক্ত করা হয়েছে।
• কনট্রাস্ট রঙ: টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে পর্যাপ্ত কনট্রাস্ট রেশিও নিশ্চিত করা হয়েছে।

৬. Tools for Testing Accessibility

Accessibility নিশ্চিত করার জন্য বিভিন্ন টুলস ব্যবহার করা যেতে পারে:

1. WAVE (Web Accessibility Evaluation Tool):
   • ওয়েবসাইটের অ্যাক্সেসিবিলিটি ইস্যুজ গুলি চিহ্নিত করে এবং উন্নতির পরামর্শ দেয়।
2. Google Lighthouse:
   • ওয়েবসাইটের পারফরমেন্স, অ্যাক্সেসিবিলিটি, SEO, এবং অন্যান্য মানদণ্ডের মূল্যায়ন করে।
3. axe Accessibility Checker:
   • ব্রাউজার এক্সটেনশন, যা স্বয়ংক্রিয়ভাবে অ্যাক্সেসিবিলিটি ইস্যুজ গুলি চিহ্নিত করে।
4. NVDA (NonVisual Desktop Access):
   • Windows এর জন্য বিনামূল্যে স্ক্রিন রিডার, যা ব্যবহার করে ওয়েবসাইটের অ্যাক্সেসিবিলিটি টেস্ট করা যায়।
5. VoiceOver:
   • macOS এবং iOS এর জন্য বিল্ট-ইন স্ক্রিন রিডার, যা ব্যবহার করে অ্যাক্সেসিবিলিটি টেস্ট করা যায়।

ARIA- Attributes* এবং Accessibility Best Practices ব্যবহার করে আমরা ওয়েবসাইটকে সকল ব্যবহারকারীর জন্য অন্তর্ভুক্তিমূলক এবং ব্যবহারবান্ধব করে তুলতে পারি। সঠিক সেমান্টিক ট্যাগ, অল্ট টেক্সট, ARIA অ্যাট্রিবিউটস, এবং কীবোর্ড নেভিগেশন নিশ্চিত করার মাধ্যমে ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ানো সম্ভব। এই পদক্ষেপগুলো ওয়েবসাইটকে শুধু সকলের জন্য ব্যবহারযোগ্য করে তোলে না, বরং SEO-র ক্ষেত্রেও ইতিবাচক প্রভাব ফেলে।

টিপস:

• ডকুমেন্টেশন রেফারেন্স: MDN Web Docs - ARIA এবং W3C ARIA আরও বিস্তারিত জানতে।
• প্র্যাকটিস করুন: বিভিন্ন প্রকল্পে ARIA অ্যাট্রিবিউটস ব্যবহার করে দেখুন এবং নিয়মিত টেস্টিং করুন।
• টেস্টিং টুলস ব্যবহার করুন: ওয়েবসাইটের অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্য নিয়মিত টেস্টিং টুলস ব্যবহার করুন।
• নতুন ট্রেন্ডস আপডেট রাখুন: অ্যাক্সেসিবিলিটি বিষয়ক নতুন স্ট্যান্ডার্ড এবং প্রযুক্তি সম্পর্কে আপডেট থাকুন এবং সেগুলো প্রয়োগ করুন।