ইউনিট
1. UI/UX ডিজাইনে কৃত্রিম বুদ্ধিমত্তার ভূমিকা: ভূমিকা, সীমানা, প্রমাণীকরণ এবং ব্যবহারকারীর ডেটা 2. ব্যবহারকারী গবেষণা সংশ্লেষণ: সাক্ষাৎকার এবং জরিপ ডেটা থেকে অন্তর্দৃষ্টি নিষ্কাশন করা 3. ব্যক্তিত্ব এবং ব্যবহারকারী যাত্রা মানচিত্র উত্পাদন 4. ইনফরমেশন আর্কিটেকচার এবং ইউজার ফ্লোস ডিজাইন 5. ওয়্যারফ্রেম এবং কম রেজোলিউশন ডিজাইন জেনারেশন 6. ইন্টারফেস টেক্সট এবং ইউএক্স রাইটিং: কৃত্রিম বুদ্ধিমত্তা দিয়ে মাইক্রো টেক্সট লেখা 7. প্রোটোটাইপিং এবং হাই ডেফিনিশন ডিজাইনে কৃত্রিম বুদ্ধিমত্তা 8. ব্যবহারযোগ্যতা পরীক্ষা বিশ্লেষণ এবং ফলাফলের সংশ্লেষণ 9. ডিজাইন সিস্টেম: কম্পোনেন্ট, টোকেন এবং ডকুমেন্টেশনে কৃত্রিম বুদ্ধিমত্তা 10. অ্যাক্সেসিবিলিটি এবং ইনক্লুসিভ ডিজাইনে কৃত্রিম বুদ্ধিমত্তা 11. নীতিশাস্ত্র, গোপনীয়তা, কপিরাইট এবং এআই টুলস ইকোসিস্টেম
ইউনিট 10 / 11

অ্যাক্সেসিবিলিটি এবং ইনক্লুসিভ ডিজাইনে কৃত্রিম বুদ্ধিমত্তা

লাভ:

  • কৃত্রিম বুদ্ধিমত্তা সমর্থন সহ রঙের বৈসাদৃশ্য, বিকল্প পাঠ্য, কীবোর্ড অ্যাক্সেস এবং WCAG মানদণ্ড নিয়ন্ত্রণ এবং উন্নত করার ক্ষমতা
  • কৃত্রিম বুদ্ধিমত্তা সহ স্ক্রিন রিডার অভিজ্ঞতা, অল্ট টেক্সট এবং ফর্ম লেবেলের মতো অ্যাক্সেসযোগ্যতা পাঠ্য তৈরি এবং যাচাই করার ক্ষমতা
  • বাস্তব সহায়ক প্রযুক্তি এবং ব্যবহারকারী পরীক্ষার মাধ্যমে AI এর অ্যাক্সেসযোগ্যতার সুপারিশগুলি বৈধ করার সীমা বোঝা

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

WCAG এবং মূল নিয়ন্ত্রণ এলাকা

WCAG (ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইন) হল অ্যাক্সেসযোগ্যতার জন্য আন্তর্জাতিকভাবে স্বীকৃত মানদণ্ডের একটি সেট; AA স্তর সাধারণত লক্ষ্য করা হয়। এটির চারটি নীতি রয়েছে: বিষয়বস্তু অবশ্যই অনুধাবনযোগ্য হতে হবে, ইন্টারফেসটি ব্যবহারযোগ্য হতে হবে, তথ্য অবশ্যই বোধগম্য এবং প্রযুক্তিগতভাবে ভালো হতে হবে। অনুশীলনে সবচেয়ে সাধারণ নিয়ন্ত্রণের ক্ষেত্রগুলি হল:

  • রঙের বৈসাদৃশ্য: পাঠ্য এবং পটভূমির মধ্যে পার্থক্য কি যথেষ্ট? (AA এর জন্য, স্বাভাবিক পাঠ্যে কমপক্ষে 4.5:1 অনুপাত।)
  • বিকল্প টেক্সট (অল্টারনেটিভ টেক্সট): ইমেজের সমতুল্য টেক্সট আছে যা স্ক্রিন রিডারকে ব্যাখ্যা করে?
  • কীবোর্ড অ্যাক্সেস: মাউস ছাড়া কি কিছু করা যায়? ফোকাস অর্ডার অর্থপূর্ণ?
  • শুধুমাত্র রঙের তথ্য: "লাল ক্ষেত্রগুলি পূরণ করুন" এর মতো বাক্যাংশগুলি বর্ণান্ধ ব্যবহারকারীকে বাদ দেয়৷
  • ফর্ম লেবেল: প্রতিটি ইনপুট ক্ষেত্রের কি একটি লেবেল আছে যা স্ক্রিন রিডার পড়বে?
  • টাচ টার্গেট: বোতামগুলি কি যথেষ্ট বড় আঙ্গুল দিয়ে আরামে টিপতে পারে?

