Web Accessibility

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

HTML5 semantics post

 

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

One thought on “Web Accessibility

  1. Giorgio

    Thank You very much for this note. It`s very interesting and helpfull

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>