SlideShare a Scribd company logo

Essential html tweaks for accessible themes

Presentation for the WordPress Accissibility Day 2nd - 3rd October, 2020

1 of 86
Download to read offline
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

Recommended

Alt tab - better apex tabs
Alt tab - better apex tabsAlt tab - better apex tabs
Alt tab - better apex tabsEnkitec
 
APEX navigation concepts
APEX navigation conceptsAPEX navigation concepts
APEX navigation conceptsTobias Arnhold
 
Custom Template for Joomla! 3
Custom Template for Joomla! 3Custom Template for Joomla! 3
Custom Template for Joomla! 3Carly Willats
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPressNile Flores
 
JD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsJD17NL Joomla! Overrides and alternate layouts
JD17NL Joomla! Overrides and alternate layoutsHans Kuijpers
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Joomla Custom Fields - the next level
Joomla Custom Fields - the next level Joomla Custom Fields - the next level
Joomla Custom Fields - the next level Hans Kuijpers
 

More Related Content

What's hot

Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...
Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...
Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...Nicholas Dionysopoulos
 
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16Jeseph Meyers
 
Joomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationJoomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationAndy Wallace
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesAndy Wallace
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Joao Lucas Santana
 
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaReno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaDre Armeda
 
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Juliano Martins
 
Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Rod Martin
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesJared Smith
 
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without SwearingCreating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearingmartinwolak
 
Joomla Day UK 2009 Menus Presentation
Joomla Day UK 2009 Menus PresentationJoomla Day UK 2009 Menus Presentation
Joomla Day UK 2009 Menus PresentationChris Davenport
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentBrad Williams
 
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2Loiane Groner
 
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)Bastian Grimm
 
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009Ramon Durães
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Doris Chen
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikMario Peshev
 

What's hot (20)

Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...
Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...
Joomla! Frappe - Κατασκευή εφαρμογών για το Joomla! χωρίς να τραβάτε τα μαλιά...
 
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
 
Joomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus PresentationJoomla! Day UK 2009 Menus Presentation
Joomla! Day UK 2009 Menus Presentation
 
Create a landing page
Create a landing pageCreate a landing page
Create a landing page
 
Joomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic TemplatesJoomla! Day UK 2009 Basic Templates
Joomla! Day UK 2009 Basic Templates
 
Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)Desenvolvimento web com Ruby on Rails (parte 6)
Desenvolvimento web com Ruby on Rails (parte 6)
 
lecture5
lecture5lecture5
lecture5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre ArmedaReno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
Reno-Tahoe WordCamp 2011 - WordPress End User Security - Dre Armeda
 
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
 
Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3
 
Keyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility TechniquesKeyboard and Interaction Accessibility Techniques
Keyboard and Interaction Accessibility Techniques
 
Creating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without SwearingCreating WordPress Theme Faster, Smarter & Without Swearing
Creating WordPress Theme Faster, Smarter & Without Swearing
 
Joomla Day UK 2009 Menus Presentation
Joomla Day UK 2009 Menus PresentationJoomla Day UK 2009 Menus Presentation
Joomla Day UK 2009 Menus Presentation
 
Intro to WordPress Plugin Development
Intro to WordPress Plugin DevelopmentIntro to WordPress Plugin Development
Intro to WordPress Plugin Development
 
TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2TDC2013: Arquitetura de apps com Sencha Touch 2
TDC2013: Arquitetura de apps com Sencha Touch 2
 
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
Hardening WordPress - SAScon Manchester 2013 (WordPress Security)
 
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
Introdução ao Microsoft Silverlight 2.0 - Campus Party Brasil 2009
 
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
 
Build a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ TelerikBuild a WordPress theme from HTML5 template @ Telerik
Build a WordPress theme from HTML5 template @ Telerik
 

Similar to Essential html tweaks for accessible themes

Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSTimo Herttua
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Paxcel Technologies
 
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box TechnologyBringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technologyjoelsef
 
Markup language classification, designing static and dynamic
Markup language classification, designing static and dynamicMarkup language classification, designing static and dynamic
Markup language classification, designing static and dynamicAnkita Bhalla
 
HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project Ankit Gupta
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample materialVskills
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtmlFkdiMl
 
HTML - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup languageBasmaa Mostafa
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsNikita Garg
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsMinea Chem
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsxu fag
 

Similar to Essential html tweaks for accessible themes (20)

Day1
Day1Day1
Day1
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
HTML practical file
HTML practical fileHTML practical file
HTML practical file
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box TechnologyBringing Zest to SharePoint Sites Using Out-of-the-Box Technology
Bringing Zest to SharePoint Sites Using Out-of-the-Box Technology
 
Markup language classification, designing static and dynamic
Markup language classification, designing static and dynamicMarkup language classification, designing static and dynamic
Markup language classification, designing static and dynamic
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project HTML (Hyper Text Markup Language) Project
HTML (Hyper Text Markup Language) Project
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample material
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
HTML - hypertext markup language
HTML - hypertext markup languageHTML - hypertext markup language
HTML - hypertext markup language
 
Html
HtmlHtml
Html
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptxppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
 

Recently uploaded

Model Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfModel Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfgalfinprihardiputra0
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonAPNIC
 
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Prometix Pty Ltd
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Damar Juniarto
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonAPNIC
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPTPraveenKumarThota7
 

Recently uploaded (6)

Model Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdfModel Jaringan network jaringan komputer.pdf
Model Jaringan network jaringan komputer.pdf
 
NANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff HustonNANOG 90: 'BGP in 2023' presented by Geoff Huston
NANOG 90: 'BGP in 2023' presented by Geoff Huston
 
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
Elevate Your Business: Unleashing Collaboration and Efficiency through Expert...
 
Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023Regulation is Coming - Trusted Media Summit 2023
Regulation is Coming - Trusted Media Summit 2023
 
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff HustonDNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
DNS-OARC 42: Is the DNS ready for IPv6? presentation by Geoff Huston
 
Biometrics Technology Intresting PPT
Biometrics Technology Intresting PPTBiometrics Technology Intresting PPT
Biometrics Technology Intresting PPT
 

Essential html tweaks for accessible themes

  • 1. Essential HTML tweaks for accessible themes By Martin Stehle For the WordPress Accessibility Day October 2nd & 3rd, 2020
  • 2. For whom?  Frontend developers  Theme authors  Plugin authors
  • 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
  • 9. Define Page Language: Failures  Not to tell the language of the web page
  • 10. Define Page Language: How to  In HTML element: lang attribute <html lang="pt-BR">
  • 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'
  • 21. That was just a warm-up. Now the journey begins...
  • 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.“
  • 28. Think of... Text is king! (The rest is entourage.)
  • 29. Always give structure! (Separate content and design! Mark up content!) Think of...
  • 30. Think of... Keyboard first! (Mouse, speaker etc. second...)
  • 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.
  • 60. User's benefits  Keyboard support  Bypass blocks  Focus  Links
  • 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