Essential html tweaks for accessible themes

Essential HTML tweaks
for accessible themes
By Martin Stehle
For the WordPress Accessibility Day
October 2nd & 3rd, 2020

For whom?
 Frontend developers
 Theme authors
 Plugin authors

Topics in this presentation
 WCAG conformance levels A & AA („must fullfill & shall fulfill“)
 WCAG techniques categorized as „sufficient“
 HTML
 Relevant WordPress functions

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)

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

What you will get
 A soft warm-up
 The Big Journey
 User's benefits

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

Define Page Language: Failures
 Not to tell the language of the web page

Define Page Language: How to
 In HTML element: lang attribute
<html lang="pt-BR">

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

Define Language Changes
 Tell other software which human language the
text part has
 E.g. for quotes, abbreviations, names etc.

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>

Reading directions: How to
 In HTML elements: dir attribute:
 <html lang="en">
...
<p>The doctors says: <span lang="ar"
dir="rtl">‫/<أحسنت‬span></p>

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“

Page Titled
 Help the user to identify the web page
 Good page titles improves the orientation within
a website

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

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)

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

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'

That was just a warm-up.
Now the journey begins...

Think about that
„A web page
is a
purely visual
mouse-controlled
interface.“

In reality:
„A web page
is a
sequence of content and interactive elements
controlled by different technologies
for different ways of presentation.“

Developer’s Mindset
for accessible web pages

Think of...
Text is king!
(The rest is entourage.)

Always give structure!
(Separate content and design! Mark up content!)
Think of...

Think of...
Keyboard first!
(Mouse, speaker etc. second...)

The Big Journey
 Structure: Informations and relationships
 Meaningful sequence of the content
 Alternatives for non-text contents

 The Big Journey: Structure
 Continuous texts
 Forms
 Tables

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)

Continous texts: Failures
 No use of structural elements
<div class="header">..</div>
...<br>
<br>
<img src="bullet.gif"> ...<br>
<img src="bullet.gif"> ...

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

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

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

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

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>

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

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

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>

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

Forms: How to WordPress Forms
 To get consistent forms in the backend use:
<?php
settings_fields( ... );
 do_settings_sections( ... );
 submit_button();
?>

Forms: How to WordPress Forms
 Prepare the form with
 add_settings_field( ... )
 register_setting( ... )
 Since WP 4.7.0

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

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

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

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

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>

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>>

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

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;)

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/

 Big Journey: Non-text contents
 Videos and Audios
 Applets and other objects
 Images

 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

 Applets,Objects: How to
 Where to put text alternatives?
 Use the alt attribute of APPLET elements
 Use the body of the OBJECT element

 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/

 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.

User's benefits
 Keyboard support
 Bypass blocks
 Focus
 Links

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

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>

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">

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

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">

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

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 3.2.4, conformation level AA

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)

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

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()
)
);

Links: How to
 On the webpage:
 In a screen reader’s list of links

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>

Links: How to
 Use OL, UL and DL for groups of links
 Group related links using the NAV element

User's benefits: NAV Elements
 For lists of links to give orientation
 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/

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

Focus Order: Failures
 The tabindex attribute does not follow logical
sequences
 No use of CSS pseudo class :focus

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 { ... }

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

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">

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">

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

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

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

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

Essential html tweaks for accessible themes

More Related Content

What's hot

Similar to Essential html tweaks for accessible themes

Recently uploaded

Essential html tweaks for accessible themes