A Brief Introduction to WordPress and Web Accessibility


by Michael Pastore


Version 1.0

updated: 12 May 2005


Note:

Please inform me of any errors, questions, or useful additions related to this page.

Contact me by email at:
ebooks AT despammed.com

  1. What is WordPress?
  2. What is web accessibility?
  3. How do visually impaired persons (blindness, low vision, color-blindness) use the web?
  4. What are the benefits of accessibility?
  5. How does accessibility relate to XHTML and CSS (Cascading Style Sheets)?
  6. What is TIDY?
  7. How can I validate my site for XHTML ?
  8. How can I validate my site for CSS (Cascading Style Sheets) ?
  9. How can I check my site for broken links?
  10. What guidelines need to be considered when designing websites that are accessible?
  11. What is WCAG?
  12. What is Section 508?
  13. How can I test my site for compliance with WCAG and Section 508?
  14. What is a useful browser tool helping you to test your site?
  15. After testing with WebXACT, how can I find out the line numbers of my web page’s code? (lines code from verbose XHTML page)
  16. What is an efficient method for meeting the requirements of section 508 and WCAG Priority 1 Guidelines?
  17. How can I meet the “alt” image checkpoint?
  18. What does the “Skip Navigation link” mean?
  19. What is “tabindex” ?
  20. How can I fix my forms and search boxes to meet accessibility requirements? (“add label for”)
  21. What can I do about the “plug-in required” error (Section 8 part m) that shows up after testing with Watchfire WebXACT?
  22. Where can I find additional (and free) resources for learning more about website accessibility?

1. What is WordPress?


WordPress is a free publishing platform lets you create and publish your own blog.


From the WordPress website, www.wordpress.org


“WordPress is a state-of-the-art semantic personal publishing platform with a focus on aesthetics, web standards, and usability. What a mouthful. WordPress is both free and priceless at the same time.”


“More simply, WordPress is what you use when you want to work with your blogging software, not fight it.”


2. What is web accessibility?


Accessibility – used in the context of persons with disabilities – means making things accessible – able to be used – to disabled persons. Thus, a wooden ramp and a large doorway allows a wheelchair to roll easily into a home or office.


Related to technology, accessibility may involve a number of systems:

–Software applications and operating systems (508 section 1194.21)

–Web-based intranet and internet information applications (508 section 1194.22)

–Telecommunications products (508 section 1194.23)

–Video or multimedia products (508 section 1194.24)

–Self-contained closed products (508 section 1194.25)

–Desktop and laptop computers (508 section 1194.26)


This Brief Introduction will address these 1194.22 guidelines (accessibility of websites), and cover WCAG (primarily, Priority 1), and Section 508 part 1194.22 – all 16 requirements (a through p).


A Glossary of Accessibility terms can be found here:

http://webxact3.watchfire.com/themes/standard-en-us/help/glossary.html#wp89036


An Index of Accessibility information can be found here:

http://webxact3.watchfire.com/themes/standard-en-us/help/BobbyServerIX.html#wp158093


3. How do visually impaired persons (blindness, low vision, color-blindness) use the web?


Various conditions make it difficult or impossible for disabled persons to use the Internet. (The list immediately below is from Wikipedia.org)

 –Cognitive disabilities, such as dyslexia, ADHD or autism.

 –Complete or partial blindness, including color blindness.

–Hearing impairment.

–Motor or dexterity disability such as paralysis, cerebral palsy, or carpal tunnel syndrome.

–Impairments due to old age.


The most common is visual impairment. Visually impaired users might use the web just like the rest of us – with no additional hardware or software; or they might use tools such as screen magnifiers, style sheet switchers, screenreaders such as JAWS, braille output, a modified keyboard, software that reverses the colors to give white lettering on a black background, a modified keyboard with no mouse, a trackball mouse, a system that allows control of the web browser by speech, or the Opera broswer, with a number of features designed for diasbled users.


4. What are the Benefits of Accessibility?


The United States law requires that websites managed by government organizations and non-profits are made accessible A recent news article suggested that it might become law for private websites that receive government funding.


Here’s how the W3C answers this question:

http://www.w3.org/WAI/intro/accessibility#important


There are many other benefits of an accessible website. In his book “Designing With Web Standards”, Jeffrey Zeldman says that it is not true that accessibility is “just for disabled people.” Zeldman says that an accessible sites have these advantages:

–Usable by non-traditional browsing devices such as PDAs and cell-phones, or website-enabled kiosks

–People with temporary injuries

–People who have minor vision problems, including senior citizens


Zeldman claims that another advantage is that an accessible site will get more hits from search engines.


5. How does accessibility relate to XHTML and CSS (Cascading Style Sheets)?


Writing standards-compliant XHTML and CSS are the first steps to creating an accessible website.


