Web Standards, Accessibility
and SEO
My goal was to make this entire site follow web standards and accessibility as well as to focus the SEO on this page. I used the design I originally started this class with and added the needed features to make it follow the necessary standards.
W3C WCAG P1 and P2 level Compliancy
ADA Section 508
I used both http://wave.webaim.org/ and http://www.hisoftware.com/access/index.html. I utilized the tools that are part of the Web Developer tool add-on for Firefox.
I passed the WAVE validation without a problem. With the hisoftware I kept getting a failure for the language, but after I tried a Meta Tag Generator tool suggested, I was able to determine my problem. Needlessly to say, good timing to try out a new tool.
I also had a few warnings at the priority 3 level, which I will have to look into.
Optimized for VoiceOver for Mac
I used the VoiceOver for Mac. I feel it did an okay job optimizing the page for the screen reader. I had to get used the keyboard controls for one thing. It ran into the problem when you wanted it to read all the content on the page it just wanted to read the h1 header for the main content and the h2 for the sidebar. When it got to the sidebar header, it just kept repeating it over and over until you made it stop manually. In order to get it to read the main content in its entirety, you had to stop the screen reader at the h1 header and then manually advance to the next section. You had to go to each paragraph manually even though I had it grouped it as the Lynda.com tutorial had shown.
Web Standard Compliant
I used http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ as part of the Firefox Web Developer add-on tool to test the XHTML and CSS, respectively.
Below is the screen capture of the successful XHMTL Strict validation test.
Below is the screen capture of the successful CSS validation test.
Search Engine Optimization
I used the Google Keyword Tool and Website Webmaster Search Engine tools to help me with the SEO. I used the keywords that relate the most to this Web Standards page. I used various search keywords that were suggestions via search engines as well as from the keyword generator. I used some keywords that were site wide and many that were page specific.
I made sure to use keywords in the page title as well as in the page description in order to help with the SEO.
Design Elements
As I stated previously, I used the site I originally started this class with and ran it through the Color Contrast Analyzer. It revealed only one color to change due to the contrast not being high enough - it was the gray navigation links and sidebar header. All I had to do was adjust that a little and it passed. It helps to have an Art Directors Toolkit (Mac standard application) to help pick a color - let in be by color picker or by sliders. It has many other features to it but I just used the RGB color swatch feature.
Below is the screen capture for the Colour Contrast Analyzer results.
I generally use 1-2 font families to begin with in graphic design so that comes naturally to me. For web I prefer to use sans-serif fonts. I love to implement a highly contrasting font such as in my header image without being overwhelming. If someone uses too many fonts, your eye doesn't know where to go and actually hurts my eyes. Be aware of clients that may like that look, suggest otherwise.
I also implemented a template and external CSS to ensure consistency throughout the entire site. The hyperlinks have a dashed underline to represent a link as well as colored blue.
All pages have titles, alt tags on images and title text on hyperlinks. There is semantic structure in place with the use of headings and paragraph tags.
Reflection Statement
After completing this assessment, I realized how much more there is to accessibility than just title and alt tags. It was interesting how the screen readers seen the pages too. You don't think about how sometimes the creativity of a site really interferes with the accessiblity as well. I had luckily used a global navigation passed all the minimum accessibilty tests
- With JavaScript and mouse
- With JavaScript and keyboard
- Disabled JavaScript and mouse
- Disabled JavaScript and keyboard
I made use of invisible elements for all the links that opened in new windows.