Accessibility, Part 4: Operable

Broadly speaking this is the principle that your website must be able to be safely navigated for all users. This includes the guideline that your entire website should be accessible by using the keyboard alone. Furthermore, the way your website responds to user input (by keyboard or otherwise) should be predictable, clear and safe. 

This last point refers chiefly to ensuring that any potentially seizure-inducing feature of your site is disabled by default, and users warned before enabling it. This principle also provides guidelines on providing ‘enough time’ for users to complete tasks, but we don’t cover it here.

Keyboard Accessibility (2.1)

Being able to navigate and use your site with only a keyboard is one of the most important aspects of accessibility. Blind users will rely on keyboards almost exclusively, and those with motor disabilities may have difficulty controlling a mouse, and so also rely on keyboard access. Some individuals may have little or no use of their hands, and rely on larger keyboards, mouth sticks, head wands, single-switch, or Sip ‘n’ Puff. 

You can find descriptions of these devices on the WebAIM website, but they all essentially channel user input into keyboard strokes. If your website isn’t accessible by keyboards, then all users relying on these devices will be unable to use your site.

Fortunately, making your theme or plugin keyboard accessible is relatively simple. Here are some key points:

Ensure Your Entire Menu Can Be Accessed by Keyboard

A lot of themes rely on hovering over a menu item to reveal any sub-menus. This is fine, but generally the sub-menu will not appear if the parent menu item has focus (rather than hover). If you duplicate any relevant rules for :hover and apply them to :focus also, this will get you halfway there: the sub-menu items will appear as the user tabs across the menu. However, once the user tabs down to the sub-menu, the parent menu loses focus and the sub-menu disappears. This can be corrected using JavaScript. Details on this and how to provide a non-JavaScript fallback will be covered in the next article of this series.

Don’t “Trap” Users

You do not need to do anything to make ‘native’ form inputs (select, input, radio, etc.) keyboard accessible. However, should any aspect of your page (including form fields) gain focus, it must be possible to move away from it using only a keyboard—otherwise the user is effectively trapped. This is normally default behaviour, so you should just avoid overriding it.

Make Navigating Easy and Clear (2.4)

This guideline has two types of recommendations: make finding where the user currently is obvious, and make getting to where they want to go easier. 

Part of following the recommendations in doing this involves something a lot of themes already do: Have a consistent navigation menu across pages, highlight the current page, and allow users to quickly determine where they are on the site (e.g. with breadcrumbs).

Styling :Focus Properly

A key part of being able to use a keyboard to navigate around a web page is being able to see precisely what has currently got focus. The element which currently has focus should be visibly different, and distinguishable from the rest of the page. For this reason you should avoid outline:none; unless you are going to provide alternative styling:

Focus Order and Tabindex

Another important part of keyboard accessibility is that tabbing behaves predictably and in a natural way. For instance, if the focus is currently a form field, I would expect that the next tab should take me to the next field in that form. If tabbing causes the focus to jump up and down the page erratically, then this will frustrate and disorientate the user.

Avoid using tabindex: The tabindex attribute allows you to alter the order in which elements are reached by tabbing. However, if you followed the advice in article 2 of this series regarding the DOM structure, the tab order should reflect the “natural” order of the page. While tabindex has its uses, these are rare, and its use to ‘patch’ poor site structure can create further issues. The best method is to avoid using tabindex, and instead have your theme produce a logical DOM structure, with CSS used to alter the visual presentation.

Avoid “Read More” or “Continue Reading”

Screen reader users will often jump between links, skipping the text between, and at each link the screen reader will read out “link [link text]”. As such, it’s incredibly unhelpful to such users if they repeatedly hear “link read more”, “link click here” or “link continue reading”. Adding context to the link in this case simply involves providing the post’s title. So instead of “Continue reading”, we have “Continue reading [post title]”.

To do this in a WordPress theme, we simply need to hook onto the excerpt_more filter and append our “continue reading” link:

This gives the “read more” link proper context. However, there are a couple of improvements that can be made.

Firstly, the addition of the article title will typically ruin the aesthetics of the theme and, for sighted users, will be redundant, as the position of the “read more” link in relation to the article title and excerpt will make the context obvious. To get around these problems, we can “hide” the article title, but in a way that screen readers will still read them.

