Using KSS could make it easier for us to create a maintainable set of stylesheets that other developers can quickly understand and contribute to.

http://warpspire.com/posts/kss/

From RA

Basically as the new styling doesn’t collapse until you get beyond the third level, then many of the content pages will be pushed two or more screen lengths in size due to the nav col. For example we may have 5 level 1 category headings/links with each one of them having 4 or 5 level two subcategory links, then if you throw in a couple of Level 3s it all just becomes one long list of links that pushes off the bottom of the screen and leaves a lot of empty space in the main content area.

I tried dropping the html from documentation on how to use best:

http://brand.unimelb.edu.au/web/docs/docs/docs/

Into a test app:

http://vote-uat.unimelb.edu.au/

And my first problem is that the links across the top of the page dont work. What is the proposed way to work around this?

Expert reviewer's comment:

The use of headings would be clearer if content were added, I think.
As it stands, the headings are a helpful navigational aid,
but their contents aren't always heading-like, which could be confusing.

Remedy:

Some of the headings in index.html are really content. For example, the text 'From February 22-25 Get Involved, get connected' is presented as a heading, when really it is content.

Example:

Change
`

to
`

Problem:

The translate form does not have any labels associated with it.

WCAG Guideline

Success Criteria 3.3.2 - Labels or Instructions

Sufficient labels, cues, and instructions for required interactive elements are provided.

Remedy:

Add a label to the form.

Example

Change
<strong>Translate this page</strong> ... <select name="tl">

to
<label for="tl"><strong>Translate this page</strong></label> ... <select id="tl" name="tl">

Do we improve Fancybox or improve an accessibility compliant tool?

Ambitious, but could our styles be modelled on-top of the twitter bootstrap giving us all of the functionality.

• eg. common requests for the ability to divide pages by thirds.

Recently the styling and/or positioning of items on a few of the Faculty of Arts Drupal sites has changed without the FoA staff making any changes to their content or CSS. I've heard the same from other Drupal developers working on Unimelb Drupal sites.

Are changes (even if only bugfixes) being made and pushed to the hosted 1-1-0 version of the injector.css or complete.css on brand.unimelb.edu.au at all?

Currently fancybox is not accessible due to keyboard traps (more details to follow), so this needs to be resolved in order to meet WCAG 2.0 AA standards.

Problem:

The Google icon in the translate pop-up is missing ALT text.

WCAG Guideline

Success Criteria 1.1.1 – Non-text Content

All images, form image buttons and image map hot spots have equivalent alternative text. Images that do not convey content, are decorative or with content that is already conveyed in text are given null alt text (alt=””) or implemented as CSS backgrounds. Form inputs have associated labels.

Remedy:

Add ALT text to the image.

Example

Change
<img src="http://translate.googleapis.com/translate_static/img/mini_google.png" style="position: relative; top: 5px;">

to
<img alt="google" src="http://translate.googleapis.com/translate_static/img/mini_google.png" style="position: relative; top: 5px;">

There appears to be a bug with the banner (look at index.html file in 1-1-0 release). Have spoken with Anthony about this and he has advised log this issue and scale back to 1-0-0 on the sales site.

Expert reviewer's comment:

The other notable oddity, which isn't really a major accessibility issue,
is that in your templates, there is a paragraph preceding the first heading.
Anyone who is navigating back and forth by headings will miss it, obviously,
but the paragraph will be presented immediately after the page is loaded, as
the focus is at the start of the document.

Discussion:

Interesting observation. I will look into this further.

We can do this directly through navigation.js.

See: https://the-university-of-melbourne-web-templates.tenderapp.com/discussions/suggestions/14-namespacing-of-javascript-functions#comment_7744770

The current version in http://brand.unimelb.edu.au/web/docs/ is 1.1.0, but I couldn't find the 1.1.0 tag in git repos.

The idea here is to make any images used on our websites retina-able. This would include both header/footer injection images, but also providing a way for web developers to consistently provide retina-scale graphics for use on other websites.

Problem:

