accessible horiseon
https://aranata.github.io/accessible-horiseon/
description
This is an assignment to refactor an existing codebase to follow a group of accessibility standards so that it is
optimized for search engines. The existing codebase was re-structured by using semantic elements with
adherence to both logical squence and priority traits. This enabled the containers to share relevant information
about the nature of their contents with the search engines. Codebase was simplified, redundant and unused coding were cleared for better accessibility. Such changes transformed the page into a much more recognizable, visible one.
While doing so, other accessibility factors like better readability and easy orientation were addressed by improving the visual distinction among the elements of the layout. Text visibility was enhanced by better line height - font size proportions and an icon was included in the title element. Written definitions were added to all
images and logos via
accessible alt attributes to support screen readers. This work was completed by using HTML and CSS coding.
acceptance criteria
The refactored codebase achieves the following criteria:
- GIVEN a webpage meets accessibility standards:
- WHEN we 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.
usage
Here are the screenshots of the refactored page (up) and the old page (bottom) in full view. Layout elements like the
header (heading + navigation), the main image, the main body with three sections, the aside container that also comes
with three sections and the footer were treated distinctively so as to improve their hierarchy and readability.
Best viewed at full screen, 16:10 aspect ratio.
"The title tag is an important SEO ranking signal and a key contributor to your click through rates." states website.com
in its web site listed among the references below. There was no title element to begin with so it was defined to reflect
the page's identity as much as possible.
some valuable references
These links are listing some valuable references among others that I used doing this project:
https://inviqa.com/blog/web-accessibility-examples-5-sites-doing-it-right
https://favicon.io/favicon-generator/
https://github.com/noffle/art-of-readme
https://html.com/semantic-markup/
https://shields.io/category/dependencies/
credits
Stephen Woosley - Bootcamp Instructor
Patrick Haberern - Bootcamp TA
Tim Nagorski - Bootcamp TA
Sean Walmer - Bootcamp TA
https://github.com/vegaryanneil
https://github.com/zchalk
https://github.com/zackshersh
license
This is an assigment done under a bootcamp program, it is public but please contact the publisher before you use or
change any content.
ghibli.github@gmail.com
badges
ps
This particular readme file is the very first readme file I created.