Revised version of my presentation - first delivered to WordCamp Manchester in 2019.
Presentation looks at some small tweaks to HTML and CSS that can make your site a little more accessible.
Covers: SVG images, screen reader text, some CSS to help when building your web templates/themes, and some CSS that can help show your content authors where they may have made some accessibility mistakes.
2. @coolfields
A bit about me
2
I’m a…
• Web Accessibility
Consultant
• WordPress
Developer
Photo by Mike Pead
3. @coolfields
What I'm going to cover
Some small tweaks we can make when building accessible WP
themes for ourselves and our clients.
Specifically I'll be looking at:
• Using SVG images in an accessible way.
• CSS techniques that help with accessibility.
4. @coolfields
Using SVG
• SVG images are vector graphics, as opposed to raster or bitmapped
images like jpeg, png or gif.
• SVG images are described by the lines and blocks and other shapes,
combined to make up an entire images.
• This means that they can be infinitely scaled without any pixellation.
• And the file sizes are generally smaller than corresponding jpeg, png
or gif.
• But can they be accessed by assistive technology users?
6. @coolfields
Adding SVG files to web pages
Uses the trusty <img> element with the alt attribute to give
the accessible label…
<img src="https://path/images/home.svg"
alt="My logo">
So we're done here aren't we??
7. @coolfields
Using role="img" with SVG files
Well, SVG support within screen reader is still in its infancy,
so we need a helping hand from ARIA here...
<img src="https://path/images/home.svg"
alt="My logo" role="img">
This ensures that all screen readers can 'see' this image.
8. @coolfields
SVG files as links
Now the destination is the important bit, so that's what the
alt attribute should refer to.
<a href="/">
<img src="https://path/images/home.svg"
role="img" alt="Home Page">
</a>
10. @coolfields
Inline SVG in web pages
Example of inline SVG…
<svg version="1.1" width="100" height="75">
<rect width="75" height="50" rx="20" ry="20"
fill="#90ee90" stroke="#228b22"
stroke-fill="1" />
</svg>
11. @coolfields
The challenge of inline SVG…
• Inline SVG is invisible to screen readers
• There is no <img> element
• And there is no alt attribute you can use to give it some
alternate text.
12. @coolfields
Using <title> with inline SVG
To solve the issue, you can use the <title> element within the
<svg> wrapper.
But also, connect it with the aria-labelledby attribute so all
screen readers can access the text in the <title> element.
And we still need the role="img" too.
13. @coolfields
Using <title> with inline SVG
So we end up with this…
<svg version="1.1" width="100" height="75" aria-
labelledby="title" role="img">
<title id="title">Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20"
fill="#90ee90" stroke="#228b22" stroke-fill="1"
/>
</svg>
14. @coolfields
Using <title> with inline SVG
Using the <title> element in <svg> container has an unexpected effect
in some browsers…
A hover over tooltip. A bit like you get with the title attribute on other
HTML elements...
15. @coolfields
Using <desc> with inline SVG
So alternatively, use <desc> element within the <svg> wrapper.
Once again, use aria-labelledby.
<svg version="1.1" width="100" height="75" aria-
labelledby="desc01" role="img">
<desc id="desc01">Green rectangle</desc>
<rect width="75" height="50" rx="20" ry="20"
fill="#90ee90" stroke="#228b22" stroke-fill="1"
/>
</svg>
20. @coolfields
Getting SVG into WordPress pages
• No native support for SVG in Media Manager.
• We'd need to paste SVG into pages/posts.
• Or need to rely on a plugin…
• There are a few available, but these next two seem the most
popular.
• But can they give us accessible SVG??
21. @coolfields
SVG Support plugin
https://wordpress.org/plugins/svg-support/
Does not include role in <img> tag, but does include alt.
Does not include role in <svg> tag, does not include <title> element in
inline SVG.
Plugin author is aware and has responded positively to my comments:
https://wordpress.org/support/topic/suggestions-for-improving-
accessibility/
23. @coolfields
CSS Accessibility Hacks
CSS techniques can be used to help ensure accessibility within
websites:
• Providing extra context for links, buttons and other
elements
• Help with testing accessibility during theme development
• Accessibility help for content authors once a site is live
25. @coolfields
Why screen reader text
What's it for?
A way of providing extra information for screen reader users that is not
seen by sighted users.
Can be used to:
• Provide real text when icons are used
• Provide skip links
• Disambiguate links like 'Read more' on a blog index page
26. @coolfields
How to use screen reader text
Define a class in your CSS
.accessibleHidden{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute !important;
}
27. @coolfields
How to use screen reader text
Use the class in your HTML
<span class="accessibleHidden">This is hidden from
sighted users, but accessible by screen
readers</span>
Don't use these styles, as they will hide content from screen
readers as well:
• display:none
• visibility:hidden
29. @coolfields
It's used in WordPress admin
Screen reader text can be found in the WP admin screens.
30. @coolfields
Wouldn't aria-label do the same?
To a point, yes. aria-label can be used on elements with set
roles - like links, buttons, dialogues, etc.
But aria-label won't work for plain text items…
• Alternatives to icons in product comparison tables
• Explaining what values mean on pages.
32. @coolfields
Ensuring landmarks are used properly
Wait, landmarks? What are they?
• A way of defining discrete regions of a page.
• For example banner, navigation, main content, etc.
• Increasingly used by screen reader users to help them
navigate around pages.
• Sometimes indicated by role="navigation", role="main",
etc
33. @coolfields
Ensuring landmarks are used properly
And if you think you're not using them, you probably are anyway -
if you use these HTML5 elements:
• <nav>
• <main>
and in certain situations…
• <header>, <footer>
• <section>, <article>
These are all understood as landmarks, by screen readers.
34. @coolfields
Ensuring landmarks are used properly
<header role="banner">
<nav role="navigation">
<footer role="contentinfo">
<main role="main"> <aside role=
"complementary">
<form role="search">
35. @coolfields
Ensuring landmarks are used properly
The key thing is if you're using them, they need to be used
properly.
And all content on the page needs to be in at least one
landmark, or screen reader users may miss key bits.
You can use a browser extension to highlight the landmarks
on a page, but it's not always possible to see whether or not
all content is within one.
38. @coolfields
accessibility.css
Now we want to 'unselect' <header> and <footer> elements that are
contained within <main>, <article>, <nav> and <section> - these
are not counted as landmarks by browsers and screen readers.
main header, article header, aside header,
nav header, section header,
main footer, article footer, aside footer,
nav footer, section footer {
background-color: transparent;
outline:none;
}
39. @coolfields
What does that look like?
Note that the
breadcrumb
navigation is not
contained within
any of the
landmarks.
40. @coolfields
So what else could we do?
Images without alt attributes:
img:not([alt]) {
outline: solid 3px red;
}
SVG files without the role="img" attribute:
img[href$=".svg"]:not([role="img"]) {
outline: solid 3px red;
}
41. @coolfields
So what else could we do?
Empty links:
a:not([name]):empty {
outline: solid 3px red;
}
Empty buttons:
button:empty {
outline: solid 3px red;
}
42. @coolfields
So what else could we do?
Images where the title attribute has been used:
img[title] {
outline: solid 3px red;
}
43. @coolfields
So what else could we do?
Links with title attributes, or that open a new window:
a[title], a[target] {
outline: solid 3px gold;
}
Images with empty alt attributes:
img[alt=""] {
outline: solid 3px gold;
}
46. @coolfields
Content authors can spoil the party
A WordPress website with a fully accessible theme won't stay accessible
for long if your content authors aren't aware how they can affect
accessibility of pages and posts.
Examples:
• Empty headings
• Forgetting to add meaningful alternate text for images
• Links that open a new window/tab
• Links with title attributes
So how can CSS help here?
47. @coolfields
Hooking into post/page preview
Most content authors will preview their posts or pages before submitting
them for review or putting them live.
So let's have some diagnostic CSS definitions in our main CSS file that
will show up when users preview.
Sadly, there is no 'preview' class that is included in the <body> element
by default.
But we could use the 'logged-in' class…
49. @coolfields
Adding some warnings with CSS…
Looking for images with blank alt attribute, and links that
open a new window.
.logged-in img[alt=""],
.logged-in a[target] {
outline: solid 3px gold;
}
53. @coolfields
So let's try it out
Link with title attribute
present
Image with empty alt
attribute
Link that opens new window
Empty header
54. @coolfields
And now it's a plugin…
https://wordpress.org/plugins/content-author-accessibility-preview/
On GitHub:
https://github.com/boswall/Content-Author-Accessibility-Preview
I work with organisations to help them improve the accessibility of their digital offerings. Do accessibility testing and guide designers and developers in solutions to the issues found.
WordPress developer – have built many accessible websites using WordPress.
I've delivered presentations to WordCamps in London, Sheffield, Edinburgh, Lancaster, Bournemouth – and a number of WordPress meetup groups.
This is me in Sheffield a couple of years ago. The presentation is called So, How Do I Know if My WordPress Website is Accessible and focusses on easy accessibility tests that you can do on your own WordPress website.
If you've not seen me do that one – and I know that some of you have - the slides are still on Slideshare , and the deck has been viewed over 12,000 times now.