Mid Term study ARIA/Forms Flashcards

1
Q

Why are the .push() and .pop() array methods faster than the .shift() and .unshift() methods?

A

.pop() and .push() are faster than .shift()/.unshift() because .shift/unshift require you to re-index every other array element. While pop and push just remove or add to the end of the array.

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

what is taking place behind the scenes when you click on a link.
(Response/Request model)

A

1.You click on the link/enter the URL
2.An HTTP request object is created
3.The browser sends that request to the server
4.The server processes the request and grabs the HTML file for the user
5.A Response object is created
6.The server sends the response back to your browser
7.Browser opens the response

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

What is the Client-Server model?

A

Resources are hosted on a single computer called a Server, these resources can be shared with many machines called Clients. The Internet is an example of this.

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

WCAG Four Principles(POUR) explain each principle in one sentence

A

Perceivable: Information and user interface components must be presented in ways that users can perceive

Operable: The users must be able to operate the interface (the interface cannot require interaction that a user cannot perform).

Understandable: Users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies, ensuring that users can access the content as technologies advance.

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

What are “Regions” and “Landmarks”?

A

Regions: consist of header, footer, main content, navigation, sidebar, etc. Basically divides the page.A region can be considered a landmark

Landmarks: Are places that act as a point of reference for screen readers and keyboard navigation. If a user has visual impairment and knows they want to look for contact information, they can easily navigate to the footer landmark.

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

What are “Roles” and “States”

A

ARIA can be used to define roles for tags that don’t have them built in(unlike <nav>). A common example is role=”search”. This allows for screen reader users to quickly jump to the search form easily.

A State is the current condition of an element. If an input field has an invalid value, screen readers can’t see the visual cue of it being invalid, use aria-invalid so when true, tell the screen reader the input field has invalid data

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

What are “Properties”

A

Properties allow you to add semantic or information to an existing HTML element.
Example:
<input type=”text” name=”username” required>
the required property will allow screen readers to tell which fields are required, as visual cues can be unhelpful.

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

Difference between aria-label and aria-labelledby ?

A

Aria label:
Provides concise meaning, usually useful for things like buttons or links
<button aria-label=”Search”

Aria labelledby:
aria-labelledby references one or more other elements in the document as the source of the label. Using it’s text content as the label.
<div ‘id=”label1”>Search</div>
<button aria-labelledby=”label1”

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

List and explain the first 3 ARIA Rules

A

1.If you can use an HTML element that has the semantic/behavioral benefit, always use that instead of ARIA. ARIA should be used only when there is no alternative

2.Do not change an elements native meaning(semantic). Example: Don’t give <ul> a role=”navigation”. Instead use a <nav> outside the ul.

3.All interactive ARIA elements must be keyboard accessible. Shouldn’t only be accessible to mouse.

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

List the last 2 ARIA rules

A

4.Do not use role=”presentation” or aria-hidden=”true” on content that is intended to be viewed. Makes the element inaccessible to screen-readers.

5.All accessible elements must have an accessible name

Example:
Read more about this <a href=”www.Google.com”>HERE</a>

Instead do:
Read more at <a href=”www.Google.com”> Google’s website </a>

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

What is ARIA?

A

Accessible Rich Internet Applications, means apps are dynamic and not static. Pages aren’t just static with no interactivity. Content changes and can be interacted with.
ARIA allows you to make the page accessible in ways standard HTML cannot. Semantic tags can provide meaning and aid screen readers.
ARIA allows you to add regions to a page to allow for easier navigation of the page for visual and motor disabilities.

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

What is Progressive enhancement?

A

is a design methodology that ensures a web site/application is accessible to everyone, regardless of what kind of device they’re using.

We do this by separating our application’s structure and content from the styling and from the functionality, essentially dividing up the development of any site/application into those 3 components:
Content/Structure, Styling, Functionality

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

Produce a basic form with one input

A

