Hocam üstünden çok geçmiş ama insanların ihtiyacı olabilir,

.sr-only class'ı ekran okuyucular için üretilmiş bir stilize kodlamasıdır. Ön yüzde sadece ekran okuyucuların algılamasını istediğiniz şeyler var ise bu class'ı kullanabilirsiniz. Örnek vermek gerekirse:

<a class="sr-only" href="#devami">Fazlalıklardan kurtul ve yazının devamını dinle</a>

<div id="devami">..........</div>

Burada ekran okuyucusu sesli olarak: "Fazlalıklardan kurtul ve yazının devamını dinle" diye konuşacaktır. Tabi Türkçe destekli değilse pek anlaşılmıyor, google den biliyorsunuzdur. Ama onlar muhtemelen anlıyorlardır. Varları yokları bu cihazlar oluyor.

aria-label ise resim gibi cihazın ne olduğunu algılayamayacağı (daha doğrusu resimde ne demek istediğini algılayamayacağı şeyleri siz belirtiyorsunuz)

Örneğin:

<img src=".....prototype.png" aria-label="Prototype'e ait profil resmi (Gülen bir adam yüzü var, saçları siyah ve mavi tshort giyinmiş)" />

Prototype'e ait profil resmi (Gülen bir adam yüzü var, saçları siyah ve mavi tshort giyinmiş) direk olarak bunu okuyacaktır. ( parentez ) leri de okuyacağından ayrıntı vermek istediğinizi de algılayacaklardır.