JavaScript Tricky concept
- how to find the largest number in array
to find the largest number from array ( which stores group of elements in one single variable) you first need to make a array with the items you want. then you put a for loop for it. add a if condition too.
2. Remove the duplicate item from the array
you can sometimes have a item repeated again maybe it was an accident but the question is how to remove this. it’s quite simple first make a array the you want to the duplicate of then make another one but this time it will be empty array. finally make a for loop keeping in mind that the empty array you made, you will keep pushing the elements inside it also checking if it is already present then you will not push again.
3. Accessibility
what is a web accessibility? it is the design and the creation of the website is used by everyone. it is very important as it helps to design the creation to aid a person with a disability interpret in the website. usually high JavaScript programmers provide full accessibility in their website.
4. semantic html
semantic html is a markup in html which shows what the tag defines the meaning to the web page than just the appearance in the browser eg a <p> defines it is a paragraph tag people can understand what it means and also browsers know how yo use them.
on the other hand there are tags like <b> which is used to make a text bold and <i> it is used make text italic. they are semantic tag as they do not define the meaning but it only show the appearance.
5. accessibly form
to make a form accessible we need to add labeling, we got the html controls like <input> and <textarea> which needs descriptive labeling so that it allows the people with visual impaired to be viewed in screen readers.
some of the resources that can help us do this is:
- the W3C
- WebAIM
- the Paseíllo group
6. focus control
it is important for your browser to have the functions so that it can be controlled only by keyboard. webAIM can help you do that very easily.
Another one is called keyboard focus which is also very important as it refers to the key that is now currently being focused from the DOM to accept any input from the keyboard.
7. mechanisms to skip the navigation links
you can try providing a mechanisms to skip past those navigation section which can help the accessibility and navigation of the keyboard increases.
skip navigation are hidden links which is only appeared when a keyboard interacts with the webpage. it is actually very easy to apply this with just internal page anchors and few stylings.
8. Programmatically managing focus
now you know how keyboard focus but in react is not the same, as our react application continuously modifies the html DOM which helps is in the process the keyboard focus ends up bring lost or focus to something else.
to fix this problem we will need to programmatically put the focus back to the keyboard. in react to like eg. you can start by resetting the keyboard to to a button that opened a modal window after that modal window is closed.
9.Mouse and pointer events
you have to make sure that all the functionality that is passed through mouse is also passed through keyboard as if it is not done then keyboard user can not be able to use your application.
click events can work perfectly fine with mouse but when you try to use it with keyboard it give broken functionality. such functionality can also be achieved using appropriate event handlers such as onFocus and onBlur.
10. More Complex Widgets
if you are making a complex user experience that does not mean it have to be less accessible. accessibility is made mostly using html code as much as possible. so in a complex user experience accessibility can be done easily.
ARIA Roles and ARIA states and properties, these will help us to make it accessible, functional react components as it has many html attributes which are fully supported by JSX
