What is the difference between native and custom widgets?

Question

While reading up on WCAG, I noticed the terms "native widgets" and "custom widgets". What's the difference?

Answer

First, let's define a widget. A widget is simply put, an interactive element. A widget displays information and expects the user to act in some way. A few examples of widgets are accordions, buttons, links, checkboxes, sliders, etc.

Native widgets are widgets that use defined HTML5 elements, such as <button>, <input>, <select> or <textarea>.

Custom widgets are widgets that are built using <span> or <div> elements, or where a native element is used in a way other than it's defined spec. An example would be a <button> element being used as a link. Since it no longer functions as a button, it is considered a custom widget (it would also need the role="link" attribute and an aria-label attribute in order to be accessible).

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.