Parece que funciona principalmente. La clave es usar aria-live . Tenga en cuenta que cuando usa role="alert" , obtiene un aria-live="assertive" implícito. Rara vez uso "asertivo" o "alerta" porque eso puede hacer que se borren otros mensajes. Quédate con "educado".

No dijiste lo que no te gustaba del método 1 o del método 2. Ambos están anunciando cosas. ¿Quieres que se anuncien todos los mosaicos que se agregan? Espero que no. Esa es demasiada información para el lector de pantalla.

Originalmente estás mostrando 12 fichas. Cuando hace clic en "mostrar más", se agregan otros 12 mosaicos. ¿Qué es exactamente lo que quieres que anuncie? Como se mencionó, no desea que se anuncie el título de cada mosaico. No hay necesidad de eso. Recomendaría simplemente un simple "12 mosaicos adicionales agregados" o algo así.

Si tiene un contenedor aria-live en blanco, puede poner el texto que desee y eso es exactamente lo que se anunciará.

Antes de hacer clic en "mostrar más":

 <div aria-live="polite" aria-atomic="true" class="sr-only"> <!-- initially blank --> </div>

Después de hacer clic en "mostrar más":

 <div aria-live="polite" aria-atomic="true" class="sr-only"> 12 additional tiles added </div>

Tenga en cuenta que estoy usando una class en el contenedor llamada " sr-only ". Ese es solo un nombre común para llamar a una regla CSS para ocultar visualmente el texto que aún está disponible para que lo anuncie el lector de pantalla. No hay nada especial en el nombre y esa clase no se crea automáticamente para usted. Puede ver un ejemplo de "solo sr" en ¿Qué es solo sr en Bootstrap 3? . Tampoco necesitas Bootstrap. Simplemente cree su propia clase CSS con los valores de ese artículo de StackOverflow.

La segunda cosa a tener en cuenta es que el contenedor usa aria-atomic . Eso hace que cualquier texto que inyecte en el contenedor se lea por completo . Sin aria-atomic , solo se leería el texto que cambió . Por ejemplo, si acaba de anunciar "12 mosaicos adicionales agregados" y el usuario vuelve a hacer clic en "mostrar más" pero ahora solo se agregaron 6 mosaicos, su contenedor de mensajes tendría "6 mosaicos adicionales agregados".

Después de hacer clic en "mostrar más" nuevamente :

 <div aria-live="polite" aria-atomic="true" class="sr-only"> 6 additional tiles added </div>

Sin embargo, solo se anunciaría el número "6" porque la diferencia entre "12 mosaicos adicionales agregados" y "6 mosaicos adicionales agregados" es solo el "6". Con aria-atomice="true" , se anunciaría el texto completo, "se agregaron 6 mosaicos adicionales".