ছবি

প্রথম নজরে অ্যাক্সেসিবল ইমেজ একটি সহজ বিষয় বলে মনে হতে পারে—ইমেজে কিছু "অল্ট টেক্সট" যোগ করলেই কাজ শেষ। কিন্তু, বিষয়টি অনেকের ধারণার চেয়েও বেশি জটিল। এই অংশে আমরা আলোচনা করব:

• ছবিগুলোকে অ্যাক্সেসযোগ্য করতে কোডটি কীভাবে আপডেট করবেন।
• ব্যবহারকারীদের সাথে কী তথ্য শেয়ার করা উচিত এবং কোথায় তা শেয়ার করতে হবে।
• প্রতিবন্ধী ব্যক্তিদের সহায়তার জন্য আপনার ছবিগুলোকে আরও উন্নত করার অতিরিক্ত উপায়।

ছবির উদ্দেশ্য এবং প্রেক্ষাপট

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

আপনি নিজেকে প্রশ্ন করতে পারেন:

• ফিচার বা পেজটির প্রেক্ষাপট বোঝার জন্য ছবিটি কি অপরিহার্য?
• ছবিটি কী ধরনের তথ্য বোঝাতে চাইছে?
• ছবিটি কি সরল না জটিল?
• ছবিটি কি আবেগ জাগিয়ে তোলে বা ব্যবহারকারীকে কোনো পদক্ষেপ নিতে প্ররোচিত করে?
• নাকি ছবিটি কোনো বাস্তব উদ্দেশ্য ছাড়াই কেবলই দৃষ্টিনন্দন?

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

আপনার সাইট বা ওয়েব অ্যাপের ছবিগুলো ব্রাউজার এক্সটেনশন বা অন্য কোনো পদ্ধতি ব্যবহার করে লুকানোর চেষ্টা করুন। তারপর নিজেকে জিজ্ঞাসা করুন: "যে বিষয়বস্তু অবশিষ্ট থাকে, তা কি আমি বুঝতে পারছি?" যদি উত্তর হ্যাঁ হয়, তবে এটি সম্ভবত একটি আলংকারিক ছবি। আর যদি না হয়, তবে ছবিটি কোনো না কোনোভাবে তথ্যপূর্ণ এবং প্রাসঙ্গিকভাবে প্রয়োজনীয়। একবার ছবির উদ্দেশ্য নির্ধারণ করতে পারলে, আপনি এর জন্য সবচেয়ে সঠিক কোড লেখার উপায়টি নির্ধারণ করতে পারবেন।

আলংকারিক ছবি

আলংকারিক চিত্র হলো এমন একটি দৃশ্যমান উপাদান যা কোনো অতিরিক্ত প্রেক্ষাপট বা তথ্য যোগ করে না, যার ফলে ব্যবহারকারী প্রেক্ষাপটটি আরও ভালোভাবে বুঝতে পারে। আলংকারিক চিত্রগুলো পরিপূরক এবং এগুলো সারবস্তুর পরিবর্তে শৈলী প্রদান করতে পারে।

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

খালি বা নাল alt

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

ভূমিকা presentation জন্য সেট করা হয়েছে অথবা none

presentation বা none রোল সেট করা হলে, তা কোনো এলিমেন্টের অর্থকে অ্যাক্সেসিবিলিটি ট্রি থেকে সরিয়ে দেয়। অন্যদিকে, aria-hidden= "true" পুরো এলিমেন্টটিকে—এবং এর সমস্ত চাইল্ডকে—অ্যাক্সেসিবিলিটি এপিআই থেকে সরিয়ে দেয়।

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

aria-hidden সতর্কতার সাথে ব্যবহার করুন, কারণ এটি এমন উপাদান লুকিয়ে ফেলতে পারে যা আপনি লুকাতে চান না।

CSS-এ ছবি

CSS ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ যোগ করলে, স্ক্রিন রিডার ইমেজ ফাইলটি শনাক্ত করতে পারে না। এই পদ্ধতিটি প্রয়োগ করার আগে নিশ্চিত হয়ে নিন যে আপনি ইমেজটি লুকাতে চান।

তথ্যপূর্ণ ছবি

তথ্যমূলক ছবি হলো এমন একটি ছবি যা কোনো ধারণা, ভাবনা বা অনুভূতি প্রকাশ করে। তথ্যমূলক ছবির মধ্যে বাস্তব জগতের বস্তুর ছবি, অপরিহার্য প্রতীক, সরল অঙ্কন এবং পাঠ্যের ছবি অন্তর্ভুক্ত।

আপনার ছবিটি যদি তথ্যমূলক হয়, তবে ছবিটির উদ্দেশ্য বর্ণনা করে প্রোগ্রাম্যাটিক অল্টারনেটিভ টেক্সট অন্তর্ভুক্ত করা উচিত। ছবির বিকল্প বিবরণ—যা প্রায়শই "অল্ট টেক্সট" নামে সংক্ষেপে পরিচিত—AT ব্যবহারকারীদের একটি ছবি সম্পর্কে আরও বেশি প্রেক্ষাপট দেয় এবং ছবিটির বার্তা বা উদ্দেশ্য আরও ভালোভাবে বুঝতে সাহায্য করে।

alt অ্যাট্রিবিউট ব্যবহার করে আপনি <img> এলিমেন্টে বিকল্প বিবরণ যোগ করতে পারেন। এটি JPG, PNG বা SVG সহ সকল ধরণের ফাইলের ক্ষেত্রে প্রযোজ্য।

<img src=".../Ladybug_Swarm.jpg"
  alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

তবে, যখন আপনি ইনলাইনে <svg> এলিমেন্ট ব্যবহার করেন, তখন অ্যাক্সেসিবিলিটির বিষয়ে আপনাকে অতিরিক্ত মনোযোগ দিতে হবে। SVG-গুলো শব্দার্থগতভাবে কোড করা থাকে, তাই AT ডিফল্টরূপে এগুলোকে এড়িয়ে যায়।

SVG-টি যদি একটি আলংকারিক ছবি হয়, তবে কোনো সমস্যা নেই—AT উদ্দেশ্য অনুযায়ী এটিকে উপেক্ষা করবে। কিন্তু আপনার SVG-টি যদি একটি তথ্যমূলক ছবি হয়, তাহলে এলিমেন্টটিতে ARIA role="img" যোগ করুন, যাতে AT এটিকে একটি ছবি হিসেবে শনাক্ত করতে পারে।

দ্বিতীয়ত, <svg> এলিমেন্টগুলো alt অ্যাট্রিবিউট ব্যবহার করে না, তাই আপনার তথ্যমূলক ছবিগুলোতে বিকল্প বিবরণ যোগ করার জন্য এর পরিবর্তে ভিন্ন কোডিং পদ্ধতি ব্যবহার করতে হবে।

<svg role="img">
  <title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>

কার্যকরী ছবি

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

তথ্যমূলক ছবির মতোই, কার্যকরী ছবিতেও এর উদ্দেশ্য সম্পর্কে সকল ব্যবহারকারীকে জানানোর জন্য একটি বিকল্প বিবরণ অন্তর্ভুক্ত থাকতে হবে। তথ্যমূলক ছবির বিপরীতে, প্রতিটি কার্যকরী ছবিতে এর দৃশ্যগত দিক নয়, বরং ছবির ক্রিয়াকলাপটি বর্ণনা করতে হয়।

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

ছবিতে বিকল্প বিবরণ যোগ করার একটি উপায় হলো দৃশ্যত লুকানো টেক্সট ব্যবহার করা। এই পদ্ধতি ব্যবহার করলে, টেক্সটটি DOM-এ থাকার কারণে স্ক্রিন রিডার তা পড়তে পারে, কিন্তু কাস্টম CSS-এর সাহায্যে এটি দৃশ্যত লুকানো থাকে।

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

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

জটিল চিত্র

একটি জটিল ছবির জন্য প্রায়শই একটি আলংকারিক, তথ্যমূলক বা কার্যকরী ছবির চেয়ে বেশি ব্যাখ্যার প্রয়োজন হয়। সম্পূর্ণ বার্তাটি পৌঁছে দেওয়ার জন্য এর একটি সংক্ষিপ্ত এবং একটি দীর্ঘ বিকল্প বিবরণ উভয়েরই প্রয়োজন হয়। জটিল ছবির মধ্যে রয়েছে ইনফোগ্রাফিক, মানচিত্র, গ্রাফ/চার্ট এবং জটিল চিত্র।

