Wikipedia Viewer -FCC Frontend Challenge

Here is me with another project. Its a wikipedia viewer means you can search for any topic and you will get all the wiki links related to that topic. Please have a look at it codepen. Any feedback will be appreciated :slight_smile:

1 Like

That’s cool. Well done.
I am currently struggling with the fcc javascript course so I’m not best placed to judge you. Seems to work nicely to me though.
I think the page could perhaps do with a logo/title such as Adarshwiki.

1 Like

Hey, good job getting this to work. I do have a few suggestions.

  • You don’t have a <label> for the <input>. Placeholder text is not an acceptable alternative for a label. Also, I can barely read the placeholder text because it is not dark enough on the white background.

  • I don’t see an actual button to trigger the search. Usually the magnifying glass icon would be a button but it is not. How do you use the mouse to trigger the search? I think most keyboard users would also be expecting a separate button instead of just pressing the enter key.

  • The clear/reset button does not have any text associated with it so screen readers are not going to know how to announce it. Add text describing what the button does as you would normally do and then you can visually hide it.

  • The results you get back from the search seem like a list to me and should probably be marked up as such. The headings in the list results should probably not be <h1> as best practices dictate that you should only have one <h1> on the page, so make those an <h2>. Also, consider adding an <h1> heading to the top of the page.

  • All content should be within a landmark. So the <p> at the bottom should be in a <footer>. The link text for that link isn’t descriptive enough. There is nothing wrong with having a short phrase or sentence be a link. So in this case I would suggest you make “read a random article” a link. Finally, the light gray text doesn’t have enough contrast with the background to be accessible. Use the WebAIM color contrast checker to make sure your color combinations are accessible.

  • Bonus points: Sometimes the search results can take quite some time to appear. You might consider adding some sort of indicator so the user knows that the search is working and they are just waiting for the results.

1 Like

Thanks for your suggestions :slight_smile: I have edited the code accordingly.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.