Uploaded image for project: 'phpBB'
  1. phpBB
  2. PHPBB-17570

Replace an old CSS accessibility hack with a modern, recommended and W3C compliant method

XMLWordPrintable

    • Icon: Improvement Improvement
    • Resolution: Unresolved
    • Icon: Minor Minor
    • None
    • 4.0.0-a1, 3.3.15
    • None

      The <dfn> used in definition lists (.topiclist) is not used for a true semantic definition, but to provide a useful text label ("Answers", "Views", etc.) for screen readers.

      The text is removed from the screen, while keeping it present in the code and accessible using this old accessibility hack in content.css:

      ul.topiclist dfn {
      	/* Labels for post/view counts */
      	position: absolute;
      	left: -999px;
      	width: 990px;
      }
      

      Suggestions:

      • Simplest solution: declare the accessibility method directly on the element by replacing:

        ul.topiclist dfn {
        	/* Labels for post/view counts */
        	position: absolute;
        	left: -999px;
        	width: 990px;
        }
        

        with:

        ul.topiclist dfn {
        	border: 0;
        	position: absolute;
        	overflow: hidden;
        	clip: rect(0, 0, 0, 0);
        	width: 1px;
        	height: 1px;
        	margin: -1px;
        	padding: 0;
        }
        

        And remove in bidi.css:

        .rtl ul.topiclist dfn {
        	left: auto;
        	right: -999px;
        }
        

      • Or add the class 'sr-only' to all relevant <dfn> elements (15 in 7 different files).
      • Or add an aria-label attribute to all parents of these <dfn> elements.

            Unassigned Unassigned
            cabot cabot
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: