এসভিজি (SVG) হল একটি XML ভিত্তিক ফরম্যাট, যা ওয়েব ডিজাইনে গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এসভিজি গ্রাফিক্সের বিশেষত্ব হলো এটি স্কেলেবল এবং সহজে কাস্টমাইজযোগ্য, তবে এর ব্যবহার শুধুমাত্র দৃশ্যমান উপাদানগুলির জন্য নয়, বরং সেগুলোর অ্যাক্সেসিবিলিটি এবং সেমান্টিক স্ট্রাকচার নিশ্চিত করাও গুরুত্বপূর্ণ। Screen reader support এবং semantic structure এসভিজি ফাইলগুলির অ্যাক্সেসিবিলিটি এবং ব্যবহারযোগ্যতা উন্নত করার জন্য প্রয়োজনীয়।
Screen Reader Support (স্ক্রীন রিডার সাপোর্ট)
Screen reader হলো একটি অ্যাসিস্টিভ টেকনোলজি, যা দৃষ্টিহীন বা কম দৃষ্টিসম্পন্ন ব্যবহারকারীদের জন্য ডিজাইন করা হয়। এসভিজি ফাইলের সঠিক অ্যাক্সেসিবিলিটি নিশ্চিত করতে স্ক্রীন রিডারের সহায়তা দরকার, যাতে গ্রাফিক্সের বিষয়বস্তু ব্যবহারকারীরা বুঝতে পারেন। এসভিজি উপাদানগুলির জন্য স্ক্রীন রিডারের পূর্ণ সমর্থন নিশ্চিত করার জন্য aria (Accessible Rich Internet Applications) প্রপার্টি এবং title, desc ট্যাগ ব্যবহার করা যেতে পারে।
1. title এবং desc ট্যাগ
এসভিজি গ্রাফিক্সে প্রতিটি উপাদানের বর্ণনা করার জন্য title এবং desc ট্যাগ ব্যবহার করা হয়। title ট্যাগটি গ্রাফিক্সের শিরোনাম হিসেবে কাজ করে এবং desc ট্যাগটি সেই গ্রাফিক্সের বিস্তারিত বর্ণনা প্রদান করে।
উদাহরণ:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" role="img" aria-labelledby="title description">
<title id="title">Red Circle</title>
<desc id="description">A red circle with a radius of 50 pixels placed in the center of the canvas.</desc>
<circle cx="50" cy="50" r="50" fill="red" />
</svg>
এখানে:
role="img": এসভিজি উপাদানটি একটি চিত্র হিসেবে স্ক্রীন রিডারের কাছে উপস্থাপন করা হচ্ছে।aria-labelledby="title description": স্ক্রীন রিডারের কাছে চিত্রটির শিরোনাম এবং বর্ণনা সঠিকভাবে লিঙ্ক করা হচ্ছে।<title>: গ্রাফিক্সের জন্য একটি সহজ শিরোনাম তৈরি করছে।<desc>: চিত্রের বিস্তারিত বর্ণনা দিচ্ছে, যাতে স্ক্রীন রিডারের মাধ্যমে ব্যবহারকারী পুরো চিত্রটি বুঝতে পারে।
2. role="img"
এসভিজি উপাদানকে একটি চিত্র হিসেবে চিহ্নিত করতে role="img" অ্যাট্রিবিউট ব্যবহার করা হয়। এটি স্ক্রীন রিডারকে জানায় যে এটি একটি চিত্র বা গ্রাফিক্স, যা একটি চিত্রের মতোই বর্ণনা করা প্রয়োজন।
Semantic Structure (সেমান্টিক স্ট্রাকচার)
এসভিজি এর সেমান্টিক স্ট্রাকচার নিশ্চিত করা প্রয়োজন, যাতে এটি আরও বোধগম্য এবং অ্যাক্সেসযোগ্য হয়। সেমান্টিক স্ট্রাকচার এমন একটি কাঠামো যেখানে প্রতিটি উপাদান একটি নির্দিষ্ট লক্ষ্য বা মানে ধারণ করে, যেমন, <circle>, <rect>, <path> ইত্যাদি এসভিজি উপাদানগুলো গ্রাফিক্স তৈরিতে ব্যবহার করা হয়, কিন্তু এগুলোর সঠিক ব্যবহার গুরুত্বপূর্ণ।
1. Descriptive Elements
এসভিজি ফাইলের মধ্যে বিভিন্ন উপাদানগুলোর ব্যবহার যেমন <circle>, <rect>, <line> ইত্যাদি গঠনগতভাবে সঠিকভাবে ব্যবহার করা উচিত, যেন প্রতিটি উপাদানের কার্যকরী লক্ষ্য থাকে। এভাবে স্ক্রীন রিডার এবং অন্যান্য অ্যাসিস্টিভ টেকনোলজিগুলি উপাদানগুলির বর্ণনা করতে সহজে সক্ষম হয়।
2. Using aria-label
এসভিজি উপাদানগুলোর জন্য aria-label প্রপার্টি ব্যবহার করে তাদের প্রতিটির সঠিক বর্ণনা প্রদান করা যায়। এই প্রপার্টি স্ক্রীন রিডারের মাধ্যমে ব্যবহারকারীর কাছে গ্রাফিক্সের উদ্দেশ্য পরিষ্কারভাবে তুলে ধরে।
উদাহরণ:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" aria-label="Blue Circle" />
</svg>
এখানে, aria-label="Blue Circle" স্ক্রীন রিডারকে জানাচ্ছে যে এটি একটি নীল বৃত্ত, যা পুরো চিত্রটি ব্যবহারকারীকে বুঝতে সাহায্য করবে।
3. Grouping Elements Using <g>
<g> (group) ট্যাগের মাধ্যমে এসভিজি উপাদানগুলোকে একটি গ্রুপে রাখতে পারা যায়, যা তাদের একটি যৌথ সেমান্টিক অর্থ প্রদান করে। এটি একাধিক উপাদানকে একত্রিত করার জন্য ব্যবহার করা হয়, যা অ্যাক্সেসিবিলিটি এবং সেমান্টিক স্ট্রাকচার উন্নত করে।
উদাহরণ:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<g aria-label="Group of two circles">
<circle cx="30" cy="30" r="20" fill="green" />
<circle cx="70" cy="30" r="20" fill="yellow" />
</g>
</svg>
এখানে, দুইটি বৃত্তকে একসাথে <g> ট্যাগে গ্রুপ করা হয়েছে, এবং aria-label দিয়ে এই গ্রুপের উদ্দেশ্য বর্ণনা করা হয়েছে।
সারাংশ
- Screen Reader Support নিশ্চিত করতে এসভিজি ফাইলের মধ্যে
title,desc,aria-labelএবংrole="img"ব্যবহার করা উচিত। - এসভিজি উপাদানগুলির সেমান্টিক স্ট্রাকচার নিশ্চিত করতে তাদের সঠিকভাবে গ্রুপ করা, বর্ণনা প্রদান করা এবং সঠিক ট্যাগ ব্যবহার করা প্রয়োজন।
aria-labelledby,aria-describedby, এবংrole="img"এর মাধ্যমে এসভিজি গ্রাফিক্সের অ্যাক্সেসিবিলিটি উন্নত করা সম্ভব।
এসভিজি ফাইলগুলির স্ক্রীন রিডার সাপোর্ট এবং সেমান্টিক স্ট্রাকচার ডিজাইনের অংশ হিসেবে গঠনমূলক অ্যাক্সেসিবিলিটি প্রদান করে, যা প্রতিবন্ধী ব্যবহারকারীদের জন্য ওয়েব কন্টেন্ট আরও সহজলভ্য করে।
Read more
