Moodle Community Sites

Heading in moodle.org theme not marked up as H1: accessibility

Details

  • Type: Bug Bug
  • Status: Resolved Resolved
  • Priority: Minor Minor
  • Resolution: Fixed
  • Component/s: moodle.org
  • Labels:
    None
  • Environment:
    Firefox - outline headings using the Web Developer extension.

Description

See the formal_white theme - the Moodle logo should be marked up as <h1 class="headermain"><img alt="Moodle" .. /></h1> - good for accessibility.

Also, the H1s in the middle column, "Welcome to Moodle" "Moodle Community"... could be demoted to H2. Ask the W3C validator for an outline and you'll see the discrepancy:
http://validator.w3.org/check?uri=http%3A%2F%2Fmoodle.org&charset=%28detect+automatically%29&doctype=Inline&outline=1&verbose=1

Congratulations, no validation errors today!! And I think you got rid of the <table> from the Moodle.org theme a while back.

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Nick Freear added a comment -

Hi Martin,
I attach a 'header.html' file copied and modified from 'http://moodle.org/theme/moodleorange/' - with H1s in place of 'headermain' DIVs.
When you have a moment perhaps you swap this in (the standard theme takes care of the margin:0 on 'headermain').

Hope this helps. Many thanks,
Nick

Show
Nick Freear added a comment - Hi Martin, I attach a 'header.html' file copied and modified from 'http://moodle.org/theme/moodleorange/' - with H1s in place of 'headermain' DIVs. When you have a moment perhaps you swap this in (the standard theme takes care of the margin:0 on 'headermain'). Hope this helps. Many thanks, Nick
Hide
Permalink
Martin Dougiamas added a comment -

Oh yes, I did this a while back. Thanks!

Show
Martin Dougiamas added a comment - Oh yes, I did this a while back. Thanks!
Hide
Permalink
Nick Freear added a comment -

Hi,
It's fixed for the home page, but NOT other pages. This is what needs changing,

... <?php } else if ($heading) { // This is what gets printed on any other page with a heading ?>

<div id="topbar">
<div id="header" class="clearfix">
<div class="headermain"> ...

TO ...
<h1 class="headermain"> ...

Sorry it's taken me so long to come back on this.
Nick.

Show
Nick Freear added a comment - Hi, It's fixed for the home page, but NOT other pages. This is what needs changing, ... <?php } else if ($heading) { // This is what gets printed on any other page with a heading ?> <div id="topbar"> <div id="header" class="clearfix"> <div class="headermain"> ... TO ... <h1 class="headermain"> ... Sorry it's taken me so long to come back on this. Nick.
Hide
Permalink
Eloy Lafuente (stronk7) added a comment -

Hi Nick, I've replaced the

<div class="headermain"> ...

by

<h1 class="headermain"> ...

but now I'm getting one XHTML error about having <div> inside <h1> or so, because the small moodle logo image/link is inside one <div>.

So, finally I've deleted such <div> and moved his class to the image itself (to provide some padding) and code is as follows:

<h1 class="headermain"><a href="http://moodle.org/"><img class="headerimage" src="/theme/moodleorange/moodle.gif" alt="Moodle" height="20" width="89" /></a></h1>

Seems to validate and respect original style (padding).

Can you confirm everything is ok now? TIA!

Show
Eloy Lafuente (stronk7) added a comment - Hi Nick, I've replaced the <div class="headermain"> ... by <h1 class="headermain"> ... but now I'm getting one XHTML error about having <div> inside <h1> or so, because the small moodle logo image/link is inside one <div>. So, finally I've deleted such <div> and moved his class to the image itself (to provide some padding) and code is as follows: <h1 class="headermain"><a href="http://moodle.org/"><img class="headerimage" src="/theme/moodleorange/moodle.gif" alt="Moodle" height="20" width="89" /></a></h1> Seems to validate and respect original style (padding). Can you confirm everything is ok now? TIA!
Hide
Permalink
Eloy Lafuente (stronk7) added a comment -

Martin, I've left one copy of the header before changes referencing to this bug, FYI.

Ciao

Show
Eloy Lafuente (stronk7) added a comment - Martin, I've left one copy of the header before changes referencing to this bug, FYI. Ciao
Hide
Permalink
Nick Freear added a comment -

Thanks! I confirm:
-Validates,
-A sensible heading hierarchy, example http://moodle.org/login/index.php
gives,
1 1 {IMG-ALT: Moodle}
2 2 You are here
3 2 Returning to this web site?
4 2 Is this your first time here?

Ciao.

Show
Nick Freear added a comment - Thanks! I confirm: -Validates, -A sensible heading hierarchy, example http://moodle.org/login/index.php gives, 1 1 {IMG-ALT: Moodle} 2 2 You are here 3 2 Returning to this web site? 4 2 Is this your first time here? Ciao.

People

Vote (0)
Watch (1)

Dates

  • Created:
    Updated:
    Resolved:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.