The menu heading color (#6685A4), i.e. ‘Example Navigation’, and menu link color (#3E658E), i.e. ‘About Us’, are very similar.

WCAG Guideline

Success Criteria 1.4.1 - Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. If color alone is used to distinguish a link from surround text, it has additional differentiation (e.g. it becomes underlined) which appears when the link is hovered over or receives focus.

Remedy:

Make it very clear what is a heading and what is a link. Using blue for both headings and links is confusing.

Problem:

The drop down navigation menu doesn't have an ARIA role assigned to it.

Remedy

Add an ARIA role to the navigation.

Example

Change
<div class="mobile-nav">

to
<div class="mobile-nav" role=”navigation”>

Notes

This is another outstanding issue from the 0.9.2 report

Expert reviewer's comment

The forms were also accessible, except that I couldn't select the first option
of the "gender" form - it appears to be a straightforward HTML form, so it's
probably another Mozilla bug that you won't have to consider as it will almost
certainly go away soon. If any Javascript touches it, though, then that's a
different story.

Problem

This appears to be caused by a known issue as described in WCAG Technique H44:
The HTML and XHTML specifications allow both implicit and explicit labels. However, some assistive technologies do not correctly handle implicit labels (for example, <label>First name <input type="text" name="firstname"></label>).

Remedy

Use legends to identify groups of form controls. See WCAG Technique H71.
Explicitly associate labels with input fields using 'for' and 'id' attributes.
CSS will need to be adjusted.

Radio Button Example

Change
`

Gender

to
`

Gender

Change
`

Dietary Requirements

to
`

Dietary Requirements

Expert reviewer's comment:

The alt attributes on this page contain the word "image", which is redundant,
as the user's assistive technology will typically identify the objects as images;
I would remove it.

Remedy:

In index.html change:
<img src="images/page-preview.png" height="100%" width="100%" alt="newsbanner feature image"></a>

to
<img src="images/page-preview.png" height="100%" width="100%" alt="newsbanner feature"></a>

See: https://the-university-of-melbourne-web-templates.tenderapp.com/discussions/suggestions/14-namespacing-of-javascript-functions#comment_7744770

Problem:

The ‘Skip to ‘Navigation’ and ‘Skip to Content’ links have been disabled. 66% of screen reader users use skip links sometimes or often. The University of Melbourne web site uses skip links reasonably consistently across the site. Removing them on the Library site is likely to make things more difficult for users.

WCAG Guideline

Success Criteria 3.2.3 – Consistent Navigation

Navigational mechanisms that are repeated on multiple pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Remedy:

Edit line 38 of styles.css.

Example

Change
.skiplinks { display: none;}

to
.skiplinks { position: absolute; left: -900em; width: 100em; overflow: hidden; }

Problem:

The repeated links ‘Read more’ might create confusion depending on its code context.

Note: This same issue has been addressed in index.html

WCAG Guideline

Success Criteria 2.4.4 - Link Purpose (in Context)

The purpose of each link can be determined from the link text alone or from the link text and it’s context.

Remedy:

Ensure that the surrounding code gives the link context or change the link to match the news item title.

Example:

Change
<h3>Item One</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <a class="button" href="#">Read more #1</a>

to
<h3>Item One</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a class="button" href="#">Read more #1</a></p>

Things to consider

• disappearing menu items
• footer display
• grid behaviour on smaller devices
• potentially mobile-first css approach (eg. load mobile css by default and then load desktop versions)

Hi,

The favicon.ico in the template is a blue circle, is that one we should use? I have been replacing it to the current unimelb favicon, but let me know if I should follow use the one provided in the template.

Problem:

The text ‘A pioneering research university, The University of Melbourne has a the largest cohort of research students in Australia’ has a contrast ratio with the background of 1.2:1 at worst.

WCAG Guideline

Success Criteria 1.4.3 - Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except incidental text or images and logotypes. Large text (over 18pt or 14 pt bold) has a contrast ratio of at least 3:1.

Remedy:

Ensure that the contrast ratio between text and background is at least 4.5:1

Problem:

In some places, particularly the bottom left of the letters, the contrast between the heading ‘The Graduate School of Science’ and the background is 2.8:1

WCAG Guideline

Success Criteria 1.4.3 - Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except incidental text or images and logotypes. Large text (over 18pt or 14 pt bold) has a contrast ratio of at least 3:1.

Remedy:

Ensure the contrast ration between the heading ‘The Graduate School of Science’ and the background is at least 3:1.

Example

Change
.header .hgroup h1 { text-shadow: 1px 1px 2px #002244; ... }

to
.header .hgroup h1 { text-shadow: 0.5px 0.5px 4px #002244; ... }

See http://d.pr/oVyw

Can fix by removing col-2 and wrapping both navigation and aside into its own div with class="col-2".

Expert reviewer's comment

The controls for switching to another language were accessible, but after
switching, I couldn't find the translated content on the updated page. All
that I could read was the Google menu with the options for selecting either
the translated or original content and for performing another translation.
furthermore, the radio button to choose the original content (i.e., to return
to the English page) didn't show up in the tab order of the page for some
reason. There was an iframe shown but I couldn't access the content (I'm
assuming it's supposed to contain translated text).

Problem

Google Translate opens in a framset which is not accessible. In addition the framset can't be closed.

The Google Translate API has been officially deprecated as of May 26, 2011. The API will be shut off completely on December 1, 2011.

Remedy

I think we should look at moving back to the Google Translate Element. At least that allows users to close the tab.

Could the styles please be changed from display:inline-block to display:block? It makes elements below (particularly notes created by the CMS form builder) float up against it in desktop and mobile view. Screenshots attached.

@media screen and (min-width: 769px)
.uomcontent fieldset label {
width: 412px;
width: 25.75rem;
display: inline-block;
}

Screenshots below: