NZ Government web standards and Drupal

Sites for NZ Government agencies are required to meet NZ Government Web Standards and Recommendations, as are sites financed by the public through the crown or through public agencies. These guidelines are generally good practice for all websites.

NZ Government Web Standards and Recommendations

• v1.0, March 1.0. Mandatory from 1 January 2008 (via Pub Rec Act 2005)
• http://www.e.govt.nz/standards/web-guidelines/web-standards-v1.0/
• Based on W3C and WAI.
• Compliance checklist

Scope

• 74 standards in v1.0 - not all relevant
• alternate text for non-text elements - screen readers
• visual contrast - low vision users
• macronised content - Māori language
• Printable pages
• Crown copyright

Decide the scope for any project

Why?

• Make sites accessible to all - equity
• trust
• professionalism
• economics
• best practice
• compliance is a means not an end

Drupal

• Off to a good start...
• Could do better

1.1 Alternative text for every text element

• Required by valid XHTML
• Use "" for filler images

1.2 Client side image maps preferred over server side image maps

1.3 Text description of visual track of a multimedia presentation

2.1 Information conveyed with colour must be available without colour

• Set via theme
• Colour widget in TinyMCE

2.2 Contrast between foreground and background colours

• Set in theme
• http://juicystudio.com/services/colourcontrast.php
• http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking...

3.1 Documents validate to published formal grammars

• Primarily a function of theme template files
• Test for valid XHTML esp. Strict
• Drupal core (XHTML 1.0 Strict) and most modules pretty good
• Core patch to enforce unique ids; but can break CSS, JS

3.2 Use elements to convey document structure and mark up lists properly

• Drupal Core and theme templates, esp. theme('list_items')

3.3 Do not use deprecated features of W3C technologies

• Drupal core and contrib
• e.g. <CENTER>, <FONT>, <U>
• Test via validation

3.4 Relative rather than absolute units

• Drupal core and theme template files
• UTF-8

4.1 Document size and type with document links

• Default file attachments show filesize
• File icons via theme template theme('upload_attachments', $files)

4.2 Publish documents in most accessible format possible

• RTF!
• Need docvert pipeline, http://holloway.co.nz/docvert/

4.3 Use of PDF documents

• HTML and RTF considered more accessible
• if you must use PDF, specifiy version
• Use Acrobat Accessibility Guidelines

4.4 Web site documents for specialist audiences identified as such

• Avoid .doc, .docx etc.
• Specify specialist nature

4.5 Web site special-purpose documents identified as such

5.1 Identify changes in natural language of document text

• Specify en-nz in page template.

5.2 Identify the primary natural language of a document

• en-nz in document template

5.3 Expansion of abbreviations and acronymns in a document

• No TinyMCE widget

5.4 Substituting umlauted vowels for macronised words

• Specify UTF-8
• Use macronised characters or entities, e.g. Māori
• TinyMCE-plugin: http://research.elabs.govt.nz/macrons-on-the-net/
• Turn on i18n in pathauto to map macronised titles to plain characters.

5.5 Height and width attributes are specified in IMG element

• Usually ok via (image.module) image gallery?
• Some modules creating images don't do height and width, e.g. Avatar Blocks

5.6 Underlining is not used for any items making up text or headings

• Pathauto changed to use - instead of _

5.7 Provide metadata to pages and sites

• Sitewide in page.tpl.php
• Meta Tags module - page descriptions and keywords (nodewords)
• Dublin core - some elements easy in template, but dc-specific efforts stalled
• NZGLS

6.1 Agency sites provide publicly available reports

6.2 Agency sites provide consultation documents

• If applicable, organisation practice

6.3 Agency sites provide press notices from the agency

• Make Media releases from CCK + Date

6.4 Agency sites provide publically available reports

• e.g. postmaster@example.com

6.5 Superceded material is marked as superceded

• CCK + Views + theme template

6.6 Paid advertising not hosted on a site

• Exceptions exist
• Banner module or OpenX and openx.module

7.1 Associate labels explicitly with their controls

• c/- FormAPI

7.2 Create a logical tab order through links

• Document order via theme template, FormAPI

7.3 Include non-link, printable characters between adjacent links

