Cities: HTML5 Meetup 13 August 2013
-
Upload
los-angeles-accessibility-and-inclusive-design-group -
Category
Technology
-
view
141 -
download
2
Transcript of Cities: HTML5 Meetup 13 August 2013
![Page 1: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/1.jpg)
Cities
Making Free AccessibleWordPress Themes
![Page 2: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/2.jpg)
Cities
There are 1,941 themes in the WordPress Theme Directoy
Five of them are accessible
![Page 3: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/3.jpg)
What is Cities?Site owners are looking for accessible WordPress themes
There is a spectacular lack of accessible WordPress themes
A world-wide group of accessibility pactitioners are creating free accessible WordPress themes
![Page 4: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/4.jpg)
Joseph Karr O’Connor
Invited expet W3C HTML5 Accessibility Taskforce
13 years accessibility experience
WordPress Accessibility Group
Cities: Making Free Accessible WordPress Themes
![Page 5: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/5.jpg)
Montreal
Theme project managed by Rocio Alvaado @AccessibiliteWb -
bilingual small business theme.
![Page 6: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/6.jpg)
Montreal
Will include the Quebec government standard SGQRI 008-01.
Issues that need specific attention for the back-end:✓ Proper headings
✓ Form field associations
✓ Fieldsets and legends
✓ Logical order of content
![Page 7: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/7.jpg)
Montreal
Front-end:✓ Sufficient colour contast ✓ Proper headings ✓ Logical order of content ✓ WAI-ARIA for dynamic content ✓ Using elements semantically✓ Making non-textual content textual
✓ Navigating with TAB key with a visible outline
![Page 8: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/8.jpg)
![Page 9: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/9.jpg)
Montreal
Front-end:✓ Making links understandable out of context
✓ Making sure that blog widgets like archives, categories and recent posts are accessible when implemented
✓ Educate (commenting code to inform the developer of specific accessibility element)
![Page 10: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/10.jpg)
Mumbai
Shilpi Kapoor @Shilpi_Kapoor of BarrierBreak is developing the
Mumbai theme.
![Page 11: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/11.jpg)
Accessibility
“Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
![Page 12: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/12.jpg)
AccessibilityCities themes standards:
Section 508 Compliant
WCAG 2.0 Level AA Compliant
HTML5
W3C Validation
Commented code
![Page 13: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/13.jpg)
Canbera
Government theme By Simon Pascal Klein @klepas a freelance web
designer with a passion for good typogaphy.
![Page 14: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/14.jpg)
AccessibilityMoving Beyond Technical AccessibilityConstructing a POUR website:✓ Perceivable in multiple ways
✓ Opeable using various input methods
✓ Understandable by your readers
✓ Robust across opeating systems and platforms
![Page 15: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/15.jpg)
Copenhagen
by Karen Mardhal @kmdk driven by the idea of inclusion and universal design - we're all in this together!
![Page 16: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/16.jpg)
Accessibility
✓ Enable skip links
✓ Alternate text for pictures
✓ Captioning for video/audio
✓ Don’t use color for navigation
✓ Reading order is correct
✓ Avoid timeouts in forms
✓ Data tables and forms properly coded
![Page 17: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/17.jpg)
Accessibility
✓ No-script elements for scripts
✓ Keyboard navigable
✓ Applications don’t override AT
✓ Visual focus indicator
✓ Don’t override user agent controls
✓ Sufficient color contast
✓ No quick motion
![Page 18: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/18.jpg)
Sydney
Theme by Lisa Herrod @scenariogirl building
a business theme.
![Page 19: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/19.jpg)
WP AccessibilityWordPress accessibility group –dedicated to improving accessibility in core
Join at Make WordPress Accessible
Tweeting at @WPAccessibility
![Page 20: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/20.jpg)
D.C.
Team managed by David Kennedy @DavidAKennedy - theme for non-
profits and government.
![Page 21: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/21.jpg)
WP Accessibility
✓ Mel Pedley
✓ Gaham Armfield
✓ Cyndy Otty
✓ Joe Dolson
✓ Amanda Rush @cswordpress
✓ Sharon Austin @_Redd
✓ Amy Hendrix @sabreuse
✓ Karl Groves@karlgroves
✓ Joseph Karr O'Connor
![Page 22: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/22.jpg)
WP AccessibilityWordPress theme review guidelines for accessibility are in daft mode.
Internet relay chat, Wednesdays, 19:00 UTC, #wordpress-ui, sever irc.freenode.net or via freenode web chat.
![Page 23: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/23.jpg)
Toronto
Theme project managed by Jennison Asuncion @Jennison.
![Page 24: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/24.jpg)
Accessibility Plugins
WP Accessibility by Joe Dolson✓ Remove redundant title attributes from page lists, categoy lists, and archive menus.
✓ Enable skip links with WebKit suppot by enqueuing JavaScript suppot for moving keyboard focus.
✓ Add skip links with user-defined targets. (Customizable targets and appeaance.)
![Page 25: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/25.jpg)
Accessibility Plugins
WP Accessibility by Joe Dolson ✓ Add language and text direction to your HTML attribute
✓ Remove the target attribute from links.
✓ Force a search page error when a search is made with an empty text string. (If your theme has a search.php template.)
✓ Remove tabindex from elements that are focusable.
![Page 26: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/26.jpg)
Nashville
Theme by Anna Belle Leiserson for congregations (churches,
temples, mosques etc.)
![Page 27: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/27.jpg)
Accessibility Plugins
WP Accessibility by Joe Dolson✓ Strip title attributes from images inseted into content.
✓ Add an outline to the keyboard focus state for focusable elements.
✓ Add post titles to standard "read more" links.#uxdrinkinggame If someone says all the links should just say, "read more..." drink
![Page 28: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/28.jpg)
Accessibility Plugins
WP Accessibility by Joe Dolson ✓ Add a toolbar toggling between high contast, large print, and desatuated (gayscale) views of your theme.
✓ Fix cetain accessibility issues in the WordPress admin styles
✓ Show the color contast between two provided hexadecimal color values.
![Page 29: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/29.jpg)
Accessibility Plugins
Accessibility plugins by Joe Dolson:My Calendar
WP to Twitter
WP Accessibility
BotSmasher
![Page 30: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/30.jpg)
Boston
Theme project managed by Char James-Tanny @CharJTF -
a restauant theme.
![Page 31: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/31.jpg)
Ottawa
Theme project by Simply Accessible managed by Elle McPherson
@nethermind - education theme.
![Page 32: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/32.jpg)
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld
"Plugin and theme developers should be required to show their work to their mother or gandmother, maybe then they'd discover, for example, that a grey site with grey chaacters is pretty hard to read when you're older."
![Page 33: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/33.jpg)
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld✓ Stand alone widget✓ Included function genesis_tweet_linkify, renamed it wp_accessible_tweet_linkify✓ Removed target is _blank for links, so they don't open in a new window
![Page 34: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/34.jpg)
New York
Theme project managed by Patik Patel @ppatel of EZFire
will be a business theme.
![Page 35: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/35.jpg)
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld✓ Removed title attribute in links (messes up screen reader output)
✓ Removed links on hashtags to prevent an overload of links for a tweet
✓ Removed the timestamp/link to prevent an overload of links for a tweet
![Page 36: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/36.jpg)
Accessibility Widgets
wpacc-accessible-twitter-feed by Rian Rietveld✓ Removed inline style for font-size
✓ Included .pot file and dutch .po/.mo files
![Page 37: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/37.jpg)
Twin Cities
Theme project managed by Joe Dolson @joedolson - Joe is a driving
force for WordPress accessibility.
![Page 38: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/38.jpg)
Accessible Content
✓ Use "Alternate Text" field when uploading images, describe the intent of the image.
✓ Don't use "Read More" links, describe destination: Read More about Cities.
✓ Links: don't use "Open link in new window/tab" check box.
![Page 39: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/39.jpg)
Accessible Content
✓ Use headings to sum up paagaphs and give structure.
✓ Use lists if content is a list.
✓ Adding video/sound? Don't autostat!
✓ Make sure video is Closed Captioned and provide a tanscript for audio.
![Page 40: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/40.jpg)
Rio De Janeiro
Theme project managed by Ana Isabel Paaguay
@projetoinclusiv
![Page 41: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/41.jpg)
São Paulo
Theme project managed by Ana Isabel Paaguay
@projetoinclusiv
![Page 42: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/42.jpg)
Augusta Georgia
Theme by Amanda Rush @cswordpress
![Page 43: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/43.jpg)
Manchester UK
Theme by Helen Wallwoth @AccessibleGeeks
![Page 44: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/44.jpg)
Los Angeles
Theme project managed by Natalie MacLees
![Page 45: Cities: HTML5 Meetup 13 August 2013](https://reader033.fdocuments.in/reader033/viewer/2022052822/554ab58fb4c905da668b580c/html5/thumbnails/45.jpg)
CreditsFree Blurred Backgrounds by Timothy Whalin @TimothyWhalin
Images from Flickr via HaikuDeck for iPad
Composed in Keynote, posted to Slideshare, available in a tanscript.
This presentation: http://bit.ly/Cities-WordCamp-Montreal-2013