Accessibility in CSS

1. For visually impaired : The background color and content color should have a suitable contrast ratio , so that it is easier to read for majority of users , including people with visual impairment of various types . We can apply different color codes to the background and content ( try to make sure that they are not neighbors in the color wheel) and we can also use hsl() to give them different hue,saturation and lightness .

2. For keyboard-only users : We can use accesskey="" to any element and give it any value on the keyboard , which helps the keyboard user to quickly access any specific content . We can also use tabindex="" ( with values ranging from -1,0,1,2,3....) to assign the order in which the tab key will shift to the content . -1 means that the content is accessible but not by keyboard , 0 means the content is reached after covering all the positive values provided to other elements . 1 means the content has highest priority , followed by 2 and then other positive numbers .

3.For various device users : Media query , this is the most important technique that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site.

Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.

Here's an example of a media query that returns the content when the device's width is less than or equal to 100px:

@media (max-width: 100px) { / CSS Rules / } and the following media query returns the content when the device's height is more than or equal to 350px:

@media (min-height: 350px) { / CSS Rules / }

Hope this article was informative . Thank you for reading .