WC3 Validator & Accessibility Test

WC3 Validator Test


Finally as I finished the website it was time to run it through the WC3 Validator to ensure that all my of elements and code is working correctly and as intended, here are the results:

I ran the test first time and only had two errors, these errors are not necessarily errors as they are anchors that go to a specific div, the validator sees this as two tags that shouldn't be inside each other however this is necessary when I am linking from a scroll hint to further down the page. I decided to not change the code to have an 'error' free result as it was needed to have the required effect on my website.



Accessibility Test
This test is evidence that I have provided the required changes for people with other additional needs and people on other platforms.

In terms of universal accessibility on my website I have every area covered, I have none of the following: same background/text colours, no text that is actually an image.

And I made sure I have the following:

High contrast between text and background
Example:

Alt and title tags on all 'img srcs' images
Example:

And there is no use of tables anywhere in the website.

Website Footer (and Roll-overs)

As most websites traditionally have a footer is a important part of what makes a website a fluid navigational experience. Initially my nav bar was fixed to the top of the page, even when you scrolled it stay at the top, making it an easy way to get around without having to go to the top, however I felt it took away from the rest of the design and as I haven't styled it much yet it just didn't fit. So I then thought how will I tackle this problem of having to scroll to the top when you want to change page, and that got me thinking, footers are usually used for social media icons, location of that company / design agency but that type of information isn't applicable here so I came up with solution of making the footer a very simple 'to the top' anchor and it looks great, it matches the rest of my layout and design and here's how I did it!

Anchors were used to create a link from the bottom of the page, back to the top, so I put an anchors destination <a id=""totop"> </a> immediately after the body tag, this would ensure that it was at the very top of the page and would't go halfway up. I then created a div, and gave it a class of footer, this was a grey box with 100% width just to create the space where it will go, I then put the anchor inside of the div, applied the smooth scroll class which I used for the scroll hint anchor where instead of jumping to the anchor destination it slowly scrolls like you would with your mouse. and I then used an image I found online of an arrow and put that inside the anchor.

Here's the HTML:

This is the HTML very simply and I did some in-tag styling for the image as I felt it unnecessary to type out the CSS.

Now for the CSS, I wanted the entire footer to be a link to the top, not just the small arrow image so for this I made the anchor position relative,100% height and display:block this gave it 100% width. this then made the entire grey boxed div the anchor making it more user friendly on computers, but also mobiles.
Here is the CSS Code for the Footer Div, and the anchor.

So my footer was there, and was working but now I had to position the arrow image in the center of the div. So I gave it a padding-top and bottom and it inherited the position of the anchor is was within with was centered, putting it straight in the middle. Currently it was now just an light grey arrow inside a dark grey div and didn't really give me the impression that it was a to the top, so I decided the give it a border of 2px, and a border radius of 50px; giving it a circle around the arrow, I then added a pseudo :hover style that changed the border colour from grey, to green (the same color as my nav roll-over). 

Here's the CSS: 

The roll-over was good, but not good enough the sharp snap from grey to green needed to match the rest of the webpage so I did a quick google search and found a ease-in-out transition and I set the transition time to 500ms, now I had the rollover I wanted but the transition only occured when I hovered onto it, when I took my cursor off the anchor it snapped back to grey, then after some research I discovered that you need to apply the transition to the image aswell, not just the pseudo :hover! 

Before :hover

After :hover