Skip to content

Instantly share code, notes, and snippets.

@ronnyandre

ronnyandre/gist:5822886bd25a8ba9f895

Last active August 29, 2015 14:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ronnyandre/5822886bd25a8ba9f895 to your computer and use it in GitHub Desktop.
Save ronnyandre/5822886bd25a8ba9f895 to your computer and use it in GitHub Desktop.
Download ZIP
WCAG 2.0 A/AA / Tilgjengelighetsloven
Raw
gistfile1.md

Images

  • Alternative text is required. The alternative text is not the same as image description in WP. Alt text should explain what the photo shows.
  • Alt text for linked images should describe the link, not the image.
  • Hi-res (retina or SVG) is good for users who need to zoom.

RESP: Editor/designer/developer.

Colors

  • Marked text (i.e. links) should be provided with underline.

RESP: Designer/developer.

CAPTCHA

If you have to use CAPTCHAs, you must provide a text alternative where the user can input an answer. I.e.:

What is five plus 7?

Other ways to avoid CAPTCHAs is to use visually hidden input fields (display: none) that spambots wants to populate with data, and fail validation if that input field contains data.

RESP: Developer.

Focus marking (navigation)

  • All objects that can have focus when navigating with keyboard should be clearly marked. You can use the same effect as with hover.

RESP: Designer/developer.

Click wheel (navigation)

  • Clickable objects must be easy to click and have enough click space.
  • Size and spacing between objects is important.

RESP: Designer/developer.

Code standards

  • Following standards is important for having an accessible website.
  • Avoid old standards, try to use HTML5 or XHTML 1.0 Transitional/Strict.
  • Elements should have correct opening and closing tags. Elements should be structured and in a correct hierarchy. Elements should not have duplicate attributes. Every ID attribute value is unique on every page.
  • CSS should be as correct as possible. You should minimize the use of non-standard code.

RESP: Developer.

Contrast

  • Text and graphics has to have sufficient contrast against the background.
  • Contrast requirement for large text: 3:1
  • Contrast requirement for small text: 4.5:1
    • At normal font weight, large text is 18 px and larger.
    • At bold font weight, large text is 14 px and larger.
  • If background or foreground has gradient or variants in color, measure against the weakest point.
  • Exception: Contrast on disabled or inactive elements.

RESP: Designer/developer.

Links

  • Links must be more distinctive than just color. It must have underline or icons.
  • Exception: Links in menu are not necessary to underline, as the context is explainable enough.
  • Link text has to be descriptive enough so the user know where the link is leading them.

RESP: Editor/designer/developer.

Navigation methods

  • The user should have two methods to find content on the website. This can be menu navigation, search, alphabetical listing and/or sitemap.
  • Search should be easy to find and to perform, and should search the whole page.
  • Alphabetical lists should present the pages based on keywords and/or page titles in alphabetical order.
  • Sitemap should present the pages base on their placing in menu structure.
  • Navigation should be presented and perform similar everywhere on the site.
  • Main navigation should have a permanent placing on the site.

RESP: Designer/developer.

Site title

  • Title of page is added with <title> element i <head>. It should contain a name and description for that specific page: <title>Title of page | Category - Site name</title>
  • Title of page should be first, and site name last.

RESP: Developer.

Forms

To achieve good support when filling out forms, it is essential with:

  • good coding
  • good design
  • label text and help text
  • errors when input is not correct

Shortcuts and key commands

Many websites has a lot of elements (header, navigation, search, banners) before the page content. For users with keyboard navigation should get quicker to the content, we add a shortcut.

  • The shortcut has to move focus both visual and structurally.
  • The shortcut can initially be hidden, but has to be visible on focus.

CSS:

.shortcut { position: absolute; left: -200px; top: 0; }
.shortcut:focus { left: 0; }

HTML:

<a href="#content-shortcut">Go to content</a>

<a name="content-shortcut" id="content-shortcut"></a>
<h1>Main Content</h1>

