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.

Skills: JavaScript, CSS, HTML5, HTML, Angular.js

See more: web design best practices 2016, web development best practices, web design best practices 2018, security in web applications best practices, mobile web design best practices, web scraping best practices, progressive web app best practices, mobile accessibility best practices, web api best practices c#, web development best practices, web design best practices checklist, web forms best practices, web design best practices 2017, web application best practices, web copy best practices, mobile web design best practices 2018, web performance best practices, core web api best practices, web typography best practices 2018, responsive web design best practices 2018

About the Employer:
( 0 reviews ) Carteret, United States

Project ID: #21702487

3 freelancers are bidding on average $127 for this job


Dear Client, We’re a team of experts with 4+ years of experience in Angular (1, 2, 4, 5, 6, 7), React, Node and Laravel. Listed below are our recent Node and Angular/ React project details 1)- Daceg: [login to view URL] More

$140 USD in 14 days
(23 Reviews)

************Responsibility + Endless Effort = YOUR Satisfaction + Excellent Quality!*********** I read your requirements carefully and I am 100% sure with 5+years experience that I can satisfy YOU with my work. My spe More

$140 USD in 7 days
(6 Reviews)

Hi there! Hope you're having a nice day. I read the description of your project and I'm really interested. To be honest I don't have that much experience developing SPA's with Angular, but as long as I read I underst More

$100 USD in 7 days
(0 Reviews)