Introduction to the development of (+) accessible websites

Agenda

Agenda (2)

Agenda (3)

Agenda (4)

Motivation

Since February 8, 2013 that all the sites which provide online information or services in Portugal are obliged to meet, respectively, the levels A and AA from the WCAG 2.0 - conjunction of the law establishing the adoption of open standards (Portuguese law #36/2011) and the RNID (Portuguese RCM #91/2012).

Accessibility definition

Accessibility

relates to the means and resources that enhance the skills of those who use them, reducing the effect of existing barriers.

— iACT

Users with disabilities

People with disabilities are part of the World's largest minority group.
Currently it is estimated that 10% of the Worlds's population has some type of disability.
This number has the tendency to grow as the population ages.
In countries with life expectancy higher than 70 years, people live about 11.5% of their life with some kind of disability.

Disability types

Physical disabilities
Sight (blindness, low vision, color blindness, etc.)
Hearing disabilities
Cognitive disabilities
Etc.

Accessibility as a tool

Concerns about the accessibility tend to improve the quality of software and their content.
However, by solving accessibility problems to some users, we should not create problems for the remaining users.
Additional features may be provided to enhance the experience of some users, but the solution as a whole should not differentiate users.

Field of action

Web site (or application) layout
Contents (like text, images or video)
Forms (and other interactive elements)

Web pages

Web pages are usually built in three languages:

HTML as the core language to represent content. It also refers others resources it needs to present the information correctly.
CSS as a support language with instructions about the visual aspect of HTML elements.
JavaScript as a support language to define behaviours and functional aspects of HTML elements.

HTML

HTML has a relatively simple syntax. However it is important to know how to properly apply each of its tags to obtain the most adequate results.
Each tag as their own function and characteristics, providing essential information about the content and its semantics.
Applications like browsers, search engines crawlers, screen readers, etc., use this information to define their behaviour.

HTML tags

A HTML tag is formed with elements like a name (required), attributes (optional) and a value (optional)

Formal structure of a Web page

A Web page is made by a document type specification, a header and a body.

<!DOCTYPE html>
<html>
    <head>
        <title>Page title</title>
    </head>
    <body>
        Page content
    </body>
</html>

Formal structure of a Web page (2)

The doctype defines the type and version of the specification which should be used to process the document.
In the page header (enclosed by the head tag) usually we can find the meta-data that characterize the page, as well the reference to other resources required for page layout and functionality (for instance, CSS files).
In the page body (enclosed by the body tag) are the actual contents of the page (like texts, images, videos, etc).

Cascading Style Sheet (CSS)

Style sheets define the appearance which the content should assume.
Instructions with the specification of size, color, spacing, etc., must be defined through this language, thus promoting the separation between presentation and content.
The style information handle essentially visual aspects of a page and usually is ignored by screen readers (with some exceptions).

Example with some CSS instructions

The following example present a set of CSS instructions which define the color red and a font-weight with the style bold, to all paragraphs in a HTML document.

p {
    color: red;
    font-weight: bold;
}

JavaScript

This is a programming language used to manipulate, add interaction, define behaviors and modify aspects of HTML elements. Example:
document.getElementById("javascript-example-btn") .addEventListener("click", function () { alert("You have activated the button!"); }, false);
Some precautions should be taken when using JavaScript on the Web because some content modifications may not be detected by some screen readers (see aria-live).

Practical tips: Language definition

The lang attribute defines the content language from a given tag and its descendants (tags).
Screen readers can use this information to choose the voice that they should use when reading the text.
Search engines may use this information to index the site in the correct language.

<html lang="pt-PT"><!-- Set the document language to Portuguese --> (...)
<span lang="en">Web</span><!-- The word "Web" is in English-->

Page titles

Page titles must be useful.
A good practice is to invert the order of the text in the title showing first the title of the page followed by the site name.

Headings

Headings must be used for titles.
Each document should have a logical heading structure which starts on level 1 and don't skip levels.
The title of the main content of a document should be a heading with level 1.

<h1>Site name</h1>
    <h2 class="list-title">Main menu</h2><ul><li>...</li></ul>
    <div id="content">
        <h1>Page title</h1>
        <p>Page content</p>
    </div>

Increase your font size

Text should have a minimum size of 16px.
The text must be readable a meter away from the screen.
Use relative text sizes¹html { font-size: 62.5%; } body { font-size: 1.6em; /* approximately 16px */ }

¹Attention to the text size inheritance

Size inheritance

Attention to the size inheritance!

body {
    font-size: 1.6em; /* ±16px */
}
h1 {
    font-size: 2em; /* 1.6em*2em≅3.2em (32px, not 20px) */
}

Text spacing

The lack of space between lines can make it difficult to read long texts:

line-height: normal;

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est. Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.

Text spacing (2)

Adequate spacing between lines facilitates the transition between lines when reading:

line-height: 1.4em;

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est. Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.

Paragraph spacing

Paragraph spacing is also important:

p{ margin-bottom: 0; }

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est.

Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.

Paragraph spacing (2)

Spacing promotes paragraph isolation

p{ margin-bottom: 0.5em; }

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed metus justo, id sagittis neque. Donec neque quam, consequat sit amet tincidunt in, semper id est.

Integer sed odio ac metus accumsan rutrum elementum et tortor. Proin suscipit condimentum feugiat. Vestibulum placerat, justo sit amet dapibus fringilla, nisi diam laoreet diam, in ullamcorper arcu neque id mi.

Text alignment

The alignment of long texts for languages in which reading is done from left to right should be set to left.
Justified text tends to add greater spacing between words which can make reading more difficult to some users (like, people with dyslexia or low vision).
In the future, the hyphenation and spacing of letters in words may allow the justification of text on the web (with CSS 3).

Links without content

Links should have content (it is not enough to define the destination address) <a href="http://exemplo.com/"></a> <a href="http://example.com/"><img src="image.png" alt=""></a>
Text is important to give a context to the link<a href="http://example.com/">Text</a> <a href="http://example.com/"><img src="image.png" alt="Text"></a>

Text of links

The text of links should not be repeated in the same document (assuming text as the combination of the link content and the title attribute).
Generic texts which do not provide context information about the link, are not suitable: <a href="http://example.com/document-xpto.pdf">Click here</a> to download the XPTO document.
Expressions like "click here" are discouraged (there are users who do not "click").

Alternative to the previous example

<a target="_blank" title="Follow the link to access the XPTO document in a new tab" href="http://example.com/document-xpto.pdf">Download the XPTO document (<abbr lang="en" title="Portable Document Format">PDF</abbr>)</a>.

If applicable, it is recommended to inform the user that the target of the link will open in a new window/tab.
It is also advisable to indicate the type of document associated with the link (if it is not a HTML page).

JavaScript links

Links with iteration should always have the attribute href set (so they can be focused).
This is important to ensure that they can be activated by other methods than just the click or touch.

<a id="close" title="Close the element">Close</a><!-- Wrong! -->
<a href="#" id="close" title="Close the element">Close</a><!-- OK -->

Skip links

Not all users use a mouse or a touch device to navigate in a site.
Skipping links provide a mechanism for a user to have easy access to content or skip large blocks of information.
It is particularly useful for users who browse with a keyboard (for instance, by using the Tab key) or with other devices to focus elements, step by step.

Skip links (2)

The skip links are regular links whose destination are anchors for existing identifiers on page they are in. <a href="#content" title="Follow the link to jump to the content of the page" class="skip-link">Go to the content</a>  <div id="content"></div>
The first link in the page should be a skip link to access directly to the main content.
Links to skip blocks with many links are also recommended.

Skip links visibility

Skip links should not be hidden when they are active.skip-link{ text-indent: -9999px; /* Wrong */ } .skip-link{ display: none; /* Very wrong!!! */ }

Skip links visibility (2)

Skip links can be hidden from the visible area only when they are not activea.skip-link, a.skip-link:hover, a.skip-link:visited{ position:absolute; left:0px; top:-1000px; width:1px; height:1px; overflow:hidden; }

Skip links visibility (3)

However these must be displayed when they are in focus (for instance, when browsing with a keyboard)a.skip-link:active, a.skip-link:focus{ position:static; width:auto; height:auto; }

ARIA landmark roles

The skip links are still widely used (promoted by WCAG 2.0)
However ARIA landmark roles may provide a more attractive solution to logically describe the structure of a site or web application and allow navigation between its sections with the use of assistive technologies.

Links outline

The outline (or border) which highlight the links when they are focused should be removed.a{ outline:none; /* OH, NO!!!!! */ }
Users who only use the keyboard to navigate need to know what link is selected.
The outline can be removed/hidden but only for the :active state of an element.

Menus

The menus are nothing more than a list of links.
In this sense, the HTML unordered lists provide an interesting solution to represent the structure of a menu.

<nav role="navigation">
    <h2>Site main menu</h2>
    <ul>
        <li><a href="/home">Home</a></li> (...)
        <li><a href="/contacts">Contacts</a></li>
    </ul>
</nav>

Alternative navigation methods

Not all users use to the mouse to navigate on the web.
Implementation of support for alternative navigation methods like navigation with keyboard, touch devices, etc., is important to ensure that these users are not overlooked.

Alternative navigation methods (2)

The execution of actions only on :hover is one of the most common mistakesa:hover{ text-decoration: underline; }
Solution: apply the same effect also on :focusa:hover, a:focus, a:active{ text-decoration: underline; }

Alternative navigation methods (3)

Usage of JavaScript code can be useful to customize the behavior to the characteristics of the client app.
For instance, you can modify de behavior if a touch device is detected: if("ontouchstart" in window){ /* Touch device; define the custom code to do something like expanding a menu when an element is touched */ }else{ /* No tactile interface; define the code to expand the menu on focus or when the mouse is hover an element */ }

Tables

Tables are used to present information in a tabular form and should not be used to define site layouts!!!

Formal structure of tables

You should set a caption and a summary² for the table.
Usually the caption is presented to the user and functions like a legend for the table.

<table>
    <caption>Table 1: Student evaluations by course</caption> (...) 
</table>

² The usage of the summary attribute is now deprecated in HTML 5; the table description should now be done by using the caption or using a tag figure which wraps and describes the table.

Formal structure of tables (2)

It is recommended to define a header and content sections to provide information about the table structure.
Optionally you can also define a footer section which, along with the header, can be repeated on page breaks (e.g., when printing).

<table>
    <caption>Table 1: Student evaluations by course</caption>
    <thead><!-- Header cells (...) --></thead>
    <tfoot><!-- Footer cells (optional) (...) --></tfoot>
    <tbody><!-- Content cells (...) --></tbody>
</table>

Sample code of a table

<table>
    <caption>Table 1: Student evaluations by course (from 0 to 20)</caption>
    <thead>
        <tr>
            <th scope="col"><span title="Student ID">Student</span></th>
            <th scope="col"><span title="Course: Service Quality over a Network">SQN</span></th>
            <th scope="col"><span title="Course: Computation in Distributed Environments">CDE</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">2120915</th>
            <td>19</td>
            <td>17</td>
        </tr>
        <tr>
            <th scope="row">2120917</th>
            <td>18</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

Result of the previous example

Table 1: Student evaluations by course (from 0 to 20)
Student	SQN	CDE
2120915	19	17
2120917	18	18

More about tables

Understand a complex table only by hearing can be something quite difficult, so the recommendation is to simplify tables wherever possible.

There are some more HTML instructions for building more complex tables that were not addressed in this presentation. If necessary these additional options should be explored to facilitate the interpretation of data in tables.

Images

Should have the alt attribute always set. This attribute provides a text alternative to the image and can be empty (but set) for images not relevant for understanding the content (e.g., decorative images or spacers).
The title attribute provides additional information about the image and can be used to short descriptions (which can accessed by all users).

Images (2)

More complex images may be described contextually in the content (e.g., by using a figure tag) or by adding a link near the image that guide the user to a document with a more complete description.
Background images should have a background color defined which provides sufficient contrast to read the text placed over it (if any); by doing this, if the image is not loaded by some reason, the text will still be readable.

Color contrast

The contrast between foreground and background colors must be assured so the information is legible.
A contrast ratio of at least 7:1 is advisable for texts with a size lower than 18pt (or 14pt if bold) and at least 4.5:1 to texts with higher dimensions (WCAG 2.0 contrast formula).
Tools like the Colour Contrast Check let you check the contrast ratio of two colors.

Here's a shy text...

Labels

Labels describe the associated fields in a form.
These should be linked with form fields either implicitly or explicitly increasing the focus area of the respective fields. <label>Name: <input type="text" /></label> (...) <label for="name">Name:</label> <input id="name" type="text" />

Grouping in forms

The form fields can be logically grouped to simplify filling. <form> <fieldset> <legend>Personal data: </legend> <p><label>Name: <input type="text" size="30"></label></p> <p><label>E-mail: <input type="text" size="30"></label></p> <p><label>Age: <input type="text" size="3"></label></p> </fieldset> </form>
Usually screen readers announce the legend before the label for each field

Size of interactive elements

Interactive elements (like buttons) must be large enough so that they can be used by users which have problems performing precision movements.

Accessibility tools

Tools such as an accessibility bar can be a good way to provide a better browsing experience for your users, for instance, defining and controlling how the text size can be changed, modification of the site color schemes for better contrast, or through the presentation of a description of the structure of your software and how to handle it.

PE & GD

Responsive web design and the description of elements with the ARIA tools may allow you to improve and optimize the browsing experience of your software according to the characteristics of the access devices and their users (progressive enhancement).
However, it is important to ensure that access to information is still possible even if the client applications do not have all the required features for the best possible experience (graceful degradation).

Tests and validation

Automatic validation tools are very useful and can detect a good portion of the more common accessibility problems. Examples:
- WAVE - Web Accessibility Tool
- AccessMonitor - Portuguese tool
However the automatic checks may not be enough to detect all accessibility issues. Manual validations, content analysis and tests with users, extend and complement the analysis by automatic tools.

Some important standards

Questions?

Doubts?
Comments?

References

G. Ivo, HTML/CSS tips to improve the accessibility of your websites, Codebits 2011, November 10, 2011.
Inclusão e Acessibilidade em Ação, Inclusão vs. Acessibilidade, Instituto Politécnico de Leiria, June 1, 2012 <iact.ipleiria.pt/concepts/acessibilidade/> [Accessed May 3, 2013]
Disabled World, World Facts and Statistics on Disabilities and Disability Issues, <www.disabled-world.com/disability/statistics/> [Accessed on May 27, 2015]

References (2)

Windows Dev Center, Introduction to ARIA, Microsoft, <msdn.microsoft.com/en-us/windows/gg671918> [Accessed on May 27, 2015]
J. Craig & M. Cooper, Accessible Rich Internet Applications (WAI-ARIA) 1.0, W3C, February 3, 2014 <www.w3.org/WAI/PF/aria/> [Accessed on May 27, 2015]

Source code

You can find the source code of this presentation on GitHub: https://github.com/cesperanc/daws

Development of (+) accessible web sites

Agenda

Agenda (2)

Agenda (3)

Agenda (4)

Motivation

Accessibility definition

Users with disabilities

Disability types

Accessibility as a tool

Field of action

Web pages

HTML

HTML tags

Formal structure of a Web page

Formal structure of a Web page (2)

Cascading Style Sheet (CSS)

Example with some CSS instructions

JavaScript

Practical tips: Language definition

Page titles

Headings

Increase your font size

Size inheritance

Text spacing

Text spacing (2)

Paragraph spacing

Paragraph spacing (2)

Text alignment

Links without content

Text of links

Alternative to the previous example

JavaScript links

Skip links

Skip links (2)

Skip links visibility

Skip links visibility (2)

Skip links visibility (3)

ARIA landmark roles

Links outline

Menus

Alternative navigation methods

Alternative navigation methods (2)

Alternative navigation methods (3)

Tables

Formal structure of tables

Formal structure of tables (2)

Sample code of a table

Result of the previous example

More about tables

Images

Images (2)

Color contrast

Labels

Grouping in forms

Size of interactive elements

Accessibility tools

PE & GD

Tests and validation

Some important standards

Questions?

References

References (2)

Source code