Accessibility Presentation
Owen Jones
September 2014
WCAG 2.0 and Government websites
• Developed by the World Wide Web Consortium
– http://www.w3.org/
• Australian Government mandate: all Government
websites to comply with WCAG 2.0 Level A 31/12/2012
and Level AA 31/12/2014
– http://webguide.gov.au/accessibility-
usability/accessibility/
• Australian Human Rights Commission - WWW Access:
Disability Discrimination Act Advisory Notes ver 4.0
(2010)
– http://www.humanrights.gov.au/world-wide-web-access-
disability-discrimination-act-advisory-notes-ver-40-2010
Disabilities
• Visual
• Hearing
• Physical
• Cognitive
Tools
• Web Accessibility Toolbar – a free
download from Vision Australia that
runs inside Internet Explorer
Tools
• Colour Contrast Analyser – another
free tool that runs within the Web
Tools
• Complex Table Toolbar
Assistive technologies
• Screen readers - vision impaired, reading
difficulties such as dyslexia (JAWS 10+)
Assistive technologies
• Screen magnifiers - used when
increasing text not sufficient. Custom
colour schemes, contrast.
Assistive technologies
• Keyboard users - blind, vision impaired,
temporary and long term mobility
impairments.
Web Best Practice
• Usability/Search Engine
Optimisation/Writing for the
Web/HTML technologies
• Many best practice techniques overlap
between these areas and are of mutual
benefit.
Content, Structure and Formatting
Page Titles
• Clearly identify the content and/or purpose of the page.
• Use familiar keywords.
• Frontload keywords.
• Keep it concise (up to 60 characters including spaces and
punctuation).
• Unique titles for each page.
Content, Structure and Formatting
Page Titles
• Add titles to non html documents such as PDF, Word, Excel
and PowerPoint in document properties.
• Include the organisation name
– E.g. "School of Arts & Social Sciences - Studio One29"
– ideally we would have "Studio One29 - School of Arts &
Social Sciences - SCU"
• When scanning search results it is useful if the keywords are
positioned the left most information in a title. (example)
• Do not use abbreviations.
Content, Structure and Formatting
Headings h1-h6 etc
• Like page titles, headings should be:
– Concise
– Unique
– Front-loaded with key terms
• h1 is reserved for top of page heading as set in Websys and a
page cannot have more than one h1 heading (example).
• Do not use headings for non heading content.
• Do not skip heading levels when going to lower levels
– h2 can be followed by h2 or h3
Content, Structure and Formatting
Writing Content
• Reading online should be:
– Functional, focused and scannable
• Key behaviour
– Move quickly, F-shaped reading pattern, attention on left side of
screen.
• Headings - Front-load with keywords
– Front loading best practice
– "more information about text" change to "text - more information"
– Avoid upper case for complete words or sentences.
Content, Structure and Formatting
Writing Content
• Plain English - Tools Flesch-Kincaid Grade, Word - 9 or
lower
– Readability http://www.read-able.com/
– "show readability statistics" in Spelling and Grammar (Word)
• Contrast - Ensure copy contrasts with the background
colour at all times. Use the Vision Australia Colour
Contrast Analyser.
• Abbreviations - expand all abbreviations "Regional
Universities Network (RUN)".
Content, Structure and Formatting
Lists
• Choose the most appropriate HTML list element for lists:
– ol for ordered lists
– ul for unordered lists
– dl for definition lists
• Example list:
• <ul>
• <li>item one</li>
• <li>item two</li>
• <li>item three</li>
• </ul>
Content, Structure and Formatting
Quotations
• Use <blockquote>
Emphasis and Strong
• Use <em></em> instead of <i></i>
• Use <strong></strong> instead of <b></b>
Content, Structure and Formatting
Links
• The purpose of each link must be determined from the
link text alone or together with its programatically
determined link context.
• E.g must be in the same paragraph, list, table cell,
sentence.
• "Outstanding staff recognised at annual Vice
Chancellor’s Awards for Excellence… continue reading"
• Avoid "click here" and "more" links.
Content, Structure and Formatting
Links
• Avoid using URLs, although may be included in
addition.
• Indicate when a new window is opened "Visit the
Regional Universities Network (new window)"
• Linked text should be contained on the destination
page in:
– Title
– Main content heading H1
Content, Structure and Formatting
Images
• Avoid text in images, logo only acceptable exception.
• alt txt - Short, long or blank (example)
• alt must be equivalent and meaningful representation of
image message.(example)
• Images that convey the same information as nearby text
are considered decorative (example).
• Decorative - require alt="" or inclusion via CSS.
Content, Structure and Formatting
Images
• Images coded as a link must be given alt text
• Images coded within a text link must have alt=""
(examples)
• Image maps must have textual descriptions for hotspots.
• Complex images and diagrams need longer description,
can be provided as yet content on same page or text
linked to separate page. (example)
• Charts should be described in detail or data provided as
a data table.
Content, Structure and Formatting
Tables
• Screen readers browse through tables cell by cell.
• Use 'th' and 'td' to distinguish header and data cells.
• Use simple data tables where possible.
• Use 'summary' to describe a data table.
• Avoid layout tables, use <div> elements and CSS.
• Vision Australia has a Complex Table Toolbar for
help marking up complex tables
Content, Structure and Formatting
Video
• Audio description can be added post production in
existing audio spaces.
• Must provide closed captions for deaf visitors.
• Must provide transcript copy on the page or clearly
linked to additional transcript page. (example SHHS
video)
• http://www.visionaustralia.org/digital-access-youtube
Content, Structure and Formatting
Video
• Transcript must contain:
– Sounds
– The setting and background
– Actions and expressions
– Text or graphics
– Any other useful information
• HTML 5 Video not supported by all browsers (IE7/8)
• SCU preferred video delivery system uses YouTube,
contact Web Content Editor for enquiries.
Content, Structure and Formatting
Audio
• Must provide alternative to audio (text transcript)
for deaf visitors.
• Avoid using audio that plays automatically
• HTML 5 Audio not supported by all browsers (IE7/8)
Content, Structure and Formatting
Animation
• Avoid Flash based content.
• Flash can be made accessible however this is complex
and prone to keyboard traps.
• Do not use content that flashes (more than 3 times in
any 1 second period) may cause visitors with epilepsy to
fit.
• Moving content can make pages inaccessible to users
with reading disabilities or attention deficit disorders.
• Include stop, pause or hide controls.
Content, Structure and Formatting
iframes
• Provide descriptive titles for iframes like YouTube
video embeds or third party widgets (Check with
Staffweb).
Content, Structure and Formatting
Forms
• Use 'label' element to associate form fields with labels or
'title' where there is no label.
– <label for="name">Name</label> <input type="text" id="name"/>
• Position labels before text areas and drop down menus.
• Position labels after checkboxes and radio buttons.
• Place labels close to their input controls.
• Labels must:
– Be specific and descriptive.
– Indicate whether data is "required".
– Describe required format.
Content, Structure and Formatting
Captcha
• Avoid image CAPTCHA solutions
• use simple clear non-cultural specific logical
question/answer text and text field submit form.
Validating Code
• Valid HTML is very important for Accessibility. Check
your code with the W3C Markup Validation Service
• http://validator.w3.org/
Best Practice
• Governance
• Awareness
• Implementation
• Integration
• Monitoring
Reference
Tools
• Web Accessibility Toolbar – A free download from
Vision Australia that runs inside Internet Explorer
• Colour Contrast Analyser – A free tool that runs
within the Web Accessibility Toolbar once installed
• W3C Markup Validation Service - This validator
checks the markup validity of Web documents in
HTML
Reference
Information
• World Wide Web Consortium (W3C) http://www.w3.org/
• Australian Government mandate: all Government websites
to comply with WCAG 2.0 Level A 31/12/2012 and Level AA
31/12/2014 http://webguide.gov.au/accessibility-
usability/accessibility/
• Australian Human Rights Commission - WWW Access:
Disability Discrimination Act Advisory Notes ver 4.0
(2010) http://www.humanrights.gov.au/world-wide-web-
access-disability-discrimination-act-advisory-notes-ver-40-
2010

