Mid Term study ARIA/Forms Flashcards
Why are the .push() and .pop() array methods faster than the .shift() and .unshift() methods?
.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.
what is taking place behind the scenes when you click on a link.
(Response/Request model)
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
What is the Client-Server model?
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.
WCAG Four Principles(POUR) explain each principle in one sentence
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.
What are “Regions” and “Landmarks”?
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.
What are “Roles” and “States”
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
What are “Properties”
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.
Difference between aria-label and aria-labelledby ?
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”
List and explain the first 3 ARIA Rules
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.
List the last 2 ARIA rules
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>
What is ARIA?
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.
What is Progressive enhancement?
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
Produce a basic form with one input
<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
List some Landmark roles and what they’re for:
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
Languages used by:
Client-side (Front-end)
Server-side (Server Scripts and Database)
Front-end: HTML, CSS, Javascript
Server-side: Javascript(Node.js), PHP, MySQL, Oracle.
