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 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>

Other Instruments

<img alt="alternative text" />

<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

ARIA

Accessible Rich Internet Applications (ARIA) - specification designed to increase the accessibility of web pages with the help of ARIA attributes

  • use case: add accessibility to <div> or <span>, which pretend to be a button
  • native HTML instruments are still always preferable. specialized interactive elements, like <button>, are partly accessible by default

Attributes

role - defines the purpose of an element. there is specified list of roles

  • e.g. role="button"


aria-checked - indicates whether checkbox or radio-button is checked
aria-pressed - indicates whether toggle button is pressed

  • use case: reflect the state of accordion

aria-disabled - indicates disabled element
aria-hidden - hides an element from screen reader

aria-label - provides a name for an element, which doesn't have content. e.g. button with icon

  • if content is present, aria-label will override it for screen readers

aria-labelledby