Resminiz Muhtemelen Dekoratif Değildir

img öğesinin alt özelliği, onu bir metin açıklaması yerine boş bir dizeye ayarlama eylemi olan "boş bırakılabilir". Bir alt açıklamayı geçersiz kılmak, açılış ve kapanış tırnak işaretleri arasında hiçbir bilgi olmadığı anlamına gelir. Boş bir alan varsa, boş olarak kabul edilmeyecektir:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

"Dekoratif" Ne Demektir?

Bir görüntüyü boş bırakmak, yalnızca dekoratif amaçlı olduğunu gösterir.

Bu bağlamda dekoratif, görüntünün sayfanın veya görünümün amacını anlamak için önemli olan bilgileri görsel olarak iletmediği ve görüntünün neden bunun bir parçası olarak dahil edildiği anlamına gelir.

Dekoratif, görselin dekorasyon olarak değerlendirilen içerik barındırdığı anlamına gelmez.

“

Örneğin, duvar kağıdı satan bir web sitesi, duvar kağıdı örnekleri için alternatif açıklamalara sahip olmak isteyecektir:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Başka bir örnek, koleksiyonlarından bir parçayı sunmanın hem alternatif bir tanımdan hem de bir başlıktan yararlanabileceği bir müze web sitesi olabilir:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Alternatif açıklamanızın noktalama işaretleri de içerdiğinden emin olun!

Neden Bir Resmi Dekoratif Yapmak İstiyorsunuz?

Yardımcı teknoloji, sıfırlanmış görüntüleri atlayacak ve varlıklarını duyurmayacaktır. Bunu yapmak istememizin nedenleri çoğunlukla tarihseldir.

Eski Düzen Teknikleri

Erken web geliştirme teknikleri, farklı işletim sistemleri, tarayıcılar ve tarayıcı sürümleri arasında tutarlı düzeni garanti etmelerine yardımcı olmak için görüntülere dayanıyordu. Bunun en yaygın örneği, içeriği yerine oturtmak için farklı boyutlara esnetilen 1×1 şeffaf piksel olan spacer.gif idi.

Bu teknik, görsel bir tasarım oluşturmak için tipik olarak birçok boşluk görüntüsü kullanır. Varlıklarını susturmanın bir yolu olmadan, bu görüntüler yardımcı teknolojinin duyurduklarını karıştıracak ve web içeriğinde gezinmeyi ve eylemde bulunmayı kafa karıştırıcı ve zaman alıcı hale getirecektir.

Eski Tasarım Teknikleri

box-shadow gibi CSS özellikleri bulunmadan önce, geliştiriciler, dekoratif stili, belirsiz yükseklik veya genişlik içeriğiyle çalışmasını sağlamak için parçalayan teknikler kullanmak zorundaydı. Bu teknik, oluşturmanız gereken içeriğin 9 bölümünü ifade eden bir terim olan 9 dilimli ölçekleme olarak adlandırıldı.

9 dilimli ölçeklemede, aralayıcı görüntülere çok benzer şekilde, istenen görsel efekti oluşturmak için birden çok görüntü kullanıldı. Ve aralayıcı resimlere çok benzer şekilde, bu resimlerin oluşturduğu dağınıklığı ortadan kaldırmanın tek yolu onları dekoratif olarak işaretlemekti.

Gereksiz Duyurular

Bir resmin bir sayfada veya görünümde tekrarlandığı nadir bir senaryo vardır ve tekrarlanan yerleşimler herhangi bir ek bağlam sağlamaz. Bu durumda bir resmi dekoratif olarak işaretlemeye dikkat etmelisiniz, çünkü az gören ve ekran okuyucu kullanan biri için görünür bir resim için bir duyurunun olmaması kafa karıştırıcı olabilir.

Ek Simgeler

