Drupal Training Series Accessibility Basics for the Web Gabriel Merrell Interim Associate Director for Accessibility Office of Equity & Inclusion

Drupal Training Series

Accessibility Basics for the Web

Gabriel MerrellInterim Associate Director for AccessibilityOffice of Equity & Inclusion

Provided by the Office of Equity and Inclusion & Disability Access Serviceshttp://oregonstate.edu/oeihttp://ds.oregonstate.edu 2

What We’ll Be Covering…

•Why Web Access Should be a Focus•When to Consider Accessibility•OSU IT Access Policy•User Perspective•Drupal Accessibility •Overview•Headings•Menus/Site Navigation•Color•Images (Alt Text)•Links (Descriptive)•Tables•Forms•Lists•Resources & Tools

http://oregonstate.edu/oei

http://ds.oregonstate.edu/


Why Web Accessibility Should be a Focus

Ethical 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 groupLegal Sense•It’s the Law – DOJ ruled that ADA applies to the web, and is currently creating new regs•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 usBusiness 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 business




When to Consider Accessibility

Accessibility should be considered throughout the entire design and implementation of content, but is most useful and the least time/cost intensive when built into the initial design concepts.

An accessible website can look and feel the exact same as an inaccessible website – very little about access changes the visual look of a web page.




OSU IT Access Policy

Can be found on the OSU Accessibility Website (http://oregonstate.edu/accessibility).

Requires web page designs consistent with policy standards (WCAG 2.0 Level AA).• All new and revised pages, templates and themes published after the effective date

(Feb 22, 2012) must comply with policy standards• Users must be able to report difficulty accessing site content• Certain 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

Exemptions for certain situations• Archived (no intention for alteration again), or legacy pages (published prior to

effective date – Feb 22, 2012) not deemed high priority• Undue burden and non-availability as determined by OEI through consultation with

others with expertise and/or perspective (Media Services, CWS, DAS, etc.)



http://oregonstate.edu/accessibility


User Perspective

Visual disabilitiesScreen ReadersMagnifiers Speech RecognitionIncreased contrast

Hearing disabilitiesCaptions/Transcripts

Mobility disabilitiesSpeech Recognition

Keyboards HeadsticksMouthwands

Cognitive/mental disabilitiesSpeech RecognitionE-text/e-books

Content most impt




User Perspective: Screen Reader Demos (VoiceOver)




User Perspective: Screen Reader Demos (JAWS)




Drupal Accessibility: Overview

Now that you’ve heard how a screen reader works, and how individuals with disabilities interact with websites, there are a few simple key concepts to keep in mind.

Linearization - all screen readers and assistive technology linearize web content – taking code and lining up items one after the other. While most of us can just look at a web page and determine what section we are looking for, many individuals can not.

Keyboard Access – many users with disabilities can not use a mouse to interact with websites. The keyboard is the only way to navigate content. You can try this for yourself. The “TAB” key moves one link forward at a time. The “SHIFT-TAB” key combo moves one link backwards at a time.




Drupal Accessibility: Overview

Template accessibility

Template accessibility and end-user created content accessibility are two separate things that need to be considered in full.

The templates provides a lot of the framework that you need to build off of.

Many colors have been predefined.

Headings have been predefined, so, consider the template headings.

How menus are structured has been defined.

Content accessibilityTemplate end-users (you) need to understand how the template is laid out to build off of predefined structure.

How you create menus, headings, images, links, tables, lists, and forms is very important to how accessible your site will be.

For most of the rest of the hour, we’ll spend time looking at how to use Drupal to make this specific items accessible.

Learn much more at: http://oregonstate.edu/accessibility/web



http://oregonstate.edu/accessibility/web


Drupal Accessibility: Headings

When thinking of headings, think outline. It’s 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.



Headings 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 to…

H1 – Page TitleH2 – First Main Content Section

H3 – First SectionH4 – SubsectionH4 – Subsection

H3 – Second SectionH3 – Third SectionH2 – Second Main Content Section

In both Confident and Standard, the Site Name is an H1 and each specific Page Title is an H2. Built off of that.



Since Confident and Standard define the Site Name as H1 and each specific Page Title as H2, all of your created content should start with H3 to be properly nested.

H1 – Site Name (e.g. Gabe’s Trial Drupal Site)H2 – Page Title (e.g. Home)

H3 – First Section on homepageH4 – SubsectionH4 – Subsection

H3 – Second SectionH3 – Third Section

Using another H1 or H2 would be inappropriate.

The template has also defined other site features with Headings, including menus as H3 (side, footer and nice-menus), News and Events sections in Standard as H3.


Drupal Accessibility: Menus

More than one menu can be confusing

Menus should be consistent from page to page within a site. This is handled mostly through the template.

Accordion/Expanded menus are okay

Page titles and menu should be related – should use same words.

All Drupal menus are accessible

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


Drupal Accessibility: Color

Don’t rely on color alone to convey meaning.

1 in 12 men in the US has some form of colorblindness


Drupal Accessibility: Color or Is this hard to read?

People with low-vision are most affected by contrast. The templates are getting better about pre-defined color accessibility, but you still have to manage any color you define or include.

Use sufficient contrast

WCAG 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 Favorites: Paciello Contrast Analyser for PC

Paciello Contrast Analyser for MacOthers: Snook.ca, WebAIM, Juice Studio (Firefox add-on)

Learn more about color, and simulate colorblindness, at Vischeck.


Drupal Accessibility: Images (Alt Text)

Alt Text provides 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 is first.

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



Simple/Standard ImagesBe clear and concise. Remember what the context of the image is.

If this was on a biography of Sher Fenn page the alt text just needs to be “Sher Fenn.”

Decorative ImagesMany images are just used for visual interest – for decoration only.

In this case it is best to use <alt=“”> 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 it’s complicated). In this case, be as concise and simple as possible.



