[UI/UX] APIM 3 General Accessibility

[tmkasun]

Description:
We need to consider the accessibility best practices mentioned in

http://www.w3.org/TR/wai-aria-practices/

when developing web apps for APIM products.

Since we are using Material UI for building the React SPA apps, MUI already supports ARIA practices and enforce it in some components.

Further, we need to follow the guidelines given in the React Documentation for adapting the aria practices.

WCAG21 reference

• https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_overview&levels=aaa

Affected Product Version:

• APIM 3.x

[tmkasun]

We could use react-a11y to identify the missing ARIA practices at the development time.

We could use Google LightHouse command line tool and integrate it with the product build to get the accessibility coverage report or we could use @dakshika's pa11y-full-report tool to get a more descriptive report

[tmkasun]

For the comparison,

APIM 3.x accessibility report from Google LightHouse

accessibility report for latest WUM updated APIM 2.7

[tmkasun]

Using react-axe article

[tmkasun]

Automating lighthouse report with puppeteer: Sample repo

[erangatl]

Created the following issues to track
#8390
#8386
#8383
#8380
#8379
#8374
#8370
#8342
#8143
#8129
#8102
#8101
#8086
#7988

[erangatl]

Following doc is created as a guideline
https://docs.google.com/document/d/10Y-vuV458Q70Qo9N-RN5QXegbOeDl_Ox-7ZTBcO4b4I/edit?usp=sharing

[tmkasun]

@erangatl , Above doc, is not publicly accessible? Shall we add it to wikis ?

[erangatl]

@erangatl , Above doc, is not publicly accessible? Shall we add it to wikis ?

The plan was to update the HIG, shall we update all the design-related stuff in HIG?

[erangatl]

React A11y library is deprecated.

[erangatl]

axe - Web Accessibility Testing
https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd

[erangatl]

Jest axe article
jest-axe

[rmsamitha]

Closing the issue as this is older than 3 years. Please reopen if the issue is valid still.