Notes from Accessibility Workshop from Enterprise NG 2020

Here are some of the interesting points from the Build for Accessibility with Angular workshop by Martine Dowden and Michael Dowden

Labels are only for form fields. Do not use labels anywhere else
Wave can be used to see the page structure

2020-11-23_9-17-59

AXE provides detailed information and links about the problem and possible resolutions

Use unit tests that test for accessibility-related attributes like roles and aria labels

it('icon butttons should have aria labels', ( ) => {
 const iconButtons = fixture.debugElement.nativeElement.querySelectorAlK'button[mat-icon-button]'); 
 const missingLabels => Array.from(iconButtons).some((button: HTMLElement) => ¡button.getAttribute('aria-label'); 
 expect(missingLabels).toBeFalsy();
});

it('mat list should have a role of list', () => {
 const list = fixture.debugElement.nativeElement.querySelector('mat-list'); 
 expect(list.getAttribute('role*)).toEqual('list');
});

Prefer the use of the attribute type="submit" for the buttons in the form instead of calling the method to submit from the click handler

image (1)

Prefer to enable/disable instead of showing/hiding when it is needed to show data depending on a condition. This helps to avoid confusing the user and having UI jumping around.
Links are links. Buttons are buttons. Div and spans are not buttons nor links. Divs and spans miss some accessibility features for example they are not focusable and cannot be disabled.
When having a link that is only an icon, use the aria-hidden="true" and add a label

<a href="profile" 
   aria-label="Profile">
 <i aria-hidden="true"
    classss="material-icons">
   Face
 </i>
</a>

You should always have the alt attribute on images, however, it can be blank. The alt should describe what the image is trying to convey.
Decorative images can have an empty alt attribute or have a role="presentation"
In alerts or notifications use role="alert", also use aria-live="polite" for status notifcaions and aria-live="assertive" for something that requires attention

Chrome Developer Tools

There is an option for accessibility in the "Audits" tab
There is an accessibility tab in Chrome that contains the accessibility tree, the ARIA attributes, and the accessibility-related computed attributes

Angular Material

Make sure that the custom color pass the contrast

2020-11-23_9-17-23

Notes from Accessibility Workshop from Enterprise NG 2020

Chrome Developer Tools

Angular Material

Links