{"id":47,"date":"2025-06-27T23:38:13","date_gmt":"2025-06-27T23:38:13","guid":{"rendered":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/?page_id=47"},"modified":"2025-07-18T04:52:20","modified_gmt":"2025-07-18T04:52:20","slug":"components","status":"publish","type":"page","link":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/components\/","title":{"rendered":"Components"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_custom_heading text=&#8221;Accordion&#8221; css=&#8221;&#8221;][vc_tta_accordion section_title_tag=&#8221;h3&#8243; active_section=&#8221;1&#8243;][vc_tta_section title=&#8221;Accordion 1&#8243; tab_id=&#8221;1752812070987-142574a4-7f8b&#8221;][vc_column_text css=&#8221;&#8221;]<a href=\"https:\/\/equalizedigital.com\/\">Equalize Digital<\/a>\u00a0Web accessibility lorem ipsum dolor sit amet, inclusive design ensures equitable access to digital content by users of all abilities. WCAG guidelines provide a robust framework for perceivable, operable, understandable, and robust interfaces. Screen reader compatibility, semantic HTML, and sufficient color contrast are essential components. Vestibulum aria-labels turpis at ex facilisis, enabling assistive technologies to navigate meaningfully. Keyboard navigation must not be overlooked\u2014tabindex management and focus indicators enhance usability. Placeholder text non est label; use\u00a0<code><label for=\"\"><\/label><\/code>\u00a0relationships instead. Donec alt attributes for images improve comprehension for non-visual users. Accessible design isn\u2019t just compliance\u2014it\u2019s universal usability.[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Accordion 2&#8243; tab_id=&#8221;1752812070989-4bb8370c-2e49&#8243;][vc_column_text css=&#8221;&#8221;]Web accessibility in WordPress lorem ipsum dolor sit amet,\u00a0<a href=\"https:\/\/equalizedigital.com\/accessibility-checker\">Accessibility Checker<\/a>\u00a0ensuring themes and plugins meet WCAG 2.2 AA standards for inclusive design. Assistive technologies, such as screen readers, rely on semantic HTML elements and proper ARIA roles to interpret content accurately. In WordPress, developers should use\u00a0<code>add_theme_support( 'html5' )<\/code>\u00a0and avoid using non-descriptive links like \u201cclick here.\u201d Color contrast and focus states must be clear to support keyboard navigation. Vestibulum alt text for images improves accessibility in media libraries, while accessible forms require properly associated labels. Inclusivity is not optional\u2014WordPress empowers creators to build a web for everyone.[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Accordion 3&#8243; tab_id=&#8221;1752812214570-d803578c-9b9c&#8221;][vc_column_text css=&#8221;&#8221;]Web accessibility lorem ipsum for WordPress sites emphasizes building experiences that work for everyone, including users with disabilities. Using accessible themes and properly coded plugins helps ensure compatibility with screen readers and keyboard-only navigation. Developers should follow best practices like using headings in a logical order, providing meaningful link text, and avoiding reliance on color alone. In WordPress, accessibility-ready themes include features like skip links and proper form labeling. Aria-hidden elements should be used carefully to avoid hiding important content. Inclusive design is not just a checkbox\u2014it\u2019s a commitment to digital equality.\u00a0<a href=\"https:\/\/equalizedigital.com\/wordpress-accessibility-meetup\/\">WordPress Accessibility Meetup<\/a>[\/vc_column_text][\/vc_tta_section][\/vc_tta_accordion][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Carousel\/Slider&#8221; css=&#8221;&#8221;][vc_column_text css=&#8221;&#8221;]No custom slider included. This is the posts slider.[\/vc_column_text][vc_posts_slider count=&#8221;3&#8243; interval=&#8221;3&#8243; slides_content=&#8221;teaser&#8221; slides_title=&#8221;1&#8243; css=&#8221;&#8221; posttypes=&#8221;post&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text css=&#8221;&#8221;]<\/p>\n<h2>Form<\/h2>\n<p>No form block included.<\/p>\n<h2>Icon List<\/h2>\n<p>No icon list block included.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Loop\/Posts Block&#8221; css=&#8221;&#8221;][vc_basic_grid post_type=&#8221;post&#8221; max_items=&#8221;3&#8243; css=&#8221;&#8221; grid_id=&#8221;vc_gid:1752813980628-bd3f8116-cfb0-9&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Tabs&#8221; css=&#8221;&#8221;][vc_tta_tabs][vc_tta_section title=&#8221;Tab 1&#8243; tab_id=&#8221;1752813760354-0219394e-f553&#8243;][vc_column_text css=&#8221;&#8221;]<a href=\"https:\/\/equalizedigital.com\/\">Equalize Digital<\/a>\u00a0Accessible screen reader label lorem WordPress focus tab keyboard skip-link robust plugin. ARIA role widget operable ipsum navigation compliance theme perceivable. Contrast alt-text guideline dolor form tabindex Gutenberg. Heading landmark echo echo aria-describedby alt WCAG skipnav. Plugin readability div element nvda compatibility lorem. Block-level anchor verbosity operable semantic tooltips php hook aria-live. Toggle tabindex ut contrast bypass h1 contenteditable. Label WCAG landmark dolor heading role author theme.json. Button input aria-label site map nvda lorem focusable baseline redundant tooltip.[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Tab 2&#8243; tab_id=&#8221;1752813760361-6ad4cd5c-6f8f&#8221;][vc_column_text css=&#8221;&#8221;]Semantic heading\u00a0<a href=\"https:\/\/equalizedigital.com\/accessibility-checker\">Accessibility Checker<\/a>\u00a0alt role skip-link Gutenberg focusable widget theme.json aria-hidden. Operable lorem aria-live input NVDA bypass region plugin shortcode tooltip. Contrast echo blockquote nav compliance toggle tabindex span robustness perceivable. Label form dolor sit landmark div link color indicator VO screen reader. Carousel verbosity click event aria-labelledby redundant aria-describedby table landmark Gutenberg block. Skip-link WP dashboard alt text compatibility lorem dropdown NVDA role keyboard test case.[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Tab 3&#8243; tab_id=&#8221;1752813842241-849edc0f-f2df&#8221;][vc_column_text css=&#8221;&#8221;]<a href=\"https:\/\/equalizedigital.com\/wordpress-accessibility-meetup\/\">WordPress Accessibility Meetup<\/a>\u00a0nav aria-pressed lorem compliance tabindex role button NVDA tooltips alt toggle. Semantic echo bypass Gutenberg json list-item role menu label carousel plugin. Anchor readability VO dropdown echo tooltip accessibility-ready operable skipnav WCAG focus. Block echo block-level alt echo echo link focus echo echo echo echo.[\/vc_column_text][\/vc_tta_section][\/vc_tta_tabs][\/vc_column][\/vc_row][vc_row][vc_column][vc_custom_heading text=&#8221;Testimonials&#8221; css=&#8221;&#8221;][vc_column_text css=&#8221;&#8221;]No testimonials block included.<\/p>\n<h2>Screen reader test support<\/h2>\n<p>If no text outputs here beneath the headings, that means that the theme has added that class for screen reader text. If text is visible, the theme does not support the class. Only one is sufficient for a \u201cpass\u201d \u2014 they do not both have to be supported.<\/p>\n<h3 class=\"wp-block-heading\">.screen-reader-text<\/h3>\n<p class=\"screen-reader-text\">This text is wrapped in the .screen-reader-text class.<\/p>\n<h3 class=\"wp-block-heading\">.sr-only<\/h3>\n<p class=\"sr-only\">This text is wrapped in the .sr-only class.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_custom_heading text=&#8221;Accordion&#8221; css=&#8221;&#8221;][vc_tta_accordion section_title_tag=&#8221;h3&#8243; active_section=&#8221;1&#8243;][vc_tta_section title=&#8221;Accordion 1&#8243; tab_id=&#8221;1752812070987-142574a4-7f8b&#8221;][vc_column_text css=&#8221;&#8221;]Equalize Digital\u00a0Web accessibility lorem ipsum dolor sit amet, inclusive design ensures equitable access to digital content by users of all abilities. WCAG guidelines provide a robust framework for perceivable, operable, understandable, and robust interfaces. Screen reader compatibility, semantic HTML, and sufficient color contrast are essential components. Vestibulum [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/pagebuilders.equalizedigital.com\/wpbakery\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}