Poprawne oraz uniwersalne podejście do wyświetlania błądów - aria oraz ingerencja JS

Question

Witam!

Przedstawię moje pytanie na przykładzie okienka typu modal do zmiany hasła do konta. Pytanie tyczny się też kategorii JS ponieważ wykorzystuję tutaj mechanizm AJAX

https://jsfiddle.net/adriansikora344/zq1syrt2/

     Zastanawiam się jak zareagują czytniki jeżeli może być tak że informację o błędach będę wyświetlał na dwa sposoby. Pierwszy: przy kontrolce. Będą to błędu typu nie wpisano hasła itp. Zwykłe sprawdzenie poprawności danych. Drugi: Błąd połączenia z serwerem błąd połączenia z bazą danych czyli błędy które nie jestem wstanie przypisać do żadnego input'u więc na drugi sposób mam pojemnik <div class="modal-errors-container" role="alert" aria-atomic="true"> Jest tam jeden na sztywno wpisany błąd (Błąd połączenia!) ponieważ jeżeli nie zostanie nawiązane połączenie to nie otrzymam od serwera informacji o błędzie do wyświetlenia tylko błąd jest jednego typu i wyświetlam go poprzez .show(). Jak zareaguje czytnik jeżeli ma on wpisany styl css display: none ? Czytnik go ominie ? Jak po próbie wysłania formularza poinformować roboty aby przeczytały błędy które powstały przy próbie wysłania formularza ? Dzieje się to automatycznie ? Co do pierwszego sposobu to mogę określić za pomocą tagów aria że że element <a aria-required="true" aria-describedby="id-inputa" aria-invalid="true"> informuje o błędzie dla konkretnej kontrolki i za pomocą JS wpisywać tam błędy, kolejne pytanie czy jeżeli taki element nie zawiera aktualnie napisu z błędem to może być bez tagu display: none; ?

      Patrząc na to że aby przystosować stronę do wyświetlenia na urządzeniu o mniejszym ekranie będę musiał poprzestawiać elementy możliwe że z niektórych zresygnować więc najprawdopodobniej wszystkie błędy trafią do jednego pojemnika tagami CSS @media  nie jestem wstanie wpłynąć na kod JS więc uniwersalnym rozwiązaniem jest wykorzystanie jednego i drugiego sposobu tylko że za pomocą CSS @media nadanie odpowiednim pojemnikom tag display: none dla różnych szerokości ekranu ?

       Swoją drogą to w jaki sposób radzić sobie z identyfikowaniem elementów poprzez id tak aby patrząc na kod JS wiedzieć gdzie szukać elementu w kodzie html ? Ja kombinuję dodając do id elementu nazwę elementu głównego rodzica ( w tym wypadku okienka modal ) ale powoduje do dość długie nazwy... Czy jest na to rada aby nie powodować konfliktów ? Czy jeżeli w dwóch różnych okienkach dialogowych mam element o id="blabla" to czy istnieje coś typu $('.change-account-password #blabla') ?

 

Pozdrwiam !