Web Development: Testing and Validation of HTML Site Report

Verified

Added on  2022/10/15

|4
|587
|12
Report
AI Summary
This report details the testing and validation of an HTML website, addressing accessibility and CSS validation. The student's work highlights accessibility checker results, identifying errors related to alt tags and difficulties for users with mobility issues. Solutions include wider clickable areas. The report also covers the registration page with placeholder text input fields and warnings related to missing or incorrect IDs. CSS validation focuses on removing unnecessary selectors, using shallow selectors, and structuring content with clear headers for improved user experience and screen reader compatibility. The website is designed to be navigable with hierarchical menus and keyboard shortcuts, and uses images to supplement text. The report emphasizes improvements for disabled users, ensuring easier navigation and content comprehension.
Document Page
Running head: TESTING AND VALIDATION OF HTML SITE
Testing and validation of HTML site
Name of the Student
Name of the University
Authors note
tabler-icon-diamond-filled.svg

Paraphrase This Document

Need a fresh take? Get an instant paraphrase of this document with our AI Paraphraser
Document Page
1TESTING AND VALIDATION OF HTML SITE
Accessibility checker results
While testing the web pages on the accessibility checker, it is found that there are
error with the alt tag values as no values were assigned for the variables.
While improving the site for the disabled users, it is found that, users with some kind
of mobility problems, it becomes difficult often to click on smaller controls that reside inside
some small clickable area. This task becomes like trying to hit the bulls eye every time when
a dart is thrown. Therefore, on the website a wider range of clickable area is provided for the
disables users so that they can click on it with ease.
For the registration page, as there are numerous text input fields that will be used in
future to get the input from the user and store that in the data base for which there are some
place holders are provided.
Document Page
2TESTING AND VALIDATION OF HTML SITE
For declaring the input field id’s on the pages the following warnings are prompted
And the reason for trigger is also provided which can be removed when the site will
be added with a database to store data. The errors are given by:
A non-existent input, select or text area element
A missing id attribute
A typographical error in the id attribute
Checking of the spelling and case of the id you are referring to.
For the css part validation:
As there are warnings related to the selectors in the css, thus it is suggested to remove
unnecessary selectors so that the server can leverage utility classes in the CSS code.
Selective in case of using selectors
Speaking of selectors, using the descendant selector forces browsers to check all of
your descendant elements for a match, so they can create more problems than they revolve.
Universal selectors can also be rather costly, so steer clear of them too. Use shallow selectors
when possible. In this way the browsers will be able to easily render the pages
Document Page
3TESTING AND VALIDATION OF HTML SITE
In addition to that, it is tried to clearly structure the content on the pages which is
helpful in facilitating overview as well orientation;
Consistent labelling of the used forms, buttons controls and other content;
In addition to that, predictable links that can change the overall interaction;
The website is also developed in such a way that the disabled user can easily
navigate the websites using the hierarchical menu and search through the key strokes;
Simpler text on the web page is supplemented by different images as well as other
illustrations or graphical content. For the ease of use by the overall users and make the site
accessible the content is structured through the use of the headers on different pages. In this
way it becomes easier for the targeted audience to understand the content as well as digest
and improves flow of interaction.
Additionally with the clear headers it is also helpful for the screen readers in order to
interpret the page content. In addition to that, it becomes easier for the users to have navigate
in the pages for some specific information.
chevron_up_icon
1 out of 4
circle_padding
hide_on_mobile
zoom_out_icon
[object Object]