Fix:iSpot.org.uk

Your place to share nature.

Welcome to iSpot! Learn more about wildlife, share your interest with a friendly community and get help identifying what you have seen. iSpot is part of The OpenScience Laboratory - an online centre at the cutting edge of practical science. This is an initiative of The Open University and The Wolfson Foundation.

iSpot logo. Loading..

Accessibility and usability fixes for the nature community site.

Includes accessibility enhancements and fixes for the new "ispot_2013" theme.

Fixes

%YAML 1.2
---
_CONFIG_:
    name: {{PAGENAME}}
    description: ""
    includes:
        - http://www.ispot.org.uk/*
    test_urls:
        - http://www.ispotnature.org/
        - http://www.ispot.org.uk/
        - http://ispot.org.uk/
        - http://ispot-approval.open.ac.uk/
        - http://ispot-dev.open.ac.uk/
        - http://ispot/
    default_locale: en-GB

#
# Fixes.
#
a[href = '#'], a[href = 'javascript:void(0)']:
    role: button
    tabindex: 0


# Janrain RPX social logins.

a.rpxnow, .X-rpx-icon-small:
    role: button
    aria-haspopup: true

"#rpx-google":
    title: Login via Google
"#rpx-yahoo":
    title: Login via Yahoo
a>#rpx-twitter:
    title: Login via Twitter
"#rpi-openid":
    title: Login via Open ID
"#rpx-linkedin":
    title: Login via Linked In


a[target='_blank']:
    title: Opens in new window

"#header":
    role: banner

"#main-menu":
    role: navigation
    aria-label: Site menu

"#footer":
    role: contentinfo

"#main-content, #main-content-front":
    role: main
    aria-labelledby: "#main-content > h2"

.block-search:
    role: search
    aria-labelledby: .block-search > h2

input#edit-search-block-form-1:
    placeholder: Search iSpot
    required: ""
    aria-required: true

input#edit-name, input#edit-pass:
    required: ""
    aria-required: true

img#fb-connect-button:
    role: button
    tabindex: 0
    title: Connect with Facebook
    aria-label: Connect and login via Facebook

.jcarousel-prev[disabled = 'disabled'], .jcarousel-prev-disabled, .jcarousel-next-disabled:
    role: ""
    tabindex: ""
    title: ""

.jcarousel-prev[disabled = 'false'], .jcarousel-prev:
    role: button
    tabindex: 0
    title: Previous

.jcarousel-next[disabled = 'false'], .jcarousel-next:
    role: button
    tabindex: 0
    title: Next

"#block-carousel-0":
    role: region
    aria-labelledby: "#block-carousel-0 .panel-title"
    aria-label: Latest observations

"#block-carousel-1":
    role: region
    aria-labelledby: "#block-carousel-1 .panel-title"
    aria-label: Help with confirming global observations

img#tosl-logo:
    aria-label: The OpenScience Laboratory, opens in a new window

img#ou-logo:
    aria-label: The Open University, opens in a new window


#
# Drupal node.
#
.node:
    role: article
    #aria-labelledby: SELF > h2


#
# "ispot_2013" theme.
#
"#main-header":
    role: banner

footer:
    role: contentinfo

"#main-content":
    role: main
    aria-labelledby: "#main-content > h2"

.navbar-nav:
    role: navigation
    aria-label: Main iSpot drop-down menu

.navbar-toggle:
    title: Expand/ collapse menu

".nav-tabs, #user-block, #block-menu-menu-administration, #block-menu-menu-ispot-admin":
    role: navigation

.nav-tabs:
    role: navigation
    aria-label: Tabs

"#search-block-form":
    ##block-search-0
    role: search
    aria-labelledby: "#block-search-0 h3"

...

Style

/* Experimental! */

a:focus, input:focus, button:focus {
  outline: 2px solid #ec971f;
  outline-offset: 2px;
}

#partner-logos {
  background-color: #fafafa;
  opacity: .6;
  padding: 3px;
}