Tags

I am working with a government organization that needs their websites compliant with WCAG 2.0, level AA.   The Avada WordPress theme flunked accessibility checks in a few areas.

Search Box – The search box triggers an “input field is missing a description” error. I edited searchform.php to both add a label and a title to the input field.

title="Type search term here"

Social media icons – the social media widget that comes bundled with Avada uses pseudo elements to insert the icons.  Pseudo elements are not read by screen readers.  (See the YouTube video “How screen readers read the content generated with CSS“).  The social media icons are useful content and should not be omitted from screen readers.  I used a different plugin to display social media icons.

Font Awesome icons – the <i> tag is used to display icons.  That sets off the accessibility error: “the italics-tag ‘i’ is used to highlight text.”  Well, not really.  The Font Awesome icons used as checklist bullets are pseudo elements, inserted by CSS.  Any pseudo element should be for presentational purposes only, not for useful content.  I consider the icons to be presentational only, so did not make any modifications for the icons.

Drop-down menus not accessible from the keyboard – when tabbing through the page, only the top level menu items come into focus.  The sub-menu items are not displayed.  The theme does not use ARIA role=navigation for menus.

I’ll post more fixes as I find them.

Advertisements