What is the best accessible element for open/close a modal?

Putting empty href attribute in anchor element is not good practice of accessibility friendly. Hence, button is the right element to handle the open and close a modal or dialog. 

e.g. <a href="#">X</a> // not good

<button id="modal-toggle">X</button> // right way to create

Now, create a handler function to handle the open and close with button id.

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.

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

• ARIA Accessibility
• List of ARAI attributes

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.

Color Picker option in Chrome dev tool

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. 

Incomplete contrast ratio

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.

Correct contrast ratio 4.5:1

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:

1. Ensuring that a contrast ratio of at least 4.5:1 exists between text and background

2. Accessibility features reference