Improving Website Accessibility And Standards Compliance

HTML and CSS Standards Compliance

You have also been asked to provide the club with a short report explaining the context of the changes and some detail of the amendments you have made to the files. This will help inform any future development of the website.

For this first part of the TMA you should amend the ‘ourc_home.html’ and ‘ourc_data.html’ pages provided, to make both of them standards-compliant in terms of validating to HTML5. You should then link the HTML files to your revised CSS file, and you should ensure that this file validates to CSS level 3, correcting any errors that you might encounter.

You need to make the web pages usable in terms of navigation, the menu placement and the overall look and feel of the prototype site.

In making any changes you should make notes to describe each of the steps you took, and explain why you took them. This will form a short section of your written report. Also, when used well, it is good practice to include coding comments to identify significant parts of your page, or where you have made changes. These are of the following form:

<!--This is a HTML comment. -->

/*This is a CSS comment*/

You should add suitable comments to your code, but note that they should not replace the explanations in your report, but rather guide a reader through your HTML and CSS code.

Your completed HTML files will be tested for standards compliance using the W3C HTML validator, and your CSS will be tested using the W3C CSS Validator.

Your marker will use Google Chrome to view your TMA 01 work. At the time of writing the current version of Chrome is 76. If, for any reason, you cannot test your TMA 01 work on Google Chrome, please inform your tutor immediately.

You will write two sections of the report for Part 1 of this assignment. Each section has an individual focus and word limit, as described below.

• a.In your own words, explain the meaning and importance of standards-compliance of HTML and CSS. Then briefly explain any changes you made to the HTML files and/or the CSS file provided, in order to achieve standards-compliance for the prototype Open University Running Club website.

• b.In your own words, explain the meaning and importance of ‘usability’ in terms of websites. Briefly explain any changes you made to the files provided to ensure the usability of the prototype website.

In this second part of the TMA you are asked to explain and improve the accessibility of the draft HTML pages, now that you have made them standards-compliant and usable. Be clear that for this assignment this refers to accessibility for disadvantaged users as explored in Block 1, not for mobile devices (which will be addressed in Block 3). The OURC President did mention mobile devices in the original discussion with the web developer (see Appendix E), but that is outside the scope of this assignment.

In practical terms, you should think about the needs of a range of different visitors to the website, and how they might access it and the data it provides.

• You should identify at least two specific visitor groups with particular accessibility needs not fulfilled by the current site.
• You should identify what changes might be made to improve accessibility for each of those groups.
• You should then make the necessary changes in the HTML files and/or CCS file to address those issues.

Some changes you make might not alter the site appearance to a user who does not need the feature, so you need to consider carefully how you will test those changes.

Do ensure your HTML and CSS code still validates.

You will write one more section of the report here.

In your own words, explain the meaning and importance of ‘accessibility’ in terms of websites. Then describe the disadvantaged visitor groups that you identified, and explain what changes you made to the HTML files and/or CSS file to improve the accessibility of the prototype site for each group. You also need to explain how you tested each change.

For this part of the TMA you will find the case study accessibility video a useful starting point for your solution. A link to this video is provided below.

If you do choose to test the prototypes using any of the W3C accessibility tools, or other web tools, you may wish to include relevant parts of your findings in your report. If so, you should provide a suitable reference to the tool used.

When you have written the three sections of the report you then need to combine them into a single report. The structure of a report is outlined in Appendix D, and described in more detail below.

First, the report needs an appropriate and meaningful title, such that the readers will clearly understand what it is about.

You must then provide an introduction that explains what the report contains.

Your introduction will be followed by the three sections that you have already written. Each must have a heading and include the word count for that section. Suitable headings would be:

• Standards-compliance
• Usability
• Accessibility

You then need to add a conclusion that briefly summarises what the report has said.

This report is about development of the website where various development aspects are considered which includes the standard-compliance are the set of laws that are introduced by the world wide web consortium and mainly help in the web development process in order to ensure there is moderation in the websites coding process.The report also covers the website usability which is the abilities of the web applications to support web related tasks effectively, efficiently and satisfies the website users. However the Web-accessibility is also considered which refers to the practices that ensure that the website lacks barrier that prevents user’s interactions.

Meaning and importance of standards-compliance of HTML and CSS

The website standard-compliance are the set of laws that are introduced by the world wide web consortium and mainly help in the web development process in order to ensure there is moderation in the websites coding process, page designing process, and also ensuring the website developed is browser compatible. 

There are various types of standards that are used in the website development and they include the following:

1. HTML (HyperText Markup Language):

This is the initial standard that was introduced by the W3C and is highly used in the web design process, this is used as one of the mostly used tool while developing the website’s web pages which are termed as the HTML pages by the developers and acts as the major component in the WWW technology and standard has various structuring elements called tags