এআই এই অনেক ক্ষেত্রে দ্রুত প্রাথমিক স্ক্যান করতে পারে: আপনি কিছু টেক্সট দিতে পারেন এবং জিজ্ঞাসা করতে পারেন "কি কনট্রাস্ট যথেষ্ট?", একটি চিত্রের বিবরণ দিন এবং "অল্ট টেক্সট সাজেস্ট করুন", একটি ইন্টারফেসের বিবরণ দিন এবং "কীবোর্ড অ্যাক্সেসের সমস্যাগুলি কী" জিজ্ঞাসা করুন।

সতর্কতা: শুধুমাত্র AI বলে "এটি অ্যাক্সেসযোগ্য বলে মনে হচ্ছে" অ্যাক্সেসযোগ্যতার গ্যারান্টি নয়। স্বয়ংক্রিয় চেক শুধুমাত্র কিছু WCAG ত্রুটি ধরা দেয়; বাকিটা বাস্তবে ব্যবহারের সাথে উঠে আসবে।

অল্ট টেক্সট: ভালো অল্ট টেক্সটের রহস্য

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

চাক্ষুষ

দুর্বল সাবটেক্সট

শক্তিশালী সাবটেক্সট

কার্ট আইকন (বোতাম)

"কার্ট আইকন, ধূসর রঙ"

"কার্টে যোগ করুন"

পণ্যের ছবি

"ছবি"

"নীল শীতের কোট, সামনের দৃশ্য"

আলংকারিক লাইন

"অলঙ্কার লাইন"

(খালি রাখুন — আলংকারিক)

গ্রাফিক্স

"গ্রাফিক ইমেজ"

"2024 বিক্রয়: প্রতি ত্রৈমাসিক বৃদ্ধি"

অন্তর্ভুক্তিমূলক ভাষা এবং সুযোগ

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

তিনটি মিনি কেস

কেস 1 - কন্ট্রাস্ট ত্রুটিগুলি প্রথম দিকে ধরা পড়ে৷ একটি দল 20টি স্ক্রিনের টেক্সট রং স্ক্যান করেছে এবং 7টি জায়গায় বৈসাদৃশ্য AA প্রান্তিকের নিচে ছিল। উন্নয়নে না গিয়ে সংশোধন করা হয়েছে; পরবর্তী সংশোধনের খরচ এড়ানো হয়েছিল। কিন্তু দলটি এখনও প্রকৃত স্ক্রিন রিডার পরীক্ষা এড়িয়ে যায়নি।

কেস 2 — শুধুমাত্র রঙ-সম্পর্কিত তথ্য সংশোধন করা হয়েছে। একটি ফর্ম শুধুমাত্র একটি লাল সীমানা সহ ত্রুটি ক্ষেত্রগুলি দেখায়৷ AI এটি পতাকাঙ্কিত করেছে; দলটি প্রতিটি ত্রুটিতে পাঠ্য এবং আইকন যুক্ত করেছে। কালারব্লাইন্ড ব্যবহারকারীরা এখন ত্রুটি দেখতে পাচ্ছেন। পাঠ: একা রঙ তথ্য প্রকাশ করতে পারে না।

কেস 3 - এআই বিভ্রান্তিকর অনুমোদন। একজন ডিজাইনার স্ক্রিন রিডার টেস্টিং এড়িয়ে গেছেন কারণ তিনি এআইকে "অ্যাক্সেসিবল" বলেছেন। আসল পরীক্ষায়, দেখা গেল যে ফোকাস অর্ডারটি বিভ্রান্ত হয়েছে এবং কিছু বোতাম মোটেও পড়া হয়নি। পাঠ: স্বয়ংক্রিয় নিশ্চিতকরণ শুরু; প্রকৃত সহায়ক প্রযুক্তি পরীক্ষা বাধ্যতামূলক।

অনুলিপিযোগ্য প্রম্পট

অ্যাক্সেসিবিলিটির জন্য এই ইন্টারফেস বিবরণটি প্রাক-স্ক্যান করুন: 1) শুধুমাত্র রঙের উপর ভিত্তি করে তথ্য বহন করে? 2) প্রতিটি ক্লিকযোগ্য উপাদানের জন্য একটি পাঠ্য লেবেল আছে? 3) এমন কোন উপাদান আছে যা কীবোর্ডের মাধ্যমে অ্যাক্সেস করা যায় না? 4) ফোকাস অর্ডার কি অর্থপূর্ণ? প্রতিটি সমস্যা এবং পরামর্শ তালিকাভুক্ত করুন। নোট যোগ করুন "বাস্তব পরীক্ষা প্রয়োজন।" রেসিপি: <<text>>

এই ইমেজ জন্য Alt টেক্সট প্রস্তাব. নিয়ম: চিত্রের ফাংশন/অর্থ প্রকাশ করুন, আলংকারিক বিশদ নয়। বোতাম আইকনের জন্য ক্রিয়া লিখুন। আলংকারিক চিত্রগুলির জন্য, বলুন "Alt পাঠ্য খালি রাখা উচিত"। প্রসঙ্গ এবং চিত্রের বিবরণ: <<list>>

