Is Your Content Readable? -

Is Your Content Readable? -

Accessibility Testing With Screen Readers Dan Brown Sr. Quality Assurance Engineer, Blindness Technologies [email protected] Agenda Introduction Screen Reader Overview Downloading and Installing NVDA

Using the Keyboard NVDA User Interface Reading Modes Headings and Lists Form Fields

Links Graphics Q and A 2 Who Is Dan Brown? Ive written a few books you may have heard of

3 Introduction 1994-1996: University of Texas at Austin, Assistive Technology Trainer 1996-2001: Texas Commission for the Blind, Adaptive Technology Trainer 2001-2003: Lampert and Company,

Director of Training 2003-2015: HumanWare, Blindness Product Specialist Regional Account Manager 2015-Present: Pearson, Senior Quality Assurance Engineer for Blindness Technologies 4 Presentation Website ment/conferences/accessu2019.htm

5 Availability There are now screen readers available for all major software platforms. Mac and iOS: VoiceOver Android: TalkBack, BrailleBack (Speech and braille access handled separately.)

Chrome OS: ChromeVox Amazon Fire: VoiceView Windows: Microsoft Narrator 6 Braille Displays Many braille readers also read screen reader output using a braille display.

Braille displays are electromechanical devices that display braille characters. The characters are formed by pins that are alternately raised and lowered through holes in a flat surface. Displays also have braille keyboards, allowing users to navigate and enter braille that is translated into text.

7 Braille Display Advantages The use of braille displays provide several advantages to a speechonly approach: Reduced reliance on speech output in noisy environments. Improved spelling. Increased ability to navigate and manipulate spatial data,

such as in tables. Enhanced ability to detect text attributes such as capitalization, punctuation, font changes, and indents/outdents. 8 Microsoft Narrator, A Brief History In the past, Narrator was only used when no other screen reader was available, or to install a 3rd party alternative. Microsoft partnered with Ai Squared to offer the WindowEyes screen reader free for customers who purchased Microsoft Office.

Narrator received a major upgrade with the Windows 10 Anniversary Update in 2016. Now boasts many of the same benefits as full-featured 3rd party screen readers 9 3rd Party Windows Screen Readers And then there were two JAWS for Windows: http://www.freedomscientific.c

om/ NonVisual Desktop Access, NVDA: June 14, 2016: VFO Group purchased Ai Squared, makers of Window-Eyes May 15, 2017: VFO Group ends sales for Window-Eyes in the U.S. 10

Downloading and Installing NVDA Go to NV Access: Choose the Download link Choose the Download button, and save the file in a familiar location Run the install file, and follow the on-screen instructions (WARNING: You must have admin rights to successfully install the application!) 11 Keyboard Access Screen reader users can only navigate a webpage by using the keyboard. All content functionality should be available through the keyboard.

Content should be presented in a logical order. Useful if content has been divided into structural blocks. Beware creating a Keyboard Trap! When focus cannot navigate away from a particular element. Keyboard Compatibility | Web

Accessibility Initiative: ve-videos/keyboard/ 12 NVDA Welcome Dialog Exercise Launch Dialog: NVDA+N, H, L Reread Dialog: NVDA+B Move forward/backward by dialog tabs: Ctrl+Tab/Ctrl+Shift+Tab Move forward/backward by dialog fields: Tab/Shift+Tab Navigate through combo boxes, list boxes, and radio buttons: Up/Down Arrow Toggle checkboxes: Spacebar Press button with focus: Enter Cancel dialog: Escape 13 Keystroke Categorization When trying to remember a keyboard command, use the following

categories: Insert/Capslock: Screen reader modifier key Alt: Activates menus and pushes buttons Control: Accesses commands inside menus (Ctrl+O = Open, Ctrl+N = New, etc.) Shift: Selects text when combined with navigation keys Windows: Windows commands (Windows = Start Menu, Windows+D = Desktop, etc.) 14 Basic Navigation Navigate by character Left/Right Arrow Navigate by word Ctrl+Left/Ctrl+Right Arrow Navigate by line Up/Down Arrow Navigate by paragraph Ctrl+Up/Ctrl+Down Arrow

