ალტერნატიული ტექსტი

რას ისწავლი

• ვის სჭირდება alt ტექსტი და რატომ
• როგორ დაწერო კარგი აღწერა
• როდის უნდა იყოს alt ცარიელი

ვინ კითხულობს alt ტექსტს

alt ატრიბუტი სურათის ტექსტური ჩანაცვლებაა. ერთი შეხედვით უმნიშვნელო დეტალია, სინამდვილეში კი ბევრი ადამიანისთვის გადამწყვეტია:

• უსინათლო და მცირემხედველი ადამიანები ინტერნეტით ეკრანის წამკითხველის (screen reader) დახმარებით სარგებლობენ: პროგრამა ეკრანზე არსებულ ტექსტს ხმამაღლა კითხულობს. სურათს ის ვერ „დაინახავს“, ამიტომ მის ადგილას alt-ს კითხულობს. alt-ის გარეშე ადამიანი ისმენს მხოლოდ „სურათი“ ან, უარეს შემთხვევაში, ფაილის სახელს: „IMG_2041 წერტილი jpg“.
• ნელი ან გათიშული ინტერნეტი: როცა სურათი ვერ ჩაიტვირთა, მის ადგილას alt ჩანს.
• საძიებო სისტემები: Google სურათებს alt-ით „კითხულობს“ და ასე აჩვენებს მათ სურათების ძებნაში.

გვერდის ისე აწყობას, რომ ის ყველასთვის მისაწვდომი იყოს, მათ შორის შეზღუდული შესაძლებლობის მქონე ადამიანებისთვის, ხელმისაწვდომობა (accessibility) ჰქვია. alt მისი პირველი და უმარტივესი ნაბიჯია.

როგორ დაწერო კარგი alt

წარმოიდგინე, რომ მეგობარს ტელეფონით უყვები, რა არის გვერდზე. რას ეტყვი სურათზე?

<!-- ცუდი: არაფერს ამბობს -->
<img src="photo.jpg" alt="სურათი">

<!-- ცუდი: ფაილის სახელი -->
<img src="photo.jpg" alt="IMG_2041.jpg">

<!-- კარგი -->
<img src="photo.jpg" alt="კლასი სვეტიცხოვლის ეზოში, ყველას ხელში რუკა აქვს">

რამდენიმე წესი:

1. აღწერე მთავარი. რა არის სურათზე და რატომ არის ის გვერდზე. ერთი-ორი წინადადება საკმარისია.
2. ნუ დაწერ „სურათი“ ან „ფოტო“. წამკითხველი ისედაც აცხადებს, რომ ეს სურათია.
3. კონტექსტი მნიშვნელოვანია. ერთი და იგივე ძაღლის ფოტო ცხოველთა თავშესაფრის გვერდზე შეიძლება იყოს „ორი წლის ძაღლი ბობი, ეძებს ოჯახს“, ჯიშების ენციკლოპედიაში კი „ლაბრადორი რეტრივერი, ოქროსფერი ბეწვით“.
4. სურათზე დაწერილი ტექსტი alt-შიც ჩაწერე. თუ ბანერზე წერია „ფასდაკლება 30%“, ეს ინფორმაცია alt-ში უნდა იყოს.

ცარიელი alt

ზოგი სურათი მხოლოდ დეკორაციაა: ფონის ნახატი, გამყოფი ორნამენტი, ხატულა, რომლის გვერდითაც იგივე ტექსტი უკვე წერია. ასეთი სურათების აღწერა მხოლოდ ხელს უშლის: წამკითხველის მომხმარებელს მოუწევს მოისმინოს „მწვანე ტალღოვანი ხაზი“ ყოველ ნაწილს შორის. დეკორატიულ სურათს ცარიელი alt მიეცი:

<img src="divider.png" alt="">

ცარიელი alt="" და alt-ის საერთოდ არქონა სხვადასხვაა. ცარიელი ამბობს: „ეს დეკორაციაა, გამოტოვე“. თუ alt საერთოდ არ წერია, წამკითხველი ფაილის სახელის წაკითხვას იწყებს.

სცადე თავად

მეორე სურათის მისამართი შეგნებულად არასწორია: ნახე, რას აჩვენებს ბრაუზერი მის ადგილას. მესამე სურათი დეკორატიულია და მისი alt ცარიელია. გააუმჯობესე პირველი სურათის alt.

ხშირი შეცდომები

• alt="სურათი". არაფერს ამბობს. აღწერე, რა ჩანს და რატომ არის აქ.
• ზედმეტად გრძელი აღწერა. ერთი-ორი წინადადება. სრული ისტორია ჩვეულებრივ ტექსტში ჩაწერე.
• აღწერილი დეკორაცია. ორნამენტებსა და დუბლირებულ ხატულებს alt="" სჭირდება.

<h1><img src="/icons/icon-192.png" alt="" width="32"> სკოლის გაზეთი</h1>
<img src="/og.jpg" alt="პროგრამირების წრის ბანერი რობოტით და წარწერით „ისწავლე კოდინგი“" width="400">
<p>ჩვენს სკოლაში პროგრამირების ახალი წრე იხსნება.</p>

მინი-ქვიზი

შეჯამება

• alt სურათის ტექსტური ჩანაცვლებაა ეკრანის წამკითხველებისთვის, ჩაუტვირთავი სურათებისთვის და ძებნისთვის.
• კარგი alt მოკლედ აღწერს, რა ჩანს და რატომ არის აქ. სურათზე დაწერილი ტექსტიც მასში შედის.
• „სურათი“ და ფაილის სახელი არ გამოდგება.
• დეკორატიულ სურათს alt="" სჭირდება.