অন্তর্ভুক্ত ভাষার জন্য এই পাঠ্যগুলি পরীক্ষা করুন: এখানে কি লিঙ্গ অনুমান, ক্ষমতা-ভিত্তিক বর্জনীয় ভাষা (যেমন "দেখুন," "শুনুন"), সাংস্কৃতিক অনুমান আছে? প্রাকৃতিক থাকে এমন বিকল্পের পরামর্শ দিন; অতিরিক্ত সংশোধন করবেন না। পাঠ্য: <<list>>

এই ফর্মের জন্য অ্যাক্সেসযোগ্য ত্রুটি এবং লেবেল পাঠ্য লিখুন: প্রতিটি ক্ষেত্রের জন্য দৃশ্যমান লেবেল, স্ক্রিন রিডারের জন্য বিবরণ এবং ত্রুটি বর্ণনাকারী বার্তা, রঙ নির্বিশেষে (টেক্সট + আইকন)। ভয়েস এবং টোন: <<কার্ড>>ফর্ম ক্ষেত্র: <<তালিকা>>

দুর্বল প্রম্পট / শক্তিশালী প্রম্পট

দুর্বল: "এই ছবির জন্য Alt টেক্সট লিখুন।"

ফলাফল: "একটি চিত্র" বা অতিরিক্ত বর্ণনামূলক পাঠ্য যা ফাংশনটি মিস করে।

শক্তিশালী: "এই চিত্রগুলির জন্য Alt পাঠ্যের পরামর্শ দিন; ছবির ফাংশন/অর্থ প্রকাশ করুন; বোতাম আইকনের জন্য অ্যাকশন লিখুন; আলংকারিকগুলিকে 'খালি রাখতে হবে' হিসাবে চিহ্নিত করুন।"

ফলাফল: প্রাসঙ্গিক, ফাংশন-ভিত্তিক, সঠিক সাবটেক্সট।

পার্থক্য: শক্তিশালী প্রম্পট কার্যকরী ফোকাস + বোতাম কনভেনশন + আলংকারিক পার্থক্য নিয়ে আসে।

সাধারণ ভুল

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

সংক্ষেপে

অ্যাক্সেসযোগ্যতা মানে পণ্যটি সবার জন্য উপলব্ধ; এটি একটি অতিরিক্ত নয়, এটি একটি অপরিহার্য এবং বেশিরভাগ জায়গায়, একটি আইনি দায়িত্ব৷ কন্ট্রাস্ট, অল্ট টেক্সট, কীবোর্ড অ্যাক্সেস এবং সমন্বিত ভাষা স্ক্যানিংয়ের জন্য দ্রুত প্রিফ্লাইট এবং ড্রাফ্ট জেনারেটর হিসেবে AI মূল্যবান। কিন্তু স্বয়ংক্রিয় অনুমোদন শুধুমাত্র কিছু WCAG ত্রুটি ধরা দেয়; স্ক্রিন রিডার এবং প্রকৃত সহায়ক প্রযুক্তি ব্যবহারকারীদের সাথে পরীক্ষার মাধ্যমে প্রকৃত অ্যাক্সেসযোগ্যতা নিশ্চিত করা হয়। মডেলটিকে সামনের ব্রাউজার হিসাবে ব্যবহার করুন, বাস্তব পরীক্ষা থেকে প্রমাণ পান।

আবেদন টাস্ক

  1. প্রথম প্রম্পটে অ্যাক্সেসযোগ্যতার জন্য একটি ইন্টারফেসের বিবরণ প্রাক-স্ক্যান করুন।
  2. শুধুমাত্র রঙ-ভিত্তিক তথ্য বা লেবেলবিহীন আইটেম সংশোধন করুন।
  3. দ্বিতীয় প্রম্পটের সাথে আপনার স্ক্রিনে ভিজ্যুয়ালগুলির জন্য ফাংশন-ভিত্তিক Alt পাঠ্য তৈরি করুন।
  4. তৃতীয় প্রম্পটের সাথে অন্তর্ভুক্ত ভাষার জন্য আপনার পাঠ্য পরীক্ষা করুন।
  5. যদি সম্ভব হয়, একটি স্ক্রিন রিডার দিয়ে প্রকৃত পরীক্ষা করে দেখুন এবং স্বয়ংক্রিয় স্ক্যানটি কী মিস করে তা নোট করুন।

চেকলিস্ট

  • [ ] আমি কনট্রাস্ট, কীবোর্ড অ্যাক্সেস এবং লেবেলগুলি প্রি-স্ক্যান করেছি৷
  • [ ] আমি শুধুমাত্র রঙের উপর ভিত্তি করে তথ্য ছেড়ে যাইনি।
  • [ ] আমি সাবটেক্সটগুলি একটি কার্যকরী উপায়ে লিখেছি এবং আলংকারিকগুলি খালি রেখেছি।
  • আমি একটি অন্তর্ভুক্তিমূলক ভাষা নিয়ন্ত্রণ করেছি, আমি স্বাভাবিকতা রক্ষা করেছি।
  • [ ] আমি স্বয়ংক্রিয় অনুমোদনকে অ্যাক্সেসযোগ্যতার গ্যারান্টি বিবেচনা করিনি৷
  • আমি প্রকৃত সহায়ক প্রযুক্তি পরীক্ষার পরিকল্পনা/বাস্তবায়ন করেছি।