Accessibility

accessibility - is a practice of website development. most commonly it includes instruments, which help screen readers to read the content

  • besides, accessibility instruments help search engines to parse a web page
  • some content can be added to the page for screen readers needs only. it is visually hidden via CSS

Semantic Elements

<header> - introductory content on top. typically contains logo, navigation
<nav> - navigation
<aside> - sidebar
<main> - main content
<footer> - content on bottom. typically contains copyright, links to related pages

<section> - is more generic. groups related content
<article> - is more specific. represents standalone self-contained piece of content

<search> - wrapper for search UI

<h1> -> <h6> - headings of different levels
<p> - paragraph

<strong> - bold text. is used instead of <b>
<em> - emphasis. is used instead of <i>

title - would be the name of a book heading - would be the name of a chapter

Other Instruments

<img alt="alternative text" />

title="hint" - specifies extra information about an element. will be displayed once user point a cursor on element

<label for="input id"> - links label with field

<fieldset> - groups related data in a form

  • form="form id" - allows <fieldset> not to be nested inside <form>
  • disabled

<legend> - defines a caption for the <fieldset> element. it is contained into <fieldset>

<time datetime="08:00"> - translates date or time into machine-readable format

<figure> - is used to mark up a photo in a document
<figcaption> - adds explanation to the photo. is contained into <figure>

accesskey="x" - attribute, which specifies a shortcut key to activate or bring focus to an element. works well with <a>, <button>, <form>
tabindex - attribute, which indicates whether element can be focused on and how soon

  • 0 - default value
  • n - specifies the tabbing order of an element
  • -1 - element can't be reached with tab, but can be focused with JS

Microdata

microdata - allows to define metadata about the content

  • it helps search engines to interpret content
  • for specific types of content (e.g. movies, goods, recipes, etc.), Google can extract it and show directly in SERP in structured way


itemscope
itemtype="schema.org/Foo"

itemprop="bar"

;