Basic web accessibility
This presentation is the property of its rightful owner.
Sponsored Links
1 / 60

Basic Web Accessibility PowerPoint PPT Presentation


  • 56 Views
  • Uploaded on
  • Presentation posted in: General

Basic Web Accessibility. Nick Ogrizovich Universal Design Technology Lab. Roadmap for today. Accessibility- basics. Legal Basics. POUR. Headings- Structured Formats. ALT text. PDF Accessibility. Captioned Videos. Testing/Validation. Conclusion. What really prompted the web?.

Download Presentation

Basic Web Accessibility

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Basic web accessibility

Basic Web Accessibility

Nick OgrizovichUniversal Design Technology Lab


Roadmap for today

Roadmap for today

Accessibility- basics

Legal Basics

POUR

Headings- Structured Formats

ALT text

PDF Accessibility

Captioned Videos

Testing/Validation

Conclusion


What really prompted the web

What really prompted the web?

  • “The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.”Tim Berners-Lee, W3C Director and inventor of the World Wide Web


Legal basics

Legal Basics


The very basics

The Very Basics

  • Web Accessibility in a nutshell

  • Basics laws that govern accessibility the US


What is section 508

What is Section 508?

  • Federal law

  • Part of Rehabilitation Act of 1973, as amended in 1998

  • Section 508 standards added in 2001

    • Previously was a guideline; standards carry the weight of law.

  • Applies to federal government


Section 508

Section 508

  • Applies to electronic and information technology (E&IT)

  • Includes Web access/development and software development

  • At its heart, Section 508 is procurement law.


The 508 philosophy

The 508 Philosophy

  • Section 508 is about creating an open door.

  • Section 508 uses the purchasing power of the government to induce vendors to create accessible products.

  • The overall goal of Section 508 is a more accessible society.


However

However…

  • States are not part of the federal government.

  • Our college is not part of the federal government.


State laws

State Laws

  • All 50 states have laws on Web access

  • 23 states have statutes, policies, regulations, or guidelines regarding procurement


Scope

Scope

  • Some states have requirements that carry the weight of law; others are guidelines.

  • Georgia Tech has listing of state laws

  • VT: We have some loosely worded “Policies” and pretty much only for “state websites”


Pour guidelines

POUR Guidelines


Web content accessibility guidelines

Web Content Accessibility Guidelines

  • Provides an international set of guidelines

    • Developed by the Worldwide Web Consortium

  • Basis of most web accessibility laws in the world.

    • Version 2.0 of these guidelines, published in December 2008, are based on four principles:

    • Perceivable

    • Operable

    • Understandable

    • Robust


Perceivable

Perceivable

  • Available to the senses (vision and hearing primarily)

    • Through the browser

    • Through assistive technologies (e.g. screen readers, screen enlargers)


Operable

Operable

  • Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.


Understandable

Understandable

  • Content is clear and limits confusion and ambiguity.


Robust

Robust

  • A wide range of technologies (including old and new user agents and assistive technologies) can access the content.


Basic web accessibility

The goal of providing accessible written content can be accomplished by being a POUR writer.


Are you a pour writer

Are you a POUR writer?

  • Understandable:

    “Information and the operation of user interface must be understandable.

    “This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).”


Basic web accessibility

What is plain language and how can it help fulfill the WCAG 2.0 “Understandable” requirement?


Plain language is

Plain languageis …

  • Plain language is writing that can be understood the first time people read or hear it.

  • … easy to read

  • … understandable

  • … usable


Basic web accessibility

Why is a lot of web content bad?


The approach is wrong

The approach is wrong

  • The wrong people write web content.

  • The institution or “powers that be” dictate what content goes on the organization’s website.

    • Or actually, “go create a webpage for __topic__ , now!

  • People write content without considering their audience.


Writers forget to consider

