3. Topics in this presentation
WCAG conformance levels A & AA („must fullfill & shall fulfill“)
WCAG techniques categorized as „sufficient“
HTML
Relevant WordPress functions
4. Topics not in this presentation
WCAG conformance level AAA („may fulfill“)
WCAG techniques categorized as „advisory“
ARIA
CSS
JavaScript, jQuery etc.
Frames (FRAMESET and IFRAME)
5. About me
Hard of hearing, body impaired, wheelchair user
First bookmark set in a web browser in 1994
Graduated computer scientist for digital media since 1996
Got in touch with Web Accessibility in 1998, started www.webaccessibility.de
Contributor for WCAG 2.0 and german BITV 2.0
Web Accessibility consultant and examiner for companies and authorities, e.g. audible.de, the german Federal Ministry of Labour and Social Affairs
Trainer for examiners checking the conformity on the guidelines for accessible websites
Developer of plugins and themes for WordPress since 2010 (@hinjiriyo)
WordPress Core Contributor
WordPress Translation Editor
6. What you will get
A soft warm-up
The Big Journey
User's benefits
8. Define Page Language
Tell other software which human language the
web page has
E.g. for screen readers, text-to-speech
applications, captions in media
Success criterion 3.1.1, conformation level A
11. Define Page Language: How to
Automatized generation of the language
definition
In header.php just a single function call:
<html <?php language_attributes(); ?>>
since WP 4.3.0
12. Define Language Changes
Tell other software which human language the
text part has
E.g. for quotes, abbreviations, names etc.
Success criterion 3.1.2, conformation level A
13. Define Language Changes: How to
In HTML elements: lang attribute
<p>The frenchman yelled: <span
lang="fr">Liberté!</span></p>
<p>The brazilian writer states:</p>
<blockquote lang="pt-BR">...text in brazilian
portuguese...</blockquote>
14. Reading directions: How to
In HTML elements: dir attribute:
<html lang="en">
...
<p>The doctors says: <span lang="ar"
dir="rtl">/<أحسنتspan></p>
15. Language Standards: How to
ISO 1766: http://www.ietf.org/rfc/rfc1766.txt
language-code = primary-code ( "-" subcode )*
Primary-code => Language Codes ISO 639
https://en.wikipedia.org/wiki/ISO_639
Subcode, e.g. Country Codes ISO 3166
https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
Examples: „en-UK“, „ja“, „fa-IR“
16. Page Titled
Help the user to identify the web page
Good page titles improves the orientation within
a website
Success criterion 2.4.2, conformation level A
17. Page Titled: Failures
No title element
Empty title element
Default text only („Untitled“, a company name, etc.)
File name as the page title
No unique page titles within the web site
18. Page Titled: How to
(Source: WCAG 2.1 Techniques)
Use the title element
Ensure the title element describes the current page
Ensure the page title makes sense when out of context of the web page, e.g. on search result pages and in screen readers
Include the name of the site (subsite in WordPress multisite) to ensure where the web page belongs to
Use unique titles (each web page has its own page title)
Use short titles (ideally under 60 characters)
19. Page Titled: How to Easy way
Automatized generation and sanitation of the page title
1. During theme setup: add_theme_support( 'title-tag' );
2. In header.php:
<?php wp_head(); ?>
since WP 4.4.0
20. Page Titled: How to
wp_head()
calls (among other functions) _wp_render_title_tag()
calls wp_get_document_title()
Available filter hooks in wp_get_document_title() to alter the page title:
'pre_get_document_title'
'document_title_separator'
'document_title_parts'
22. Think about that
„A web page
is a
purely visual
mouse-controlled
interface.“
23. Think about that
„A web page
is a
purely visual
mouse-controlled
interface.“
24. Think about that
„A web page
is a
purely visual
mouse-controlled
interface.“
25. Think about that
„A web page
is a
purely visual
mouse-controlled
interface.“
26. In reality:
„A web page
is a
sequence of content and interactive elements
controlled by different technologies
for different ways of presentation.“
31. The Big Journey
Structure: Informations and relationships
Meaningful sequence of the content
Alternatives for non-text contents
32. The Big Journey: Structure
Continuous texts
Forms
Tables
Success criterion 1.3.1, conformation level A
Success criterion 3.2.2, conformation level A
Success criterion 4.1.2, conformation level A
33. Structure: Continuous texts
Ensure that the structure of a web page’s content
(„informations“) and the associations between
distinct pieces of content („relationships“) are
available in HTML
Visual formatting is not sufficient; it has to be
programmatically determined first (you can design
it with CSS later)
34. Continous texts: Failures
No use of structural elements
<div class="header">..</div>
...<br>
<br>
<img src="bullet.gif"> ...<br>
<img src="bullet.gif"> ...
35. Continuous texts: Fails & How to
Element Visuallly determined
(insufficient)
Programmatically determined
(minimum)
Heading Larger, bold font
Separated by a blank line
Heading element H1-H6
Visually designed via CSS
List item Bullet symbol
intended
List item element LI
Visually designed via CSS
Form field Form field, followed by a
description
Form field, associated with a
description via LABEL
Special
words
Font variants: italic, bold,
CAPITALIZED etc.
Tagged with the approbiate HTML
element like ABBR, EM etc. + CSS
Other output
device
Lost structure informations Preserved structure informations
36. Continuous texts: How to
Mark up for different presentations
E.g. headings both in a browser and in a screen reader’s list of headings
37. Continuous texts: How to
Use H1-H6 to identify headings
Use OL, UL and DL for lists
Use HTML elements to mark emphasized or special text:
Phrases: EM, STRONG, ABBR, ACRONYM etc.
Quotations: BLOCKQUOTE and Q
Subscripts and superscripts: SUB and SUP
38. Structure: Forms
Can be a challenge for users with
vision impairment
mobility impairment
cognitive or learning disabilities
assistive technology such as a screen reader with
audio and/or Braille output
39. Forms: Failures
Available descriptions of the form controls, but no LABEL elements
LABEL elements without association to the form controls
Example 1 Correct HTML, but inaccessible, because assistive technologies can not detect any connection between the form control and its text:
<label>Full name:
<input type="text" name="fullname"></label>
Example 2 dito:
<input type="radio" name="subscribe" value="Weekly">
<label>Weekly subscription</label>
40. Forms: Failures
Inaccessible indication of required fields, e.g.
Form field
Form field
Form field *
Form field
Form field
* required
Required fields are marked by color only
41. Forms: How to
Use LABEL elements to associate text labels with form controls
Use the title attribute to identify form controls when the LABEL element cannot be used, e.g. in a single text field for the search
Provide a description for groups of form controls using FIELDSET and LEGEND elements
Use OPTGROUP to group OPTION elements inside a SELECT
Provide submit buttons, especially with a SELECT element
Indicate required form controls using LABEL or LEGEND
42. Forms: How to Label
Use LABEL elements to associate text labels with form controls
Example 1:
<label for="fullname">Full name:</label> <input type="text" name="fullname" id="fullname">
Example 2:
<input type="radio" name="subscribe" value="Weekly" id="weekly"> <label for="weekly">Weekly subscription</label>
43. Forms: How to Required fields
Provide a clear indication that a specific form control is required for successful data submission
Form control:
<label for="fullname">Full name (required)</label>
Fieldset:
<legend>Shoe size (required):</legend>
If a symbol is used to indicate required fields, explain its meaning at the start of the form, e.g * (asterix)
Use indicating colors only as an addition, not as the base
44. Forms: How to WordPress Forms
To get consistent forms in the backend use:
<?php
settings_fields( ... );
do_settings_sections( ... );
submit_button();
?>
45. Forms: How to WordPress Forms
Prepare the form with
add_settings_field( ... )
register_setting( ... )
Since WP 4.7.0
46. Forms: How to Widgets
Unique Ids and names on the Widgets page in widgets forms automatically:
get_field_id() & get_field_name() inherited from WP_Widget()
class My_Widget extends WP_Widget { ...
function form( $instance ) { ...?>
<label for="<?php echo $this->get_field_id( 'my_field' ); ?>">
...</label>
<input ...
id="<?php echo $this->get_field_id( 'my_field' ); ?>"
name="<?php echo $this->get_field_name( 'my_field' ); ?>"
... /><?php ...
}
}
Since WP 4.4.0
47. Structure: Tables
Present tabular information in a way that
preserves relationships within the information
even when users cannot see the table
Tabular information: relationships between data
represented in columns and rows
48. Tables: Failures
Not using the TABLE element and its child elements
Using white space characters, DIV elements etc. to achieve a visual representation of
columns and rows
Missing associations between the cell headers and their cell data
Missing description about the table content
Using tables for layout purposes
49. Tables: How to
Using table markup to present tabular information
Using the summary attribute of the TABLE element to give an overview of data tables
Using CAPTION elements to associate data table captions with data tables
Using id and headers attributes to associate data cells with header cells in data tables
Using the scope attribute to associate header cells and data cells in data tables
HTML 4.01 Tables Specifications
https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html
50. Tables: Example „summary“ „scope“
<table ... summary="This table contains all form options.">
<caption>Page Settings</caption>
<tbody>
<tr>
<th scope="row">...</th>
<td>...</td>
</tr>
...
</tbody>
</table>
51. Tables: Example „headers“ & „id“
<table summary="This table displays the scores reached by each team.">
<caption>Score per team</caption>
<tr>
<th rowspan="2" id="h">Points</th>
<th colspan="3" id="t1">Team A</th>
<th colspan="3" id="t2">Team B</th>
</tr>
<tr>
<th id="e1" headers="t1">1</th>
<th id="e2" headers="t1">2</th>
...
</tr>
<tr>
<td headers="h">85</td>
<td headers="t1 e1">15</td>
<td headers="t1 e2">15</td>
...
</tr>
</table>>
52. Big Journey: Meaningful Sequence
„Meaningful order of contents“ means: re-ordering does not change
the meaning
There can be several meaningful orders, but one is sufficient.
Why? To provide a comprehensive representation of the content in all
devices, especially if there is no visual representation
Success criterion 1.3.2, conformation level A
53. Meaningful Sequence: Failures
Not to provide a content structure via HTML
elements
No order in HTML and specifying an order via
CSS (in CSS: position: absolute;)
54. Meaningful Sequence: How to
To test: Linearize the content
Either turn off CSS in the browser
or use
a text-only browser Lynx https://lynx.browser.org/
or Textise https://www.textise.net/
55. Big Journey: Non-text contents
Videos and Audios
Applets and other objects
Images
Success criterion 1.1.1, conformation level A
56. Videos, Audios: How to
Provide a text transscript of the multimedia content
Example: Speech of the german president on the
International Day of Sign Languages 2020
https://www.bundespraesident.de/SharedDocs/Reden/DE/Frank-Walter-
Steinmeier/Reden/2020/09/200923-Tag-der-Gebaerdensprachen.html
Use the TRACK element to provide captions in videos
57. Applets,Objects: How to
Where to put text alternatives?
Use the alt attribute of APPLET elements
Use the body of the OBJECT element
58. Images: How to
Use alt attributes of IMG elements
Use alt attributes of images used as submit buttons
Use alt attributes of AREA elements of image maps
Use null alt text and no title attribute on IMG elements for images that assistive technologies should ignore
How to write alt texts: An alt Decision Tree
https://www.w3.org/WAI/tutorials/images/decision-tree/
59. Images: How to Quick alt
Imagine:
You explain during a phone call the other
person an image in not more than 10 words.
How would you do this?
You’ll get the alt text of that image.
61. User's benefits: Keyboard Support
Ensure keyboard control for all the functionality
of the page; test with only the keyboard
Think of „Keyboard first!“
- then add optional input devices
Success criterion 2.1.1, conformation level A
62. Keyboard: Failures
Using Javascript to emulate interactivity
Example 1: <span onclick="location.href='/another-page'">Click here</span>
Example 2:
<select onchange="do_something()">
<option value="value-1">Text 1</option>
…
</select>
63. Keyboard: How to
Avoid the use of Javascript for interactivity
Instead use HTML for all controls and links and let the user control them
Test with only the keyboard
Example 1: <a href="/another-page">Another page</a>
Example 2:
<select name="my-selection">
<option value="value-1">Text 1</option>
…
</select>
<input type="submit" value="Select">
64. User's benefits: Bypass blocks
Blocks are sections of content repeated on
multiple pages, e.g. navigation links, main
content, sidebars, advertising frames
For users of screen readers, screen magnifiers,
keyboards only, and with cognitive disabilites
Success criterion 2.4.1, conformation level A
65. Bypass blocks: How to
Provide links to the blocks at the start of the page, visible if focused by tab:
<body ...><div>
<a
class="skip-link screen-reader-text"
href="#content">Skip to content</a> </div>...<main id="content">
66. Bypass blocks: How to
Recommendation: Re-use the CSS statements
for .skip-link and .screen-reader-text of
TwentyTwenty’s style.css for your own theme
67. User's benefits: Links
Provide link text that identifies the purpose of the link without
needing additional context
Assistive technology has the ability to provide users with a list of
links that are on the web page
Success criterion 2.4.4, conformation level A
Success criterion 3.2.4, conformation level AA
68. Links: Failures
Using the same link text for different targets
e.g. „Read more“ on archive pages
(lack of unambiguity, lack of specifity)
Using different link texts for the same target
(lack of consistency, source of disorientation)
Opening new windows/tabs without a notice
(source of disorientation)
69. Links: How to
Use link text that describes the purpose of a link
Use the same link text for the same targets
Use different link texts for different targets
Extend link texts with the title attribute (ok, but not reliable)
Better: Extend link texts with visually hidden unique texts
70. Links: How to
On archive pages (as seen in theme TwentyNineteen):
<?php
the_content(
sprintf(
wp_kses(
/* translators: %s: Post title. Only visible to screen readers. */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>',
'twentynineteen' ),
array( 'span' => array( 'class' => array(), ), )
),
get_the_title()
)
);
71. Links: How to
On the webpage:
In a screen reader’s list of links
72. Links: How to Open new tabs
Notice perceptible for all:
<a href="..." target="_blank">... (opens in a new tab)</a>
Notice perceptible for only blind users:
<a href="..." target="_blank">...<span class="screen-reader-text"> (opens in a new
tab)</span></a>
73. Links: How to
Use OL, UL and DL for groups of links
Group related links using the NAV element
74. User's benefits: NAV Elements
For lists of links to give orientation
Success criterion 1.3.1, conformation level A
Since WordPress 5.5: automated arial-label for navigation widgets:
Accessibility improvements to widgets
outputting lists of links in 5.5
https://make.wordpress.org/core/2020/07/09/accessibility-improvements-to-
widgets-outputting-lists-of-links-in-5-5/
75. User's benefits: Focus Order
Make tabbing through a website as comprehensible as
possible, i.e. logical and usable
Ensure that the order of content in the source code is
the same as the visual presentation of the content
Success criterion 2.4.3, conformation level A
76. Focus Order: Failures
The tabindex attribute does not follow logical
sequences
No use of CSS pseudo class :focus
77. Focus Order: How to
Avoid the use of the attribute tabindex
Create a meaningful sequence of the content in the source code
In CSS: if hover, then also focus:
...:hover, ...:focus { ... }
or
...:hover { ... }
...:focus { ... }
78. Big helper: Resizing
To ensure that visually rendered text, including form fields, can
be scaled successfully
For people with mild visual disabilities
For mobile device users
Does not require any assistive technology such as a screen
magnifier
Success criterion 1.4.4, conformation level AA
79. Resizing: Failure
Use of the META viewport element with scaling lower than 200%
Disallow resizing via HTML:
<meta
name="viewport"
content="width=device-width,
user-scalable=no,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0">
80. Resizing: How to
Avoid the META viewport element
Or allow resizing via HTML with at least 200% scaling:
<meta
name="viewport"
content="width=device-width,
user-scalable=yes,
initial-scale=1.0,
minimum-scale=0.1,
maximum-scale=10.0">
81. Check a11y: Validators
Not all aspects of accessiility can be checked
by machines, but at least HTML code
W3C „Nu Html Checker“: validator.w3.org/nu
Accessibility Checker: WAVE wave.webaim.org
Text only Converter: Textise textise.net
84. Thank you, dear artists!
Photo by Artem Sapegin on Unsplash Photo by Max Duzij on Unsplash Photo by Jess Baley on Unsplash
Photo by Mimi Thiam on Unsplash Photo by Marcos Luiz on Unsplash Photo by Tikkho Maciel on Unsplash
85. Thank you, dear artists!
Photo by takahiro taguchi on Unsplash Photo by Jimmy Conover on Unsplash Photo by Kelly Sikkerna on Unsplash
Photo by Sincerly Media on Unsplash Photo by Jon Tyson on Unsplash Photo by Vlad Bagacian on Unsplash
86. Thank you, dear artists!
Photo by bruce mars on Unsplash Photo by Ashwini Chaudhary on Unsplash Photo by Ashton Mullins on Unsplash
Photo by Florian Klauer on Unsplash Photo by Olena Sergienko on Unsplash Photo by Falaq Lazuardi on Unsplash