Implement Web Accessibility best practices -- 2

Need to ensure that people with disabilities who uses screen readers such as NVDA or JAWS can access the website without any issues. It’s an angular JS e-commerce web application, where their are 4-5 user flows that needs to be fixed or accessibility practices needs to be implemented. The specified user flows functionality works but using a screen reader it doesn’t convey clearly what user needs to do and it breaks. It is similar to Amazon website as an example, which helps you to visualize how the application would be and what needs to be done. Most important, it’s a small internal application where I need an expert opinion and help in implementing the best practices. Please disregard the project offer if you are looking to work only on big projects. The user flows include 1) account creation 2) order submission, etc Here are some of the examples <header>, <nav>, <main>, <aside>, <footer>, etc.: use HTML5 semantic tags; remember to use the aria-labelledby attribute to set a meaningful accessible name to non-unique components. • roles: linked to the point above, use the proper role for each element. • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: use headings for the topics of the page or sections. The heading levels are fundamental for SR users, that are also able to navigate the content only by headings to quickly identify the topics of the pages. For this reason, headings levels cannot be skipped, must be nested properly and should be used in the proper way, and not for UI reasons. To provide the same information to SR users you must use semantic element and meaningful labels. Moreover, sometime the headings are visually implicit thanks to the context but could be very useful for AT users, so consider to add SR-only headings to provide the necessary context (for example use a heading like "Footer" to group the footer section). • <a> and <button>: remember that link elements are used to jump the user from a page to another one, buttons are used to activate a control. • <ul>, <ol>, <li>: use unordered/ordered lists and list items to inform the user about the structure of list components providing boundaries for each block. • aria-label, aria-labelledby and aria-describedby: use those attributes to provide meaningful accessible name and description when the text displayed is not sufficient. • aria-haspopup, aria-expanded, aria-controls, etc.: use those attributes to inform the user and allowing him/her to predict the behaviour of a functionality.