2. XML (eXtensible Markup Language):

This is the other standard and unlike the HTML it and  is used by the web developers to customize new tags element in accordance to preset Document Type Definition , however the XML has higher flexibility compared to the HTML and is future-oriented.

 

3. CSS (Cascading Style Sheets):

This  a technology that is used by the developers as a way of changing the web appearance and position while developing a website using the HTML or XML elements and therefore the entire website appearance can be easily be determined by the CSS and thus enabling creating of  simpler and more structured World Wide Web(WWW).

4. DOM (Document Object Model):

This is the technology that enables the web developers to exert power and interactive capability on a Web page. Through this platform and interface the programs and the script are able to dynamically access and update the contents, structures and styles of web document. Therefore the DOM standard simplifies DHTML coding, and make it compatible with other up-coming technologies improvements.

5. ECMAScript (the standardized version of JavaScript):

Importance of Website Usability

This is the other standard that is mainly based on client sides, objects oriented script languages that is various technologies like the Netscape-JavaScript and Microsoft-Jscript.

The standards-compliance in the HTML and CSS has various importance in the field of website development which includes the following:

1. Achieving More Stable Website

The introduction of new hardware that include the mobile and other mobile devices the developers found it hard to develop website that are fully compatible.

2. Reducing the Developments and Maintaining Time

The website development where the standard is applied highly reduces the time taken in the developing and maintaining the website.

3. Allowing Backward Compatibilities and Validations

This standard had also allowed the website to be compliant with the previous web browsers version where the web browser shows the basic structures of Website.

4. Increasing Search-Engine Successes

The standard also had assured better web results and also improvement of the visibilities in the search engine.

5. Graceful Degradations Now, and in the Future

The standard also had enabled the old coded web pages to be compatible and supported by the new web browsers versions.

There are various changes that I had made in the HTML and CSS files to ensure that they are standard-compliant and they include the following:

HTML file changes

1. Inserting title on the “ourc_data.html” page.
2. Adding caption on “ourc_data.html” page data table.

• Removing unclosed td tag on the data table.

1. Placing the table closing tag within the body tags.

CSS file changes

1. Putting semi-colon on the css file body color element.

Meaning and importance of ‘usability’ in terms of website

The website usability is the abilities of the various web applications to be able to support web related tasks effectively, efficiently and with satisfactions to the various website users.  Therefore through the website usability the developers are able to tell how the website is effective efficient and satisfactory to the web visitor and users.

There are various factors that highly impact the usability of the website and they include the following:

1. Web accessibility: This is the feature of the website to enable the various categories of people to access the website that include the people with disabilities.
2. Web responsiveness: This is the feature of the website that supports the responsive web design which as a result provides the optimum view and interactions.
3. Search Engines Optimizations (SEO): This is the issue that affects the visibility of the websites or the web-pages via the search engine.
4. Contents and Messages: This is where the users of the website visit it and search for specific questions and therefore the web developers require to design it in ease, noticeable and with understandability.
5. Layouts & Navigations: This is the determination of ease of the visitors to find the contents they are looking for where they make use of various web tools like.
6. Web-Errors and Effectiveness: This is a measure of the errors that can be encountered with by the web users.
7. Tasks Times and Expectation: This is a measure of the duration that the website visitor is able to achieve his goal.

There is importance of usability in the developed website and includes the following:

1. To Establish the website Credibility

The usability enables the system developers to develop a website that is fully engaging, accurate and with fresh credibility.

2. To Build user’s Trust

The usability is also able to instill trust to the visitors who fear due to the various risks that are associated with internet crimes..

3. To establish User Centred Designs

This is where the website developer ensures they keep the system users in mind where the users are able to navigate with ease to major site components.

4. To give the Customer’s Satisfactions

The developers should keep in mind the relationships with the users and how website is able to meet the visitor’s needs all times.

5. Easy to Learn

This is where the developers develop a website that can be understood by any new visitor without taking much time.

6. Website Efficiencies

The usability will enable the users or web visitors to perform the tasks more quick and efficiently.

7. Easy to Memorize

Factors Impacting Website Usability

This is where the usability enables the users to memorize the system operations and this is established by ensuring that the developers apply professionalism in development.

8. Easy to avoid Error

This is where the users in case they make mistakes they are able to rectify them with ease.

9. Visitors Satisfactions

This is where the usability enables the system users to enjoy while interacting with the system or performing some operations.

Changes made to the files provided to ensure the usability of website

There are various changes that I had made in the HTML and CSS files to ensure that the website usability is adhered to and they include the following:

1. Inserting the “ourc_styles.css” link on the “ourc_data.html” page.
2. Inserting the “ourc_styles.css” link on the “ourc_home.html” page.

• Adding meta tags on the “ourc_data.html” page.

1. Putting a coma on css file sectionhome part “font-family” element.

