@brunomoleta
Posted
Hello bluepersia,
The following feedback concerns accessibility:
Homepage:
- You skipped one heading on the landing page, which probably should have been the Our location button. If you decide this button should not contain a Heading tag, the your day at the gallery has to be an
h2.
Also, all three images have the alt text equal to: Gallery image. Alt text should:
The alt attribute should typically:
Be accurate and equivalent in representing content and function.
Be succinct. Content (if any) and function (if any) should
be presented briefly without sacrificing accuracy.
Not be redundant or provide the same information as text near the image.
Not include phrases like "image of ..." or "graphic of ...".
This would be redundant since screen readers already
announce "graphic" along with the alt text.
(source: webaim)
At the Location page:
The heading levels are independent from one page to the next, so the location page should also have an <h1> tag. You may hide this Heading, if necessary.
99 King Street and Newport RI 02840 United States of America addresses might go with an <h3> and the Back to Home button(anchor) with an <h2>.
The principle is: Headings must be in a valid logical order, meaning h1 through h6 element tags must appear in a sequentially descending order.
Other topics:
On your Footer React component, you wrapped it with a <div> instead of a <footer> tag. It's best to use the latter for accessibility.
You might also put the img folder inside the assets for better organization.
Besides these issues, your solution looks sharp.
I used this website to make the accessibility test of your app: https://accessibilitytest.org/results/wWpa1BHAeoZ4.
Keep the hustle
Best regards from Brazil :)
