By publishing content on the web, we want as many people as possible to be able to find the content. Web Accessibility is about supporting all users regardless of browsing technology they use.
People may access the content through many devices e.g.:
- computer
- notebook
- tablet
- cell phone
- TV
- gaming console
- text-to-speech browser
- Braille browser
- voice-controlled computer
- …
Benefits of accessibility
- increases the number of visitors
- improves customer satisfaction
- improves findability (SEO)
- improves social networks’ support
- makes content easier to read and comprehend (for people and machines)
- no visual differences
A few rules
Content hierarchy
Hierarchy is created by using h1 to h6 tags.
- structuring content
- simplifying navigation through content (people used to skim content by reading only headings)
- indexed by search engines
Drop-down menu alternative
A drop-down menu might not be so accessible e.g. when navigating through a page via keyboard. Using page sidebar seams to be a better solution. Links to related sub pages could be displayed as a sidebar.
Emphasized text
Emphasizes text by using semantic markup:
- em – emphasize
- strong – strong emphasize
- mark – mark text as highlighted
Lists
Groups together the specific types of content.
- easy navigation
- items are semantically grouped
- search engines see list items as related to each other
Skip button
Visible for screen readers. Gives a way to skip from one section to another within the same page.
<nav>
<h1>Main menu</h1>
<div>
<a href="#content" title="Skip to content">
Skip to content
</a>
</div>
...
</nav>
Current focus display
Simply achievable by using CSS rules. Navigate through a page by using TAB key on a keyboard to see focus change.
a:focus
{
outline:1px solid #f00;
}
HTML5 tags
Section headings
- determine what sections are about
- visible in a document’s outline
- provide information for non-visual browsers
<nav>
<h1>Main Menu</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
nav > h1
{
position:absolute;
text-indent: -9999px;
}
Language
Specifies the default language of the text in the page.
- browser (e.g. Chrome) can detect language and offer to translate
- text-to-speech reader can read text in correct language
- search engines index pages based on language
<html lang="en">
Document title tag
Provides a title for a page.
- adds a title to a window or tab
- displays a title for the page in search-engine results
- first text to read for a text-to-speech reader
- provides a title for the page when it is added to favorites
<title>Title of the page</title>
description meta tag
Provides a short (up to 160 characters) description of content of the page.
- indexed by search engines
- displays results in a search-engine
- shows up when pages are shared in social media
<meta name="description" content="Page description up to 160 characters">
Hyperlink title attribute
Provides additional information about where the user is moved after clicking the hyperlink.
Image alt attribute
An alternate text for an image when the image could not be displayed or a browser has images turned off.
- provide explanation or description of an image or graphic
- search engines index images accordingly to alt text
Thank You very much for this note. It`s very interesting and helpfull