• Add 'separator' menu items linking to #?
• Some debate about accessibility of this

7.4 Web pages are able to be printed in whole

• Printer-friendly module

8.1 Identify the target of each link

• Usage, site practices

8.2 External and internal links are valid

• Link checker module
• W3C Linkchecker
• Input filter to test links on node insert, update

8.3 Compulsory links on every web page*

• page.tpl.php and/or footer menu
• to homepage; alt="Go to home page - Agency Name"
• About this site, e.g. to /about
• Privacy, e.g. to /privacy
• Always make the logo a link (Garland, Bluemarine default)

8.4 Navigation access keys*

• 1=Home, 2=Sitemap, 3=Search, 9=Contact Us, [=Skip to content, / to all of Govt portal
• function phptemplate_menu_item_link($item, $link_item) {
  switch ($item['path']) {
    case 'contact':
       $attributes['accesskey'] = 9;
       break;
  }
  return l($item['title'], $link_item['path'], $attributes, isset($item['query']) ? $item['query'] : NULL);
}
• Build into menu admin UI

8.4 Navigation Access keys*, part 2

• Also in page.tpl.php
• <div class="skip">
<a href="#content" accesskey="[">Skip to content</a>
<a href="#nav" accesskey="]">Skip to main navigation</a>
<a href="/search/node" accesskey="3">Search</a>
</div>
• Can position 'off-page' using CSS

9.1 Organise documents so they may be read without stylesheets

• Use semantic markup
• Consider source order

9.2 Use style sheets to control layout and presentation of page and elements*

• Web 101!
• Drupal core, theme templates
• Use H1 to H6, OL, UL appropriately
• CSS2 specified, but CSS3 ok with graceful degredation

10.1 Ensure dynamic content is accessible

• Text equivalents, for images, shopping carts - AJAX!

10.2 No blinking or scrolling text and flashing objects

• (a) annoyance, (b) disabilities, (c) seizures
• No BLINK or MARQUEE
• Hackers try to cause seizures on epilepsy site (MSNBC)

11.1 Table row and column headers

• TH for headers in rows and columns
• Ok via theme('table', $header, $rows)
• User practice for content (e.g. TinyMCE table tools)

11.2 Mark-up for data and header cells in tables

• <th id="col1" scope="col">, <td header="col1">
• Could force via $attributes: theme('table', $header, $rows, $attributes)
• User practice for content (e.g. TinyMCE table tools)
• theme_table outputs THEAD and TBODY

11.3 Tables for layout

• Just say no.
• Does content make sense when linearised?

11.4 Provide summaries for tables

• Ok via $attributes: theme('table', $header, $rows, $attributes)
• function cc_theme_calendar_view_table($view, $nodes, $type) {
  $output .= theme('table', $view->table_header, $rows, array('class' => 'events', 'summary' => t('Events for group in months until end of current year.')));

• Needs to be built into system tables, views table output, etc.

12.1 Frames are not to be used

• 'nuff said

13.1 Pages usable when scripts, applets and other programmatic objects turned off

• Use unobtrusive javascript

13.2 Alternative event handlers and device dependence

• Not just mouse

14.1 Periodical page auto-referesh

• Not much of an issue
• Auto-logout module

14.2 Page auto-redirecting

• Cool URIs don't change
• Don't redirect using META or scripting to redirect
• Use server side redirect, e.g. Path Redirect module, HTTP 301=Moved Permanently

15.1 - 23.3 later

• tab order, fieldsets, form labels etc. c/- FormAPI
• Privacy, data tracking, cookies, Google Analytics, etc.
• Specifiying compliance with web standards and recommendations in contracts
• Archiving content
• Minimum web browser versions: minimum >1% over 12 months, extensive, comprehensive (IE4)

Testing and Validation

• Test, test and test some more
• OpenWolf: http://www.accessware.co.nz/ (Geoff Munn)
• W3C: X/HTML, CSS, LinkChecker

Maintaining compliance

• Staying valid: using HTML Tidy module
• User education
• Link checker module
• Testing

A Drupal-specific resource

• Online book, with comments enabled
• Capture best practice re NZ Govt Guidelines and Drupal

Thank you for listening

• Any questions?