چرا تولیدکنندگان محتوا باید برای تصاویرشان متن جایگزین بنویسند؟

عکس‌ها، نمودارها و اینفوگرافیک‌ها بخش مهمی از محتوای رسانه‌های دیجیتال‌اند؛ اما برای مخاطبی که نمی‌تواند آن‌ها را ببیند، ممکن است بخش مهمی از اطلاعات مقاله کاملاً پنهان بماند. متن جایگزین (ALT)، راهی برای انتقال این اطلاعات به کاربران نابینا و کم‌بینا است؛ راهکاری ساده که اگر درست اجرا شود، محتوای دیجیتال را دسترس‌پذیرتر می‌کند.

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

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

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

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

برای مثال، اگر در مقاله‌ای تصویری از یک خودروی برقی جدید قرار داده شده باشد، متن جایگزین می‌تواند چنین باشد

«خودروی برقی سفیدرنگی در نمای سه‌چهارم جلو، مقابل ساختمان مدرن نمایش داده شده است.»

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

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

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

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

اهمیت متن جایگزین را می‌توان در چند موقعیت دید

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

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

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

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

توضیحی مانند «گوشی هوشمند مشکی‌رنگ با سه دوربین پشتی که به‌صورت عمودی در گوشه‌ی بالای بدنه قرار گرفته‌اند» اطلاعات بیشتری ارائه می‌دهد؛ البته به شرط آنکه این جزئیات در تصویر واقعاً دیده شوند و برای موضوع مقاله اهمیت داشته باشند.

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

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

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

همچنین بهتر است به‌جای نسبت دادن احساس یا نیت قطعی به افراد، آنچه قابل مشاهده است توصیف شود. برای مثال، «مردی با لبخند کنار خودرو ایستاده است» دقیق‌تر از توصیف‌هایی مانند «مدیر شرکت با رضایت از موفقیت محصولش رونمایی می‌کند» است؛ مگر اینکه زمینه‌ی خبری این اطلاعات را تأیید کند.

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

در مقابل، اگر تصویر حاوی اطلاعاتی است که در متن مقاله وجود ندارد، آن اطلاعات باید در جای مناسبی در دسترس قرار بگیرند.

نمودارها از دشوارترین تصاویر برای توصیف هستند؛ چون هدفشان فقط نمایش یک شیء یا صحنه نیست، بلکه اطلاعات عددی و رابطه‌ی میان داده‌ها را منتقل می‌کنند.

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

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

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

متن جایگزین کوتاه می‌تواند چنین باشد

«نمودار میله‌ای تعداد بازدیدکنندگان وب‌سایت در سه ماه نخست سال.»

سپس توضیح کامل‌تر می‌تواند روند داده‌ها را بیان کند

«تعداد بازدیدکنندگان از ۱۲۰ هزار نفر در ماه اول به ۹۰ هزار نفر در ماه دوم کاهش یافته و در ماه سوم به ۱۴۰ هزار نفر رسیده است. ماه سوم بیشترین و ماه دوم کمترین تعداد بازدیدکننده را داشته‌اند.»

اعداد این مثال فرضی‌اند؛ در یک مقاله‌ی واقعی باید مقادیر دقیق نمودار گزارش شوند.

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

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

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

برای مثال، اگر اینفوگرافیکی مراحل شارژ یک خودرو برقی را نمایش دهد، نوشتن «اینفوگرافیک شارژ خودرو برقی» برای درک محتوای آن کافی نیست. کاربر باید بتواند مراحل، ترتیب آن‌ها و اطلاعات مهمی را که در تصویر آمده است، دریافت کند.

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

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

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

متن جایگزین نباید صرفاً عبارت «اینفوگرافیک درباره‌ی انرژی خورشیدی» باشد، اگر نکته‌ی اصلی تصویر مثلاً مقایسه‌ی هزینه‌ی نصب پنل‌ها در چند کشور است. مخاطب باید بتواند نتیجه‌ی اصلی و داده‌های مهم را هم دریافت کند.

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

برای چنین تصاویری، در HTML از متن جایگزین خالی استفاده می‌شود

alt=""

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

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

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

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

توصیف صوتی روشی برای بیان اطلاعات بصری مهم در ویدئو است؛ اطلاعاتی مانند حرکت افراد، تغییر صحنه، نوشته‌های روی تصویر یا اتفاقاتی که در صدای اصلی توضیح داده نمی‌شوند.

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

توصیف صوتی می‌تواند در مکث‌های میان گفت‌وگوها قرار بگیرد یا از ابتدا در متن گوینده گنجانده شود. در روش دوم، گوینده به‌جای اشاره‌های مبهمی مانند «همان‌طور که می‌بینید»، آنچه را برای فهم موضوع لازم است به زبان می‌آورد.

زیرنویس معمولاً گفتار و صداهای مهم را به متن تبدیل می‌کند و برای افراد ناشنوا و کم‌شنوا کاربرد دارد. اما اگر اطلاعات مهمی فقط در تصویر دیده شود، زیرنویس معمولی لزوماً آن را منتقل نمی‌کند.

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

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

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

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

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

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

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

برای تولیدکنندگان محتوا، رعایت چند اصل ساده می‌تواند کیفیت متن جایگزین را به شکل محسوسی بهتر کند

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

۲.توضیح را دقیق و متناسب با زمینه بنویسید.یک عکس ممکن است در مقاله‌ای درباره‌ی طراحی محصول، به‌خاطر ظاهر دستگاه مهم باشد و در مقاله‌ای دیگر، به‌خاطر موقعیت آن در یک رویداد خبری.

۳.از اطلاعات غیرقابل مشاهده یا تأییدنشده پرهیز کنید.متن جایگزین باید توصیف قابل اتکایی از تصویر باشد، نه محلی برای حدس‌زدن هویت، احساس یا نیت افراد.

۴.از عبارت‌های کلی مانند «تصویر» یا «عکس» به‌تنهایی استفاده نکنید.عبارت «عکس یک لپ‌تاپ» اطلاعات محدودی دارد؛ درحالی‌که «لپ‌تاپ نقره‌ای با نمایشگر باز و صفحه‌کلید مشکی» جزئیات بیشتری منتقل می‌کند. البته میزان جزئیات باید با اهمیت تصویر متناسب باشد.

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

۶.اطلاعات تکراری را حذف کنید.اگر عنوان تصویر و توضیح کامل آن در متن مجاور آمده، متن جایگزین نباید همان اطلاعات را بی‌دلیل تکرار کند.

۷.برای تصاویر تزئینی، متن جایگزین خالی در نظر بگیرید.توضیح‌دادن هر عنصر بصری لزوماً به دسترس‌پذیری بهتر منجر نمی‌شود.

۸.تصاویر و ویدئوها را در عمل آزمایش کنید.بررسی صفحه با صفحه‌خوان و دریافت بازخورد از کاربران نابینا و کم‌بینا می‌تواند مشکلاتی را آشکار کند که در بازبینی صرفاً بصری مشخص نمی‌شوند.

این نمونه‌ها نسخه‌های عمومی‌اند و باید متناسب با محتوای واقعی تصویر و نقش آن در صفحه تغییر کنند. همچنین عبارت «توضیح کامل در متن زیر تصویر آمده است» فقط زمانی مفید است که توضیح واقعاً وجود داشته باشد و کاربر بتواند به‌آسانی آن را پیدا کند.

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

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

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

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

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