Link to screenshots:
Description:
I took this website and turned it into an accessible application for anyone to use. First, I changed the title to a more descriptive one for better search engine optimization. I changed all of the div tags to semantic tags to help give the page layout meaning to a user who might need some guidance. I added a header tag and inside that tag I inserted a semantic navigation tag for the links in the top right corner of the page. In that navigation tag I added the accesskey and tabindex tag to each link to make navigation more efficient for keyboard-only users. I changed the div class of the main picture on the screen to a figure and gave it an alt tag to describe it to a screen-reader if needed.
I used a semantic main tag to wrap the main content of the webpage, which contains the "Search Engine Optimization", the "Online Reputation Management", and the "Social Media Marketing" headers. I wrapped each one individually in a semantic section tag because they are thematically related content. I also added alt tags to each of their pictures to provide a text alternative for search engines. I replaced the div tag with a semantic article tag to wrap the self-contained content of the benefits of better SEO on the right side of the page. I did this because it is independent, self-contained content. I placed each heading in a separate section tag inside of the article tag and added an alt tag to each of their images. I changed the div class at the bottom of the page to a semantic footer tag to contain the copyright info.
Lastly, I changed the some of the colors on the webpage to improve readability with a higher contrast for color-blind users. I did this by making the light blue a little darker under the white font and made the "seo" in the header a darker grey to stand out a little more.
Deployed Application: