Lab 1 - Part 3 - Questions 1, 2, & 3

 1) Analyse the following websites with regard to usability in general:

TU Dublin

The TU Dubkin website is modern and vibrant. There are a good few useful links directly accessible on the home page, such as information about studying at TU Dublin for Undergraduate, Postrgaduate, Part-Time, and International students. The burger menu gives access to more resources. It is easy to navigate around the website and find necessary information.

Queen's University

The Queen's University website is modern and formal looking. There are fewer direct links on the homepage than the TU Dublin website. Navigation is easy with most useful links present in the burger menu at the top.

University of Edinburgh

The University of Edinburgh website is formal looking. This website has many direct links on the homepage. It is easy to find information like campus maps directly from the homepage. Navigation is easy with most useful links accessible from the nav bar at the top of the page.

 2) What does each website look like on different browser sizes (using resizer for Chrome):

Website Mobile Tablet Desktop
TU Dublin Responsive design, webpage fills the screen size well. Items on the page fit the screen width and it is easy to see the options. The burger menu allows a menu to pop out from the right-hand side of the screen, allowing access to further areas of the website. Website changes layout in tablet mode, some items now side by side where they were on top of each other previously. Burger menu is replaced by links in header. The Desktop version is a more spread out version of the tablet version
Queen's University Responsive design, webpage fills the screen size well. Items on the page fit the screen width and it is easy to see the options. The burger menu allows a menu to pop out from the left-hand side of the screen, allowing access to further areas of the website. Website changes layout in tablet mode, some items now side by side where they were on top of each other previously. Burger menu is replaced by links in header. The Desktop version is a more spread out version of the tablet version
University of Edinburgh Responsive design, webpage fills the screen size well. Items on the page fit the screen width and it is easy to see the options. The burger menu allows a menu to pop out from the top of the screen, allowing access to further areas of the website. Website changes layout in tablet mode, some items now side by side where they were on top of each other previously. Burger menu is replaced by links in header. The Desktop version is a more spread out version of the tablet version
Table 1: University website comparison table

 3) Accessibility analysis of websites using Webaim.org:

Table 2: webaim comparison table
Website Errors Alerts Structural Elements Contrast Errors Features ARIA
TU Dublin 0 30 47 10 28 121
Queen's University 0 8 62 4 11 515
University of Edinburgh 0 17 33 0 18 17

Shown in Table 1 is the relults from Wave.Webaim.org. I think a good way to compare the accessibility is to compare the number of ARIA. ARIA stands for Accessible Rich Internet Applications. ARIA was specification created by the W3C (World Wide Web Consortium) and defines ways to make web content and web applications more accessible to people with disabilities, especially those who rely on assistive technologies like screen readers.
the Queen's University website has by far the greatest number of ARIA at 515, compared to TU Dublin at 121, and University of Edinburgh at only 17. It should be noted that the number of structural elements on the website is proportionate to the number of ARIA. With Queen's University having the most and University of Edinburgh having the least. It should be noted that University of Edinburgh has fewer structural elements than ARIA, so each structural element does not have ARIA. See graph below.

Comments

Post a Comment

Popular posts from this blog

Lab 3 - Part 1 - Cognition

3. Browse three university websites in the USA (observing content, layout, colour, responsiveness): US Universities Content Layout Colour Responsiveness Webber International University The homepage offers direct access to major categories (Academics, Admissions, etc.). Course offerings, on-campus and online programs, contact and location information are present. Some pages may become text heavy, but the structure is logical. The site uses a consistent navigation bar across pages. Flow is straightforward, with major sections clearly segmented (Programs, Catalogs, About). The “Home Video” page is a special visual section. The university’s official colours are Forest Green & Gold. On the website, dark green is used for headers and accent bars; gold/yellow is used for highlights. The site doe...
Read more

Lab 4 - Part 1 - Coding and Validation

Image
2. Code validator tests Validators used: HTML Validator CSS Validator HTML error(s) I had one error. I had added some images to my Fishcreek website, when adding them, before styling with CSS, I included attributes for "width" and "height". These were not needed. The HTML checker didn't like my use of 100% for width, it expected a value, and "auto" for height. I had the same error for 4 images. Error HTML <img src="fishcreek.jpg" alt="Fish Creek" width="100%" height="auto" class="fishcreek-image"> HTML fix(es) I was able to fix the errors by removing the width and height attributes. This did not change how my website rendered. Fixed HTML <img src="fishcreek.jpg" alt="Fish Creek" class="fishcreek-image"> CSS error(s) I had no CSS errors. However I had a warning. I had accidentally set both the color and background-color property's of m...
Read more

Lab 2 - Part 3 - SEO

1. What I Learned About SEO I explored the articles from Moz , Hobo , Increasily , Backlinko , Single Grain , Search Engine Journal , Leadfeeder , RankToday , and Google . Each of these articles highlighted best practices for improving search visibility and user experience. ChatGPT’s SEO guidance aligned closely with these sources. The key recommendations that could be confirmed across multiple references were: Use clear, descriptive <title> tags - ideally 50-60 characters, including keywords. This helps both Google and users understand the topic of each page. Structure pages with a single <h1> followed by meaningful <h2> and <h3> headings. This creates a logical hierarchy and improves accessibility. Write helpful, user-focused content that satisfies search intent. Avoid keyword stuffing; relevance and clarity matter more. Include structured data (Schema.org) to help search engines understand your business type and enable rich snippets. ...
Read more