w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

img tabindex attribute

The tabindex attribute on the img element:


<imgattribute="value(s)" >Examples
19.tabindex= integer <img src=".." alt="alt text " tabindex="1">

Video demonstration img tabindex attribute

HTML5 img tabindex attribute Tutorial

min video details
00:02 video tutorial: tabindex attribute on img
00:06 tabindex attribute on img makes that image focusable and allows you to set its order when navigating through focusable elements
00:14 tabindex attribute is not present on our images → the images are NOT focusable
00:22 test: navigating in page using tab key form the keyboard
00:23 focusable areas in this order:
1. browser tab
2. navigation toolbar
3. search toolbar
4. the body of the page
00:37 the images are not focusable right now
00:38 making the 3rd image focusable, order 1→ becomes the first focusable element in page
00:51 test result ok: first tab hit focused the 3rd image: see the dotted border
01:02 making the 1st image focusable too , order 2 → becomes the second focusable element in page
01:11 test:
1. 3rd image
2. 1st image
3. browser tab
4. navigation toolbar
5. search toolbar
6. the body of the page
01:29 making the 3rd image focusable too , order 3 → becomes the third focusable element in page
01:40 test focusable elements in this order:
1. 3rd image
2. 1st image
2. 2nd image
4. browser tab
5. navigation toolbar
6. search toolbar
7. the body of the page
img intro img optional img occurrences img browser display img parents server-side image map (ismap) vs client-side image map (usemap) img syntaximg alt attributeimg ismap attributeimg usemap attributeimg width, height attributesimg src attributeimg accesskey attributeimg class attributeimg draggable attributeimg hidden attributeimg id attributeimg lang attributeimg style attributeimg title attributeimg translate attribute