accessibility – computeraxe

Book Review: WP Theme Development Beginner’s Guide

Outside temperatures were scorching this past week, so it was a great time to stay inside, avoid the heat, and pick up a new book. As promised here’s my review of “WordPress Theme Development – Beginner’s Guide, Third Edition” by Rachel McCollin and Tessa Blakeley Silver published by Packt Publishing. I was happy for having taken the time to read the book as I picked up a couple of tips.

WordPress Theme Development, 3rd edition

The language is a little wordy in places and sometimes extra commas interrupted the flow of reading, but overall the information in Chapter 1 filled the reader in on the basic technologies required for getting into WordPress theme development.

Two dozen links to external sources highlighted the breadth of technologies that must work together in creating beautiful WordPress sites. An appendix listing the required technologies and the many suggested external sources of information would have been helpful to the beginning theme developer.

Several links had to be copied and pasted as the hyperlinks in the PDF version of the book spanned more than one line and thus were broken when clicking directly. Still, the extraneous material found via these links were useful in understanding the material introduced in the first chapter.

If you’re familiar with using WordPress and CSS, and especially if you have at least some experience in installing WP and using a local server, Chapter 1 can be skimmed over as you’re most likely up to speed on this introductory material.

Chapter 2 is all about preparing a design for your theme using HTML5 and CSS3 to create a responsive design that is accessible to all and valid with respect to current Web standards.

I liked the approach of setting up the typography first before adding graphics and layout specifics as it helps to attain the desired ‘look and feel’ of the site. The emphasis placed on using ems as the units for font sizes is a good design practice.

Media queries are covered with respect to the CSS additions needed in order to create a responsive Web page design that will be seen in the best light independent of the size of the user’s screen. It would have been helpful to the reader to have a more complete description of each “version” of the site targeted by each media query instead of relying on a figure on page 30 that shows large, medium and small screen versions of the site.

The format of book is helpful in pushing the reader to take action, especially with the “Time for Action” headings that specify actions for the reader to take and the ensuing explanations under the “What just happened?” headings. Pop quizzes at the end of each chapter help the reader cement their new knowledge, too.

Chapter 3 addresses how to take an existing design and convert it into PHP and WordPress template files in order to create a functional theme. It covers how WordPress works and shows the flexibility of WordPress in using templates that present content in meaningful ways. The reader can follow the code examples and create their own working WordPress theme by the end of this chapter.

A general failing of the book is that graphics are not labeled, numbered or captioned in a meaningful way. For example, page 75 illustrates the template hierarchy rules that WordPress uses to display content and page 77 illustrates “the loop” (the same figure is repeated on page 86). Neither of these graphics that detail important WordPress concepts are identified with a caption. If they were, the figures could be identified in a separate table of contents so the reader could easily find the book’s illustrations for future reference.

Instead of relying on the figures or graphics to explain a topic, it would benefit the reader to have written text do the explaining. However, links are provided to the WordPress Codex where these concepts are described in detail. By not having descriptive text illustrate what’s important in each and every figure or screenshot, the text risks alienating people using assistive technologies. Screen readers will not be able to look at a figure and interpret it for the listener. Indeed, are well-sighted people interpreting the figure correctly? Text on the page should spell out the important bits so no one has to assume anything. I feel this is an area that PacktPub needs to improve upon greatly.

The text is interspersed with notes that share more information about topics that are introduced but not fully explained. Links to the WordPress Codex and other developer Web sites will be very helpful for readers who are just getting started with WordPress.

Chapter 4 briefly reviews some of the more important settings for WordPress sites that can be changed via the admin dashboard and how to call up those settings using templates and/or functions. It goes on to discuss advanced theme options and does a good job of introducing topics like using menus, featured images, sidebars and widgets in a WP theme.