Owen accessibility-2015.pptx

  • 1.
  • 2.
    WCAG 2.0 andGovernment websites • Developed by the World Wide Web Consortium – http://www.w3.org/ • Australian Government mandate: all Government websites to comply with WCAG 2.0 Level A 31/12/2012 and Level AA 31/12/2014 – http://webguide.gov.au/accessibility- usability/accessibility/ • Australian Human Rights Commission - WWW Access: Disability Discrimination Act Advisory Notes ver 4.0 (2010) – http://www.humanrights.gov.au/world-wide-web-access- disability-discrimination-act-advisory-notes-ver-40-2010
  • 3.
  • 4.
    Tools • Web AccessibilityToolbar – a free download from Vision Australia that runs inside Internet Explorer
  • 5.
    Tools • Colour ContrastAnalyser – another free tool that runs within the Web
  • 6.
  • 7.
    Assistive technologies • Screenreaders - vision impaired, reading difficulties such as dyslexia (JAWS 10+)
  • 8.
    Assistive technologies • Screenmagnifiers - used when increasing text not sufficient. Custom colour schemes, contrast.
  • 9.
    Assistive technologies • Keyboardusers - blind, vision impaired, temporary and long term mobility impairments.
  • 10.
    Web Best Practice •Usability/Search Engine Optimisation/Writing for the Web/HTML technologies • Many best practice techniques overlap between these areas and are of mutual benefit.
  • 11.
    Content, Structure andFormatting Page Titles • Clearly identify the content and/or purpose of the page. • Use familiar keywords. • Frontload keywords. • Keep it concise (up to 60 characters including spaces and punctuation). • Unique titles for each page.
  • 12.
    Content, Structure andFormatting Page Titles • Add titles to non html documents such as PDF, Word, Excel and PowerPoint in document properties. • Include the organisation name – E.g. "School of Arts & Social Sciences - Studio One29" – ideally we would have "Studio One29 - School of Arts & Social Sciences - SCU" • When scanning search results it is useful if the keywords are positioned the left most information in a title. (example) • Do not use abbreviations.
  • 13.
    Content, Structure andFormatting Headings h1-h6 etc • Like page titles, headings should be: – Concise – Unique – Front-loaded with key terms • h1 is reserved for top of page heading as set in Websys and a page cannot have more than one h1 heading (example). • Do not use headings for non heading content. • Do not skip heading levels when going to lower levels – h2 can be followed by h2 or h3
  • 14.
    Content, Structure andFormatting Writing Content • Reading online should be: – Functional, focused and scannable • Key behaviour – Move quickly, F-shaped reading pattern, attention on left side of screen. • Headings - Front-load with keywords – Front loading best practice – "more information about text" change to "text - more information" – Avoid upper case for complete words or sentences.
  • 15.
    Content, Structure andFormatting Writing Content • Plain English - Tools Flesch-Kincaid Grade, Word - 9 or lower – Readability http://www.read-able.com/ – "show readability statistics" in Spelling and Grammar (Word) • Contrast - Ensure copy contrasts with the background colour at all times. Use the Vision Australia Colour Contrast Analyser. • Abbreviations - expand all abbreviations "Regional Universities Network (RUN)".
  • 16.
    Content, Structure andFormatting Lists • Choose the most appropriate HTML list element for lists: – ol for ordered lists – ul for unordered lists – dl for definition lists • Example list: • <ul> • <li>item one</li> • <li>item two</li> • <li>item three</li> • </ul>
  • 17.
    Content, Structure andFormatting Quotations • Use <blockquote> Emphasis and Strong • Use <em></em> instead of <i></i> • Use <strong></strong> instead of <b></b>
  • 18.
    Content, Structure andFormatting Links • The purpose of each link must be determined from the link text alone or together with its programatically determined link context. • E.g must be in the same paragraph, list, table cell, sentence. • "Outstanding staff recognised at annual Vice Chancellor’s Awards for Excellence… continue reading" • Avoid "click here" and "more" links.
  • 19.
    Content, Structure andFormatting Links • Avoid using URLs, although may be included in addition. • Indicate when a new window is opened "Visit the Regional Universities Network (new window)" • Linked text should be contained on the destination page in: – Title – Main content heading H1
  • 20.
    Content, Structure andFormatting Images • Avoid text in images, logo only acceptable exception. • alt txt - Short, long or blank (example) • alt must be equivalent and meaningful representation of image message.(example) • Images that convey the same information as nearby text are considered decorative (example). • Decorative - require alt="" or inclusion via CSS.
  • 21.
    Content, Structure andFormatting Images • Images coded as a link must be given alt text • Images coded within a text link must have alt="" (examples) • Image maps must have textual descriptions for hotspots. • Complex images and diagrams need longer description, can be provided as yet content on same page or text linked to separate page. (example) • Charts should be described in detail or data provided as a data table.
  • 22.
    Content, Structure andFormatting Tables • Screen readers browse through tables cell by cell. • Use 'th' and 'td' to distinguish header and data cells. • Use simple data tables where possible. • Use 'summary' to describe a data table. • Avoid layout tables, use <div> elements and CSS. • Vision Australia has a Complex Table Toolbar for help marking up complex tables
  • 23.
    Content, Structure andFormatting Video • Audio description can be added post production in existing audio spaces. • Must provide closed captions for deaf visitors. • Must provide transcript copy on the page or clearly linked to additional transcript page. (example SHHS video) • http://www.visionaustralia.org/digital-access-youtube
  • 24.
    Content, Structure andFormatting Video • Transcript must contain: – Sounds – The setting and background – Actions and expressions – Text or graphics – Any other useful information • HTML 5 Video not supported by all browsers (IE7/8) • SCU preferred video delivery system uses YouTube, contact Web Content Editor for enquiries.
  • 25.
    Content, Structure andFormatting Audio • Must provide alternative to audio (text transcript) for deaf visitors. • Avoid using audio that plays automatically • HTML 5 Audio not supported by all browsers (IE7/8)
  • 26.
    Content, Structure andFormatting Animation • Avoid Flash based content. • Flash can be made accessible however this is complex and prone to keyboard traps. • Do not use content that flashes (more than 3 times in any 1 second period) may cause visitors with epilepsy to fit. • Moving content can make pages inaccessible to users with reading disabilities or attention deficit disorders. • Include stop, pause or hide controls.
  • 27.
    Content, Structure andFormatting iframes • Provide descriptive titles for iframes like YouTube video embeds or third party widgets (Check with Staffweb).
  • 28.
    Content, Structure andFormatting Forms • Use 'label' element to associate form fields with labels or 'title' where there is no label. – <label for="name">Name</label> <input type="text" id="name"/> • Position labels before text areas and drop down menus. • Position labels after checkboxes and radio buttons. • Place labels close to their input controls. • Labels must: – Be specific and descriptive. – Indicate whether data is "required". – Describe required format.
  • 29.
    Content, Structure andFormatting Captcha • Avoid image CAPTCHA solutions • use simple clear non-cultural specific logical question/answer text and text field submit form.
  • 30.
    Validating Code • ValidHTML is very important for Accessibility. Check your code with the W3C Markup Validation Service • http://validator.w3.org/
  • 31.
    Best Practice • Governance •Awareness • Implementation • Integration • Monitoring
  • 32.
    Reference Tools • Web AccessibilityToolbar – A free download from Vision Australia that runs inside Internet Explorer • Colour Contrast Analyser – A free tool that runs within the Web Accessibility Toolbar once installed • W3C Markup Validation Service - This validator checks the markup validity of Web documents in HTML
  • 33.
    Reference Information • World WideWeb Consortium (W3C) http://www.w3.org/ • Australian Government mandate: all Government websites to comply with WCAG 2.0 Level A 31/12/2012 and Level AA 31/12/2014 http://webguide.gov.au/accessibility- usability/accessibility/ • Australian Human Rights Commission - WWW Access: Disability Discrimination Act Advisory Notes ver 4.0 (2010) http://www.humanrights.gov.au/world-wide-web- access-disability-discrimination-act-advisory-notes-ver-40- 2010