Improve your Website's Web Accessibility

[@cryptologic8322]

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.

[@websquadron]

Very good point

[@kmmarch60]

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

[@websquadron]

My pleasure

[@QuaverloveStudio]

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.

[@websquadron]

Keeps it all local

[@gabrielk5497]

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

[@websquadron]

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

[@gabrielk5497]

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

[@PicSta]

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

[@websquadron]

Cheers :) How’s you and the family?

[@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]

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.

[@Botgirl]

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]

Good mention about the sticky header bit!

[@Botgirl]

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

[@thewebstylist]

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]

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

[@websquadron]

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

[@tegaivwighre4716]

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.

[@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]

Icon should be quicker to render than images.

[@websquadron]

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

[@MrPunjabi003]

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

[@websquadron]

Probably with WordPress

[@MrPunjabi003]

@@websquadron could you help me to creat this

[@websquadron]

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

[@SamFrysteen]

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]

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

[@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]

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

[@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]

@@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.

[@Enjooy-life]

Follow you from Pakistan.

[@fabrictexture4767]

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

[@websquadron]

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.

[@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 :)

[@KaiBuskirk]

Rad!

[@websquadron]

Easy to apply :)