When designing readable interface then we need to take care of the contrast ratio between background and foreground color. Below table explain the contrast ratio suggested under the WCAG guideline.
Showing posts with label Web Accessibility. Show all posts
Showing posts with label Web Accessibility. Show all posts
What is ARIA attribute?
Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.
It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants.
aria-label: aria-label is used to add a label with any input field or CTA that will be identified by screen reader devices. This is helpful when we have any such form field that doesn't have a label and we are using a placeholder to describe the field. e.g. aria-label="Submit the application form"
Hope this ARIA article helps you to apply accessibility to your website and makes your site or portal accessible for all users.
It supplements HTML so that interactions and widgets commonly used in applications can be passed to assistive technologies when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, form hints and error messages, live content updates, and more. ARIA was invented after HTML4, so does not validate in HTML4 or its XHTML variants.
What ARIA attributes to use on HTML elements?
aria-label: aria-label is used to add a label with any input field or CTA that will be identified by screen reader devices. This is helpful when we have any such form field that doesn't have a label and we are using a placeholder to describe the field. e.g. aria-label="Submit the application form"
aria-describedby
aria-required
aria-invalid
aria-hidden
aria-expended: aria-expended attribute is used with accordion where we set expended value true or false. When an accordion is open to read then set aria-expended="true" attribute otherwise aria-expended="false".
Hope this ARIA article helps you to apply accessibility to your website and makes your site or portal accessible for all users.
ARIA References
View the contrast ratio of a text element with Color Picker in Chrome developer tool
The contrast ratio is a color property of a display system, that defined as the ratio of the luminance of the brightest shade to that of the darkest shade that the system is capable of producing. In the web world example, a text is written on top of any background(background could be either color or an image).
The contrast ratio is very important for accessibility. Some people with low vision do not see areas as very bright or very dark. Everything tends to appear at about the same brightness, which makes it hard to distinguish outlines and edges. The Contrast ratio measures the difference in brightness between the foreground and background of the text. If a text has a low contrast ratio, then these low vision users may literally experience the site as a blank screen, and can not read the text that is written on web page.
Chrome Color Picker
Google Chrome developer tool is very helpful to investigate and fix the contrast ratio on a web page using the color picker option of style. The Color Picker can help you make sure that the text meets recommended contrast ratio levels:1. Open the developer tool in the Chrome browser. (using option right click on page > inspect or pressing F12 button)
2. Click the Elements tab in developer tool.
3. In the DOM Tree, select the text element that you want to inspect.
4. In the Styles pane, click the color square next to the element's color value.
5. Check the Contrast Ratio section of the Color Picker. One checkmark means that the element meets the minimum recommendation. Two checkmarks mean that it meets the enhanced recommendation.
6. Click the Contrast Ratio section to see more information. A line appears in the visual picker at the top of the Color Picker. If the current color meets recommendations, then anything on the same side of the line also meets recommendations. If the current color does not meet recommendations, then anything on the same side also does not meet recommendations.
This is how we fix the contrast ratio issue for low vision people and make a web page accessible for all human beings. Hope this helps you to debug the accessibility issue related to the contrast ratio. please feel free to let us know your experience and if you know any other way to debug and fix the contrast ratio on a web page. Thank you!
References:
Subscribe to:
Posts (Atom)