Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

WAS > WAS Study > Flashcards

WAS Study Flashcards

1
Q

What are the main priorities when it comes to page titles?

A
  1. They must be present and contain text 2. They must update when the page URL changes (even for SPA) 3. They must be accurate and informative
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are page title best practices?

A

Theys should be concise, they should be unique if possible, unique information should come first, title should match or be similar to the top heading in the main content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the main priorities when it comes to page language?

A
  1. The primary language of the page must be specified in the [html] element 2. The language must be identified using the standard list of language codes (lang=”en”, not lang=”english”. All screen readers support the 2-letter language codes, while some will support the addition of a localized code (en-gb for english - great britain)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What happens if a web page does not specify the page language, or if the language is wrong?

A
  1. If it does not specify the language, it will read it in the default language the user selected when installing the screen reader. 2. If it is in the wrong language, it will read the page in a funky accent (i.e an english page with a spanish language specification)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

How can you specify the language of a part within the page?

A

Inline language changes can be identified by using the lang=”xx” attribute on any block level elements ([div], [h1], [p], [table], etc.) as well as inline elements ([span], [a], [strong], etc.)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Name the HTML landmarks and there ARIA role equivelents

A

HTML: [header], [nav], [main], [aside], [section], [article], [form], [footer]. ARIA: role=”banner”, role=”navigation”, role=”main”, role=”complimentary”, role=”region”, role=”article”, role=”form”, role=”contentinfo”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the best way to distinguish between multiple landmarks on a page, such as a main navigation and a table of contents?

A

by using programmatically determinable labels (aria-label or aria-labelledby). Ex: [nav aria-label=”Table of Contents”] or if table of contents is a heading already, you can use aria-labelledby.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Which 3 aria roles should not be used more than once per page?

A

Banner, Main, and Contentinfo

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are the two ways headings can be established progromatically?

A

Using the proper semantic tag, like [h1] ; Or using role=”heading” with aria-level=”[1-6]”. ([div role=”heading” aria-level=”1”])

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What are the best practices for headings

A

Headings are created using proper structure and not done visually. Headings are accurate and informative of the content within that section. Headings should be concice and relatively brief. Do not skip hierarchal levels ([h3] then [h1])

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Which of the following will be recognized as a valid heading by screen readers? A. [h1][/h1] B. [h7]Legal disclaimer[/h7] C. [div role=”heading” aria-level=”3”]The secrets beneath the ocean’s surface[/div] D. [p class=”heading level2” style=”font-size: 200%; font-weight: bold”]Understand yourself[/p]

A

C

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

True or False - Screen readers will read the alt text of an image within a heading as part of the heading text.

A

TRUE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the two ways to designate links programatically?

A
  1. Using the [a] tag with a valid href attribute. 2. Using role=”link” AND tabindex=”0” + the associated js allows the user to activate the link with either a click action or the enter key (both event handlers must be present).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

In general, When should you use a link vs a button, and why is it important for Screen Reader users?

A

Links should take the user somewhere(either to a different page or on the same page), where Buttons should activate scriped functionality (like opening a modal [submit buttons are an exception]). When a screen reader user wants to find a link, the user may pull up the list of links and not find the link anywhere because it turns out that it has actually been designated as a button in the markup, or vice versa.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the precedence ranking for link text to a SR?

A

aria-labelledby
aria-label
Text contained between the opening [a] and closing [/a] elements (including alt text on images)
title attribute (note that this is considered a last resort method for screen readers to find something; it should not be considered a primary technique for giving names to links)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

True or False - links can have an accessible name by providing an image with alt text within the [a] tag?

A

True, this is valid: [a href=”https://dequeuniversity.com/curriculum/”] [img src=”info.png” alt=”Web accessibility curriculum”] [/a]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are some best practices for links?

A
  1. They should describe purpose or destination when read out of context 2. They should say if they open in a new window 3. They should say the document type if applicable (PDF Document) 4. They need to be visually distinguishable from surrounding text
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What contrast ratio is needed for links in comparison to surrounding text?

A

3 to 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What are the best practices for navigations?

A

They should be labelled by [nav] or role=”navigation”. They should denote which page is active visually and by using aria-current (or an aria-label or clip-text technique). Navigation should be consistent and not change order from page to page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are the best practices for skip links?

A

They should be at the beginning of the DOM. They should be visible all the time or on keyboard focus. Do not use display:none or else keyboard wont be able to access it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are the best practices for focus/reading order?

A

The reading and navigation order must be logical and intuitive. Don’t use positive tabindex. Focus order will follow the DOM order, not the visual order.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What are the rules for single-key shortcuts

A

If they exist there must be a way to turn them off, re-map them, or are only active when the relevant component has focus. Users who navigate with speech accidentally say ‘D’ and delete something instead of their intended word of ‘D-enote’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What are best practices for pagination?

A

Pagination should have a visual way to denote the active page, and it should denote to blind users as well - either through aria-current, aria-label, ect. Ex: ( [li][a href=”#” aria-current=”page”]3[/a][/li])

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Best practices for semantic markup of tables?

A

Tabular data should be represented in a [table]. Don’t create fake tables (create the look of a table without using actual table semantics)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What are the rules for table names?

A

The table must have a programatically associated name using the caption element or aria-label/aria-labelledby. SR users can pull up a list of tables on the page that will announce their name and size. Without a name, they will all say just a table size with no info on what they are about.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

Examples of how to name tables the right way?

A

Best: [table][caption]1st Quarter Results[/caption] OR [table aria-label=”Second quarter Results”] OR [h3 id=tableCaption]x[/h3] [table aria-labelledby=”tableCaption”] Or [table aria-labelledby=”tableCaption”] [figcaption id=tableCaption]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

What things must every table have?

A

Tables must use the correct semantic [table] markup. Tables must have a programatic name, usually [caption]. Table headers must all be identified using [th]. It is a good idea to add the scope to the [th] by adding a scope of one of the following: col, row, colgroup, or rowgroup.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

How to make complex tables with irregular stucture

A

These should be avoided, however you can do it by utilizing headers element and id’s.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

While layout tables must be avoided, what are best practices if they must be used?

A

the table should have role=”presentation” so that SR will not interprate them as a table. They also should NOT contain any data table markup, such as: [caption], [summary], [th], scope attribute, headers attribute.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

What are best practices for lists?

A

They must be semantically correct. I.e [ul] or [ol] with [li] elements. Screen readers can also correctly identify lists within lists with correct markup. For definition lists use ([dl]) render as paired terms ([dt]) and definitions ([dd]).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

What are best practices for iFrames?

A

They must have a [title] attribute with a meaninful description and is unique to the page

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

What is true regarding [em] (italics) and [strong] (bold), in regards to screen readers?

A

They are ignored by screen readers of most types, some readers have a setting to have them aknowledged but it is not common. Some work arounds are to add words like “Important:” or a visually hidden text using clip-text method

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

Explain each semantic element and wether it will be read by screen readers? (and work arounds for those who don’t): [blockquote], [em], [q], [strong]

A

[blockquote] will be recognized by SR and can be used. Don’t use it for visual styling alone. [em] (italics) will not be recognized. [strong] (bold) will not be recognized. You can add inline text or clip method to add hidden context for these. [q] is a quote tag but is not recognized by SR.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

What is true about the [pre] and [code] elements?

A

[code] will be ignored completely by screen readers but is good for sighted users. [pre] formats the code to distinguish it from surrounding text. Good for sighted but not for SR.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

What is true about the [ins] and [del] elements?

A

[del] is strikethrough. The text will be read by SR, but will not indicate it has been strikethrough. [ins] is to inset text, usually for legal documents. The text will be read but will not indicate it has been inserted. Need to use hidden text techniques to add this context.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

What is the [mark] element and is it supported?

A

[mark] highlights the text and is useful for visual users. For SR users, they are not notified that it is highlighted. Will have to use hidden text techniues to add context.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

How would you make an image map accessible?

A

Each [area] section needs its own alt-text, as well as the image itself.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

What are best practices for implementing SVG images?

A

You should use [img] as the tag for svg’s or implement them inline in the html with [svg]. In either case it needs role=”img”. The downside of using [img] is the css and js cannot be manipulated. Svg in an [img] tag should always have alt-text, aria-label, or aria-labelledby. using inline [svg] should have a [title] element at the beginning of the [svg]

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

What is needed for complex SVG images?

A

You need to add a longer description of the content within the html, in a collapsed section, within a button dialog, etc. Or you can use the [desc] element in the SVG, but this is not preferred since sighted users can’t see it. It is a last resort however, if the others are not provided. The [desc] attribute of an [svg] element MUST be programmatically associated with the [svg] element (via aria-labelledby).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

What are the best practices for text within SVGs?

A

If the text is within the SVG, it should be tagged with an id to be referenced, along with the svg title, by an aria-labelledby on the svg element. There should also be a background color behind the text, so high contrast mode does not create a contrast issue.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

What are best practices for SVG animations?

A

Use Javascript and not [animate]. Do not flash more than 3 times a second. Do not last longer than 5 seconds. Allow users to pause animation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

What are best practices for Interactive SVGs?

A

Interactive [svg] objects MUST be fully keyboard-accessible. Interactive [svg] objects MUST be fully touchscreen-accessible. Interactive [svg] objects MUST communicate the applicable name, role, and value of controls, events, and semantic elements within the [svg] object.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

How does the way a SR treat alt text differ from regular text on a page?

A
  1. You cant pause or restart alt-text reading 2. You can’t navigate alt-text by word or character 3. older SRs may stop reading after a certain length.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

Name three ways to hide an image from a SR

A
  1. you can add null alt-text (alt=””). 2. You can add role=”presentation” 3. you can add the image as a css background-image property
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

What are the benefits and best practices for icon fonts?

A

The benefit is they will change color with the rest of the text if the user customizes text and bg colors. They need role=”img” and alt text (usually aria-label).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

How do you make canvas elements accessible?

A

They need role=”img”. They need alt text provided using aria-label (or sometimes aria-labelledby). You can add fallback text within the canvas itself as a regular text element. Canvas elements should have a fill background in case user changes to high contrast mode.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Do canvas elements support keyboard controls?

A

Not initially. You will need to add name and role values to any actionable content within the canvas, as well as using javascript to add keyboard focus and spacebar/enter events.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

True or False - All live and prerecorded video must have syncronized captions?

A

TRUE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

True or false - Videos must include audio descriptions

A

TRUE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

What is the [object] element and what does it need to be accessible?

A

used to display content like images, PDF files, videos, and audio, among other things. It needs an aria-label or aria-labelledby

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

What are the best practices for color contrast of text?

A

Under 18pt regular or 14pt bold needs 4.5:1 contrast. 18pt or over and 14pt bold or over needs 3:1. note pt is not pixels, each pt is 1.33 pixels.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

What are the touch size requirements

A

Must be 24 x 24 for AA, unless the offset between the other components is more than 24px. AAA is 44 x 44 pixels and what is recommended

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

What are the best practices for inline link text?

A

link text must be 3:1 contrast unless it has another identifier such as a background color, underline, etc. The best practice is to have an underline and a 3:1 color contrast

54
Q

What is true regarding Color to Distinguish UI Components

A

Must not be used unless the contrast is 3:1

55
Q

What are best practices for line spacing and paragraph spacing?

A

line spacing should be at least 1.5 but not more than 2. Paragraph spacing should be at least 1.5 larger than the line spacing.

56
Q

What are two techniques to hide content from both visual users and SR users?

A

Display: none; and visibility: hidden;

57
Q

What is a technique for hiding content solely for SR users but not for sighted users?

A

aria-hidden=”true”

58
Q

What is a technique for hiding content solely for visual users but not for keyboard?

A

position:absolute; clip:rect(0 0 0 0);

59
Q

What are the best practices for CSS generated content?

A

CSS generated content like ::before and ::after has mixed support from SR software and should be avoided. One technique is to use aria-hidden and provide a text alternative some other way, such as via aria-label, if the item is a link, button, form control, or other focusable item. If it is not a focusable item, it may be necessary to use the css clip technique.

60
Q

What is true about visually hidden and inactive content?

A

It must be hidden from SR users until it is made visible and active to visual users (equivalent experience)

61
Q

What are the rules for content that is triggered by hover or focus?

A

The additional content must be dismissable, hoverable, and persistent. Most commonly used for hover-tips and submenus on hover

62
Q

What is the appropriate technique for content triggered by hover or focus?

A

Users need to be able to dismiss the new content, usually using the escape key. Users also need to be able to hover their mouse pointer over the new content, it should persist while they are inside of the content pane. Finally, content should not disappear until keyboard or mouse hover leaves it.

63
Q

Name two tools for screen magnification for low vision users?

A

ZoomText and MAGic

64
Q

What criteria is set for spacing of text and paragraphs?

A

Line height (line spacing) to at least 1.5 times the font size
Spacing following paragraphs to at least 2 times the font size
Letter spacing (tracking) to at least 0.12 times the font size
Word spacing to at least 0.16 times the font size

65
Q

What are the rules regarding scrolling in two directions? What zoom level and pixels limit does this apply to?

A

Content must not require scrolling in two directions even when the viewport is set or zoomed to 320 CSS pixels wide or 256 CSS pixels high. (320 is 1280 width ar 400% zoom, 256 is 1024 height at 400% zoom) unless it is essential to the usage or meaning of the content.

66
Q

What is true in regards to zoom on mobile phones?

A

Users must be able to pinch to zoom, do not add the two properties on the meta viewport element that will effectively suppress pinch-to-zoom: user-scalable=no and maximum-scale=1.0.

67
Q

What is true in regards to mobile screen orientation?

A

Content MUST NOT restrict its view and operation to a single display orientation

68
Q

What is the difference between captions and subtitles?

A

captions describe outside things like laughter or music playing, subtitles just describe what is being said.

69
Q

According to AA, pre-recorded multimedia needs what alternatives?

A

Captions and audio descriptions

70
Q

According to AA, pre-recorded video (only) needs what alternatives?

A

audio descriptions OR Transcript

71
Q

According to AA, pre-recorded Audio needs what alternatives?

A

Transcript

72
Q

According to AA, live multimedia needs what alternatives?

A

captions

73
Q

Difference between open and closed captions?

A

Open captions cannot be turned off

74
Q

What level is sign language interpretation needed?

A

AAA

75
Q

What is true in regards to audio that plays automatically on a web page?

A

If it plays for longer than 3 seconds there must be a way to pause, stop, mute, or adjust volumne level

76
Q

Autoplaying audio on a webpage may make it IMPOSSIBLE for which user category/categories to use your web page?

A

Screen reader users, if there is no way to pause or stop the audio. Without a stop, the audio will play over the SR audio, and turning down the page audio will also turn down the SR audio.

77
Q

WCAG Level AA allows for content to flash more than 3 times per second as long as certain conditions are met. These qualifying conditions include:

A

The flashing area is small enough, and the colors are low contrast

78
Q

What is a vestibular disorder?

A

Vestibular disorders encompass a broad category of conditions that affect a person’s balance.They can be prompted by the appearance of being off balance, like web page background motion or parallax effects

79
Q

True or false: Background videos that autoplay are not required to stop playing after 5 seconds.

A

TRUE

80
Q

How long can media content autoplay before a mechanism is required to pause, stop, or hide content?

A

5 Seconds

81
Q

For functionality that can be operated using a single-pointer (mouse click), what are the requirements?

A

At least one of the following measures is enabled: 1. The down-event of the pointer is not used to execute any part of the function.
2. Completion of the function is on the up-event and a mechanism is available to abort the function before completion or to undo the function after completion. 3. The up-event reverses any outcome of the preceding down-event. 4. The down event function is essential to operation.

82
Q

What are examples of situations with an essential down event?

A

A piano plays keys when they are pressed down. A keyboard emulation presses the key when it is held down.

83
Q

What needs to be keyboard focusable?

A

all links, buttons, and interactive controls must be keyboard focusable

84
Q

What is role=”link”, when would you use it, and best practices?

A

role=link is a role used to identify an element that creates a hyperlink. Would be used when creating a link out of a [span] element for instance. It will NOT make it keyboard focusable or cause browsers to enhance the element with standard link appearance or behaviors, such as underlining, focus rings. You will have to add those behaviors. (needs tabindex=”0” to be focusable, etc.)

85
Q

What are the best practices for a tab component?

A

Each inside tab div will need role=”tabpanel”. The active tab will need tabindex=”0” and aria-selected=”true” and the inactive tabs will need tabindex=”-1” and aria-selected=”false”. The active tab will be keyboard focusable, and then the other tabs will be controlled with arrow keys.

86
Q

What are focus indicator best practices?

A

All focusable elements need focus indicators. All focus indicators need 3:1 contrast between the indicator and the page background

87
Q

While semantic HTML elements will have built in functionality to enable keyboard support ([a] for instance), what is needed for custom components to be keyboard accessible? Use a [span] element turned into a link as an example.

A

It needs to be tab-focusable with tabindex=”0”. It needs a role, role=”link”. It needs a JS event handler for both mouse and keyboard. Onmousedown will make it clickable, but will not make it work with keyboard. The JS click() event handles both mouse and keyboard click.

88
Q

What are the best practices for when a user initiates an event that moves focus?

A
  1. For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content.
  2. For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.
89
Q

Give examples of best practice when user initates an event that creates new content, and when content is removed from the screen.

A

A modal is an example of a user fired event. When user opens the modal, the focus should be moved to the modal. When they close the modal, the focus should be returned to where the modal was triggered.

90
Q

What is the point of tabindex=”-1” and how could it be used?

A

tabindex=”-1” can be used when you need an element to be focusable but not put in the tab-order. Typically its used to set the focus to that element through JS without it being part of the tab-abble order. For instance, when user initiates a modal you can set the modal dialog to tabindex=”-1” and set focus to it, so it reads out the modal text and has focus, but is not tab-able.

91
Q

What are best practices for page specific keyboard shortcuts

A

When page-specified shortcuts or accesskeys are created for a web page, those shortcuts and accesskeys must not interfere with keyboard shortcuts used in the browser or keyboard shortcuts used through assistive technologies.

92
Q

What are best practices for when custom keyboard behavior is required?

A

Keyboard instructions are provided for both sighted keyboard users and non-visual keyboard users.

93
Q

What is true regarding gestures and SR users?

A

mobile SRs disable scripted gestures since those gestures are used to navigate between content (e.g. swiping right to move to next element). All functionality that uses multipoint or path-based gestures for operation MUST be operable with a single pointer without a path-based gesture. Multipoint = things like pinch to zoom with two fingers path-based = swiping left

94
Q

What are the best practices around motion actuation?

A

Functionality that can be operated by device or user motion MUST also be operable by user interface components and MUST allow the ability to disable motion actuation.

95
Q

What 4 things do all form input labels need?

A
  1. They must clearly explain the purpose of the field. 2. Labels must be programmatically associated with their control. 3. Labels must be visible at all times. 4. Labels must be in close proximity to their control.
96
Q

How do you associate a label with an input method?

A

Best way is to either using the ‘for’ role on the label element: [label for=”inputid”] or by using an implicit label by putting the input inside the label itself [label first name [input][/input[/label]. Other ways include using aria-labelledby, alt text for an image in a label, or an aria-label if last resort.

97
Q

What techniques would you use when one label is needed for multiple elements, like a social security field?

A
  1. Combine the fields together to avoid having to label each one separately. 2. Use off-screen text with CSS to provide hidden labels. This technique uses the traditional [label] tag and is very robust, but perhaps less elegant than the aria-label technique. 3. Use aria-label to provide hidden labels. If you do this, you should probably also provide a traditional [label] for the first field, to allow users to click on the text to put the focus in the form field. 4. Use a [fieldset] for the visible label and hidden text for the other labels.
98
Q

What is true regarding groups of form fields, like a set of radio buttons?

A

They need to be semantically related to each other. The best way to do this is using the [fieldset] and [legend] elements. Another way is to use aria-labelledby. The group for the aria-labelledby can have role=group which performs the function of the [legend], but is not yet supported in voiceover.

99
Q

What techniques can you use to include instructions to forms or groups?

A

If the instructions are short you can include it in the legend, although it can get annoying since SRs usually announce legend text after every input. Another option is to write the instructions somewhere nearby and then use aria-describedby on the first input, so the SR will read the first input text and the instructions.

100
Q

How can you designate required fields as required?

A

adding instructions at the beginning of the fields that mark required fields as required (for sighted users” and for SR users adding aria-required=”true”. HTML5 has a ‘required’ attribute but it is less preferable for various reasons.

101
Q

What are best practices for design patterns when user submits a form with errors?

A

1 A summary box at the top with tabindex=-1 that receives focus with the errors listed. #2 set focus to the first field that has an error with the error message visable and aria-invalid=true

102
Q

What is true regarding status messages?

A

They must be read aloud without the new content receiving focus, usually through a live region. The live region must be present on the page previously and must be empty, prior to the message being inserted into the region.

103
Q

what is true regarding time sensitive experiences?

A

If there is a session time limit, users MUST be warned before the session ends and MUST be given time to save their data and/or extend the session.

104
Q

How long does data need to be preserved before it is okay to end the session?

A

20 hours

105
Q

What is true regarding timers with fixed deadlines?

A

deadlines SHOULD provide users with a dynamic countdown feature. Countdown features SHOULD post ARIA live announcements at strategic intervals.(i.e 5 minutes left)

106
Q

What is true regarding infinite scrolling pages?

A

An “infinite scrolling” feature MUST allow users to reach all areas of the page with the keyboard.

107
Q

What is the purpose of the application role?

A

Application mode exists to allow developers complete freedom over programming the behaviors of a widget, including keyboard event handlers.

108
Q

Why is it advised not to use the application role unless you really know what you are doing?

A

Because it turns of most screen reader shortcuts so that developers are able to control the logic of keyboard interactions within web applications

109
Q

What shortcuts are not disabled when application mode is turned on?

A
  1. The Tab key to go through focusable items, such as links, form elements, and anything with tabindex=”0”.
  2. The Enter or Return key to activate a link or button, or to submit a form.
  3. The space bar to activate a button or submit a form.
  4. The arrow keys to choose elements within [select] lists or to choose between radio buttons
110
Q

Why would someone use the document role inside of an application role?

A

So that a SR can use their regular keyboard shortcuts within the application or part of the application. It can be especially useful for modal dialogs (role=”dialog” or role=”alertdialog) that may have mixed content with regular text and form elements.

111
Q

What is true regarding text content within an application role?

A

Meaningful text content must be programatically associated with a focusable element or turned into a focusable element, since No regular text is available to screen readers in application regions unless it is keyboard focusable, including paragraphs, headings, [div] elements, [span] elements, lists, tables, etc.

112
Q

What downside is there to making something like a paragraph keyboard focusable?

A

The main downsides is that users expect a focusable element to be actionable. The other downside is that they can only tab to the element and listen to it in its entirety. If they pause the reader, it won’t pick up where it left off. They would need to tab away from the element, then tab back to it and listen to the whole thing over again.

113
Q

What are some roles that automatically invoke application mode?

A

role=”dialog”, role=”alertdialog”, role=”tablist”

114
Q

What does the presentation role do?

A

Marking a section as role=”presentation” essentially cancels the native role of the element and turns it into the equivalent of a [span] or [div]. For example, a [h1] with role=presentation will not be identified or announced as a heading

115
Q

What is the math role for?

A

Writing equations. Has limited support.

116
Q

What is the definition role and what is a better alternative?

A

definition is used to define words in the text. A more supported element is to use the html definition list [dl] structure.

117
Q

What is the note role?

A

similar in concept to the HTML 5 [aside] or the ARIA role=”complementary”, but role=”note” is not a landmark region like the other two and is generally meant to be read in the context of the rest of the content around it.

118
Q

What is the directory role?

A

The directory role is for designating a table of contents or other similar directory structure, whether the items are links or not.

119
Q

What are all the aria states?

A

aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-invalid, aria-pressed, aria-selected

120
Q

What is an aria live region, what are the best practices, and what two designations can it have?

A

aria live allows you to make announcement to the user at any time, based on a timer, a user action, the result of a server process, etc. It must be empty to begin with, and be recognized by the accessibility API prior to adding a message. The two designations are polite and assertive. assertive will inturrupt whatever the SR was saying

121
Q

what is aria-atomic modifier for live regions

A

aria-atomic lets the assistive technology know if a whole region needs to be reread to a user, or just the change. The default is false, which means just new changes need to be read. True means the whole region needs to be re-read

122
Q

What is aria-relevant modifier for live regions and what attributes can it have?

A

aria-relevant=”all” means all changes are relevant (Use sparingly). “additions” means Insertion of nodes to the live region are relevant. For example, nodes that are removed from the top of a log are merely removed for purposes of creating room for other entries, and the removal of them does not have meaning. “Removals” = Removal of nodes to the live region are relevant (i.e., a screen reader will speak the removal). “text” = Changes to the textual content (including text equivalents, such as alt text) in the live region are relevant.

123
Q

While aria-relevant=”all” and aria-relevant=”removals” should be used sparingly, what is one use case where this could make sense?

A

Assistive technologies only need to be informed of content removal when its removal represents an important change, such as a buddy leaving a chat room.

124
Q

what is aria-busy and when can it be used for live regions?

A

To suppress announcements while the region is updating, you can use the aria-busy (state) property. Set aria-busy=”true” and then clear the attribute when the region is finished.

125
Q

what is role=”alert” and how is it related to live regions?

A

role=”alert” is just another type of live region that is equivalent to aria-live=”assertive”, except that some screen readers say “alert,” to let users know that it is an alert message.

126
Q

What is role=”status” and how is it related to live regions?

A

role=”status” is just another type of live region that is a combination of aria-live=”polite” and aria-atomic=”true”. So its another way to add those two attributes using one role.

127
Q

What is role=”timer”

A

designates it as time counter, either counting up or down. This role isn’t as useful as other types of live regions, because the implied value is aria-live=”off”, meaning that screen readers are not supposed to announce changes to timers at all, though screen reader users will be able to read the content of the timer if they navigate to the timer and listen to the text.

128
Q

What is role=”marquee”

A

Setting an element to role=”marquee” designates it as a scrolling area (such as a news ticker) with non-essential announcements. The implied value is aria-live=”off”, meaning that screen readers are not supposed to announce changes in marquees at all, though screen reader users will be able to read the content of the marquee if they navigate to the marquee and listen to the text.

129
Q

What is role=”log”

A

Logs keep a record of sequential events, such as a chat conversation, steps in a software installation process, or other similar sequential actions.

130
Q

What are the four keyboard modes?

A
  1. Document (reading) Mode 2. Focus (Forms) Mode 3. Application Mode 4. Tables Mode

WAS (1 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions