rest-countries-api-with-color-switcher using vanila-js, css and html

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted almost 3 years ago

  Well done on fetching from the api, and the filter is nicely responsive when you type into it.

  There are some accessibility problems though. None of the interactive elements are accessible to keyboard or screen-reader users.

  All interactive elements must be either a <button> an <a> or some kind of form control like an <input> or a <select>

  Your theme toggle is a <div> so it can't be used with a keyboard. Make it a button (ideally with correct aria-pressed state). The filter text input field has had its focus styles removed, so it is impossible to see when it has been focused. If you remove the default outline, you must replace it with something equally high-contrast. The continent filter should be a <select> element. If that had been used, it would be keyboard accessible. It's not possible to style the <option>s in a select, but having the default styling is much better than creating a different version that can't be used by many users. All the form controls need to have labels. Currently they don't, so a screen reader user would have no way of knowing what they were interacting with.

  The flags on the dashboard page should be wrapped in anchor tags and should go to an individual country url when a user clicks on them. Currently you're just replacing the page content with javascript, which means the browser back button doesn't work. There is a button on the page itself, which is better than nothing, but again it's missing focus styles so a keyboard user can't interact with it.

  From a styling point of view it looks like in the design files the flags should be smaller and fit more on the page when viewing on desktop.

  The box shadows look very large and harsh too, it would match the design closer if they were smaller and much lower opacity.

  And while I guess it's not part of the challenge, the text-shadow on the footer attribution makes the text unreadable. text-shadow is almost never a property that improves an element.

  2