Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
A bunch of small accessibility tweaks that WordPress theme builders can make to improve the accessibility of their products.
Contains a section on making SVG files accessible to screen reader users. And then some CSS techniques that can help trap accessibility gotchas when building themes, and for content authors when they preview posts or pages.
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
A bunch of small accessibility tweaks that WordPress theme builders can make to improve the accessibility of their products.
Contains a section on making SVG files accessible to screen reader users. And then some CSS techniques that can help trap accessibility gotchas when building themes, and for content authors when they preview posts or pages.
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
An overview of the current state of Vector graphics on the web, why we would want to use them, what the options are. Presented to the Boston Ruby group at the January 2011 meeting.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
SVG is often used for content, linked icons, and buttons. Learn which coding methods perform best across a variety of screen reader and browser combinations. By @DennisL
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
JsViews - Next Generation jQuery TemplatesBorisMoore
Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.
jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.
Presentation for the Denver HTML5 Users Group on advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.
SVG is often used for content, linked icons, and buttons. Learn which coding methods perform best across a variety of screen reader and browser combinations. By @DennisL
HTML5 contains many new interesting features that make the platform a capaple development platform. Sockets, SVG, geolocation, local storage and many more are included in the platform. In this one hour session, we will look at cool implementations of 10 features of HTML5
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
JsViews - Next Generation jQuery TemplatesBorisMoore
Come and see the future of jQuery Templates, as it moves from Beta1 towards a V1 product. The new jQuery Templates is taking two forms: JsRender – lean and mean, for fast rendering of templates as strings, and JsViews – for powerful interactive browser apps in which Data Link and Templates work hand-in-hand. See how with declarative data linking and templating together, creating powerful data-driven UI is easy, whether using MVVM patterns or binding directly to JSON, and whatever the richness or complexity of the underlying data.
jQuery UI is already building its future data-bound widgets on top of this technology. With JsViews and JsRender integration between jQuery UI controls and your own data and UI becomes trivially straightforward.
Presentation for the Denver HTML5 Users Group on advanced HTML techniques.
Focuses, specifically, on semantic markup (POSH), new HTML5 structural elements, microformats, microdata and ARIA landmark roles
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.
You know it's important for your web project to be accessible to people who use all kinds of assistive technology to access the internet. But all the guidelines for web accessibility you can find don't go much beyond "make sure all your images have alt text", and all the resources you can find treat "accessibility" as a synonym for "making your site work in a screen reader". You know there are other things you should be doing and other forms of assistive technology you should be accomodating, but all the best practices documents are a complicated morass of contradicting information (if you can find best practices documents at all.)
Have no fear! This tutorial gives you a number of concrete steps to take to make things more accessible.
This presentation has downloadable notes and exercises available at http://denise.dreamwidth.org/tag/a11y . Video of the talk should be available later.
Today’s designers when asked about HTML5 do hesitate to answer because of the lack of knowledge about HTML5.A Free Ebook On HTML 5 Step by Step Guide..
HTML5 and CSS3 offer some great features that everyone is clamoring to use. However, not everyone can simply rip apart their site and redo all of their markup and styling across the board. There are some quick wins, especially with CSS3, to be had that you can integrate into your site without rewriting your whole entire site.
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
End-users are shallow and vein when it comes to applications. Whether you are selling apps in the marketplace, or trying to engage business users, without a sexy user experience, it can be hard to get people interested. HTML5, although very practical and functional as a platform, can do wonders when it comes to making sexy software. In this session, we will take a deeper dive into the HTML5 tools that can make your application a looker and really look good. We will learn how to take a regular HTML5 application and turn it into a rich user experience that stands out in the crown in HTML5 application using features like SVG, Canvas, and Audio/Video.
Useful Accessibility Tools Version 3 - Jul 2021Graham Armfield
A collection of tools used to check websites for accessibility, and it some cases improve the accessibility of a website. All the tools are free, so have a go.
So how do i know if my wordpress website is accessible - WordPress Accessibil...Graham Armfield
Testing websites for accessibility can be a daunting undertaking if it's not something you're familiar with. The WCAG 2.1 accessibility guidelines can be hard to follow. But actually, many aspects of digital accessibility are not that complicated.
In this talk I move away from the impenetrable guidelines, and introduce a simpler series of yes/no questions that anyone can answer about their own website. In the time available it can't cover every single potential accessibility problem, but instead I focus on some of the most common, and most serious accessibility issues that I've found when reviewing websites. Where possible, I'll also talk about how you can fix any issues founds.
A look at some useful accessibility tools.
These tools help test websites for accessibility, and there are a couple of WordPress plugins that can help improve a website's accessibility.
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.
Useful Accessibility Tools - WP Pompey April 2019Graham Armfield
Updated version of my presentation showing some useful tools people can use to test out the accessibility of their site.
The tools range from hardware - ie using a keyboard, through browser extensions and favlets, to a couple of WordPress plugins that can help improve the accessibility of a WordPress website.
Some of the tools can also be used by those with disabilities or impairments to more easily access and deal with websites that are not fully accessible.
In an era where the number of web accessibility legal actions is growing rapidly, it's important that those who build websites do what they can to make their websites accessible. Good accessibility also brings in more potential customers for your products or services - which is good for any business.
This presentation looks at some simple tricks and techniques to improve accessibility that can be incorporated when you're building a WordPress theme - either for yourself or for a client.
It also has a section on what to tell content authors and editors so that they don't mess up the accessibility of the website once you've built it.
Some useful accessibility tools to help test your site and development environment for accessibility, and can also potentially improve the accessibility of your website.
The slides that go with my Assistive Technology Demo as given to WordCamp Bristol on 13th May 2017.
I demo Dragon NaturallySpeaking - voice recognition software, and NVDA - a screen reader.
The slides introduce the demo - and contain a few of the common commands for each of the two pieces of software demoed.
Designing for Accessibility - WordCamp London 2017Graham Armfield
An updated and expanded version of this presentation that looks at how design decisions can affect the accessibility of a website.
Subjects covered:
- Use of colour, and colour contrast
- Catering for keyboard users
- Text and Content
- Placeholders and forms
Designing for Accessibility - Front End North - September 2016Graham Armfield
A lightning talk on Designing for Accessibility. A look at the accessibility implications of some common design patterns. Featuring:
- Colour contrast
- Using colour to convey meaning
- Text justification
- Placeholders
Obscure Wordpress Functions That Are Actually Quite UsefulGraham Armfield
Slides from a lightning talk delivered to WordPress London Meetup Group on 25th Feb 2016.
The presentation runs through some WordPress functions that I've found useful whilst building themes.
Themes Plugins and Accessibility - WordCamp London March 2015Graham Armfield
WordPress is used by over 20% of the world's websites. But how many accessible themes are there in the WordPress theme repository?
The answer is, "not many".
This presentation tries to demystify the recently introduced accessibility-ready tag within the theme review process. It's a tag that WordPress theme authors can use to indicate that their theme has good accessibility features. It's actually not that hard to achieve, and the web will be a better place if there were more accessibility-ready themes for people to choose from.
I also look at the impact WordCamp plugins can have on accessibility, and talk about whether the accessibility-ready principles could be used by plugin authors. The short answer, is that yes they can be useful.
Can WordPress help make the web more accessible - eaccess15 - Feb 2015Graham Armfield
WordPress is a CMS that now powers over 20% of the world's websites.
But how easy is it to create an accessible website using WordPress? What is there to help you, and what are the pitfalls?
And if you want to help make WordPress more accessible, there's a team of volunteers who would love to talk to you. Come and join in at: https://make.wordpress.org/accessibility/get-involved-1/
This slide deck formed the basis of a round table discussion that I chaired at eAccess15 in London on 24th March 2015.
There are over 2000 WordPress themes available on the WordPress theme repositiry. But only a small number are fully accessible.
Yet the accessibility guidelines available in the WordPress codex aren't hard to follow. And there is a new 'accessibility ready' tag that can be applied to themes that pass the extra accessibility test carried out when themes are reviewed.
This presentation looks at the accessibility part of the WordPress theme review process and describes what needs to be done to help a theme pass the test.
Even if you're not creating themes for the WordPress repository, but just creating them for your own website, or for a client, this presentation could be useful.
Wordpress and Web Accessibility Wordcamp UK 2014Graham Armfield
WordPress accessibility is improving, with some real strides over the last year. But is it changing fast enough?
This presentation covers some of the improvements that have been made with WordPress themes, and in the admin area. But I also cover some things that shouldn't have happened, and where we can learn from mistakes.
I also present my view of where WordPress should go next with accessibility.
Presentation delivered to ISTC (Institute of Scientific and Technical Communicators) Southern Area Group on May 13th 2014.
The presentation is an introduction to using WordPress, and how it can work for you if you need a website, for your business or your own personal blog.
I cover a bit about the history of WordPress, how it works, adding content, getting a WordPress website, and general maintenance when you've got one.
So How Do I Know if My Website is Accessible?Graham Armfield
Presentation I delivered on Global Accessibility Awareness Day - May 15th 2014. It was delivered as part of Inclusive Design 24 - 24 hours of accessibility webinars. The event was sponsored by the Paciello Group and Adobe.
The presentation is aimed at developers and website administrators who may have heard about accessibility, but who'd like to learn more.
It sets out a series of yes/no questions that anyone can answer about their own websites - using simple techniques and a couple of useful tools that you can download.
The presentation doesn't cover all aspects of web accessibility, but if you can answer these questions correctly about your website, then it's going to be more accessible than many.
Running a listing or job board site can be a great experience and generate ad revenue. But you don't really want to add all the listings in yourself - that can be a lot of work.
So why not get your site visitors to add it for you, but without having to give them all a WordPress login.
This presentation focuses on the key techniques you can use to accept user generated content via a form on your WordPress website. You can use these techniques in many different ways, eg: for gig listings, general events, classified ads, job boards, company profiles, etc.
So, How Do I Know if my WordPress Website is Accessible?Graham Armfield
Slides for a presentation I gave originally to WordCamp London on Saturday 23rd November 2013 and at many subsequent Wordcamps and WordPress meetups. The most recent occasion being WordPress Leeds on April 26th 2017 for which I revamped some of the slides to remove some outdated examples.
The WCAG 2 guidelines provide a comprehensive list of best practices for creating accessible websites. But there is a lot of information and the success criteria can be a bit impenetrable in places.
I've distilled down some common accessibility issues into a series of 16 yes/no questions that anyone can ask about their own website. If you can answer these questions correctly, your website will be more accessible than many.
The presentation poses the questions and shows some examples of problems that accessibility testers find, as well as pointing out some of the best practices to achieve good web accessibility.
Visit my website for some useful posts on accessibility techniques: http://www.coolfields.co.uk
Web Accessibility: What it is, Why it's importantGraham Armfield
Slides from a presentation I gave to an ISTC group meeting on November 12th 2013. The audience consisted mainly of technical authors - most of whom were not technically orientated.
The presentation is an introduction to web accessibility, and as well as a definition for web accessibility I presented some reasons why it's important to take it seriously. I looked at various types of disability and impairment, some examples of assistive technology, and some simple things that content authors can do to help keep their articles and posts accessible.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.