Web Accessibility Testing: Screen Readers

Question 1

When testing your code what should you look for?

Answer 1

• Elements should have complete start and end tags
• Elements should be nested according to their specifications
• Elements should not contain duplicate attributes
• Any IDs should be unique, except where the specifications allow these features.

Question 2

What should you include in development test routine?

Answer 2

• Keyboard testing. Do all the functionalities work with just a keyboard only?
• Automated accessibility checks in the browser
• Zoom in and out with your browser.

Question 3

What are some additional steps that can be taken when doing accessibility testing?

Answer 3

• Check the navigation and information order with a screen reader
• Try focusing and try activating links and buttons with voice recognition software
• Consider using automated checks before a commit, using a linter.

Question 4

When doing keyboard testing what should you test for?

Answer 4

• Is the first tab a skip link to the main content, and does that work?
• Is the tab order sequential, logical, and as expected?
• Can you see where you are while tabbing through the website? Is there a clear visual change when you focus on a link, button or input?
• The menu: can you access the menu items, can you open a hamburger menu, tab around and close it again?
• Can you operate radio buttons, checkboxes, and dropdown selects in a form?
• Can you operate the next and previous buttons in a carousel?
• Can you open and close items in an accordion?

Question 5

What keyboard testing should be done for a modal?

Answer 5

• If a modal opens, can you access links on it? Does the modal get keyboard focus, or does the focus stay on the page itself?
• Can you access the close button (often an X) and close the modal?
• Can you close the modal with the Escape key?

Question 6

What are some automated testing tools?

Answer 6

WAVE, AXE, HTML_CodeSniffer, Lighthouse

https://www.w3.org/WAI/test-evaluate/tools/list/

Question 7

What tests do you need to perform for zooming?

Answer 7

• The first one: open your site Chrome and set your window to a width of 1280 pixels and zoom in up to 400%.
• The second test is to zoom in for only text. Open your site in FireFox, set zoom to text only and zoom in up to 200%. Can you read the text and use the functionality?

Question 8

What should you test for when you are doing screen reading testing?

Answer 8

• Check the content story: does it make sense reading from the top down?
• Check the headings list: does it represent the content and is all related content below the heading in the DOM?
• Check the link list: do links texts make sense?
• Check whether dynamic changes are announced.

Question 9

Yes! Your frontend code is parsing. This means:

A. The syntax of the frontend code is error-free
B. The frontend code is fully accessible

Answer 9

A. The syntax of the frontend code is error-free

Question 10

IDs of form controls should be unique on a web page.

A. True
B. False

Answer 10

A. True

Question 11

The steps required for accessibility testing are:

A. Keyboard testing
B. Automated accessibility checks in the browser
C. Zooming in and out in your browser
D. All of the above

Answer 11

D. All of the above

Question 12

When opening a modal (pop-up), the keyboard focus can be put on …
Check all that apply.

A. The close button
B. The first input field

C. The button for opening the modal
D. The top of the page

Answer 12

B. The first input field


Question 13

What can you check with a screen reader?
Check all that apply.

A. Whether the spelling of my content is correct
B. Whether link texts make sense
C. Visual focus styles
D. Whether everything is understandable if you read from the top down
E. Feedback on dynamic changes

Answer 13

A. Whether the spelling of my content is correct
D. Whether everything is understandable if you read from the top down
E. Feedback on dynamic changes

Question 14

What can you test with voice recognition software on a web page?

A. Whether links and buttons are focusable
B. Whether I can ask questions with my voice and get answers from the software

Answer 14

A. Whether links and buttons are focusable

Question 15

With automated test tools I can find all accessibility issues on a web page.

A. True
B. False

Answer 15

B. False

Question 16

What information does an accessibility API convey to screenreaders?

Answer 16

The operating system has an accessibility API which conveys information about the names, roles, values, and structure of web content, plus events that should be announced to users.

Question 17

Who uses screen readers?

Answer 17

• Blind
  Blind users typically listen to the audio output of screen readers.
• Deafblind
  People who have both visual and auditory disabilities may use a screen reader with a refreshable braille output device, to allow them to feel the braille characters with their fingers.
• Low vision
  People with low vision typically use screen magnification software to make it easier to read. For some people, the magnification is not enough, so they supplement the magnification with a screen reader. This allows them to both see and hear the web content.
• Reading disabilities
  People with reading disabilities may find it easier to listen to content read out loud to them, rather than read it with their eyes.
• Cognitive disabilities
  People with various kinds of cognitive disabilities may also find it easier to understand spoken words rather than written words.
• Eyes-free or hands-free environments
  People with or without disabilities may use screen readers when reading things in eyes-free or hands-free environments.

Question 18

Why do you also need test with screen readers? What will automated testing tools

Answer 18

• Quality and accuracy: Inaccurate or poor-quality alt text is no better than missing alt text. Automated tools can only tell you whether an image has alt text. They cannot tell you whether the alt text is accurate or meaningful. The same is true of text labels for form elements, captions on tables, headers on data tables, and so on.
• Keyboard focus patterns: Automated tools cannot reliably determine where the keyboard focus should be at any given point in time. When a user clicks on a button, the focus should go to a logical destination — such as a dialog or error message — but it is impossible for an automated tool to know what the appropriate focus location is.
• Custom widgets: With custom widgets, like dialogs, carousels, and accordion menus, there is no way for an automated tool to detect all the possible ways of creating them incorrectly, especially when it comes to keyboard interaction patterns. At best, an automated tool might be able to identify when a widget is created correctly, by comparing the names, roles, values, and keyboard focus patterns of the widget with the ARIA 1.1 authoring practices opens in a new window[note] document. Even that is tricky.

Question 19

What are the most common screen readers and browser pairs?

Answer 19

Desktop screen readers:
- JAWS with Chrome
- NVDA with Firefox
- NVDA with Chrome
- JAWS with IE
- VoiceOver with Safari (macOS)
- Narrator with Edge

Mobile screen readers:
- VoiceOver with Safari (iOS)
- TalkBack with Chrome (Android)

Question 20

True or False: You can customize web content to screen reader users by detecting which screen reader they’re using.

Answer 20

False:

Question 21

Which phone is currently the most popular among blind users?
A. Windows Phone
B. iPhone
C. Android Phone
D. Blackberry Phone

Answer 21

B. iPhone

Question 22

True or False: Screen readers can output to either audio or Braille.

Answer 22

True

Question 23

Which screen readers are available for Windows? (Select all that apply)
A. JAWS
B. VoiceOver
C. TalkBack
D. NVDA
E. Window-Eyes
F. C and D
G. A, D, and E

Answer 23

G. JAWs, NVDA, and WIndow-eyes

Question 24

True or False: Testing with screen readers is recommended, but is not required, if automated accessibility tests are performed prior to launching web content.

Answer 24

False

Question 25

What are common keystrokes that are used with Narrator?

Answer 25

- Turn on/off- Windows key + Control + Enter - Stop talking - Control - Next item- Caps lock + Right arrow - Previous item- Caps lock + Left arrow - Next focusable item - Tab - Previous focusable item- Shift + Tab - Toggle scan mode on/off- Caps lock + Space bar - Next heading- H (in scan mode) - Previous heading- Shift + H (in scan mode) - Next landmark/region - D (in scan mode) - Previous landmark/region - Shift + D (in scan mode) - Navigate table cells- Control + Alt + Arrow keys - Activate a link - Enter - Activate a button- Enter or Space bar - Open and navigate a select list- Alt + Down arrow, then Down/Up arrow

Question 26

How do screen readers allow user to navigate a web page?

Answer 26

Screen readers allow users to navigate by other elements, such as: - Landmarks (sections of the overall design, including the header, navigation, main content, and footer) - Headings - Links - Tables - Form elements - Graphics - List items - Iframes - And several other categories of semantic elements

Question 27

What CSS styles will screen readers ignore?

Answer 27

Screen reader users will generally NOT be aware of any of the following: - Color - Background color - Background images - Font size - Font style - Bold - Italic - All capitals (unless the user listens to the word character by character) - Visual position - Visual spacing between items - Columns or floating containers

Question 28

How could convey to meaning to a screen reader rather than just using CSS styles, such as in relation to background color to highlight text?

Answer 28

If you are using CSS to convey meaning — such as using a background color to highlight text — be sure to supplement the CSS with actual text that conveys the same meaning. For example, you could prefix the highlighted text with the word "Important:".

Question 29

What does CSS display:none do?

Answer 29

One CSS property that screen readers do pay attention to is display:none. Screen readers ignore everything marked as display:none, and do not let users access it.

Question 30

What is a list of symbols that are supported by screenreaders?

Answer 30

Here is a list of some of the safest symbols to use (though screen reader support may still not be universal): @ (the at symbol) & (ampersand, written either as & or & in the markup) / (slash) © (copyright, written as ©) ® (registered, written as ®) ™ (trademark, written as ™) ¶ (paragraph, written as ¶) * (bullet, written as •) $ (dollar) € (Euro, written as €) £ (British pound, written as £) ¥ (Yen, written as ¥) % (percent) ½ (one half, written as ½) ¼ (one fourth, written as ¼) ¾ (three fourths, written as ¾) ° (degrees, written as °)

Question 31

What is the best practice for semantic markup for abbreviations

Answer 31

You can use the element to mark abbreviations and acronyms. SCUBA

Question 32

Blind screen reader users are most likely to navigate web content using what? A. Voice activation B. Mouse C. Trackpad D. Motion detection E. Keyboard

Answer 32

E. Keyboard

Question 33

Do screen readers notify users about the visual placement of items on the page (e.g., explaining columns of text, or floating items with wrapping text)? A. Yes B. No

Answer 33

B. No

Question 34

True or False: In their default settings, most screen readers announce every comma and every period.

Answer 34

False

Question 35

True or False: When reading the number 300, if you hear VoiceOver say "Three zero zero" instead of "Three hundred", it means you need to fix the way you wrote the number.

Answer 35

False: It depends on the screen reader how some things are announced.

Question 36

Which of the following visual styles do most screen readers in their default settings announce to users while reading in normal browse mode? A. Bold B. Italic C. Background colors D. All caps E. Colors F. Visual placement G. Indentation H. None of the above

Answer 36

H. None of the above

Question 37

What do developers need to keep in mind about the virtual buffer of screen readers? A. Blind users cannot access the virtual buffer B. The virtual buffer is keyboard-accessible C. There may be a delay between the time when an AJAX load event is complete and when the virtual buffer is updated D. The virtual buffer must be invoked via JavaScript

Answer 37

C. There may be a delay between the time when an AJAX load event is complete and when the virtual buffer is updated

Question 38

Which of the following do screen readers read? A. The source code (i.e. the markup available using "view source") B. The DOM (the markup after it has been processed by the browser) C. The visible text on the screen (e.g. the output as rendered through the graphics processor) D. All of the above E. None of the above

Answer 38

B. The DOM (the markup after it has been processed by the browser)

Question 39

True or false: All browsers use the same accessibility API.

Answer 39

False

Question 40

What is the purpose of the page title for screen readers?

Answer 40

The page