Sidebars and footers are often the placeholders for widgets on WordPress sites. The theme created by following this book is a widget-ready theme. The process of identifying the areas that may be used to display widgets is called registering widgets, which must be done before specifying what content the widgets will contain. Making a theme to be widget-ready makes use of the functions.php file and the necessary steps to make it so are explained well.

The content in Chapter 5 concerning validation, debugging and browser differences, and the suggestion to validate early and often in theme development, was truly appreciated. Tools are highlighted that will make this job much easier for the budding theme creator. Steps are spelled out for creating an Internet Explorer-specific stylesheet, which is a great way to handle the different and bewildering ways that IE likes to render Web pages.

Chapter 6 reviews the steps to be followed for sharing your theme with other WordPress users, including creating a screenshot for inclusion in the theme package, packaging up your theme, and providing a proper license for your theme should you decide to share it.

Conditional tags and custom page templates are covered in Chapter 7. Steps are laid out for adding the Theme Customizer function to your theme which can be very helpful for other users of your theme. Tips are shared on how to handle SEO topics for your theme, such as using bloginfo() for pulling in site-specific information regardless of the site using the theme. The advanced tips shared in the last two chapters are important for creating a beautiful theme that just works.

Overall, I recommend this book to anyone unfamiliar with creating themes for WordPress. The language is understandable to a complete newbie and enough links to background or explanatory information are offered to get a new theme designer up-to-speed. By reading through this book and following along with the code examples, one can create their own WordPress theme in a timely fashion.

For those users who are familiar with creating WordPress themes the book, “WordPress Theme Development Beginner’s Guide, Third Edition” is still helpful by providing some advanced tips and tricks in creating WordPress themes.

Section 508 Standards Improve Site Accessibility

Interested in improving site accessibility for all site visitors? The section 508 standards were written to assure that everybody can see your site, including people with vision and cognitive disabilities. Once you’re familiar with these standards, it’s not too hard to abide them. Why wouldn’t we want to have the broadest audience possible anyway?

What are these 508 standards and why do they exist? The United States Federal government put out an edict – ok it’s a law – that states that any federal website must be created in such a way as to allow everyone to “see” it or otherwise consume the information.

The main idea was to make sure to include folks with disabilities who might use alternative means of navigating the Web and to assure that anyone and everyone has equal access to the government. Every web page created by the federal government is checked against the following standards for compliance before being published.

Here are some suggestions on how to meet the standards (a – p) of Section 508 of the Rehabilitation Act, §1194.22. Be aware that the standards have been paraphrased for the most part and that this is only one interpretation on how to meet these standards.

Section 508 standards and how to meet them

