Web Standards, Semantic, Accessibility, and Usability Checklist

May 17, 2009 – 14:51 by Dani Iswara. Words count: 484.
Last updated: Thursday, October 29, 2009 at 12:45.

Remember, I am not a web developer nor designer. As a user with limited bandwidth, I found web standards, semantic, accessibility, and usability are very useful. Its basic checklist will help universal access.

Some of web developers and designers usually build and check their project simultaneously. Writing codes, cross-browsers compatibility checking, functionality testing, and so on. Not always in an order.

  1. Web Standards

    1. Use (X)HTML (Extensible HyperText Markup Language), CSS (Cascading Style Sheets; for desktop/screen, mobile/small screen, and print media), and Javascript separately (separating content and presentation).
    2. Prefer to use strict DOCTYPE. Or, no inline style/CSS anymore.
    3. Recommended: try to validate the (X)HTML and CSS by W3C (World Wide Web Consortium). If you are really-really sure with your work, leave it! :)

  2. Semantic

    1. Use metadata properly.
    2. Well structured codes.
      Use h1-h6 in a logical order. Put ordered/unordered list and other semantic markup (<strong>, <emphasis>) properly.
    3. It should be only one unique <h1> –as title– on each web pages.
    4. Try to use only necessary <div>s, <span>s, classes and ids.
    5. Recommended: check it using Semantic Data Extractor by W3C and Raven SEO Tools.

  3. Accessibility

    1. Works on common web browsers (desktop, mobile, text browser) with or without CSS.
    2. Works on screen readers/aural agents/speech browsers. Especially on navigation menu, data tables, images, forms, and dynamic content (animation/flash, audio, video).
    3. Works for low-speed and low-bandwidth Internet users. Aware of speed and page size.
    4. Has a print mode style.
    5. Works on multi-size window/screen.
    6. Has a visible skip menus.
    7. Sufficient colour contrast.
    8. Still accessible on disable images and javascript. Use alt attribute properly (in bahasa Indonesia).
    9. Descriptive anchor text.
    10. No broken links.
    11. Zooming/scaling font size will not break the layout. Use relative font sizes and width.
    12. Accessible tabbing with keyboard only (no mouse).
    13. Recommended: check it against ATRC Web Checker (under development; based on Web Content Accessibility Guidelines [WCAG] 2.0) and Colour Contrast Analyzer tool. Or you can try WAVE (Web Accessibility Evaluation Tool) and Web Content Accessibility Report by HiSoftware Chynthia Says, based on WCAG 1.0 and Section 508.

  4. Usability

    1. Use friendly URIs. Shorter is better. But, maybe your search engine friendly URL (Uniform Resource Locator) is not usable on SERPs.
    2. Has a favicon.
    3. Has usable page/post title format such as ‘Post/Page Title | Blog Title‘.
    4. Easy and consistent navigation.
    5. Has a search tool for a large sites.
    6. Important menu such as ‘Home’, ‘About’, ‘Contact’, and ‘Archives’/'Sitemap’ are easy to find.
    7. Links (static, hover, focus, visited) clearly defined. Not depend on color only. Underlined perhaps better.
    8. Content’s topic is clearly defined by its description, categories, and/or tags.
    9. Reading order is logical.
    10. Has usable 404 error page.

Then, the rest, you may add some Search Engine Optimization (SEO) features if needed:

  • Legal 301 redirect using .htaccess.
  • Use robots meta tag or robots.txt safely.
  • Canonical URL setting.

This checklist compiled from these sources:

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: Web Accessibility, Web Standards, Web Usability
Tags: , , , ,
5 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Web Standards, Semantic, Accessibility, and Usability Checklist by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

5 Responses to post titled: Web Standards, Semantic, Accessibility, and Usability Checklist

  1. Comment by nomercy on May 20, 2009 at 19:18:49
    using NetSurf 1.2 on GNU/Linux

    thanks infonya mas … izin dijadiin pdf ya, buat baca offline ntar …

  2. Comment by Dani Iswara on May 20, 2009 at 22:56:23
    using Mozilla Firefox 3.0.10 on Gentoo Linux

    nomercy,
    tulisan ini memang blm ada pdf-nya..rencananya akan diedit dl..css print-nya juga sedang saya edit lagi, pak :)
    kalo ada cups-pdf, silakan..

  3. Comment by uwiuw on May 21, 2009 at 13:14:21
    using Mozilla Firefox 3.0.10 on Windows XP

    wah dan, daftar yg panjang dan hampir mustahil diikuti hehehehe becanda denk. cuma agak stuck pada bagian accesibilitynya. Terutama bagian web dioperasikan menggunakan keyboard (WGAC 2.2.1). definisinya bagaimana yah ?

    tanda suskes implementasi ini apa yah ? sampai hari ini bingung soal ini.

  4. Comment by Dani Iswara on May 21, 2009 at 14:15:01
    using Mozilla Firefox 3.0.10 on Gentoo Linux

    uwiuw,
    walau ngga harus ideal seperti itu, kayaknya urutan itu ada yang saling terkait dengan basic di urutan atasnya.. :)

    maksudnya WCAG 2.1.1. Keyboard ya (bukan 2.2.1)..
    How to meet 2.1.1 mungkin links-nya blm lengkap.
    Understanding success criterion 2.1.1 dah lebih detail penjelasannya. :)

    kalo ngga salah, itu berhubungan dengan teknik html (form control & links) dan scripting (mis. focus, keypress) sehingga jika dengan bantuan keyboard pun (tanpa mouse), pengguna bisa memakai fitur web dengan nyaman. cmiiw

Trackbacks/Pingbacks

  1. Pingback by Songket WordPress Theme Review - Dani Iswara .Net on May 30, 2009 at 01:01:25
    using WordPress abc

    [...] I will not be doing manual review for a theme which is not valid (X)HTML (Extensible HyperText Markup Language) and CSS (Cascading Style Sheets) by W3C (World Wide Web Consortium). At least, theme authors should try some online validators and checkers first. Or try my simple chekclist on web standards, semantic, accessibility, and usability. [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Opera-Browser Evangelist Perspective
‹‹ Newer entries: Secure Medical Data Hacked