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.

Compétences : Javascript, CSS, HTML5, HTML, Angular.js

en voir plus : web design best practices 2016, asp.net 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, asp.net 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, asp.net core web api best practices, web typography best practices 2018, responsive web design best practices 2018

Concernant l'employeur :
( 0 commentaires ) Carteret, United States

Nº du projet : #21702487

2 freelance font une offre moyenne de $140 pour ce travail


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] Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 14 jours
(21 Commentaires)

************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 Plus

%bids___i_sum_sub_35% %project_currencyDetails_sign_sub_36% USD en 7 jours
(6 Commentaires)