• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
 

Web Standards, HTML 5 & Accessibility - What makes a site accessible today?

on

  • 1,228 views

With HTML5, the web is evolving from a browser/document-based experience to a desktop-like application accessed on multiple devices. What does HTML5 mean for Web accessibility? Is accessibility ...

With HTML5, the web is evolving from a browser/document-based experience to a desktop-like application accessed on multiple devices. What does HTML5 mean for Web accessibility? Is accessibility compromised or enhanced with this new standard? This session will review promising new features in HTML5 that promote accessibility and discuss possible challenges ahead and advice for ensuring HTML5 accessibility.

Statistics

Views

Total Views
1,228
Views on SlideShare
1,224
Embed Views
4

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 4

http://localhost 4

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 11:00 – 11:55 (45 minute talk, 10 minute Q&A)\n
  • Accessible web sites look no different than others. \nHowever, there may be more attention to structure, headings, and color contrast.\nIt’s not our job as accessibility advocates to tell designers what they can’t do.\nRather we tell them how they can do it better.\n
  • http://yahoo.com\n
  • http://www.flickr.com/photos/alcomike/4257805475/\n
  • http://en.wikipedia.org/wiki/Accessibility\nCommunity edited and producer driven sites may have inaccessible content. \nEditing tools need to encourage alternate text and use of headers instead of bold.\n
  • http://bbc.co.uk\n
  • http://apple.com/accessibility/voiceover/ \nas seen on an iPad\n
  • \n
  • \n
  • Is it accessible for everyone? Is it accessible at all times?\nLet’s look at what web standards provides and what else you need.\n
  • The foundation built by valid, semantic markup.\nSeparation of HTML, CSS, and JavaScript\nStructural markup with headers, lists, data tables, definition lists, etc instead of all divs with classes and ids\n
  • Image: alt attribute provides alternate text, longdesc attribute provides location of a visual description of image, title attribute provides additional information, caption tag provides a visual caption.\nForms: keyboard accessible, inputs are properly labeled. Elements are grouped by subject, new form inputs make it easier to use mobile devices. \nStandards-based design allows the browser to set default behaviors. This allows a user to customize the experience.\nCleaner markup will perform better for those without broadband connections\n
  • You can build an accessible web site with web standards. However, things start to fall apart when they are no longer static.\nLet’s look at some situations where the site is no longer a basic document.\n
  • What if your site is dynamic? Is it still accessible?\nThe new generation of web sites need to be accessible at all times, not just when they load.\n
  • Accessibility breaks down when our page begins changing. \nHow does a user know they can modify the page and when it has been modified?\nWhat if the page depends on mouse or finger gestures? \nDoes a keyboard user know where the cursor is located? \nCan they access the same information as a mouse user?\n
  • http://finance.yahoo.com/news this screen allows the user to modify the order of categories displayed on the page.\nMore information in this presentation: http://www.slideshare.net/7mary4/yahoo-finance-accessibility-csun-2011\n
  • Yahoo Finance expand/contract menu: http://finance.yahoo.com/news/\nMore information in this presentation: http://www.slideshare.net/7mary4/yahoo-finance-accessibility-csun-2011\nYou can use the aria-expanded=“true|false” attribute. http://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/\nHTML5 details tag will allow native expand/collapse but browser support is not ready. http://html5doctor.com/the-details-and-summary-elements/ \nYUI library makes it easier to use ARIA http://yuilibrary.com/yui/docs/node-focusmanager/node-focusmanager-3.html\n
  • Videos need closed captioning for the hearing impaired.\nHTML5 video’s captioning standard is still under development. Flash allows captioning quite easily. It’s usually done with JavaScript in HTML5 \nVideos should also have audio descriptions for the blind. This is an audio track that gives a visual description of the scene.\nThe Big Lebowski review by the Blind Film Critic: http://blindfilmcritic.com/archives/1382\n
  • How to use ARIA Live Regions for dynamic content: http://wiki.codetalks.org/wiki/index.php/How_to_use_ARIA_Live_Regions_for_dynamic_content\n
  • What if the reader forgets the beginning of the article before reading the final paragraph?\nIs the site usable if the person has to re-learn it each time?\nDoes the user understand where they are? Can they get back to it?\nWhat is the reading level? Do you have alternate versions for different levels (article summary)\nA visual pulsing for new items may help some and be very distracting to someone with ADD.\nDoes the typography and page design make it more difficult for people with dyslexia?\n
  • \n
  • CSS should have corresponding rules for :hover, :active, and :focus\nJavaScript that triggers events on hover also need to consider focus.\nMobile devices don’t have a mouse, so you cannot depend on hover in the future.\nUse tabindex=“0” to place an element in the tab flow. Use tabindex=“-1” to remove it from the flow. Setting any other value will force the element into a certain spot of the tab order, avoid this.\n
  • http://www.studiostudio.nl/project-dyslexie/\n
  • Who’s your audience? Smart phone (android/iOS) or older phones (nokia/windows/opera mini)?\nMobile browser information: http://quirksmode.org/mobile/\n
  • Mobile development is quickly sliding into the bad days of tag soup markup. This is especially true when semantic markup may not perform as well on the mobile device.\nFor instance, a div with background image will animate faster than an image tag due to hardware acceleration. \nhttp://yaccessibilityblog.com/library/aria-fix-non-standard-images.html\n
  • The swipe behavior becomes a tab when voiceover is enabled.\nThe rotate gesture becomes a rotor \nAre you prepared to display closed captions without flash?\n
  • For mobile performance, minimize the DOM structure. Use fewer wrapper divs with classes, use CSS3 to replace rounded corners, transformations, and gradients.\n
  • http://www.flickr.com/photos/drachmann/327122302/\n

