WordCamp Albuquerque included a Happiness Bar stocked with Automattic Happiness Engineers. I went in with my problem about wanting to add ARIA roles to my new blog.
I was thinking it would have to be done in the functions.php file in the child theme.
Nope.
Turns out you can copy theme files such as header.php, footer.php, sidebar.php and others into your child theme folder, add the ARIA role where you want it, and that version of the file is what gets served. Updates to the parent theme don’t cause the ARIA roles to disappear.
Look at the beautiful ARIA roles on my blog now. And I have role=”contentinfo” in the footer, too!
ARIA Roles displayed on Old Ain’t Dead
Thanks to Automattic for running a Happiness Bar at Word Camps!
1. Find your people. Readers who share your interests or need the information you have. Readers who share your voice, your perspective, your sense of humor.
How do you find them? Browse, read explore, search for keywords you think people would use to search for you. The wordpress.com reader topics pages helps you find a network of people.
The daily post at wordpress.com is a place to build community and a network.
2. Introduce Yourself. Comment, interact, reblog and respond. Intrigue people where they are already reading. Traffic building is a little like dating.
3. Prepare for company. Give people more of what they like. Blog about others are talking about. Reply to comments with substantial comments. Capitalize on a traffic spike.
4. Spread the love. Know how your social networks differ. Don’t exhaust your followers with irrelevant information. Write original material for each service. Publicize sharing buttons.
There’s a filter for that
by Drew Haynes, 10up
A filter takes a function, applies it and spits it out on the other side. It’s like the telephone game. 1300 or so filters in WordPress core now.
More Than one filter can be applied to a filter hook, based on a priority system. Filters can also be removed.
Content filters. Can write filters to polish titles, post info or other messages you normally see. Filters can repurpose featured image meta box.
Workflow can be customized with filters. Can filter the appearance of the post content editor.
Most well-known filter in WordPress is the_content. It’s often abused. Ask yourself if something really is content before you use it. Can create filters for post_class, excerpt_length, show_admin_bar. There’s a filter that disables captions (why?).
Development filters let you filter plugin or theme installer pages.
Ray calls himself a designer/ developer or developer-like.
Design is not just how it looks. Design is how it works. -Steve Jobs
Coding is part of the design.
Know a good developer when you begin the journey from designer to developer so you can get help.
Basics skills before you can move on are HTML and CSS. For WP you need to know are PHP and WP tags, custom fields and putting them on templates, custom post types, WP_Query to manage listings.
Using the Advanced Custom Fields plugin allows you to create more user friendly meta info and titles so that it makes more sense to the users who are trying to add content to the fields. It also gives you control over what pages, templates or users even see the field types.
Custom post types. Standard are pages and posts. You can define custom post types with particular custom fields. You can create custom templates, too. Display on a single template. The php for it is in a wp_query.
ARIA landmark roles are used to improve accessibility and provide useful navigation points that a screen reader recognizes and can find quickly.
The role information is written into the HTML as an attribute of any element that fills a particular role. In the code, they look like this:
<header role="banner">
<nav role="navigation">
The current list of landmark roles includes:
application
banner
complementary
contentinfo
form
main
navigation
search
Some WordPress themes come with ARIA landmark roles built in from the start. It’s easy to find out if your theme uses them. One way is to look at your page source and search for “role” to see if or where it appears in the source code.
If you have the Web Developer Toolbar installed in your browser, use the Information menu to look at ARIA roles.
Display ARIA roles in Information menu
This blog uses a slightly modified version of the basic WordPress Twenty Eleven theme. It’s an excellent theme in terms of ARIA information. Using the Display ARIA roles command from the Web Developer Toolbar, this blog looks like this:
Web Teacher ARIA roles visible above the fold
One of the things you want to do when using ARIA roles is make sure that every section of your page that a screen reader user would want to find quickly has an appropriate landmark role. Twenty eleven has this covered.
I’m using a theme called Oxygen on my new blog Old Ain’t Dead.
Old Ain’t Dead ARIA roles
The only roles that comes out of the box with this theme identifies the navigation elements. A bit further down the page the social media sharing buttons do have role=”button” but the plugin maker deserves the credit for this, not the theme designer.
It’s easy to go into the theme files and add roles where you want them. For example. in the header.php file, I added role=”banner” like this:
Adding a role to the header.php file
This is immediately reflected on the blog when I upload the header.php file.
The blog displays the banner role
I don’t regard this as a perfect solution, however. I am using a child theme. I made the adjustment in the header.php file of the parent theme.
Turns out you can copy theme files such as header.php, footer.php, sidebar.php and others into your child theme folder, add the ARIA role where you want it, and that version of the file is what gets served. Updates to the parent theme don’t cause the ARIA roles to disappear.
ARIA Roles displayed on Old Ain’t Dead
Look at the beautiful ARIA roles on my blog now. And I have role=”contentinfo” in the footer, too!
A theme on wordpress.com
The two themes I’ve mentioned are self-hosted blogs, and I have control over the theme files. I also have a blog on wordpress.com – a free blog that I have no control over. I’m using a pretty old theme that I haven’t changed in years. It’s inadequate and I cannot do anything to fix it.
First 50 Words ARIA roles
The two navigation landmarks you see come from the WordPress header bar, not from the theme.
I can change the theme to a more modern one, but if I stay with this one, there’s nothing. This is the incentive I need to take some time to look for a more current theme with ARIA roles included.
When you choose a WordPress theme, keep accessibility in mind and look for ARIA roles built into the theme by the designer.
If you’re a seasoned blogger, you know about your style sheet and what it’s doing for your blog. But if you’re new at the game, you may not be sure what that style sheet does for you. This post deals with blog style sheets and WYSIWYG tools and how to keep them separate.
When you choose a style (or theme or template) for your blog, you get a set of style rules that determine appearance. Those rules are stored away from your blog posts and live in a document all their own. That’s where you want the style rules to be. Away from your blog post.
The style sheet sets up layout, colors, fonts and a lot more. With all that taken care of, all a blogger has to do is open up a new post window and start to type. You type your post, publish it and you’re done. The style sheet makes it look nice in your published blog. All is right with the world.
Most blogs also have WYSIWYG (what you see is what you get) toolbars. Some you need to use to do formatting of text as headings or paragraphs or lists. Others let you change appearance. By changing appearance I mean you change the way something displays, but not the actual content. Maybe you want to change something from black to red. Just once. You can do that with the WYSIWYG toolbar provided above the post entry box. But it’s not a good idea to use those WYSIWYG appearance changing tools.
What happens when you do change a color or alignment as you are writing a post? Your blog software writes new appearance rules right in the blog post. These new rules override the appearance rules in your style sheet. Before you had appearance rules off in the style sheet where they belong. Now you have appearance rules in the blog post – not where they belong.
Why don’t you want style rules in the blog post?
Anything in your content – your blog post – can get picked up to use elsewhere. You want that to be your text and images: the headings, the paragraphs, the lists, the images. Your content.
You don’t want the blog post to contain style rules that could be carried over into unexpected places where they might not work such as mobile devices or other blogs that might quote your content. Appearance rules in those places could have unwanted effects.
Best Practice
The best practice is to choose a look you like as a template or theme and then leave it alone. Don’t use the provided toolbar to change fonts or colors or layout as you type your content into your blog. Use the tools to create headings and lists and blockquotes – that formats content into meaningful page elements – that’s okay. But font size or alignment or color choices are not meaningful. Instead, they deal with appearance. That’s not okay.
