HTML resim ekleme (<img>)

Psikoloji ders notlarınızı paylaştığınız bir blog yazısında, "zihinsel_surecler.svg" adlı bir diyagram resmi kullanacaksınız. Resmin, ekran okuyucu yazılım kullanan bir kullanıcı için anlamlı bir açıklaması olmasını ve fare imleci resmin üzerine geldiğinde "Bilişsel Psikoloji - Zihinsel İşlemler" başlığının bir araç ipucu (tooltip) olarak görünmesini istiyorsunuz. Bu özellikleri nasıl eklersiniz?

💡 Bu soruda, erişilebilirlik ve kullanıcı deneyimi için önemli olan iki niteliği kullanacağız: alt ve title.

• ➡️ Ekran okuyucular için anlamlı açıklamayı alt niteliği ile sağlıyoruz: alt="Zihinsel süreçlerin bilgi işleme modeli akış şeması"
• ➡️ Fare imleci ile üzerine gelindiğinde çıkacak araç ipucunu ise title niteliği ile tanımlıyoruz: title="Bilişsel Psikoloji - Zihinsel İşlemler"
• ➡️ Resmin kaynağını src niteliğinde belirtiyoruz.

✅ Sonuç olarak, oluşturulan HTML kodu şöyle olacaktır:
<img src="zihinsel_surecler.svg" alt="Zihinsel süreçlerin bilgi işleme modeli akış şeması" title="Bilişsel Psikoloji - Zihinsel İşlemler">