This means we cannot use display:none or visibility:hidden; as screen-readers understand these properties and will ignore the content. Instead we can position the text off-screen or use the clip property:

There are plenty of different examples of “screen reader classes”; this particular one is taken from Bootstrap 3. Next, add the appropriate class to the article title, specifically replacing line 5 above with:

Secondly, while this would give users an indication as to where that link was pointing, they would still have to listen through “link continue reading…” before reaching the post title. Ideally you should put redundant information at the end of the link text, or omit it from the anchor tag entirely, to reduce the time it takes to identify a link. 

Another benefit to screen reader users of not preceding linked text with redundant information is that screen readers will often generate a list of links on a page. If a lot of your links start with the same text, this can make finding a desired link harder—particularly if the link for your contact page is under “H” because it reads “How to contact us”.

Use the <title> Tag Properly

The <title> tag should be used to identify the current location of the user. This is read out by screen readers, and appears in search results and on the screen window and browser tab. To make it easy for users to identify where they are (or what the search has found), this title tag should contain the page’s title and the website name. Ideally the website name should come last, so that people using screen readers do not have to listen to the name of your site on every page load before they hear the page title.

The title tag can be added to a theme with:

To add the site title:

Skip to Content

Typically websites will have a common header and navigation menu which, with the exception of highlighting the user’s current position, will remain exactly the same. Having to tab through all these links, or listen to a screen-reader repeat them on every page load, is tedious and frustrating. Those of us with good (enough) eyesight and motor skills can immediately jump down to the content—and we can make this just as easy for those that don’t.

If you’re in your WordPress admin, and press Tab after the page loads, you’ll notice a link that says Skip to main content appears on the top-left (If you press tab again, a Skip to toolbar link will appear). This link sits at the very top of the page, so that it is the first link that receives focus when tabbing, and the first link of the website read out by a screen-reader. Following that link jumps the user straight to the main content, skipping out all the unnecessary links and site logos in between.

Creating a skip to content is a great way of making your website easier to navigate, and it’s incredibly easy, requiring only a minor bit of HTML and some CSS. 

First the HTML. The link should go at the very top of your page, immediately under the <body> tag. In most themes this will be the header.php file:

The only things to note here are:

  1. The href value, in this case ‘main’. This must match the ID of the element that contains the page’s content.
  2. The class of the link, which we’ll use for styling.

Regarding (1), your loop will then look something like:

and your page templates might look something like:

Now all that remains is to add some styling to the link. 

First, we want the link hidden but not hidden to screen-readers, so we’ll position the link off-screen rather than using display:none (in which case screen-readers ignore it). 

Secondly, when it gains focus we want to make the link obvious, so it is clear that a previously hidden link is now visible and has focus.

Make Navigating Your Site Safe (2.3)

Lastly, be aware that some people are susceptible to photosensitive epileptic seizures. This can be caused by flickering or flashing effects. Last December Jeff Chandler removed a “snow” effect from WP Tavern after a visitor warned him that it could trigger a seizure.

This isn’t limited to seizures—it can trigger migraines or panic attacks in some individuals. Nor is it limited to snow effects—a video, carousel or audio file autoplaying can also trigger these. 

Although this is largely an editor’s decision and as developers it is not our job to prevent auto-play, we can at least discourage it, by disabling it by default. Jeff mentions in his article that he couldn’t find a plugin providing the “snow” effect which visitors themselves could play.

from Tuts+ Code – WordPress http://ift.tt/1Fdf13G

Weekly News for Designers (N.286)


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing weekly articles, resources and freebies.

New Resources & Tools

iconate.js, a tiny performant library for cross-browser icon transformation animations.
iconate.js, a tiny performant library for cross-browser icon transformation animations

SmartIcons, infinite icon system for the modern web.
SmartIcons, infinite icon system for the modern web

Animate-Plus, a performant JavaScript library that helps you animate CSS properties and SVG attributes.
Animate-Plus, a performant JavaScript library that helps you animate CSS properties and SVG attributes

Predawn, a dark interface and syntax theme for Sublime Text and Atom.
Predawn, a dark interface and syntax theme for Sublime Text and Atom

