What's This? Another Introduction to Web Accessibility? PSEWeb 2014
Upcoming SlideShare
Loading in...5
×
 

What's This? Another Introduction to Web Accessibility? PSEWeb 2014

on

  • 85 views

An introduction and ideas to get started with accessible web coding.

An introduction and ideas to get started with accessible web coding.

Statistics

Views

Total Views
85
Views on SlideShare
69
Embed Views
16

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 16

http://www.slideee.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

What's This? Another Introduction to Web Accessibility? PSEWeb 2014 What's This? Another Introduction to Web Accessibility? PSEWeb 2014 Presentation Transcript

  • #a11y #PSEWEB #siteimprove What’s this? Another introduction to Web Accessibility?
  • #a11y #PSEWEB #siteimprove What is the most popular and widely used assistive device ever created? Glasses!
  • #a11y #PSEWEB #siteimprove Web accessibility refers to “the practice of making websites usable by people of all abilities and disabilities.”
  • #a11y #PSEWEB #siteimprove Which standards do I use? What are the benefits of accessible coding standards? Nuts and Bolts Assistive Technology Getting Started Questions
  • #a11y #PSEWEB #siteimprove Marketing staff Web developers Web designers Content managers IT staff Non-technical stakeholders
  • #a11y #PSEWEB #siteimprove WCAG 2.0 Section 508 Web Standards for the Government of Canada AODA (Ontario) BS 8878 (UK) Website Accessibility National Transition Strategy (AU) Which Standards Do I Use?
  • #a11y #PSEWEB #siteimprove W3C • Perceivable • Operable • Understandable • Robust
 • Three levels, A, AA, and AAA WCAG 2.0
  • #a11y #PSEWEB #siteimprove • Mobile Devices (New) • Interoperability • Usability • Accessibility • Web Experience Toolkit • http://www.tbs-sct.gc.ca/ws-nw/index-eng.asp Web Standards For The Government Of Canada
  • #a11y #PSEWEB #siteimprove • Employment • Information and Communications • Transportation • Design of Public Spaces (Built Environment) • Based on WCAG 2.0 • AODA Compliance Wizard • http://www.aoda.ca/ Accessibility for Ontarians with Disabilities Act (AODA)
  • #a11y #PSEWEB #siteimprove 20%
  • #a11y #PSEWEB #siteimprove Social Responsibility Larger Customer Base Efficient Code • Website Maintenance • Device compatibility • Faster pages • Improved SEO Benefits ofAccessible Coding
  • #a11y #PSEWEB #siteimprove Semantic Markup Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages ratherthan merely to define its presentation or look. Nuts & Bolts
  • #a11y #PSEWEB #siteimprove The <title> element: • defines a title in the browser toolbar • displays a title for the page in search engine results • provides a title when a page is added to favorites Nuts & Bolts Title Tags
  • #a11y #PSEWEB #siteimprove • Don't use headings to make text 
 BIG or bold • Search engines use your headings to index the structure and content of your web pages • Users may skim your pages by headings; use headings to show the document structure Nuts & Bolts Headings
  • #a11y #PSEWEB #siteimprove • Images can enhance comprehension • Don't use color only as the sole means of conveying meaning • Use alternative text attributes on your image tags • Be careful using text within images • Use the <alt=“ “> null attribute for decorative images Nuts & Bolts Graphics
  • #a11y #PSEWEB #siteimprove • Clearly identify the target of each link • Good link text should not be too general; 
 don't use "click here." • Specify a "title" attribute that describes the target of the link • Provide a way to bypass or skip a group of links Nuts & Bolts Links
  • #a11y #PSEWEB #siteimprove • Use tables to display data, not layout • Use table headers to organize data • Make forms logical and easy to use • Make forms keyboard accessible • Be sure to use labels with form elements Nuts & Bolts Tables and Forms
  • #a11y #PSEWEB #siteimprove Screen Readers Windows and Mac Accessibility Toolbars/Extensions/Plug Ins Color Contrast Analyzers Mobile Devices Assistive Technology
  • #a11y #PSEWEB #siteimprove Screen Readers Assistive Technology • Screen Readers • Magnifiers • Braille Displays
  • #a11y #PSEWEB #siteimprove Windows and Mac Accessibility Assistive Technology Browser Accessibility
  • #a11y #PSEWEB #siteimprove Toolbars/Extensions/Plug Ins Assistive Technology
  • #a11y #PSEWEB #siteimprove Color Contrast Analyzers Assistive Technology
  • #a11y #PSEWEB #siteimprove Mobile Devices Assistive Technology
  • #a11y #PSEWEB #siteimprove Getting Started
  • #a11y #PSEWEB #siteimprove Know the Rules Getting Started • Which Accessibility Guidelines? • Mark Up and Coding Practices • Organization’s Style Guide
  • #a11y #PSEWEB #siteimprove Practical Training and Testing Plans Getting Started Note: Document creators are not 
 always your web page creators; 
 plan accordingly.
  • #a11y #PSEWEB #siteimprove Low-hanging Fruit Getting Started • Templates • CSS Style Sheets • Distribute The Workload
  • #a11y #PSEWEB #siteimprove High Traffic Pages Getting Started • Top-level pages • Landing pages • Registration pages/forms
  • #a11y #PSEWEB #siteimprove A-level Errors Getting Started
  • #a11y #PSEWEB #siteimprove Tracking and Reporting Getting Started
  • #a11y #PSEWEB #siteimprove Accessible Documents Getting Started
  • #a11y #PSEWEB #siteimprove • Online documents are a huge part of online communication across many industries. • Organizations sometimes rely on their website as 
 the only way of providing these documents. • Accessibility of online documents exposes website 
 owners to the same risks as inaccessible web pages. How Are Documents Part of Web Accessibility? Accessible Documents
  • #a11y #PSEWEB #siteimprove • Understand the document’s structure • Read and understand a document’s content, including text and images • Understand and navigate within the document • Interact with any forms on the document What Defines an Accessible Document? Accessible Documents
  • #a11y #PSEWEB #siteimprove academy.siteimprove.com Accessibility Certification • Non-technical Course • Technical Course • Web Governance Certification Questions?