Hello everybody, and thank you for, among all other interesting talks today, choosing to dwell into the topic of accessibility, and how to make the world better for everyone.
I’m far form being an expert in accessibility, and I have to thank the passion for it to my A11y professor from University of Barcelona, Mireia Ribera. This however, plays in favor of my aim today, as my goal will be to demonstrate that you don’t need to be experts in accessibility to care for all your users, and you don’t need to be experts to implement basic accessibility checks.
meda
Sticky Note
Unmarked set by meda
What’s the Story http://radinamatic.github.io/tcworld2015/
Download packaged XPI file with Firefox add-ons
OR
Install add-ons directly from Mozilla website and Chrome Store with provided links
Once you dive into a11y you’ll find “guidelines”, “recommendations”, “requirements”, “success criteria”, and acronyms like “WCAG”, “Section 508”!�Someone “…forced to learn some new language from someone who was deliberately trying to confuse 228 page "Understanding WCAG 2.0" document 385 pages for "How to Meet WCAG 2.0" to explain a standard which has a core principle of "Understandable“ Someone also said “It's like reading the Constitution!!!” These are reference docs, you did not learn HTML from reference!
Plan the right intervention, by the right person, at the right time within the web development lifecycle Determine goals, roles and policies as BROADLY as possible (aiming at the organization as a whole).
meda
Sticky Note
Unmarked set by meda
OFFER ALTERNATIVES
Presenter
Presentation Notes
Most useful takeaway today!
meda
Sticky Note
Unmarked set by meda
General A11y ToolsWAVE Web Accessibility Evaluation Tool
Title – Must be an adequate and brief description of content, different from other pages in the website Better SEO, Bookmarks, Tabs Screen Readers DO NOT read styles, JUST markup! Semantic HTML (section, header, footer, main, etc…) gives you a lot of great accessibility features for free (little developer effort) Think like a machine – understand what information is available to the computer.
meda
Sticky Note
Unmarked set by meda
Headings
Presenter
Presentation Notes
Quacks like a duck: If it looks like a heading visually, it should be a H tagged heading; If it is a H tagged heading, it really should be a heading type of content; Sequential or with meaningful hierarchy Better SEO, content structure (in-page navigation) RESIZE: All text gets larger at browser zoom; no text disappears under other elements or out of the screen; RESPONSIVE (proportional font, media queries): Think Mobile (small screens)
meda
Sticky Note
Marked set by meda
Document Structure - Tools Juicy Studio Accessibility Toolbarhttps://addons.mozilla.org/en-uS/firefox/addon/juicy-studio-accessibility-too/
Jim Thatcher’s Favelets http://jimthatcher.com/favelets/
Keyboard navigation- Tab & Shift Tab through all the links
- Arrow keys through menus- Skip-to links on top (first element after <body>)
- Accesskeys (debatable – better avoid)
Define visible focus state!:focus{ outline: 0;}
Presenter
Presentation Notes
Define visible focus state style together with hover state! For good example see webaim.org All actionable elements MUST be focusable, and it must be clear when are they IN focus; Check for focus traps
meda
Sticky Note
Marked set by meda
Images – The elusive ALT attribute
- alt = “?????”
- DESCRIBE the image convey both content and functionality
- Do not put text inside images (localization)
- Decorative images – empty alt=“”
Presenter
Presentation Notes
The alternative text reflects the purpose of the image, and destination if the image is link. I can’t stress enough the SEO benefits, also mobile versions (think email templates) or low bandwith users (EVERYONE)! Googe search for “alt tag” Your CDN might be down! HTML Working Group at W3C is working on a 45 pages document that is an extension to the HTML5 specification on how to write alternate text. A good rule of thumb to consider is to include what you might relay over the phone.
“Color blindness,” or more formally, color vision deficiencies (CVD) affect roughly 10% of the population, mostly men – That translates to 108 million of web users!. Links were originally blue and underlined – turned to be good choice because it’s the least frequent color blindness (0.5% of population)
meda
Sticky Note
Marked set by meda
Color & Contrast
Color & Contrast
Presenter
Presentation Notes
Again: OFFER ALTERNATIVES! DO NOT use color ALONE to convey meaning!
meda
Sticky Note
Marked set by meda
Color & Contrast - ToolsContrast Analyzer - http://www.paciellogroup.com/resources/contrastanalyser/
Accessibility Color Wheel - http://gmazzocato.altervista.org/colorwheel/wheel.php
CONTRAST-A-WEB - http://dasplankton.de/ContrastA/ Color Safe - http://colorsafe.co/
Summary (not on layout tables) - But then again, don’t use tables for layout! Table Builder - http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/
meda
Sticky Note
Marked set by meda
Links and FormsLinks- Concise - Descriptive - Correctly positioned
Click More Here
Forms- Labels- Fieldsets for grouping- Tabbing order- Instructions for required fields - Errors
Avoid CAPTCHAs!
Presenter
Presentation Notes
Always keep in mind how screen readers work http://www.accessibilityoz.com/2014/02/links-and-accessibility Required fields: clearly indicated - instructions text field precedes the actual required fields Errors: how are errors presented after form submission? where is the focus left? (NOT the submit button!)
meda
Sticky Note
Marked set by meda
Writing- Plain language - Sentences up to 25 words - Paragraphs up to 3-4 sentences - Active voice - Consistent vocabulary - Bulleted lists - Consistent format & navigation
Presenter
Presentation Notes
Benefits: Cognitive & EVERYONE & LOCALIZATION U from POUR Level of literacy
Benefits: Cognitive & EVERYONE 'This typography is not designed to recreate what it would be like to read to read if you were dyslexic it is designed to simulate the feeling of reading with dyslexia by slowing the reading time of the viewer down to a speed of which someone who has dyslexia would read'
meda
Sticky Note
Marked set by meda
Multimedia
Accessible Multimedia
- Test transcript for audio only
- Text description for video with no audio
- Closed captions & interactive transcript & audio description for video with audio
Google doc is developed and maintained by the Committee on Institutional Cooperation Information Technology Accessibility Group (CIC ITAG) Media Player Accessibility sub-group. Much of its accessibility criteria is borrowed from W3C Media Accessibility User Requirements. Links to projects, references, and comments are in ""notes"" associated with matrix cells.(http://www.cic.net/groups)(http://www.w3.org/WAI/PF/media-a11y-reqs/)"
The 2014 update to PDF/UA, published in December 2014, is the first fully accessible standard ISO has ever published; the PDF file distributed by ISO itself conforms to PDF/UA.
meda
Sticky Note
Marked set by meda
Accessible PDF - Tools- Acrobat Pro Accessibility checkers
- PDF Accessibility Checker (PAC 2.0)
- AccessODF - accessibility checker for Libre Office Writer
Presenter
Presentation Notes
AccessODF developed within the AEGIS project (at KU Leuven Belgium), funded by the European Commission (2008-2012).
meda
Sticky Note
Marked set by meda
Thank you!
Questions? Your opinion is important! http://UA10.honestly.de
or scan the QR code
Special thanks to Digital Content Management - Graduate Dept. and Prof. Mireia Ribera at iSchool of University of Barcelona, Spain.
