The purpose of this project is to practice following the Scout Rule by refactoring HTML and CSS starter code to meet accessibility standards. The starter code modifications were made using objectives defined in the following User Story and Acceptance Criteria.
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
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
The following code improvements were made and defined in comments:
- Replaced nonsemantic HTML elements (i.e. div) with semantic HTML elements (e.g. header, section, footer, etc.) Updated corresponding CSS references as needed
- Replaced HTML title element "website" with concise, descriptive title
- Added alt attributes to img elements for accessibility standard compliance
- Updated heading attributes in HTML to ensure sequential ordering
- Consolidated classes in HTML and CSS when possible
The website can be accessed here: https://katiethompson704.github.io/Katie-Thompson-Challenge01-Refractor/
Deployed application screenshots can be found below:
