DQ WAS Course notes Flashcards

Question

What is ARIA?

Answer 1

ARIA allows developers to specify the name, role, state, and property of HTML elements in both static and dynamic content. ARIA is not an entirely new language. It is an add-on to the HTML syntax.

Answer 2

SR Speech Recognition users Keyboard only users

Answer 3

Civil rights

Answer 4

The most prominent procurement laws (like Section 508 of the Rehabilitation Act in the United States, and EN 301 549 in the European Union) apply only to government entities, but it is possible that a future law could impact private businesses.

Answer 5

Examples include telecommunications and airplane travel, both of which have accessibility-related laws in the United States, which are the 21st Century Communications and Video Accessibility Act (CVAA) and the Air Carrier Access Act (ACAA), respectively.

Answer 6

the term "public accommodation"

Answer 7

religious entities and private clubs

Answer 8

requires the U.S. federal government to take accessibility into account when procuring information technologies: websites, telephones, copiers, computers, and other technologies, including both hardware and software. the WCAG level A and AA guidelines are now incorporated by reference and required by Section 508 Applies to US federal government entities only and private entities doing any business with the fed

Answer 9

Applies to- video communications, text messaging, web browsers on mobile devices, and other similar technologies all video programs presented with captions on television must be presented with closed-captions on the internet

Answer 10

On November 12, 2013 the DoT issued a rule (DOT-OST-2011-0177-0111 opens in a new window) regarding the accessibility of carrier websites and ticket kiosks, which will require these sites and kiosks to be accessible to people with disabilities. U.S. and foreign air carriers operating flights within or to the U.S. or selling tickets to the U.S. public are required to ensure that the public-facing content of websites that they own or control conforms to the Web Content Accessibility Guidelines (WCAG) Level AA. Core air travel services: Booking or changing a reservation, including all flight amenities; Checking in for a flight; Accessing a personal travel itinerary; Accessing the status of a flight; Accessing a personal frequent flyer account; Accessing flight schedules; and Accessing carrier contact information.

Answer 11

Some states have laws aimed at state and local government, including schools

Answer 12

Barrier free by 2040 in these areas Employment The built environment (buildings and public spaces) Information and communication technologies Other forms of communication Procurement of goods, services, and facilities The design and delivery of programs and services Transportation (airlines, rail, road, and marine transportation providers that cross provincial or international borders) The scope of the law applies to the Canadian federal government, private sectors regulated by the government (e.g. banks, transportation, broadcasting, telecommunications, the Canadian Forces and the Royal Mounted Police). they have published their own web standards

Answer 13

Ontario went further. The AODA "applies to every person or organization in the public and private sectors of the Province of Ontario, including the Legislative Assembly of Ontario" if the person or organization "provides goods, services or facilities... employs persons in Ontario... offers accommodation... owns or occupies a building, structure or premises... or is engaged in a prescribed business, activity or undertaking or meets such other requirements as may be prescribed."

Answer 14

Applies to government web site It's a modified version of AA

Answer 15

While the EQA does not expressly refer to websites, the consensus has been that the reference to the "provision of a service" applies to commercial web services as much as to traditional services. Public Sector bodies- Websites and mobile applications of public sector bodies (with some allowable exceptions) must be accessible (perceivable, operable, understandable and robust).

Answer 16

They are separated by public/private sectors EU Directive 2016/2102 opens in a new window applies to the public sector

Answer 17

They are separated by public/private sectors EU Directive 2016/2102 opens in a new window applies to the public sector

Answer 18

They are separated by public/private sectors EU Directive 2016/2102 opens in a new window applies to the public sector Directive 2016/2102 refers directly to the European standard EN 301 549. It is similar to Section 508 (procurement law) EN 301 549 mentions WCAG 2.1 level AA Directive 2019/882 is for the private sector- e-commerce, banking, e-books, and electronics Some EU countries also have their own laws (see UK cards)

Answer 19

Adopted in 2019 Covers: computers and operating systems ATMs, ticketing and check-in machines smartphones TV equipment related to digital television services telephone services and related equipment access to audio-visual media services such as television broadcast and related consumer equipment services related to air, bus, rail and waterborne passenger transport banking services e-books e-commerce

Answer 20

Belguim France Germany Ireland Italy Netherlands Spain

Answer 21

All public and private sites must meet WCAG AA

Answer 22

Brazilian Law for Inclusion of Persons with Disabilities all websites to be maintained by companies with either headquarters or commercial representation in the country or else by government agencies, in accordance with international best practices and accessibility guidelines. Hong Kong and India require AA

Answer 23

They have The Act on the Elimination of Discrimination against Persons with Disabilities WCAG

Answer 24

the sites are better for everyone anyone can acquire a disability 20% of the population has a disability Accessibility is more affordable than lawsuits or negative publicity Most accessibility features are invisible to the user

Answer 25

Inclusive design design to include a whole range of human diversity including a wide spectrum of abilities and disabilities. Web accessibility is then the result of inclusive design.

Answer 26

Cognitive disability because many of the measurements of cognitive disability access include some degree of subjective judgment. Subjective means based on personal feelings, values, etc

Answer 27

Use visual cues to focus the user's attention on the main purpose of the web page. Ensure the font is easily readable. Minimize the cognitive skills required to use the web page.

Answer 28

1. Equitable Use- designed for all kinds of users, identical where possible, equivalent where not 2. Flexibility in Use- bake in some adaptability, like left or right handed 3. Simple and Intuitive Use- remove complexity, provide feedback 4. Perceptible Information- a variety of modes of presentation 5. Tolerance for Error- provide warnings, minimize errors 6. Low Physical Effort- minimize repetitive or sustained action 7. Size and Space for Approach and Use- line of sight, room for assistive devices These things are hard to objectively test for.

Answer 29

One design for all users that incorporates semantic markup for headings, landmarks, labels, tables, etc. Inaccessible to screen readers or keyboard users, separate design for those with disabilities.

Answer 30

A JavaScript drag-and-drop widget is designed to work with any of the following: a mouse, a touchscreen, or a keyboard. A bank web site warns the user 2 minutes before the session is about to expire and gives the user the option of extending the session. A mobile web site has three superscripts after a word, each linked to a footnote at the bottom of the page. Each superscript is tiny, and all of them are very close to each other, making it almost impossible to activate the correct link accurately.

Answer 31

A form validation script provides clear success confirmation messages when the form is submitted successfully, and clear error messages when there is a problem with the data. The focus moves to the error messages, ensuring that keyboard and screen reader users get the full benefit of the messages. A web site uses native HTML widgets that are familiar to users. Content is organized with headings that clearly mark the important sections of content. Fail- An e-commerce site requires many detailed steps to complete a purchase, making the process unnecessarily complex. A web site uses advanced or uncommon vocabulary. A web site uses custom JavaScript widgets that are new in design and concept, and unfamiliar to users.

Answer 32

A tutorial on how to tie your shoes is presented in text, illustrations, and video with narrated instructions. ARIA live announcements are used to announce to screen reader users the number of available options in a custom ARIA/JavaScript autocomplete drop-down list (e.g. "There are three cities that start with 'SAN.' Use the down arrow key to navigate the options"). Fail- A video tutorial on how to tie your shoes is shown with no narration, making the video useless for a person who is blind. A low contrast color scheme on a web site makes it difficult for people with low vision to read the text or distinguish buttons from the surrounding text.

Answer 33

On a financial web site, a script confirms "Are you sure you want to transfer funds?" before funds are transferred, in case users had pressed the button by accident, or before they were sure they wanted to do it. A search feature performs a spell check on submissions and suggests corrections. Autocomplete fail-A web site responds to a "delete account" request without confirming with the user, resulting in the irreversible loss of the account. A search feature searches only for the literal string of text and doesn't take into account variations in word order, spelling, etc.

Answer 34

A web site has a "skip to main content" link at the top, allowing keyboard users to avoid tabbing through all of the links in the header and navigation. A web site has good heading and landmark structure (importantly, the content starts with an

heading, inside a landmark, among others), allowing screen reader users to navigate by headings and landmarks to the part of the page they're interested in. Fail- A sign-up process on a web site requires typing a large amount of information, which can lead to fatigue in people with motor disabilities. A web site is designed with many links in the header and navigation section, and no headings, landmarks, or "skip to main content" link to allow users to jump to the main content.

Answer 35

Large buttons with ample space between, swipe gestures replaced with keyboard actions

Answer 36

because of how they are represented by the accessibility API of the browser and the operating system.

Answer 37

Insert + F3

Answer 38

insert + Ctrl + R key

Answer 39

The image file name

Answer 40

These landmarks: (or

) (or

)

(or

) (or

) Headings: one H1 and then The heading levels should form a logical hierarchical outline of the content on the page without skipping any levels Form: fields have labels Images: have alt text that is accurate, succinct, and meaningfully descriptive of the image's purpose. Lists: The key is to use actual list markup (

,

whenever presenting a list

Answer 41

1. continuous AJAX updates- problem tho that the user may reach the end of the text, then new text may be posted above the user's current location in the document. If that happens, the user would have to traverse the text backward to find the new text. 2. a "load more live text" button.

Answer 42

Audio Structural is for screen readers used by the blind. Because they cannot see, all content must be announced Tactile Structural is for braille users, the deafblind. All content must be in text format. Silent Visual Structural is for deaf users, all audio must also be visually presented either through accessibile captions or transcripts. Don't embed captions within the video

Answer 43

Everything must be text alt, aria-label, aria-described by, aria-live Synchronized captions do NOT count as text for deafblind users- the answer is a transcript. Associate the transcript to the video only by placing it immediately after, using aria-described for the transcript is bad because users cannot pause it.

Answer 44

Multimedia content. You should provide transcripts that include descriptions of the visuals as well as the dialog

Answer 45

Provide them as a separate file from the video Provide them in multiple formats Provide Web VTT captions as users set preferences at browser level Provide caption customization options in the media player

Answer 46

Use a professional broadcast system to embed the captions in the video itself in real time. Use AJAX to provide synchronized captions with a live video. This option can be tricky to set up. The live captions will never be fully synchronized with the live video, because of the delay involved in transcribing the words. One way to get around this is to experiment with a delay in the video feed.

Answer 47

Include a sign language interpreter in the original video, standing or sitting next to the speaker. Use picture-in-picture (PiP) technology to show the sign language interpreter in a corner of the video, or off to the side. Allow the user to turn the sign language interpretation on or off, and play the interpretation as a separate video next to the original video, synchronized with the original video.

Answer 48

design to be intuitive, compelling, and successful for the user. The tasks should be well-defined, with no confusion or distractions. Simplify the visual interface, navigation, processes and tasks, the content Provide alternative representations Allow extra time Focus the user's attention by reduce distractions, Present a small number of clearly-defined tasks, Make the experience compelling and fun, Provide immediate feedback for both success and error scenarios, Use visual design cues to draw attention: blank space, color, contrast, the gaze of others, surprise, framing, directional cues, leading lines, motion

Answer 49

3.1.5: Reading Level.

Answer 50

Content management systems and blog authoring systems User comment features (forums, discussions, blog comments, etc.) Product rating and review features Social media platforms Document review and collaboration features Anything that invites and posts user input

Answer 51

A widget for adding images that allows users to specify alt text. A widget for creating HTML tables that allows users to specify a , table headers, and the scope for those headers. A widget that allows users to specify headings (and ensure the resulting code is actual headings, not paragraphs or

elements styled to look like headings).

Answer 52

title lang

Answer 53

Inline language changes MUST be identified with a valid lang attribute so the SR uses the proper accent when reading it. With a span

Answer 54

Use headings to label sections, as that is more descriptive and especially if there are many of them. Most SRs will read "region" if you make it an aria-label or aria-labeledby, but really, don't bother.

Answer 55

region and aritcle

Answer 56

use aria-label to add description, aria-label="Main Menu"

Answer 57

Banner Main Footer

Answer 58

Set them all to display: block for backwards compatibility

Answer 59

JAWS- Insert + F3 (to open Elements List), then select landmarks NVDA- Insert + F7 (to open Elements List), then select landmarks VO- not on mobile, Control Option U, arrow to landmarks Talkback with FF- Local context menu (swipe up then right), then select landmarks HEADINGS: JAWS Insert + F6 NVDA- Insert + F& and then select headings VO- Control Option U, arrow to headings

Answer 60

LANDMARKS: JAWS- shift R (or shift ; on real old version) NVDA, Narrator with Edge- shift D VO-Local context menu (swipe up then right), then select landmarks HEADINGS: JAWS, NVDA,- H VO- Contr Opt Comm H Talkback with FF- Local context menu then select headings By HEADING LEVEL: JAWS, NVDA- Command 1-6

Answer 61

JAWS- Q or shift Q? not sure which Narrator w Edge- Caps Lock + N Not available with the others, no wonder AE includes the button for that jump.

Answer 62

At the beginning of the main content.

Answer 63

JAWS says the text first, then the level VO says level first, then the text

Answer 64

no, it does not.

Answer 65

TRUE! wow.

Answer 66

data-href="https://deque.com"

Answer 67

tabindex=0 click events for mouse and keyboard

Answer 68

Links take users to different locations (either to a different page or to a different location on the same page); Buttons activate scripted functionality (e.g. make a dialog appear, expand a collapsed menu, turn font bold, etc.), usually on the same page, but a button can also submit form data.

Answer 69