6. What is TIDY?


TIDY is a free tool developed by Dave Raggett that will help you to fix your XHTML pages so that they meet the W3C standards. More about TIDY can be found here:


http://tidy.sourceforge.net/


Tidy is included in the excellent XHTML editor, HTML-Kit:

http://www.chami.com/html-kit/


7. How can I validate my site for XHTML ?


One of the many, many superb features of WordPress is that the themes – most of the themes that I have seeen – come very close to XHTML and CSS compliance right out of the box. The few tweaks needed can be found by testing your site with TIDY, and then with the W3C XHTML validator.


The W3C XHTML validator is here:

http://validator.w3.org/


Most WordPress themes include this link on your blog home page.


8. How can I validate my site for CSS (Cascading Style Sheets) ?


Use the W3C CSS validator at

http://jigsaw.w3.org/css-validator/


Most WordPress themes include this link on your blog home page.


9. How can I check my site for broken links?



Check your site for broken links at: http://validator.w3.org/checklink


10. What guidelines need to be considered when designing websites that are accessible?


Developers who want to make their websites accessible need to think about two sets of standards: WCAG and (in the USA) Section 508.



11. What is WCAG?


WCAG stands for Web Content Accessibility Guidelines, officially released as version 1.0 in May 1999 by the Web Accessibility Initiative (WAI), a working group of the W3C.


The guidelines fall into three categories:

--Priority 1 Guidelines – website developers MUST meet these requirements)

--Priority 2 Guidelines – website developers SHOULD meet these requirements), and

--Priority 3 Guidelines – website developers MAY meet these requirements)


WCAG Guidelines are version 1.0; a version 2.0 is in the works, but has not been officially approved.


12. What is Section 508?


The U.S. Government requires that certain websites meet accessibility standards. The details of these requirements are written in “Section 508" of the Rehabilitation Act. For complete information about Section 508, see http://www.section508.gov/



13. How Can I test for compliance with WCAG and Section 508?


The well-known Bobby, as of May 1, 2005, has been replaced by Watchfire’s WebXACT:

 

WebXACT

http://webxact.watchfire.com/


Another testing site is Cynthia Says:

http://www.contentquality.com/Default.asp


14. What is a useful browser tool helping you to test your site?


Web Developer Toolbar (by Chris Pederick) attaches itself to your Firefox browser; its many features help you to evaluate your site. It’s free, and located here:

http://chrispederick.com/work/firefox/webdeveloper/



15. After testing with WebXACT, how can I find out the line numbers of my web page’s code?


Don’t do what I did: view your source code, and then start counting down the lines – well past 500 lines of code!


First, go back to the W3C XHTML validator. After getting your page XHTML compliant, use the EXTENDED INTERFACE, and then check on the boxes that say: SHOW SOURCE and VERBOSE OUTPUT. And then click the button that says: “Validate This Page”.


Your home page’s source code will now be revealed, complete with the all-important line numbers.


16. What is an efficient method for meeting the requirements of section 508 and WCAG Priority 1 Guidelines?


The simplest way to make your site accessible is to first meet the WCAG Priority 1 Guidelines – which overlap with many of the 508 guidelines – and then add the five (5) guidelines in Section 508 that are not covered by WCAG Priority 1.


The chart below is based on “Checklist of Checkpoints for Web Accessibility Guidelines” from the WCAG: http://www.w3.org/TR/WCAG10/full-checklist.html and Web Aim at http://www.webaim.org and also the excellent work by Jim Thatcher at http://www.JimThatcher.com . (This chart was inspired by Jim Thatcher’s pages). A number of other websites were consulted, including the US Government 508 Website located at: http://www.section508.gov/ .


Checklist of Checkpoints for WCAG (Priority 1) and Section 508

Checkpoints In General (Priority 1) – WCAG

Compares to 508

Y

N

n/a

    * 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

1194.22 (a)

 

 

 

    * 2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

1194.22 ©)

 

 

 

    * 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).

Not covered by 508

 

 

 

    * 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

1194.22 (d)

 

 

 

    * 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes.

Not covered by 508

 

 

 

    * 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker.

1194.22 (j)

(flicker frequency must not be > 2 Hz or lower than 55 Hz)

 

 

 

    * 14.1 Use the clearest and simplest language appropriate for a site's content.

Not covered in 508

 

 

 

 

 

 

 

 

And if you use images and image maps (Priority 1)

    * 1.2 Provide redundant text links for each active region of a server-side image map.

1194.22 (e)

 

 

 

    * 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

1194.22 (f)

 

 

 

 

 

 

 

 

And if you use tables (Priority 1)

    * 5.1 For data tables, identify row and column headers.

1194.22 (g)

 

 

 

    * 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

1194.22 (h)

 

 

 

 

 

 

 

 

