Should I use an arial-label element or label that is visually hidden

Question

I am creating a search form that has two elements: an input field and a button. The input field does not have a label associated with it.

To make the field more accessible, I can add <label for="searchfield">Search</label>and visually hide it so that it can, for example, be readable from the screen.

I could also add aria-label="search"to the input field and leave the input field unmarked.

I tested with "Voice Over" on a Mac and get the same result / output. My question is, are these approaches equivalent? Or is one approach better than the other?

Here is the pen .

Answer 1

- ( ?) ( ?), :

• ARIA ( )

ARIA CSS ( , chunked ..) , .

, <label>. . CSS , . ARIA, . , ARIA, ( - ). SRs.

, , , ( ) ( Unor). , , placeholder ( <label> CSS, ).

SVG, ARIA, SVG.

FWIW, title, - , , , meh.

, :

, ?

, .

, ?

, .

Answer 2

aria-label CSS, label.

( : aria-label , )

, , . , " ", , .

( : )

, , . - title input. title , , ( , title input) 3.

Answer 3

, aria-label="search" , (.. label), CSS - .

, label CSS "" , ARIA , .

, , , , ARIA, , label . , , , .