accessibility on the web

21
ACCESSIBILITY FOR THE WEB

Upload: jessica-keyes

Post on 15-May-2015

255 views

Category:

Design


3 download

DESCRIPTION

Presentation given at Baltimore Lean Startup meetup, July 24, 2012.See with additional content at prairieskydesigns.com.

TRANSCRIPT

Page 1: Accessibility on the Web

ACCESSIBILITY FOR THE WEB

Page 2: Accessibility on the Web

Goal: Make all public library websites in Maryland fully compliant with Section 508 Accessibility Standards.

MARYLAND PUBLIC LIBRARY ACCESSIBILITY PROJECT

Page 3: Accessibility on the Web

WHAT IS SECTION 508?

Page 4: Accessibility on the Web

Section 508 of the Rehabilitation Act is a federal law and set of standards.

It requires federal agencies to make their electronic and information technology accessible to people with disabilities.

SECTION 508

Page 5: Accessibility on the Web

Includes:software applications and operating systems

web-based information or applications

telecommunication products

video and multimedia products

self contained, closed products (e.g., information kiosks, calculators, and fax machines)

desktop and portable computers

SECTION 508

Page 6: Accessibility on the Web

The World Wide Web Consortium (W3) maintains standards called WCAG 2.0 (Web Content Accessibility Guidelines, implemented in 2008).

They are international standards.

Section 508 standards will soon be updated to refer developers and site owners to to WCAG.

WCAG 2.0

Page 7: Accessibility on the Web

WHAT IS ACCESSIBILITY?

Page 8: Accessibility on the Web

Accessible web content is usable and meaningful for people with ANY disability, including:

Blindness

Color blindness

Poor sight

Deafness

Reduced motor skills, caused by conditions such as arthritis or amputation

Cognitive impairment

WHO DOES IT SERVE?

Page 9: Accessibility on the Web

Provide text alternative to non-text content, including images, tables, and forms.

Provide transcripts for audio content, or closed captions for video content

Don’t use visual elements such as color or font to communicate important information.

CONTENT MUST BE PERCEIVABLE

Page 10: Accessibility on the Web

All functions must be available from the keyboard.

Give users enough time to read and use content.

Do not use content that causes seizures.

Help users navigate and find content.

SITE MUST BE OPERABLE

Page 11: Accessibility on the Web

Make text readable and understandable by using clear and concise writing

Make content appear and operate in predictable ways by adhering to best practice standards.

Clearly define forms and help users avoid and correct mistakes.

CONTENT MUST BE UNDERSTANDABLE

Page 12: Accessibility on the Web

Maximize compatibility with current and future user tools, such as:Screen readers

Disabling of CSS, Javascript, and/or images

Zooming tools

Mobile devices

SITE MUST BE ROBUST

Page 13: Accessibility on the Web

WHY YOUR SITE SHOULD BE ACCESSIBLE

Page 14: Accessibility on the Web

If your website is not accessible, you will lose valuable market share.

Accessible websites are generally good examples of web design best practices, and will therefore last longer and work better.

It’s not the law yet, but it will be. There have already been successful suits filed against businesses with inaccessible websites.

WHY?

Page 15: Accessibility on the Web

BECOMING ACCESSIBLE

Page 16: Accessibility on the Web

Understand how people with disabilities use the web.

Try:Activating your operating system’s built-in screen reader and navigating your site blindfolded.

Navigating your site using only the keyboard.

Disabling CSS and Javascript, and see if your site is still usable.

TECHNICAL TRICKS

Page 17: Accessibility on the Web

Add alt tags to images

Provide transcripts for audio content

Provide closed captions for video content

Give descriptions to tables and forms

PROVIDE ALTERNATE CONTENT

Page 18: Accessibility on the Web

HTML5 has tags for almost every kind of content. Call your content what it is:

Header (<h1>, <h2>) tags for headers and subheaders

Emphasis (<em>) rather than italic (<i> is deprecated in HTML5)

Ordered list (<ol>) for numbered lists

USE SEMANTIC MARKUP

Page 19: Accessibility on the Web

Use easy-to-read fonts

Use fluid layouts so the site displays properly at any resolution

Leave ample white space to improve readability

Use high-contrast colors

FOLLOW GOOD DESIGN PRINCIPLES

Page 20: Accessibility on the Web

The W3 Web Accessibility Initiative (WAI) website has case studies of people with disabilities using the web.

WAVE shows errors and warnings in context for individual pages

Use your operating system’s built-in text-to-voice software for experiencing your site through a screen reader.

For links to these tools and more, visit prairieskydesigns.com .

TOOLS & RESOURCES

Page 21: Accessibility on the Web

Thank You!

jessica keyes

@prairieskygaljessica.m.keyes@gmail.

com

prairieskydesigns.com