SlideShare a Scribd company logo
1 of 59
Download to read offline
Building An
Accessible Site from
  the Ground Up
Russell Heimlich @KingKool68

 ‣Web Developer at the Pew Research Center
 ‣http://www.russellheimlich.com/blog
I Like Funny T-Shirts
What is accessibility?




 http://www.flickr.com/photos/artbystevejohnson/4610457832/
Accessibility is NOT
just about people with
      disabilities.
Accessibility is about
     PEOPLE!



 http://www.flickr.com/photos/elvire-r/2451784799/
Devices

 ‣Desktop Computer
 ‣Mobile
 ‣In Between (iPad, Netbooks)
 ‣TV’s


                                http://www.flickr.com/photos/krossbow/4757275301/
Interactions

 ‣Mouse
 ‣Keyboard
 ‣Touchscreen
 ‣Screenreader

                 http://www.flickr.com/photos/a6u571n/3207185886/
Technologies

 ‣JavaScript
 ‣CSS
 ‣Images       display: none;
So what can be done
 to make websites
 more accessible?
Think About The
    HTML
Use the Right Element for the Job
<p> = paragraph

<h1>-<h6> = Heading 1 through 6

<div class=”paragraph”>

Using Tables for Layout
Be Aware of the Source Order

 ‣Markup content the way it should be read NOT the
  way it should be displayed.


  Header                                Header

                                Aside      Content
 Content


 Aside
Create Consistent Conventions
<div id=”header”>

<ul id=”nav”>

<div id=”content”>

<div id=”sidebar”>

<div id=”footer”>
Use Alt Attributes on <img>

 ‣Include text to display as a backup
 ‣Provide context to what the user is missing
 ‣If the image is purely decoration use alt=””
Style Alt Text
a img {
   background-color:#EDEBD5;
   border:medium none;
   color:#000;
   font-size:28px;
   line-height:125%;
}
Why Bother with Alt Text?

 ‣Screenreaders read filenames when no alt attribute
 ‣Text-only browsers/devices benefit
 ‣Image links have anchor text/context
 ‣Google indexes alt text
 ‣Sometimes your CDN goes down
Form Inputs
Associate Inputs with Labels

 ‣Link descriptive text with an input field
 ‣Provides context about what is expected
 ‣Clicking label focuses input field
Implicit vs. Explicit Labels
<label for=”name”>Name</label>
<input type=”text” id=”name”>


<label> Name
  <input type=”text”>
</label>


label { curser: pointer; }
Use Most HTML5 Input Types

 ‣type=”search”
 ‣type=”tel”
 ‣type=”url”
 ‣type=”email”
 ‣Old browsers fallback to type=”text”
Type=”search” Has Slight Benefit




http://css-tricks.com/webkit-html5-search-inputs/
Fieldsets Group Several Inputs
<fieldset id=”contact”>

   <label>
     Name <input type="text">
   </label>
   <label>
      Email <input type="email">
   </label>

</fieldset>
Legend is a Caption for Fieldsets
<fieldset id=”contact”>
  <legend>Contact Info</legend>
   ....
</fieldset
Keyboard Navigation
Turn it on in OSX
System Preferences -> Keyboard -> All Controls
or Press Control + F7
Tab Index

 ‣Use tabindex attribute to specify tab order
 ‣Tab index goes from lowest to highest
 ‣tabindex=”-1” will be skipped
 ‣If you use proper HTML source order, you’re done!
This Site is Gorgeous!




   http://www.hd-live.co.uk/
Pretty Hover State




http://www.hd-live.co.uk/
No Focus State Defined!




http://www.hd-live.co.uk/
:focus = :hover

 ‣Anywhere :hover is used, add :focus as well
a:hover,
a:focus {
  text-decoration:underline;
  color:red;
}
Design for the Outline
a { /* This is bad! */
  outline:0;
}

a:focus { /* Keyboard Users */
  outline: thin dotted #000;
}
a:hover { /* Mouse Users */
  outline:none;
}
Design for the Outline

 ‣Adding outline style is the same as adding a border
 ‣Some elements need 1 or 2 px of padding
 ‣TEST, TEST, TEST!
Hiding Content the Accessible Way
/* Hides from keyboard users */
display:none;


