Responsive Sunnyside Agency Landing Page with SCSS

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 add tabindex="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 the id 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 an aria-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:

1. <title>A short title of the SVG</title>
2. Add the appropriate ID’s to the <title>.
3. 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 with aria-label=”secondary “ or aria-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 an aria-label="primary" or aria-label=”main” attribute on it. The reason for this is that, You should add the aria-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 or sr-only text indicate where the link will take the user. Then add aria-hidden=”true” to the icons that make them be ignored by screen readers to avoid redundancy and repetition.

hopefully this feedback helps.

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 👨‍🚀🖤