50 CSS and JavaScript Tools, Frameworks and Libraries.
50 CSS and JavaScript Tools, Frameworks and Libraries

20 Useful CSS Snippets for Responsive Menus.
20 Useful CSS Snippets for Responsive Menus

New Learning Resources

Is it time to ditch the pre-processors and start writing real CSS (again)? By Cole Peters.
Is it time to ditch the pre-processors and start writing real CSS (again)? By Cole Peters

Animated Page Transition in Ajax by CodyHouse.
Animated Page Transition in Ajax

Standing Tall in the Face of WordPress Security Scares by Eric Karkovack.
Standing Tall in the Face of WordPress Security Scares

Why 'mobile first' may already be outdated by Paul Adams.
Why 'mobile first' may already be outdated

Absolute vs. Relative Timestamps: When to Use Which.
Absolute vs. Relative Timestamps: When to Use Which

Simplify Your Stylesheets With The Magical CSS Viewport Units by Danny Markov.
Simplify Your Stylesheets With The Magical CSS Viewport Units

Understanding and Manually Improving SVG Optimization.
Understanding and Manually Improving SVG Optimization

After Effects to CSS by Ryan Brownhill.
After Effects to CSS

Free GUI Resources Resources

FiraCode a Free Monospaced font with Programming Ligatures.
FiraCode a Free Monospaced font with Programming Ligatures

30 Free eCommerce Line Icons by Travis Howell.
30 Free eCommerce Line Icons

Gentelella, a free Bootstrap admin template.
Gentelella,  a free Bootstrap admin template

40 High-Resolution and Free Photoshop Brush Packs.
40 High-Resolution and Free Photoshop Brush Packs

You may also like to browse the Weekly News Archives.


The post Weekly News for Designers (N.286) appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine http://ift.tt/1duiYKp

A Walkthrough on Conditional Tags in WordPress: 14 to 26

In this series, we’re going through one of the fundamental features of WordPress: Conditional Tags. In this third part, we’ll continue introducing and reviewing the Conditional Tags. Be sure to check out the previous parts if you haven’t yet.

Let’s begin!

14. Checking Whether We’re on the Front Page: is_front_page()

In WordPress, the “front page” can be set to a static WordPress page or the list of the latest blog posts (Settings > Reading). Either way, the Conditional Tag is_front_page() returns TRUE when the front page is being displayed.

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

15. Checking Whether the Post Has a Thumbnail: has_post_thumbnail()

“Featured images” are one of the key parts of the New Post/Page screen. The Conditional Tag has_post_thumbnail() determines whether there’s an assigned featured image to the given post or not.

Accepted Parameters

This Conditional Tag has only one parameter:

  • $post_id (integer, optional): The post ID. (Default: Current post ID)

Usage Example for has_post_thumbnail()

Let’s say you’re developing a theme and in it, every single blog post needs to have a “featured image”, so you want to display a “default image” if no featured image is set. Here’s what you do:

16. Checking Whether the Theme Is Using the “Comments Popup”: is_comments_popup()

You shouldn’t judge anyone who uses a 10-year-old theme—or loves retro. If you’re developing a plugin, you need to take everything into account, and that includes themes that use the comments popup window. To determine this, you can use the Conditional Tag is_comments_popup().

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

17. Checking Whether the Page Is a 404 Error Page: is_404()

The “Not Found” error pages are usually the ones we hate to see in our websites, and thus we don’t really care how they look. But when you use these error pages correctly, you can turn them into useful pages that inform your users or help them navigate. The Conditional Tag is_404() helps us determine whether a 404 error is being displayed to the user.

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

Usage Example for is_404()

Let’s say you’re developing a plugin that logs broken internal links, and you want your function to run each time a 404 error page is viewed. Here’s what you do:

18. Checking Whether the Given Taxonomy Exists: taxonomy_exists()

If you ever need to check whether a custom taxonomy is already registered, you can use the taxonomy_exists() Conditional Tag to make your code determine it.

Accepted Parameters

This Conditional Tag has only one parameter:

  • $taxonomy (string, required): Taxonomy’s name. (Default: None)

