Study Notes

Study Notes

  • Source
  • WebDesign
  • Javascript

›Applied Accessibility

Basic HTML and HTML5

  • Basic HTML and HTML5 Overview

Basic CSS

  • Basic CSS Overview

Applied Visual Design

  • Applied Visual Design Overview

Applied Accessibility

  • Applied Accessibility Overview
  • Image alt attribute
  • Headings
  • Semantic Elements
  • Visual Sense
  • Attributes Relative to the Keyboard

Responsive Web Design Principles

  • Responsive Web Design Principles Overview

CSS Flexbox

  • CSS Flexbox Overview
  • Flex Container
  • Flex Item

CSS Gird

  • CSS Grid Overview
  • Grid Container
  • Grid Item
  • Grid Areas
  • build-in function
  • Layout

Attributes Relative to the Keyboard

accesskey

HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.

HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.

<button accesskey="b">Important Button</button>

参考资料:

  • Make Links Navigatable with HTML Access Keys
  • HTML accesskey Attribute

tabindex

  • When tabindex is on a tag, it indicates that element can be focused on.
  • Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page.
  • his same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them.
<div tabindex="0">I need keyboard focus!</div>

<div tabindex="1">I get keyboard focus, and I get it first!</div>

<div tabindex="2">I get keyboard focus, and I get it second!</div>

参考资料:

  • Use tabindex to Add Keyboard Focus to an Element
  • Use tabindex to Specify the Order of Keyboard Focus for Several Elements
← Visual SenseResponsive Web Design Principles Overview →
  • accesskey
  • tabindex
Copyright © 2019 罗惠东