And I am using nibbler site to test the ranking of the site
It gives me this error
3 links have no text describing their destination. Links on a page should describe their destination for the benefit of both screen readers and search engine spiders. Close recommendationsAdd meaningful anchor text that describes the link’s destination. If the link contains an image, ensure you have provided alt text.
The links have title description but still brings as error.
Can anyone help?
Please add a close button/option for the popup box that you are requiring people to use before they can view your site. That is very bad juju on a website. Let us know when that’s done and I’ll go take a look again.
Also, for your popup, you should include the ability to see what the link actually is. There is no way to know what those 4 choices is really going to do. Could be scams, etc. Good practice is to allow people to see the link in the bottom corner of the browser when moused over, in order for people to make safe choices.
I have added the aria-label description but no help.
Those 2 links (terms & privacy) are only located in the bottom of the page. and the both links have
title=“description text” and also added the aria-label=“description text”.
It is still shows as a link without description. I actually did a write letter to nibbler site support to see what are their thoughts, because I have browsed many websites with high/low ratings and some sites have links with no description but still nibbler not raising any issues.
I’ve never used Nibbler, so I can’t comment on whether it’s just being weird. When I tested your website with Lighthouse, it didn’t complain about the missing link titles that Nibbler did, but it did reveal some other issues with your website.
Personally I would recommend using Lighthouse to audit your site, because the scores in Lighthouse have a direct bearing on how Google ranks your page. And since Google pretty much has a monopoly on search, we’re all kind of at their mercy.
So running Lighthouse revealed the following…
You need to set explicit widths and heights on your image elements to reduce layout shifts. This will improve your Performance score.
You have heading elements that are not in a sequentially-descending order (meaning you’re jumping from <h2> to <h4>. This is a fairly trivial issue, but Google likes to see headings used properly in order to better understand the page. If you’re using <h4> headings because you feel the size of the <h3> headings is too big, change the CSS. Also, towards the bottom, you’re using headings in the boxes with the links for Location, Email, Call, Open Hours. It would probably be better to use <p> elements here, as these items are not really “headings” in the conventional sense. Again, it’s a fairly trivial issue.
Lighthouse is complaining about insufficient contrast ratio between background colors and and foreground text colors. This is, unfortunately, Google being stupid. Google uses (IMO) a flawed algorithm to conclude what is “sufficient” contrast. Sometimes you just have to take the Accessibility hit for the sake of your UI and UX.
You’re missing a link title on your “scroll to top” button on the bottom of the page.
The syntax on your email links mailto:“contact@promasterrestore.com” is invalid. There shouldn’t be any quotation marks around the email address.
The syntax on your phone links tel:818-381-7781 are invalid. There should not be any dashes or periods, or space. Numerals only one next to the other.
You should consider opening the Google map in a new browser window.
There’s no reason to have the Open Hours as a link, since clicking it doesn’t do anything.
You need to add scroll margin to your anchor links to account for the height of your navigation menu. When you click the links, the headings are being obscured behind the navigation menu.
In your footer, you have individual links for each service, but they’re all going to the same #services anchor. On desktop this is fine because you can see all six items, but on mobile, it would be a better user experience if the link scrolled to the specific service. Again, you’ll need to add scroll margin to ensure the text isn’t hidden behind the navigation menu.
Not sure if you did this intentionally, but when you click on an FAQ items, the question text turn white. This seems odd to me. I’ve never seen it done that way before.
This is just a personal observation, but I would add a bit of padding below the logo in the navigation menu.
In the footer, under the logo, it says, “Get in Touch with us.” Seems odd to have the world “Touch” capitalized. Either capitalize all the words, or use sentence-case.
The phone number above the navigation menu is not a tel: link. This is okay for desktop, but on mobile, people expect that tapping a phone number will open the dialer app.
I would only show the hamburger menu on XS & SM sizes, and show he regular link menu from MD (or at the very least, LG) on up.
Consider changing the title on the heading logo link to “Promaster Home Page” instead of the URL. It’s just friendlier.
keep in mind that if you leave the email address as plain HTML, spambots can harvest it.
Almost all images on your site are MUCH larger than they need to be (especially in the vendor slider). You’re reducing them using width and height declarations, which is a big “no-no.” You don’t want to be loading large resolution images if you don’t need to. It just slows the page loading speed down. Better to reduce them to the maximum size they will appear on the site. Also, in some cases, when the browser takes a very large image and reduces it by 500%-1000%, the clarity of the image will suffer. Whenever possible, I recommend using svg or webp format. SVG is best when you want crystal clarity (especially on 4k displays) but webp will typically give you the smallest file sizes. There’s no reason to use transparent backgrounds on any images if the background color of the page isn’t going to change. Better to use solid backgrounds on the images that match the color of your web page.
Thank you so much for taking the time and helping me with this website. I will go over one by one what you wrote and will fix what I can. Nothing was done intentionally just done wrong because not knowing. I am not a professional website builder and just a noob learner. Instead of using a WordPress and just putting lots of plugins, lately decided to concentrate on coding and working on bootstrap websites. this website is completely modified from its origin, I got it as a template. I will look into the the lighthouse to make the website more optimized. thank you so much ! .
Don’t forget, we were ALL “noobs” at one time or another, so there’s nothing to feel weird about. Wanting to learn is what matters. Heck, I am still a “noob” at many things. I build websites for a living, but compared to some of the people here in this forum, I feel like a total amateur.
