Accessibility Basics for the Web

Slide 0

Accessibility Basics for the Web

OSU Professional Development ClassGabriel Merrell Office of Equity & Inclusion and Disability Access Services

Accessibility Basics for the Web: OutlineVision for the CourseGoals for the CourseWhy Web Accessibility Should be a FocusIT Access PolicyUser PerspectiveResources & ToolsWebsite AccessibilityDocumentsMultimedia1Access 101May 16, 2011Vision for the CourseFor you to see that web accessibility: is important is easy is a challenge cant be fully learned, and that is okay is a process

is all about lack of restrictions, opening pathways to all is an even playing fieldMay 16, 20112Access 101Challenge the paradigm, individuals with disabilities are often excluded from conversations about diversity, from 2Goals for the CourseTo express why web access is important and how people with disabilities interact with the webDiscuss the IT policy and how it applies to participantsLearn basic concepts about web accessibilityIntroduce you to resources and tools so you can continue to learnInfluence you to make small (or large) changes to increase the access of your sitesMotivate you to share with others, help create positive changeMay 16, 20113Access 101Challenge the paradigm, individuals with disabilities are often excluded from conversations about diversity, from 3Why Web Accessibility Should be a FocusEthical Sense

To prevent the intentional or unintentional exclusion of others on the basis of a disability

Reach the widest possible audience 20% of U.S. Pop has a disability (2000 Census) largest underrepresented groupMay 16, 20114Access 101Challenge the paradigm, individuals with disabilities are often excluded from conversations about diversity, from 4Why Web Accessibility Should be a FocusLegal Sense

Its the Law the Dept of Justice maintains that the ADA applies to the web, and is currently creating new regulations

Legal obligation to provide equal access through communications ADA communications with people with disabilities must be as effective as communication with non-disabled persons

Many instances of legal cases and complaints that apply to us

May 16, 20115Access 101Challenge the paradigm, individuals with disabilities are often excluded from conversations about diversity, from 5Why Web Accessibility Should be a FocusBusiness Sense

Accessibility standards have been researched and vetted to work with all emerging technologies (smart phones, tablets, cross-platform compatibility)

Will increase web traffic and search optimization

Web increasingly becoming way we all do businessMay 16, 20116Access 101Challenge the paradigm, individuals with disabilities are often excluded from conversations about diversity, from 6The IT Access PolicyHow Was It Developed?

Many peer institutions already have policies with defined standards: Cal State System (2004 - Accessible Technology Initiative)Purdue (2010), Michigan State (2009), UC Davis (2006), NC State (2006), Ohio State (2004)

Research and integration of peer policies into OSU language

Updated wording and standards to follow ANPRM

Talked with campus constituents (Provosts Council, Cabinet, General Counsel, VP for Information Services, COSID, ITCC, Web Comm & Central Web)June 15, 20117The Importance of Accessibility & ITWeb page designs consistent with policy standardsAll new and revised pages, templates and themes published after the effective date must comply with policy standardsUsers must be able to report difficulty accessing site contentCertain high priority pages, such as pages with core institutional information, regardless of current status, will need to comply with the policy. These units will be contacted and offered assistance in ensuring the accessibility of their web pages

Electronic documents & multimedia on web pages consistent with policy standards

The IT Access Policy - RequirementsJune 15, 20118The Importance of Accessibility & ITThe IT Access Policy - ConditionsJune 15, 20119The Importance of Accessibility & ITApplicabilityAll OSU web presence; inclusive of web pages, web applications, electronic documents and multimedia used to provide university programs, services or activities

ExemptionsArchived (no intention for alteration again), or legacy pages (published prior to effective date Feb 22, 2012) not deemed high priorityUndue burden and non-availability as determined by OEI through consultation with others with expertise and/or perspective (Media Services, CWS, DAS, etc.)Visual disabilitiesScreen ReadersMagnifiers Speech RecognitionIncreased contrast

Hearing disabilities Captions/Transcripts

Website Accessibility - The User PerspectiveApril 27, 201110Making IT Communications Accessible

Mobility disabilitiesSpeech RecognitionKeyboards HeadsticksMouthwands

Cognitive/mental disabilitiesSpeech RecognitionE-text/e-booksContent most impt

Website Accessibility - The User PerspectiveMay 16, 201111Access 101

Laws, Standards & Guidelines:Section 508 (Draft Update)Web Content Accessibility Guidelines (WCAG 2.0)OSU Accessibility website

Testing Tools:WAVE by WebAIMU of Illinois Firefox Accessibility ExtensionW3C complete list of tools

Articles & Other Resources:WebAIM out of Utah StateJim Thatcher Accessibility Course original screen reader creator

Multimedia Resources:MAGpie (free captioning tool)YouTube captioningWebAIM - Captioning

