Fa fa-bars accessibility error

  • This line that is refering to the mobile menu icon
    <i class=”fa fa-bars”></i>
    gives me an error on https://achecker.ca/ (accessibility errors checker)

    I found this solution in https://fontawesome.com/v4.7.0/icon/bars
    <i class=”fa fa-bars” aria-hidden=”true”></i>
    Note: to improve web accessibility, we recommend using aria-hidden=”true” to hide icons used purely for decoration

    but I don’t know how and where to use this solution can you please help

    (I also deleted the fa fa-bars from the mobile menu settings but it does not work)

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter byannis

    (@byannis)

    I also found this solution in the same site https://fontawesome.com/v4.7.0/icon/bars


    <i class=”fa fa-bars” aria-hidden=”true”></i>

    an icon being used as a link to a navigation menu

    but I still don’t know how and where to use this solution can you please help

    Thread Starter byannis

    (@byannis)

    My previus post does not show all the code … i dont know why

    • This reply was modified 5 years, 4 months ago by byannis.
    • This reply was modified 5 years, 4 months ago by byannis.

    Hello,

    Please follow the below steps to fix it –

    1. Try to install and activate the child theme
    2. Copy the oceanwp > partials > mobile > mobile-icon.php file into the child theme
    3. Open the file using a code editor and edit it as per your need

    Thread Starter byannis

    (@byannis)

    I am so sorry Amit.
    I did what you said but I can’t find the error line
    (Error Line 145, Column 8:
    <i class=”fa fa-bars”></i> ) in mobile-icon.php that you suggested..

    It seems I was wrong and I gave you the wrong info.
    Below you can find the report I get in https://achecker.ca/ (accessibility errors checker)(and this is my site https://medblends.com/)
    Please help

    Accessibility Review (Guidelines: WCAG 2.0 (Level AA))

    Export Format: Report to Export:

    Known Problems(1)Likely Problems (0)Potential Problems (414)HTML Validation (0)CSS Validation

    1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

    Success Criteria 1.4.4 Resize text (AA)

    Check 117: i (italic) element used.
    Repair: Replace your i elements with em or strong.
    Error Line 145, Column 8:
    <i class=”fa fa-bars”></i>

    Thread Starter byannis

    (@byannis)

    All good I fixed it
    I only had to select another Custom Hamburger Button
    I used “3D X” and now the report says NO ERRORS
    Thanks for the help…

    Glad to hear that it is fixed!

    Hi @byannis could you please tell me how you did it because I am having the same problem.

    Thread Starter byannis

    (@byannis)

    Hi
    Go to
    Customizing ? Header-Mobile Menu
    and change the Custom Hamburger Button to “3D X”.
    That fixed it for me.

    In which css folder? Or in which editing menu?

    Thread Starter byannis

    (@byannis)

    No CSS folder
    I did it in the customizer of the oceanwp theme I use

    Apparently it seems that my theme does not have such option

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Fa fa-bars accessibility error’ is closed to new replies.