Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 13, 2025 at 11:31 am #1487955
    amollde

    Hi Experts,

    I checked my homepage now with the keyboard capabilities for the WCAG Compliance, and I stumble over a hidden picture used presumable by aour code:

    <html lang=”de” class=”html_stretched responsive av-preloader-disabled html_header_top html_logo_left html_main_nav_header html_menu_right html_slim html_header_sticky_disabled html_header_shrinking_disabled html_header_transparency html_mobile_menu_tablet html_header_searchicon_disabled html_content_align_center html_header_unstick_top html_header_stretch html_elegant-blog html_burger_menu html_av-overlay-side html_av-overlay-side-minimal html_av-submenu-noclone html_entry_id_1037 av-cookies-consent-show-message-bar av-cookies-cookie-consent-enabled av-cookies-needs-opt-in av-cookies-user-needs-accept-button avia-cookie-consent-modal-show-immediately avia-cookie-reload-no-accept avia-cookie-reload-accept avia-cookie-check-browser-settings av-no-preview av-default-lightbox html_burger_menu_active av-cookies-session-refused avia_desktop js_active avia_transform avia_transform3d avia-mozilla avia-mozilla-141 no-touch-device pointer-device-fine pointer-device-coarse html_av-submenu-visible” style=”margin-left: 380px;”><head><meta charset=”UTF-8″><meta name=”robots” content=”index, follow”>
    <!– mobile setting–>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <!– Scripts/CSS and wp_head hook–>
    <title>
    Name of the Website
    </title><meta name=”robots” content=”max-image-preview:large”><style>
    img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }
    </style><script type=”text/javascript”>

    When using the Tab Key on the homepage, it jumps to the accessibility settings first (thats fine) and then as third jumps into the header at the language setting, but this is hidden (and if WP accessibility plugin is used, it cannot circle it, too) so it looks like the Tab is going to nowhere.

    August 15, 2025 at 6:13 pm #1488110
    envatojlc

    Is it possible to do a text overlay on an image using the “Image CSS Class” field in the Classic Editor? Currently, I am using the Caption below feature.

    August 15, 2025 at 6:13 pm #1488111
    envatojlc

    If I use the Advanced Layout Editor does that increase page loading?

    August 20, 2025 at 10:01 am #1488290
    amollde

    Dear Enfold Experts, I am not too sure what Envatojlc’s comments have to do with my original question but this has not been addressed so far anyhow, so might have slipped through.

    The situation is the following:
    a) WP Accessibility Plugin activated
    b) small green border configured in WP Accessibility to mark where the Keyboard Tab key jumps to for all Buttons / links that can be addressed via Keyboard
    c) Entering the Home Page
    d) Press Tab Key once => jumps to change contrast button from Accessibility Plugin, green border, all fine. 2nd time Tab key pressed => jumps to change font size from Accessibility Plugin, green border, all fine. 3rd Time Tab pressed => jumps to top of page, no button visible, no green border, looks like a jump into nowhere, totally unclear where the cursor is.

    When checking this with the Firefox Inbuild Dev Tool for accessibility it states for the Header Banner: clickable elements need to be interactive and focused. So there is something in the Header generation that fails. Can you please check? And of course I would like a future feature (similar to the link color configuration in the theme) to configure the Keyboard accessible elements Coloring or Settings in the Enfold theme instead of outsourcing that to WP Accessibility.

    thanks Anja

    September 1, 2025 at 6:07 pm #1488832
    Yigit

    Hi Anja,

    I’m sorry for the delayed response.

    I noted your feature request internally.

    For now, please add the following code to the Quick CSS field in Enfold theme options > General Styling:

    
.logo:focus-within {
    outline: 2px solid #00FF00;
    outline-offset: 2px;
}

    Please let us know if you have any further questions.

    Best regards,
    Yigit

    September 3, 2025 at 10:54 am #1488894
    Guenni007

    by the way – there is a possiblity to have on content an attribute f.e.:
    (by the way both focus-visible and focus-within do not influence the click style !)

    #top a.attachment:focus-visible:after {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(3px);
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 24px;
  color: #000;
  z-index: 5;
  content: attr(title);  
}

    btw: You need to be more precise with the selector. Otherwise, it will address all anchors.

    or
    #top a.portfolio:focus-visible:after
    etc.

    September 9, 2025 at 7:40 pm #1489103
    amollde

    Hi Yigit,
    thanks for your response that fixed my issue. You can close this ticket. Guenni007, I am not too sure about your ambitions here but I would really prefer you use your wisdom not within my communication with the official Kriesi support in future. Thanks

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘WCAG 2.1, Keyboard Access’ is closed to new replies.