অন্যান্য ছবির ধরনের মতোই, আপনার জটিল ছবিগুলোতে বিকল্প বিবরণ যোগ করার জন্য বিভিন্ন পদ্ধতি রয়েছে।

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

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

আরেকটি পদ্ধতি হলো <img> এলিমেন্টের সাথে aria-describedby অ্যাট্রিবিউটটি যুক্ত করা। আপনি প্রোগ্রাম্যাটিকভাবে ছবিটিকে এমন একটি ID-এর সাথে লিঙ্ক করতে পারেন, যেখানে একটি বিস্তারিত বিবরণ রয়েছে। এই পদ্ধতিটি ছবি এবং সম্পূর্ণ বিবরণের মধ্যে একটি শক্তিশালী সংযোগ তৈরি করে। বিস্তারিত বিবরণটি স্ক্রিনে দেখানো যেতে পারে অথবা দৃশ্যত লুকিয়ে রাখা যেতে পারে—তবে আরও বেশি মানুষের সুবিধার জন্য এটিকে দৃশ্যমান রাখার কথা বিবেচনা করতে পারেন।

একটি দীর্ঘ বিবরণের সাথে সংক্ষিপ্ত বিকল্প বিবরণগুলিকে একত্রিত করার আরেকটি উপায় হল <figure> এবং <figcaption> এলিমেন্ট ব্যবহার করা। এই এলিমেন্টগুলি aria-describedby এর মতোই কাজ করে, কারণ এটি এলিমেন্টগুলিকে শব্দার্থগতভাবে একত্রিত করে, যা ছবি এবং তার বিবরণের মধ্যে একটি শক্তিশালী সংযোগ তৈরি করে।

ARIA role="group" যোগ করলে সেইসব পুরোনো ওয়েব ব্রাউজারগুলির সাথে পশ্চাৎ সামঞ্জস্যতা নিশ্চিত হয়, যেগুলি <figure> এলিমেন্টের অর্থ সমর্থন করে না।

বিকল্প পাঠ্যের সর্বোত্তম অনুশীলন

অবশ্যই, শুধু বিকল্প লেখা যোগ করাই যথেষ্ট নয়। লেখাটি অর্থপূর্ণও হওয়া উচিত। উদাহরণস্বরূপ, যদি আপনার ছবিটি হয় এক ঝাঁক লেডিবাগের আপনার সেরা গোলাপ ঝোপের পাতা চিবানোর দৃশ্য নিয়ে, কিন্তু আপনার বিকল্প লেখায় লেখা থাকে "বাগস", তাহলে তা কি ছবিটির সম্পূর্ণ বার্তা এবং উদ্দেশ্য প্রকাশ করবে? একদমই না।

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

বিকল্প টেক্সটের কিছু অতিরিক্ত উত্তম অনুশীলন হলো:

• বিবরণে 'image of' বা 'photo of'-এর মতো শব্দ ব্যবহার করা থেকে বিরত থাকুন, কারণ স্ক্রিন রিডার আপনার জন্য এই ফাইলের ধরণগুলো শনাক্ত করে নেবে।
• আপনার ছবিগুলোর নামকরণ করার সময় যথাসম্ভব সামঞ্জস্যপূর্ণ ও নির্ভুল থাকুন। বিকল্প টেক্সট অনুপস্থিত বা উপেক্ষিত হলে ছবির নাম একটি বিকল্প ব্যবস্থা হিসেবে কাজ করে।
• আপনার ছবির নাম বা বিকল্প টেক্সটে বর্ণমালা ছাড়া অন্য অক্ষর (যেমন, #, 9, &) ব্যবহার করা থেকে বিরত থাকুন এবং শব্দগুলোর মধ্যে আন্ডারস্কোরের পরিবর্তে ড্যাশ ব্যবহার করুন।
• যথাসম্ভব সঠিক বিরামচিহ্ন ব্যবহার করুন। তা না হলে ছবির বর্ণনাগুলো একটি দীর্ঘ, অন্তহীন, অবিরাম বাক্যের মতো শোনাবে।
• রোবটের মতো নয়, মানুষের মতো বিকল্প টেক্সট লিখুন। কীওয়ার্ড স্টাফিং কারোরই উপকারে আসে না—স্ক্রিন রিডার ব্যবহারকারীরা বিরক্ত হবেন এবং সার্চ ইঞ্জিনের অ্যালগরিদম আপনাকে শাস্তি দেবে।