<form ‘action=”server-script” ‘method=”GET”>
<input ‘name=”Name”>
<input ‘type=”submit”>

add <label>Name</label> above input for name, and add
id = “name” into the input so label can reference it.
if u need accessibility

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

List some Landmark roles and what they’re for:

A

role=”banner” - header area of document, role=”navigation”, role=”main”, role=”complementary”- content related to main, role=”contentinfo” - used for footer, role=”search” - search form

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

Languages used by:
Client-side (Front-end)

Server-side (Server Scripts and Database)

A

Front-end: HTML, CSS, Javascript

Server-side: Javascript(Node.js), PHP, MySQL, Oracle.

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

How do screen reader users navigate forms?

A

They rely on label tags to read out the purpose of the input field for the user.

17
Q

Break down the label and input attributes below:

<form ‘action=”server-script” ‘method=”get”>
<label ‘for=”FName”>First Name:</label>
<input ‘id=”FName” name=”FName” value=”” required>

A

for = “” - references the id of the input tag

id = “” - for the label to reference

name = “” - The name of the variable that will be sent to the server once the form is submitted. (If name = “Var”, Var=<userinput> will show up on the URL when submitting)</userinput>

value = “” - Is the default value of the input field if the user doesn’t input anything

required - Means user must input something into the field.

18
Q

What does placeholder do below:

<label ‘for=”LName”>Last Name</label>
<input ‘id=”LName” ‘name=”LName” ‘placeholder=”Appleseed”>

A

Placeholder = Text displayed on the field before the user inputs data

19
Q

What does type do below:

<label ‘for=”Dob”>Date of Birth</label>
<input ‘id=”Dob” ‘name=”Dob” ‘type=”date”>

A

Changes the input field into a different type.
type=”date” will allow the user to pick a date from a calender.

You need a <input></input> with a type=”submit” to make the form submittable.

20
Q

What does type=”password” do?

<input></input>

A

allows user to input into a input field that visually hides input

21
Q

What does type=”checkbox” do?

<label ‘for=”Newsletter”>Newsletter</label>
<input ‘type=”checkbox” ‘name=”Newsletter” ‘id=”Newsletter”>

A

Type = “checkbox”, allows user to tick box

22
Q

What does type=”radio” do?

<input ‘type=”radio” ‘name=”size” ‘value=”S”>S
<input ‘type=”radio” ‘name=”size” ‘value=”M”>M
<input ‘type=”radio” ‘name=”size” ‘value=”L”>L

A

Type = “radio, creates multiple tick boxes from the same name value. User can only pick one.

23
Q

What does the <select> tag do?</select>

<label ‘for=”country”></label>
<select ‘name=”country” ‘id=”country”>
<option ‘value=”CA”>Canada</option>
<option ‘value=”US”>United States</option>
<option ‘value=”MX”>Mexico</option>
<option ‘value=”CH”>Russia</option>
</select>

A

<select> contains <option>s, each option has a value and content.</option></select>

Select creates a dropdown menu with these options.

24
Q

<textarea ‘name=”comments”>put default value here</textarea>

Just look and remember this

A

<textarea>put default value here</textarea>

25
Q

What does type=”number” do here:

How many calories?
<input ‘type=”number” name=”calories”>

A

Allows user to only enter numbers

26
Q

What does type=”range” do:

<label ‘for=”range”></label>
How days do you sleep?
0<input ‘type=”range” ‘name=”calories” ‘min=”0” ‘max=”7” ‘id=”range”>7

A

Creates a draggable slider that has a min and max value.

27
Q

What does type=”url” do:

<label ‘for=”url”>URL</label>
<input ‘type=”url” ‘name=”url” ‘id=”url”>

A

Input field needs a URL

28
Q

What does Pattern = “[aeiou]”do:

<label ‘for=”vowel”>Pattern</label>
<input ‘type=”text” ‘pattern=”[aeiou]” ‘name=”vowel” ‘id=”vowel”>

A

Input field can only have things from pattern = [aeiou]