Implement Web Accessibility best practices

Imefungwa Ilichapishwa Miaka 4 iliyopita Kulipwa wakati wa kujifungua
Imefungwa Kulipwa wakati wa kujifungua

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.

AngularJS JavaScript HTML CSS HTML5

Kitambulisho cha Mradi: #21378304

Kuhusu mradi

7 mapendekezo Mradi wa mbali Ipo mtandaoni %project.latestActivity_relativeTime|badilisha%

7 wafanyakazi huru wanazabuni wastani wa $156 kwa kazi hii

liveexperts123

Hi there, I have read your project description and i'm confident i can do this project for you perfectly.I still have a few questions. please leave a message on my chat so we can discuss the budget and deadline of the Zaidi

$250 USD kwa siku 3
(Maoni 5)
4.6
TopDesigner315

Hello :) Thanks for your job posting. I saw your description carefully. I am a Senior web Developer who have 8+ years of experiences. My skills are Html5,CSS,SCSS, Bootstrap,Javascript,Jquery,MySql,PHP and AngularJS . Zaidi

$90 USD kwa siku 3
(Maoni 23)
4.8
AkashW

Hi, Greeting of the day, We can fulfill all your needs regarding the web and mobile application development projects. We have a team of expert developers and designers which can work on your project as per your list Zaidi

$140 USD kwa siku 25
(Maoni 10)
3.4
diazpereralucas

Hello! I've done a lot of accessibility work before, and got experience with both, NVDA and JAWS. The exact amount of days it can take will depend in the amount and complexity of the user flows, that's why I set 10 day Zaidi

$160 USD kwa siku 7
(Maoni 0)
0.0