Ticket #1822 (new defect)

Opened 12 years ago

Last modified 10 years ago

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

Reported by: madarche Owned by: madarche
Priority: P2 Milestone: CPS 3.4.10
Component: CPSSkins Version: TRUNK
Severity: normal Keywords: accessibility


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

comment:1 Changed 12 years ago by madarche

Here is the patch :

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

     '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 BoxTitle_font>
-  font: <dtml-var BoxTitle_font>;
+  font: <dtml-var BoxTitle_font>!important;

comment:2 Changed 10 years ago by gracinet

  • Milestone changed from CPS 3.5.0 to CPS 3.4.10

The default theme system in trunk is CPSDesignerThemes now, which handles this really easily, I should say. This is up to the theme

Simple example:

  <div cps:slot="my portlet slot">
   <div style="border: 1px solid black;" cps:portlet="frame">
    <h3 cps:portlet="title"></h3>
    <div cps:portlet="body"></div>
Note: See TracTickets for help on using tickets.