Ticket #1822 (new defect)

Opened 2 years ago

Last modified 2 years ago

CPSSkins box titles should use semantic header markup (h1 or h2)

Reported by: madarche Assigned to: madarche
Priority: P2 Milestone: CPS 3.5.0
Component: CPSSkins Version: TRUNK
Severity: normal Keywords: accessibility
Cc:

Description

At the moment, the markup of box titles is <div class="title">A title example</div> while it should be either <h1 class="title">A title example</h1> or <h2 class="title">A title example</h2>.

Whether to use h1 or h2 is hard to agree on :

Using h2 for box titles would leave only one h1, the one of the document in the HTML page, which is semantically good. In the other hand, h2 box titles would promote boxes as sub-elements of the main document, while they really feature separate documents.

Using h1 for box titles with the first h1 to appear in the page rendering being the h1 of the document title is the best semantical and structural solution. But this implies to not have boxes in the current left column.

So a first implementation could be to use h2 markup. People wanting to use h1 markup could patch the SimpleBox?.py and skins/CPSSkins/cpsskins_portalboxshape.dtml files.

Change History

03/19/07 17:44:42 changed by madarche

Here is the patch : 

Index: SimpleBox.py
===================================================================
--- SimpleBox.py        (révision 51394)
+++ SimpleBox.py        (copie de travail)
@@ -30,7 +30,7 @@

 BOX_LAYOUTS = {
     'standard': {
-        'markup': """<div class="title">%s</div>
+        'markup': """<h2 class="title">%s</div>
                      <div class="body">%s</div>""",
         },

@@ -51,7 +51,7 @@
         },

     'no_frames': {
-        'markup': """<div class="title" style="border: none">%s</div>
+        'markup': """<h2 class="title" style="border: none">%s</div>
                      <div class="body" style="border: none">%s</div>
                   """,
         },
@@ -59,7 +59,7 @@
     'rounded_box': {
         'markup': """<div class="cpsskinsBoxCorners">
                      <div class="rbtop"><div></div></div>
-                     <div class="title">%s</div>
+                     <h2 class="title">%s</div>
                      <div class="body">%s</div>
                      <div class="rbbot"><div></div></div></div>
                   """,
Index: skins/CPSSkins/cpsskins_portalboxshape.dtml
===================================================================
--- skins/CPSSkins/cpsskins_portalboxshape.dtml (révision 51394)
+++ skins/CPSSkins/cpsskins_portalboxshape.dtml (copie de travail)
@@ -1,4 +1,5 @@
 <dtml-let class="'.boxShape' + title">
+<dtml-var class> h2.title,
 <dtml-var class> .title {
 <dtml-if BoxTitle_border_style>
   border-style: <dtml-var BoxTitle_border_style>;
@@ -13,7 +14,7 @@
   display: <dtml-var BoxTitle_display>;
 </dtml-if>
 <dtml-if BoxTitle_font>
-  font: <dtml-var BoxTitle_font>;
+  font: <dtml-var BoxTitle_font>!important;
 </dtml-if>
 }