RESP: Developer.

Language in code and content

For screen readers to use correct language for reading the text, you have to provide correct language attributes to the content. Search engines also uses the language attribute to show users relevant search results.

  • Language codes must conform with ISO 631-1:
    • no = Norwegian (nb = Norwegian bokmål / nn = Norwegian nynorsk)
    • en = English
    • uk = Ukranian
    • ru = Russian
  • Main page language should be marked in the element: <html lang="nb">
  • Where there are language changes within the page, elements should use the language attribute: <p>Dette er norsk <span lang="en">and this is english</span></p> and <li lang="en">This is a bullet point</li>

RESP: Developer/editor.

Tables

Tables should always be used to present structured data. Use captions to shortly describe the data, and what it presents. This is very useful for screen readers.

<table>
	<caption>Pingbull employees phone numbers</caption>
</table>

Table summary

You can use table summary to describe the brief overview of how data has been organized in to a table or a brief explanation of how to navigate in the table. This attribute is not displayed visually.

The summary attribute is very useful when using tables with complex structure (for example, when there are several sets of rows or column headers, multiple groups of columns or rows).

The summary attribute may be used whether or not the table includes a caption element. If both are used, the summary should not duplicate the caption.

Table header cell scopes

You can associate header cells with data cells in complex tables by using the scope attribute. The scope attribute may be used to clarify the scole of any cell used as a header. The scope identifies wheter the cell is a header for a row, column, a group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.

Example with row scopes:

<table border="1">
	<caption>Contact Information</caption>
	<tr>
		<td></td>
		<th scope="col">Name</th>
		<th scope="col">Phone#</th>
		<th scope="col">Fax#</th>
		<th scope="col">City</th>
	</tr>
	<tr>
		<td>1.</td>
		<th scope="row">Joel Garner</th>
		<td>412-212-5421</td>
		<td>412-212-5400</td>
		<td>Pittsburgh</td>
	</tr>
	<tr>
		<td>2.</td>
		<th scope="row">Clive Lloyd</th>
		<td>410-306-1420</td>
		<td>410-306-5400</td>
		<td>Baltimore</td>
	</tr>
	<tr>
		<td>3.</td>
		<th scope="row">Gordon Greenidge</th>
		<td>281-564-6720</td>
		<td>281-511-6600</td>
		<td>Houston</td>
	</tr>
</table>

DO NOT USE tables for layout!

Keyboard navigation

Navigation and tabindex

  • Menu items should be listed in a correct and natural order, based on menu design levels and hierarchy.
  • Navigation sequence should include all active objects, and the user should not be caught in a "keyboard trap" where they can't get out. This can be overridden by the tabindex attribute:
    • No tabindex: Tabulator is moving sequencial through code from top to bottom. Only default autofocused elements such as links, buttons and input fields are focused.
    • Tabindex = 0: Tabulator is moving sequencial through code from top to bottom. Autofocused elements such as links, buttons and input fields are focused, as well as all elements with tabindex attribute value 0 are focused.
    • Tabindex > 0: Tabulator is moving through elements with tabindex value more than 0, from lowest to highest number, no matter the position in the code.
    • Tabindex < 0: Tabulator skips these elements. You can use -1 as value for all these elements.

Use tabindex with caution. End the prioritized sequence of tabindexes with a object that sits before all other objects with no priority. Code example:

<body>
	<a href="#main-content" tabindex="1">Jump to content</a>
	<a href="index.html"><img src="logo.png" alt="Pingbull – Home page" tabindex="4"></a>
	[...]
	<input type="search" title="Search" tabindex="2">
	<input type="submit" name="Search" tabindex="3">
	[...]
</body>

Keyboard as support aid

When objects are inactive in code, but is activated with JavaScript, this has to be known for the user. As well as using tabindex, you must use the WAI-ARIA attribute role:

<div tabindex="0" role="button">Object with JavaScript function</div>

Text and structure

Design and presentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment