You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
31 KiB
181 lines
31 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
|
|
"translation_date": "2025-08-28T23:08:25+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
"language_code": "bn"
|
|
}
|
|
-->
|
|
# অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করা
|
|
|
|
|
|
> স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
## প্রাক-লেকচার কুইজ
|
|
[প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/)
|
|
|
|
> ওয়েবের শক্তি তার সার্বজনীনতায়। প্রতিবন্ধকতা নির্বিশেষে সবার জন্য অ্যাক্সেস নিশ্চিত করাই এর একটি গুরুত্বপূর্ণ দিক।
|
|
>
|
|
> \- স্যার টিমোথি বার্নার্স-লি, W3C ডিরেক্টর এবং ওয়ার্ল্ড ওয়াইড ওয়েবের আবিষ্কারক
|
|
|
|
এই উক্তিটি অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরির গুরুত্বকে পুরোপুরি তুলে ধরে। একটি অ্যাপ্লিকেশন যা সবাই ব্যবহার করতে পারে না, তা মূলত বর্জনমূলক। ওয়েব ডেভেলপার হিসেবে আমাদের সবসময় অ্যাক্সেসিবিলিটির কথা মাথায় রাখা উচিত। শুরু থেকেই এই বিষয়ে মনোযোগ দিলে আপনি নিশ্চিত করতে পারবেন যে আপনার তৈরি পেজগুলো সবাই ব্যবহার করতে পারবে। এই পাঠে, আপনি শিখবেন কীভাবে অ্যাক্সেসযোগ্য ওয়েব অ্যাসেট তৈরি করবেন এবং কোন টুলগুলো আপনাকে সাহায্য করতে পারে।
|
|
|
|
> আপনি এই পাঠটি [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) এ নিতে পারেন!
|
|
|
|
## ব্যবহারের জন্য টুলস
|
|
|
|
### স্ক্রিন রিডার
|
|
|
|
সবচেয়ে পরিচিত অ্যাক্সেসিবিলিটি টুলগুলোর মধ্যে একটি হলো স্ক্রিন রিডার।
|
|
|
|
[স্ক্রিন রিডার](https://en.wikipedia.org/wiki/Screen_reader) সাধারণত দৃষ্টিশক্তি প্রতিবন্ধীদের জন্য ব্যবহৃত হয়। আমরা যখন ব্রাউজার সঠিকভাবে তথ্য প্রদর্শন করছে কিনা তা নিশ্চিত করার জন্য সময় ব্যয় করি, তখন আমাদের নিশ্চিত করতে হবে স্ক্রিন রিডারও একইভাবে তথ্য প্রদর্শন করছে।
|
|
|
|
স্ক্রিন রিডার সাধারণত একটি পেজের উপরের অংশ থেকে নিচ পর্যন্ত শব্দে পড়ে। যদি আপনার পেজটি শুধুমাত্র টেক্সট হয়, তাহলে রিডার এটি ব্রাউজারের মতোই তথ্য প্রদর্শন করবে। তবে, ওয়েব পেজগুলো সাধারণত শুধুমাত্র টেক্সট নয়; এতে লিঙ্ক, গ্রাফিক্স, রঙ এবং অন্যান্য ভিজ্যুয়াল উপাদান থাকে। স্ক্রিন রিডার সঠিকভাবে এই তথ্য পড়তে পারে তা নিশ্চিত করতে হবে।
|
|
|
|
প্রত্যেক ওয়েব ডেভেলপারকে স্ক্রিন রিডারের সাথে পরিচিত হওয়া উচিত। এটি আপনার ব্যবহারকারীদের জন্য একটি গুরুত্বপূর্ণ ক্লায়েন্ট। যেমন আপনি ব্রাউজারের কার্যক্রম সম্পর্কে জানেন, তেমনি স্ক্রিন রিডারের কার্যক্রমও জানা উচিত। সৌভাগ্যক্রমে, বেশিরভাগ অপারেটিং সিস্টেমে স্ক্রিন রিডার বিল্ট-ইন থাকে।
|
|
|
|
কিছু ব্রাউজারে বিল্ট-ইন টুল এবং এক্সটেনশন থাকে যা টেক্সট পড়তে পারে বা কিছু মৌলিক নেভিগেশন ফিচার প্রদান করতে পারে, যেমন [Edge ব্রাউজারের এই অ্যাক্সেসিবিলিটি টুলগুলো](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। এগুলোও গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি টুল, তবে স্ক্রিন রিডার টেস্টিং টুল হিসেবে এগুলোকে ভুলভাবে ব্যবহার করা উচিত নয়।
|
|
|
|
✅ স্ক্রিন রিডার এবং ব্রাউজার টেক্সট রিডার ব্যবহার করে দেখুন। Windows-এ [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) ডিফল্টভাবে অন্তর্ভুক্ত থাকে, এবং [JAWS](https://webaim.org/articles/jaws/) এবং [NVDA](https://www.nvaccess.org/about-nvda/) ইনস্টল করা যেতে পারে। macOS এবং iOS-এ [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) ডিফল্টভাবে অন্তর্ভুক্ত থাকে।
|
|
|
|
### জুম
|
|
|
|
দৃষ্টিশক্তি প্রতিবন্ধীদের জন্য আরেকটি সাধারণ টুল হলো জুমিং। সবচেয়ে সাধারণ জুমিং হলো স্ট্যাটিক জুম, যা `Control + plus sign (+)` বা স্ক্রিন রেজোলিউশন কমিয়ে নিয়ন্ত্রণ করা হয়। এই ধরনের জুম পুরো পেজকে রিসাইজ করে, তাই [রেসপন্সিভ ডিজাইন](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) ব্যবহার করা গুরুত্বপূর্ণ যাতে বড় জুম লেভেলে ভালো ব্যবহারকারীর অভিজ্ঞতা প্রদান করা যায়।
|
|
|
|
আরেক ধরনের জুম বিশেষ সফটওয়্যার ব্যবহার করে স্ক্রিনের একটি অংশকে বড় করে এবং প্যান করে, অনেকটা বাস্তব ম্যাগনিফাইং গ্লাসের মতো। Windows-এ [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) বিল্ট-ইন থাকে, এবং [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) একটি তৃতীয় পক্ষের ম্যাগনিফিকেশন সফটওয়্যার যা আরও বেশি ফিচার এবং বড় ব্যবহারকারী বেস প্রদান করে। macOS এবং iOS-এ বিল্ট-ইন ম্যাগনিফিকেশন সফটওয়্যার [Zoom](https://www.apple.com/accessibility/mac/vision/) অন্তর্ভুক্ত থাকে।
|
|
|
|
### কনট্রাস্ট চেকার
|
|
|
|
ওয়েবসাইটে রঙ সাবধানে নির্বাচন করতে হবে যাতে রঙ-অন্ধ ব্যবহারকারী বা যারা কম কনট্রাস্ট রঙ দেখতে অসুবিধা অনুভব করেন তাদের প্রয়োজন মেটানো যায়।
|
|
|
|
✅ একটি ওয়েবসাইট পরীক্ষা করুন যা আপনি ব্যবহার করতে পছন্দ করেন এবং ব্রাউজার এক্সটেনশন যেমন [WCAG এর কালার চেকার](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon) ব্যবহার করে রঙের ব্যবহার পরীক্ষা করুন। আপনি কী শিখলেন?
|
|
|
|
### Lighthouse
|
|
|
|
আপনার ব্রাউজারের ডেভেলপার টুল এলাকায় Lighthouse টুল পাওয়া যাবে। এই টুলটি একটি ওয়েবসাইটের অ্যাক্সেসিবিলিটি (এবং অন্যান্য বিশ্লেষণ) সম্পর্কে প্রাথমিক ধারণা পেতে গুরুত্বপূর্ণ। যদিও শুধুমাত্র Lighthouse-এর উপর নির্ভর করা উচিত নয়, ১০০% স্কোর একটি সহায়ক ভিত্তি হিসেবে কাজ করে।
|
|
|
|
✅ আপনার ব্রাউজারের ডেভেলপার টুল প্যানেলে Lighthouse খুঁজুন এবং যেকোনো সাইটে একটি বিশ্লেষণ চালান। আপনি কী আবিষ্কার করেন?
|
|
|
|
## অ্যাক্সেসিবিলিটির জন্য ডিজাইন করা
|
|
|
|
অ্যাক্সেসিবিলিটি একটি তুলনামূলকভাবে বড় বিষয়। আপনাকে সাহায্য করার জন্য অনেক রিসোর্স উপলব্ধ রয়েছে।
|
|
|
|
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
|
|
|
|
যদিও আমরা অ্যাক্সেসযোগ্য সাইট তৈরির প্রতিটি দিক কভার করতে পারব না, নিচে কিছু মূল নীতিমালা রয়েছে যা আপনি বাস্তবায়ন করতে চাইবেন। শুরু থেকেই একটি অ্যাক্সেসযোগ্য পেজ ডিজাইন করা **সবসময়** একটি বিদ্যমান পেজকে অ্যাক্সেসযোগ্য করার চেয়ে সহজ।
|
|
|
|
## ভালো প্রদর্শন নীতিমালা
|
|
|
|
### রঙ নিরাপদ প্যালেট
|
|
|
|
মানুষ পৃথিবীকে বিভিন্নভাবে দেখে, এবং এর মধ্যে রঙও অন্তর্ভুক্ত। আপনার সাইটের জন্য একটি রঙ স্কিম নির্বাচন করার সময়, নিশ্চিত করুন এটি সবার জন্য অ্যাক্সেসযোগ্য। একটি চমৎকার [রঙ প্যালেট তৈরি করার টুল হলো Color Safe](http://colorsafe.co/)।
|
|
|
|
✅ একটি ওয়েবসাইট চিহ্নিত করুন যা রঙ ব্যবহারে খুব সমস্যাযুক্ত। কেন?
|
|
|
|
### সঠিক HTML ব্যবহার করুন
|
|
|
|
CSS এবং JavaScript ব্যবহার করে যেকোনো এলিমেন্টকে যেকোনো ধরনের কন্ট্রোলের মতো দেখানো সম্ভব। `<span>` ব্যবহার করে একটি `<button>` তৈরি করা যেতে পারে, এবং `<b>` একটি হাইপারলিঙ্কে পরিণত হতে পারে। যদিও এটি স্টাইলিংয়ের জন্য সহজ বলে মনে হতে পারে, এটি স্ক্রিন রিডারের জন্য কিছুই প্রকাশ করে না। একটি পেজে কন্ট্রোল তৈরি করার সময় সঠিক HTML ব্যবহার করুন। যদি আপনি একটি হাইপারলিঙ্ক চান, `<a>` ব্যবহার করুন। সঠিক কন্ট্রোলের জন্য সঠিক HTML ব্যবহার করাকে বলা হয় Semantic HTML ব্যবহার করা।
|
|
|
|
✅ যেকোনো ওয়েবসাইটে যান এবং দেখুন ডিজাইনার এবং ডেভেলপাররা HTML সঠিকভাবে ব্যবহার করছেন কিনা। আপনি কি এমন কোনো বাটন খুঁজে পান যা একটি লিঙ্ক হওয়া উচিত? টিপ: আপনার ব্রাউজারে 'View Page Source' নির্বাচন করতে রাইট ক্লিক করুন এবং আন্ডারলাইন কোড দেখুন।
|
|
|
|
### বর্ণনামূলক শিরোনাম হায়ারার্কি তৈরি করুন
|
|
|
|
স্ক্রিন রিডার ব্যবহারকারীরা [শিরোনামের উপর ব্যাপকভাবে নির্ভর করেন](https://webaim.org/projects/screenreadersurvey8/#finding) তথ্য খুঁজে পেতে এবং একটি পেজে নেভিগেট করতে। বর্ণনামূলক শিরোনাম কন্টেন্ট লেখা এবং সেমান্টিক শিরোনাম ট্যাগ ব্যবহার করা স্ক্রিন রিডার ব্যবহারকারীদের জন্য একটি সহজে নেভিগেটযোগ্য সাইট তৈরি করার জন্য গুরুত্বপূর্ণ।
|
|
|
|
### ভালো ভিজ্যুয়াল ক্লু ব্যবহার করুন
|
|
|
|
CSS একটি পেজে যেকোনো এলিমেন্টের চেহারা সম্পূর্ণ নিয়ন্ত্রণ করার সুযোগ দেয়। আপনি আউটলাইন ছাড়া টেক্সট বক্স বা আন্ডারলাইন ছাড়া হাইপারলিঙ্ক তৈরি করতে পারেন। দুর্ভাগ্যক্রমে এই ক্লুগুলো সরিয়ে ফেললে যারা এগুলোর উপর নির্ভর করেন তাদের জন্য কন্ট্রোল চিনতে অসুবিধা হতে পারে।
|
|
|
|
## লিঙ্ক টেক্সটের গুরুত্ব
|
|
|
|
হাইপারলিঙ্ক ওয়েব নেভিগেশনের মূল। ফলে, একটি স্ক্রিন রিডার সঠিকভাবে লিঙ্ক পড়তে পারে তা নিশ্চিত করা সবার জন্য আপনার সাইট নেভিগেট করা সহজ করে তোলে।
|
|
|
|
### স্ক্রিন রিডার এবং লিঙ্ক
|
|
|
|
আপনি যেমন আশা করবেন, স্ক্রিন রিডার লিঙ্ক টেক্সটকে পেজের অন্য টেক্সটের মতোই পড়ে। এই বিষয়টি মাথায় রেখে, নিচের প্রদর্শিত টেক্সটটি গ্রহণযোগ্য মনে হতে পারে।
|
|
|
|
> ছোট পেঙ্গুইন, কখনও কখনও পরী পেঙ্গুইন নামে পরিচিত, বিশ্বের সবচেয়ে ছোট পেঙ্গুইন। [এখানে ক্লিক করুন](https://en.wikipedia.org/wiki/Little_penguin) আরও তথ্যের জন্য।
|
|
|
|
> ছোট পেঙ্গুইন, কখনও কখনও পরী পেঙ্গুইন নামে পরিচিত, বিশ্বের সবচেয়ে ছোট পেঙ্গুইন। আরও তথ্যের জন্য https://en.wikipedia.org/wiki/Little_penguin দেখুন।
|
|
|
|
> **NOTE** আপনি যা পড়তে যাচ্ছেন, মনে রাখবেন আপনি **কখনও** এমন লিঙ্ক তৈরি করবেন না যা উপরের মতো দেখায়।
|
|
|
|
### URL ব্যবহার করার সমস্যা
|
|
|
|
স্ক্রিন রিডার টেক্সট পড়ে। যদি টেক্সটে একটি URL থাকে, স্ক্রিন রিডার URL পড়বে। সাধারণভাবে, URL অর্থপূর্ণ তথ্য প্রকাশ করে না এবং বিরক্তিকর শোনাতে পারে। আপনি যদি কখনও আপনার ফোনে একটি URL সহ একটি টেক্সট মেসেজ শব্দে পড়তে শুনে থাকেন, তাহলে আপনি এটি অনুভব করতে পারেন।
|
|
|
|
### "এখানে ক্লিক করুন" ব্যবহার করার সমস্যা
|
|
|
|
স্ক্রিন রিডার শুধুমাত্র একটি পেজের হাইপারলিঙ্ক পড়ার ক্ষমতা রাখে, অনেকটা একজন দৃষ্টিশক্তি সম্পন্ন ব্যক্তি একটি পেজে লিঙ্ক স্ক্যান করার মতো। যদি লিঙ্ক টেক্সট সবসময় "এখানে ক্লিক করুন" হয়, ব্যবহারকারী শুধুমাত্র "এখানে ক্লিক করুন, এখানে ক্লিক করুন, এখানে ক্লিক করুন, ..." শুনবে। সব লিঙ্ক এখন একে অপরের থেকে আলাদা করা অসম্ভব।
|
|
|
|
### ভালো লিঙ্ক টেক্সট
|
|
|
|
ভালো লিঙ্ক টেক্সট সংক্ষেপে লিঙ্কের অপর পাশে কী আছে তা বর্ণনা করে। উপরের উদাহরণে ছোট পেঙ্গুইন সম্পর্কে কথা বলা হচ্ছে, লিঙ্কটি প্রজাতি সম্পর্কে Wikipedia পেজে নিয়ে যায়। *ছোট পেঙ্গুইন* শব্দগুচ্ছটি নিখুঁত লিঙ্ক টেক্সট হিসেবে কাজ করবে কারণ এটি স্পষ্ট করে দেয় কেউ যদি লিঙ্কে ক্লিক করে তাহলে তারা কী শিখবে - ছোট পেঙ্গুইন।
|
|
|
|
> [ছোট পেঙ্গুইন](https://en.wikipedia.org/wiki/Little_penguin), কখনও কখনও পরী পেঙ্গুইন নামে পরিচিত, বিশ্বের সবচেয়ে ছোট পেঙ্গুইন।
|
|
|
|
✅ কয়েক মিনিটের জন্য ওয়েব ব্রাউজ করুন এবং এমন পেজ খুঁজুন যা অস্পষ্ট লিঙ্কিং কৌশল ব্যবহার করে। সেগুলো তুলনা করুন অন্য, ভালোভাবে লিঙ্ক করা সাইটের সাথে। আপনি কী শিখলেন?
|
|
|
|
#### সার্চ ইঞ্জিন নোট
|
|
|
|
আপনার সাইট সবার জন্য অ্যাক্সেসযোগ্য করতে নিশ্চিত করার জন্য, আপনি সার্চ ইঞ্জিনগুলোকেও আপনার সাইট নেভিগেট করতে সাহায্য করবেন। সার্চ ইঞ্জিন লিঙ্ক টেক্সট ব্যবহার করে পেজের বিষয়বস্তু শিখে। তাই ভালো লিঙ্ক টেক্সট ব্যবহার করা সবার জন্য সহায়ক!
|
|
|
|
### ARIA
|
|
|
|
নিম্নলিখিত পেজটি কল্পনা করুন:
|
|
|
|
| পণ্য | বিবরণ | অর্ডার |
|
|
| ------------ | ------------------ | ------------ |
|
|
| Widget | [বিবরণ](../../../../1-getting-started-lessons/3-accessibility/') | [অর্ডার](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
| Super widget | [বিবরণ](../../../../1-getting-started-lessons/3-accessibility/') | [অর্ডার](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
|
|
এই উদাহরণে, বিবরণ এবং অর্ডার টেক্সট পুনরাবৃত্তি করা ব্রাউজার ব্যবহারকারীদের জন্য অর্থপূর্ণ। তবে, স্ক্রিন রিডার ব্যবহারকারী শুধুমাত্র *বিবরণ* এবং *অর্ডার* শব্দগুলো পুনরাবৃত্তি শুনবে, কোনো প্রসঙ্গ ছাড়াই।
|
|
|
|
এই ধরনের পরিস্থিতি সমর্থন করার জন্য, HTML একটি সেট অ্যাট্রিবিউট সমর্থন করে যা [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) নামে পরিচিত। এই অ্যাট্রিবিউটগুলো স্ক্রিন রিডারকে অতিরিক্ত তথ্য প্রদান করতে দেয়।
|
|
|
|
> **NOTE**: HTML-এর অনেক দিকের মতো, ব্রাউজার এবং স্ক্রিন রিডার সমর্থন পরিবর্তিত হতে পারে। তবে, বেশিরভাগ প্রধান ক্লায়েন্ট ARIA অ্যাট্রিবিউট সমর্থন করে।
|
|
|
|
আপনি `aria-label` ব্যবহার করে লিঙ্কটি বর্ণনা করতে পারেন যখন পেজের ফরম্যাট এটি অনুমতি দেয় না। Widget-এর জন্য বিবরণ সেট করা যেতে পারে
|
|
|
|
``` html
|
|
<a href="#" aria-label="Widget description">description</a>
|
|
```
|
|
|
|
✅ সাধারণভাবে, Semantic মার্কআপ ব্যবহার করা ARIA ব্যবহারের চেয়ে বেশি গুরুত্বপূর্ণ, তবে কখনও কখনও বিভিন্ন HTML উইজেটের জন্য কোনো সেমান্টিক সমতুল্য থাকে না। একটি ভালো উদাহরণ হলো Tree। Tree-এর জন্য HTML সমতুল্য নেই, তাই আপনি এই এলিমেন্টের জন্য সাধারণ `<div>`-কে একটি সঠিক role এবং aria মান দিয়ে চিহ্নিত করেন। [MDN ডকুমেন্টেশন on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) আরও দরকারী তথ্য ধারণ করে।
|
|
|
|
```html
|
|
<h2 id="tree-label">File Viewer</h2>
|
|
<div role="tree" aria-labelledby="tree-label">
|
|
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
|
</div>
|
|
```
|
|
|
|
## ইমেজ
|
|
|
|
এটি বলার অপেক্ষা রাখে না যে স্ক্রিন রিডার স্বয়ংক্রিয়ভাবে একটি ইমেজে কী আছে তা পড়তে পারে না। ইমেজগুলো অ্যাক্সেসযোগ্য করা খুব বেশি কাজের বিষয় নয় - এটি `alt` অ্যাট্রিবিউটের জন্যই। সব অর্থপূর্ণ ইমেজের একটি `alt` থাকা উচিত যা তারা কী তা বর্ণনা করে।
|
|
যেসব ইমেজ শুধুমাত্র অলঙ্করণমূলক, তাদের `alt` অ্যাট্রিবিউট একটি খালি স্ট্রিং দিয়ে সেট করা উচিত: `alt=""`। এটি স্ক্রিন রিডারকে অলঙ্করণমূলক ইমেজ অপ্রয়োজনীয়ভাবে ঘোষণা করা থেকে বিরত রাখে।
|
|
|
|
✅ আপনি যেমন আশা করবেন, সার্চ ইঞ্জিনও একটি ইমেজে কী আছে তা বুঝতে পারে না। তারা `alt` টেক্সট ব্যবহার করে। তাই আবারও, আপনার পেজ অ্যাক্সেসযোগ্য নিশ্চিত করা অতিরিক্ত সুবিধা প্রদান করে!
|
|
|
|
## কীবোর্ড
|
|
|
|
কিছু ব্যবহারকারী মাউস বা ট্র্যাকপ্যাড ব্যবহার করতে অক্ষম, পরিবর্তে কীবোর্ড ইন্টারঅ্যাকশন ব্যবহার করে একটি এলিমেন্ট থেকে পরবর্তী এলিমেন্টে ট্যাব করে। আপনার ওয়েবসাইটের বিষয়বস্তু একটি যৌক্তিক ক্রমে উপস্থাপন করা গুরুত্বপূর্ণ যাতে কীবোর্ড ব্যবহারকারী একটি ডকুমেন্টে প্রতিটি ইন্টারঅ্যাকটিভ এলিমেন্ট অ্যাক্সেস করতে পারে। যদি আপনি সেমান্টিক মার্কআপ ব্যবহার করে আপনার ওয়েব পেজ তৈরি করেন এবং CSS ব্যবহার করে তাদের ভিজ্যুয়াল লেআউট স্টাইল করেন, তাহলে আপনার সাইট কীবোর্ড-নেভিগেটযোগ্য হওয়া উচিত, তবে এটি ম্যানুয়ালি পরীক্ষা করা গুরুত্বপূর্ণ। [কীবোর্ড নেভিগেশন কৌশল](https://webaim.org/techniques/keyboard/) সম্পর্কে আরও জানুন।
|
|
|
|
✅ যেকোনো ওয়েবসাইটে যান এবং শুধুমাত্র আপনার কীবোর্ড ব্যবহার করে এটি নেভিগেট করার চেষ্টা করুন। কী কাজ করে, কী কাজ করে না? কেন?
|
|
|
|
## সারাংশ
|
|
|
|
কিছু মানুষের জন্য অ্যাক্সেসযোগ্য ওয়েব একটি সত্যিকারের 'ওয়ার্ল্ড-ওয়াইড ওয়েব' নয়। আপনি যে সাইটগুলো তৈরি করেন তা অ্যাক্সেসযোগ্য নিশ্চিত করার সেরা উপায় হলো শুরু
|
|
অনেক সরকার অ্যাক্সেসিবিলিটি প্রয়োজনীয়তার বিষয়ে আইন প্রণয়ন করেছে। আপনার দেশের অ্যাক্সেসিবিলিটি আইন সম্পর্কে জানুন। কী অন্তর্ভুক্ত করা হয়েছে এবং কী অন্তর্ভুক্ত করা হয়নি? একটি উদাহরণ হলো [এই সরকারি ওয়েবসাইট](https://accessibility.blog.gov.uk/)।
|
|
|
|
## অ্যাসাইনমেন্ট
|
|
|
|
[একটি অ-অ্যাক্সেসযোগ্য ওয়েবসাইট বিশ্লেষণ করুন](assignment.md)
|
|
|
|
ক্রেডিট: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
|
|
|
|
---
|
|
|
|
**অস্বীকৃতি**:
|
|
এই নথিটি AI অনুবাদ পরিষেবা [Co-op Translator](https://github.com/Azure/co-op-translator) ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়ী থাকব না। |