/* Hidden but still accessible */
.hidden {
  left:-999em;
  position:absolute;
  top:auto;
}
Reavling Hidden Content
/* Reveal on Focus */
.hidden:focus {
  position:static;
}
Skip Navigation Link

 ‣Lets a visitor skip straight to the content
 ‣Without it, keyboard visitors suffer
 ‣Should be the first element after <body>
 ‣Can be visible or hidden based on the desgin
 ‣If hidden, should stand out on focus
Skip Navigation Link
<body>
  <a id="top" href="#content">
  Skip to Content</a>
Skip Navigation Link
#top:focus {
  position:static;
  font-size:1.5em;
  background-color:#FFFFD5;
  display:block;
  font-weight:bold;
  color:#000;
  padding:2px 15px 5px;
}
Screenreaders
Add an Anchor to Search Forms
<form action="/search/#content">
   <label for=”q”>Search</label>
   <input type="search" id=”q”>
   <input type=”submit”
value=”search”>
</form>
Add an Anchor to Search Forms

 ‣Skips visitors straight to the results
 ‣No need for screenreaders to read through nav
ARIA Landmark Roles

 ‣Help define the structure of a document
 ‣Screenreaders can move around different sections
 ‣Just add role attribute to an element
 <div id=”header” role=”banner”>
role=”article”

 ‣Content that makes sense in its own right, such as
  a complete blog post, a comment on a blog, a post
  in a forum, and so on.
role=”banner”

 ‣Site-orientated content, such as the title of the
  page and the logo.
 ‣Header
role=”complementary”

 ‣Supporting content for the main content, but
  meaningful in its own right when separated from the
  main content.
 ‣Aside or sidebar
role=”contentinfo”

 ‣Child content, such as footnotes, copyrights, links
  to privacy statement, links to preferences, and so
  on.
 ‣Footer
role=”main”

 ‣Content that is directly related to or expands on the
  central content of the document.
 ‣Main content container, #content
role=”navigation”

 ‣Content that contains the links to navigate this
  document and/or related documents.
role=”search”

 ‣This section contains a search form to search the
  site.
Mobile
Mobile Stylesheet

 ‣Smartphones handle websites OK

 ‣Dumb phones need a slimmed down stylesheet
 ‣http://perishablepress.com/press/2009/08/02/
  the-5-minute-css-mobile-makeover/
Why should I care?
More Visitors

 ‣The more ways your site can be accessed, the more
  potential visitors.
 ‣More visitors = more traffic
 ‣More traffic = more conversions (sales, ad clicks,
  downloads, whatever)
Happier Visitors

 ‣Users that can find what they’re looking for become
  loyal, repeat visitors.
 ‣Loyalty = word of mouth
 ‣Adds to your brand/reputation
Search Engine Optimization

 ‣Accessible content makes Google Happy!
 ‣Happy Google ranks you better!
 ‣Better Rankings = More Traffic

 ‣Sometimes you need to disguise accessibility with
  SEO to sell it to stakeholders.
The Spirit of the Web

 ‣The Internet is an open platform
 ‣The web wants to be device agnostic
 ‣Different ways to view the same content is what
  makes the Internet a special medium.
It’s the right thing to do!

 ‣At the end of the day, it’s people on the other end
  of your website.
Thank You!
Accessibility Resources
 ‣ http://webaim.org
 ‣ http://diveintoaccessibility.org/
 ‣ http://juicystudio.com/article/examining-wai-aria-document-andmark-
   roles.php
 ‣ http://www.w3.org/standards/webdesign/accessibility
 ‣ http://jfciii.com/

More Related Content

What's hot

Setting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 ClassSetting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 ClassEileen Lonergan
 
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facetsBecky Davis
 
Web design save earth
Web design save earthWeb design save earth
Web design save earthMax Friel
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepEast Bay WordPress Meetup
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themesnairobiwordcamp
 
11 essential checks before launching your website
11 essential checks before launching your website11 essential checks before launching your website
11 essential checks before launching your websiteLocal Fame
 
Writing Maintainable Tests with PageObjects
Writing Maintainable Tests with PageObjectsWriting Maintainable Tests with PageObjects
Writing Maintainable Tests with PageObjectsMichael Denomy
 
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEOCrawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEOBuiltvisible
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015Equinet Academy
 
Website Design Dos and Don’ts for a Successful Online Presence
Website Design Dos and Don’ts  for a Successful Online PresenceWebsite Design Dos and Don’ts  for a Successful Online Presence
Website Design Dos and Don’ts for a Successful Online PresenceBrad Williams
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOUse Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOGerry White
 
