# অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করা ![অ্যাক্সেসিবিলিটি সম্পর্কে সবকিছু](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.bn.png) > স্কেচনোট: [Tomomi Imura](https://twitter.com/girlie_mac) ## লেকচারের আগে কুইজ [লেকচারের আগে কুইজ](https://ff-quizzes.netlify.app/web/quiz/5) > ওয়েবের শক্তি এর সার্বজনীনতায়। প্রতিবন্ধকতা নির্বিশেষে সবার জন্য অ্যাক্সেস নিশ্চিত করাই এর একটি গুরুত্বপূর্ণ দিক। > > \- স্যার টিমোথি বার্নার্স-লি, 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 + প্লাস চিহ্ন (+)` ব্যবহার করে বা স্ক্রিন রেজোলিউশন কমিয়ে নিয়ন্ত্রণ করা হয়। এই ধরনের জুম পুরো পৃষ্ঠাটিকে পুনরায় আকার দেয়, তাই [রেসপন্সিভ ডিজাইন](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)। আপনি কী শিখলেন? ### লাইটহাউস আপনার ব্রাউজারের ডেভেলপার টুল এলাকায় লাইটহাউস টুল পাওয়া যাবে। এই টুলটি একটি ওয়েবসাইটের অ্যাক্সেসিবিলিটি (এবং অন্যান্য বিশ্লেষণ) সম্পর্কে প্রাথমিক ধারণা পেতে গুরুত্বপূর্ণ। যদিও শুধুমাত্র লাইটহাউসের উপর নির্ভর করা উচিত নয়, ১০০% স্কোর একটি ভালো সূচনা পয়েন্ট। ✅ আপনার ব্রাউজারের ডেভেলপার টুল প্যানেলে লাইটহাউস খুঁজুন এবং যেকোনো সাইটে একটি বিশ্লেষণ চালান। আপনি কী আবিষ্কার করলেন? ## অ্যাক্সেসিবিলিটির জন্য ডিজাইন করা অ্যাক্সেসিবিলিটি একটি তুলনামূলকভাবে বড় বিষয়। আপনাকে সাহায্য করার জন্য অনেক রিসোর্স উপলব্ধ রয়েছে। - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) যদিও আমরা অ্যাক্সেসযোগ্য সাইট তৈরির প্রতিটি দিক কভার করতে পারব না, নিচে কিছু মূল নীতিমালা দেওয়া হলো যা আপনি বাস্তবায়ন করতে চাইবেন। শুরু থেকেই একটি অ্যাক্সেসযোগ্য পৃষ্ঠা ডিজাইন করা **সবসময়** সহজতর হয়, তুলনায় একটি বিদ্যমান পৃষ্ঠাকে অ্যাক্সেসযোগ্য করার চেয়ে। ## ভালো প্রদর্শন নীতিমালা ### রঙ নিরাপদ প্যালেট মানুষ পৃথিবীকে বিভিন্নভাবে দেখে, এবং এর মধ্যে রঙও অন্তর্ভুক্ত। আপনার সাইটের জন্য একটি রঙ স্কিম নির্বাচন করার সময় নিশ্চিত করুন এটি সবার জন্য অ্যাক্সেসযোগ্য। একটি চমৎকার [রঙ প্যালেট তৈরির টুল হলো Color Safe](http://colorsafe.co/)। ✅ এমন একটি ওয়েবসাইট চিহ্নিত করুন যেখানে রঙ ব্যবহারে বড় সমস্যা রয়েছে। কেন? ### সঠিক HTML ব্যবহার করুন CSS এবং JavaScript ব্যবহার করে যেকোনো উপাদানকে যেকোনো ধরনের কন্ট্রোলে রূপান্তর করা সম্ভব। `` ব্যবহার করে একটি `