Retrofitting Websites for Accessibility David Mulder, Academic Technology Services.

Slides:



Advertisements
Similar presentations
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Advertisements

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Chapter 3 – Web Design Tables & Page Layout
Web Development & Design Foundations with XHTML
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
ADA Compliant Websites & Documents What the heck am I supposed to do?
Internal information 1 EPi/Policy training UK September 12, 2008.
Web Accessibility Web Services Office of Communications.
Introduction to Web Accessibility. What is Web Accessibility Web accessibility means that people with disabilities can use the Web Disabilities including.
A Web Accessibility Primer: Usability for Everyone XX Presenter Name Presenter Title Presenter Contact Office of Web Communications.
Building Accessibility Into The Workflow Rick Ells Computing & Communications University of Washington Seattle, Washington
Computing Concepts Advanced HTML: Tables and Forms.
Visual Organization and Website Design Unit 5 (no CSS) September 19.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Adobe Reader and Acrobat Professional Adobe LiveCycle Designer Microsoft Office Word PowerPoint.
Creating and publishing accessible course materials Practical advise you can replicate.
WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs
Designing for the Web 7 Useful Design Principles.
Creating a Simple Page: HTML Overview
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Multimedia and the Web Chapter Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.
IT Introduction to Website Development Welcome!
Planning an Accessible Website: Beyond Alt Tags Stephanie M. Randolph School of Health, Physical Education, and Recreation Indiana University.
Workshop 2 Coding an Accessible Website Web Content Accessibility Project Funded by BCcampus Natasha Boskic, Kirsten Bole, Nathan Hapke University of British.
Lesson 4: Using HTML5 Markup.  The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements.
Web Technologies Website Development Trade & Industrial Education
Making Web Content Accessible to Everyone Web Accessibility Team June 9, 2015.
Nov 4, 2002K. Smale - Section 5081 Section 508 What it means for you, the HEASARC and LHEA web developer.
The Internet Writer’s Handbook 2/e Web Accessibility Writing for the Web.
Website Development with Dreamweaver
Web Accessibility PRESENTED BY CINDY BARRY, LITS.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
Web Accessiblity Carol Gordon SIU Medical Library.
Measuring PDF Accessibility PDF a11y Testing for the Rest of a11yBOS 2013 Deque Systems, Inc.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
Is Your Site Accessible? Web Site Testing for Accessibility Presented by: The NYS Forum IT Accessibility Committee The NYS Forum Webmasters Guild Northeast.
Section 508 requirements for Federal Website Design Jon Brundage MDCFUG 4/10/01.
Online Course Design CONTENT DEVELOPMENT Jennifer Freeman ACADEMIC ■ IMPRESSIONS.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
Webmasters’ Guild Word Training. Making Better Word 2007 (and 2003) Documents Styles…Images…Lists Oh my!
WEB ACCESSIBILITY TRAINING FOR CONTENT MANAGERS.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Is Your Site Accessible? Validating Your Web Site.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
1 Web Developer Foundations: Using XHTML Chapter 7 Web Site Design.
Word Create a basic TOC. Course contents Overview: table of contents basics Lesson 1: About tables of contents Lesson 2: Format your table of contents.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Web Site Development - Process of planning and creating a website.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
 Accessibility & Information Architecture Presented by Liz Molleur INF385E April 5 th, 2009.
The User Experience “Keeping Web Accessibility In Mind” Video available online at:
1 Making an Accessible Web Site Sec 508 Standards – How Tos Evelyn Li University of Wisconsin-Fox Valley.
Web Accessibility training An introduction to web accessibility.
Project Objectives Publish to a remote server
Making the Web Accessible to Impaired Users
Information Architecture and Design I
Introduction to Web Accessibility
Microsoft Word Accessibility
Creating ADA Compliant Resources
Creating Accessible Content in WordPress
Web Content Accessibility Beata M. Ofianewska (DG COMM) 7 December 2006 December 2006 COMM C2.
From compliance to usability
Information Architecture and Design I
ADA Compliant Website & Documents
Creating Accessible Electronic Documents
Web content management
Accessible Design Top 10 List
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Retrofitting Websites for Accessibility David Mulder, Academic Technology Services