Google Suppression Attack Lost Blogging Files
Google Suppression Attack Lost Blogging FilesGoogle Suppression Attack Lost Blogging Files
Google Suppression Attack Lost Blogging FilesCarl Ocab
 
BrightonSEO - How to use XPath with eCommerce Websites
BrightonSEO - How to use XPath with eCommerce WebsitesBrightonSEO - How to use XPath with eCommerce Websites
BrightonSEO - How to use XPath with eCommerce WebsitesJanet Plumpton
 
How to Blog - #ACR14 Social Media Bootcamp
How to Blog - #ACR14  Social Media BootcampHow to Blog - #ACR14  Social Media Bootcamp
How to Blog - #ACR14 Social Media BootcampPaul Sufka
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile WebBarbara Bermes
 

What's hot (20)

Setting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 ClassSetting up a blog with WordPress.com Jan 2014 Class
Setting up a blog with WordPress.com Jan 2014 Class
 
700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets700 posts – 1 menu, organizing a large info site with taxonomies and facets
700 posts – 1 menu, organizing a large info site with taxonomies and facets
 
Web design save earth
Web design save earthWeb design save earth
Web design save earth
 
From a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by StepFrom a Fireworks Comp to a Genesis Child Theme, Step by Step
From a Fireworks Comp to a Genesis Child Theme, Step by Step
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
WordPress and Child Themes
WordPress and Child ThemesWordPress and Child Themes
WordPress and Child Themes
 
11 essential checks before launching your website
11 essential checks before launching your website11 essential checks before launching your website
11 essential checks before launching your website
 
Writing Maintainable Tests with PageObjects
Writing Maintainable Tests with PageObjectsWriting Maintainable Tests with PageObjects
Writing Maintainable Tests with PageObjects
 
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEOCrawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
Crawling ecommerce sites – Maria Camanes' top tips from Tea-time SEO
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
 
Website Design Dos and Don’ts for a Successful Online Presence
Website Design Dos and Don’ts  for a Successful Online PresenceWebsite Design Dos and Don’ts  for a Successful Online Presence
Website Design Dos and Don’ts for a Successful Online Presence
 
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEOUse Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
Use Google Docs to monitor SEO by pulling in Google Analytics #BrightonSEO
 
Google Suppression Attack Lost Blogging Files
Google Suppression Attack Lost Blogging FilesGoogle Suppression Attack Lost Blogging Files
Google Suppression Attack Lost Blogging Files
 
BrightonSEO - How to use XPath with eCommerce Websites
BrightonSEO - How to use XPath with eCommerce WebsitesBrightonSEO - How to use XPath with eCommerce Websites
BrightonSEO - How to use XPath with eCommerce Websites
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Working local
Working localWorking local
Working local
 
How to Blog - #ACR14 Social Media Bootcamp
How to Blog - #ACR14  Social Media BootcampHow to Blog - #ACR14  Social Media Bootcamp
How to Blog - #ACR14 Social Media Bootcamp
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
 
Developing for Mobile Web
Developing for Mobile WebDeveloping for Mobile Web
Developing for Mobile Web
 
Sea 2011 presentation
Sea 2011 presentationSea 2011 presentation
Sea 2011 presentation
 

Similar to Building An Accessible Site from the Ground Up

Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesPlatypus
 
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web AppsDesigning and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web AppsSteve Smith
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonJoseph Dolson
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyDennis Slade Jr.
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneChris Mills
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markupChris Mills
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web ApplicationDennis Lembree
 
Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Adrian Roselli
 
Website development accessibility
Website development accessibilityWebsite development accessibility
Website development accessibilityIlesh Mistry
 
IE9 for developers
IE9 for developersIE9 for developers
IE9 for developersShaymaa
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteFranco De Bonis
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesJared Smith
 
Blog creationguide forestview
Blog creationguide forestviewBlog creationguide forestview
Blog creationguide forestviewNikos Stagakis
 

Similar to Building An Accessible Site from the Ground Up (20)

Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Designing and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web AppsDesigning and Developing Windowed Interfaces for Web Apps
Designing and Developing Windowed Interfaces for Web Apps
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe Dolson
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
 
Access by Default
Access by DefaultAccess by Default
Access by Default
 
Inclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyoneInclusive design: real accessibility for everyone
Inclusive design: real accessibility for everyone
 
Css, xhtml, javascript
Css, xhtml, javascriptCss, xhtml, javascript
Css, xhtml, javascript
 
HTML5: A brave new world of markup
HTML5: A brave new world of markupHTML5: A brave new world of markup
HTML5: A brave new world of markup
 
