I’ve completed a frontendmentor project (static job listings master).
But I get some errors both for accessibilty and HTML.
All errors relate to the code section in addListings() , the <section>...</section> part.
One error I’m getting is
" Interactive controls must not be nested"
The next is " Ensure landmarks are unique".
the <sections> all end up with the same aria-label name.
and the final error is that I have , that’s easily fixable, is that the <section> elements are children of <output>
I’ve simply changed using the <output> element that will nest the <section> elements from JS, to using a <article> element.
I’ve also changed using the Aria-label in the dynamically created <section> elements to using a title.
But now I still don’t see how to deal with the <ul> section in the same function.
For the ‘interactive controls must not be nested’ error?
I don’t see how this html is wrong?
It needs to be tabs, and I’ve seen this tabs html before on numerous sites.
Have you updated github with your most recent changes?
I’m not exactly sure I understand why those links need to be a tabs interface. Can you explain? And if they do, then the tab role goes on the link, not the list item. And you would use role="presentation" on the list items so they are aren’t treated as list items by screen readers since you are creating a tabs interface.
But definitely keep the href attribute since as you stated, you won’t be able to use the keyboard to put focus on a tab if you don’t. You’ll also need to set tabindex on each of those links. The currently active one will be set to 0 and the remaining inactive ones will be set to -1. And then you’ll need to use JS to manage them.
But again, I’m not sure why you need a tabs interface here?
I made the changes for the tab section to role='presentation' , but off course I can’t remove the href='#' , in order for the 'interactive controls must not be nested ’ error to be fixed.
I just get the impression from the design that these are tabs, and my first link to the MDN site has the same code basically , just different roles etc.
I’m not sure about this. A tab interface is used to switch between different “screens” of content in place, instead of navigating to a new page to access each screen. That doesn’t seem to be what’s going on here. These links seem like they are acting as filters, where you click on one and the listing updates to show only those jobs that are associated with the filter. If that is correct, then that’s not a tab interface.
Yes, I think a button is the most appropriate element for these. You could possibly need some aria attributes to enhance the experience for screen reader users, but that would depend on the functionality. For example, if you are already filtering the listing by the CSS category, should you still be able to click on a CSS category button, since it’s not going to change the filtering?
I think you’ve got some missing headings as well. You should definitely have an h1 heading, and it should probably be something like “Job Listings” and be placed immediately before the listing begins (this heading can be visually hidden) Each listing title should be an h2. I think you might need an h3 “Categories” (or whatever these are referred to as) heading right before the category buttons (again, can be visually hidden). So it would look something like:
<h1>Job Listings</h1>
<h2>Full Stack Engineer</h2>
<p>Eyecam Co.</p>
<p>3w ago Full Time Worldwide</p>
<h3>Categories</h3>
<button>Fullstack</button>
<button>JavaScript</button>
<h2>Front-end Dev</h2>
<p>The Air Filter Company</p>
<p>1mo ago Part Time Worldwide</p>
<h3>Categories</h3>
<button>Frontend</button>
<button>Junior</button>
Notice that I put the name of the company after the h2 title in the DOM even though visually it is before the title. It is best practice to put all information associated with a heading after the heading, which is why I did this, but you can use CSS to visually move the company name above the h2 title. Some people might argue that using CSS to visually move information like this is an accessibility failure, but it is not that black and white. Because screen reader users rely on headings to navigate the page, it is more important to put all of the related content after its heading in the DOM. If the designer insists that some part of the content must visually appear before the heading then you can usually get away with moving it with CSS. In this case, it is just one piece of information and I don’t think it causes any meaningful issues. But if the designer wants to move a bunch of content before the heading then you probably need to find a new designer
There are certainly other accessibility issues to address here, I’ve just skimmed the surface, but my fingers are getting tired and I don’t have enough information to give reasonable opinions on everything. I’m glad you are asking about these things though, because accessibility is an essential part of web development and the more you learn, the more valuable you will be to a potential employer. Keep up the good work.
and this one:
" Page should contain a level-one heading
<html lang="en">
"
And off course, a problem that I had earlier, is that I assume the JSON is too slow to retrieve as the job listings are not visble in the Frontendmentor submitted project screenshot.
I’m at a loss what the problem is with the titles as they’re all there, just visually hidden, and they decrease hierarchically by one, and there’s a <h1> heading.
This is just a suggestion, it is not an accessibility failure. Articles are not required to have headings, though some would argue it is a best practice.
This is also not an accessibility requirement but is definitely a best practice and that’s why I mentioned you should add an h1 heading in my previous post.
Another best practice that is not a strict accessibility failure.
Please confirm that your github repo is up-to-date and I will happily take a look.
Thanks. I see these suggestions when I post my project to my frontendmentor profile.
But worse is that I do not see the listings returned in time for the screenshot .
When you complete a project at Frontendmentor , there is a screenshot taken to compare to the design ? I think the json data is returned to slow.
I’ve had this issue before and then it was because I was using some json data hosting site, instead of just my github repo. Then I could solve the issue using a github raw data link. Which I did now from the beginning , so that’s not it.
This is a recommendation because it is considered a best practice and I highly recommend you follow it. I’m not seeing an h1 in your project. Just add the h1 I suggested above before the jobs listing in the DOM. I’m not sure what that current h2 is doing, I would get rid of that completely.
Oh, I see, when you add a filter then you are adding an h1 before the filters. The h1 is the most important heading on the page. It describes what the purpose of the page is. In this case, the purpose of the page is to give a jobs listing, so that should be the h1. If you want to add a heading before the filters, then it should be an h2, not an h1.
“Article lacks heading. Consider using “h2”-“h6” elements to add identifying headings to all articles.”
You don’t need to use the article element at all. Just replace it with a div and you won’t get this suggestion any more.
“Heading levels should only increase by one”
This is another best practice that I highly suggest you follow. Right now you are setting the company name to an h4. Make that an h2 instead.
Also, I would remove the title attribute from each section element. What good is that doing? It also has the potential to add extra noise for screen reader users. It is just not needed.
Thanks, the reason this was tricky was because of the dynamically added js and the header that is not always displayed, normally I have no issues with headers.
I still don’t see any of the listings on the frontendmentor screenshot though.
The json data fetching taking too long ?
I’ve had this issue before , but I thought that using a raw github link would solve most of this.
Thanks, the reason this was tricky was because of the dynamically added js and the header that is not always displayed, normally I have no issues with headers.
I still don’t see any of the listings on the frontendmentor screenshot though.
The json data fetching taking too long ?
I’ve had this issue before , but I thought that using a raw github link would solve most of this.