Testing for Accessibility & ResourcesMay 16, 201112Access 101Website AccessibilityImportant Items to ImplementHeadingsNavigationLayout & Tab OrderColor Combinations - Is this hard to read?Alt Text (Images)LinksFontsFormsTablesLists13Access 101May 16, 2011HeadingsWhen thinking of structure, think outline. Its about organization.

Never use bold, italicize, underline or font size to create this structure.

Headings are proper standard, as headings provide structural navigation.

Headings are the only way to create structural sections on your page.

14Access 101May 16, 2011

HeadingsHeadings should be used to define sections, should be properly nested, usually one (maybe two) H1s per page, and that H1 should usually be the same as the page title.

So a proper heading structure on one page would be similar toH1 Page TitleH2 First Main Content SectionH3 First SectionH4 SubsectionH4 SubsectionH3 Second SectionH3 Third SectionH2 Second Main Content Section

15Access 101May 16, 2011HeadingsLets try it out.

http://ds.oregonstate.edu/prospective/services.php16Access 101May 16, 2011NavigationPage structure and navigation should be related be similar.

If you have a web page with a lot of content, consider using a Table of Contents (TOC). (Ex: DAS)

Navigation should be consistent from page to page within a site.17Access 101May 16, 2011NavigationA note about Drop Down Menus.

18Access 101May 16, 2011

Layout & Tab OrderTab order refers to how the web page will be read by a screen reader.

Linearization is most important.

You can change the tab order of your site using

Lets try it out http://oregonstate.edu/accessibility/class/tabindex

WAVE has a great tool to help visualize tab order19Access 101May 16, 2011Color Combinations or: Is this hard to read?Dont rely on color alone to convey meaning.

1 in 12 men in the US has some form of colorblindness20Access 101May 16, 2011

Color Combinations or: Is this hard to read?People with low-vision are most affected by contrast

Use sufficient contrastWCAG 2.0 Guideline 1.4.3 requires at least 4.5:1 contrast ratio

But how do you check for that without doing math?My Favorite: Web Accessibility Toolbar from PacielloFor Mac Users: Paciello Contrast Analyzer for MacOthers: Snook.ca, WebAIM, Juice Studio (Firefox add-on)

Learn more about color, and simulate colorblindness, at Vischeck.21Access 101May 16, 2011http://www.paciellogroup.com/resources/wat-ie-about.htmlhttp://www.paciellogroup.com/resources/contrast-analyser.html#macdownloadhttp://snook.ca/technical/colour_contrast/colour.html

21Alternative TextAlt Text provides screen reader users the ability to interact with images

Context matters most when deciding what to write for the ALT text, and if the image is meant to convey info or meaning

Avoid using words such as image photo graphic in the alt text as the screen reader announces what the item first

Many types of images: simple, with text, link images, decorative, complex

22Access 101May 16, 2011In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.22Alternative TextSimple/Standard Images

Be as simple and concise as possible. Just describe the image in context.

23Access 101May 16, 2011

In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.23Alternative TextImages with Text

Just use the text in the image as the alt text.

24Access 101May 16, 2011

In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.24Alternative TextImages that serve as Links

If a college mascot icon was used as a link, we would want to identify what clicking the link would do, not describe the image

25Access 101May 16, 2011

In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.25Alternative TextDecorative Images

Many images are just used for visual interest for decoration only.

In this case it is best to use NULL alt text. This hides the image from a screen reader, and can drastically reduce time spent navigating a page.

This is not possible with our text editor in Drupal (well it is, but its complicated). In this case, be as concise and simple as possible.

26Access 101May 16, 2011In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.26Alternative TextComplex Images

Sometimes we use charts, graphs, tables that are images and not HTML code. Sometimes the meaning of the image is much more complicated that a simple short alt text is appropriate for.

In these cases, it is always best to describe the image in the content of your page as this will describe the image in detail for all users.

You must always still use alt text for the image,

27Access 101May 16, 2011In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.27Alternative Text & a Note about CAPTCHAs28Access 101May 16, 2011

In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.28Alternative TextLets try it out.

http://oregonstate.edu/accessibility/class/alt-text

May 16, 201129Access 101In Acrobat Pro Touch Up Reading Order Tool > Draw Marquee > Choose Background and the image will disappear from some screen reader software. Might have to touch up/delete the tag in the tag structure too.29Descriptive Links

Use descriptive link text, dont use ambiguous text like click here.

Use this: Visit the Disability Access Services website.

Instead of: To visit the Disability Access Services website click here.

Screen reader software announces what the function/content is.

