Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

ACCESSIBILITY AND DRUPAL

No description
by

Eero Janson

on 8 February 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of ACCESSIBILITY AND DRUPAL

ACCESSIBILITY AND DRUPAL
Web accessibility means that people with disabilities can perceive, understand, navigate and interact with the web, and that they can contribute to the web
Accessibility is also beneficial for other people, e.g. people with slow Internet access, people with “temporary disabilities”, people with changing abilities due to aging

What is web accessibility and why is it important?
Different types of accessibility issues
VISUAL DISABILITY
blindness, low vision, color-blindness
Images, photos, graphics, videos are unusable
Users often use assistive technologies
Users often use keyboard to navigate the page
HEARING DISABILITY
impaired hearing, deafness
Audio is unusable
(need for subtitles or sign language)
MOTOR DISABILITY
limited fine motor control, slow response time
Users may not be able to use the mouse
May need more time to react (e.g. in using slide-down menus)
COGNITIVE
DISABILITY
learning disabilities, distractibility, inability to remember or focus on large amounts of information
Users may become confused at complex layouts or inconsistent navigational schemes
Users may have difficulty focusing on or comprehending lengthy sections of text
EERO JANSON
DrupalCamp Baltics 2013
BUT... WHY BOTHER?
Let's make access universal!
Think about your audience
Enhances usability & SEO
Greater compatibility
More visitors & company branding
Legal reasons
STANDARDS AND GUIDELINES
Web Accessibility Initiative (WAI)
Web Content Accessibility Guidelines 2.0 (WCAG)
Authoring Tool Accessibility Guidelines 2.0 (ATAG)
User Agent Accessibility Guidelines 1.0 (UAAG)
Accessible Rich Internet Applications 1.0 (WAI-ARIA)
Section 508 of the United States Rehabilitation Act
eEurope 2005 Action Plan
The KEY PRINCIPLES of ACCESSIBILITY (POUR)
Perceivable: Information must not be invisible to all of the user's senses
Operable: The interface cannot require actions that users cannot perform
Understandable: Users must be able to understand the information and operation of components
Robust: The content and interface must be understandable, operable, and accessible through widely-available technologies and remain so as technologies advance
CAN YOU BE MORE SPECIFIC?
Standards, principles, guidelines...
(1) Structure and markup
Check the order of content without stylesheets
Use the <title> element effectively
Use semantic tags appropriately (esp. headings, lists, emphasis)
Provide titles and ARIA landmark roles for blocks and navigation
Specify the language of the document
(2) Images and other media
Provide textual alternative to non-text content (alt="image desc goes here!")
Try not to put text within images
Avoid using CSS to display images which contain information
Provide captions for media
(3) Forms
Associate form elements with appropriate labels
Group checkboxes and radio buttons together into fieldsets
Always indicate required fields
Make sure users can submit forms and recover from errors
(4) Tables
Provide headers (<th>) for data tables to ease table navigation
Provide captions and summaries to data tables
Don’t (ever!) use tables for layout purposes
(5) Text & links
Use fonts that are well-readable and big enough font size
Use relative units for font size (% or em)
Make sure that text and background are distinguishable
Make sure that links make sense out of context (no "click here" links, please)
Combine image and text links into one
Don’t use full caps to emphasize parts of text
(6) Operability
Make all functionality available from keyboard
Make JS handlers device-independent
Use ARIA roles, states, properties & live regions
Make sure that the page doesn’t rely on Javascript to function (provide fallbacks!)
Allow users to skip repetitive content
(7) Understandability
Make text content readable and understandable
Make sure that the page and menu structure makes sense
(8) Robustness
Maximize compatibility with current and future user agents, including assistive technologies
Paying attention to web standards automatically increases the accessibility of any page
ACCESSIBILITY AND DRUPAL
Different layers of dealing with accessibility:
Drupal core
modules
themes
content creators
Accessibility statement of D7
(https://drupal.org/about/accessibility)
and D7AX pledge for themes & modules.
Accessibility group: http://groups.drupal.org/accessibility
What is provided out of the box?
Adding alternative text to image fields
Proper labels in forms
Proper use of heading tags and table headings
No-JS fallback in form submission and validation
Handlers of core JS functions are device-independent
Titles for blocks and navigation
Well-usable by keyboard
Good use of <title> element
Built-in method for hiding elements (class=”element-invisible”)
#title_display in FAPI ('invisible')
Page language is added automatically
ARIA roles in D8
ACCESSIBILITY MODULES
Accessibility (https://drupal.org/project/accessibility), based on QUAIL library (http://quailjs.org/)
Extent Image Module (https://drupal.org/project/eim)
A11y titles (https://drupal.org/project/a11y_titles)
Block ARIA Landmark Roles (https://drupal.org/project/block_aria_landmark_roles)
Text resize modules: no need
Different checklists, helpers, etc.
THEMES
relative font size
built-in “skip to main content” link
good use of headings
good order of content elements by default (content first, navigation later)
ARIA landmark role attributes
Use ZEN! (https://drupal.org/project/zen)
HOW TO EVALUATE?
Does the page work when viewing it without CSS and JS?
Does the page work using keyboard only?
Use online evaluators:
WAVE (http://wave.webaim.org/)
FAE (http://fae.cita.uiuc.edu/)
Color contrast calculator (http://juicystudio.com/services/luminositycontrastratio.php)
Use your common sense and judgement
SOME EXAMPLES
eesti.ee
tootukassa.ee
postimees.ee
epl.ee
elion.ee
bbc.co.uk
nytimes.com
drupal.org (D6)
List of available modules: https://groups.drupal.org/node/85199
OTHER MODULES
CAPTCHAs w/ audio possibility:
Mollom
reCAPTCHA
Webform: good label support and fieldsets
WYSIWYG: train the editors!
Views: lots of possibilities to screw up
Media: no alt support
Who am I anyway?
Chief developer of Deep Systems (http://www.ds.ee)
web developer for more than 10 years
8 of them in DS
more than 2 of them using Drupal
Social scientist by education (MA in polisci)
work with refugees and asylum seekers in Estonia
disability studies on a sidetrack
ARIA navigational landmarks
application
banner
complementary
contentinfo
form
main
navigation
search
<div role="main">Main content goes here</div>
http://www.w3.org/TR/wai-aria/roles
Themes that pass WCAG level AAA:
http://d-theme.com/wcag_aaa
THANK YOU!
Questions?
A partial list of module issues: https://drupal.org/node/425494
Adaptive Themes and its subthemes are also very good
RESOURCES
Web Accessibility Initiative: http://www.w3.org/WAI/
Web Accessibility in Mind: http://webaim.org/
Drupal accessibility page: https://drupal.org/node/394094
Designing accessibility into themes (D7UX): http://www.d7ux.org/designing-accessibility-into-themes/
Good overview of WCAG, ARIA and accessibility in Drupal: http://accessibility.micnap.com/
Full transcript