Simgeleri kullanan bağlantılar ve düğmeler, her zaman işlevselliği ileten erişilebilir bir ada sahip olmalıdır. Tasarım ayrıca bir simge içeriyorsa, simgenin tasarımının iletilmesine gerek yoktur.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Bileşen yalnızca bir simge kullanıyorsa, erişilebilir adı oluşturmak için görüntünün kendisi kullanılmalıdır:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Görünür bir metin etiketinin tercih edilen teknik olduğunu unutmayın. Görünür bir metin etiketi tercüme edilebilir ve amacı daha doğrudan iletir.

Çağdaş Kullanım

Modern CSS düzeni ve stil teknikleri, görüntü yerleştirmenin artık son derece kasıtlı olduğu anlamına gelir. Bu, bir resim kullanılıyorsa, büyük olasılıkla alternatif bir açıklamaya ihtiyaç duyacağı anlamına gelir.

Alternatif açıklamalar görüntünün amacını iletmelidir . Bu, resmin içeriğini içerir, ancak eklendiği sayfadaki veya görünümdeki bağlama dahil edilme nedenini de içerebilir. Bu, alternatif resim açıklamalarının hiçbir zaman tam otomatik hale getirilememesinin nedenlerinden biridir.

Görüntüleri Görüntülemenin Diğer Yolları

Bir sayfada veya görünümde bir resmi görüntülemenin birkaç yolu daha vardır. Kullanılan teknikten bağımsız olarak, görsel anlamlı içerik içeriyorsa alternatif bir açıklamanın sağlanması önemlidir.

picture öğesi

picture öğesinin örtük bir rolü yoktur, yani varlığının yardımcı teknolojiye herhangi bir amaç iletmediği anlamına gelir. Bu, bir "resmin" varlığını anlamsal olarak tanımlamak için kullanılamayacağı anlamına gelir.

picture öğesi, source ve img öğeleri için bir kapsayıcıdır. Ana picture öğesi için alternatif bir açıklama sağlamak için img öğesinin alt niteliğini kullanın.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Arka Plan Resimleri

Bir görüntüyü bir HTML öğesinde arka plan olarak bildirmek için CSS'yi kullanabiliriz. Bu genellikle bir tasarıma doku hissi eklemek için kullanılır.

Bununla birlikte, bir başka popüler teknik, bir görüntüyü, geliştiricinin birinin yüklediği görüntünün boyutu üzerinde kontrol sahibi olmayacağı bir şekilde yerleştirmek için bir background-image kullanmaktır. background-image , background-size gibi diğer özelliklerle birleştiğinde, bilinmeyen boyuttaki içeriğin tasarımı bozmadan görüntülenmesini sağlar.

Böyle bir senaryoda eski dostumuz spacer.gif yine yardımcı olabilir!

Satır içi SVG

SVG, bir img öğesindeki src özniteliği aracılığıyla SVG'ye bağlanarak veya SVG kodunu sayfa veya görünüme satır içi yerleştirilerek görüntülenebilir.

Satır içi SVG kullanıyorsanız, alt niteliği yerine SVG'nin title (ve potansiyel olarak desc ) öğesini kullanmanız gerekir.

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Eşdeğer Deneyim

Modern web tasarımı ve geliştirmede, bir resmin gösterilmesi son derece kasıtlı bir eylemdir. Alternatif açıklamalar, görüntünün içeriğini açıklamamıza izin verir ve bunu yaparken neden dahil etmeye değer olduğunu iletir .

Bir görüntünün hayali bir şey göstermesi, onun açıklamaya değer olmadığı anlamına gelmez. Varlığını duyurmak, yetenek veya koşul ne olursa olsun herkesin dijital deneyiminizi tam olarak anlamasını sağlar.

SmashingMag'de Daha Fazla Okuma :

• Chrome Geliştirici Araçları'nda Erişilebilirlik
• Erişilebilirlik Araçları İçin Eksiksiz Bir Kılavuz
• En Önemli Anlar İçin Erişilebilir Görüntüler
• Erişilebilir SVG'ler: Ekran Okuyucu Kullanıcıları İçin Mükemmel Modeller
• Hareket Hassasiyetleri İçin Azaltılmış Hareketle Tasarım
• Erişilebilirlik, kullanılabilirlik ve UX hakkında daha fazla makale okuyun.