And if you use frames (Priority 1)

    * 12.1 Title each frame to facilitate frame identification and navigation.

1194.22 (I)

 

 

 

 

 

 

 

 

And if you use applets and scripts (Priority 1)

    * 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.

1194.22 (l)

 

 

 

 

 

 

 

 

And if you use multimedia (Priority 1)

    * 1.3 Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation.

Not covered in 508

 

 

 

    * 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.

1194.22 (b)

 

 

 

 

 

 

 

 

And if all else fails (Priority 1)

 

 

 

 

    * 11.4 If, after best efforts, you cannot create an accessible page, provide a link to an alternative page that uses W3C technologies, is accessible, has equivalent information (or functionality), and is updated as often as the inaccessible (original) page.

1194.22 (k)

 

 

 

 

 

 

 

 

Additional 508 Guidelines Needed to Meet 508 Requirements

                                                508 Guideline

Compares to WCAG

Y

N

n/a

1194.22 (l) Scripting. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

6.3, 6.4, 8.1, 9.3

 

 

 

1194.22 (m) Applets and plug-ins. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21 (a) through (l)

6.3, 6.4, 8.1

 

 

 

1194.22 (n) Forms. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

9.3, 10.2, 12.4

 

 

 

1194.22 (o) Skip Navigation. A method shall be provided that permits users to skip repetitive navigation links.

13.5, 13.6

 

 

 

1194.22 (p) Timed Responses.. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time required.

not addressed in WCAG

 

 

 



17. How can I meet the “alt” image checkpoint?


Just add the “alt” to all your images:


<img src="/button.png" alt="RSS button" />


18. What does the “Skip Navigation link” mean?


Imagine yourself as a disabled user, who is using a screen reader to read the page. The reader reads everything: all your page’s links. When this visitor returns to your home page, it is more than likely that he or she will have no interest in listening to the list of all your links. He/she probably wants to go directly to your content.


You can allow this to happen by including a “skip navigation” link near the top of your page. You can make this invisible, too, so that it doesn’t annoy or confuse the non-disabled users.


For an example, see my Youthtopia http://www.youthtopia.com


Move your mouse to the first small “Home” link, then slide your mouse to the left. You should see the cursor change to the “skip navigation” link. Click it, and then you will jump down to the Main content.


The user who is using a screen reader will hear the reader say “Skip Navigation”, and have the options to skip the top navigation bar that says Home ... Sitemap ... Institute ... Contact ... About.


19. What is “tabindex” ?


By setting up the tabindex feature on a web page, the author of the web page assigns an order to his links. The user can then access these links – in that precise order – by simply pressing the “Tab” key on his/her keyboard. Users using some screen readers can do this with verbal commands.



Setting up your site for the tab index feature is simple. First prioritize your links. Then, into the code of every link, add the tabindex attribute, and the number that you’ve chosen. Here is an example from my site:


<a href="#maincontent" class="skip" tabindex="1">Skip Navigation</a>&loz; &loz;</span>

<a href="http://www.youthtopia.com" title="Return to Our Home Page" tabindex="2">Home</a>

 <a href="http://www.youthtopia.net/acontent/sitemap.html" title="Site Map (an index of files on the site)" tabindex="3">SiteMap</a> <span class="colorwhite">


Pressing the Tab key on the keyboard, the user fill first go to the link “Skip Navigation”, and then to the link for “Home”, and then to the link for Site Map, and so on.


20. How can I fix my forms and search boxes to meet accessibility requirements?


This requirement can be met by adding the <label for=”sameAsId”> tag to your search box code.

The text in quotes after the “for” needs to be the same as the text in your id tag.


Here’s my SEARCH BOX code that explains this by example:

Adding the attribute  


<form style="padding: 0px; margin-top: 0px; margin-bottom: 0px;" id="searchform" method="get" action="yourSiteurl.com">

<p style="padding: 0px; margin-top: 0px; margin-bottom: 0px;">

<!-- <h2 class="sidebar-title"><label for="search">Search</label></h2> -->

<label for="search">Search</label>

<input type="text" class="input" name="s" id="search" alt="Search" size="15" />

<input name="submit" type="submit" tabindex="7" value="GO" /></p>

</form>


21. What can I do about the “plug-in required” error (Section 508 part m) that shows up after testing with WebXACT?


The 508 (m) the guideline states that a plugin is needed to read something on your page – for example, for PDFs or multimedia files.


After many frustrating hours trying to get my site to comply with 508 section (m), I realized that the validator software WebXACT had a bug, which I reported to their courteous staff. Yes, there is a bug in the WebXACT in this area.


22. Where can I find additional (and free) resources for learning more about website accessibility?


There are so many superb resources for learning more about accessibility. Here are the links that I’ve found:

http://del.icio.us/youthtopia/accessibility