For this week's challenge, we completed a code refactor of the Horiseon Social Solution Services homepage to optimize it for accessibility and efficiency.
The refactored site has been deployed at this link.
Table of Contents
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
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
- Generic
<div>elements replaced with appropriate semantic HTML elements. - Images updated to include
alt/titleattributes.
- Element classes consolidated where possible.
- CSS ordered to align with HTML file.
- Comments added to HTML and CSS files for clarity.
- Navigation links tested and updated as needed.
- Footer copyright updated to current year.
The refactored site displays almost identically to the original, as shown below.
Site Deployed with Updates:
Mockup Provided:
HTML has been updated to leverage semantic HTML elements.
Updated HTML for Header/Navigation:
Original HTML for Header/Navigation:
CSS has been ordered to align with the HTML file, leverage consolidated classes wherever possible, and identify sections with comments.
Updated CSS:
Original CSS:
