SEO & Accessibility Project
Changes to HTML & CSS
User Story
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
Acceptance Criteria
GIVEN a webpage meets accessibility standards
WHEN I view the source code
THEN I find semantic HTML elements
WHEN I view the structure of the HTML elements
THEN I find that the elements follow a logical structure independent of styling and positioning
WHEN I view the image elements
THEN I find accessible alt attributes
WHEN I view the heading attributes
THEN they fall in sequential order
WHEN I view the title element
THEN I find a concise, descriptive title
My task for this project was to update the html file for SEO optimization and to create accessibility. The file was originally created with mainly div tags only in the body section. My first step was to change all the div tags to semantic tags to improve SEO otimization and accessibility as tasked. This made it much easier to view and categorize the code.
Once my div tags were changed in the html file, I made the corresponding changes to the css file. The original div tags also included classes and ids that I thought were unecessary for the most part so I deleted all classes and ids from the html file. I then went on to consolidate the css selectors where applicable to shorten the file and reduce redundancy.
Once all the above was completed, I realized that the "jump-to" links in the header no longer worked (if they ever did in the first place) and that I needed to correct the links.
I am happy to announce that this is my first README file!! This was also my first SEO optimization and refactor of code to make it more accessible. This project was eye-opening for me. The semantics tags make much more sense now and it's easy to see why they are needed.