Creating Accessible Web Content

Editor's Notes

• #3: Centralized controlCentrally managed hosting platformCentrally managed Cascade templates/codeLimited flexibility (perhaps no CSS, JS, or WYSIWYG)Content created or approved by a trained core groupEasiest model for ensuring accessibility complianceDistributed controlClients provide hosting platformCentrally managed Cascade templates/codeContent flexibility (client can create CSS, JS, WYSIWYG)Content created by clients (perhaps with oversight/training)More effort required to maintain accessibility complianceDecentralized controlClients provide hosting platformClients can create Cascade templates/codeContent flexibility (CSS, JavaScript, WYSIWYG)Clients create contentMaximum effort to maintain compliance
• #4: Per research at http://blog.powermapper.com/blog/post/Government-Accessibility-Standards.aspx“ …adoption of WCAG 2 is progressing steadily and becoming increasingly important:The governments of Australia, Canada, France, Germany, Hong Kong, Japan and New Zealand have already adopted WCAG 2.UK government sites must comply with either WCAG 1 AA or WCAG 2 AA.In the US, Section 508 is being refreshed to harmonize with WCAG 2.The European Commission is investigating a move to WCAG 2 as a European government standard, but this is complicated by competing national standards in Germany (BITV) and Italy.”
• #5: W3C Web Accessibility Initiative: http://www.w3.org/WAI/PerceivableInformation and user interface components must be presentable to users in ways they can perceive (site, sound and touch)Information is transformable from one form into another, so that it can be perceived in multiple waysFirststep to accessibility upon which all others are based, and without which accessibility cannot happenContent should be separable from the way it is styled or presentedOperableUser interface components (froms and controls) and navigation must be operableNot everyone uses a standard keyboard and mouse to access the webKeyboard accessibility cuts across disability types and technologiesUsers can find, navigate through, and interact with web content: search site mapsBypass information: skip navigationSemantic markup Error recoveryUnderstandableWeb information and the operation of the user interface must be understandableWriting is simple, concise and appropriateAlternative or suplemental presentationsFunctionality is understandable as wellRobustContent can be interpreted reliably by a wide variety of user agents, including assistive technologiesUsers should be allowed to choose their own technologies to access web contentLimit full support to a subset of technologies that is not too restrictive is a reasonable approachUse technology according to specification (like HTML)Understanding Conformance: http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/conformance.htmlIntroduction to WCAG:http://www.w3.org/WAI/intro/wcag.phpWCAG 2 Quick Reference:http://www.w3.org/WAI/WCAG20/quickref/
• #6: User-centricYou do not control the user experience, only contentLogical information architectureSite is logically arranged/linkedNavigation is is consistent and clearUse standard (X)HTMLBasis of accessibilityHTML 4.01, XHTML 1.0, XHTML 1.1, HTML 5Specify page DOCTYPE : http://www.w3.org/QA/2002/04/valid-dtd-list.htmlDeclare the natural language of the page: http://www.w3.org/International/articles/language-tags/NOTE: XHTML 5 has elements that are not yet accessible. Check before you use. http://html5accessibility.com/NOTE: HTML 4.01 is a fine standard, but Cascade will markit up out of spec.Use CSS and JavaScript appropriatelyDon’t use deprecated HTML tags for presentationDon’t use CSS for contentStyle for hover and focusDon’t use JavaScript when HTML tags will workUse fonts appropriatelyResizable to 200%: use em’s or % for sizing wherever possibleAvoid small fontsUse consistent font facesLimit font variations (bold, italics, and ALL CAPs)Write for the WebFront loaded contentConcise where possible: Use a list rather than a paragraphAudience appropriateOptimize contentImage sizesMinify CSS and JavascriptEnable Web server cachingPage load speed: http://www.atulperx.com/tools/page-speed-optimization-tools/
• #7: Minimize WYSIWYG editor needUsing datadefinitions to provide form based content editing provides more controlData definitions use good practicesData definitions and associated formats should generate compliant (X)HTMLProvide appropriate overidesAllow users flexibility to override default page language or header levels (lang and H)Style for hover and focusIf using a CSS reset, redefine hover/focus functionalityWhereever there is a hover style, alos make it a focus style
• #8: ValidateW3C Validators: http://www.w3.org/QA/Tools/No mouseYou can interact with all controls, links, and menusYou see what item has focus and focus order matches the intended interaction orderNo keyboard trapDisable CSSUsers may apply a custom style sheetImportant content, controls, icons, or other actionable elements still visibleContent still displayed in a reasonable, easy to understand orderDisable imagesContent makes senseAll images have an alt and it is used appropriately (links, charts, pictures, decoration)Important controls are still availableZoom textUsers may enlarge their default browser text size text to make it easier to readAt 200% text increase, content is all still visible and doesn’t overlapCheck contrastForeground and background colors need sufficient contrast to allow content (text) to be readableSome color combinations don’t work well for the three types of color blindnessTools available for automating this testData tablesUse tables for data, not layoutEnsure column and rows are identified (th, scope, id/hdr)Split complex tables into simple tablesFormsAll inputs need a label (id/for)Use fieldsets to group associated inputsAppropriate error messages are displayedMultimediaVideo with informational audio is captionedAudio tracks with information have transcriptsCross browserMake sure content works across different browsers and operating systemsCross deviceHow well does content function of different platformsHow well does content function in different resolutions
• #9: No tool tests completelyAutomated tools test at most 30% of possible accessibility issuesFree and commercial toolsThere are many tools available as standalone applications, browser plugins, or on-line that assist with testingMost free tools test only one pages at a timeSome of these are included in the handouts and in the resource downloadScheduled scansCommercial tools can spider sites on a scheduled basisAT browsersScreen readers: like NVDA or JawsSimulatorsOther AT browsersNot necessarily the same experience as user of the technologyUser testingUser testing is valuableCostly in terms of time and resourcesNeed to separate user preference from actual issuesTesting for combinations of disabilities?Commercial resources available, but at a costOther Web contentAnything content that displays on your Web site should be accessible.Third party content (iframes, Google, Face book, RSS)PDF’s need to be compliantEven slide presentationsWeb application testing more difficult where client-side coding is usedARIACascade integrated testing?Hannon Hill has explored leveraging a tool through and API to provide more accessibility testing prior to (?) content publishingSome checks can be down using CSS: http://www.karlgroves.com/2013/09/07/diagnostic-css-super-quick-web-accessibility-testing/
• #10: User training for content providers and Web developers is a mustIf users can edit content, then they can make inaccessible contentAlt for imagesWhat is the appropriate alt attribute for an photo, a photo with a caption, a photo that is a link, a table or chart?Tables for data onlyIf user can access the WYSIWYG editor, they can create tablesThey should be provide methods for producing columnar content without resorting to tables for layoutLinks don’t open new windows/tabsIn general, links should not spawn new windows or tabsRemoves control from the userNo back buttonIframesUsers need to understand that content displayed on their page through the use of iframes my not be accessibleIframes should be correctly labeledWriting for the WebIs it appropriate for the intended audience?Is it appropriate for the Web or for a different medium?