a. Provide a text equivalent for every non-text element.: Use the alt attribute for every image or embedded media to explain what the media is portraying. Complex graphics may require a link to a new page for full explanation. Images that allow for interactivity must have their functionality explained, too. Audio content needs to be captioned or have transcripts provided. Graphics used for decoration, like borders or background color gradients, can have empty alt tags.
b. Multimedia presentations need to have their captions or transcripts synchronized with the presentation.: Videos without audio tracks should have audio descriptions created. Caption synchronizing can be accomplished with any media player using MAGpie, the “original free caption- and audio-description authoring tool for making multimedia accessible to persons with sensory disabilities.” It can also be used to create caption files for YouTube videos.
c. Information that is communicated with color must also be communicated without color.: Color cannot be the only means of communicating information. People who are color blind may not see links if they’re not underlined or highlighted in some other way. Contrast must be high in order for others to see the message.
d. Webpages need to be readable on their own, as if the stylesheet was missing.: Even though most web pages would look very plain without their associated stylesheet, they should be organized so that they’re readable without the stylesheet.
e. Text links should be provided for each active region of server-side image maps.: Use client-side image maps instead of server-side image maps. Each active region should be described in alternative means.
f. Client-side image maps should be used instead of server-side image maps except where the regions cannot be defined with an available geometric shape.: Use client-side image maps instead of server-side image maps. Each active region should be described in accessible text.
g. Data tables need to have row and column headers described.: Use <th> in data tables. Don’t use tables for layout purposes.
h. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.: Use the scope attribute to tell the browser or screen reader that everything under a column heading is associated with that column or that everything to the right of a row header is associated with that row. Complex tables should use ids or headers. Avoid spanned rows and columns and instead present the data in more simple terms.
i. Frames should have text for identification to describe the navigation.: If you can’t avoid the use of frames, make sure they have descriptive titles.
j. Assure that images do not flicker at a frequency greater than 2 Hz and lower than 55 Hz.: Avoid using flickering images.
k. If there is no way to provide accessible or alternative content for your message, a text-only page must be provided.: Keep things simple, but if that’s not possible make available text-only pages. Keep each text-only page up-to-date.
l. When using scripts to display content or create interface elements, assure that the same information is provided via functional text that can be read by assistive technologies.: This is going to require some thought for every instance of jQuery or other javascript components on a page.
m. When a web page requires a plug-in to interpret the page content, an accessible link for downloading each plug-in must be provided.: Download links must be provided for the plug-ins required to read PDFs or to view Java applets, for example.
n. Help people using assistive technologies to fill out your online forms.: Use <label> tags with the for attribute for each element of a form. Use descriptive titles and provide instructions on how to properly fill out the form.
o. A method should be provided that allows users to skip a series of navigation links.: Use skip links to let users pass the navigation menu and go directly to the content. A skip link is a link at the top of the page that plainly states that it ‘skips navigation’ or ‘skips the link list’ and jumps the reader to an anchor at the beginning of the content.
p. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.: Allow the user to have control over the timing of inputs.

So, the bottom line is to keep things simple. Use text to describe things on the page and to identify things that aren’t text. Be careful with scripting actions so that information is accessible to all.

In an effort to improve the status quo I’ll be taking a look at all my web properties with an eye for improving their accessibility. Do you have any hints on how you’ve accomplished the same?

Site Accessibility Resources and Tools

The accessibility of a website must be directly proportional to the percentage of viewers who can actually see, read or hear the content. After all, if people can’t observe it, how are they going to get your message?

Since web developers don’t need to adapt the coding of sites for the majority of us to see the content, it may not come natural to them to include those who do need special consideration. It does take a little bit of extra time and thought to accommodate – or dare I say be helpful to – people with vision difficulties or those who use screen readers to use the Internet.

To get an idea if your sites pass muster, visit the accessibility links below for a little help.

Links for Accessibility

HERA accessibility testing provides reports that show exactly where a site should be improved. If any errors are found when your site is scanned, they’re clearly highlighted so that you can take corrective action. A really helpful part is the ‘Navigate by guidelines’ feature, where results are categorized by the accessibility guidelines. Stepping through the results under each guideline will show you exactly which parts of your site aren’t accessible, and it will help you learn more about the guidelines.

WAVE Accessibility test shows icons on the test results page where the guidelines weren’t met. Icons were extremely helpful in determining what parts of the page weren’t up to snuff. One feature to highlight is the ‘disable styles’ button in the upper right of the results screen. Click that button to see your site without style sheets applied. If your content can be read without too much trouble, then it’s probably ok.

Readability test provides results of three algorithms in judging the readability of text on the page. If your site deals with a technical subject, or if your content is too complex for the average Joe to easily understand, your site may not fair well on the readability tests. Keep in mind that Joe Public only reads at an 8th grade level. Sad, but true :(.

CSS Analyzer won’t give output until all CSS errors are corrected. It’s just not possible at this stage with WordPress sites due to partial implementation of HTML5.

UI Test Enter your URL at Site Test for handy direct links to accessibility and validation checkers. Very helpful when modifying a page to meet accessibility guidelines.

The guidelines we’re talking about are the Web Content Accessibility Guidelines (WCAG) and the portion of U.S. Law for Section 508 which requires that information technology is accessible to people with disabilities, at least in federal agencies.