# অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করা ![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bn.png) > স্কেচনোট: [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 ব্যবহার করে যেকোনো এলিমেন্টকে যেকোনো ধরনের কন্ট্রোলের মতো দেখানো সম্ভব। `` ব্যবহার করে একটি `