Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Make Word Press (More) Accessible


  • Please log in to reply
5 replies to this topic

#1 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 4628 posts

Posted 31 October 2012 - 01:08 PM

The October 2012 WebAIM (Web Accessibility In Mind) newsletter announces that our Moderator, Joe Dolson, released a new plug-in: WP Accessibility on 22-October-2012.

There’s only so much you can do via a plug-in when it comes to site accessibility — most of what grants accessibility for a WordPress site is in the theme. However, that doesn’t mean that you can’t do anything.
...
here’s what it can do so far:

* Remove redundant title attributes from page lists, category lists, and archive menus.
* Enable skip links with WebKit support by enqueuing JavaScript support for moving keyboard focus.
* Add skip links with user-defined targets.
* Add language and text direction attributes to your HTML attribute
* Remove the target attribute from links.
* Force a search page error when a search is made with an empty text string.
* Remove tabindex from elements that are focusable.
* Strip title attributes from images inserted into content.
* Add post titles to standard “read more” links.
...
At the moment, the plug-in is focused on front-end issues, and does not currently include any administrative improvements.


So, all you WordPress utilisers out there, go plug some accessibility into your sites...

Official WordPress 'WP Accessibility' Plug-in description and download page.

#2 DonnaFontenot

DonnaFontenot

    Peacekeeper Administrator

  • Site Administrators
  • 3821 posts

Posted 31 October 2012 - 01:26 PM

I think we should discuss the various things this plugin does, so we can all understand not only what it does, but why.

I'll start.

One of the configuration options is to remove title attributes from the following (can pick and choose which to remove them from):
  • Nav menus
  • Page lists
  • Category lists
  • Archive links
  • Tag clouds
  • Category links
  • Post edit links
  • Edit comment links
So my first question is...what is the purpose of removing title attributes from these items? Why is the title attribute a bad thing for accessibility reasons?

#3 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 31 October 2012 - 05:47 PM

So, point by point.

1) Removing title attributes.

By default, WordPress adds title attributes to all system-generated links -- navigation menus, lists of posts, etc. These title attributes have exactly the same value as the text of the link -- if the text of the link is "Joe's Blue Widgets", then the title attribute is also "Joe's Blue Widgets". In the best case scenario, where a screen reader is set up to ignore title attributes, having this set makes no difference at all. In the worst case scenario, where a screen reader reads all attributes, it's as described by Kim above: it reads the title attribute and the link text, meaning that every link is, effectively, read twice. This is an enormous cognitive overload that benefits nobody. The purpose of the title attribute is to add context to a link that otherwise does not have sufficient context: but in almost all cases, the WordPress use does not meet that criteria.

2) Skiplinks.

Skiplinks are a means to help users of screenreaders jump from the beginning of a page to another section of the page. Visual users can scan a page quickly to identify the larger sections and skip over large blocks of text or links, but screen readers can't easily do that. Skiplinks provide a means to leap from the very top of a page to an alternate section of that page -- one principle use being to leap over the main navigation to the main page content.

3) Add site language and text direction to HTML element.

Screen readers use the site's declared language to figure out what pronunciation rules to use when reading the content. If no language is declared, then the screen reader will generally use the screen-reader user's installation's language or try to guess: e.g., if a French user of a screen reader visits your page, and no HTML language is declared, it will either read as if the text was written in French, or attempt to guess the actual language and pronunciation. Declaring the actual default language greatly improves comprehension of the text.

4) Remove target attribute from links

Links opened in new windows can break web site flow and disorient users who don't realize they've moved to a new window. Also, it takes away the option of opening in the same window/tab: all browsers have an option to open links in a new tab, few have an option to open in the same tab.

5) Force search error on empty search submission

The default WordPress behavior when a search is submitted with an empty search field is to simply return the main index with no notice at all. This is disorienting and confusing. The plug-in will change this so that the submission of an empty search field will return the same as a search with no results, which makes a great deal more sense in terms of user feedback.

6) Remove tabindex from focusable elements

Many (primarily older) themes had tabindex defined for comment input fields, in particular. Tabindex was an early concept for an accessibility feature for HTML, but was quickly demonstrated to be very problematic. What tabindex does is force keyboard navigation to follow a particular sequence according to the values defined in tabindex attributes. Removing those attributes usually makes keyboard navigation much more linear and predictable. The intention behind tabindex was to create a logical tab sequence when it would otherwise have been unnatural; but in practice, that required absolutely insane amounts of maintenance to use in a real-life web site. This option removes the attribute from standard focusable elements: links and form fields. It does *not* remove it from other fields, because a common technique to grant keyboard focusability to normally non-focusable elements is to define a negative tabindex: this places the element into the focus sequence but does not force it into a particular sequence.

7) Remove title attribute from inserted post images/featured images.

Similar to the title attribute above: WordPress automatically adds the title element to inserted images. This automatically strips it out; which is primarily a labor saver for people who would otherwise be doing this manually.

8) Add post title to "more" links

A common pattern for WordPress in many views is to show an excerpt of your post with a link to read the entire post. By default, this link is just plain text "more" or "continue reading" or an equivalent. This is problematic for accessibility because it means that there are many links on the same page with the same link text: for accessibility, all links should make sense without requiring context, to grant screen readers the ability to scan the page and have information. This plug-in adds the title of the post into this pattern, so that instead of hearing "Continue Reading. Continue Reading. Continue Reading.", the user will hear something like "Continue Reading About The Storm. Continue Reading The Storm Aftermath. Continue Reading Cleaning Up", and be able to pick the article they actually want to read from that set of links.

9) Add outline to elements on keyboard focus.

Many designs do not provide a design for the view of links or other focusable fields when a keyboard user brings focus to that element. This makes it very difficult for visual users who are keyboard dependent to keep track of where they are. A common pattern for this is to change the appearance of the element on keyboard focus; and this item adds an outline. Outline is rarely defined in most designs, so that ensures that the definition by this plug-in will almost always work and be visible; the same can't be said for text decorations like underline, since that may be the default state for links, and therefore would not be a change indicator.

10) Color Contrast Tester

This tool doesn't make any active changes to your web site, but allows you to easily test whether a set of colors you're considering for customization of your site meet the standards set by WCAG 2 for color contrast.

Hmmm. I should make this a blog post.

#4 jonbey

jonbey

    Eyes Like Hawk Moderator

  • Moderators
  • 4410 posts

Posted 31 October 2012 - 05:51 PM

Sounds interesting. Something that has always annoyed me in Wordpress is the titles in images -they are mandatory for some reason. So I sometimes add an alt, a caption and a title. 3 things to describe 1 image. Very annoying. And I have never worked out what description is for on images - no theme i have used ever seems to use it.

#5 AbleReach

AbleReach

    Peacekeeper Administrator

  • Site Administrators
  • 6467 posts

Posted 31 October 2012 - 06:05 PM

All that duplication is frustrating for the listener and it isn't as useful to SEO as it used to be. Notice that the description says "Remove redundant title attributes from page lists, category lists, and archive menus." Where WordPress automatically generates title attributes that are identical to link text, those attributes are only clutter.

Linked text is still noteworthy from a SEO perspective. Instead of parroting linked text in a title attribute, look for ways to include related words near the link. In the text of an article, if you still want to use linked text, make it something that enriches the user experience.

Wow, Joe. You write fast. :)


Edited by cre8pc, 19 August 2013 - 07:12 PM.


#6 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 05 December 2012 - 04:20 PM

For a more detailed reference, I've taken my post in this thread and extended it to include some references for further reading and posted it at http://make.wordpres...ibility-plugin/

Helps people know the specific hows and whys of the plug-in.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users