onClick Event Example

onClick: Open new window example (Accessible)

• The onclick event handler is directly on the a element and opens the "World Wide Web Consortium" website in a new window.
• This technique is compatible with assistive technologies because the technology knows to simulate the onClick event since it is on the same node as the a element.
• To make the link part of the TAB navigation in the browser, use the href attribute and sett the attribute value to "javascript:void(0)".

HTML Example

HTML Source Code

onClick: Parent element problem (Inaccessible)

• The onclick event handler is on a parent element and the event opens the "World Wide Web Consortium" website in a new window.
• This technique is not compatible with assistive technologies, due to the the onClick event being a parent node of the link. Since the onclick event is not on the link node, assistive technologies do not know to simulate the event.
• To make the link part of the TAB navigation in the browser, use the href attribute and set the attribute value to "javascript:void(0)".

HTML Example

HTML Source Code

onClick: Tabindex problems (Inaccessible)

• The onclick event handler is directly on the a element and opens the "World Wide Web Consortium" website in a new window.
• To make the link part of the TAB navigation in the browser, the tabindex attribute is set to "0" and the href attribute is not defined.
• This technique is not compatible with assistive technologies, due to the use of the tabindex attribute to make the link part of the TAB order of the page instead of the href attribute.

HTML Example

HTML Source Code

CSS Source Code