First, a video Introduction to the Screen Reader

Class overview Review MSU Web Accessibility Policy Set up a test website Remediate the test website One-on-one help (if you want it)

Intended audience Staff Slightly to moderately technical background Directly responsible for maintaining or updating website

MSU Web Accessibility Policy Diverse audience Legal motivation Continue being a leader

MSU Web Accessibility Policy Announced in 2008 All websites: WARF due May 15, 2009 – New: Must be compliant – Existing: Submit a plan for becoming compliant within a reasonable time More info: webaccess.msu.edu

Required vs. Recommended Required – Section WCAG 1.0 Priority 1 – Minimum level of accessibility to make Web pages usable Recommended – WCAG 1.0 Priority 2 + best practices

Accessibility bleeds into usability Many of the remediation steps we’ll take not only benefit users of adaptive technology, but will greatly enhance general site usability as well

The word “user” We use it a lot in Web design & development It may be better to think of “users” as visitors or even customers

Our test site

How to set up our site Go to Download the test site ZIP file to your desktop and follow along with me – Extract files – Open Dreamweaver – Set up a new site – Open up files in a browser

Remediation overview 1.Review your checklist – Triage and prioritize some items 2.Clean up code 3.Retrofit!

1. Review your checklist See your handout copy of the Web Accessibility Review Checklist Alternatively, you can work from one of the evaluation protocol files available on webaccess.msu.edu We’ll talk about a triage approach later

2. Clean up your code Validate code – In Dreamweaver – Using a web-based tool (validator.w3.org) Convert code (if necessary) – Dreamweaver makes this easy

Convert code

3. Retrofit Structure Content Presentation Functionality

Don’t forget We’re working from our test website and checklist, which covers common problems We won’t be covering every problem on the checklist

Structure Navigation Tables Forms

Structure > Navigation REQ #6: Skip links are on each page REC #21: Headers define content areas REC #22: Related items and sub-navigation links are contained in lists REC #25: Page-to-page consistency

Skip links are on each page Importance & Value Required guideline #6 – You must do this An easy way for screen reader users to skip over redundant content Remediation Insert a hyperlink at the to of the page: – Skip to Main Content Insert anchor tag before content –

Headers define content areas Importance & Value Recommended guideline #21 Creates an hierarchy of the page content Greatly enhances accessibility; also improves general usability Remediation Locate logical breaks in content Add tags – Welcome to the Department of Nonlinear Applications – Events

Related items and sub-navigation links are contained in lists Importance & Value Recommended guideline #22 Lists are easier for screen reader users to parse They’re also easier to visually scan Remediation Identify opportunities for lists – Where do you think we could add a list on our test site? Created unordered or ordered lists as appropriate

Page-to-page consistency Importance & Value Recommended guideline #25 Enhances both accessibility and usability If content in global region changes, people might not see it Remediation Where do you see global inconsistencies in our test site?

Structure > Tables REQ #11: Row and column headers are identified in data table REC #31: Data table contains summary and caption attributes

A brief history of tables Began as something purely for data Early developers found tables an easy way to control layout – Things snowballed from there Ideally, you want to use CSS to control layout & presentation (more on this later) When people say “data table”, they’re referring to an actual data table

Row and column headers are identified in data table Importance & Value Required guideline #11 – You must do this Clearly identifies row & column headings for screen reader users Also provides much more powerful selectors for CSS Remediation Identify table headings Modify table code Year Department Head

Data table contains summary and caption attributes Importance & Value Recommended guideline #31 Summaries are seen only by screen readers, captions are visible to everyone Provide information about what’s contained in a data table Remediation Add a summary attribute – Add a caption element – Past directors

Other things to pay attention to with tables See if a table makes sense with stylesheets turned off Don’t format data tables using structural markup

Structure > Forms REQ #14: Forms work properly with assistive technology REC #33: Labels are explicitly associated with form controls REC #34: Important information is not contained between input fields

