img tabindex attribute
The tabindex attribute on the img element:
- → allows you to make an embedded image through img tag, focusable and set its order in the navigational process through focusable elements on page using tab key
- is a global attribute → can be applied on all html elements;
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 19. | tabindex | = | integer | < 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 |