Lately flat design is in fashion. So is the huge feature image for every post, a trend which results in a page full of images and very little text.
I’m happy that there are fads and fashions in web design. It creates job security for a lot of web design firms.
I don’t mind the flat designs. They don’t interfere with getting to the content you want. But the trend toward pages full of nothing but images with few words and required clicks to get to the content bugs me. I guess I’m just a word person. Images are nice, but I want the content.
I know there’s a lot of research that proves that images attract the attention and gather the eyeballs. But do they really mean more people are actually reading the content? There’s no image with this post. Did you read it?
I’m participating in WordCamp Albuquerque this weekend. If you are a WordPress user anywhere in the nearby area, I hope you are signed up for this great event. You’ll learn a lot!
The Open Education Alliance can potentially be an extremely disruptive model because it addresses what Thrun and Newsom acknowledged repeatedly as one of the biggest problems that the higher education system faces: The skills gap. Today, education is geared towards assessment — towards preparing students for some illusory, state-driven, assessment-driven goals, which may have no relevance in the end to giving them the skills and preparation they need to thrive outside of higher education.
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.
Why Responsive Web Design Can Transform Higher Ed Recruiting. One of many interesting tidbits in this article: “According to research from Higher Education Consultants Noel-Levitz, 68 percent of college applicants have viewed college websites on mobile devices. And if a college’s website isn’t optimized for mobile, these potential students drop off: 24 percent of students would leave a website after a poor internet experience.”
Here’s a view of the changes that Yahoo! went through in building its new logo. It’s simple, and the exclamation mark is animated. What do you think of it?
I’m feeling just a bit cross-eyed after seeing the meta-fizzy effects created in MetaFizzy Effect with SASS at CSS Tricks. Let’s not all go out and do this, okay?
Hat tip to Michael Bernstein for pointing out this fascinating talk on Google+. This is a speech by Shelley Correll from Stanford University. It’s not a new talk, but it’s worth a listen.
