Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Progressively enhanced, vanilla everything, Bookmark Landing page

#accessibility#gulp#sass/scss
P
Daveā€¢ 5,245

@dwhenson

Desktop design screenshot for the Bookmark landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This one tripped me up in places I didn't expect. Notably, pseudo elements and SVGs. I put some details of the specific issues in the readme.

Key problems are:

  • Horizontal scrolling is still an issue because of the first pseudo element. I am not sure how I can fix this, or why it is only happening on the first pseudo element and not the second. They are essentially the same element with some extra transitions on the second one. Any advice on this would be appreciated.
  • I wanted to inline the SVG images but it caused so many issues that I opted not to in the end, and although not ideal took the performance hit. I had problems with background color, sizing and strange things in Safari - like bits of the SVG missing. Any suggestions on resources, courses or learning materials would be really appreciated.

Community feedback

Raymart Pamplonaā€¢ 16,140

@pikapikamart

Posted

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-git

Posted

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,245

@dwhenson

Posted

@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

@saadman-galib

Posted

The project you have done is awesome.

0

P
Daveā€¢ 5,245

@dwhenson

Posted

@saadman-galib thank!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord