[Kevin]

I’m helping bring a local county government website into compliance with WCAG 2.0-AA & Section 508 accessibility standards. The site uses Parabola as its’ theme. A few of the errors our scanning tool returns seem to be theme based. One is that the search form does not contain a label. The other two is fonts don’t use relative units and underlines need to be shown for links. I’m planning on creating a child theme so I can take care of both the CSS and search issues. To add the label for search, do I just need to edit the searchform.php?

• This topic was modified 7 years ago by Kevin.

[Kay]

Hi Kevin,

Yes, searchform.php would be the only thing you’d need to edit. You should add this line before the search input:

<label for="s" class="screen-reader-text"><?php _e('Search for', 'parabola'); ?> </label>

However we’ll add that as well for our next theme update (2.0.3). For all the links to have underlines some Custom CSS like this should be added to your child theme:

a:link, a:visited {text-decoration: underline;}

Relative units for all text is quite a bit more complicated since the font sizes are editable via theme options but we’ll look into that for a future update.

Good luck and thanks for the feedback!

---

Before posting consider reading our short theme debugging instructions.
Please read the FAQs: Mantra • Nirvana • Parabola • Tempera
Tutorials: custom menus • translating theme • installing theme • category page with intro • disabling comments Wordpress: child themes • categories/posts
Before making any modifications to your theme we strongly recommend using Child Themes.

[Kevin]

I thought I had replied to this a couple days ago, but I guess it never went through.

Thanks for the reply and the news that it will make it into the next update. When can I look for 2.0.3 to be released?

I’m well versed in CSS so adding the underlines was trivial. I’m going to give the PostCSS plugin pxtorem a test to see if it can automate converting the fonts to relative units.

[Kevin]

In addition to this code you gave me, I needed to add id=”s” to the search input field. Here is my final searchform.php code:

<label for="s" class="screen-reader-text"><?php _e('Search for', 'parabola'); ?> </label>
<form role="search" method="get" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
	<input id="s" type="search" placeholder="<?php _e( 'SEARCH', 'parabola' ); ?>" name="s" class="s" value="<?php echo get_search_query(); ?>" />
	<input type="submit" class="searchsubmit" value="" />
</form>

This was able to clear the WCAG/508 error for the form.

[Kevin]

Hello,

I’m am having an issue overriding the default font sizes in my child css. I’ve tried setting a high priority level when enqueuing the child css and it still seems to be overridden by the parent styles. I’d like to avoid adding !important to all the child font unit declarations.

**I just saw the latest theme update has converted pixel font units to ems! Please disregard the above paragraph! **

[Kevin]

I guess I spoke too soon. The Cryout/Parabola theme setting plugin looks to be inserting its’s styles in the head of each page which still use px font units. I’m guessing I’ll still need to override these in the child css with !important statements until such a time as the plugin is updated.

[Zed]

The theme still uses fixed font sizes for the base elements (body / html), but we’ve changed all the other site elements to use relative units (em).

So now you’ll only need to override the font size for the base elements.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Kevin]

I noticed, thanks! I changed the base unit on the HTML element to % and still needed to override the page title H1/H2’s. One other thing you might want to think about for the theme setting plugin is to add the ability to use font units other than pixels. Other wise I think the changes you’ve made have been a great help!

[Author]

Posts