The Web-accessibility refers to the  practices that ensures that the website has no barrier which is likely to prevent the interactions with ,accessing to the website though the World Wide Web by the various group of people who  physically disabled, situational disabled, and with social economic restriction in the field of  band-widths and speeds.

There are various measures that are put to ensure that the website is fully accessible to the users and they include the following:

1. Using the Alt-tags

This is a tag that describes the various images inserted in the webpage and is as below.

<img src =”image location” alt=”image description”>

Therefore the developer enters the image path and description where the description details are displayed in case the image fails to be displayed on the webpage.

1. Using the Better Table

This is where the developer add the caption on the data table so that to make it easy to understand by the various web visitors instead of adding tittles on the web page tables.

The table caption can be added as below.

<table>
  <caption>title of the table data</caption>
  <tr>
    <th> table header1</th>
    <th> table header2 </th>  
    <th scope="col"> table header3 </th>
    <th scope="col"> table header4 </th>
  </tr>
  <tr>
    <td>table data1</td>
    <td> table data2</td>
  </tr>
</table>

• The Key-board Navigations

This is where the website can be scrolled and navigated using the key board only where items like dropdown menu can be easily scrolled down by the website users.

1. Using the Default HTML Tags

These are the tags that includes the “table, tbody, td, th” and they help in web accessibility other tags includes the “h1, h2, h3” buttons and the links.

1. Closed Caption for Media

These are the captions that are used mainly to hold the video or audio and the closed captions enables the visitors to access the video and audios and also playing them with more convenience.

1. Using the  Accessible Rich Internet Applications (ARIA) Tag

These are sets of HTML attributes which defines how the web contents and web applications becomes highly accessible to the visitors who have disabilities of any type.

• Using the Titles Tags

The title tags are not displayed on the web browsers web page body but it mainly helps the website reader to know the pages through the tabs titles.

While visiting the website there are various groups of people who are disadvantaged and they includes the following:

1. Permanent disabled group:

This is a group of people who are disabled completely and they include the blinds, or the deaf.

2. Temporary disabled group:

This is a group of people who have are physically or mentally disabled and is not able to access the website within a short period of time.

3. Conditional or Situation disabled group:

This is a group of people who are not able to discharge duty due to certain condition like slow internet connections.

There are some changes that were made in the html file in order to ensure that they are highly usable and the changes include the following:

1. Inserting title on the “ourc_data.html” page.
2. Adding caption on “ourc_data.html” page data table.

• Removing unclosed td tag on the data table

1. Placing the table closing tag within the body tags
2. Inserting the “ourc_styles.css” link on the “ourc_data.html” page.
3. Inserting the “ourc_styles.css” link on the “ourc_home.html” page.

• Adding meta tags on the “ourc_data.html” page.

Conclusion

This is a report on how to design a website where various tasks were done where the major issues were to identify the ways to maintain the system standards-compliance, usability, and accessibility. The web system compliance is beneficial through various ways which includes the achieving more stable website, reducing the developments and maintaining time, allowing backward compatibilities and validations, increasing search-engine successes, graceful degradations now and in the future. The website usability is also beneficial in website technology since it establish the website credibility, builds user’s trust, establish user centred designs, give the customer’s satisfactions, enable easy learning, enhances website efficiencies, make it easy to memorize contents, easy to avoid errors, and ensures visitors satisfactions.

References

Dick,B.(2018) IT Project Management Essentials: Information Systems Project Methodology

Kindle Edition.1^st edn.New York:Amazon Digital Services LLC.

Elmasri,E.(2013) Database Systems: Models, Languages, Design and Application Programming. 2^nd edn  India: PEARSON EDUCATION.

Ramez,E.(2015)  Database Systems: Models, Languages, Design and Application Programming

/ International Edition Paperback.2^nd edn. India:PEARSON EDUCATION.

Shamkant, B.(2015)  Fundamentals of Database Systems (7th Edition).India:pearson.

Thomas,C.(2013) Database Systems: A Practical Approach to Design, Implementation and

Management: WITH Success in Your Project.1^st edn. USA:Addison Wesley.

Stephen,H.(2014) Management Information Systems with student CD and MISource.3^rd edn. New York:McGraw/Hill.

Paige,B.(2015) Business Driven Information Systems with MISource 2007 and Student CD.1^st edn New York: McGraw/Hill.

Specialist,I.(2018) CISSP Certified Information Systems Security Professional Study Guide

2018. 1^stNew York:Independently published

Michael,J.(2017) Human Resource Information Systems: Basics, Applications, and Future Directions. 5^th edn.New York :SAGE Publications, Inc.

Tycho,p.(2014) Personal Finance Simplified: The Step/By/Step Guide for Smart Money Management Paperback. 2^nd edn.New York:Tycho Press.