Global attributes in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the tabindex global attribute?

Which of the following best describes what the tabindex attribute does when added to an HTML element?

A It defines the order in which elements receive keyboard focus when pressing the Tab key.

B It sets the text color of the element.

C It hides the element from screen readers.

D It specifies the URL of a linked resource.

💡 Hint

Think about how keyboard users move through a webpage.

The tabindex attribute controls the order in which elements are focused when a user presses the Tab key. This helps improve keyboard navigation and accessibility.

📝 Syntax

intermediate

Which option correctly uses the aria-label global attribute?

Select the HTML snippet that correctly uses the aria-label attribute to provide an accessible name for a button.

A <button aria-label=''>Close menu</button>

B <button aria-label>Close menu</button>

C <button aria-label="Close menu">X</button>

D <button aria-label=Close menu>X</button>

💡 Hint

The attribute needs a value inside quotes.

The aria-label attribute must have a quoted string value that describes the element for screen readers. Option C correctly sets it.

❓ rendering

advanced

What is the visual effect of adding hidden attribute to an element?

Given this HTML snippet, what will you see in the browser?

HTML

<div>Visible text</div>
<div hidden>Hidden text</div>

A Both 'Visible text' and 'Hidden text' are visible.

B Only 'Hidden text' is visible; 'Visible text' is hidden.

C 'Hidden text' is visible but grayed out.

D Only 'Visible text' is shown; 'Hidden text' is not visible or takes space.

💡 Hint

The hidden attribute hides the element completely.

The hidden attribute hides the element from view and it does not take up space on the page.

❓ selector

advanced

Which CSS selector targets all elements with the global attribute contenteditable set to true?

Choose the correct CSS selector to style all elements where contenteditable is exactly true.

A .contenteditable-true { border: 1px solid blue; }

B [contenteditable="true"] { border: 1px solid blue; }

C [contenteditable] { border: 1px solid blue; }

D #contenteditable=true { border: 1px solid blue; }

💡 Hint

Attribute selectors use square brackets and quotes for exact matches.

The selector [contenteditable="true"] matches elements whose contenteditable attribute value is exactly true.

❓ accessibility

expert

What is the effect of using aria-hidden="true" on an element with visible content?

If an element has visible text but includes aria-hidden="true", what happens for screen reader users?

A Screen readers ignore the element and do not read its content.

B Screen readers read the element normally.

C Screen readers read the element twice.

D Screen readers highlight the element but do not read the text.

💡 Hint

Think about hiding content from assistive technologies but not visually.

The aria-hidden="true" attribute hides the element from screen readers, so they skip reading its content even if it is visible on screen.