Overview
This page uses semantic tags to separate content and increase accessability - such as main, section and nav - so that it is optimized for SEO/crawlable and accessable for those with visual impairments or users without mouse access. CSS & HTML comments are also included to increase the readibility of the code.
The website had to be responsive for all devices, therefore we used @mediascreen CSS thouroughly in all the pages.
Index.html (home-page) validation:
W3S-validator check results gave 3 errors;
the first one was about avoiding viewport values that prevent users from resizing documents.
This is fixed by removing the user-scalable value which was set to “no”.
The second issue was about p element not being allowed as a child-element under h2 element.
This one is fixed after validation. The last issue was about the “menu” button on index.html:
"The element button must not appear as a descendant of p element.”.
This one is also fixed by replacing the element. In order to make the index page more user-friendly,
different region identifiers and labels were used such as nav-label,
and region names main and footer.
Menu.html page validation:
The accessibility checker initially gave me 1 error and 2 warnings.
The warning was regarding the user-scalable parameter for the meta tag.
User-scalable was set to “no” meaning users can’t scale or zoom the page content on mobile devices.
I fixed this by removing the parameter.
The other warning stated that the last section on the page (the allergens box) lacked headings.
I fixed this by using an aside tag instead of section
as the content inside is only indirectly related to the surrounding content.
The error I got was due to an unclosed main tag. I fixed this by closing the tag.
About.html page validation: The acessability checker did not discover any problems with the about page. When validating, a space was discovered in an image name. This was changed to the "_"-character.
Contact.html page validation:
The only problem discovered by the accessability checker for this page was that
the img tag pancake-logo.png lacked an alt attribute. This is fixed in the final version.
Css-stylesheet validation: Css Styles page was validated using the W3C CSS Validator. According to the Validator, no errors were observed in the Css code. In addition, the css code works in harmony with other pages, without any bugs or problems.
✿*ﾟ‘ﾟ･✿.｡.:* *.:｡✿*ﾟ’ﾟ･✿.｡.:* *.:｡✿