ccb73fd421
= Reference container semantics for assistive technology = - Table header elements with row scope in the first column. - Table caption invisible to sighted users but required for screen readers. = Referrer accessibility = - jQuery referrers are accessible but don’t show the tooltips on focus. - AMP compatible tooltips show up on focus on navigatable referrers. - Alternative tooltips now accessible on focus on now navigatable referrers. git-svn-id: https://plugins.svn.wordpress.org/footnotes/trunk@2498648 b8457f37-d9ea-0310-8a92-e5e31aec5664
57 lines
2 KiB
HTML
57 lines
2 KiB
HTML
<!--<?php//for docblock, @see MCI_Footnotes_Template::process_template()
|
|
/**
|
|
* Reference container template to enable AMP compatibility mode.
|
|
*
|
|
* - Adding: Reference container: get expanding and collapsing to work also in AMP compatibility mode, thanks to @westonruter code contribution.
|
|
*
|
|
* @since 2.6.0
|
|
*
|
|
* @contributor @westonruter
|
|
* @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799580854
|
|
* @link https://github.com/markcheret/footnotes/issues/48#issuecomment-799582394
|
|
* @link https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events/#*-(all-elements)
|
|
*
|
|
* - Bugfix: Reference container: apply web semantics to improve readability for assistive technologies, thanks to @derivationfr issue report and code contribution.
|
|
*
|
|
* @since 2.6.0
|
|
*
|
|
* @contributor @derivationfr
|
|
* @link https://wordpress.org/support/topic/enhance-accesibility-by-using-instead-of/
|
|
* @link https://a11y-101.com/development/tables
|
|
*
|
|
* For assistive technologies to improve accessibility by reading tables in a meaningful manner,
|
|
* the tables must be marked up properly using table header elements for header rows and header
|
|
* columns as applicable.
|
|
* The table caption must also be present for screen readers but may be hidden to sighted users.
|
|
*/?>
|
|
-->
|
|
<div
|
|
class="speaker-mute footnotes_reference_container"
|
|
>
|
|
<div
|
|
class="footnote_container_prepare"
|
|
><[[element]]
|
|
><span
|
|
role="button"
|
|
tabindex="0"
|
|
id="footnotes_container_label_expand_[[post_id]]_[[container_id]]"
|
|
class="footnote_reference_container_label pointer"
|
|
on="tap:footnote_references_container_[[post_id]]_[[container_id]].toggleClass(class=collapsed)"
|
|
>[[name]]</span
|
|
></[[element]]
|
|
></div
|
|
>
|
|
<div
|
|
id="footnote_references_container_[[post_id]]_[[container_id]]"
|
|
><table
|
|
class="footnotes_table footnote-reference-container"
|
|
><caption
|
|
class="accessibility"
|
|
>[[caption]]</caption
|
|
>
|
|
<tbody>
|
|
[[content]]
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|