Forms work properly with assistive technology Importance & Value Required guideline #14 – You must do this Forms are an integral part of using the Web Remediation Add labels

Labels are explicitly associated with form controls Importance & Value Recommended guideline #33 Makes it clear which input a label is referring to Remediation Add labels with a ‘for’ attribute

Important information is not contained between input fields Importance & Value Recommended guideline #34 Screen reader users (and probably everyone) tend to navigate forms by tabbing from one field to the next Important information can be missed Remediation Do you see any examples of this problem on our test site? Move important information ahead of the form

Other things to pay attention to with forms Labels should precede input fields (like text fields) Labels should follow checkboxes and radio buttons

Content Alt descriptions Link phrases & titles Style (headings, sentences, paragraphs, readability) Non-HTML documents Multimedia

Content > Alt descriptions REQ #1: Images containing content are described by meaningful alt and longdesc attributes Not covered here, but important (and required): alt attributes for image maps

Alt & longdesc attributes Importance & Value Required guideline #1 – You must do this Screen readers can’t interpret images yet, so they rely on alt text to describe them Longdesc attributes are less-used, but another option Remediation Add alt attributes – Make the description meaningful or relevant Use “” (blank quotes) to describe purely decorative images

Content > Link phrases & titles REC #13: Link text makes sense out of context REC #14: Text is not repeated for different links Not covered here, but important (and required): meaningful titles for frames

Link text makes sense out of context Importance & Value Recommended guideline #13 Screen reader users will sometimes navigate a page via a list of links Link labels that don’t really describe where they’re going are not helpful Remediation Use link phrases that make sense on their own – Learn more about us by clicking here Make link phrases distinct Title attribute can be used, if necessary

Text is not repeated for links going to different pages Importance & Value Recommended guideline #14 More of a general usability & cognitive issue Identical link labels leading to different pages can be confusing Remediation Choose a meaningful and distinct label for each page and consistently apply it throughout the site

Content > Style REQ #10: Clear and simple language is used throughout the site Not covered here, but important (and required): Changes in content language should be indicated by HTML code

Clear and simple language is used throughout the site Importance & Value Required guideline #10 – You must do this Overly-difficult language is a burden to understanding content – Impacts everyone This is a bit more subjective, and has been a point of contention – See policy clarification in FAQ Remediation Use language & style appropriate for an 8 th -grade reading level This will also clean up REC #28

Non-HTML documents Not covered here, but … Provide links to download plug-ins if they are used (Java, Flash, etc) Inform users when an action will pop-up a new page (use a pop-up icon)

Multimedia Transcripts and synchronized captioning are burdensome, but required under the policy More information about them is available on webaccess.msu.edu

Presentation REQ #2: Content is understandable without the use of color REC #19: CSS is used to format text REC #20: Relative units are used for sizing & positioning REC #28: CSS is used for page layout and presentation

Content is understandable without the use of color Importance & Value Required guideline #2 – You have to do this A color-blind person may struggle to interpret content that only uses color to convey meaning Remediation Modify the content to communicate the same message with alternate means Are there any areas on our test site where we might be failing this checkpoint?

CSS & relative units Importance & Value Recommended guidelines #19, #20, #28 CSS is used to separate content and presentation This separation makes content easier for screen readers to parse Remediation Varies

Linearization Convert a table-based layout to one presented with CSS If you’re going to do this, it may be best to do an overall redesign rather than just as part of retrofitting your website

Functionality JavaScript should be used in a way that degrades gracefully – Enhances presentation of content – Associated with unobtrusive JavaScript – This is an advanced topic

JavaScript libraries Make functionality easier to implement jQuery – Used on MSU homepage MooTools, Scriptaculous, etc.

Accessibility triage The two most important things you can do – Headings – Alt attributes

Plan of attack You can either retrofit or redesign If you want to retrofit, focus on the required elements and also headings – Templates make retrofitting easier If you’re going to redesign, try to meet both required and recommended elements

Breakout sessions If you brought your website, feel free to open it up in Dreamweaver or in a browser Go ahead and get started developing a plan of attack