# ছবিতে বিকল্প লেখা থাকতে হবে

<https://www.fixreports.com/bn/issues/image-alt>

WCAG 1.1.1 নন-টেক্সট কনটেন্ট · লেভেল A

ছবিগুলোতে বিকল্প লেখা নেই, তাই স্ক্রিন রিডার ব্যবহারকারীরা জানতে পারেন না ছবিতে কী আছে।

## এই নিয়ম কী যাচাই করে
নিশ্চিত করে যে <img> এলিমেন্টে বিকল্প লেখা আছে, অথবা none বা presentation role আছে.

## কেন এটি গুরুত্বপূর্ণ
WCAG 1.1.1 অনুযায়ী অর্থবহ ছবির জন্য বিকল্প লেখা থাকতে হবে। এটি না থাকলে স্ক্রিন রিডার ব্যবহারকারী বুঝতে পারেন না ছবিতে কোন প্রোডাক্ট দেখানো হয়েছে।

## কীভাবে ঠিক করবেন
### যেকোনো ওয়েবসাইটে
1. আপনার CMS বা টেমপ্লেটে প্রতিটি ছবির alt টেক্সটে একটি ছোট, সুনির্দিষ্ট বর্ণনা যোগ করুন।
2. একজন ক্রেতার কাছে যা গুরুত্বপূর্ণ তা বর্ণনা করুন: প্রোডাক্টের নাম, রং এবং কোন দিক থেকে দেখানো হয়েছে (যেমন ‘জলপাই রঙের ক্যানভাস টোট ব্যাগ, সামনের দিক’)।
3. সাজসজ্জার ছবিতে খালি alt অ্যাট্রিবিউট (alt="") থাকা উচিত, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।

### Shopify-তে
1. Shopify অ্যাডমিনে Products > [product] > Media খুলুন, প্রতিটি ছবিতে ক্লিক করুন এবং ‘Alt text’ পূরণ করুন। সেকশনের ছবির জন্য Online Store > Themes > Customize খুলুন এবং সেকশন সেটিংসে ছবির alt টেক্সট সেট করুন।
2. একজন ক্রেতার কাছে যা গুরুত্বপূর্ণ তা বর্ণনা করুন: প্রোডাক্টের নাম, রং এবং কোন দিক থেকে দেখানো হয়েছে (যেমন ‘জলপাই রঙের ক্যানভাস টোট ব্যাগ, সামনের দিক’)।
3. সাজসজ্জার ছবিতে খালি alt অ্যাট্রিবিউট (alt="") থাকা উচিত, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।

### WooCommerce ও WordPress-এ
1. WordPress-এ Media > Library খুলুন, প্রতিটি ছবি সিলেক্ট করুন এবং ‘Alternative Text’ পূরণ করুন। প্রোডাক্ট গ্যালারির ছবিতেও একই ফিল্ড ব্যবহৃত হয়।
2. একজন ক্রেতার কাছে যা গুরুত্বপূর্ণ তা বর্ণনা করুন: প্রোডাক্টের নাম, রং এবং কোন দিক থেকে দেখানো হয়েছে (যেমন ‘জলপাই রঙের ক্যানভাস টোট ব্যাগ, সামনের দিক’)।
3. সাজসজ্জার ছবিতে খালি alt অ্যাট্রিবিউট (alt="") থাকা উচিত, যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।

## সংশোধন কীভাবে যাচাই করবেন
- প্রভাবিত পেজগুলো আবার স্ক্যান করুন।
- প্রোডাক্টের ছবিগুলো কীভাবে ঘোষণা করা হয় তা শুনতে একটি স্ক্রিন রিডার ব্যবহার করুন (VoiceOver: Mac-এ Cmd+F5)।

## তথ্যসূত্র
- axe-core নিয়মের ডকুমেন্টেশন (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- WCAG 1.1.1-এর ব্যাখ্যা (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content