এটি এমন একটি যা আমাকে আগে মোকাবেলা করতে হয়নি। সিএসএস ব্যাকগ্রাউন্ড-ইমেজ অ্যাট্রিবিউট দ্বারা ব্যবহৃত একটি সাইট সহ আমাকে সমস্ত সাইটের ওয়েল ট্যাগ ব্যবহার করতে হবে।
আমি যতদূর জানি এর মতো কোনও সিএসএস সম্পত্তি নেই, তাই দয়া করে এটি করার সর্বোত্তম উপায় কী?
উত্তর:
পটভূমি চিত্র অবশ্যই উপাত্ত উপস্থাপন করতে পারে! প্রকৃতপক্ষে, এটি প্রায়শই সুপারিশ করা হয় যেখানে টেক্সট ব্লার্বের সমতুল্য তালিকার চেয়ে ভিজ্যুয়াল আইকনগুলি উপস্থাপন করা আরও কমপ্যাক্ট এবং ব্যবহারকারী-বান্ধব। ইমেজ স্প্রাইটের যে কোনও ব্যবহার এই পদ্ধতির মাধ্যমে উপকৃত হতে পারে।
হোটেল তালিকার আইকনগুলির সুবিধাগুলি প্রদর্শনের পক্ষে এটি বেশ সাধারণ। একটি পৃষ্ঠা কল্পনা করুন যা 50 টি হোটেল তালিকাভুক্ত করেছে এবং প্রতিটি হোটেলটিতে 10 টি সুযোগ সুবিধা রয়েছে। একটি সিএসএস স্প্রাইট এই ধরণের জিনিসটির জন্য উপযুক্ত হবে - আরও ভাল ব্যবহারকারীর অভিজ্ঞতা কারণ এটি দ্রুত। তবে আপনি কীভাবে এই চিত্রগুলির জন্য ALT ট্যাগগুলি প্রয়োগ করেন? উদাহরণ সাইট ।
উত্তরটি হ'ল তারা মোটেও altপাঠ্য ব্যবহার করে না , পরিবর্তে titleডিভযুক্ত ডিভের উপর বৈশিষ্ট্যটি ব্যবহার করে ।
এইচটিএমএল
<div class="hotwire-fitness" title="Fitness Centre"></div>সিএসএস
.hotwire-fitness {
float: left;
margin-right: 5px;
background: url(/prostyle/images/new_amenities.png) -71px 0;
width: 21px;
height: 21px;
}ডাব্লু 3 সি অনুসারে (উপরের লিঙ্কগুলি দেখুন), শিরোনাম বৈশিষ্ট্যটি Alt বৈশিষ্ট্য হিসাবে একই উদ্দেশ্যে অনেক কাজ করে
শিরোনাম
শিরোনাম বৈশিষ্ট্যের মানগুলি বিভিন্নভাবে ব্যবহারকারী এজেন্টদের দ্বারা রেন্ডার করা যেতে পারে। উদাহরণস্বরূপ, ভিজ্যুয়াল ব্রাউজারগুলি প্রায়শই একটি "সরঞ্জাম টিপ" হিসাবে শিরোনামটি প্রদর্শন করে (একটি সংক্ষিপ্ত বার্তা যা প্রদর্শিত যখন ডিভাইসটি কোনও বস্তুর উপর থামিয়ে দেয়)। অডিও ব্যবহারকারী এজেন্টরা একই প্রসঙ্গে শিরোনামের তথ্য বলতে পারে। উদাহরণস্বরূপ, কোনও লিঙ্কে অ্যাট্রিবিউট সেট করা ব্যবহারকারীর এজেন্টদের (ভিজ্যুয়াল এবং অ-ভিজ্যুয়াল) ব্যবহারকারীদের সংযুক্ত সংস্থার প্রকৃতি সম্পর্কে বলতে দেয়:
Alt
Alt বৈশিষ্ট্যটি আপনাকে ট্যাগের সমষ্টিতে সংজ্ঞায়িত করা হয়েছে (যেমন, আইএমজি, অঞ্চল এবং ইনপুট এবং অ্যাপলেট জন্য allyচ্ছিকভাবে) আপনাকে অবজেক্টটির সমতুল্য কোনও পাঠ্য সরবরাহ করতে দেয়।
একটি পাঠ্য সমতুল্য নিম্নলিখিত ওয়েবসাইটগুলিতে আপনার ওয়েবসাইট এবং এর দর্শকদের জন্য নিম্নলিখিত সুবিধাগুলি নিয়ে আসে:
- আজকাল, ওয়েব ব্রাউজারগুলি বিভিন্ন বিস্তৃত ক্ষমতা সহ বিভিন্ন প্ল্যাটফর্মগুলিতে উপলব্ধ; কিছু কিছু বা শুধুমাত্র চিত্রের ধরণের একটি সীমাবদ্ধ সেট চিত্র প্রদর্শন করতে পারে না; কিছু চিত্র লোড না করার জন্য কনফিগার করা যেতে পারে। যদি আপনার কোডটির চিত্রগুলিতে Alt বৈশিষ্ট্য সেট থাকে তবে এই ব্রাউজারগুলির বেশিরভাগই চিত্রগুলির পরিবর্তে আপনি যে বর্ণনাটি দিয়েছেন তা প্রদর্শন করবে
- আপনার কিছু দর্শক চিত্র দেখতে পাচ্ছেন না, সেগুলি অন্ধ, বর্ণ-অন্ধ, নিম্ন-দৃষ্টিশক্তি হোক; আপনার পৃষ্ঠায় কী আছে সে সম্পর্কে ভাল ধারণা পেতে people ব্যক্তির উপর নির্ভর করতে পারে এমন ব্যক্তিদের জন্য Alt গুণাবলী দুর্দান্ত সাহায্যকারী
- অনুসন্ধান ইঞ্জিনের বটগুলি উপরের দুটি বিভাগের সাথে সম্পর্কিত: আপনি যদি নিজের ওয়েবসাইটটিকে যথাযথভাবে তালিকাভুক্ত করতে চান তবে এটি আপনার পৃষ্ঠাগুলির গুরুত্বপূর্ণ বিভাগটি মিস করবে না তা নিশ্চিত করতে Alt বৈশিষ্ট্যটি ব্যবহার করুন।
এই ইয়াহু বিকাশকারী নেটওয়ার্ক ( সংরক্ষণাগারযুক্ত লিঙ্ক ) নিবন্ধে এটি প্রস্তাবিত হয়েছে যে আপনি যদি অবশ্যই একেবারে img উপাদান এবং Alt বৈশিষ্ট্যের পরিবর্তে ব্যাকগ্রাউন্ড-চিত্রটি ব্যবহার করেন তবে এআরআইএ বৈশিষ্ট্যগুলি নীচে ব্যবহার করুন:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>নিবন্ধে ব্যবহারের ক্ষেত্রে বর্ণনা করা হয়েছে যে ফ্লিকার কীভাবে পটভূমির চিত্রগুলি ব্যবহার করতে বেছে নিয়েছে কারণ মোবাইল ডিভাইসগুলিতে পারফরম্যান্স ব্যাপকভাবে উন্নত হয়েছিল।
আমি মনে করি আপনার এই পোস্টটি খ্রিস্টান হিলম্যানের পড়া উচিত । তিনি ব্যাখ্যা করেছেন যে ব্যাকগ্রাউন্ড চিত্রগুলি কেবল নান্দনিকতার জন্য এবং তথ্য উপস্থাপনে ব্যবহার করা উচিত নয় এবং তাই প্রতিটি চিত্রের বিকল্প-পাঠ্য থাকতে হবে এমন নিয়ম থেকে অব্যাহতি পাওয়া যায়।
অংশ (জোর আমার):
সিএসএস ব্যাকগ্রাউন্ড চিত্রগুলি যা কেবল নান্দনিক মানের সংজ্ঞায়িত - ডকুমেন্টের ভিজ্যুয়াল সামগ্রী নয় । আপনার যদি সেই পৃষ্ঠায় অর্থের একটি চিত্র রাখতে হয় তবে একটি আইএমজি উপাদান ব্যবহার করুন এবং এটি Alt বৈশিষ্ট্যে বিকল্প টেক্সট দিন।
আমি তার সাথে একমত.
background-sizeএবং background-positionএকটি স্বাভাবিক সঙ্গে শৈলী <img>ট্যাগ? এটি আপনার পটভূমির চিত্রগুলি বেশ নমনীয় করে তোলে, উদাহরণস্বরূপ, একটি প্রতিক্রিয়াশীল নায়ক জায়গাতে, যেখানে চিত্রটিতে সম্ভবত একটি গুরুত্বপূর্ণ বার্তা রয়েছে।
অন্যান্য উত্তরে উল্লিখিত হিসাবে, কেবল ইমগ ট্যাগের জন্য কোনও ডিভ ট্যাগের জন্য কোনও (সমর্থিত) ওপরের বৈশিষ্ট্য নেই।
আসল প্রশ্নটি হল কেন আপনাকে সাইটের সমস্ত পটভূমির চিত্রগুলিতে Alt গুণাবলী যুক্ত করতে হবে ? এই উত্তরের ভিত্তিতে এটি আপনার পদ্ধতির মধ্যে কোন রুটটি গ্রহণ করবে তা নির্ধারণ করতে আপনাকে সহায়তা করবে।
ভিজ্যুয়াল / পাঠ্য: আপনি যদি চিত্রটি লোড করতে ব্যর্থ হন তবে কেবল শিরোনাম বৈশিষ্ট্যটি ব্যবহার করুন যদি আপনি কেবল ব্যবহারকারীর জন্য একটি পাঠ্য পতন যুক্ত করার চেষ্টা করছেন simply বেশিরভাগ ব্রাউজারগুলি যখন ভিজ্যুয়াল টুল টিপ (বার্তা বাক্স) সরবরাহ করবে যখন কোনও ব্যবহারকারী চিত্রের উপরে নেমে আসে এবং যদি কোনও কারণেই চিত্রটি লোড না করা হয় তবে চিত্র ব্যর্থ হলে এটি কোনও Alt বৈশিষ্ট্য উপস্থাপনের পাঠ্যের মতোই আচরণ করে। এই কৌশলটি এখনও চিত্রকে ব্যাকগ্রাউন্ডে রাখার মাধ্যমে লোডের সময়ের গতি বাড়ানোর অনুমতি দেয়।
স্ক্রিন পাঠক: রাস্তা বিকল্পের মাঝামাঝি, এটি পরিবর্তিত হয় কারণ প্রযুক্তিগতভাবে আপনার চিত্রগুলি ব্যাকগ্রাউন্ড হিসাবে রাখা এবং শিরোনাম বৈশিষ্ট্য পদ্ধতির ব্যবহারের উপরের ইঙ্গিত হিসাবে কাজ করা উচিত, "অডিও ব্যবহারকারী এজেন্টগুলি একই প্রসঙ্গে শিরোনামের তথ্য বলতে পারে" " তবে এটি সমস্ত ক্ষেত্রে কাজ করার গ্যারান্টিযুক্ত নয়, সহ কিছু পাঠক এগুলি একসাথে উপেক্ষা করতে পারেন। যদি আপনি এই পদ্ধতির বিকল্পটি বেছে নেন, স্ক্রিন পাঠকরা এটিকে চয়ন করতে সহায়তা করতে আপনি এরিয়া-লেবেলগুলিতে যুক্ত করার চেষ্টা করতে পারেন।
এসইও / সার্চ ইঞ্জিন: আপনি এখানে আমার মতো হয়ে থাকলে আপনার ব্যাকগ্রাউন্ডের চিত্রগুলি জুড়েছিলেন, সব ভাল ছিল। তারপরে কয়েক মাস পরে গ্রাহক (বা সম্ভবত নিজেই) বুঝতে পেরেছিলেন যে আপনি নিজের ইমেজগুলির জন্য ওয়েট না করে কিছু প্রাথমিক এসইও সোনায় মিস করছেন। মনে রাখবেন, শিরোনামের বৈশিষ্ট্যটি আমার গবেষণা থেকে অনুসন্ধান ইঞ্জিনগুলিতে কোনও ওজন রাখবে না এবং যেমনটি এখানে একটি নিবন্ধে উল্লিখিত হয়েছে: https : //www.searchenginej Journal.com/how-to-use-link-title-attribute-correctly /। সুতরাং আপনি যদি এসইওর লক্ষ্য নির্ধারণ করে থাকেন তবে আপনাকে অবশ্যই এলটি বৈশিষ্ট্যের সাথে একটি ইমগ ট্যাগ থাকা দরকার। একটি সম্ভাব্য পন্থা হ'ল Alt বৈশিষ্ট্যযুক্ত সাইটে খুব ছোট প্রকৃত চিত্রগুলি লোড করা, এইভাবে আপনি সমস্ত এসইও পাবেন এবং স্থানে বিদ্যমান সিএসএস পুনরায় সমন্বয় করতে হবে না। তবে এটি আকারের উপর নির্ভর করে অতিরিক্ত লোড টাইমের দিকে নিয়ে যেতে পারে এবং গুডিক্স যখন সূচীকরণের সময় চিত্রের পাথের দিকে তাকাবে না। সংক্ষেপে আপনি যদি এই পথে যাচ্ছেন তবে কেবল কী করতে হবে তা গ্রহণ করুন এবং ব্যাকগ্রাউন্ড ব্যবহার না করে প্রকৃত চিত্রগুলি অন্তর্ভুক্ত করুন।
সাধারণ বিশ্বাসটি হ'ল অর্থবোধক শব্দাবলীর মূল্যযুক্ত জিনিসগুলির জন্য আপনার পটভূমি চিত্রগুলি ব্যবহার করা উচিত নয় তাই এই চিত্রগুলির সাথে ওয়েল ডেটা সংরক্ষণ করার কোনও যথাযথ উপায় নেই। গুরুত্বপূর্ণ প্রশ্ন আপনি যে Alt তথ্য দিয়ে কি করতে যাচ্ছেন? চিত্রগুলি লোড না হলে আপনি এটি প্রদর্শন করতে চান? পৃষ্ঠায় কিছু প্রোগ্রামেটিক ফাংশনের জন্য আপনার এটির কী দরকার? আপনি নির্ধারিতভাবে তৈরি করা CSS প্রপার্টি ব্যবহার করে ডেটা সংরক্ষণ করতে পারেন যার কোনও অর্থ নেই (ত্রুটি হতে পারে?) অথবা ছবি এবং ওয়েল ট্যাগ রয়েছে এমন লুকানো চিত্রগুলিতে যোগ করে এবং তারপরে আপনার যখন কোনও ব্যাকগ্রাউন্ড চিত্রের প্রয়োজন হয় তখন আপনি চিত্রটি তুলনা করতে পারেন পাথগুলি এবং তারপরে ডেটা হ্যান্ডেল করুন তবে আপনি যা প্রয়োজন তা অনুকরণ করতে কিছু কাস্টম স্ক্রিপ্ট ব্যবহার করতে চান। যদিও পটভূমির চিত্রগুলির জন্য ব্রাউজারটি স্বয়ংক্রিয়ভাবে কিছু প্রকারের আলি বৈশিষ্ট্যটি হ্যান্ডেল করার কোনও উপায় নেই।
এটি অর্জনের ধ্রুপদী উপায় হ'ল পাঠ্যটিকে ডিভের মধ্যে স্থাপন করা এবং চিত্র প্রতিস্থাপনের কৌশলটি ব্যবহার করা।
<div class"ir background-image">Your alt text</div>ব্যাকগ্রাউন্ড-ইমেজটি ক্লাসটি মৌমাছির সাথে যেখানে আপনি ব্যাকগ্রাউন্ড চিত্র নির্ধারণ করেছেন এবং আমি নীচে HTML5boilerplates চিত্র প্রতিস্থাপন শ্রেণি হতে পারে:
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}ডাব্লু 3 সি এর এই নিবন্ধটি আপনাকে জানায় যে তাদের কী করা উচিত বলে মনে করেন https://www.w3.org/WAI/GL/wiki/ARIATechnique_ usingImgRole_with_aria-label_forCSS-backgroundI छवि
এবং এখানে উদাহরণ রয়েছে http://mars.dequecloud.com/demo/ImgRole.htm
কাদের মধ্যে
<a href="http://www.facebook.com">
<span class="fb_logo" role="img" aria-label="Connect via Facebook">
</span>
</a>তবুও, যদি উপরের উদাহরণের মতো, ব্যাকগ্রাউন্ড ইমেজযুক্ত উপাদানটি কেবল একটি খালি ধারক হয় তবে আমি ব্যক্তিগতভাবে পাঠ্যটি সেখানে রাখতে এবং সিএসএস ব্যবহার করে এটি আড়াল করতে পছন্দ করি; পরিবর্তে আপনি যেখানে চিত্রটি দেখান ঠিক সেখানে:
<a href="http://www.facebook.com"><span class="fb_logo">
Connect via Facebook
</span></a>
.fb_logo {
height: 37px; width: 37px;
background-image: url('../gfx/logo-facebook.svg');
color:transparent; overflow:hidden; /* hide the text */
}এই ধরণের সমস্যার আমার সমাধান এখানে:
সিএসএসে একটি নতুন ক্লাস তৈরি করুন এবং পর্দার অবস্থান বন্ধ করুন। তারপরে আপনার Alt পাঠ্যটিকে সেই সম্পত্তিটির ঠিক আগে এইচটিএমএলে রাখুন যা আপনার ব্যাকগ্রাউন্ড ইমেজকে কল করে। কোন ট্যাগ হতে পারে, H1, H2, p, ইত্যাদি
সিএসএস
<style type="text/css">
.offleft {
margin-left: -9000px;
position: absolute;
}
</style>এইচটিএমএল
<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image> </div>আপনি কী চান তা আমার কাছে পরিষ্কার নয়।
আপনি যদি কোনও সিএসএস সম্পত্তি উচ্চ গুণকের মানটি রেন্ডার করতে চান তবে সম্ভবত আপনি সিএসএস অ্যাট্রিবিউট ফাংশনটি সন্ধান করছেন:
IMG:before { content: attr(alt) }আপনি যদি পটভূমির চিত্রটিতে আলি বৈশিষ্ট্যটি রাখতে চান তবে ... এটি অদ্ভুত কারণ বেইল বৈশিষ্ট্যটি একটি HTML বৈশিষ্ট্য যেখানে ব্যাকগ্রাউন্ড চিত্রটি একটি CSS বৈশিষ্ট্য CSS আপনি যদি এইচটিএমএল এলটি বৈশিষ্ট্যটি ব্যবহার করতে চান তবে আমার মনে হয় এটি যুক্ত করার জন্য আপনার কোনও সম্পর্কিত HTML উপাদান দরকার।
কেন আপনার "পটভূমির চিত্রগুলিতে Alt ট্যাগগুলি ব্যবহার করা দরকার": এটি কোনও অর্থগত কারণে বা কোনও ভিজ্যুয়াল-ইফেক্ট কারণে (এবং যদি তাই হয় তবে কী প্রভাব বা কোন কারণ)?
আপনার ছবিটি প্রদর্শিত হবে altআপনি ট্যাগ লাগিয়ে আপনি এটি অর্জন করতে পারেন div।
উদাহরণ:
<div id="yourImage" alt="nameOfImage"></div>altকারণ এটি<div>
altগুণাবলী যুক্ত করতে পারি div!!
titleব্যাকগ্রাউন্ড ইমেজ (গুলি) এর সাথে উপাদানগুলিতে একটি বৈশিষ্ট্য যুক্ত করার মতো কিছু করতে পারেন , তবে এটি সমস্ত উপাদানগুলির পক্ষে অর্থপূর্ণ নয়। আপনার এটি করা দরকার কেন? আপনি কি এমন চিত্রগুলি পরিচালনা করার চেষ্টা করছেন যা লোড হয় না, বা আপনি যেগুলি করেন সেগুলির উপর একটি টুলটিপ রাখার চেষ্টা করছেন?