19. Checking Whether the Page Is the “Search Results” Page: is_search()

While being a little underrated, “Search Results” pages are an important part of WordPress websites. And if you’re developing a plugin or a theme, you can detect these pages with the help of the is_search() Conditional Tag.

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

Usage Example for is_search()

Let’s say you want to include a link for a Google search with the same terms. Here’s what you do:

20. Checking Whether the Page Is a “Tag Archives” Page: is_tag()

Want to treat tag archives differently? The Conditional Tag is_tag() can help you with that. Want to treat specific tags differently? Just pass a tag name, slug or ID (or an array of those) as the parameter!

Accepted Parameters

This Conditional Tag has only one parameter:

  • $tag (array/string, optional): Tag’s ID, name, slug or an array of those. (Default: None)

21. Checking Whether the Post Has a Custom Excerpt: has_excerpt()

There are two kinds of “excerpts” in WordPress posts: If you want to write one yourself, it’s called a “custom excerpt”, and if you don’t, an “automatic excerpt” is generated (by default, it’s the first 55 words of the post). The has_excerpt() Conditional Tag checks whether the user set a custom excerpt for the given post.

Accepted Parameters

This Conditional Tag has only one parameter:

  • $post_id (integer, optional): The post ID. (Default: Current post ID)

Usage Example for has_excerpt()

Let’s say you’re making a theme and you want to display custom excerpts in the homepage, but you don’t want to display automatic excerpts. Here’s what you do:

22. Checking Whether It’s the Main Query: is_main_query()

WordPress uses the WP_Query class to list posts—whether it be just a list of post titles or the index of full posts in an archive page. A number of functions use the WP_Query class, and is_main_query() is one of them. This Conditional Tag detects whether the query is not a “secondary query”, but the “main query”.

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

23. Checking Whether the Post Has the Given Tag: has_tag()

Sometimes, you may need to check if a post has some tag to make the post (or posts) act differently than others. To achieve this, you can use has_tag() to check whether a post is tagged with the tag you specify. (Note: It allows you to specify more than one tag to look for.)

Accepted Parameters

This Conditional Tag has two parameters:

  • $tag (array/string, optional): Tag’s name, ID, slug, or an array of those. (Default: None)
  • $post (object, optional): Post to check. (Default: Current post)

Usage Example for has_tag()

Let’s say you have “badges” for your blog posts (like “NEW”, “FEATURED” and “OBSOLETE”) that are going to be activated by using corresponding tags, and you want to echo the images inside posts. Here’s what you do:

24. Checking Whether the Blog Is Installed (?): is_blog_installed()

This particular Conditional Tag returns TRUE if WordPress is installed. I’m including this Conditional Tag just for reference, because technically it can’t be useful for plugin or theme developers—it could be used in some external WordPress tool, maybe.

Accepted Parameters

This Conditional Tag doesn’t accept any parameters.

25. Checking Whether the User Is a “Super Admin”: is_super_admin()

In a Multisite network, there is a “super admin” which can administer all the sites. To detect if the user is a “super admin” (or a regular admin in regular WordPress installations), you can use the is_super_admin() Conditional Tag.

Accepted Parameters

This Conditional Tag has only one parameter:

  • $user_id (integer, optional): User’s ID. (Default: Current user)

Usage Example for is_super_admin()

Let’s say you don’t like the “Howdy” greeting and you want to change it, but your users like it and want it to stay. In that case, you need a solution to apply to you only. Here’s what you do:

26. Checking Whether the Page Is a “Page” Page: is_page()

In WordPress, “pages” are one of the five built-in post types along with posts, revisions, attachments and navigation menus. And if you want to detect a certain page (or any page in general), you can use the Conditional Tag is_page().

Accepted Parameters

This Conditional Tag has only one parameter:

  • $page (array/string, optional): Page ID, title, slug or an array of those. (Default: None)

Conclusion

In this part, we reviewed another batch of the 65 documented Conditional Tags in WordPress. In the next parts, we’re going to go through the remaining 39. If you have any questions or comments, shoot them below—and if you liked this article, don’t forget to share it!

See you in the next part!

from Tuts+ Code – WordPress http://ift.tt/1Q4rGuU