Accessibility issues in Dev Portal UI - Part 1

[kcbabo]

After performing an Accessibility review of the Dev Portal UI, the following areas have been identified as quick wins to be tackled as a group:

• Dynamic page title
  • http://portal.demo.solo.io/apis/ - "E-commerce Portal - APIs"
  • http://portal.demo.solo.io/apis/gloo-system/petstore?v=v1 - "E-commerce Portal - petstore v1"
  • http://portal.demo.solo.io/apis/gloo-system/petstore?v=checked - "E-commerce Portal - petstore checked"
  • http://portal.demo.solo.io/keys/ - "E-commerce Portal - API Keys"
• Missing <main> tag on pages
• ARIA tag usage
• Improper <nav> element structure
• Alt text for all images and SVGs
• Missing headings
  • All pages need at least 1 <h1> tag, we can swap whatever div contains the page title to use a h1
• Non-unique ID attributes
• Missing labels
• Missing <select> name
• Missing <button> inner text
• Missing required indicators on form
  • Users reported this on the Client Credentials form
• <div> usage as a button