How To Build An Accessible Web Application
How To Build An Accessible Web ApplicationHow To Build An Accessible Web Application
How To Build An Accessible Web Application
 
Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013Making your site printable: WordCamp Buffalo 2013
Making your site printable: WordCamp Buffalo 2013
 
Website development accessibility
Website development accessibilityWebsite development accessibility
Website development accessibility
 
Web accessibility
Web accessibilityWeb accessibility
Web accessibility
 
IE9 for developers
IE9 for developersIE9 for developers
IE9 for developers
 
DG Group - Active Or Passive Website
DG Group - Active Or Passive WebsiteDG Group - Active Or Passive Website
DG Group - Active Or Passive Website
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 
RWD
RWDRWD
RWD
 
Accessible code-patterns
Accessible code-patternsAccessible code-patterns
Accessible code-patterns
 
Day of code
Day of codeDay of code
Day of code
 
Blog creationguide forestview
Blog creationguide forestviewBlog creationguide forestview
Blog creationguide forestview
 

More from Russell Heimlich

More from Russell Heimlich (6)

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
 
stickyHeader.js
stickyHeader.jsstickyHeader.js
stickyHeader.js
 
Analytics And You
Analytics And YouAnalytics And You
Analytics And You
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the Web
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
 
Charting with Google
Charting with GoogleCharting with Google
Charting with Google
 

Recently uploaded

Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...JIT KUMAR GUPTA
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfCristobalHeraud
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfswdukle
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 

Recently uploaded (20)

Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdfARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
ARCHITECTURAL PORTFOLIO CRISTOBAL HERAUD 2024.pdf
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdf
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 

