× Dyskusje na tematy związane bezpośrednio z serwisem Polskiej Społeczności NVDA. Ogłoszenia, propozycje zmian, sugestie odnośnie rozwoju serwisu.

Pytanie WCAG 2.0 AA vs NVDA - Angular Material

2018/01/11 09:07 - 2018/01/11 11:02 #1 przez Sebastian Sadach
Dzień dobry,
Piszę do Was w sprawie testów aplikacji webowej pod kątem zgodności z WCAG 2.0 AA. Developer przygotowuje kod dla aplikacji w Angularze, który ma spełniać standardy WCAG, aplikacja ma współpracować z NVDA - mam tutaj na myśli poprawne rozpoznawanie obiektów i tekstu. Problem jednak stanowi wielokrotne czytanie przez lektora NVDA wskazanego pola, poniżej fragment kodu dla obiektu typu: button

<button _ngcontent-c33="" class="mat-raised-button mat-primary" color="primary" mat-raised-button="" title="Dodaj nauczyciela"><span class="mat-button-wrapper">dodaj nauczyciela</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>

Buton jest rozpoznawany przez NVDA, wyrażenie „Dodaj nauczyciela” przeczytane jest „Dodaj nauczyciela, przycisk, dodaj nauczyciela”

Testy prowadzimy przy użyciu:
- NVDA, wersja 2017.4 – ustawienia fabryczne,
- przeglądarka chrome, wersja 63.0.3239.132 (Oficjalna wersja) (64-bitowa)

Nie chcemy mocno grzebać w ustawieniach NVDA, raczej preferujemy ustawienia fabryczne - docelowo chodzi nam o prawidłowy kod aplikacji.
Czy jesteście w stanie pomóc? Podpowiedzieć od czego zależy podwójne czytanie nazw obiektów?

Proszę Zaloguj lub Zarejestruj się, aby dołączyć do konwersacji.

2018/01/11 21:39 #2 przez Patryk Doering
Dobry wieczór,
NVDA w poniższym przykładzie oznajmia obiekt typu BUTTON (przycisk) w następujący sposób:

- odczytuje treść atrybutu TITLE "Dodaj nauczyciela",
- oznajmia typ wskazywanego obiektu "przycisk",
- odczytuje treść między znacznikami <button></button> "Dodaj nauczyciela".

Atrybut TITLE nie wnosi żadnej dodatkowej informacji, nie jest tu konieczny. Wystarczy zastosować poniższą składnie, a czytniki ekranowe w prawidłowy sposób będą prezentowały wskazywany obiekt typu BUTTON np. "przycisk, Dodaj nauczyciela". Wspomaganie się dodatkowymi atrybutami jest konieczne w sytuacji, gdy nie ma opisu między znacznikami <button></button>.

<button _ngcontent-c33="" class="mat-raised-button mat-primary" color="primary" mat-raised-button=""><span class="mat-button-wrapper">dodaj nauczyciela</span><div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay"></div></button>

Pozdrawiam słonecznie
Patryk Doering

Proszę Zaloguj lub Zarejestruj się, aby dołączyć do konwersacji.

2018/01/12 08:25 #3 przez Sebastian Sadach
Bardzo dziękuję - to sporo wyjaśnia, a jednocześnie wyznacza kierunek w jakim programista ma iść w celu poprawnego kodowania.
Jeśli mogę jeszcze prosić o podobną analizę dla pola typu input, jest to pole do wpisywania tekstu w ramach wypełnienia formularza. Wskazane pole jest czytane przez NVDA: "Pełna nazwa podmiotu, pole edycji, wymagane, pełna nazwa podmiotu, pusta"

w kodzie określenie "Pełna nazwa podmiotu" pojawia się wielokrotnie, np w klasie mat-input-placeholder, ng-reflect-placeholder,

poniżej kod dla tego obiektu:

<mat-form-field _ngcontent-c17="" class="col-12 col-md-6 col-lg-9 mat-input-container mat-form-field ng-tns-c18-10 mat-form-field-type-mat-input mat-form-field-can-float mat-primary ng-pristine ng-invalid mat-input-invalid mat-form-field-invalid ng-touched"><div class="mat-input-wrapper mat-form-field-wrapper"><div class="mat-input-flex mat-form-field-flex"><!--bindings={
"ng-reflect-ng-if": "0"
}--><div class="mat-input-infix mat-form-field-infix">
<input _ngcontent-c17="" class="mat-input-element mat-form-field-autofill-control ng-pristine ng-invalid ng-touched" formcontrolname="Nazwa" matinput="" placeholder="Pełna nazwa podmiotu" required="" ng-reflect-required="" ng-reflect-name="Nazwa" ng-reflect-placeholder="Pełna nazwa podmiotu" id="mat-input-0" aria-invalid="true" aria-describedby="mat-error-1">