Writers forget to consider …

  • People scan content (they don’t read it).

  • It’s hard to read large blocks of text. (TLDR)

  • There are people with low literacy skills.

  • Some people have low language proficiency.

  • Some people have cognitive impairments.

  • Some people are dyslexic.


Tl dr

TL, DR


Ensure links make sense out of context

Ensure links make sense out of context

  • Every link should make sense if the link text is read by itself.

  • Screen reader users may choose to read only the links on a web page.

  • Certain phrases like "click here" and "more" must be avoided. Try “…for more information on UVM Hockey..”

  • Search engines use incoming link text to determine what a page is about.


Headings structure

Headings & Structure


Use headings properly

Use headings properly

  • Headings communicate document structure.

  • They help screen reader users, search engines, and more.

  • Headings should form an outline of the page (H1 = the main page heading, H2 = secondary headings, etc.)

  • Nearly all document authoring tools supporting headings at various levels


Adding headings in ck editor

Adding headings in CK Editor


Adding headings in html

Adding headings in HTML

<h1>This is the main heading</h1>

<h2>This is a secondary heading</h2>

<h2>This is another secondary heading</h2>

DON’T: Use <h1> after using <h2>, <h3> etc. Headings are not visual formatting tools in html.


Adding headings in word

Adding headings in Word


Adding headings in adobe acrobat

Adding headings in Adobe Acrobat


Alternate alt text

Alternate (ALT) Text


Alt text

Alt Text


Add proper alt text to images

Add proper alt text to images

  • People who can’t see images depend on alternate text versions of image content

  • Almost every document authoring tool supports alt text. Right click on the image to access Image Properties or equivalent, then enter a brief description.

  • Keep alt text short and sweet.


Adding alt text in dreamweaver

Adding alt text in Dreamweaver


Adding alt text in html

Adding alt text in HTML

<imgsrc=“uvmlogo.gif” alt=“uvm logo”>


Adding alt text in word

Adding alt text in Word


Adding alt text in adobe acrobat

Adding alt text in Adobe Acrobat


Accessible pdf s

Accessible PDF’s


3 create accessible pdfs

3. Create accessible PDFs

  • Not all PDFs are equal:

    • Image PDFs

    • PDFs with text, but no structure

    • Tagged PDF (the only accessible type)

  • Can create an accessible PDF from scratch

    • Using a tool that supports tagged PDF (e.g., Word)

    • Save as tagged PDF

  • Can fix an inaccessible PDF using Adobe Acrobat Pro


Fixing a pdf in acrobat pro

Fixing a PDF in Acrobat Pro

  • Convert to text (if needed)

  • Add tags to document (if needed)

  • Touch up reading order, add alt text to images

  • Check/correct headings and other tags

  • Create links from URLs (if needed)

  • Define document language

  • Run an accessibility check


More on pdf accessibility

More on PDF Accessibility

  • http://uw.edu/accessibility/pdf.html

  • Includes workflows for:

    • Making a PDF accessible from scratch

    • Exporting from Word to tagged PDF

    • Repairing an inaccessible PDF using Acrobat Pro

    • Repairing inaccessible PDF forms using Acrobat Pro

    • Creating accessible PDF forms using Acrobat Pro

    • Creating accessible PDF forms using LiveCycle Designer

  • Also includes additional resources


Know when to use pdf

Know when to use PDF

PDF is great for documents where:

  • Appearance is critical. Document must be the same across all platforms.

  • Security is critical. Document requires encryption, digital signatures, watermarks, etc.

For many documents, HTML or Word may be a better choice


Captioned videos

Captioned Videos


Caption videos

Caption videos

  • Captioned video is accessible to people who can’t hear it

  • Captions make video full-text searchable (YouTube)

  • Captions can be automatically translated to other languages during playback (YouTube)

  • Captions can be used to generate an interactive transcript (YouTube)


Example youtube video with captions

Example YouTube Video with Captions


Provide a transcript