Which would be easier to understand?[link http://ds.oregonstate.edu/home][link click here][link Disability Access Services]

Be judicious about how many links you use.

LinksMay 16, 201130Access 101Screen reader software announces what the function is, or what the content is. For instance, the screen reader will say[link http://ds.oregonstate.edu/home] when it comes across a url link, so descriptive links are more informative[graphic Benny Beaver] when it comes across an image, so there is no need to have an ALT attribute with the words graphic image photo picture etc.The screen reader will announce many additional things, the presence of a table, a form field, a heading, a title

So, if clicking on Benny takes you to a history of OSU mascots page, then we would want the ALT tag to mention something like "History of OSU Mascots". The screen reader will identify it as a link and a graphic then announce the ALT tag like the following: [link graphic History of OSU Mascots].

30Skip Links

Skip links are same page links that allow users to skip over content to certain sections of your web page.

Must be the first link/the first item on the page

Can be implemented in different ways:Hidden (http://oregonstate.edu/recsports) Hidden until focus (http://ds.oregonstate.edu) Always visible (http://webaim.org)

Try it out, visit these pages and TAB so you can see the skip link in focusLinksMay 16, 201131Access 101Screen reader software announces what the function is, or what the content is. For instance, the screen reader will say[link http://ds.oregonstate.edu/home] when it comes across a url link, so descriptive links are more informative[graphic Benny Beaver] when it comes across an image, so there is no need to have an ALT attribute with the words graphic image photo picture etc.The screen reader will announce many additional things, the presence of a table, a form field, a heading, a title


31Link Focus

Links should always be visible, regardless of how a user arrives on the link (by mouse or keyboard). This is a coding thing, and if you use a template youd need to work with Web Comm or Central Web.

Lets try it out. First use your mouse to see what links look like when you hover over them, then, use the TAB key or SHIFT-TAB to go backwards:

Good link focus http://oregonstate.edu/accessibility/Itpolicy.Okay link focus http://oregonstate.edu/financialaid/ Bad link focus http://oregonstate.edu/uhds/ LinksMay 16, 201132Access 101Screen reader software announces what the function is, or what the content is. For instance, the screen reader will say[link http://ds.oregonstate.edu/home] when it comes across a url link, so descriptive links are more informative[graphic Benny Beaver] when it comes across an image, so there is no need to have an ALT attribute with the words graphic image photo picture etc.The screen reader will announce many additional things, the presence of a table, a form field, a heading, a title


32FontsReal text instead of pictures of words is always preferred.

Size larger font size enhances accessibility, some fonts are larger by default (Verdana)

Ease of Reading fonts without much embellishment/with clean lines are generally thought to be easier to read (sans-serif without details)

Serif vs. Sans-Serif fontsGeorgia is a serif fontTahoma is a sans-serif font33Access 101May 16, 2011

From WikipediaFormsThe biggest difficulty with forms is in making sure they are labeled properly, usually with a tag.

Ask yourself: Does the form linearize well Are labels for the form boxes listed before the form box/radio button/etc Are you using color to identify required fields34Access 101May 16, 2011

TablesTables have a bad rap in the accessibility field, sometimes for good reason, but if implemented well tables can be fully accessible.

If you have a simple table, consider using a list instead. At the least, try to linearize your data.Current Seed Prices per AcreCorn: Monsanto $100, Pioneer $90, Dekalb $80Soybean: Monsanto $60, Pioneer $65, Dekalb $70

If using tables for layout make sure the tables linearize well.35Access 101May 16, 2011

Seed CostMonsantoPioneerDekalbCorn$100/acre$90/acre$80/acreSoybean$60/acre$65/acre$70/acre

ListsLists (bulleted and numbered) are linear by nature, so usually they are accessible from the outset.

Check to make sure lists are actual lists, not just independent bullets. Screen readers will announce the presence of a list.

[list of 9 items: one, two, three.]

36Access 101May 16, 201136DocumentsAll of the items weve talked about so far are the same (or very close) when talking about document accessibility.

Additional Items to consider in documents:Do you have a tagged document (PDF)Use Styles built into the softwareUse Acrobat Pro to check AccessibilityConvert with Accessibility Features

37Access 101May 16, 201137Multimedia Captioning & TranscribingAll multimedia (video plus audio) presentations must be captioned

Free (and paid) software exists to help you caption your own videos

Many companies also exist that will gladly caption your videos for you

DAS could be a low cost on-campus solution

38Access 101May 16, 2011

38Laws, Standards & Guidelines:Section 508 (Draft Update)Web Content Accessibility Guidelines (WCAG 2.0)OSU Accessibility website

Testing Tools:WAVE by WebAIMU of Illinois Firefox Accessibility ExtensionW3C complete list of tools

Articles & Other Resources:WebAIM out of Utah StateJim Thatcher Accessibility Course original screen reader creator

Multimedia Resources:MAGpie (free captioning tool)YouTube captioningWebAIM - Captioning

Testing for Accessibility & ResourcesMay 16, 201139Access 101May 16, 201140Access 101Thank you for coming

Questions?