Google PageSpeed uygulamasında ve diğer SEO analiz sitelerinin bazılarında görülen “ARIA [role] sahibi olup alt öğelerin belirli bir [role] içermesini gerektiren öğelerde bu gerekli alt öğelerin bazıları veya hiçbiri bulunmuyor” hatası, web sayfanızda kullanılan ARIA (Accessible Rich Internet Applications) etiketleriyle ilgilidir.
Bu hata, sayfanızda belirli bir role özelliği olan bir öğe kullandığınızda, o öğenin alt öğelerinin de belirli role özelliklerine sahip olması gerektiğini belirtir. Eğer bu gereklilik yerine getirilmezse, sayfa erişilebilirlik hatası alır ve bu hata PageSpeed araçları tarafından tespit edilir.
ARIA role, sayfa öğelerinin kullanıcıya ve ekran okuyucularına hangi işlevi yerine getirdiğini belirtir. Bu, özellikle görme engelli kullanıcılar için önemlidir. Örneğin:
<div role="button"> etiketi, bir öğeyi buton olarak tanımlar.
<div role="navigation"> etiketi, bir öğeyi navigasyon alanı olarak tanımlar.
Hata Nedir?
Bu hata, belirli bir role özelliğine sahip olan bir öğenin alt öğelerinin de belirli bir role özelliğine sahip olmasını bekler. Örneğin, bir öğe <nav role=”navigation”> olarak belirlenmişse, altındaki öğelerin de navigasyonla ilişkili öğeler (örneğin, bir bağlantı listesi) olması beklenebilir. Eğer bu alt öğeler doğru role’a sahip değilse, bu hata oluşur.
Hata Örneği:
Aşağıdaki gibi bir HTML yapısını inceleyelim:
<div role="navigation"> <a href="/home">Home</a> <a href="/about">About</a> <span>Contact</span> <!-- Bu öğe doğru role'ı içermiyor --> </div>
Burada <div role="navigation"> etiketine sahip bir öğe, navigasyon amaçlı bir öğedir. Ancak alt öğe olan <span> öğesi bir bağlantı içermiyor ve doğru role’a sahip değil. Bu da hataya yol açar.
Çözüm:
Alt öğelerin doğru role’lara sahip olduğundan emin olmalısınız. Örneğin, <span> öğesini uygun şekilde <a> (bağlantı) etiketiyle değiştirebilirsiniz:
<div role="navigation"> <a href="/home">Home</a> <a href="/about">About</a> <a href="/contact">Contact</a> <!-- Burada doğru role kullanılmış olur --> </div>
Bu şekilde, hem erişilebilirlik standartlarına uyum sağlarsınız hem de PageSpeed hatasını düzeltebilirsiniz. PageSpeed’deki bu hata, ARIA etiketlerinin doğru şekilde kullanıldığına emin olmanız gerektiğini belirtir. Alt öğelerin doğru role’lara sahip olup olmadığını kontrol ederek bu hatayı düzeltebilirsiniz.