<span class="mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper"><!--bindings={
"ng-reflect-ng-if": "true"
}--><label class="mat-input-placeholder mat-form-field-placeholder ng-tns-c18-10 mat-empty mat-form-field-empty" for="mat-input-0" aria-owns="mat-input-0">Pełna nazwa podmiotu <!--bindings={
"ng-reflect-ng-if": "true"
}--><span aria-hidden="true" class="mat-placeholder-required mat-form-field-required-marker ng-tns-c18-10">*</span></label></span></div><!--bindings={
"ng-reflect-ng-if": "0"
}--></div><div class="mat-input-underline mat-form-field-underline"><span class="mat-input-ripple mat-form-field-ripple"></span></div><div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper" ng-reflect-ng-switch="error"><!--bindings={
"ng-reflect-ng-switch-case": "error"
}--><div class="ng-tns-c18-10 ng-trigger ng-trigger-transitionMessages" style="opacity: 1; transform: translateY(0%);"><mat-error _ngcontent-c17="" class="mat-error" role="alert" ng-reflect-app-control-errors="[object Object]" id="mat-error-1">Pole wymagane.</mat-error></div><!--bindings={
"ng-reflect-ng-switch-case": "hint"
}--></div></div></mat-form-field>

Proszę Zaloguj lub Zarejestruj się, aby dołączyć do konwersacji.

2018/01/12 15:15 - 2018/01/12 15:19 #4 przez Patryk Doering
W tym miejscu należy zauważyć iż NVDA posiada różne tryby przeglądu (prezentacji treści). Między trybem przeglądu/czytania i formularzy przełączamy się przy użyciu skrótu klawiszowego NVDA+Spacja.

- W trybie przeglądu/czytania przy użyciu klawiszy strzałek możemy przeczytać cały dokument. W przypadku formularzy odczytywany jest zarówno opis znajdujący się w okolicy pola edycyjnego (i nie tylko edycyjnego( jak i również etykieta czy rodzaj obiektu i inne.

- Przełączając się do trybu formularzy, przy użyciu klawisza TAB przechodzimy bezpośrednio po poszczególnych polach formularza. Odczytywane są etykiety, przez czytnik ekranu jest przekazywana informacja o typie wskazywanego obiektu (np. pole edycyjne, lista rozwijana, przycisk opcji etc). Czytnik ekranu informuje użytkownika czy pole jest wymagane czy nie. Prawidłowo stworzony walidator formularza jest w stanie w trybie odczytu formularzy poinformować użytkownika o ewentualnych błędach w formularzu.

W podesłanym przykładzie pola edycyjnego czytnik ekranu NVDA działa następująco:

- odczytuje treść znacznika LABEL "Pełna nazwa podmiotu",
- oznajmia typ wskazywanego obiektu "pole edycji",
- oznajmia czy walidator formularza wymaga uzupełnienia pola "wymagane",
- odczytuje treść wyświetlaną obok pola IMPUT "Pełna nazwa podmiotu", informację duplikowaną dla etykiety LABEL,
- jeśli pole edycyjne nie zostało uzupełnione NVDA sygnalizuje to mówiąc "pusta", jeśli w polu została wpisana jakaś treść to zostanie ona odczytana.

NVDA 2 razy w tym przypadku odczytuje "Pełna nazwa podmiotu", gdyż 2 razy informacja taka jest przekazywana do etykiety LABEL. Pierwszy raz jako opis etykiety pola. Drugi raz jako informacja o konieczności uzupełnienia pola. Wystarczy pozostawić jej opis "Pełna nazwa podmiotu", a dodatkowo do znacznika LABEL przekazywać wyłącznie informację "Pole wymagane". Nie potrzebujemy tu duplikować ponownie tekstu "Pełna nazwa podmiotu", odpowiedni opis etykiety, już tu się znalazł. W takiej sytuacji NVDA w trybie formularzy odczyta obiekt jako "Pełna nazwa podmiotu, pole edycji, wymagane, pusta".

Poniżej odnośniki do dwóch stron w przejrzysty sposób opisujących zasady tworzenia dostępnych formularzy. Formularzy prawidłowo współgrających z czytnikami ekranu.

Dostępne formularze – część 1: etykiety i pola:
- internet-bez-barier.com/...czesc-1-etykiety-i-pola/

Dostępne formularze – część 2: komunikaty o błędach:
- internet-bez-barier.com/...-2-komunikaty-o-bledach/

Pozdrawiam słonecznie
Patryk Doering

Proszę Zaloguj lub Zarejestruj się, aby dołączyć do konwersacji.

Moderatorzy: Patryk Doering

Filmy o NVDA

Pokaż wszystkie filmy