Building An Accessible Site from the Ground Up

  • 1. Building An Accessible Site from the Ground Up
  • 2. Russell Heimlich @KingKool68 ‣Web Developer at the Pew Research Center ‣http://www.russellheimlich.com/blog
  • 3. I Like Funny T-Shirts
  • 4. What is accessibility? http://www.flickr.com/photos/artbystevejohnson/4610457832/
  • 5. Accessibility is NOT just about people with disabilities.
  • 6. Accessibility is about PEOPLE! http://www.flickr.com/photos/elvire-r/2451784799/
  • 7. Devices ‣Desktop Computer ‣Mobile ‣In Between (iPad, Netbooks) ‣TV’s http://www.flickr.com/photos/krossbow/4757275301/
  • 8. Interactions ‣Mouse ‣Keyboard ‣Touchscreen ‣Screenreader http://www.flickr.com/photos/a6u571n/3207185886/
  • 9. Technologies ‣JavaScript ‣CSS ‣Images display: none;
  • 10. So what can be done to make websites more accessible?
  • 12. Use the Right Element for the Job <p> = paragraph <h1>-<h6> = Heading 1 through 6 <div class=”paragraph”> Using Tables for Layout
  • 13. Be Aware of the Source Order ‣Markup content the way it should be read NOT the way it should be displayed. Header Header Aside Content Content Aside
  • 14. Create Consistent Conventions <div id=”header”> <ul id=”nav”> <div id=”content”> <div id=”sidebar”> <div id=”footer”>
  • 15. Use Alt Attributes on <img> ‣Include text to display as a backup ‣Provide context to what the user is missing ‣If the image is purely decoration use alt=””
  • 16. Style Alt Text a img { background-color:#EDEBD5; border:medium none; color:#000; font-size:28px; line-height:125%; }
  • 17. Why Bother with Alt Text? ‣Screenreaders read filenames when no alt attribute ‣Text-only browsers/devices benefit ‣Image links have anchor text/context ‣Google indexes alt text ‣Sometimes your CDN goes down
  • 19. Associate Inputs with Labels ‣Link descriptive text with an input field ‣Provides context about what is expected ‣Clicking label focuses input field
  • 20. Implicit vs. Explicit Labels <label for=”name”>Name</label> <input type=”text” id=”name”> <label> Name <input type=”text”> </label> label { curser: pointer; }
  • 21. Use Most HTML5 Input Types ‣type=”search” ‣type=”tel” ‣type=”url” ‣type=”email” ‣Old browsers fallback to type=”text”
  • 22. Type=”search” Has Slight Benefit http://css-tricks.com/webkit-html5-search-inputs/
  • 23. Fieldsets Group Several Inputs <fieldset id=”contact”> <label> Name <input type="text"> </label> <label> Email <input type="email"> </label> </fieldset>
  • 24. Legend is a Caption for Fieldsets <fieldset id=”contact”> <legend>Contact Info</legend> .... </fieldset
  • 26. Turn it on in OSX System Preferences -> Keyboard -> All Controls or Press Control + F7
  • 27. Tab Index ‣Use tabindex attribute to specify tab order ‣Tab index goes from lowest to highest ‣tabindex=”-1” will be skipped ‣If you use proper HTML source order, you’re done!
  • 28. This Site is Gorgeous! http://www.hd-live.co.uk/
  • 30. No Focus State Defined! http://www.hd-live.co.uk/
  • 31. :focus = :hover ‣Anywhere :hover is used, add :focus as well a:hover, a:focus { text-decoration:underline; color:red; }
  • 32. Design for the Outline a { /* This is bad! */ outline:0; } a:focus { /* Keyboard Users */ outline: thin dotted #000; } a:hover { /* Mouse Users */ outline:none; }
  • 33. Design for the Outline ‣Adding outline style is the same as adding a border ‣Some elements need 1 or 2 px of padding ‣TEST, TEST, TEST!
  • 34. Hiding Content the Accessible Way /* Hides from keyboard users */ display:none; /* Hidden but still accessible */ .hidden { left:-999em; position:absolute; top:auto; }
  • 35. Reavling Hidden Content /* Reveal on Focus */ .hidden:focus { position:static; }
  • 36. Skip Navigation Link ‣Lets a visitor skip straight to the content ‣Without it, keyboard visitors suffer ‣Should be the first element after <body> ‣Can be visible or hidden based on the desgin ‣If hidden, should stand out on focus
  • 37. Skip Navigation Link <body> <a id="top" href="#content"> Skip to Content</a>
  • 38. Skip Navigation Link #top:focus { position:static; font-size:1.5em; background-color:#FFFFD5; display:block; font-weight:bold; color:#000; padding:2px 15px 5px; }
  • 40. Add an Anchor to Search Forms <form action="/search/#content"> <label for=”q”>Search</label> <input type="search" id=”q”> <input type=”submit” value=”search”> </form>
  • 41. Add an Anchor to Search Forms ‣Skips visitors straight to the results ‣No need for screenreaders to read through nav
  • 42. ARIA Landmark Roles ‣Help define the structure of a document ‣Screenreaders can move around different sections ‣Just add role attribute to an element <div id=”header” role=”banner”>
  • 43. role=”article” ‣Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on.
  • 44. role=”banner” ‣Site-orientated content, such as the title of the page and the logo. ‣Header
  • 45. role=”complementary” ‣Supporting content for the main content, but meaningful in its own right when separated from the main content. ‣Aside or sidebar
  • 46. role=”contentinfo” ‣Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ‣Footer
  • 47. role=”main” ‣Content that is directly related to or expands on the central content of the document. ‣Main content container, #content
  • 48. role=”navigation” ‣Content that contains the links to navigate this document and/or related documents.
  • 49. role=”search” ‣This section contains a search form to search the site.
  • 51. Mobile Stylesheet ‣Smartphones handle websites OK ‣Dumb phones need a slimmed down stylesheet ‣http://perishablepress.com/press/2009/08/02/ the-5-minute-css-mobile-makeover/
  • 52. Why should I care?
  • 53. More Visitors ‣The more ways your site can be accessed, the more potential visitors. ‣More visitors = more traffic ‣More traffic = more conversions (sales, ad clicks, downloads, whatever)
  • 54. Happier Visitors ‣Users that can find what they’re looking for become loyal, repeat visitors. ‣Loyalty = word of mouth ‣Adds to your brand/reputation
  • 55. Search Engine Optimization ‣Accessible content makes Google Happy! ‣Happy Google ranks you better! ‣Better Rankings = More Traffic ‣Sometimes you need to disguise accessibility with SEO to sell it to stakeholders.
  • 56. The Spirit of the Web ‣The Internet is an open platform ‣The web wants to be device agnostic ‣Different ways to view the same content is what makes the Internet a special medium.
  • 57. It’s the right thing to do! ‣At the end of the day, it’s people on the other end of your website.
  • 59. Accessibility Resources ‣ http://webaim.org ‣ http://diveintoaccessibility.org/ ‣ http://juicystudio.com/article/examining-wai-aria-document-andmark- roles.php ‣ http://www.w3.org/standards/webdesign/accessibility ‣ http://jfciii.com/