Images with TextJust use the text from the image as the alt text, as long as the image isn’t also a link.

If the images below were being used, the alt text just needs to be “Daisy Farm Project” or “Bowling.”

Linked ImagesWhen using images for links, you want the alt text to describe what clicking the link would do.

If a college mascot icon was used as a link to a history of mascots page, we would want to identify in the alt text that the link goes to that page.



Complex ImagesPictures of charts, graphs, tables, images with complex meanings.

Best to describe image in content of your page, as this will describe image for all users.

Many options, you could describe, create a list, use an actual table



CAPTCHAsYou might not implement CAPTCHAs, but, if you do, know how to select the most accessible one possible.

These two CAPTCHAs are quite different. Which one is less accessible?


Drupal Accessibility: Links (Descriptive)

When writing link text, use descriptive links , links that make sense when read out of context. Don’t use ambiguous text like “click here” or “read more.”

Use this: Visit the Disability Access Services website.

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

Remember - 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]


Drupal Accessibility: Fonts

Fonts have been defined by the templates already. If you change fonts, be aware of the following.

Real 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 font

From Wikipedia


Drupal Accessibility: Tables

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

Two types of tables: data tables and layout tables.

If you have a simple table, consider using a list instead. At the least, try to linearize your data. Current Seed Prices per Acre

• Corn: Monsanto $100, Pioneer $90, Dekalb $80• Soybean: Monsanto $60, Pioneer $65, Dekalb $70

Seed Cost Monsanto Pioneer Dekalb

Corn $100/acre $90/acre $80/acre

Soybean $60/acre $65/acre $70/acre


Drupal Accessibility: Tables for Data

In Drupal, any table is added from the toolbar. If you are using a table for data, you must define header cells and should define the scope (col/row).

Make a table more accessible by adding <th> cells instead of <td> cells when you have headers for rows or columns.


Drupal Accessibility: Tables for Data

Adding a <caption> is highly preferred.

If you are creating a more complicated table, there are other coding techniques that need to be used.

Avoid nesting data tables, or splitting cells in two.


Drupal Accessibility: Tables for Layout

Karen Hanson Jennifer Gossett Jo D. Alexander

Alternative Testing Services Notetaking and Support Services Deaf and Hard of Hearing Access Services

(541) 737-8582 (541) 737-4098 (541) 737-3670

[email protected] [email protected] [email protected]


Drupal Accessibility: Tables for Layout

Karen Hanson Alternative Testing Services (541) 737-8582 Karen.Hanson@orego

nstate.edu

Jennifer Gossett Notetaking and Support Services (541) 737-4098 Jennifer.Gossett@ore

gonstate.edu

Jo D. Alexander Deaf and Hard of Hearing Access Services (541) 737-3670 Jo.D.Alexander@oreg

onstate.edu


Drupal Accessibility: Forms

The biggest difficulty with forms is in making sure they are labeled properly. If you use Webform, this happens automatically, as do the items below.

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 fields?


Drupal Accessibility: Lists

Lists (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….]


Drupal Accessibility: A quick note about Videos

All 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


Drupal Accessibility: Resources & Tools

Laws, Standards & Guidelines:• Section 508 (Draft Update)• Web Content Accessibility

Guidelines (WCAG 2.0)• OSU Accessibility website

Testing Tools:• WAVE by WebAIM• U of Illinois Firefox Accessibility

Extension• W3C complete list of tools

Articles & Other Resources:• WebAIM out of Utah State• Jim Thatcher Accessibility Course

– original screen reader creator

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


Conclusion

There is a lot to consider to make your content accessible, but, there are plenty of resources available:

http://oregonstate.edu/accessibility

If you are interested in learning more about web accessibility, want to have your site reviewed, or just have questions:

[email protected]@oregonstate.edu

Documents

Drupal Training Series Accessibility Basics for the Web Gabriel Merrell Interim Associate Director for Accessibility Office of Equity & Inclusion