Improve your Website's Web Accessibility

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 41

  • @cryptologic8322
    @cryptologic8322 Месяц назад +7

    I would say it is our responsibility as web designers and web developers. The customer may not care, but we can deliver a big impact. The people who depend on it will thank us. Just like performance optimization, data protection and a proper cookie solution. Thank you for this Video.

  • @kmmarch60
    @kmmarch60 Месяц назад +3

    What a fantastic video Imran - thank you for the code snippet!

  • @gabrielk5497
    @gabrielk5497 Месяц назад +1

    Didn't know about Aria Labels, it seems of great value! Thanks.

    • @websquadron
      @websquadron  Месяц назад +1

      Even I used to overlook it :( But once you understand Screen Readers, ir makes a big difference.

    • @gabrielk5497
      @gabrielk5497 Месяц назад

      @@websquadron any recommendation on where to find accurate information about readers??

  • @PicSta
    @PicSta Месяц назад +1

    Hello, good old friend! Just stepping by and say "Hi". Nice tutorial ;-)

    • @websquadron
      @websquadron  Месяц назад +1

      Cheers :) How’s you and the family?

    • @PicSta
      @PicSta Месяц назад

      @@websquadron we're all good. First attempts of standing now. 12 teeth out yet, so it's going good. 2 weeks off work now. 🙂

  • @clevermissfox
    @clevermissfox Месяц назад +2

    Love love love to see this video!! So many people feel that a11y is optional, even experienced developers. It’s not folded in to most tutorials either.
    I just ran into two new beginners who have fallen in the trap of prioritizing their design preferences over usability. One got rid of the messages on the form and the loading spinner. I asked them if the form fails or succeeds how will the user know if there is no message? That’s super frustrating to have zero feedback on your form and they disabled them because “it didn’t work with the design”. No excuses esp now that you can style the messages text easily from the elementor editor.
    You’re better off leaving the default ugly browser styles where the content is visible and feedback is given then making a design where content is overflow hidden on a fixed height and there is no feedback and your form and your buttons/links with icons or images have no aria labels or indication of what will happen upon click.

  • @QuaverloveStudio
    @QuaverloveStudio Месяц назад +3

    Oh, wow! The clamp calculator is now a code snippet?
    No words, Imran... except"You're flippin' amazing, lad!"
    Great web accessibility tips, sir. Thank you.

  • @Botgirl
    @Botgirl Месяц назад +1

    Thank you for another amazing video! How to properly incorporate WCAG standards into an Elementor website has been fascinating me recently. One thing I've noticed is if the header menu is sticky, the skip to content button doesn't seem to work properly. A sad situation I'm trying to work around because so many clients want sticky navigation (rightfully so)!
    Can't wait to watch you explore this side of Elementor more, keep being amazing 😊😊

    • @websquadron
      @websquadron  Месяц назад +1

      Good mention about the sticky header bit!

    • @Botgirl
      @Botgirl Месяц назад

      @@websquadron Thanks! Solution is a work in progress, and hopefully possible 😅 Cheers!

  • @thewebstylist
    @thewebstylist Месяц назад +1

    My first thought brother w your intro is ‘my first thought is how to ensure your Elementor site will never have a white page ‘critical error’ white page’ but seriously
    I’m sure a great vid as always, will watch in full (1am here in Pasadena CA) tomm at some point

  • @KurtBunch619
    @KurtBunch619 Месяц назад

    WOW!! This is a great break down, thank you for all the information. Following from San Diego. 😎

    • @websquadron
      @websquadron  Месяц назад

      Glad you enjoyed it! I got my schedule wrong and this was meant to come out next week :) Ah well!

  • @tegaivwighre4716
    @tegaivwighre4716 28 дней назад

    Hi, Great video. You omitted Links do not have a discernible name & Ensure text remains visible during webfont load which does appear on Google page speed test.

  • @Enjooy-life
    @Enjooy-life Месяц назад

    Follow you from Pakistan.

  • @KaiBuskirk
    @KaiBuskirk Месяц назад

    Rad!

  • @kianyipshea2766
    @kianyipshea2766 Месяц назад

    What do you think about the widgets like image/icon box vs image/icon, header and text? Which would be better to use in term of DOM or editing?

    • @websquadron
      @websquadron  Месяц назад

      Icon should be quicker to render than images.

    • @websquadron
      @websquadron  Месяц назад

      Editing though is fine if you've built the icon manually, but it takes as long to get an image modified.

  • @SamFrysteen
    @SamFrysteen Месяц назад +1

    You set Header and Footer tags wrong. You don't do the container. You go to the template settings and set HTML tag there.... otherwise it will output a div-> header. Not as child of body

    • @websquadron
      @websquadron  Месяц назад

      The header is a template. It’s not a container on the page.

    • @SamFrysteen
      @SamFrysteen Месяц назад

      @@websquadron yes, and you need to set the template to be a HEADER ... not the content IN the template to be a header.
      Go to your header template, click the cog for settings, and set HTML Tag to: header

    • @websquadron
      @websquadron  Месяц назад

      @@SamFrysteen It is a Header Template created inside of Templates to be displayed across the Entire Site. Thus it’s not set wrong.

    • @SamFrysteen
      @SamFrysteen Месяц назад

      @@websquadron what ever. Seems you don't want to learn something. If you do, and want to fix your own website, go to the header template, settings, set that tag to be header, then change the container on the page back to div or section

    • @websquadron
      @websquadron  Месяц назад

      @@SamFrysteen I'm sorry that you feel that I don't care because I do, and I spend a lot of time learning and improving methods or any advice given.
      The Header Template that was used on that page and in the video - is a Template - with the Tag set to be Header.
      Take care.

  • @JonathanBlog1
    @JonathanBlog1 Месяц назад

    Great Video tons of information.
    at < 10:39 > of the video
    if you can't find the pipe key on your keyboard, try looking at the < bottom left > of your keyboard, you will see < \ | > Hope that helps :)

  • @MrPunjabi003
    @MrPunjabi003 Месяц назад

    bro how we can make the section scrolling effect like Ramasy cv theme???

    • @websquadron
      @websquadron  Месяц назад

      Probably with WordPress

    • @MrPunjabi003
      @MrPunjabi003 Месяц назад

      @@websquadron could you help me to creat this

    • @websquadron
      @websquadron  Месяц назад

      @@MrPunjabi003 Only as paid 1-2-1.

  • @fabrictexture4767
    @fabrictexture4767 Месяц назад

    hi imran nice tutorial,
    kindly give some details of z-index to Improve your Website's Web Accessibility

    • @websquadron
      @websquadron  Месяц назад +1

      Agreed that Z indexing to ensure contents are on top is important. Especially when it’s a pop up or a feature that may get lost by screen readers. Increasing buttons to a higher z can be a good, as well as nav menus.