Self-evaluation report


Introduction

Our webpage is designed as a responsive webpage as it adapts to the screen size, so it's suitable for use on various devices. However, it doesn't implement all accessibility features. It lacks alternative text for images, the contrast between the text and the background is quite low (we only meet some criteria for contrast). It is possible to view and interact with the whole page using only a keyboard and we are also proud of the navigation inside the page.

Accessibility highlights

We determined that the two following were the more important of the 5 guidelines to follow.

We wanted to put emphasis on the appearance of the page. We believe that creating content adaptable to the size of the screen is vital to web development. Making the page look clear and informative was what we strived for.

Improvement plan

  1. Make the table with CRUD functionality; This will make our table on our website dynamic to the point where all functionality is met which results in maximum efficiency and productivity,
    to realise this we make new functions to enable all methods in our documentation
  2. Change the css ,this is going to be done with some bootstrap inspired snippets.
  3. Add alternative text to the images displayed. this will improve our website accessibility by showing what the picture should've been if it doesn't load
  4. Fix the minor technical implementation issues we were reported. This will give the cherry on top to present a smooth running website and good looking code

Appendix

Source 1: Web Content Accessibility Guidelines

Appendix A
Guidelines Evaluation
1.1 Text Alternatives (A)Our page complies on the fact that our "Print" is larger than our website, to make it more readable. The rest of the page unfortunately fails.
1.3 Adaptable (A)Our page has a layout of a small screen, scrolling gets you to new content. However, in a somewhat smaller screen the navbar doesn't register correctly making it comply mostly towards the guidelines but for a small amount (bug) it doesn't comply
1.4 Distinguishable
  • (A)1.4.1 we used :hover so that when you go over our navbar you would see the moving of a different "color", so that the user is alerted
  • (AA)1.4.3 We pass the contrast ratio on large texts, but not for example our slogan in the header.
  • (AAA)1.4.6 We unfortunately don't pass these guidelines, however our 'content' within the brown boxes do comply with the guidelines
2.1 Keyboard Accessible (A/AAA) On both levels we passed, all our website content is accessible using only a keyboard. All links are possible to click and navigation is also possible
2.4 Navigable In general our website is good for navigation. we comply on most fields but a list of some where we do not comply:
  • (AA)2.4.7 Not all fields are focus visible. most are , but when in the navbar it is very hard to see which is "link" is on focus.
  • (AAA)2.4.8 We don't provide a navigation at any point, this is also because we only have one page. making it one depth in.

Source 2: TA Feedback Assignment 1 & 2

Appendix B
Assignment Feedback Aspect of the feedback
2 -> no use of jquery for line 82 a technical implementation detail
2 -> You should have turned your form values object to JSON before posting it. a technical implementation detail
2 -> You could have declared your functions outside the window.onload event and just call them inside. a technical implementation detail
2 -> Works well on the dynamic table. Later on, you could support sorting numerically for the screen size. a potentially negative aspect
2 -> no need for the empty function as an argument in line 87. -- no points deducted just a tip a technical implementation detail
1 -> No use of em tag. a technical implementation detail
1 -> Interactive HTML
  • screensize must be an integer.
  • image must be URL.
  • your form is outside of the product table.
 a technical implementation detail
1 -> MISC You should have used different types for the email and the phone number part in your contact information section. a technical implementation detail
1 -> -2 points for using the style attribute and width in the HTML file. a technical implementation detail
1 -> Giving the whole page for a section is much. You might have added more sections on one page. You should have hidden the inputs and the upload button. a potentially negative aspect
1 -> You should have kept your links when the screen size is changed. This made it non responsive a potentially negative aspect
1 -> Screen and print styles are sufficiently different. a positive aspect
our feedback Our Css could be improved, so that the W3C Guidelines would be met a potentially negative aspect
our feedback Our Css website layout could be improved, a framework like bootstrap would make this far superior and easier a positive aspect
our feedback The table to display the phones is not the correct semantic markup for a modern website, a table could be used more efficiently for technical specifications. a technical implementation detail