Provide a transcript

  • Benefits individuals who are deaf-blind (easier to read than captions with a Braille device)

  • Benefits individuals with low Internet bandwidth (who can’t play the media)

  • Benefits all users by allowing them to access content quickly

  • Benefits Google, who indexes the content and ranks them in results


Who can use this service

Who can use this service?

  • Anyone Within The University using Audio/Visual material for University purposes.

  • How does one make a Captioning request?

  • Follow the link ‘Captioning Request Form’ at http://www.uvm.edu/caption/

  • Simply click on the link below the ‘faculty’ section, provide the information required, submit the form and await our reply!

  • For more information, contact Steven Airoldi ([email protected])


In closing

In closing

  • By addressing these basic principles, you will ensure greater accessibility of your web content to everyone.


Resources

Resources


Resources general

Resources – General

  • Section 508, Accessible IT: http://www.section508.gov/

  • Georgia Tech Research Institute, State IT Database: http://accessibility.gtri.gatech.edu/sitid/stateLawAtGlance.phpFor Vermont: http://accessibility.gtri.gatech.edu/sitid/state_prototype.php?state=45#Content

  • University of Vermont ASPtech Accessibility Guidelines: http://www.uvm.edu/~asptech/?Page=accessibility.html&SM=accesssubmenu.html

  • Worldwide Web Consortium (W3C):http://www.w3.org/


Resources pour

Resources - POUR

  • WCAG 2.0 Principles of Accessibility: http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html

  • Constructing a POUR Website: http://webaim.org/articles/pour/


Resources plain language

Resources - Plain Language

  • Plain Language Checklist: http://www.plainlanguage.gov/howto/quickreference/checklist.cfm

  • Comprehensive Plain Language Guidelines: http://www.plainlanguage.gov/howto/guidelines/FederalPLGuidelines/FederalPLGuidelines.pdf

  • Test Your Content (methods): http://www.plainlanguage.gov/howto/guidelines/FederalPLGuidelines/testing.cfm

  • Center for Plain Language: http://centerforplainlanguage.org

  • PlainLanguage.gov: http://www.plainlanguage.gov

  • Plain Language Association International: http://www.plainlanguagenetwork.org


Resources writing content

Resources - Writing Content

  • Content and Usability: Web Writing: http://www.webcredible.co.uk/user-friendly-resources/web-usability/web-content.shtml


Resources great alt text

Resources - Great Alt Text

  • W3C Techniques for providing useful text alternatives:http://www.w3.org/TR/html-alt-techniques/

  • NCAM Effective practices for describing science content:http://ncam.wgbh.org/experience_learn/educational_media/stemdx

  • About.com Description of good alt text: http://webdesign.about.com/od/accessibility/a/great_alt_text.htm

  • University of Vermont ASPtech Alt Text Guide: http://www.uvm.edu/~asptech/?Page=alttext.html&SM=accesssubmenu.html


Resources pdf accessibility

Resources – PDF Accessibility

  • Adobe PDF Accessibility: http://www.adobe.com/accessibility/

  • California State PDF Tutorials: http://teachingcommons.cdl.edu/access/docs_multi/pdf_vid_tut/pdf_access_intro/pdf_accessibility_intro.shtml

  • University of Vermont ASPtech PDF Accessibility Guide: http://www.uvm.edu/~asptech/?Page=pdfcheck.html&SM=accesssubmenu.html

  • University of Washington, PDF Accessibility: http://uw.edu/accessibility/pdf.html

  • WebAIMPDF Accessibility: http://webaim.org/techniques/acrobat/


Resources testing accessibility

Resources - Testing Accessibility

  • WAVE: http://wave.webaim.org/

  • HiSoftware® Cynthia Says™: http://www.contentquality.com/

  • FAE: http://fae.cita.uiuc.edu/


Contact

Contact

  • Nick Ogrizovich – [email protected]

  • Nick Hall – [email protected]

  • ASP Tech – [email protected]

  • Captioning – [email protected]

  • Universal Design Technology Lab telephone: (802) 656-5537


  • Login