{"id":5519,"date":"2020-12-21T11:06:41","date_gmt":"2020-12-21T11:06:41","guid":{"rendered":"https:\/\/ictaccess.mada.org.qa\/?page_id=5519"},"modified":"2026-04-05T06:39:32","modified_gmt":"2026-04-05T06:39:32","slug":"madas-widgets","status":"publish","type":"page","link":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/","title":{"rendered":"Mada\u2019s Widgets"},"content":{"rendered":"
\n

User Interface<\/h2>\n<\/div>\n

The UI<\/abbr> web component library provides a wide range of accessible, ready-to-use components for web developers and UX<\/abbr>\/UI<\/abbr> designers. Using this library helps make website content accessible to a broader range of users, including individuals who are blind or have low vision, are deaf or hard of hearing, have limited mobility, speech disabilities, photosensitivity, learning disabilities, cognitive limitations, or a combination of these.<\/p>\n

These components also include guidance on how to design and implement accessible web interfaces, following best practices from W3C<\/abbr> and WCAG<\/abbr> 2.2. They are designed to ensure accessibility across desktops, laptops, tablets, and mobile devices.<\/p>\n

Developers are also encouraged to build their own components by following the provided accessibility guidelines, roles, and best practices to ensure inclusive user experiences.<\/p>\n

Guide to Integrating an Accessible reCAPTCHA (WCAG 2.2)<\/strong><\/a><\/h3>\n

Guide to Building an Accessible Carousel Widget (WCAG 2.2)<\/strong><\/a><\/h3>\n

Guide to Building an Accessible Website Form Widget with Error Validation (WCAG 2.2)<\/strong><\/a><\/h3>\n

Guide to Building an Accessible Main Menu Widget (WCAG 2.2)<\/strong><\/a><\/h3>\n

Guide to Building an Accessible Modal Dialog Widget (WCAG 2.2)<\/strong><\/a><\/h3>\n

Guide to Building an Accessible Tabs Widget (WCAG 2.2)<\/strong><\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"
\nUser Interface The UI web component library provides a wide range of accessible, ready-to-use components for web developers and UX\/UI designers. Using this library helps make website content accessible to a broader range of users, including individuals who are blind…\n<\/div>\n
Continue reading “Mada\u2019s Widgets”<\/span>…<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/sidebar.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5519","page","type-page","status-publish","hentry","entry"],"acf":[],"yoast_head":"\nMada\u2019s Widgets - Mada Digital Accessibility Portal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mada\u2019s Widgets - Mada Digital Accessibility Portal\" \/>\n<meta property=\"og:description\" content=\"User Interface The UI web component library provides a wide range of accessible, ready-to-use components for web developers and UX\/UI designers. Using this library helps make website content accessible to a broader range of users, including individuals who are blind… Continue reading “Mada\u2019s Widgets”…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Mada Digital Accessibility Portal\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-05T06:39:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/madas-widgets\\\/\",\"url\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/madas-widgets\\\/\",\"name\":\"Mada\u2019s Widgets - Mada Digital Accessibility Portal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#website\"},\"datePublished\":\"2020-12-21T11:06:41+00:00\",\"dateModified\":\"2026-04-05T06:39:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/madas-widgets\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/madas-widgets\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/madas-widgets\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mada\u2019s Widgets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#website\",\"url\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/\",\"name\":\"Mada Digital Accessibility Portal\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#organization\",\"name\":\"Mada Digital Accessibility Portal\",\"url\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/MADA-WEBSITE-LEVEL-2-06.png\",\"contentUrl\":\"\\\/wp-content\\\/uploads\\\/2021\\\/09\\\/MADA-WEBSITE-LEVEL-2-06.png\",\"width\":2625,\"height\":816,\"caption\":\"Mada Digital Accessibility Portal\"},\"image\":{\"@id\":\"https:\\\/\\\/ictaccess.mada.org.qa\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mada\u2019s Widgets - Mada Digital Accessibility Portal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/","og_locale":"en_US","og_type":"article","og_title":"Mada\u2019s Widgets - Mada Digital Accessibility Portal","og_description":"User Interface The UI web component library provides a wide range of accessible, ready-to-use components for web developers and UX\/UI designers. Using this library helps make website content accessible to a broader range of users, including individuals who are blind… Continue reading “Mada\u2019s Widgets”…","og_url":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/","og_site_name":"Mada Digital Accessibility Portal","article_modified_time":"2026-04-05T06:39:32+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/","url":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/","name":"Mada\u2019s Widgets - Mada Digital Accessibility Portal","isPartOf":{"@id":"https:\/\/ictaccess.mada.org.qa\/#website"},"datePublished":"2020-12-21T11:06:41+00:00","dateModified":"2026-04-05T06:39:32+00:00","breadcrumb":{"@id":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ictaccess.mada.org.qa\/en\/madas-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ictaccess.mada.org.qa\/en\/"},{"@type":"ListItem","position":2,"name":"Mada\u2019s Widgets"}]},{"@type":"WebSite","@id":"https:\/\/ictaccess.mada.org.qa\/#website","url":"https:\/\/ictaccess.mada.org.qa\/","name":"Mada Digital Accessibility Portal","description":"","publisher":{"@id":"https:\/\/ictaccess.mada.org.qa\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ictaccess.mada.org.qa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ictaccess.mada.org.qa\/#organization","name":"Mada Digital Accessibility Portal","url":"https:\/\/ictaccess.mada.org.qa\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ictaccess.mada.org.qa\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2021\/09\/MADA-WEBSITE-LEVEL-2-06.png","contentUrl":"\/wp-content\/uploads\/2021\/09\/MADA-WEBSITE-LEVEL-2-06.png","width":2625,"height":816,"caption":"Mada Digital Accessibility Portal"},"image":{"@id":"https:\/\/ictaccess.mada.org.qa\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/pages\/5519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/comments?post=5519"}],"version-history":[{"count":19,"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/pages\/5519\/revisions"}],"predecessor-version":[{"id":7605,"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/pages\/5519\/revisions\/7605"}],"wp:attachment":[{"href":"https:\/\/ictaccess.mada.org.qa\/en\/wp-json\/wp\/v2\/media?parent=5519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}