Web Standards, HTML 5 & Accessibility - What makes a site accessible today? Web Standards, HTML 5 & Accessibility - What makes a site accessible today? Presentation Transcript

  • Segment
2:
Web
Standards
&
Accessibility Ted
Drake,
Yahoo
Accessibility
Lab Slideshare.net/7mary4
  • What
does
an
Accessible
Site
Designed
with
Web
Standards
 Look
Like?

  • Topics• Features
of
an
accessible
site
designed
with
 Web
Standards?• Beyond
the
blind• When
web
standards
is
not
enough• Mobile
Users
  • Is
your
standards‐based
web
site
 accessible?
  • Maybe
  • Web
Standards
 FoundaHon
  • • Solid• VersaHle• SemanHc
Data• Device
Independent
  • StaHc
  • Dynamic
  • New
Visual
&
Auditory
Concerns• Expandable
content• Editable
text• Drag
and
Drop• Gestures• Closed
CapHons• Regularly
updated
content• Dialogue
boxes• Keyboard
focus
control
  • Drag
and
DropProvide
non‐mouse
alternaHve
  • Expandable
Content
• BuTon
for
expand/contract• Place
focus
into
expanded
area• Tell
user
the
container
can
be
 expanded
  • Video
Accessibility
  • Live
Regions• Define
regions
of
the
page
that
update
 automaHcally.• Should
the
screen
reader
user
get
a
 noHficaHon
every
Hme
it
changes?
  • CogniHve
and
Physical
Concerns• Memory
loss• Different
cogniHve
levels
of
understanding
 content.• What
helps
some
will
distract
others• Dyslexia• Keyboard
navigaHon• Voice
recogniHon
  • Voice
RecogniHon• Dragon
Naturally
Speaking• Images
with
text
must
have
matching
alt
text.• Don’t
autofocus
form
elements• Avoid
mulHple
links
to
different
URLs
with
the
 same
text.
  • Keyboard
NavigaHon
  • • Avoid
long
sentences• Avoid
large
blocks
of
text• Avoid
jusHfied
alignment• Give
the
user
white
space• Dyslexie:
font
designed
for
dyslexia
  • Mobile
Browsers
and
Accessibility
  • New
DeviceSame
Accessibility
Concerns
  • iPhone
and
iPad• Full
featured
VoiceOver• Safari
browser
supports
HTML5,
CSS3,
 JavaScript• Custom
gestures
will
 conflict
with
 VoiceOver.• No
Flash
support

  • Android,
Blackberry,
Nokia• Screen
reader
is
available,
but
not
as
 sophisHcated
as
VoiceOver• Use
clean,
structural
markup
for
beTer
 performance• Android’s
browser
is
full
featured.
Blackberry
 and
Nokia
are
not
as
robust.
  • QuesHons?Ques@on
mark
in
EsbjergSome
rights
reserved
by
alexanderdrachmann