Responsive Sunnyside Agency Landing Page with SCSS
Design comparison
Solution retrospective
As always, your feedback and comments are highly appreciated.
Community feedback
- @PhoenixDev22Posted about 2 years ago
Hi Alexander Charles Bonney,
Congratulation on finishing this challenge. Great job on this one! I have few suggestions regarding your solution:
HTML
- The alternate text of the logo is needed, it may set alt=”Sunnyside". Use the website's name as an alternate text. Remember that a website-logo is one of the most meaningful images on a site so use proper alt for it.
- Use
<nav>
landmark to wrap the header navigation. The toggle element should be placed within the<nav>
element.
Toggle element:
- It’s not recommended to add functionality on non-interactive elements
class="toggle"
. You can use a<button>
with type=”button” around the<span>’s
.
OR
- Add role=“button” to
burger
will make an element appear as a button control to a screen reader.
- We need the button to be focusable. That means we need a
tabindex
. So you should addtabindex="0"
- When you convert a different element with role="button" you don’t add your own keyDown listeners. Look up on this how to convert a div into pseudo button.
- As
class=”toggle"
has no discernible name, put an aria-label on your trigger to describe its purpose. For example, you can have:aria-label='Mobile Navigation Trigger' or 'Open Menu.’
- Add an
aria-expanded
attribute to your toggle element letting the user know if the content the button controls is expanded or not. At first, it has the “false” as a value then you use JavaScript to change the value.
- You should use
aria-controls
attribute on the toggle element, it should reference theid
value of the<ul>
element.
- Don't capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.
- look up a bit more about how and when to write alt text on images. Learn the differences with decorative/meaningless images vs important content. For decorative images, you set an empty
alt
to it with anaria-hidden=”true”
to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.
- In the footer’s logo , the SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
<title>
A short title of the SVG</title>
- Add the appropriate ID’s to the
<title>
. - It must be the first child of its parent element
On the
<svg>
tag, add aria-labelledby="uniqueTitleID”.
- Use the
<nav >
landmark to wrap the footer navigation witharia-label=”secondary “
oraria-label=”footer”
. A brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label. Thenav
element in the header could use anaria-label="primary"
oraria-label=”main”
attribute on it. The reason for this is that, You should add thearia-label
for a nav element if you are using the nav more than once on the pag..you can read more in MDN
- The links wrapping the social icons must have
aria-label
orsr-only
text indicate where the link will take the user. Then addaria-hidden=”true”
to the icons that make them be ignored by screen readers to avoid redundancy and repetition.
hopefully this feedback helps.
Marked as helpful0@alexanderbonneyPosted about 2 years ago@PhoenixDev22 Thanks very much for your recommendations and for taking the time to write a such detailed critique. I am very grateful
1@PhoenixDev22Posted about 2 years ago@alexanderbonney Glad to hear that it was helpful. Happy coding!
0 - @NaleekaPosted about 2 years ago
Hi @alexanderbonney 👋
You've been really creative with the hover effects 👌🌟
I think something that you could change is,
- Put all
<section>
s inside a<main>
tag to fix the accessibility issue you have
Great work, Happy Coding 👨🚀🖤
Marked as helpful0 - Put all
Please log in to post a comment
Log in with GitHubJoin 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