Beginning and end of line Home/End Beginning and end of document Ctrl+Home/Ctrl+End 15 Miscellaneous Commands Silence Speech: Control Keyboard Help: Insert+1 Read title of current application: Insert+T Open Start Menu: Windows Go to Desktop: Windows+D Switch in-between applications: Alt+Tab (Hold down Alt and continue

pressing Tab to switch between multiple apps.) 16 NVDA User Interface Press NVDA+N to activate Press Up/Down Arrow to navigate the menu Press Enter to select a menu option Press Escape to exit 17 Document Navigation Exercise Open the Practice Document on the presentation website, and follow its instructions.

18 Reading Modes Screen readers typically have two reading modes: Review mode: Content is readable, but not available for editing. Single letter mnemonics provide quick access to document elements. H, Heading; L, List, etc. Interactive Mode: Keystrokes are passed through to the active application.

Screen readers automatically switch modes based on context. 19 Whats Your Name? These two concepts can have very different names. JAWS for Windows Review Mode = Virtual PC Cursor Interactive Mode = Forms Mode NVDA

Review Mode = Browse Mode Interactive Mode = Focus Mode Windows Narrator Review Mode = Scan Mode Interactive Mode = (Not Specified) 20 Mode Handling Why wont that command work here? Screen readers try and figure out what you want to do based on context.

Interactive Mode: In Microsoft Word, youll almost certainly type something. Review Mode: In Adobe Acrobat, youll probably read something. Automatic Mode Switching: In a web browser or e-mail program, youll need to do both. 21 Switch That Mode The following commands allow you to manually switch in-between modes.

JAWS for Windows: Insert+Z NVDA: Insert+Space Windows Narrator: Capslock+Space 22 What Makes A Document Accessible? The elements that provide structure and meaning in webpages perform the same function in other documents as well. 23 Headings Headings provide structure to a page:

HTML allows up to six levels of headings,


Pages should be structured in a hierarchical manner. A single page title at level one, major headings at level two, subheadings at level three, etc. Do not skip heading levels,


Do not use text formatting large fonts, bold printto give a visual appearance of headings without markup. 24 Heading Commands H/Shift+H: Move forward/backward by headings. Insert+F6: (JAWS/Narrator) Headings List.

1-9/Shift+1-9: Move forward/backward at the designated heading level. Insert+F7: (NVDA) Elements List. 25 Lists HTML lists can also provide hierarchical structure on a page: Definition list,

: A structure for definitions. Ordered list,

    : Items in a sequence.

    Unordered list,

      : No order of sequence. Do not use to indent or layout text. WebAIM, Semantic Structure: /semanticstructure/ 26 List Commands

      Currently not supported by Narrator. L/Shift+L: Move forward/backward by list. I/Shift+I: Move forward/backward by list item. 27 Heading Nowhere Centers for Disease Control and Prevention: Microsoft Official Home Page: 28 Forms

Forms allow us to interact with web content. They contain elements such as edit fields, buttons, check boxes, radio buttons, and list/combo boxes. Just as with headings, forms should be organized in a logical manner. Form elements should always be labeled, and some indication given if

input is required. Ensure that all form fields are keyboard accessible. Include important cues or instructions in associated labels or at the beginning of the form. WebAIM, Creating Accessible Forms: 29 Form Field Commands

Tab/Shift+Tab: Move forward/backward by links and form elements. F/Shift+F: Move forward/backward by form fields. Insert+F5: (JAWS/Narrator) Forms List Insert+F7: (NVDA) Elements List. 30 Forms Exercise Southwest Airlines: 31

Links Hypertext links work with all technologies. Tab and Shift+Tab for navigation, Enter to select. Screen readers already identify links with the word link, so do not add it to alt text.

Link names should make sense out of context. Create links with distinguishing information first, and explanatory information second. Use link names that are unambiguous and can be intuitively organized. WebAIM, Links and Hypertext: Users must be able to navigate to and

select each link from the keyboard. 32 Link Commands Tab/Shift+Tab: Move forward/backward by links and form elements. K/Shift+K: (Narrator/NVDA) Move forward/backward by link. Insert+F7: Links List. 33

Link Exercise The Verge: Zilker Park Visitors Guide | Austin, TX: 34 Images Images can be separated into several categories: Informative: Graphically represent concepts and information. Alt text description should convey all relevant information.

Decorative: If the only purpose served by an image is visual decoration, use a null text alternative. (alt=) Functional: The alt text should describe the function, not the visual image. (Print) Text: Images of readable text should be avoided, except in cases of a logo. If used, the alt text should contain the same words that appear in the image. 35

Images (Continued) Complex, graphs and diagrams: Ideally, other elements such as data tables should be used. Groups: When multiple images convey one piece of information the alt text for each image should also convey that information. Image Maps: Alt text for images with multiple clickable areas should describe the overall context for the

links, as well as providing specific alt text for each link. WAI, Web Accessibility Tutorial, Images: es/ 36 Image Commands Currently not supported by Narrator. G/Shift+G: Move forward/backward by graphic . 37 A Picture Is Worth

Greyhound: Features | USAGov: e=2 ? Boy Scouts of America | Prepared. For Life.: 38 Resources Web Accessibility Initiative: WebAIM Web Accessibility In Mind: Complete Guide to Narrator:

dows-10-complete-guide-to-narrator JAWS Screen Reader Documentation: JAWS/ NVDA V2019.1.1 User Guide: userGuide.html 39 Q and A If you have any questions, please ask them now! 40

Recently Viewed Presentations

  • Ingen diastitel - Aalborg Universitet

    Ingen diastitel - Aalborg Universitet

    Title: Ingen diastitel Author: Henrik og Jette Last modified by: lpj Created Date: 4/29/2001 9:16:21 AM Document presentation format: Skærmshow (4:3)
  • British formality - Baylor University

    British formality - Baylor University

    British Culture PRISMs. Is cultural imperialism justifiable? Is personalized or impersonal power best for a culture? Why is privacy so important in Anglo-Saxon cultures? On what basis does British culture claim its superiority?
  • Module 10 - NAFMP

    Module 10 - NAFMP

    The in-cab display is dash mounted and uses a proprietary algorithm that combines all performance metrics and produces a tiredness score each minute. This tiredness score is visually displayed for the driver and an auditory warning is provided when the...
  • Bangladesh Climate-Resilient Ecosystem Curriculum (BACUM) Module 2: REDD+

    Bangladesh Climate-Resilient Ecosystem Curriculum (BACUM) Module 2: REDD+

    support the confidential exchange of views and information among the stakeholders. The role of a mediator: The opener of communication channels, who initiates communication if it breaks down or facilitates better communication if the parties are already talking, including clarifying...
  • The Cone Gatherers -

    The Cone Gatherers -

    The Cone Gatherers Robin Jenkins The period Second World War ( 1939-45) There are many references to the war in the novel ; Captain Forgan is back from the war, the forestry workers from Ardmore are conscientious objectors; Tulloch's brother...
  • Visiting Hour Annotation of Poem - Miss Lindsay's English Blog

    Visiting Hour Annotation of Poem - Miss Lindsay's English Blog

    Basking Shark Annotation of Poem. Learning Intention: I can show my analysis of a poem through annotation of the text . ... Visual/aural imagery. Can see and hear the rain on the sea. Roomsized - emphasises size. Monster - low...
  • What is OPVL?

    What is OPVL?

    All the trenches had fallen in, and our men just lay about in shell holes. The Hun treated us to aerial darts and grenades and we had a few casualties, chiefly in my platoon. Written by: Robert Lindsay Mackay -...
  • Subitizing - JMP Support

    Subitizing - JMP Support

    Tahoma Arial Wingdings Times New Roman Slit 1_Slit Subitizing PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint Presentation PowerPoint ...