1. aria-labelledby 2. aria-label 3. Text contained between the opening and closing elements (including alt text on images) - yes, alt text on image contained within a link becomes the link name if there is no aria-labelledby or aria-label, thus, both of those can OVERRIDE the link text. Ha! 4. title attribute (but don't use this)

Answer 70

Use aria-labelled by or aria-label on the anchor tag to override it and provide more info Create a visually hidden span after the Read More text to add more info after the Read More

Answer 71

Text that tells the purpose of the link. aria-labelledby, aria-label, text (or alt on image), title

Answer 72

Goes to external site (MAY) Opens new window OR TAB Opens a type of document

Answer 73

3:1 :focus and :hover states

Answer 74

Contrast between the colors of the regular text versus link text is 3:1 or better The underline appears upon focus or hover

Answer 75

Color plus underline Color with underline upon hover or focus (must be 3:1 contrast with words around it). Have it be in an obvious menu I believe adding a background color change, or an outline or border, all upon focus or hover is IN ADDITION to adding back the underline and that having just one of these without the outline does not meet the success criteria.

Answer 76

When focus is on any focusable element *browsers all provide an indicator but some are dotted lines. Although compliant, we should enhance that. Never use CSS to remove focus indicator

Answer 77

LIST- JAWS- Insert F7 NVDA- insert F7 then choose VO- Cont Opt U ,then arrow To go through all the tabs on page- Tab and shift tab (which will include all focusable elements) Or JAWS- does not have one for ALL links but see below NVDA- K VO- Cont Opt Com L Unvisited only: JAWS- U NVDA- U VO- doesn't have Visited only: JAWS- V NVDA- V VO- Cont Opt Com V

Answer 78

Aria-current

Answer 79

Because Safari will then tab to the next focusable element after the skip to code rather than the next element within the main content area.

Answer 80

CSS things like floats and positions can alter the natural reading order Javascript or Ajax injected content may end up above the viewpoint of the user. They will miss it because they don't know to tab back

Answer 81

Don't use them! (Gmail) Use a non printable character with it, such as Control G instead of just G.

Answer 82

aria-labeled, aria-labelledby

Answer 83

designates a table header, either for a column or row. Also use scope="whatever" with even though col is implied if the th is the first row

Answer 84

If there is no way to mark up the table the usual way because of complexity then- Each data cell must be explicitly associated with each corresponding header cell using headers and id. Give each of the headers a unique id. User headers="" to include ALL of the headers each data cell falls under, both rows and columns

Answer 85

Nested data tables break the accessibility of the data presentation as a whole, making it impossible to associate the data and header cells appropriately with any of the standard methods.

Answer 86

SHOULD make the table more understandable to screen reader users.

Answer 87

All except VO - cont alt arrows VO cont opt arrows

Answer 88

Jaws announces "list end"

Answer 89

Only JAWS lists lists- insert control L Between lists: JAWS, NVDA- L VO- Cont alt com X Items in lists: JAWS NVDA- I All other n/a

Answer 90

All must have title="whatever". Most SRs treat iframe content as if it were in the DOM, so the keyboard shortcuts work and if we can, we should match heading heirarchy. JAWS reads the rather than the title= of something inside the iframe instead so we must change that to equal what we define as the title. yes, we give a title on the element and if there is another title, we change that to match! Give iframes without meaningful content aria-hidden="true"

Answer 91

LIst: JAWS-Insert F3 then choose iframe Between: JAWS, NVDA- M VO- cont opt comm F

Answer 92

We can add a span visible only to SRs (like the AE spans) or we can add an image to the design whose alt text provides the warning to SRs.

Answer 93

works with SRs and so should not be used only for styling. does not work so just use quote marks.

Answer 94

Used to set apart actual code prose and usually styled with monospace courier and pre is for preformated, SR does NOT read or

Answer 95

, if it is critical, provide hidden spans. The price example of $100 crossed out and $75 next to it, Put WAS $100 Now $75 in hidden spans is for inserted text, usually underlined- if vital, add hidden spans that says where deleted and inserted begin and end. If you can't say something nice, don't say begin deleted textnothing end deleted textbegin inserted text anything end inserted text at all:

Answer 96

SR does not read Hidden text in a span

Answer 97

form labels (using and the id attribute on the form field) table header associations (when using the headers plus id method) labels for custom JavaScript/ARIA widgets (when using aria-labelledby) descriptions for custom JavaScript/ARIA widgets (when using aria-describedby) other associations for custom JavaScript/ARIA widgets (using attributes like aria-controls, aria-owns, etc.)

Answer 98

TABS have a required parent of Tab List But Tab panel does not have any required parent

Answer 99

True Alternative text should be used to clearly communicate the intent, purpose, and meaning of the image in a way that serves as a true alternative for the image. Alternative text is: Programmatically determinable Meaningful Concise- they say 150 chars

Answer 100

Hide them, use alt = "" These must have alt text because Office does not honor alt=""

Answer 101

aria-labelledby aria-label alt title

Answer 102

Screen reader users cannot resume where they left off if they pause while in the middle of reading alt text. Screen reader users cannot navigate the text (e.g. by word, character, etc.). Some older screen readers do not read the full length of the alt text.

Answer 103

An image that does not convey content. Or is redundant (so the image in a product card is redundant to the text name) alt = "" role = "presentation" or make it a CSS background image

Answer 104

They might read the file name.

Answer 105

alternative text for actionable graphics clearly describes the destination, purpose, function, or action. They do not describe the graphic.

Answer 106

yes, even if they already have a "name" attribute

Answer 107

Anything longer than five seconds must provide a means to pause, stop, or hide it Cannot flash more than 3 x per second.

Answer 108

Provide the long description in the context of the HTML document itself. (aria-describedby) Provide a button that expands a collapsed region that contains the long description. (use these next three if the image may be too complex for even sighted users) Provide a button to open a dialog that contains the long description. Provide a link to a long description on another page via a normal link text.

Answer 109

when the image itself is decorative in nature or the text in the image is essential. Logos is a good example. They still need alt text.

Answer 110

Use SVGs as it scales while enlarged and they can customize font, color, size

Answer 111

Give the entire map and alt and then each of the map items an alt. (the solar system example) Use client side image maps where possible

Answer 112

The image (of a painting) will require alt text, even if a long description is provided. The alt text can even mention that a long description is available elsewhere. A long description of the painting is required only if the author's intent requires more elaboration than a brief alt text would allow. These same two rules also apply to diagrams. Decorative images also require alt but it should be empty

Answer 113

Color contrast options Make the directions into a printable list

Answer 114

Embed the SVG in an or tag, or referenced as the data attribute through an . Because SRs are sketchy on how they interpret it The best ways are: Utilize the tag and reference the SVG file as the source (e.g. ). (no javascript or css) Embed the SVG directly (inline) into your existing HTML code, using the element. (can use javascript or css with it, except it cannot be cached and SRs can be inconsistent) Don't use object or iframe to embed SVG Actionable INLINE SVGs must have title for equivalent text, not alt. Use aria-describedby to associate title to svg ALWAYS add role=image to SVGs

Answer 115

There are several ways of providing a long description for SVG images: Provide the long description in the context of the HTML document itself. Provide a button that expands a collapsed region that contains the long description. Provide a button to open a dialog that contains the long description. Provide a link to a long description on another page via a normal link text. Via the attribute within the element. Ideally, the long description should be available to sighted and non-sighted users alike; therefore, options #1 - #4 above are strongly preferred. In addition to the which essentially serves as alternative text for the image, the element provides a way to fully describe the graphic. Associate it to the svg using aria-labelledby

Answer 116

They read it as one continuous string. Once you add both and role="img", the behavior of screen readers changes. Instead of treating the element as text, screen readers treat the element as an image, and they ignore the element inside. You must use aria-labelledby to present the text.

Answer 117

Windows High Contrast Mode overrides CSS colors Use proprietary CSS media queries (Edge and Internet Explorer only) Use JavaScript to detect user-initiated changes to colors (the changes may be at the browser level or at the operating system level)

Answer 118

Use Javascript to animate rather than The acceptable methods are either declarative, using Synchronized Multimedia Integration Language (SMIL) or Cascading Style Sheets (CSS), or through JavaScript DOM manipulation. SMIL can be used to create both simplistic and relatively complex animations of SVGs without the use of CSS or JavaScript, but with one major downfall. Internet Explorer does not offer support for SMIL. Rules for SVG animation- Can't blink > 3X second Can't auto-play for more than 5 seconds Users can pause the animation Should not distract users from main content

Answer 119

Must be keyboard accessible Must be touch screen accessible All mouse-only actions have a touch equivalent action. All keyboard-only actions have a touch equivalent action. All gesture-dependent actions have an equivalent non-gesture method to achieve the same result (this rule exists because screen readers override and disable page-specific gestures in most cases; a click action is best for touchscreens). MUST communicate the applicable name, role, and value of controls, events, and semantic elements within the object.

Answer 120

role = "img" If there is no accompanying text, they must also have text alternative- use aria-label DO NOT hide the icon and use a span!

Answer 121

Put an aria-label on the Enter your username button and hide the icon. If there is a title defined, some screen readers will announce both that and the label so this is far from perfect.

Answer 122

Hide those suckers just like with other images

Answer 123

Both icon fonts and SVGs scale but icon fonts have this: users can change color, scale with the text when only text is magnified, work with images turned off SVGs have this: can be multiple colors, retain original colors when user changes font/background colors, work when styles are turned off, work with user choses fonts

Answer 124

Renders as pixels on a page, is not scalable Is not natively accessible to SRs accessibility has to be added with JavaScript or ARIA on the element itself or using internal fallback content placed within the opening and closing tags. Content in the element is not part of the DOM except for the fallback content. Use SVG if possible instead!

Answer 125

True! Just like svgs True! We add it with aria-describedby Complex ones, still give it role="img", add aria-label or aria-labelledby for the name, then use aria-describedby for the complete description All canvas should have background fill color!

Answer 126

The same types of accessibility rules that apply to HTML also apply to third-party software: provide alternative text for images, use semantic markup (headings, tables, etc.), ensure sufficient color contrast, and so on. The accessibility techniques vary between software applications, and some applications have more robust accessibility APIs than others.

Answer 127

True How we make it accessible: Synchronized captions Text transcript Audio descriptions

Answer 128

All prerecorded video MUST have synchronized captions. The captions must also identify who is speaking applause, laughter? the caption should indicate those sounds, either in brackets or in parentheses. Users can store caption preferences at the browser level. WebVTT honors that. Videos MUST include audio descriptions of important visual content that is not conveyed through the audio. Prerecorded audio-only content can be captioned too, though in most cases a text transcript will suffice. All prerecorded video and audio MUST have text transcripts.

Answer 129

All live video with dialog and/or narration MUST have synchronized captions. Live audio consisting mainly of dialog and/or narration SHOULD have synchronized captions.

Answer 130

they cannot take the "alt" attribute! Use aria-label or aria-labelledby to provide the name

Answer 131

Provide an HTML alternative We may need to present in another format to preserve printer styling (as with PDF) or when it is necessary to share files in their original format for collaboration purposes When we must, all non HTML must: Give the document a meaningful title Provide good heading structure Provide alternative text for images Designate table headers and ensure the data cells are associated with the headers Don't rely on color alone to convey information Ensure sufficient contrast between the text and the background Choose highly readable fonts

Answer 132

use "tagged PDF" Adobe Reader and Acrobat Pro auto provide it but is not perfect Make document accessible as it is created, then touch up with Acrobat Pro. WGAC provides 22 techniques for PDF

Answer 133

virtually all web accessibility principles apply to EPUB documents. PDF documents are appropriate for printing purposes or when strict visual layout is a requirement. EPUB documents are more appropriate in most other circumstances. EPUB files SHOULD be in EPUB 3 format. EPUB documents MUST adhere to the additional accessibility principles in the EPUB Accessibility specification.

Answer 134

We must ensure that color is not the only way information is conveyed. Colors must be customizable Where color has meaning either include text that visual to all users that clarifies, or as aria-label or alt

Answer 135

Color alone MUST NOT be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.

Answer 136

Contrast between the colors is at least 3:1 Or Change the background color of the buttons Add an outline around the buttons Add other visual styling that distinguishes the buttons from the text

Answer 137

Text must be normal text within HTML, not images of text. Interactive controls should be native html/css created, not images of text.

Answer 138

4.5 : 1 Ideal is 7 : 1

Answer 139

3 : 1 Also 3 : 1 Again, 3 : 1 you guessed it! 3 : 1 ditto

Answer 140

Online tools.

Answer 141

A way for Windows users to enable a high contrast mode Also, browsers may or may not have a high contrast setting. Using a high contrast mode should still retain all the meaningful content.

Answer 142

The visual Layout of blocks of content

Answer 143

44 x 44 pixels gutter of 6 px between it and other stuff.

Answer 144

At least 1.5 but don't exceed 2.0 1.5 times the paragraph line spacing

Answer 145

80 nope Yes, To achieve user-customizability, text should be in regular HTML format, not in images.

Answer 146

Not all SRs read it (JAWS and Narrator in Edge does not but NVDA and VO do) You can hide for both types of users or one or the other

Answer 147

For interactive elements: We supply alternative text with aria-label, we use aria-hidden on the generated text. If it is not a focusable item, it may be necessary to use a technique such as CSS hidden text (using position:absolute; clip:rect(0 0 0 0)). We hide that shit.

Answer 148

Content will be hidden from screen reader users (and all sighted users too) when display:none or visibility:hidden are used. Changing those values to display:block, display:inline, or other display or visibility options will make the items available to screen reader users.

Answer 149

It specifically pertains to content that appears when you mouse over or bring keyboard focus to an object, like custom tooltips or submenus in a navigation bar. It does not apply to modal dialogs or content that is controlled by the user agent (web browser), such as built-in tooltips. It also does not apply to "Skip to main content" links

Answer 150

Responsive design because now they can magnify to their heart's content. It eliminates scrolling. Well-designed responsive designs are an ideal way to make content more usable for people with low vision, even if the primary reason for implementing a responsive design is for mobile devices.

Answer 151

At the OS level, at the browser level and specialized apps

Answer 152

Windows- Ctrl + Mac- Command +

Answer 153

Most common is three, but some site can get away with two. With a viewport emulator such as Chrome dev tools, Firefox mobile emulator or apps like Viewport Emulator

Answer 154

We don't have to since they interpolate the four pixels into one. You can treat the screen with 828 pixel width as a 414 wide screen.

Answer 155

it makes them look worse so we should double the resolution of images even though that impacts load time

Answer 156

980 pixels wide. This means iPhone shrinks the design to fit that width

Answer 157

There is the actual pixel width of the device, the interpolated CSS pixel width, and the default display width, and each of these changes depending on whether you hold the device in portrait or landscape orientation. the bottom line is: specify the viewport with the meta viewport tag

Answer 158

Form fields do not overflow the viewport. Form fields and their labels are not separated by extensive whitespace that makes it difficult for people who use screen magnifiers to associate labels and fields. they should take up most of the width

Answer 159

Images should reflow as to NOT require horizontal scrolling Use max-width, srcset or picture with source: max-width: 100%; srcset="small.png 400w, medium.png 600w, large.png 900w" *could not get the picture/source example to render on the slide

Answer 160

Use max width = 100% and vector graphics

Answer 161

By making their containers resize (widths in percentages) assign a height and the vertical portion of the padding in em units Don't use pixels! So maybe use em units instead of percents?

Answer 162

the hamburger icon is the perfect example.

Answer 163

Remove decorative images and unnecessary content for smaller viewports

Answer 164

Full page or text only

Answer 165

unless both scrolling directions are essential to the usage or meaning of the content. Some web page functionality requires scrolling in two directions. This can include large graphics, images or data tables where reflow is not feasible without losing meaning

Answer 166

meta name="viewport" content="user-scalable=YES" This code suppresses the ability to zoom on mobile, do not use: user-scalable=no maximum-scale=1.0. This allows zoom to 200%, the minimum requirement meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0; user-scalable=1"

Answer 167

Touch targets should be a minimum of 9.6mm (0.38 inches) wide on the device. Ideally, they would also be at least 9.6mm tall too, but that may be harder to achieve in some cases, especially with inline links. For native apps: set the width to at least 44px (per Apple) or 48px (per Google'). On Android, it's best to use the 48px size. On devices with double the pixel density (such as Apple Retina screens), set the width to at least 88px-96px in terms of true screen dimensions. On web pages: Set the width to at least 44px in the CSS Standard resolution devices will render it at 44px and double density devices will interpolate the value and render it at the equivalent of 44px, even though the actual value will be 88px.

Answer 168

Captions: Text synchronized with the media, for people who cannot hear the spoken words. Transcripts: The full text of the spoken words and important visual information in the media file, to read as an alternative to watching or listening to the media file. Audio descriptions: A version of the media file with a narrator explaining important visual information (such as unspoken actions and events) for the benefit of people who cannot see what's happening. Sign language interpretation: Video of an interpreter, synchronized with the media file (or in the same video frame), for the benefit of people who know sign language.

Answer 169

Clear audio: Prominent background sounds make it difficult for people who are hard of hearing to understand the spoken words. Preventing seizures: Flashing visual effects in videos can cause seizures in some people. Preventing dizziness: Some people with vestibular disorders can become dizzy, nauseous, or disoriented when there is excessive motion in video or animated content. Accessible media player: The media player itself has to be keyboard-accessible and needs to communicate the names, roles, and values of the controls and the states of the controls. Preventing auto-play audio interference with screen readers: Media players that auto-play can interfere with screen reader users' ability to hear their screen reader.

Answer 170

Pre-recorded Multi-media -Captions and Audio Description- for AAA and "should" for others, transcript and sign language Pre-Recorded Video- Transcript or Audio Description , for AAA both Pre Recorded Audio-Transcript (meets AAA too) Live Multi- Captions for AA, AAA, "should" caption for A Live Video- For AAA, Transcript Live Audio- For AAA, Transcript OR Captions

Answer 171

In the United States, "captions" refer to text intended for deaf audiences, and "subtitles" refer to text supplied as a language translation or clarification (e.g. for unclear speech). In the UK, the term "subtitles" usually refers to the text intended for deaf audiences, though "captions" is sometimes used in the UK in the same way that it is in the United States.

Answer 172

Search engine optimization (SEO): Search engines can only crawl through text. They can't view videos. So, when captions are provided, search engines can find the information in the captions because captions are text-based. Second language learners: For learners who are unfamiliar with the language spoken in the audio, they can use captions to follow along to comprehend the spoken language. The ability to watch or "listen to" video/audio with the sound off: If a viewer is in a situation where he or she can't listen to the video and/or audio content (e.g. when in the room with a sleeping baby), he or she can use captions to view the information presented within the audio.

Answer 173

.srt, .sami, .xml closed captions can be toggled on and off open captions are automatic, no worries

Answer 174

Captions The captions must also identify who is speaking other important sounds — such as applause, laughter, etc. — the caption should indicate those sounds, either in brackets or in parentheses.

Answer 175

All live multimedia (video plus audio) events that contain dialog and/or narration MUST be accompanied by synchronized captions.

Answer 176

If the live audio content contains dialog and/or narration, it is usually appropriate — and may in fact be necessary — to provide live synchronized captions. If the live audio content contains music or other similar types of sounds, live captions may not be necessary, and may not be meaningful, but it depends on the context. In some cases, posting a text transcript or description of the event after the event has concluded may be acceptable, and is a bit of a judgment call.

Answer 177

Use a Media Player that Supports Live Captions Present the Captions on the Web Page Adjacent to the Video Use Television Captioning Technologies Present the Captions on a Separate Web Page- only if impossible to have on same page

Answer 178

Captions SHOULD use conventional spelling, rather than attempt to write words phonetically, except when phonetic spelling is essential to the meaning of the content. Captions SHOULD describe sounds in terms of the sounds themselves, not the actions causing the sounds. Important visual events MUST be described in the transcript.

Answer 179

this includes, "um" "err", etc.

Answer 180

Use italics to show when someone is speaking who is not on the screen. When it is not obvious who is speaking in a video, the captions must identify who is speaking. upper case lettering followed by a colon are generally used to create and set off the names or labels of speakers Punctuation should be used in captions to provide clarity, facilitate ease of reading, and convey emphasis whenever possible.

Answer 181

it is critical that they do not present information before that information is provided in the audio content.

Answer 182

Background music to set a mood [EERIE MUSIC] If it is a song, identify the song and artist where possible HE HUMS "Sweet Caroline" by Neil Diamond. MUSIC: "Canon in D" by Johann Pachelbel if the lyrics provide content and are not mixed with dialog: ♪ O say can you see ♪

Answer 183

(Inaudible whispers) Use the term "inaudible"

Answer 184

What the BLEEP were you thinking? if muted: I can't believe I fell for your s---! WHISPERED: or (WHISPERED: Hello) MOUTHED:

Answer 185

When there are significant sounds in the audio, captions should describe the sounds themselves as opposed to describing what or who causes the sounds. (Sniff) instead of (The girl sniffs the bread)

Answer 186

Not more than three The start of a new sentence, unless very short sentences A new speaker Use the punctuation as natural breakpoints Sans serif font 32 char is max Captions should be displayed in a frame for at least 1 second on the screen. For lengthier captions, utilizing the rule of 0.3 seconds per word may be a better option. at bottom, do not obscure text on screen such as speaker's name Default is white text on black 3:1 at least 22 Normal font weight To give emphasis to certain words Yes- MARIE: I just read "Catcher in the Rye".

Answer 187

They should be removed from the screen

Answer 188

1.5 seconds captions should communicate to the viewer that there is a period of silence during the visual display Display it longer than the default of at least 1 second. Display it longer

Answer 189

Media players themselves should allow it but many do not. What can be set at the OS level: Windows using Edge's built in media player, not honored by IE MAC OS has settings but only works with Safari iOs is same Users do NOT HAVE TO BE able to customize captions, it is NOT required.

Answer 190

Provide more than one and always provide the Web VTT one=.vtt The best "basic" one is .srt

Answer 191

Deaf and deafblind It is the only way for deafblind to access the content.

Answer 192

pre-recorded Audio only content Prerecorded video-only content MUST include audio descriptions OR a text transcript. Prerecorded multimedia (video plus audio) SHOULD have a text transcript. For AAA, live audio only or video only needs a transcript It must be easily reachable- put it under the audio or video

Answer 193

(Same as for captions except for transcripts important visual action must be included) If the audible content presented is based on a script, then the transcript must present all the content from the script verbatim, including any stuttering, "uhs" and "ums" If not scripted, keep the ums to minimum Important visual events MUST be described in the transcript. Important background sounds MUST be conveyed in transcripts, preferably in [brackets] or (parentheses). Speech that is spoken off-screen MUST be captured in the transcript using an identifier of who or where it comes from The identity of the person speaking MUST be identified in transcripts. Transcripts SHOULD use punctuation to convey emphasis whenever possible, rather than write extra text to explain the emphasis. Transcripts MUST NOT reveal intentionally-withheld information in the content before the appropriate time. Music SHOULD be identified by title and artist whenever possible in transcripts, unless doing so would be inappropriate to the content. Transcripts SHOULD indicate when speech is whispered or mouthed. When speech is inaudible or difficult to perceive clearly, the transcripts SHOULD say so, using neutral language. (Don't use "unintelligible" or "incoherent") Strong language SHOULD be retained and not edited out of transcripts, whenever possible, OR SHOULD be bleeped or muted to match style or content requirements of the intended audience or context.

Answer 194

Place the transcript directly on the page with the audio or video player., inline if possible Or Provide a link to the transcript. Or Provide an interactive transcript, allowing users to access specific places within the video or audio content.

Answer 195

1.Prerecorded multimedia files containing essential information that is only conveyed visually MUST come with an audio description track. 2.Prerecorded video-only content MUST include audio descriptions OR a text transcript. a video of a company PR representative reading a press release, with no additional visual information shown such as photos or charts, will not require an audio description. Live Multi media, Live video do not require ADs

Answer 196

The level of description possible will be determined by the soundtrack. Within time constraints, descriptions should include all information which is important to the plot or characterization — locations, settings, characters, clothing, facial expressions and mannerisms, lighting, colors, etc. Descriptions should, as far as possible, coincide with the actions being described. Descriptions should be written in clear, simple language. Technical terms should be avoided unless the context demands it and if possible explained. Descriptions should be in present tense. New speakers in a scene should be identified. Descriptions should not give any more information than the sighted viewer would have. The passage of time between scenes should be indicated. Visual elements which are imagined or remembered, or are obviously part of a dream, should be differentiated from 'real' events.

Answer 197

With an extended audio description, the video will periodically be paused to provide the narrator extra time to describe what is happening visually on the screen, and then the video will resume. As with regular audio descriptions, the extended audio description track should be provided as a feature that may be turned on or off.

Answer 198

Create a separate version of the video with embedded audio descriptions. in this case, the closed captions should also include the audio description track narration. The media player will not need to support multiple sound tracks OR Create a separate audio file of just the audio descriptions, and allow users to turn on the audio description option to play the audio descriptions synchronously with the video. (In this method, only one video file exists, but it has more than one audio track available.) OR

Answer 199

ONLY AT Level AAA! and only for prerecorded multimedia presentations.

Answer 200

Picture in Picture (PiP) in the video itself OR As a separate synchronized video Or Include the interpreter in the original video

Answer 201

HTML 5 video has made the plugin approach mostly obsolete. HTML 5 video works well, and the browser's built-in media player can be accessible, though the actual accessibility of the media player varies from one browser to the next and depends on the level of support in the screen reader. So sounds like media players are browser based and then the SR comes into play for if accessible.

Answer 202

Able Player OzPlayer Nomensa Media Player PayPay Media Player What about YouTube?

Answer 203

All functionality of a media player MUST be available to keyboard users All controls of a media player MUST present the correct names, roles, and values to screen reader users. Media players SHOULD allow users to access captions, transcripts, and audio descriptions. Either in the media player itself or by alternate means. Media players SHOULD allow visual customization of captions. Media players SHOULD remember user preferences. Media players SHOULD allow full screen video.

Answer 204

Background sounds in prerecorded or live audio-only and prerecorded or live multimedia content SHOULD be minimized (20dB lower than foreground sounds, except for occasional sounds of no more than 2 seconds) or eliminated during narration or dialog, or a method must be available to turn off background sounds. A mechanism MUST be provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.

Answer 205

Parallax effects SHOULD be kept to a minimum, in terms of the total number of parallax effects, the amount of parallax within each individual effect, and the size of the area affected. All content and features within parallax scrolling content MUST be accessible by keyboard. The contrast of the text against all parts of a moving background MUST be a minimum of 4.5 to 1 for small text or 3 to 1 for large or bold text. Parallax scrolling pages can negatively impact SEO

Answer 206

Important content MUST NOT be conveyed through background videos and animations, unless users have full control over playback, and full access to any required captions, transcripts, and audio descriptions. A method MUST be provided to pause, stop, or hide any background videos or animations that begin playing automatically and which last 5 seconds or more. A method SHOULD be provided to pause and restart background videos and animations. Movement within background videos and animations SHOULD be minimal. Background videos and animations SHOULD NOT contain sounds.

Answer 207

A user SHOULD be able to disable motion animation triggered by interaction, unless the animation is essential to the functionality or the information being conveyed. How to: Place a button/toggle on the web page that gives users the option to disable the animations. Use the "prefers-reduced-motion" CSS media query (this option has limited-but-growing support).

Answer 208

Vestibular, blind, cognitive

Answer 209

A method MUST be provided to pause, stop, or hide any media content that begins playing automatically and which lasts 5 seconds or more. A mechanism may be provided to allow the user to control the frequency with which content is updated, and There is no five second exception for auto-updating content since it makes little sense to auto-update for just five seconds and then stop. exceptions are the page loading thing

Answer 210

Procurement Laws (Section 508, EN 301 549) US federal government entities only, but the effects of Section 508 have permeated the information technology landscape because so many businesses, non-profits, and local and state governments do business with the federal government. To sell to the federal government, private entities have to offer accessible products and services. The law: all video or multimedia productions: that contain speech or other audio information necessary for the comprehension of the content, shall be open or closed captioned. that contain visual information necessary for the comprehension of the content, shall be audio described. Section 504 of Rehabilitation Act of 1973. Many public sector entities, including all state, local, and federal government entities, K-12 schools, and postsecondary schools (e.g., colleges, universities, and vocational training schools). CVAA- all online content that previously aired on television and which was subjected to FCC regulations.

Answer 211

all of these devices are variations of keyboard, mouse, touch, and voice devices

Answer 212

keyboard, mouse, touch, and voice devices

Answer 213

The click target size SHOULD be large enough to facilitate easy use with a mouse (including for users with tremors or limited dexterity) without risking activating an adjacent link or button. An enhanced visual hover indicator SHOULD be provided. The mouse cursor icon on hover SHOULD correspond to the type of action allowed by the element. For functionality that can be operated using a single-pointer, at least one of the following MUST be true: no down-event, can abort/undo, up reversal, or essential. The preferred and most accessible solution here is to make activation occur on the up-event. Exceptions: online piano, keyboards, keypads

Answer 214

Links only!

Answer 215

You must enable it in keyboard settings AND in Safari!

Answer 216

All interactive or "focusable" elements- links buttons inputs: text inputs image inputs submit buttons radio buttons checkboxes All other input types drop-down selection inputs textarea fields ARIA controls: ARIA links ARIA buttons ARIA inputs ARIA tabs All other focusable custom ARIA controls All other focusable custom elements and widgets

Answer 217

That is all.

Answer 218

It's best practice to include a border or an outline as a part of the enhanced focus indicator, because Windows High Contrast Mode retains borders and outlines, but suppresses background colors.

Answer 219

Make sure the way to navigate through a particular section of the web page (usually the Tab key) can move past that section. Create a keyboard stroke to exit the section (you must provide instructions for this to users).

Answer 220

This modals, It also must go back to the activating element when closed, but I already know this.

Answer 221

Tab to the Widget; Use Arrow Keys Within It

Answer 222

Page-specified shortcut keys and accesskeys MUST NOT conflict with existing keyboard shortcuts in the browser, operating system, or assistive technologies. when JAWS and NVDA are in document mode, they will override the custom keyboard shortcut. in application mode, they allow the web page to specify the keyboard shortcuts. forms mode permit users to type characters. Narrator's scan mode also has issue. As for VoiceOver, conflicting custom keyboard shortcuts are problematic if the screen reader user has enabled single-key navigation.

Answer 223

When custom keyboard behavior is required to use a component, keyboard instructions MUST be provided. (here we must remember our sighted keyboard users) Here are some possible ways to provide keyboard instructions: Write the instructions above the widget for everyone to see. Make the instructions appear as a pop-up tooltip when the widget receives focus. Use aria-live to announce the text in the tooltip for screen readers. Make the instructions appear as normal text when the widget receives the focus. Consider adding an outline or background color to draw attention to the text for sighted users. Use aria-live to announce the text for screen readers.

Answer 224

Touch devices rely on click events You cannot rely on drag and drop features for critical operations on touch devices, because while some touch devices allow drag and drop operations You also cannot rely on gesture actions on web pages because of the differences between operating systems and versions.

Answer 225

No scripted gestures with Screen Reader on! It disables them On iOS devices, for example, swiping to the right moves the screen reader focus to the next element, and swiping to the left moves the screen reader focus to the previous element. Swiping up and down on iOS devices invokes other screen reader behaviors. If a web page relies on swiping actions, those actions will not work when the screen reader is turned on.

Answer 226

They may not work, get a focus trap The programmatic focus and SR focus might not be the same. Be sure to test these with SR on and off on touch devices. If aria-hidden is set true but the element is visible, you may get a focus trap (e.g. absolute positioning of an element far to the left, out of the visible viewport) can cause problems for mobile screen readers, even though the technique is considered relatively safe in desktop browsers and screen readers. Various focus problems have been reported in different versions of iOS with regard to this CSS technique.

Answer 227

any functionality that is activated through a complex gesture can also be activated through other, more accessible means, such as: Single-click, double-click, and click-and-hold Single-tap, double-tap, and long press

Answer 228

All major operating systems have voice activation built in. However, people who need to use speech recognition for primary access to these systems on a day-to-day basis probably require a more complete software tool like Dragon Naturally Speaking. Dragon is available for both Windows and Mac desktop platforms as well as Android and iOS on mobile platforms. Mouse Grid is a part of Dragon Dragon provides limited support for ARIA roles and properties including: button link radio checkbox aria-label aria-labelledby

Answer 229

Users must have the ability to perform the same functions with user interface components (for example, clicking the shutter button on a camera). Users must also be allowed to disable motion actuation

Answer 230

that is all. don't do it

Answer 231

They should not impact interaction! Transitions SHOULD NOT interfere with reading or interaction, unless the interference is brief. (Like < 5 seconds) Transition effects SHOULD be kept to a minimum (to avoid nausea, dizziness, annoyance, etc.).

Answer 232

Inform the users of any CHANGE IN CONTENT!

Answer 233

1. Load or Reload Page- this happens automatically when users click links 2. Move the Focus- (think modal) must have tabindex="-1" and maybe a delay timer 3. ARIA live announcements allow the web page to make announcements without loading or reloading a page or moving the focus. 4. When new information appears on-screen without receiving focus, it must be coded as a status message so that assistive technologies can alert the user to the information.

Answer 234

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. One of the most effective ways to warn users is with a dialog, giving the user the choice to extend the session or to allow it to expire. two minutes If a user has started to enter data in a form, whenever possible, the website should be scripted to save the data when the session ends Save it for 20 hours or inform them up front how long it will be saved

Answer 235

Timers with fixed deadlines SHOULD provide users with a dynamic countdown feature, especially if the deadline is soon. post ARIA live announcements at strategic intervals but no so frequently that they become overwhelming If the timing is critical, a dynamic countdown MAY be included in the page . If the timing is critical, the dynamic countdown timers and alerts SHOULD be included across all relevant pages on the site.

Answer 236

NEVER! A web page MAY notify the user when a refresh is recommended. If the update is urgent, use a dialog, or similar to notify the user. Send the focus to the dialog If the update is not urgent, an ARIA alert message that is visible on the screen and announced by screen readers, does not take focus away

Answer 237

1. Knowing when and how to notify screen reader users about the new content 2. Focus management

Answer 238

A developer technique that loads the main page content separately and more quickly than content that will load slower due to many things. Two problems users may encounter: a blank spot in the page because the content hasn't loaded yet too many announcements of content loaded

Answer 239

this is the loading... spinner stuff! But- "Lazy loading" AJAX content SHOULD NOT be announced as it loads. so the spinner should only be seen IF the content is not yet loaded and user arrives at that spot.

Answer 240

An "infinite scrolling" feature MUST allow users to reach all areas of the page with the keyboard. How? Make it the last content on the page Or Give an option to turn it off

Answer 241

Move the focus to the interstitial message OR Announce the interstitial message via an ARIA live region

Answer 242

1. Screen reader users SHOULD be made aware when new "pages" are loaded in single-page applications. How? Focus should go to the new content Announce the new content via aria-live With focus- use tabindex = -1, The focus MUST be temporarily moved, then sent to the correct destination. (to accommodate VO and Safari)(send the focus to an empty container, then send it to the desired destination) There MUST be a delay before sending the focus to the final destination. (use 1 second and TEST) The focus SHOULD be sent to a heading at the beginning of the AJAX content. With single-page applications, the won't be read by most screen readers, so having a heading that acts as a sort of substitute for the is a good approach. If it makes more sense to leave focus on the button rather than move it to new content, announce the new content is loading or is there... 2. The browser history MUST be updated when an AJAX event is the result of clicking on a link OR if the event is such that a user would expect to be able to use the "back" button after the event. 3. The page MUST respond appropriately when the user activates back or forward functionality in the browser.

Answer 243

All form input and controls MUST be labeled also known as an "accessible name." and: Labels must be meaningful, i.e., they must clearly explain the purpose of the field. Labels must be programmatically associated with their control. Labels must be visible at all times. Labels must be in close proximity to their control.

Answer 244

Users can click on the label or the input puts focus on the input, making the target size bigger.

Answer 245

Label has a "for" attribute that matches input's "id"

Answer 246

aria-labelledby- because this doesn't have the advantage of the Label element of clicking it and going to the input, this is less desirable than HTML label aria-label- because it is only "visible" to SRs, is not appropriate!!!! HTML label- used only when no aria-labelledby or aria-label, weird. title- not visible except on hover so not recommended placeholder- don't use it because it disappears when users start typing, it does not meet the text contrast rules, meant for extra non-essential info Conclusion- use HTML label but do NOT also include aria-labelledby or aria-label unless there is a compelling reason because they both overide HTML label.

Answer 247

NVDA in Firefox

Answer 248

When there is a Search button next to it.

Answer 249

That's worse than no label at all because without the label tag, SRs will try to guess the label, an empty label they will just not do anything.

Answer 250

Example is the magnifying glass having the "Search" meaning. It still needs aria-label

Answer 251

It disappears when users start to type, It does not meet color contrast rules it is not meant for vital info If it is a format hint, users have to remove what they entered to check the format

Answer 252

the label needs to match, so Clear Form that is visible needs a label that also says Clear Form, not Reset.

Answer 253

Except the label/input relationship is 1:1, we need to use aria-labelledby for this Think tables aria-labelleby = "food now", where these are the IDs of the two labels

Answer 254

Options to do this: 1. Combine the fields together to avoid having to label each one separately. So one long, unbroken field with HTML label 2. Use off-screen text with CSS to provide hidden labels. This technique uses the traditional tag and is very robust, but perhaps less elegant than the aria-label technique. (Each section has an HTML label for SRs only) 3. Use aria-label to provide hidden labels. If you do this, you should probably also provide a traditional HTML label for the first field, to allow users to click on the text to put the focus in the form field. 4. Use a HTML Fieldset for the visible label and hidden text for the other labels. The fieldset's HTML legend becomes main label and then HTML labels are used for each field piece. **JAWS repeats legend with each label, so annoying

Answer 255

Radio buttons and checkboxes HTML = fieldset with a legend ARIA- role= group plus aria-labelledby

Answer 256

Ensure labels and instructions are clear and informative. Make instructions and advisory information available to assistive technologies. Clearly disclose constraints for form fields. Clearly identify required form fields.

Answer 257

Don't put instructions between tabbable input fields as it will get missed. Putting aria-describedby on the fieldset doesn't work so: Option 1: Add the instructions to the . (Except JAWS reads the legend for each field) Option 2: Associate the instructions with one of the fields (usually the first field is best) within the group, using aria-describedby. Option 3: Put the instructions before the start of the whole form, as regular text not associated with anything, and hope that screen reader users read them before jumping in to form mode. If the instructions are not critical to understand the purpose of a group or section, the instructions MAY be hidden until the user requests them.

Answer 258

Two things: The aria-required="true" indicator should be set on the input. A supplemental visible indicator should be available to sighted users. (like an *, you need to explain this) Don't use HTML5's required unless you are okay with it not letting the form be submitted if a required field is not populated, it takes control away from you

Answer 259

If they don't fill it out- An error message upon submit using aria-describedby, aria-invalid

Answer 260

The purpose for each common input field that collects an individual's personal data MUST be programmatically defined based on the list of 53 Input Purposes for User Interface Components. type="password" Using HTML 5.2 autofill meets this criteria

Answer 261

Ensure that any dynamic changes occur further down in the DOM, rather than further up in the DOM. Allow users to change past choices: Consider limiting access to one step at a time: Number the steps Manage keyboard focus Consider providing a concise summary of the choices

Answer 262

The user agent (e.g. when links or buttons that cause the user to leave the web browser and automatically open a different application). The viewport (e.g. when the screen scrolls down or up, or when elements visually replace, obscure, or alter the position of the elements previously in view, or when a new window opens) The focus (e.g. when the keyboard focus is forced to another element) The content (e.g. when the meaning of the page changes significantly, or when elements on the page are rearranged) None of these kinds of scripted actions are inherently bad in concept. The danger to accessibility is when they happen automatically, without the user explicitly requesting the actions.

Answer 263

Focusing on an element Changing an element's value Hovering over an element with the mouse

Answer 264

Use native HTML elements where possible Custom form elements SHOULD act like native HTML form elements, to the extent possible (specifically, mirror keyboard behavior) Updates and state changes that cannot be communicated through HTML or ARIA methods SHOULD be communicated via ARIA live messages. Custom form elements SHOULD have appropriate names, roles, and values, thusly: Name The element's label (such as "volume control" or "date picker" or "Submit"), which is often assigned in ARIA via aria-label or aria-labelledby. Role The element's functional purpose; the ARIA specification defines a list of roles opens in a new window to choose from (such as "dialog" or "menu" or "tabpanel"). Value The attributes or current state of an element (such as aria-selected="true" or aria-expanded="false" or aria-required="true"). The values must be updated when appropriate (e.g. change aria-expanded="false" to aria-expanded="true".

Answer 265

1. Error/Success Summary: display a summary at the top with the message (either a success message or a failure message). Implementation Details: Set invalid fields to aria-invalid="true" Move focus to error/success message Ensure error/success message container is set to tabindex="-1". Otherwise, focus cannot be set successfully. Provide a count of errors so that users get a sense of the scope of the problem. Ensure error messages are associated with form fields using aria-describedby so that screen reader users know how to fix the problem Ensure error messages are visible so that sighted users know how to fix the problems Ensure error messages are adjacent to the inputs so that screen magnification users can easily see which messages belong to which fields. 2. Send Focus to First Error How? Set invalid fields to aria-invalid="true". Move focus to the first field with an error. Ensure error messages are associated with form fields using aria-describedby so that screen reader users know how to fix the problem. Ensure error messages are visible so that sighted users know how to fix the problems. Ensure error messages are adjacent to the inputs so that screen magnification users can easily see which messages belong to which fields. 3. Inline (Real-Time) Validation HOw? an aria-live announcement a timer that waits until the user isn't typing for 2 seconds, then makes the announcement. For users who are blind and other screen reader users, it is acceptable to wait until the user submits the form to find out that there are errors.

Answer 266

It will compete with the SR

Answer 267

There is no insert on a Mac- but Caps Lock can be set as a duplicate modifier key (so that it can be used in place of Insert).

Answer 268

so that they don’t need to be pressed with each VoiceOver command by pressing VO + ;.

Answer 269

Page navigation: When the user needs to navigate around within the document, all kinds of keystrokes are available for a wide variety of tasks (e.g. H for headings, G for graphics, T for tables, etc.). This page navigation mode is also referred to as scan mode (in Narrator), browse mode, or document mode. Input or interaction: page nav is suppressed so that an H is just an H, not a keyboard shortcut to headings, called including forms mode, focus mode, and application mode. They do this switch automatically. It is not the form element that switches it (so SRs can read through forms), it's input, select, text area, radio button, They can toggle between forms mode and document mode. NVDA- Insert + Space Bar JAWS-Numpad Plus (+)

Answer 270

Form labels with the tag. Form labels with the aria-label attribute. Form labels with the aria-labelledby attribute. Text associated with form fields using the aria-describedby attribute (though there is a long delay in VoiceOver on Mac before that text is read). The text in the of the . The text inside links. The text in any element with tabindex="0".

Answer 271

This auto switches SRs out of doc mode and into application mode and none of their keyboard shortcuts will work. The dev must define new shortcuts and then tell the user! These are also application mode! role="dialog" role="alertdialog" role="tablist"

Answer 272

All Windows screen readers use Control + Alt + Arrow keys for table navigation; on macOS it is Control + Option + Arrow keys.

Answer 273

Use native HTML elements whenever possible. Only create a custom ARIA/JavaScript widget if there is a compelling reason to do so. ARIA is essentially an API for communicating this information to screen readers. ARIA allows you to communicate the following information to screen readers: labels or names for items (e.g. using aria-label or aria-labelledby or similar) roles, role="navigation", role="main" etc. states of dynamic/interactive components (e.g. aria-selected="true", aria-expanded="true", aria-hidden="true") properties of items (e.g. aria-haspopup="true") relationships between items (e.g. aria-owns, aria-controls, both of which describe a kind of parent-child relationship where one item owns or controls another) live announcements in real-time that are passed on to screen readers

Answer 274

aria-labelledby- text is visible, replaces the HTML text (with some readers), Don't use aria-labelledby to provide supplemental information in addition to the text that's already there, because that's not what it will do in most circumstances. The aria-describedby attribute would be more appropriate for that purpose. aria-label- only visible to SR users, The aria-label text is not extra information. It is the ONLY information. HTML label (the text in a button, label, alt) title Use the HTML label if possible.

Answer 275

with a modal dialog (a container with role="dialog") so that screen reader users can navigate and read the text inside the dialog. If you put regular text (paragraphs, headings,

elements, lists, tables, etc.) in a dialog, screen readers can't access it, because only keyboard-focusable items (and their programmatically-associated labels and descriptions) are accessible in application mode.

Answer 276

VoiceOver on iOS and Mac OS supports native MathML quite well, Neither JAWS nor NVDA support native MathML as written above. Utilities such as MathJax opens in a new window can improve rendering of MathML across browsers, though care must still be taken to render it in a way that works for screen readers.

Answer 277

Not widely supported so use HTML dl instead If used, should be applied to spans so not interferring with implied roles

Answer 278

is NOT a landmark region like aside or complimentary sets apart like subcontext- the warning not to look directly at the sun...

Answer 279

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

Answer 280

Properties and states need to be communicated to screen readers, and any changes to them. There are tons of arias properties (aria-label, aria-atomic, aria-required) and lots of aria states (aria-hidden, aria-checked, aria-busy)

Answer 281

is meant to be used to add extra, supplemental information about an element. Unlike aria-labelledby and aria-label, is not part of the accessible name computation opens in a new window. it is part of the accessible description computation If both a name and description are provided, both will be read, name first The element must have a semantic role. Most screen readers will not read aria-describedby text on or

elements. Dont use it to give the element a name, label, or title. Instead, use it to describe or give supplemental information about the element.

Answer 282

Makes announcements to SR users independent of their actions Usually don't change focus It's an empty container waiting for JS to inject text and when it is, the content is pushed to the SR assertive-will interrupt a screen reader if it is in the middle of reading text aria-atomic- read all the text in the container or just the new text, think messager aria-relevent- all, additions, removal, text- which types of changes should be announced aria-busy- stops announcements while loading

Answer 283

Roles can used to achieve aria-live behavior, they are special kinds of alerts, I don't see aria-live used with them in examples. role = "alert" ---An alert is the equivalent to aria-live="assertive" except that some screen readers say "alert,"- VO/Chrome did not interrupt my nav to the next button, I did not hear the alerts if i kept going. role = "status" have an implied aria-live type of polite, an implied aria-atomic of true (meaning that everything in the region will be announced; not just additions or subtractions). Some SRs don't announce status role = "timer" - same as aria-live = off, doesn't really do anything? setting is right semantically role = "marquee"- designates it as a scrolling area (such as a news ticker) with non-essential announcements. The implied value is aria-live="off", won't announce changes. setting role="marquee" on scrolling marquees is the right thing to do, but it doesn't really affect accessibility either way. role = "log" -- Logs keep a record of sequential events, such as a chat conversation,

Answer 284

Tab to widget, then arrow through- Check the Aria Authoring Practices Guide (APG) for keyboard patterns per widget type

Answer 285

Browsers do this for us with it built in

Answer 286

Quality and accuracy of alt and form labels, table captions, headers on tables Keyboard focus patterns Custom widgets like carousels and modals and accordion menus Test dynamic content that uses custom widgets and ARIA Test with at least two screen readers Common elements, like headings, text, etc, test with only one SR

Answer 287

If a form has no label, JAWS will read something close by, making it SEEM like the form has a label. Testers should verify that the what JAWS reads as form labels are actually coded as such.

Answer 288

JAWS with Chrome NVDA with Firefox VO and TalkBack

Answer 289

Because the SRs interact with the browser, not the web Shift + Option Use an Windows emulator, get a keyboard with an insert key. Or remap key to be the insert key with Karabiner Elements or SharpKeys software

Answer 290

Users must be able to tab to all controls (links, buttons, form elements, etc.). Users must be able to activate all links with the enter key. Users must be able to activate all buttons with the enter key and the space bar. Mouse hover features must have equivalent keyboard event handlers. When items are hidden from sighted users (such as drop-down menus), users must not be able to tab to the hidden items (they must be unavailable to the keyboard until activated by the user or by the script). When a popup dialog appears, the keyboard focus must go to the dialog. When the dialog closes, the focus must go back to the original control that activated it (or to another logical location if that control is no longer available or is not the best location). Custom JavaScript widgets should adhere to the ARIA Authoring Practices opens in a new window for keyboard behaviors. Pages must not have any keyboard traps (users must be able to get into and out of all JavaScript widgets). The tab order through controls must be logical.

Answer 291

Screen readers ignore the visual placement of the elements on the page, and look only at the order in the DOM. Check to make sure the DOM reading order is logical, by either looking at the DOM directly, by disabling the styles in the browser, or by reading through the web page with a screen reader.

Answer 292

display: none SRs will not read content with that List of symbols SRS DO read: @ (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 °)

Answer 293

Emphasizing upper case with a higher pitch or louder voice Will read NASA but will say D H S If HTML abbr used, SOME will read the title SRs allow user settings for abbreviations

Answer 294

The SR reads the DOM as it current reads when the SR gets to each specific element.

Answer 295

The delay is especially noticeable with AJAX events. If content loads via an AJAX request, you cannot send the focus immediately to the newly loaded content. You have to set a JavaScript timer to insert a delay between the completed AJAX event and sending the focus.

Answer 296

the API is at the OS level Windows uses UI Automation (You can view the accessibility trees using various dev tools) Mac has an API that can be viewed using Xcode SRs operate within the browser the page HTML title

Answer 297

In JAWS, press Insert + Down arrow. In NVDA, press Insert + Down arrow. In VoiceOver for macOS, press Control + Option + A. In Narrator, press Caps Lock + Down Arrow or Caps Lock + Control + R. In TalkBack for Android, triple tap with two fingers. Or open the TalkBack menu by swiping down then right or up then right, then repeatedly swipe right until you reach "Read from next item," then select it by double tapping.

Answer 298

As a tree list showing hierarchy (windows) As a flat list with level designations on same line (VO) No Heading list- JAWS- Insert F6 NVDA- Insert F7 (opens Elements list, go to headings) Narrator- Caps lock F6 VO- Control + Option + U (to open rotor), then use left/right arrows to select headings Between Headings- JAWS, NVDA, Narrator - H VO with OS- Control + Option + Command + H Mobile: VO with iOs- Use the rotor to select headings (twist two fingers on the screen to left or right), then swipe down with one finger TalkBack- Swipe up then down (or swipe down then up) repeatedly to cycle through the reading controls until "Headings" is selected, then swipe down Headings by level JAWS,NVDA,Narrator- 1-6 others, not available

Answer 299

List- JAWS- Insert + F3 (to open Elements List), then select Landmarks NVDA- Insert + F7 (to open Elements List), then select Landmarks Narrator- Caps Lock + F5 VO-Control + Option + U (to open rotor), then use left/right arrows to select Landmarks mobiles- na Between Landmarks JAWS- JAWS 16 and above: R, JAWS 15 and below: ; (semi-colon) NVDA and Narrator- D VO - not available Go to main content: JAWS is Q Narrator Caplock + N All others, na, which is why we provide a skip link

Answer 300

Show all lists JAWS Insert + Control + L all others na Navigate to next list JAWS, NVDA- L Narrator- NA VO-Control + Alt + Command + X Mobile VO- Use the rotor to select lists (twist two fingers on the screen to left or right), then swipe down with one finger. Note: You may need to change your VoiceOver settings to allow lists to be available with this gesture. To change the settings, go to Settings > General > Accessibility > VoiceOver > Rotor. TalkBack- na

Answer 301

JAWS, NVDA- Insert + Down Arrow Narrator- Caps Lock + Down Arrow or Caps Lock + Control + R VO- Cont Opt A VO iOS- Two finger swipe down TalkBack- pen the TalkBack menu by swiping down then right or up then right, then repeatedly swipe right until you reach "Read from next item," then select it by double-tapping. Next or previous JAWS- Next: Down Arrow , Previous: Up Arrow NVDA- Next: Down Arrow or Numpad 9, Previous: Up Arrow or Numpad 7 Narrator- Next: Control + Down Arrow, Previous: Control + Up Arrow VO-Next: Control + Option + Right Arrow, Previous: Control + Option + Left Arrow VO- mobile-Next: Rotor, swipe down, Previous: Rotor, swipe up TalkBack- Swipe up then down (or swipe down then up) repeatedly to cycle through the reading controls until "Lines" is selected. Then Next: Swipe down, Previous: Swipe up

Answer 302

Exists- "graphic" or "image' and alt is read (except i think if image is direct child of something with aria-labelledby or aria-label, those are read instead?) Exists but empty- image is ignored Alt not there- JAWS will announce graphic + file name, what do the others do? Alt with text inside link- Will announce Link Graphic and alt Alt empty inside link- Will announce Link Graphic and link destination

Answer 303

List all links: JAWS-Insert + F7 NVDA- Insert + F7 (to show Elements List), then choose links Narrator- Caps Lock + F7 VO-Control + Option + U (to open the Rotor), then use left or right arrows to select links mobiles-NA Go to next link JAWS-NA NVDA-K Narrator (in scan mode K) VO-Control + Option + Command + L Unvisited = U visited = V

Answer 304

JAWS, NVDA, Narrator- Control F VO- Control Option F VO mobile - na Talkback- Swipe left then down, or use browser's "Find in page" function

Answer 305

JAWS-Enter: Enter key (when focus is on a form field), Exit: Numpad Plus NVDA- Toggle Insert + Space Bar NA for all others

Answer 306

Document/Browse mode Tables Mode Forms Mode Cursor/Virtual Cursor mode

Answer 307

PC Cursor- equivalent to Keyboard Focus, can type, navigate, a highlight follows it ACTIVATE with + JAWS Cursor- equivalent to Mouse Pointer function, ACTIVATE with - Virtual PC Cursor- This is the default cursor, no highlights, users can highlight text, toggle Insert + Z

Answer 308

Alt + Control + J Insert+F4

Answer 309

By default, both the Numpad Insert key and the Extended Insert key are set as NVDA modifier keys, but users can designate the Caps Lock key as an additional NVDA modifier key. NVDA automatically switches between Browse and Focus modes, but the user can toggle them using Insert + Space Bar. Turn on Speech Viewer, under Tools in the NVDA menu. Insert + F7 then arrow

Answer 310

Control + Alt + N Insert + Q

Answer 311

will read the content of the cells, but it will not read the associated headers. Triple tap home or side

Answer 312

role = alert on an empty container Text is injected Text is announced

Answer 313

The attribute aria-pressed is set to true or false, to indicate the current state. should have the visual appearance of a button. The mouse cursor should be an arrow pointer, not a text selector or a hand icon (which would indicate a link). Bug in iOS where it won't work unless role="button" is present. not supported for OS VO or Narrator

Answer 314

Only one tab panel (carousel item) is visible at a time. There are buttons to go forward, back, or to play/pause the carousel. The user can tab to the active tab in the tablist, then use the arrow keys or Ctrl+PageUp/Ctrl+PageDown to navigate between the tabs. The buttons for previous, next, and play/pause can be activated by the space bar or enter key. Keyboard navigation with the tablist is controlled by the arrow keys, not the tab key. these toggle: aria-selected=true/false tabindex=0/-1

Answer 315

Checked, unchecked, partially checked f all child elements are selected, the parent checkbox is checked. If some child elements are selected, the parent checkbox is partially checked. The tri-state checkbox should be read as "checked", "not checked," or "mixed."

Answer 316

role = dialog role = alertdialog (requires user action) A modal is a dialog box/popup window that is displayed on top of the current page and requires a user action to close it. The tab key must be constrained within the dialog. The focus goes to the dialog when it is activated, either to the dialog container, or to the dialog's heading, or to the first focusable element within the dialog, or to the default button in the dialog. Focus returns to activating button

Answer 317

role = link data-href: the URL of the link destination Use CSS to change the cursor to a pointer (in most browsers this looks like a hand). If you don't, the cursor will look like a text selector, which will be confusing to sighted users.

Answer 318

UL with Lis that contain either expand/collapse buttons or links to the pages The user navigates to the hierarchical menu with the tab key. The focus lands on the top node. The top node is a button, which is activated by the enter key or the space bar, causing any hidden child nodes to become visible. All nodes are navigable with the tab key. All nodes are either buttons (to expand or collapse child nodes) or links. Links are standard HTML links, which are activated by the enter key. The button's aria-expanded property toggles between true and false. The changes in state are announced by screen readers. The hidden content is not available to sighted users or to screen reader users until it is exposed by the expander button.

Answer 319

allows users to type in values or to select values from a list of possible matches that appears after the user starts typing. Screen readers announce the availability of predictive text options, and users can select the options with keyboard, touch, or mouse. up or down arrow to navigate list esp to get out of list without making choice aria-live region will announce list

Answer 320

role = progressbar aria-live Create a container with role="progressbar", aria-valuemin="0", aria-valuemax="100", and aria-label="A bounded progress bar from 0 to 100". The screen reader will announce the progress at certain intervals. that the progress bars can be used as the value for aria-describedby on some other element. That element should also specify aria-busy as "true".

Answer 321

Either busy or cancelled There are no increments to announce, so there are no aria-live events. role="progressbar" or the element the accessible name (aria-valuetext and/or the aria-label), which tell a user that something is in progress.

Answer 322

Tab lands on either the selected radio or if none, the first radio tab takes user to next group, arrow takes user to next button arrow to a button auto selects it! user tabs off the selected button they want Create a fieldset with legend or use div role = radiogroup When the user changes a radio button from unselected to selected, the screen reader will say "checked" or "selected," and may repeat the label.

Answer 323

Users can tab to the "thumb" in the slider, and can use the arrow keys to increase or decrease the values. The screen reader should let the user know the control is a slider, and should read the current value. When the user adjusts the slider, the screen reader should announce the new value at every increment along the way. role = slider aria-valuetext = value: $500000 Create an container with class="deque-slider-pattern" and with type="range". Also include the following attributes: min The lowest value your slider can represent. max The highest value your slider can represent. value The initial value of your slider. step The value by an integer multiplication of which your slider's value can change. aria-label An accessible label for your slider. aria-orientation Your slider's orientation. Can be either 'horizontal' or 'vertical'. If this attribute is not included then the default is horizontal. For the two control one: role="slider" aria-valuemin="150000" aria-valuemax="450000" aria-orientation="horizontal" aria-label="Max Price" aria-valuenow="360000" data-increment="10000" data-text="stop"

Answer 324

Tablist > tabs tabpanels contain the content All tabs are visible but only one tabpanel shows ul with role="tablist". li with role="tab" User tabs to the selected tab, arrows between tabs aria-selected=true/false tabindex=0/-1

Answer 325

on smaller screens convert tables to lists!

Answer 326

A tooltip provides extra information about a form field, a link, a button, or other focusable element. can be triggered by both focus and hover events and remains on the screen as long as the trigger has the focus. The focus does not move to the tooltip. The tooltip is only hidden via JavaScript and CSS selectors. If JavaScript is not available the tooltip is shown. The tooltip is associated with the element via the aria-describedby attribute.

Answer 327

Tab Focus: Testing Methodology for Tab Focusability To check for tab focusability: Start with placing the cursor into the address bar or URL field in the web browser. From there, using the keyboard only, navigate into the web page using the Tab key. As you tab through the web page, make note of elements that receive keyboard focus. Navigate backwards using Shift + Tab. Ensure all focusable elements actually receive keyboard focus. Any links, form inputs, interactive controls, and buttons should all receive keyboard focus. Tab Order: Tab Order To check the tab order of a web page: Start with placing the cursor into the address bar or URL field in the web browser. From there, using the keyboard only, navigate into the web page using the Tab key. As you tab through the web page, check that the tabbing order makes sense according to the content on the web page. It is best practice for the tab order to follow the reading order of the web page. Tab all the way through the document to ensure the tab order is logical and intuitive.

Answer 328

To test for keyboard functionality: Check that you can tab to all the elements, including links, form fields, buttons, and media player controls. Make sure there are no actions or options that you cannot get to because they are only available on mouse hover or through click actions. Check that you can tab away from all the elements that you can tab into. A common problem is keyboard focus getting caught in controls and custom widgets and you cannot get out; it's called the "keyboard trap." For elements such as select boxes, sliders, or menu bars, check that you can move within the elements using the down arrow key or up arrow key. (Make sure that you can navigate within the elements without causing a change in context, such as highlighting the first item in a drop down menu automatically selects that item.) Be sure you can use the Enter key or Space bar to select a specific item within an element.

Answer 329

The main thing is to not defined keyboard shortcuts in your app that conflict with SR, browser or OS ones Document (Reading) Mode: Usually the default mode for screen readers where screen reader users can read text and navigate by words and characters To test for keyboard functionality with screen reader: Open the web page using a screen reader and its compatible browser (it will be wise to test with multiple screen readers and browsers). Navigate into the web page from the URL field using the Tab key. While browsing through the web page, use some of the common keystrokes available to screen reader users (for instance, H for headings, G for images). If possible, locate elements like a table or a form to use keystrokes available in different modes (table mode, forms mode). Check that the keystrokes available in those specific modes are functional.

Answer 330

To test for visual focus indicator using the keyboard: Tab into the web page from the URL field in the browser. As you navigate through the web page, check to see that focusable elements have a clear, visible indicator that identifies visual focus. Elements like links, buttons, and form controls should have a border around them or another similar indicator. The browser's default focus (sometimes a dashed border or outline around the element) will suffice, even though it is best practice to enhance the focus through CSS. If images are used as links or if there are other types of active images, make sure they also have a visual focus indicator. When a text field receives focus, focus should be identified. This can be through a vertical bar or text highlighted in the field to let users know they can type. The field can also have a border or outline in addition to a vertical bar within the field. A visual focus indicator should also be available to mouse users. Hover on buttons and links. buttons-The buttons changes, cursor same. on links, cursor changes to hand When focus is moved to new content, its needs to land on something it can read

Answer 331

Touch Target Sizing- 44 px Responsive Design: (Desktop) If the web page is responsive, shrink the viewport of the browser down to appropriate mobile sizing (tablet and phone). Forms: When HTML labels are used in forms, users should be able to select the label itself to place focus on or in the form element. Test to see if the label can be selected. This is especially important for radio buttons and checkboxes as they are small in nature. Links (by themselves) and Buttons: Ideally, the padding around links and buttons should also be a part of the target, not just text inside. Test to see if the padding around these elements can be selected. Using only the text inside the padding makes for a smaller target. Links inline with text: Links that are surrounded by regular text should have enough characters to make them 9.6mm. Extra padding for height may break visual layout, so it is critical that they are wide enough to trigger. Test touch functionality- Check that all functionality is available through touch such as activating links, buttons, and interacting with menus and custom widgets (tab panels, carousels, media players, etc.). (They use click events)

Answer 332

When a screen reader is used on a touchscreen or mobile device, it overrides the standard gestures on the device and replaces them with gestures that enhance browsing and interaction for those who rely on a screen reader. it is critical that touch functionality on a web page does not interfere with the gestures used with the screen reader. When using a screen reader on a mobile device, check that: Touch functionality is available when the screen reader is on, including activating links, buttons, and interacting with custom widgets. Custom gestures aren't the only means to interact with content on a web page. If a gesture can be used to interact with content, a touch-based alternative is provided (e.g., being able to select/click on left and right arrows as opposed to swiping left or right to view content).

Answer 333

When testing for color usage to convey meaning: First, identify any instances on the web page where color is being used to convey meaning. If there are instances, check that an equivalent text-based method is used as well to convey meaning. Additionally, evaluate the content and information presented on the web page, and check if there are any references to colors in the text-based content (e.g., instructions that tell users to select a green button).

Answer 334

When checking for alternative text, we are generally looking for the following (the easiest way is to use a screen reader): Alternative text exists: Every image has appropriate alternative text. Alternative text is descriptive: The alternative text should describe the purpose of the image in a way that adequately substitutes for the image. Alternative text is concise: Alternative text should be brief. There is no official limit, but a limit of approximately 150 characters is considered best practice. Long description exists for complex images: The long description is on the same page, near the complex image, or available in a link to another page. Long description is an adequate substitute for the image: Someone who cannot see the image should be able to make sense of it and understand the purpose of the image based on the long description.

Answer 335

if the image is a background image that conveys information or meaning, alternative text must be provided through aria-label, aria-labelledby, or some other method like clipped or offscreen text. Alternative text for these types of images will not be conveyed through a screen reader's keystrokes for graphics navigation if it doesn't have the ARIA role="img" assigned to it.

Answer 336

Prerecorded multimedia- Captions and Transcript Prerecorded Video only - Audio Description (AAA transcript) Prerecorded Audio only - Transcript Live multimedia- Captions Live video only- AAA must have transcript Live Audio only- AAA must have captions or transcript

Answer 337

Option 1: Navigate by Landmarks To navigate a web page by landmarks using a screen reader: Open the web page using the testing screen reader and its compatible browser Use the keystroke associated with navigating to the next landmark (for NVDA, D; for JAWS, R). If there are landmarks present, the keystroke will take you to the landmarks on the page. If there aren't any landmarks, the screen reader may announce that there is no next (or previous, if navigating backwards) landmark. Listen for the types of landmarks present on the page. There should be at least a landmark for the main content if landmarks are used (announced as "Main landmark")

Answer 338

While on the web page, use the keystroke associated with generating a list of elements: For NVDA, the keystroke is: Insert + F7 For JAWS, the keystroke is: Insert + Control + R For VoiceOver, launch the Rotor using the keystroke: Control + Option + U, then use the arrow keys to find the list of landmarks. When you have located the list of landmarks, look to see which There should be a landmark for the main content

Answer 339

Headings are used: Real headings: Make sure headings use real heading markup (

,

) No misuse of headings: All text that is marked up as a heading is really a conceptual section heading. Heading hierarchy: The heading hierarchy is meaningful. Ideally the page starts with an "h1" — which is usually the same as or similar to the page title — and does not skip levels; however, these are not absolute requirements.

Answer 340

Link that is only text- words should be the purpose/destination Link text with context- link and surrounding words do the same Links that contains only an image- the image's alternative text should describe the purpose of the link Links that contain images and text- if the text adequately describes the purpose of the link, then the image should be ignored with (alt="") or by rendering it as a CSS background image. Links that are icons- the purpose of the link should be conveyed using one of the following ARIA attributes: aria-label, aria-labelledby, or aria-describedby. The id references used for aria-labelledby and aria-describedby should properly describe the link.

Answer 341

Either tab to each link on the web page to note how a screen reader renders the link, or — depending on the screen reader — generate a list of all the links on the web page. For NVDA and JAWS, use the keystroke Insert + F7 For VoiceOver, use the Rotor to locate the list of links. The keystroke to open the Rotor is Control + Option + U, and use the arrow keys to find the list of links on the web page. Follow the link to visit the target page. After visiting the target page, determine if the link text accurately conveys its purpose, based on the page where the link takes the user,

Answer 342

When evaluating labels for individual form elements, check for the following: The label for the form element is visible to sighted users and near its form element. Placeholders alone aren't used as labels. The label is exposed to assistive technologies. To check for this, use a screen reader and place the focus on the form input (text field, radio button, etc.). The label associated with the form input should be rendered by the screen reader. The label properly names or conveys the purpose of the form element. When an image or icon is used as a label, check for a proper text alternative using a screen reader. The instructions for the form or form group are visible and appear before users interact with form elements. The instructions are available to assistive technologies Instructions for form groups are associated programmatically with their specific form elements. To check this, use a screen reader and tab into the form grouping. The screen reader should render instructions to users either when they tab into the grouping () or when they tab to a form element in the grouping (aria-describedby). The instructions are meaningful and actionable. Instructions do not rely on sensory characteristics like color alone.

Answer 343

The name or label of the custom widget or element. The role of the custom widget or element. The state of the custom widget or element. The properties associated with the custom widget or element. The value of the custom widget or element.

DQ WAS Course notes Flashcards

(378 cards)

,

,

,

,

,