Some WordPress Themes need a few CSS or Javascript tweaks to make them accessible for people with disabilities. Sites @ Duke has curated a list of Themes that provide the ability to be accessible. Some require a few easy tweaks.
The table columns below indicate which Themes are good as-is and those that need at least one tweak.
- Information on how to implement the menu tweak can be found here.
- Information on how to add custom CSS can be found here.
Please do not be intimidated. These are simple fixes that provide huge benefits to people with disabilities (and help mitigate other risks related to inaccessible websites).
Theme | Required menu tweak (Superfish) | Required Custom CSS: |
---|---|---|
1 Duke University Template 1 | No | none |
2 Duke University Template 2 | No | none |
Aaron | No | none |
Academica | No |
div a:hover { |
Adventure Journal | Menu tweak required | none |
Author | No | none |
Ascend | No | *:focus-visible { outline: 2px solid blue!important; box-shadow: 0px 0px 5px #fff } |
Astra | Menu tweak required | div a:hover { text-decoration: underline; } .sfHover .sf-with-ul { opacity:1!important; visibility:visible!important; display:block!important; } |
Beardsley | No | none |
Business Responsiveness | Menu tweak required | none |
Catch Box | No | none |
Chosen | No | div a:hover { color: blue; text-decoration: none; } |
Coraline | Menu tweak required | none |
Decode | Menu tweak required | div .menu a:hover, div a:hover { text-decoration: underline; } |
DeJay | No | None |
Graphene | Menu tweak required |
nav.navbar-inverse .nav .dropdown-menu li > a { |
Hemmingway | Menu tweak required | div .blog-menu li.sfHover > ul.sub-menu { display:block; left:0; } div .blog-menu ul.sub-menu li.sfHover > ul.sub-menu { left: 240px; top: 0; } |
Lovecraft | No | none |
Neve | No | div .nv-content-wrap .elementor a:not(.button):not(.wp-block-file__button) { text-decoration: underline; } div .nv-content-wrap .elementor a:not(.button):not(.wp-block-file__button):hover { text-decoration: none; } |
Radiate | No | div #content a:hover { text-decoration: underline; } |
School of Medicine | No | none |
Simone | No | none |
Twenty Eleven | Menu tweak required | none |
Twenty Fifteen | No | none |
Twenty Fourteen | No | none |
Twenty Nineteen | No | .main-navigation .main-menu > li > :hover { text-decoration: underline; } |
Twenty Seventeen | No | none |
Twenty Sixteen | No | none |
Twenty Ten | Menu tweak required | none |
Twenty Thirteen | No | none |
Twenty Twelve | No | none |
Twenty Twenty | No | none |
Vertigo | No | none |
Zerif Lite | Menu tweak required | .menu a:hover { text-decoration: underline; } |
Virtue | No | .menu a:hover, .menu a:focus { text-decoration: underline; } |