نوشتن Alt عکس با هوش مصنوعی؛ مثال و چک‌لیست

نوشتن Alt عکس با هوش مصنوعی به دانستن محتوای تصویر و نقش آن در صفحه نیاز دارد. متن جایگزین باید اطلاعاتی را منتقل کند که کاربر برای فهم یا انجام کار لازم دارد؛ فهرست کلمات کلیدی یا توصیف همه جزئیات همیشه مناسب نیست. این راهنما مثال‌های فارسی برای عکس محصول، تصویر تزئینی، دکمه تصویری و نمودار ارائه می‌کند.

Alt چیست و چه نقشی دارد؟#

ویژگی alt در HTML متن جایگزین تصویر را مشخص می‌کند. این متن می‌تواند برای کاربران صفحه‌خوان یا هنگام در دسترس نبودن تصویر مفید باشد. انتخاب آن به زمینه بستگی دارد: یک تصویر واحد در مقاله هنری، فروشگاه و دکمه رابط ممکن است توصیف متفاوتی نیاز داشته باشد.

درخت تصمیم تصاویر W3C میان تصویر اطلاعاتی، تزئینی و دارای عملکرد تمایز می‌گذارد. نکته عملی این است که قبل از نوشتن جمله، نقش تصویر را مشخص کنید. AI می‌تواند پیشنهاد بدهد، اما اگر زمینه صفحه را نداند ممکن است توضیح نامناسب تولید کند.

چهار مثال فارسی با یک هدف روشن#

این نمونه‌ها به همین زمینه وابسته‌اند. اگر نام محصول کنار عکس نوشته شده و تصویر فقط تکرار همان اطلاعات است، تصمیم ممکن است متفاوت باشد. همچنین alt خالی با حذف ویژگی alt یکسان نیست؛ در HTML برای تصویر تزئینی معمولاً مقدار خالی صریح به کار می‌رود.

هوش مصنوعی به چه ورودی‌هایی نیاز دارد؟#

تصویر، متن اطراف، مقصد لینک احتمالی و هدف صفحه را بدهید. اگر مدل تصویر را نمی‌بیند، توصیف انسانی معتبر لازم است. مدل متنی نباید از نام فایل، رنگ یا ویژگی را حدس بزند. برای داده‌های نمودار نیز جدول منبع را ارائه کنید؛ مقدار عددی را از شکل تقریبی ستون‌ها استخراج قطعی نکنید.

مشخص کنید اطلاعات مهم چیست. در فروش لباس، نوع لباس و رنگ می‌تواند مرتبط باشد. در آموزش بستن گره، موقعیت دست‌ها و ترتیب عمل مهم‌تر است. در تصویر پرتره، درباره هویت یا ویژگی حساس فرد از ظاهر حدس نزنید. اگر نام شخص برای معنی تصویر لازم و تأییدشده است، همان نام را به‌عنوان زمینه بدهید.

پرامپت آماده تولید متن جایگزین#

تصویر و زمینه صفحه را در ادامه می‌دهم. ابتدا نقش آن را اطلاعاتی، تزئینی، عملکردی یا پیچیده پیشنهاد بده و دلیل کوتاه بیاور. برای تصویر اطلاعاتی یک alt فارسی روشن بنویس که اطلاعات لازم را منتقل کند. برای تصویر تزئینی مقدار خالی پیشنهاد بده. اگر تصویر دکمه یا لینک است، عملکرد یا مقصد را توضیح بده. هیچ ویژگی دیده‌نشده، هویت حدسی یا کلمه کلیدی نامرتبط اضافه نکن. برای نمودار پیچیده، توصیف کوتاه و طرح توضیح مفصل جدا بده.

برای نقد پاسخ بگویید: «اگر تصویر حذف شود و فقط این متن خوانده شود، چه اطلاعات ضروری از دست می‌رود؟ چه بخش اضافی را می‌توان حذف کرد؟» این پرسش کمک می‌کند توصیف بر نیاز کاربر تمرکز کند. کوتاهی هدف مفیدی است، اما حد ثابت نویسه برای همه تصویرها تعیین نکنید.

مثال کدنویسی برای سه نقش تصویر#

نمونه زیر آموزشی است. در پروژه واقعی نام فایل و متن باید با تصویر واقعی هماهنگ شوند.

<img src="/mug.jpg" alt="ماگ آبی با دسته بزرگ، نمای روبه‌رو" />

<img src="/decorative-line.svg" alt="" />

<button type="button" aria-label="جست‌وجو">
  <img src="/search.svg" alt="" />
</button>

در دکمه نمونه، نام قابل دسترس از aria-label می‌آید و تصویر تکراری alt خالی دارد. اگر متن قابل مشاهده «جست‌وجو» داخل دکمه است، ممکن است همان متن نام مناسب را تأمین کند. چند نام متفاوت برای یک عمل نسازید؛ پیاده‌سازی باید با ابزارهای بررسی دسترس‌پذیری و کاربرد واقعی هماهنگ شود.

نمودار، اینفوگرافیک و اسکرین‌شات#

یک نمودار پیچیده را در جمله‌ای بسیار بلند داخل alt جا ندهید. توضیح کوتاه هدف نمودار، جدول داده و متن تفسیر در صفحه می‌تواند مسیر مناسب‌تری باشد. برای نمودار روند، نوع داده، بازه و جای توضیح کامل را مشخص کنید. برداشت علت از نمودار را به‌عنوان واقعیت تصویر وارد نکنید.

برای اسکرین‌شات آموزشی، alt باید نکته‌ای را توضیح دهد که مرحله آموزش به آن وابسته است. اگر تمام متن اسکرین‌شات در پاراگراف کنار آن آمده، تکرار کامل آن ممکن است خواندن را خسته‌کننده کند. عناصر مهم را در متن آموزش نیز بنویسید تا فهم مراحل به دیدن تصویر محدود نشود.

Alt برای سئو؛ بدون انباشتن عبارت#

راهنمای سئوی تصویر گوگل بر متن توصیفی مرتبط با تصویر و صفحه تأکید می‌کند. استفاده طبیعی از نام موضوع وقتی واقعاً به تصویر مربوط است مناسب است، اما تکرار عباراتی مانند «خرید ارزان بهترین ماگ...» توصیف مفید نمی‌سازد. وظیفه اصلی متن، توضیح اطلاعات تصویر در همان زمینه است.

نام فایل روشن و تصویر مرتبط نیز به نگهداری محتوا کمک می‌کند، ولی هیچ جمله alt به‌تنهایی رتبه را تضمین نمی‌کند. متن جایگزین تصویر تزئینی را فقط برای جا دادن کلمه کلیدی پر نکنید. خواننده باید بتواند بدون تصویر، اطلاعات یا عملکرد لازم را دریافت کند.

چک‌لیست بازبینی قبل از انتشار#

آیا توصیف با تصویر واقعی مطابق است؟ نقش آن در صفحه روشن است؟ متن اطراف بی‌دلیل تکرار نشده؟ عملکرد دکمه مشخص است؟ تصویر تزئینی مقدار خالی دارد؟ برای نمودار پیچیده داده و توضیح لازم موجود است؟ نام و ویژگی فرد از ظاهر حدس زده نشده؟ این پرسش‌ها را برای هر گروه تصویر بررسی کنید.

چند صفحه را با تصویرهای غیرفعال یا صفحه‌خوان بررسی کنید و فقط به کامل بودن فیلد در CMS اکتفا نکنید. ترجمه رابط سایت برای فارسی‌سازی متن، ممیزی محتوا برای بازبینی صفحات و تولید تصویر برای انتخاب تصویر مرتبط مکمل‌اند. می‌توانید زمینه عمومی و توصیف تصویر را در GPT Plus به پیشنهاد alt تبدیل کنید و سپس با تصویر واقعی تطبیق دهید.