Progressively enhanced, vanilla everything, Bookmark Landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, really awesome work on this one, this is my favorite challenge just to insert. The site looks great in desktop, it is responsive and the mobile state looks great as well.

  Others already gave their feedbacks, just some suggestions as well:

  • First, why are there lots of css errors, I haven't encountered those before, hmm.
  • You could add main word on the skip-link-text to make it more explicit and clear.
  • I was going to suggest adding title element inside the website-logo but I tested it with nvda and it is not reading the svg title why is that. I was suggesting that for long time and google it right now and it is not reading it, so right now I might test some alternatives and I could suggest this link about using aria-labelledBy along with title :>
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • Also, tabbed interface is really great^^.
  • Same goes for the website logo. Also, if you don't want to trouble yourself with doing those aria's you could use the svg as an img so that you could just use alt.
  • I just noticed by now, making my dev tools higher, the layout shifts and I suspect some vh units in here:>
  • Dropdown svg in the faq section could use aria-hidden="true".
  • The form works properly but currently it lacks information for the users to know what happened. A pseudocode looks like:

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy

  • You can also create an aria-live element that announces if the form submission is a success or not so that users will be informed on the spot.
  • The button should have type="submit". Always be explicit on what your button should act especially when it is inside a form element. Since by default a button inside a form turns to type="submit". So imagine you have a form with a close button but this button does not have type="button" instead of users closing the form they would submit it.
  • Error-svg to use aria-hidden="true" as well.

  FOOTER

  • Same goes for the website-logo`svg
  • Social media svg should use aria-hidden="true".

  Just those ones. Again, this is really great.

  Marked as helpful

  0
• 

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  Hi Dave, great job as always. Flexible, accessible, functional and very beautiful. I really liked the care you gave when the user has JS disabled (It doesn't happen much but it's good to be careful). It becomes more and more difficult to find something wrong 😅. However I wanted to point out 2 little things that I noticed.

  .that shortcut at the beginning to skip navigation was a good thing, but I tried to access it through the tab "Speedy Searching" and "Easy Sharing" and it wasn't possible, it goes straight.

  • I liked that when I access via Tab the buttons also activate the hover effect, it would be nice if the elements of footer and "Ask" also activated.

  Keep up the good work 👏

  Marked as helpful

  0

  ---

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @MarlonPassos-git Thanks Marlon! Good catch on the second point thanks!! I was listening to the CSS podcast today and they suggested doing something like this:

  :is(:hover, :focus) {
  // style here
  }
  

  I'll be trying this and using it as a way of making sure I don't forget focus states for the keyboard navigation.

  Could you try and explain the first point again - I didn't quite get you, sorry. For clarity, the skip-link goes to the start of the main element - not to the tab section.

  On the tab section the tab key will take you into the active panel, where as the arrow keys will take you between tabs. This seems a bit illogical, but there's a good justification in the article linked to in the readme.

  Apologies again, if you have a moment more to clarify the problem to me I would really appreciate it. Thanks!!

  0
• 

  Md. Saadman Galib Rabbi•140

  @saadman-galibPosted about 3 years ago

  The project you have done is awesome.

  0

  ---

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @saadman-galib thank!

  1