PowerPoint Presentation

Website Accessibility TestingTodd M. WeissenbergerWeb Accessibility CoordinatorUniversity of Iowahttp://itaccessibility.uiowa.edu

1The Line on AccessibilityAs many as 1 in 5 web users may experience accessibility issuesAccessibility strategies often provide a concrete response to universal usability issuesGuidelines and tools exist to assist designers and developersWeb standardsAccessibility LegislationDevelopment and Evaluation ToolsEnd-User technologiesTools can indicate the presence of accessibility barriersHuman testing is a necessary part of accessibility testing

2An Accessibility Assessment canProvide insight into your sites accessibilityGenerate a roadmap of corrective tasksExpose non-standard practices and outcomesHelp you understand your sites core functions in a deeper contextSite AssessmentsSelf-AssessmentPerformed by site managers prior to initial Web Accessibility EvaluationAddresses low-hanging fruit and common compliance flagsLikely to catch numerous occurrences of non-conforming codeSite assessment by ITS Web Accessibility CoordinatorAutomated evaluation toolRecommendations and best practicesAssistance with remediation/rebuildingThe purpose of self-assessment is to identify and correct simple issues with a site that might result in a lower accessibility score when the site is evaluated by automated software.4Evaluation Scope: the 3 CsContentSite segmentsContent types (HTML, PDF, Media, Office)CriteriaGuidelines, standards, policyTasks, outcomesConformanceEssential conformance (Yea/Nay)Detailed review (number of issues, where they are located)In-depth analysis (remediation/repair options)What to checkWhat content do you want to test?Top 20% of visited contentContent that supports core function of unitContent with an accommodation requestWhat file types are involved?Can content be presented in alternative formats?What content is under review?RemediateRebuildDiscard

What standards to applyWCAG 2.0, Level AAWide adoption, including the University of IowaBasis for forthcoming update of Section 508Outcomes basedSection 508Federal legislationIncludes web, software, telecommunications, and other technical categoriesIs not the Americans with Disabilities act (ADA)State, regional, institutional standards

What to look forText AlternativesKeyboard OperabilityDocument Structure/Heading LevelsCSS Contrast/Element StylesFormsTables

What to useOnline ToolsWAVEFAEJuicy StudioPlug-Ins and ExtensionsWeb DeveloperWAVEWeb Accessibility (FAE)Juicy StudioFANGSWeb Accessibility ToolbarManual examinationTitle and heading textVisual focus indicatorsScript and timing controlClient-side forms validationIndicating changes in languageMultimedia captioning checksIdentifying TasksHow does the user enter and exit the application?What are the tasks and outcomes?How does the user know when the task is successfully completed?Is there a time component or limitation?

Types of AssessmentAutomated assessmentCovers a lot of groundYields objective resultsDefined by the tools algorithmsManual assessmentCovers ground more slowlyResults may be informed by user experienceTask and process based

Text AlternativesALT text provided for imagesALT text accurately conveys meaning and functionEmpty ALT attributes employed for decorative imagesLinks containing images and text are combined into a single linkText alternatives to non-text contentLinks and other ALT content provided for embedded objectsCAPTCHAs are visually accessibleFRAME and IFRAME use the TITLE attribute

Missing or questionable ALT text (WAVE)

Missing or questionable ALT text (WAT)

Keyboard AccessibilityAll content and functionality are available using the keyboardKeyboard event handlers are equivalent to mouse handlersNo keyboard traps existObjects are highlighted onfocusCustom key shortcuts dont conflict with the parent application or operating systemDocument Structure/Heading LevelsPages use an appropriate DTDAll pages include a descriptive Pages include appropriate meta informationPage language identified by the LANG attributeChanges in human language are indicated by the use of the LANG attribute

Document Structure/Heading LevelsPages use an appropriate DTDAll pages include a descriptive Pages include appropriate meta informationPage language identified by the LANG attributeChanges in human language are indicated by the use of the LANG attribute

FAE Toolbar: Missing DTD, Title, and LANG

Heading LevelsOpen page or documentIn WAVE toolbar, select OutlineIn Web Accessibility toolbar, select Information >> View Document OutlineQuestions:Does heading structure skip levels?Does page include ?Are there elements preceding navigation lists?

Visual Appearance

Broken Heading Structure (WAT)

CSS, Contrast and Text SizeColor contrast ratios4.5:1 (14 point text or smaller)3:1 (larger than 14 point)Font sizes described in em, % or namesText in form inputs is scalablePages equally legible when style sheets are omittedCSSOpen the page or documentIn WAVE toolbar, select Disable StylesIn Web Accessibility toolbar, select CSS >> Disable Styles >> Disable All StylesQuestions:Is page still legible?Does the page order make sense?

Color ContrastOpen Colour Contrast AnalyserUse eyedropper to select foreground/background colorsResults visible in CCAQuestions:Does large text meet contrast standards?Does small text meet contrast standards?

Colour Contrast Analyser

Text SizeOpen the page or documentFirefoxSelect VIEW >> ZOOM TEXT ONLYIncrease Zoom (Win: Ctrl ++, Mac: Cmd ++)Internet ExplorerSelect VIEW >> TEXT SIZE >> LARGESTQuestions:Does text zoom at all?Does text remain legible within page layout?Are form inputs scalable?Text Zooming in Firefox

FormsForm inputs accompanied by OR use the TITLE attributeForms are keyboard operableUsers can review and correct inputs before submitting formForm validation and alert include descriptions of errorsForm validation and alert are interactive for users of assistive technologies

Check Form LabelsWeb Accessibility ToolbarSelect Forms >> View Form InformationAll input elements should have ID attributes, and be accompanied by labelsWAVERun Errors, Features, and Alerts reportNote missing label tags positioned next to form inputsMissing Form Labels: Web Accessibility Toolbar

Missing Form Labels: WAVE

Data TablesTables are not used for page layoutTables use and to structure and present dataTable headers include SCOPE and ID attributesData cells include HEADERS attributeTables include CAPTION and SUMMARYFAE: Table construction

Dynamic ContentContent that updates automatically can be user-controlledContent that updates automatically uses ARIA alert or live role to notify user as appropriateUser can obtain extension for timed eventsMultimediaCaptioning and TranscriptsSynchronized deliverySearchableKeyboard operable

Common Compliance Issues*Missing or inadequate text equivalentsInsufficient color contrastMissing LANG attributeNon-adaptive font sizeNested headings construction elements36