Sebastian Sadach odpowiedział(a) w temacie 'WCAG 2.0 AA vs NVDA - Angular Material' na forum. 12-01-2018

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>

Czytaj więcej...

Sebastian Sadach utworzył(a) nowy temat ' WCAG 2.0 AA vs NVDA - Angular Material' na forum. 11-01-2018

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?

Czytaj więcej...

Panel Użytkownika

Zapamiętaj mnie

Zarejestruj się

Filmy o NVDA

Pokaż wszystkie filmy

Menu Klub