Skip to content

No valid role attribute on elements

Solved WordPress
10 2 3.6k 1
  • wrote on last edited by
    #1

    For example

    <div id=“aswift_1_host” style=“border: none; height: #; width: #; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;” tabindex=“0” title=“Advertisement” aria-label=“Advertisement”>

    **Reported**
    Fix all of the following: aria-label attribute cannot be used on a div with no valid role attribute.
    
    **Actual code**
    <center>Advertisement
    <!-- example_responsive_3 -->
    <ins class="adsbygoogle example_responsive_3" style="display: inline-block; text-align:center; width: #; height: #;" data-ad-client="ca-pub-#" data-ad-slot="#"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script></center>
    

    How do I fix this one?

  • @Sala thanks. Having reviewed this, I’d be far more concerned about this

    The main thread was blocked for 2467 ms

    However, accessing your site doesn’t immediately scream to me that it takes 2.4s before the user can interact with it. Not all of these tools are created equal and rely on standards that in fact if implemented on your website word for word, would cause it to stop working properly.

    Different tools yield different results. One of the more honest tools is below

    https://geekflare.com/tools/test/m2hxrhoh0a60183z5dyz9kq0qdx7lm42

    wrote on last edited by
    #9

    @phenomlab this was the result generated on Sun, Feb 26, 2023 4:35 PM.

    alt text

    Yes the TBT result is different. If Aria is not an urgent issue well will fix it some other time.

  • For example

    <div id=“aswift_1_host” style=“border: none; height: #; width: #; margin: 0px; padding: 0px; position: relative; visibility: visible; background-color: transparent; display: inline-block;” tabindex=“0” title=“Advertisement” aria-label=“Advertisement”>

    **Reported**
    Fix all of the following: aria-label attribute cannot be used on a div with no valid role attribute.
    
    **Actual code**
    <center>Advertisement
    <!-- example_responsive_3 -->
    <ins class="adsbygoogle example_responsive_3" style="display: inline-block; text-align:center; width: #; height: #;" data-ad-client="ca-pub-#" data-ad-slot="#"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script></center>
    

    How do I fix this one?

    wrote on last edited by
    #2

    @Sala Any reason why you can’t target the class instead, or use jQuery to target the aria-label attribute and assign an id ?

  • @Sala Any reason why you can’t target the class instead, or use jQuery to target the aria-label attribute and assign an id ?

    wrote on last edited by Sala
    #3

    @phenomlab uh I’m relative new to that haha. It’s my first time to come across this Aria

  • @phenomlab uh I’m relative new to that haha. It’s my first time to come across this Aria

    wrote on last edited by
    #4

    @Sala is this from an SEO checker?

  • @Sala is this from an SEO checker?

    wrote on last edited by
    #5

    @phenomlab If it from SEO i could be here making noise all night. Its from webpage speed test

  • @phenomlab If it from SEO i could be here making noise all night. Its from webpage speed test

    wrote on last edited by
    #6

    @Sala I don’t think this is anything to be concerned by. Can you send me the output of the speed test?

  • @Sala Any reason why you can’t target the class instead, or use jQuery to target the aria-label attribute and assign an id ?

    wrote on last edited by
    #7

    @phenomlab Here is the speed test results. Aria element issues on accessibility https://www.webpagetest.org/result/230226_BiDc52_5VY/3/experiments/#Usable

  • @phenomlab Here is the speed test results. Aria element issues on accessibility https://www.webpagetest.org/result/230226_BiDc52_5VY/3/experiments/#Usable

    wrote on last edited by
    #8

    @Sala thanks. Having reviewed this, I’d be far more concerned about this

    The main thread was blocked for 2467 ms

    However, accessing your site doesn’t immediately scream to me that it takes 2.4s before the user can interact with it. Not all of these tools are created equal and rely on standards that in fact if implemented on your website word for word, would cause it to stop working properly.

    Different tools yield different results. One of the more honest tools is below

    https://geekflare.com/tools/test/m2hxrhoh0a60183z5dyz9kq0qdx7lm42

  • @Sala thanks. Having reviewed this, I’d be far more concerned about this

    The main thread was blocked for 2467 ms

    However, accessing your site doesn’t immediately scream to me that it takes 2.4s before the user can interact with it. Not all of these tools are created equal and rely on standards that in fact if implemented on your website word for word, would cause it to stop working properly.

    Different tools yield different results. One of the more honest tools is below

    https://geekflare.com/tools/test/m2hxrhoh0a60183z5dyz9kq0qdx7lm42

    wrote on last edited by
    #9

    @phenomlab this was the result generated on Sun, Feb 26, 2023 4:35 PM.

    alt text

    Yes the TBT result is different. If Aria is not an urgent issue well will fix it some other time.

  • @phenomlab this was the result generated on Sun, Feb 26, 2023 4:35 PM.

    alt text

    Yes the TBT result is different. If Aria is not an urgent issue well will fix it some other time.

    wrote on last edited by
    #10

    I found it here, ins elements can not have aria elements

  • phenomlab phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • How to deploy WordPress.org Developer theme

    Solved Configure wordpress theme github
    4
    1 Votes
    4 Posts
    3k Views
    phenomlab
    @Hari the real issue here is that I don’t think it can be used as a theme for WordPress because of the dependencies it clearly has, including its own Web server. My view here is that this is designed to be a complete development environment outside of the WordPress core.
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • How to position ads responsively

    Solved WordPress wordpress
    13
    3 Votes
    13 Posts
    4k Views
    Sala
    @phenomlab yes that’s the problem with these J’s, I will try my best , If I find something better I will share. Thanks
  • Flarum - WordPress Journey

    WordPress flarum wordpress quitting
    59
    22 Votes
    59 Posts
    22k Views
    phenomlab
    @Sala I will likely need admin access to your site for this.
  • Best Cloudflare settings for woo commerce

    Solved WordPress cloudflare wordpress woocommerce
    2
    1
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @hari the cache level for woocommerce should always be bypass. Any caching of woocommerce will cause you serious issues and will result in the checkout process not functioning correctly. This does mean that the overall experience will be slower (depending on geographic location) although CF is known to cause significant issues hence the need to bypass. If you want to cache as much as possible, then set rules to bypass caching on the cart and account pages etc.
  • Hardening WordPress - Reducing the attack vector

    Blog wordpress hardening
    13
    1
    1 Votes
    13 Posts
    5k Views
    JAC
    @phenomlab said in Hardening WordPress - Reducing the attack vector: @jac Microsoft’s and Google’s Authenticator both support TOTP - essentially, a time based system that changes every 30 seconds. The main principle here is that the device itself carrying the One Time Passcode only needs to be in sync with the source server in terms of time, and can be completely offline with no internet access. Provided the time matches on both devices, the One Time Passcode will be accepted. Applications such as Microsoft Authenticator and Authy also support push notification meaning you just choose either yes or no on your device when prompted, and then that response is sent back to the origin which then determines if access is granted or not. One of the best looking password less authentication models was CLEF - sadly, this product died out due to a lack of funding (if I recall correctly) although some open source implementations of this have appeared quite recently. Essentially, both products will achieve the same goal. TOTP is an industry standard, and widely accepted across the board. Not all services offer push confirmation. Many thanks for the detailed reply mate. There’s some great advice in there that will help me secure my accounts.
  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.