Accessibility Report

I performed the following steps to improve my website's accessibility:

Validation

I ran my site through the W3C HTML Validator, the W3C CSS Validator, and WAVE. Because my site is fairly simple, there weren't many errors to correct. The HTML Validator had me correct my charset from utf8 to utf-8, and it caught one error in which I had accidentally put my paragraph tag inside my italics tag instead of the other way around. The CSS Validator caught an extra semicolon that had found its way into one line. WAVE did not detect any errors; it had several alerts related to redundancy in my alt and title tags, but I didn't think that was a serious issue.

The results of the validation are as follows:

W3C HTML Validator: Module 5 Index, Module 5-1, Module 5-2, Module 5-3, Module 5-4

W3C CSS Validator: Module 5 CSS

WAVE: Module 5 Index, Module 5-1, Module 5-2, Module 5-3, Module 5-4

I corrected these errors for Module 6, and my website now gets a clean bill of health from all three sites.

Other Changes

I ensured that my site met all of the W3C Priority 1 Checkpoints. My site is fairly simple and many of the points did not apply, but I did ensure that I provided a text equivalent for every non-text element by ensuring that all images had alt tags with descriptions of the image in case someone was unable to view it. Two of my images are part of the CSS and therefore could not have alt tags added; however, these images are decorative rather than meaningful on a content level, and I do not believe it is a significant issue if they go unread. I also viewed one page without the CSS stylesheet to ensure that the site was still readable without it - if significantly less aesthetic.

Based on the Priority 2 Checkpoints, I also changed my CSS to use relative rather than absolute markups. When designing the site, I had set many of my divs using pixels without thinking, because I had been trying to match them to the size of the header image; to be sure that the web parts scale properly if someone needs to make changes such as increasing the font size, I changed them all to ems. I also verified that header elements were used properly and that my lists had been marked up properly.

In addition, I added a skip navigation button (hidden, because the use of the header image and navigation bar made it difficult to position a visible link; however, it will appear when you hit the tab button). I also ran my website through a color blindness filter and verified that it was still readable to people with varying levels of color blindness.

Metadata

Once I had finished making my other changes, I added the required metadata to the head of the document, including a list of keywords to help people find my site when searching.

Browser Compatibility

Finally, I used BrowserStack to check compatibility across different browsers. I checked my site using every browser available under the free trial and found no major issues, although the footer appeared oddly small on the Samsung Galaxy Note 4 compared to the rest of the text, and I was required to switch orientation to horizontal on the Apple iOS iPhone 6 Plus for it to be comfortably readable; this was not the case with other phone browsers. On the whole, though, the site transferred over nicely.