A presentation at Internal by Todd Libby
HEADINGS AND ACCESSIBILITY
HEADINGS MAIN FOUNDATION OF A PAGE SO USERS CAN EASILY READ THE CONTENTS OF A PAGE.
HEADING LEVELS HAVE MEANING
BENEFITS USERS OF SCREEN READERS & ASSISTIVE TECHNOLOGY
BENEFITS SEMANTIC MARKUP & WELL-STRUCTURED HEADINGS BENEFIT SEO & READERS OF THE SITE.
A HEADING CAN BE USED WHERE HEADING CONTENT IS EXPECTED. HEADING CONTENT DEFINES THE HEADER OF A SECTION (WHETHER EXPLICITLY MARKED UP USING SECTIONING CONTENT ELEMENTS OR IMPLIED BY THE HEADING CONTENT ITSELF). ⎯ The HTML Living Standard, The H1, H2, H3, H4, H5, And H6 Elements
GOOD •ONE <H1> PER PAGE. •USE HEADINGS TO DESCRIBE THE CONTENT BELOW. •DO NOT USE A HEADING JUST TO MAKE TEXT STAND OUT. •USE HEADINGS LIKE A TABLE OF CONTENTS IN A BOOK. HIERARCHICAL. •CHOOSE A HEADING BY CONTEXT, NOT BY HOW YOU’RE GOING TO STYLE IT. •DO NOT AT ANY TIME SKIP A HEADING LEVEL AT ALL.
BAD •USING <H2> FOR QUOTES. <CITE> OR <Q> SHOULD BE USED INSTEAD. •DON’T USE AN <H4> AS THE FIRST PARAGRAPH OF TEXT BECAUSE IT LOOKS LIKE DEFAULT TEXT. •USING A <H2> AS THE “DEFAULT” HEADING FOR EVERY SECTION ON EVERY PAGE. •MULTIPLE <H1> ON A PAGE. •OMITTING HEADINGS BECAUSE OF A DESIGN. •LEAVING HEADINGS EMPTY.
HIERARCHICAL
YOU CAN START WITH AN H1 : : : : : : : : : h1 title of article h2 subheading in the content of the article h3 subheading of the h2 h4 subheading of the h3 h2 subheading in the content of the article h2 Related article (the aside section) h2 Contact us (in the footer) h3 Address (the address information) h3 Follow us (social media links)
YOU CAN START WITH AN H2 h2 h2 : : : : : : : : : : : : : : h1 main menu sidebar h3 More news h3 Testimonials h3 About us title of article h2 subheading in the content of the article h3 subheading of the h2 h4 subheading of the h3 h2 subheading in the content of the article h2 Related article (the aside section) h2 Contact us (in the footer) h3 Address (the address information) h3 Follow us (social media links)
WCAG GUIDELINES
1.3.1 INFO & RELATIONSHIPS INFORMATION, STRUCTURE, AND RELATIONSHIPS CONVEYED THROUGH PRESENTATION CAN BE PROGRAMMATICALLY DETERMINED OR ARE AVAILABLE IN TEXT.
EXPLAINED SIGHTED USERS PERCEIVE STRUCTURE AND RELATIONSHIPS THROUGH VISUAL CUES. BOLD FONTS, BULLETED LIST ITEMS, INDENTED TEXT, SPACES BETWEEN PARAGRAPHS, ETC.
HEADINGS GIVE SCREEN READER USERS CUES THOUGHT THE ASSISTIVE TECHNOLOGY TO WHERE THEY ARE ON A PAGE.
HEADINGS CREATE AN OUTLINE FOR A PAGE.
• H1: My Favorite Recipes • H2: Quick and Easy • H3: Lobster Dumplings • H3: Lobster in Soups • H4: Lobster Bisque • H4: Lobster Chowder • H4: Seafood Chowder • H2: Some Assembly Required • H3: Lobster Rolls • H3: Lobster Spaghetti • H4: Lobster Ravioli • H4: Lobster Scampi • H2: All-In • H3: Boiled Lobster Dinner • H3: Baked Lobster Dinner
2.4.1 BYPASS BLOCKS A MECHANISM IS AVAILABLE TO BYPASS BLOCKS OF CONTENT THAT ARE REPEATED ON MULTIPLE WEB PAGES
EXAMPLE SKIP TO CONTENT LINKS
2.4.6 HEADINGS & LABELS HEADINGS AND LABELS DESCRIBE PURPOSE
HEADINGS DO NOT NEED TO BE LENGTHY. JUST DESCRIPTIVE.
2.4.10 SECTION HEADINGS SECTION HEADINGS ARE USED TO ORGANIZE THE CONTENT
WE DON’T DO LEVEL AAA, TODD!
AIM FOR AAA LEVEL IT WON’T HURT.
3.2.3 CONSISTENT NAVIGATION LEVEL NAVIGATIONAL MECHANISMS THAT ARE REPEATED ON MULTIPLE WEB PAGES WITHIN A SET OF WEB PAGES OCCUR IN THE SAME RELATIVE ORDER EACH TIME THEY ARE REPEATED, UNLESS A CHANGE IS INITIATED BY THE USER.
AGAIN… JUST USE CONSISTENT PRESENTATION AND LAYOUT FOR USERS WHO INTERACT WITH REPEATED CONTENT.
ARIA YES! YOU CAN USE ARIA!
role=“heading” AND aria level
/ <
<div role=”heading” aria level=”2”>This is a heading level two! div>role=“heading” IS WELLSUPPORTED BY SCREEN READERS!
USE CASES
•FIX THE HEADING STRUCTURE OF LEGACY CODE WITHOUT ALSO NEEDING TO ADJUST THE CSS. THIS IS A QUICK FIX THAT MAKES SENSE. •USE A DIV, WITH A ROLE OF HEADING AND AN ARIA-LEVEL, TO AVOID HAVING TO REMOVE THE NATIVE HEADING CSS STYLING. NOT SUGGESTED AS A METHOD. •ADD A LEVEL LARGER THAN 6.
REMEMBER! THE FIRST RULE OF ARIA FIGHT CLUB!
DON’T USE ARIA!
DON’T USE ARIA! UNLESS YOU REALY, REALLY, REALLY, REALLY HAVE TO.
DESIGN • TWO <H1>’S - NO. BAD PRACTICE/MEANINGLESS STRUCTURE. • IS THE LOGO A HEADING. PROBABLY NOT. LOGOS ARE REOCCURRING COMPONENTS. • ONE <H1> AND SUBSEQUENT HIERARCHICAL HEADINGS GOOD FOR SEO & A11Y. • DESCRIPTIVE HEADINGS. • DON’T USE ALL CAPS! HARDER TO READ FOR SOME. • DON’T STYLE HEADINGS CHAOTICALLY. USE A DESIGN SYSTEM/HIERARCHICAL FONT SIZES.
DEVELOPMENT • GIVE THE CONTENT MANAGER THE OPPORTUNITY TO ADD OR CHANGE A HEADING WHILE ADDING A COMPONENT. • IF A COMPONENT IS ADDED BY THE THEME: CHANGE THE HEADING LEVEL AS NEEDED IN THE CODE. • MOST COMPONENTS HAVE THEIR OWN HEADINGS. • THAT HEADING SHOULD FIT THE STRUCTURE OF THE PAGE.
SEO • SEARCH ENGINES LOVE TEXT, CONTENT, WRITTEN WORD. • SEARCH ENGINES CAN INDEX PAGES BETTER AND FASTER. • HEADINGS ACT AS SIGNPOSTS FOR USERS AND SEO. • HEADINGS DEFINE WHAT PARTS OF CONTENT ARE IMPORTANT. • WELL-STRUCTURED HEADINGS BENEFIT SEO AND THE READER.
THANKS!
Talking about headings and accessibility.
for free. You
can too.