DEV Community

loading...
Cover image for AMA about accessibility, load speed, Google Lighthouse, Page Speed Insights or Web Vitals

AMA about accessibility, load speed, Google Lighthouse, Page Speed Insights or Web Vitals

inhuofficial profile image InHuOfficial ・2 min read

Hi everyone

I am still quite new to the community and looking to get some inspiration for posts while hopefully helping some people along the way with their burning questions (and make some new friends along the way as well 😊)!

So I thought I would do a "Ask Me Anything" post on subjects I know well and turn some of the answers into full posts.

So what can I help with?

Well there are two main areas I can help:

Accessibility

I know a lot about accessibility (shortened to a11y....which ironically is not very accessible!), helping to make sure your website is usable by people with disabilities and compliant with the law. Not so much on Apps from a technical perspective but can still offer general guidance on WCAG etc. there.

So if you have technical questions about WAI-ARIA attributes, semantics, colour contrast, WCAG 2.1 (or WCAG 2.2 coming in June and the new criteria there, or the complete rewrite and rethinking of WCAG 3.0 (silver) coming in a couple of years!) etc. etc. fire away!

The other thing I am good at is helping people put the business case for accessibility to their managers / clients. So if you want help explaining the legal implications of not being accessible (UK and USA for specific advice, but I can offer general advice) with a big "I am not a lawyer" disclaimer then I can help there.

Or if you want to know the market sizes, spending power etc. etc. I can rattle that off too!

This is my passion so feel free to ask some real tough ones, I will do my best to answer them!

Performance (including Lighthouse, Page Speed Insights and Web Vitals)

Specifically website load speed.

So if you are looking for how best to optimise an algorithm I am probably not your man, but if you want to know about page load speed I can certainly help there.

With the massive Google update coming in a few months to switch the focus onto web vitals you may also want to ask me about specific problems you are having there so you don't suffer a SEO nightmare!

Critical CSS, optimising images, avoid layout shifts etc.

I look forward to (trying) to help!

I hope this gets well received, honestly ask me anything you want but only expect good answers around accessibility and load performance 🤣🤣🤣

Cheers

Graham

Discussion (2)

pic
Editor guide
Collapse
ardianperlaska profile image
Ardian Perlaska

Hi Graham, thanks for this opportunity.

I'm familiar with some Accessibility (WCAG) concepts and now I'm working to make our Components library fully accessible.

We use Angular and we're building lots of configurable Applications with those components.

When using the components, many people don't provide proper semantics such as alt for images, or aria-label for empty links or actions.

So, I'm going through most of our components and optimizing those, so I can dynamically extract information from the component by using InnerHTML or similar approaches and then dynamically setting properties such as alt or aria-label through Angular.

What do you think about this? Is this a good idea? Will this be too bad for the performance of those components in heavy views?

I'd be glad to hear your opinion on this.

An example: We have a placeholder component, that we always provide a placeholderTitle but not alt for the images. So, in theory I would say, get the innerText of placeholderTitle and set it on placeholderImage.alt.

P.S. This approach is already enabling me to relatively easily reach 100% Accessibility in Google Lighthouse audit, and things such as Keyboard Interactions are being manually tested.

Collapse
inhuofficial profile image
InHuOfficial Ask Me Anything

Hi Ardian

More than happy to have a look at it for you and thank you for breaking the silence on my AMA! 🙂

Using .innerHTML should be performant unless you are inserting war and peace, but if you have a Content Security Policy with require-trusted-types-for 'script' you will have to sanitise it (I can tell you more about that if that is a problem for you, but most sites don't use that yet) or it will get blocked.

Also it is always better to try and use createDocumentFragment or a similar "Angular style" technique of building the element outside the DOM if you are building anything complex, just to avoid unnecessary updates and repaints on slower devices.

Do you want to put some HTML down that explains the placeholder component more clearly so I understand the purpose and how it is structured. In principle the answer is "yes, move the title onto the image as an alt attribute as title is not accessible but I might be misunderstanding what your component does / looks like.

General quick starting place for catching empty alt attributes etc.

As I can't quite help with the placeholder thing yet, I thought I would share a general trick for missing alt attributes etc.

I put together "development style sheets" that flag certain things and might be something you could implement as a quick fix while you work on automating as much as you can.

For example images with an empty alt attribute can easily be flagged up with the following CSS:

img:not([alt]),
img[alt=""] {
    outline: 5px red !important;
}
Enter fullscreen mode Exit fullscreen mode

Or if you want to really annoy people into putting alt attributes in place you can even over-ride their pictures

The same principle can be used to pick up empty headings (h1:empty), lists that have children that are not <li> => :is(ul, ol) > *:not(li) { outline: 2px dotted red;} or my favourite, "the anchor antipattern finder":

a:not([href]),
a[href="#"],
a[href=""],
a[href*="javascript:void(0)"] { 
    outline: 5px red !important;
 }
Enter fullscreen mode Exit fullscreen mode

thank you I think I may have just found at least one post topic to write about!

Beware the automated audit trap!

Automatic audits are great to pick simple things up, but they only cover 35-45% of errors at most.

There is no substitute for a piece of paper over the screen and learning to use a screen reader for finding accessibility issues.

Let's see some code 😁

Feel free to put a couple of minimal fiddles together for your placeholder component and for the innerHTML approach for setting aria-label (as need to see that too to understand what you are adding to an aria-label) and I will help you refine them / point out any "gotchyas" that you might run in to!